/* ============================================================
   Connect your AI agent (MCP) page, docs/mcp.html only (2026-09-25).
   Three drawn screens on top of the .nf-mock form in docs.css:
   Claude's Add custom connector dialog, the Askpilot sign-in consent
   step and a Claude chat answering from Askpilot. Light first, then the
   dark theme under html[data-theme="dark"] .has-dark, the docs.css way.
   ============================================================ */

/* a dialog, not a full page: narrower and centred in its well */
.nf-mock.mc-narrow { max-width: 440px; margin: 0 auto; }
.mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mc-x { flex: none; width: 12px; height: 12px; color: #6B7280; }
/* a field the reader has filled in: ink, not placeholder grey */
.nf-mock .nf-input.mc-val { color: #141C20; }
.nf-mock .nf-input.mc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9.5px; }
.mc-adv { display: flex; align-items: center; gap: 5px; margin-top: 12px !important; color: #6B7280; }
.mc-adv svg { width: 10px; height: 10px; }
/* Claude's own buttons are dark ink, not the app's pale blue */
.nf-btn.mc-btn-ink { border-color: transparent; background: #141C20; color: #fff; }

/* the consent step: two marks joined by a dotted line, a title, what it allows */
.mc-consent { text-align: center; }
.mc-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 12px; }
.mc-pair span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; }
.mc-pair img { width: 20px; height: 20px; }
.mc-pair i { width: 34px; border-top: 2px dotted #C5CAD1; }
.mc-consent .nf-h1 { font-size: 13px; }
.mc-consent .nf-sub { max-width: 300px; margin-left: auto !important; margin-right: auto !important; }
.nf-mock .mc-scope { list-style: none; margin: 12px auto 0; padding: 8px 12px; max-width: 320px; border: 1px solid #ECEEF1; border-radius: 8px; background: #F8FAFB; text-align: left; }
.nf-mock .mc-scope li { display: flex; align-items: flex-start; gap: 6px; margin: 3px 0; color: #374151; }
.nf-mock .mc-scope li svg { width: 10px; height: 10px; margin-top: 2px; color: #00A389; }
.mc-who { margin-top: 10px !important; color: #6B7280; }
.mc-consent .nf-actions { justify-content: center; }
.nf-btn.mc-btn-blue { border-color: transparent; background: #4C6BEE; color: #fff; }

/* the chat: a question on the right, the tool call, the answer, the composer */
.mc-chat { display: flex; flex-direction: column; gap: 10px; }
.mc-user { align-self: flex-end; max-width: 75%; padding: 6px 10px; border-radius: 10px; background: #F0EEE6; color: #141C20; font-size: 10.5px; }
.mc-tool { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #E5E7EB; border-radius: 7px; background: #fff; color: #4B5563; font-size: 9.5px; }
.mc-tool img { width: 12px; height: 12px; }
.mc-tool code { padding: 0; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; color: #141C20; }
.mc-tool svg { width: 9px; height: 9px; color: #9AA3AD; }
.mc-reply { display: flex; gap: 8px; align-items: flex-start; }
.mc-reply > img { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.mc-reply > div { flex: 1; min-width: 0; color: #141C20; font-size: 10.5px; line-height: 1.5; }
.mc-wf { margin-top: 6px; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; }
.mc-wf p { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid #ECEEF1; }
.mc-wf p:first-child { border-top: 0; }
.mc-wf b { font-weight: 600; }
.mc-wf small { display: block; font-size: 9px; color: #6B7280; }
.mc-pill { flex: none; padding: 1px 6px; border-radius: 99px; background: #DCFCE7; color: #166534; font-size: 8.5px; font-weight: 600; }
.mc-pill--off { background: #F3F4F6; color: #6B7280; }
.mc-compose { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 7px 10px; border: 1px solid #E5E7EB; border-radius: 10px; color: #9AA3AD; }
.mc-compose i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: #D97757; }
.mc-compose i svg { width: 9px; height: 9px; color: #fff; }

/* dark theme */
html[data-theme="dark"] .nf-mock.has-dark .mc-x, html[data-theme="dark"] .nf-mock.has-dark .mc-adv, html[data-theme="dark"] .nf-mock.has-dark .mc-who, html[data-theme="dark"] .nf-mock.has-dark .mc-wf small { color: #9CA3AF; }
html[data-theme="dark"] .nf-mock.has-dark .nf-input.mc-val { color: #E6E8EC; }
html[data-theme="dark"] .nf-mock.has-dark .nf-btn.mc-btn-ink { background: #E6E8EC; border-color: transparent; color: #121316; }
html[data-theme="dark"] .nf-mock.has-dark .nf-btn.mc-btn-blue { background: #4C6BEE; border-color: transparent; color: #fff; }
html[data-theme="dark"] .nf-mock.has-dark .mc-pair span { background: #191B20; border-color: #3D414A; }
html[data-theme="dark"] .nf-mock.has-dark .mc-pair i { border-color: #4B5058; }
html[data-theme="dark"] .nf-mock.has-dark .mc-scope { background: #191B20; border-color: #2A2D33; }
html[data-theme="dark"] .nf-mock.has-dark .mc-scope li { color: #CDD2DA; }
html[data-theme="dark"] .nf-mock.has-dark .mc-tool code { background: none; }
html[data-theme="dark"] .nf-mock.has-dark .mc-user { background: #2B2E35; color: #E6E8EC; }
html[data-theme="dark"] .nf-mock.has-dark .mc-tool { background: #191B20; border-color: #3D414A; color: #9CA3AF; }
html[data-theme="dark"] .nf-mock.has-dark .mc-tool code, html[data-theme="dark"] .nf-mock.has-dark .mc-reply > div { color: #E6E8EC; }
html[data-theme="dark"] .nf-mock.has-dark .mc-wf { border-color: #3D414A; }
html[data-theme="dark"] .nf-mock.has-dark .mc-wf p { border-color: #2A2D33; }
html[data-theme="dark"] .nf-mock.has-dark .mc-pill { background: #14361F; color: #86EFAC; }
html[data-theme="dark"] .nf-mock.has-dark .mc-pill--off { background: #2A2D33; color: #9CA3AF; }
html[data-theme="dark"] .nf-mock.has-dark .mc-compose { border-color: #3D414A; color: #6B7280; }

/* Tools table: tool names never break mid-word; each sits on its own line in
   a column wide enough for the longest name. */
.mc-tools td:last-child { min-width: 13em; }
.mc-tools td:last-child code { white-space: nowrap; display: inline-block; margin: 0 0 4px; }

/* ============================================================
   Connect Askpilot MCP (2026-09-30): the server URL with a copy
   button, a pill tab per AI agent, and each agent's short steps
   with a link to its own setup guide. Colours come from the docs
   theme tokens, so light and dark follow docs.css.
   ============================================================ */
.mc-connect { margin: 18px 0 8px; }
.mc-url { position: relative; padding: 14px 56px 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mc-url-h { margin: 0 0 4px !important; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mc-url code { display: block; padding: 0; background: none; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.mc-copy { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; }
.mc-copy:hover { color: var(--ink); }
.mc-copy svg { width: 16px; height: 16px; }
.mc-copy.is-copied { color: #00A389; border-color: #00A389; }
.mc-url .mc-copy { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.mc-ctabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.mc-ctab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.mc-ctab img { width: 18px; height: 18px; }
.mc-ctab:hover { background: var(--surface); }
.mc-ctab[aria-selected="true"] { background: var(--surface); border-color: var(--ink); }
.mc-cpane { padding: 18px 20px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mc-cwhere { margin: 0 0 6px !important; font-size: 0.8125rem; color: var(--muted); }
.mc-cpane ol { margin: 0 0 12px; padding-left: 20px; }
.mc-cpane li { margin: 6px 0; }
.mc-cmd { position: relative; margin: 8px 0 4px; padding: 10px 52px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream, transparent); }
.mc-cmd code, .mc-cmd pre { margin: 0; padding: 0; background: none; font-size: 0.8125rem; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.mc-cmd .mc-copy { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; }
.mc-guide { margin: 0 0 12px !important; }
.mc-guide a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.mc-guide svg { width: 14px; height: 14px; }
.mc-other { margin-top: 12px !important; font-size: 0.9rem; color: var(--muted); }