/* aichat — the AI assistant panel beside the terminal (notes/AI-CHAT-PANEL-PLAN.md §4).
   Look: notes/LIGHT-THEME-AND-CHAT-REDESIGN-PLAN.md §5 — a warm, quiet chat
   (cream page, soft greys, clay accent, humanist sans + serif prose), light by
   default, dark when the workspace theme is dark (web/sf-theme.js). Only the
   3270 CRT on the left is a green screen; amber marks "the AI is driving". */

/* ---- self-hosted open fonts (web/vendor/fonts, SIL OFL 1.1 — see web/vendor/LICENSES.md) ---- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(vendor/fonts/source-sans-3-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(vendor/fonts/source-sans-3-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(vendor/fonts/source-sans-3-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(vendor/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(vendor/fonts/source-serif-4-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(vendor/fonts/source-serif-4-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* light (default) — contrast on --ai-bg: fg 13.9:1, dim 5.5:1, acc 5.0:1, warn 5.9:1, red 6.2:1 */
  --ai-bg: #faf9f5;        /* the chat page (cream) */
  --ai-bg2: #f3f1ea;       /* header, sidebar, soft cards */
  --ai-surface: #ffffff;   /* composer, inputs, raised cards */
  --ai-hover: #ebe8df;
  --ai-sel: #e6e1d4;       /* active history row */
  --ai-line: #e5e1d6;
  --ai-line2: #d6d0c2;     /* input borders */
  --ai-fg: #2b2925;
  --ai-dim: #6b6559;
  --ai-acc: #a84a26;       /* clay accent (white text on it 5.7:1) */
  --ai-acc-hover: #923f1f;
  --ai-acc-ink: #ffffff;
  --ai-acc-soft: rgba(168, 74, 38, .10);
  --ai-me: #efebe1;        /* the user's bubble */
  --ai-code: #f1eee6;
  --ai-code-fg: #3b362e;
  --ai-ok: #2f7d4f;
  --ai-warn: #8f5300;
  --ai-warn-bg: #fbf1dc;
  --ai-warn-line: #ecd3a0;
  --ai-red: #b3261e;
  --ai-red-bg: #fbeceb;
  --ai-red-line: #efc4c0;
  --ai-blue: #2f63a8;      /* "speaking" */
  --ai-shadow: 0 1px 2px rgba(60, 50, 30, .06), 0 4px 16px rgba(60, 50, 30, .06);
  --ai-focus: #a84a26;
  /* the terminal overlays (caption, driving badge/ring) sit on the green CRT in both themes */
  --ai-amber: #ffb627;
  --ai-green: #a84a26;     /* legacy name: the accent slot (other stylesheets may read it) */
  --ai-sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ai-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ai-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ai-w: clamp(360px, 30vw, 520px);
}
html[data-theme="dark"] {
  --ai-bg: #262624; --ai-bg2: #1f1e1d; --ai-surface: #30302e; --ai-hover: #353431; --ai-sel: #3a3935;
  --ai-line: #3d3c38; --ai-line2: #4a4844; --ai-fg: #ece9e2; --ai-dim: #a8a399;
  --ai-acc: #d97a55; --ai-acc-hover: #e38b67; --ai-acc-ink: #1d1d1d; --ai-acc-soft: rgba(217, 122, 85, .14);
  --ai-me: #393835; --ai-code: #1d1c1b; --ai-code-fg: #e6e1d6;
  --ai-ok: #7cc79a; --ai-warn: #f0b45a; --ai-warn-bg: rgba(240, 180, 90, .08); --ai-warn-line: #6a5225;
  --ai-red: #f08a80; --ai-red-bg: rgba(240, 138, 128, .08); --ai-red-line: #6e3530;
  --ai-blue: #8db8f0; --ai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); --ai-focus: #d97a55; --ai-green: #d97a55;
}

/* ---- page layout: the terminal column + the panel ---- */
/* #sf-left is owned by web/sf-tabs.css (tab bar + stacked panes); the panel only needs it to be the flexible column beside it */
#sf-left { flex: 1 1 auto; min-width: 0; }
html.aichat-open body { flex-direction: row; align-items: stretch; justify-content: stretch; }
/* the terminal scales with the root font: shrink the vw factor so 82 columns fit beside the panel */
html.aichat-open, html.aichat-open body { font-size: clamp(10px, min(1.28vw, 2.5vh), 80px); }
html.aichat-open #aichat-toggle { display: none; }

#aichat-toggle {
  position: fixed; top: 14px; right: 16px; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  background: var(--ai-surface); color: var(--ai-fg); border: 1px solid var(--ai-line2); border-radius: 999px;
  padding: 6px 12px 6px 6px; font: 600 13px/1 var(--ai-sans); cursor: pointer;
  box-shadow: var(--ai-shadow);
}
#aichat-toggle .ai { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ai-acc); color: var(--ai-acc-ink); font: 700 11px/1 var(--ai-sans); letter-spacing: .02em; }
#aichat-toggle:hover { border-color: var(--ai-acc); }
#aichat-toggle:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
/* inside the workspace tab bar: a compact pill at the bar's right end */
#sf-tabbar #aichat-toggle { position: static; align-self: center; margin-left: 8px; padding: 3px 10px 3px 4px; font-size: 12.5px; box-shadow: none; }
#sf-tabbar #aichat-toggle .ai { width: 22px; height: 22px; font-size: 10px; }

/* ---- the panel ---- */
#aichat-panel {
  display: none; flex: 0 0 var(--ai-w); width: var(--ai-w); max-width: 100vw; height: 100vh; position: sticky; top: 0;
  flex-direction: column; background: var(--ai-bg); border-left: 1px solid var(--ai-line); color: var(--ai-fg);
  font: 14px/1.5 var(--ai-sans); z-index: 20; -webkit-font-smoothing: antialiased;
}
html.aichat-open #aichat-panel { display: flex; }
#aichat-panel button, #aichat-panel select, #aichat-panel input, #aichat-panel textarea { font-family: var(--ai-sans); }
#aichat-panel :focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
@media (max-width: 1000px) {
  html.aichat-open body { flex-direction: column; }
  #aichat-panel { position: fixed; right: 0; top: 0; width: min(100vw, 460px); box-shadow: -16px 0 48px rgba(40, 30, 10, .18); }
  html[data-theme="dark"] #aichat-panel { box-shadow: -16px 0 48px rgba(0, 0, 0, .55); }
}

#aichat-head { container-type: inline-size; display: flex; align-items: center; gap: 4px; padding: 9px 10px 9px 8px; border-bottom: 1px solid var(--ai-line); background: var(--ai-bg); }
#aichat-title { flex: 0 1 auto; display: flex; flex-direction: column; min-width: 0; padding-left: 2px; }
#aichat-title .brand { font: 650 14.5px/1.25 var(--ai-sans); color: var(--ai-fg); letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 480px) { #aichat-title .brand .long { display: none; } }   /* a narrow panel (phone, 1200 px desktop): "SteelFrame" alone rather than an ellipsis */
#aichat-sub { font-size: 12px; color: var(--ai-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the course button (course-linked-chat PLAN §3.1): the user's CURRENT course beside the title (was the "Start free
   courses" link, owner 2026-11-07); a long title is cut with an ellipsis, never wrapped; narrow panels keep the code */
#aichat-courses { box-sizing: border-box; flex: 0 1 auto; min-width: 0; max-width: 46%; display: inline-flex; align-items: center; gap: 5px; margin: 0 auto 0 6px; padding: 4px 11px 4px 9px; border: 0; border-radius: 12px; background: var(--ai-blue); color: var(--ai-acc-ink); font: 700 12.5px/1.15 var(--ai-sans); text-decoration: none; cursor: pointer; }
#aichat-courses .cl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aichat-courses.none { background: var(--ai-surface); color: var(--ai-fg); box-shadow: inset 0 0 0 1px var(--ai-line2); }
#aichat-courses svg { flex: none; }
#aichat-courses:hover { filter: brightness(1.12); }
#aichat-courses:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
@container (max-width: 480px) { #aichat-courses { max-width: 40%; } }
@container (max-width: 400px) { #aichat-courses { max-width: 92px; padding-left: 11px; } #aichat-courses svg { display: none; } }

/* the Courses view (PLAN §3.2): takes the panel like the Credits window */
#aichat-cv { flex: 1; overflow-y: auto; padding: 14px 16px; font-size: 13px; }
#aichat-cv .cr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 600 17px var(--ai-serif); }
#aichat-cv .cr-head .ic { display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--ai-line); color: var(--ai-fg); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-family: var(--ai-sans); }
#aichat-cv .cr-head .ic:hover { background: var(--ai-hover); }
#aichat-cv .cv-all { margin-left: auto; font: 600 12.5px var(--ai-sans); color: var(--ai-blue); text-decoration: none; white-space: nowrap; }
#aichat-cv .cv-all:hover { text-decoration: underline; }
#aichat-cv .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--ai-dim); margin: 14px 0 6px; }
#aichat-cv section:first-child .lbl { margin-top: 0; }
#aichat-cv .dim { color: var(--ai-dim); }
#aichat-cv .small { font-size: 11.5px; }
#aichat-cv .cv-note { padding: 7px 11px; border: 1px solid var(--ai-line); border-radius: 10px; background: var(--ai-bg2); margin-bottom: 10px; font-size: 12.5px; }
#aichat-cv .cv-note.err { color: var(--ai-red); border-color: var(--ai-red-line); background: var(--ai-red-bg); }
#aichat-cv .cv-cur { background: var(--ai-surface); border: 1px solid var(--ai-line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--ai-shadow); }
#aichat-cv .cv-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14.5px; }
#aichat-cv .cv-link { color: var(--ai-blue); text-decoration: none; font-weight: 600; font-size: 12px; white-space: nowrap; }
#aichat-cv .cv-link:hover { text-decoration: underline; }
#aichat-cv .cv-bar { height: 6px; border-radius: 999px; background: var(--ai-bg2); border: 1px solid var(--ai-line); margin: 8px 0 4px; overflow: hidden; }
#aichat-cv .cv-bar i { display: block; height: 100%; background: var(--ai-ok); border-radius: 999px; transition: width .3s; }
#aichat-cv .cv-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; }
#aichat-cv .cv-btn { font: 600 12px var(--ai-sans); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ai-line2); background: var(--ai-bg2); color: var(--ai-fg); cursor: pointer; white-space: nowrap; }
#aichat-cv .cv-btn:hover:not(:disabled) { background: var(--ai-hover); }
#aichat-cv .cv-btn.primary { background: var(--ai-acc); color: var(--ai-acc-ink); border-color: transparent; font-weight: 700; }
#aichat-cv .cv-btn.primary:hover:not(:disabled) { background: var(--ai-acc-hover); }
#aichat-cv .cv-btn.sm { padding: 3px 8px; font-size: 11.5px; }
#aichat-cv .cv-btn.quiet { background: transparent; border-color: transparent; color: var(--ai-dim); }
#aichat-cv .cv-btn.quiet:hover:not(:disabled) { color: var(--ai-fg); }
#aichat-cv .cv-btn:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
#aichat-cv ol.cv-sessions { list-style: none; margin: 6px 0 0; padding: 0; }
#aichat-cv .cv-s { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--ai-line); }
#aichat-cv .cv-s .cv-st { flex: 1 1 60%; min-width: 0; }
#aichat-cv .cv-s .cv-st .n { color: var(--ai-dim); font-family: var(--ai-mono); font-size: 12px; margin-right: 4px; }
#aichat-cv .cv-s .cv-st .cv-link { color: var(--ai-fg); font-weight: 500; white-space: normal; }
#aichat-cv .cv-s.done .cv-st .cv-link, #aichat-cv .cv-s.skipped .cv-st .cv-link { color: var(--ai-dim); }
#aichat-cv .cv-s .tag { font-size: 10.5px; color: var(--ai-warn); border: 1px solid var(--ai-warn-line); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
#aichat-cv .cv-badge { font: 600 11px var(--ai-sans); border-radius: 999px; padding: 2px 8px; background: var(--ai-bg2); color: var(--ai-dim); white-space: nowrap; }
#aichat-cv .cv-s .cv-acts .cv-video { font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--ai-line2); border-radius: 999px; background: var(--ai-bg2); color: var(--ai-blue); }
#aichat-cv .cv-s .cv-acts .cv-video:hover { background: var(--ai-hover); text-decoration: none; }
#aichat-cv .cv-badge.done { color: var(--ai-ok); }
#aichat-cv .cv-badge.active { color: var(--ai-warn); background: var(--ai-warn-bg); }
#aichat-cv .cv-acts { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: auto; }
/* the mini steps of a session (PLAN §9): a fold toggle, then one row per step - id, title (a link to its anchor on the
   course page), minutes, status badge; its ▶ Watch / Details / Teach me / Skip / Undo; the unfolded detail. Narrow
   panels (360 px) wrap the rows; long words break. */
#aichat-cv .cv-steps-wrap { flex: 1 1 100%; min-width: 0; margin-top: 2px; }
#aichat-cv .cv-btn.cv-tg { padding-left: 2px; font-weight: 600; }
#aichat-cv ol.cv-steps { list-style: none; margin: 2px 0 0 6px; padding: 0 0 0 10px; border-left: 2px solid var(--ai-line); }
#aichat-cv .cv-step { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; padding: 5px 0; border-top: 1px dashed var(--ai-line); min-width: 0; }
#aichat-cv .cv-step:first-child { border-top: 0; }
#aichat-cv .cv-step .cv-sp-head { flex: 1 1 100%; min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
#aichat-cv .cv-step .cv-sp-head .id { color: var(--ai-dim); font-family: var(--ai-mono); font-size: 11.5px; }
#aichat-cv .cv-step .cv-sp-head .cv-link { color: var(--ai-fg); font-weight: 500; font-size: 12.5px; white-space: normal; }
#aichat-cv .cv-step.done .cv-sp-head .cv-link, #aichat-cv .cv-step.skipped .cv-sp-head .cv-link { color: var(--ai-dim); }
#aichat-cv .cv-step .cv-sp-head .min { color: var(--ai-dim); font-size: 11px; white-space: nowrap; }
#aichat-cv .cv-step .cv-sp-acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; max-width: 100%; }
#aichat-cv .cv-step .cv-sp-acts .cv-video { font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--ai-line2); border-radius: 999px; background: var(--ai-bg2); color: var(--ai-blue); white-space: nowrap; }
#aichat-cv .cv-step .cv-sp-acts .cv-video:hover { background: var(--ai-hover); text-decoration: none; }
#aichat-cv .cv-sp-detail { flex: 1 1 100%; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--ai-fg); background: var(--ai-bg2); border-radius: 8px; padding: 6px 9px; margin-top: 2px; overflow-wrap: anywhere; }
#aichat-cv .cv-sp-detail p { margin: 0 0 4px; }
#aichat-cv .cv-sp-detail p:last-child { margin-bottom: 0; }
#aichat-cv .cv-sp-detail b { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ai-dim); font-weight: 700; }
#aichat-cv ul.cv-list { list-style: none; margin: 0; padding: 0; }
#aichat-cv ul.cv-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--ai-line); }
#aichat-cv ul.cv-list li.known .cv-ct { color: var(--ai-dim); }
#aichat-cv ul.cv-list li.current .cv-ct b { color: var(--ai-blue); }
#aichat-cv .cv-ct { flex: 1 1 55%; min-width: 0; }
#aichat-cv .cv-other { margin-top: 12px; }

/* "Tutor me" (PLAN §3.3): a pressed toggle beside the mode group */
#aichat-tutor { font: 600 12px/1.2 var(--ai-sans); margin: 4px 0 0 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ai-line); background: var(--ai-bg2); color: var(--ai-dim); cursor: pointer; white-space: nowrap; vertical-align: top; }
#aichat-tutor:hover { color: var(--ai-fg); background: var(--ai-hover); }
#aichat-tutor.on { background: var(--ai-ok); color: var(--ai-acc-ink); border-color: transparent; font-weight: 700; }
#aichat-tutor:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }

/* the answer chips under the last reply (PLAN §3.3) */
.msg .aiactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 2% 2px 0; }
.msg .aiactions.done { display: none; }
.msg .aiact { font: 600 12.5px var(--ai-sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ai-line2); background: var(--ai-surface); color: var(--ai-fg); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .aiact.primary { background: var(--ai-acc); color: var(--ai-acc-ink); border-color: transparent; }
.msg a.aiact.link { text-decoration: none; color: var(--ai-blue); display: inline-block; line-height: 1.2; }
.msg a.aiact.link:hover { text-decoration: underline; }
.msg .aiact:hover:not(:disabled) { filter: brightness(1.08); }
.msg .aiact:disabled { opacity: .55; cursor: default; }
.msg .aiact:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
/* "▶ Read aloud" under an assistant reply (server/aichat/speech.js); "■ Stop" while that reply is being read */
.msg .aispk-row { margin: 4px 0 0; }
.msg .aispk { font: 600 11.5px var(--ai-sans); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ai-line2); background: transparent; color: var(--ai-fg); opacity: .7; cursor: pointer; }
.msg .aispk:hover { opacity: 1; }
.msg .aispk.on { opacity: 1; background: var(--ai-surface); border-color: var(--ai-acc); }
.msg .aispk:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
#aichat-head .ic { display: inline-grid; place-items: center; background: transparent; border: 0; color: var(--ai-dim); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 15px; line-height: 1; }
#aichat-head .ic:hover { background: var(--ai-hover); color: var(--ai-fg); }
#aichat-head .ic.off { opacity: .5; }
/* suggestions under the header: "Connect your AI agent" -> the account page's API keys
   section (same host); "Dedicated / on-prem" -> cobolstack.com/contact/. Muted prefix,
   clay links; one line at the default panel width, wraps (not truncates) when narrower */
#aichat-suggest { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; padding: 6px 14px; border-bottom: 1px solid var(--ai-line); background: var(--ai-bg2); font-size: 12.5px; line-height: 1.45; }
#aichat-suggest .pre { color: var(--ai-bg); background: var(--ai-fg); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; align-self: center; }   /* "For teams" badge (owner 2026-10-14: highlight it) */
#aichat-suggest .sep { color: var(--ai-dim); }
#aichat-suggest a { color: var(--ai-blue); font-weight: 600;   /* calm link blue, not the clay accent (read like errors) */ text-decoration: none; white-space: nowrap; border-radius: 4px; }
#aichat-suggest a:hover .lbl, #aichat-suggest a:focus-visible .lbl { text-decoration: underline; text-underline-offset: 2px; }
#aichat-suggest a:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
@container (max-width: 360px) { #aichat-suggest .pre, #aichat-suggest .sep { display: none; } }   /* phone-narrow: just the two links */
html[data-sf-hide-teams] #aichat-suggest { display: none; }   /* a site without the "For teams" strip (server/sites.js hideTeamsStrip; codingtutor): web/aichat.js does not build it there; this covers an older cached aichat.js */
#aichat-suggest .ex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--ai-fg); white-space: nowrap; cursor: default; }   /* the strip's example host (server/sites.js teamsExample; codingtutor): plain text, never a link */
@container (max-width: 360px) { #aichat-suggest[data-variant=example] .sep { display: inline; } }   /* phone-narrow: the example strip has one link, so its separator stays */

#aichat-model { background: var(--ai-surface); color: var(--ai-fg); border: 1px solid var(--ai-line2); border-radius: 8px; height: 30px; font: 12.5px var(--ai-sans); padding: 0 6px; max-width: 160px; cursor: pointer; }
#aichat-model:hover { border-color: var(--ai-dim); }
#aichat-model:focus { outline: none; border-color: var(--ai-acc); box-shadow: 0 0 0 3px var(--ai-acc-soft); }

#aichat-body { flex: 1; display: flex; min-height: 0; }
#aichat-side { display: none; flex: 0 0 176px; border-right: 1px solid var(--ai-line); overflow-y: auto; background: var(--ai-bg2); }
html.aichat-sidebar #aichat-side { display: block; }
/* "New chat" lives at the top of the history sidebar (the header keeps only history, title, balance, model, close) */
#aichat-new { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); margin: 10px 8px 4px; padding: 7px 10px; background: transparent; color: var(--ai-fg); border: 0; border-radius: 10px; font: 600 13px var(--ai-sans); cursor: pointer; text-align: left; }
#aichat-new span[aria-hidden] { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ai-acc); color: var(--ai-acc-ink); font-size: 12px; line-height: 1; }
#aichat-new:hover { background: var(--ai-hover); }
#aichat-new:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: -2px; }
#aichat-side .sbh { font-size: 11.5px; font-weight: 600; color: var(--ai-dim); padding: 12px 14px 4px; }
#aichat-convs { list-style: none; margin: 0; padding: 0 8px 12px; }
#aichat-convs li { display: flex; align-items: stretch; border-radius: 8px; margin: 1px 0; }
#aichat-convs li.act { background: var(--ai-sel); }
#aichat-convs li:hover { background: var(--ai-hover); }
#aichat-convs li.act:hover { background: var(--ai-sel); }
#aichat-convs .o { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--ai-fg); padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; border-radius: 8px; }
#aichat-convs .o:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: -2px; }
#aichat-convs .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--ai-fg); }   /* color: style.css's ISPF .t (turquoise) must not leak in */
#aichat-convs .d { font-size: 11px; color: var(--ai-dim); }
#aichat-convs .x { background: none; border: 0; color: var(--ai-dim); cursor: pointer; width: 24px; font-size: 10px; visibility: hidden; border-radius: 6px; }
#aichat-convs li:hover .x, #aichat-convs li:focus-within .x { visibility: visible; }
#aichat-convs .x:hover { color: var(--ai-red); }
#aichat-convs .x:focus-visible { visibility: visible; outline: 2px solid var(--ai-focus); outline-offset: -2px; }
#aichat-convs .empty { color: var(--ai-dim); font-size: 12.5px; padding: 8px; }

#aichat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ai-bg); }
#aichat-msgs { flex: 1; overflow-y: auto; padding: 18px 16px 6px; scroll-behavior: smooth; }

/* the logon card in the panel (nobody signed on, web/aichat.js showLogin): the
   ONE shared card (web/sflogon.js, compact) in the panel's own warm palette;
   the chat, composer, credits and balance step aside until the logon lands */
#aichat-login { flex: 1; overflow-y: auto; padding: 22px 16px 16px; }
#aichat-login[hidden] { display: none; }
#aichat-panel.login #aichat-msgs, #aichat-panel.login #aichat-form, #aichat-panel.login #aichat-credits, #aichat-panel.login #aichat-cv, #aichat-panel.login #aichat-bal { display: none !important; }
#aichat-panel #aichat-logon.sf-logon {
  --sfl-bg: var(--ai-bg); --sfl-bg1: var(--ai-surface); --sfl-bg3: var(--ai-bg2); --sfl-border: var(--ai-line2); --sfl-fg: var(--ai-fg);
  --sfl-dim: var(--ai-dim); --sfl-muted: var(--ai-dim); --sfl-acc: var(--ai-acc); --sfl-err: var(--ai-red); --sfl-warn: var(--ai-warn);
  --sfl-sel: var(--ai-acc); --sfl-sel-fg: var(--ai-acc-ink); --sfl-sel-line: var(--ai-acc); --sfl-head: var(--ai-bg2);
  --sfl-sans: var(--ai-sans); --sfl-mono: var(--ai-mono);
  max-width: 400px; margin: 0 auto; border-radius: 14px; box-shadow: 0 1px 2px rgba(40, 30, 10, .06);
}
#aichat-panel #aichat-logon.sf-logon header { border-radius: 14px 14px 0 0; font-family: var(--ai-sans); }
#aichat-panel #aichat-logon.sf-logon .lg-hint { margin: 0 0 10px; font-size: 12.5px; }
#aichat-panel #aichat-logon.sf-logon input { border-radius: 8px; }
#aichat-panel #aichat-logon.sf-logon input:focus { border-color: var(--ai-acc); box-shadow: 0 0 0 3px var(--ai-acc-soft); }
#aichat-panel #aichat-logon.sf-logon button.btn { border-radius: 999px; padding: 6px 18px; }
#aichat-panel #aichat-logon.sf-logon button.btn.primary:hover:not(:disabled) { background: var(--ai-acc-hover); }
#aichat-panel #aichat-logon.sf-logon .msupport { font-size: 12px; }
#aichat-panel #aichat-logon.sf-logon .msupport a { color: var(--ai-blue); }
@media (max-width: 1000px) { #aichat-panel #aichat-logon.sf-logon input, #aichat-panel #aichat-logon.sf-logon button.btn { font-size: 16px; } }   /* no iOS zoom-on-focus */
.msg { margin: 0 0 18px; max-width: 100%; }
.msg .txt { white-space: normal; word-wrap: break-word; }
.msg .txt p { margin: 0 0 .6em; }
.msg .txt p:last-child { margin-bottom: 0; }
.msg .txt a { color: var(--ai-acc); text-underline-offset: 2px; }
/* the user: a soft bubble on the right */
.msg.me { display: flex; flex-direction: column; align-items: flex-end; }
.msg.me .txt { background: var(--ai-me); border: 0; border-radius: 16px; padding: 9px 14px; margin-left: 12%; max-width: 88%; color: var(--ai-fg); font: 14.5px/1.5 var(--ai-sans); }
/* the assistant: plain serif prose, no container */
.msg.ai .txt { background: transparent; border: 0; padding: 0 2px; margin-right: 2%; font: 15px/1.62 var(--ai-serif); color: var(--ai-fg); }
.msg.ai .txt b, .msg.ai .txt strong { font-weight: 650; }
.msg.ai.live .txt { border: 0; box-shadow: none; }
.msg.ai.live .txt:empty::after, .msg.ai.live .txt:empty { content: ""; }
/* waiting state: a breathing spark, the activity label, three rising dots */
.msg .txt.thinking { display: flex; align-items: center; gap: 8px; color: var(--ai-dim); min-height: 1.6em; font: 14px/1.4 var(--ai-sans); }
.msg .txt.thinking .spark { color: var(--ai-acc); font-size: 18px; line-height: 1; display: inline-block; animation: aichat-spark 1.6s ease-in-out infinite; }
.msg .txt.thinking .lbl { font-style: italic; }
.msg .txt.thinking .dots i { display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--ai-dim); animation: aichat-dot 1.2s ease-in-out infinite; }
.msg .txt.thinking .dots i:nth-child(2) { animation-delay: .2s; }
.msg .txt.thinking .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes aichat-spark { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .55; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes aichat-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
.msg .txt pre { background: var(--ai-code); border: 1px solid var(--ai-line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; font: 12.5px/1.45 var(--ai-mono); color: var(--ai-code-fg); white-space: pre; margin: .4em 0 .7em; }
.msg .txt code { background: var(--ai-code); border: 1px solid var(--ai-line); border-radius: 5px; padding: 0 4px; font: 12.5px var(--ai-mono); color: var(--ai-code-fg); }
.msg .txt pre code { border: 0; padding: 0; background: none; }
.msg .steps { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 2% 0 0; }
.chip { font: 11.5px/1.2 var(--ai-mono); background: var(--ai-bg2); border: 1px solid var(--ai-line); border-radius: 999px; padding: 4px 10px; color: var(--ai-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.run { border-color: var(--ai-warn-line); background: var(--ai-warn-bg); color: var(--ai-warn); animation: aichat-pulse 1.2s ease-in-out infinite; }
.chip.ok { color: var(--ai-ok); }
.chip.ok::before { content: "\2713\00a0"; }
.chip.bad { border-color: var(--ai-red-line); background: var(--ai-red-bg); color: var(--ai-red); }
@keyframes aichat-pulse { 50% { opacity: .55; } }
.msg .err { color: var(--ai-red); font-size: 12.5px; margin-top: 4px; }
/* a live/history turn alternates text segments and chip groups in streaming order */
.msg .steps + .txt, .msg .steps + .txt.thinking { margin-top: 8px; }
/* why a turn ended (action cap, time limit, budget, stop, error): always visible under the turn */
.msg .notice { color: var(--ai-warn); font-size: 12.5px; margin: 8px 2% 0 0; padding: 7px 11px; border: 1px solid var(--ai-warn-line); border-radius: 10px; background: var(--ai-warn-bg); }
.msg .notice.err { color: var(--ai-red); border-color: var(--ai-red-line); background: var(--ai-red-bg); }
.msg .meta { color: var(--ai-dim); font-size: 11px; margin-top: 4px; }

#aichat-status { margin: 0 16px 6px; padding: 7px 12px; border-radius: 10px; font-size: 12.5px; background: var(--ai-bg2); border: 1px solid var(--ai-line); color: var(--ai-fg); }
#aichat-status.warn { border-color: var(--ai-warn-line); background: var(--ai-warn-bg); color: var(--ai-warn); }
#aichat-status a { color: var(--ai-acc); }
#aichat-status.work { border-color: transparent; background: transparent; color: var(--ai-dim); font-style: italic; padding: 2px 12px; }
#aichat-status.work::before { content: "\2733  "; color: var(--ai-acc); font-style: normal; }

/* ---- the composer: one rounded card, the text on top, controls + a round send button below ---- */
#aichat-form { margin: 6px 12px 12px; padding: 8px 8px 8px 12px; border: 1px solid var(--ai-line2); border-radius: 22px; background: var(--ai-surface); box-shadow: var(--ai-shadow); transition: border-color .15s, box-shadow .15s; }
#aichat-form:focus-within { border-color: var(--ai-dim); box-shadow: var(--ai-shadow), 0 0 0 3px var(--ai-acc-soft); }
/* the box grows with its text (web/aichat.js grow(): one line when empty, up to ~45% of the panel, then it scrolls
   inside; notes/AICHAT-PROMPT-BOX-FILES-PLAN.md §1); the max-height is only a backstop */
#aichat-in { display: block; width: 100%; box-sizing: border-box; resize: none; min-height: 0; max-height: 70vh; overflow-y: hidden; background: transparent; color: var(--ai-fg); border: 0; border-radius: 12px; padding: 4px 4px 2px; font: 15px/1.45 var(--ai-sans); outline: none; overflow-wrap: anywhere; scrollbar-gutter: auto; }
#aichat-in::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aichat-hint.over { color: var(--ai-red); font-weight: 600; }
#aichat-in::placeholder { color: var(--ai-dim); opacity: 1; }
#aichat-in:focus, #aichat-in:focus-visible { border-color: transparent; outline: none; }   /* the card (#aichat-form:focus-within) shows the focus */
#aichat-form .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }   /* wraps when the voice controls do not fit beside Stop/Send (history sidebar open) */
#aichat-hint { flex: 1; color: var(--ai-dim); font-size: 11.5px; }
#aichat-send, #aichat-stop { cursor: pointer; font: 600 13px var(--ai-sans); }
#aichat-stop[hidden] { display: none; }
/* Send: a round accent button with an arrow; the word "Send" stays its accessible name */
#aichat-send { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; background: var(--ai-acc); color: var(--ai-acc-ink); font-size: 0; line-height: 0; margin-left: auto; transition: background .15s; }
#aichat-send::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l7 7-1.4 1.4L13 7.8V20h-2V7.8l-4.6 4.6L5 11z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l7 7-1.4 1.4L13 7.8V20h-2V7.8l-4.6 4.6L5 11z'/%3E%3C/svg%3E") center / contain no-repeat; }
#aichat-send:hover:not(:disabled) { background: var(--ai-acc-hover); }
#aichat-send:disabled { opacity: .4; cursor: default; }
#aichat-send:focus-visible, #aichat-stop:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
#aichat-stop { display: inline-flex; align-items: center; gap: 6px; height: 34px; border-radius: 999px; padding: 0 14px 0 12px; background: transparent; color: var(--ai-fg); border: 1px solid var(--ai-line2); }
#aichat-stop::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
#aichat-stop:hover { background: var(--ai-hover); }

/* ---- the terminal while the AI drives, and the caption bar ---- */
/* The ring and the badge stay INSIDE the CRT's border box. The terminal pane
   (#sf-pane-terminal, overflow: hidden auto) top-aligns the CRT flush under
   the tab bar whenever it is taller than the pane, so anything drawn above
   the CRT's outer edge is clipped: the old badge (top:-26px) lost its top
   12px and the 3px spread ring its top edge. Now the ring is an inset
   outline over the 14px grey frame and the badge is a pill set into the top
   frame + padding (-11px..+8px from the padding edge; the first screen row
   starts at +14px), so nothing is clipped, no screen row is covered and the
   3270 grid never moves. These overlays live ON the green CRT in both
   themes: amber + dark glass keep them readable and distinct from the screen. */
html.aichat-driving #crt { outline: 3px solid var(--ai-amber); outline-offset: -3px; box-shadow: 0 0 60px rgba(255, 182, 39, .25), inset 0 0 80px rgba(0, 0, 0, .55) !important; transition: box-shadow .3s; }
#aichat-driving-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; background: var(--ai-amber); color: #221600; font: 700 11px/1 var(--ai-sans); letter-spacing: .01em; padding: 4px 12px; border-radius: 999px; white-space: nowrap; z-index: 5; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
#aichat-caption { display: none; position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); max-width: 92%; z-index: 6;
  background: rgba(20, 18, 14, .86); color: #fffaf0; font: 600 clamp(14px, 1.4em, 26px)/1.35 var(--ai-sans);
  padding: 8px 18px; border-radius: 12px; border: 1px solid rgba(255, 182, 39, .45); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); text-align: center; pointer-events: none;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---- the AI driving the VS Code tab (notes/AI-DRIVES-VSCODE-PLAN.md §4) ---- */
#sf-pane-vscode { position: relative; }
html.aichat-driving-vscode #sf-pane-vscode::after, html.aichat-agent-vscode #sf-pane-vscode::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--ai-amber); box-shadow: inset 0 0 40px rgba(255, 182, 39, .22); pointer-events: none; z-index: 4; }
#aichat-vsc-tag, #aichat-vsc-agent { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; background: var(--ai-amber); color: #221600; font: 700 11px/1 var(--ai-sans); letter-spacing: .01em; padding: 4px 12px; border-radius: 999px; white-space: nowrap; z-index: 6; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); pointer-events: none; }
#aichat-vsc-hint { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); max-width: 90%; background: rgba(20, 18, 14, .92); color: #fffaf0; border: 1px solid var(--ai-amber); font: 600 13px/1.3 var(--ai-sans); padding: 8px 14px; border-radius: 10px; z-index: 7; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
#aichat-vsc-note { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); max-width: 90%; background: rgba(20, 18, 14, .92); color: #fffaf0; border: 1px solid var(--ai-amber); font: 600 13px/1.3 var(--ai-sans); padding: 8px 14px; border-radius: 10px; z-index: 7; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
#aichat-vsc-note[hidden], #aichat-vsc-hint[hidden] { display: none; }
#aichat-caption.over-vscode { bottom: 40px; font-size: clamp(14px, 1.15vw, 22px); }

/* ---- the AI driving the Postgres tab (pgweb; notes/AI-DRIVES-POSTGRES-PLAN.md §4) ---- */
#sf-pane-postgres { position: relative; }
html.aichat-driving-postgres #sf-pane-postgres::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--ai-amber); box-shadow: inset 0 0 40px rgba(255, 182, 39, .22); pointer-events: none; z-index: 4; }
#aichat-pg-tag { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; background: var(--ai-amber); color: #221600; font: 700 11px/1 var(--ai-sans); letter-spacing: .01em; padding: 4px 12px; border-radius: 999px; white-space: nowrap; z-index: 6; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); pointer-events: none; }
#aichat-pg-hint, #aichat-pg-note { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); max-width: 90%; background: rgba(20, 18, 14, .92); color: #fffaf0; border: 1px solid var(--ai-amber); font: 600 13px/1.3 var(--ai-sans); padding: 8px 14px; border-radius: 10px; z-index: 7; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
#aichat-pg-note[hidden], #aichat-pg-hint[hidden] { display: none; }
#aichat-ghost { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; will-change: transform; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
#aichat-ghost svg { display: block; transform: translate(-3px, -2px); }
#aichat-ghost .lbl { position: absolute; left: 22px; top: 22px; background: var(--ai-amber); color: #221600; font: 700 10.5px/1 var(--ai-sans); padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
#aichat-ghost .lbl[hidden] { display: none; }
.aichat-ripple { position: fixed; z-index: 2147482999; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid var(--ai-amber); pointer-events: none; animation: aichat-ripple .65s ease-out forwards; }
@keyframes aichat-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aichat-ripple { display: none; } }

/* ---- credits: balance chip + the credits window ---- */
#aichat-bal { background: var(--ai-bg2); color: var(--ai-fg); border: 1px solid var(--ai-line); border-radius: 999px; height: 30px; padding: 0 10px; font: 600 12.5px var(--ai-sans); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
#aichat-bal:hover { border-color: var(--ai-line2); background: var(--ai-hover); }
#aichat-bal.neg { color: var(--ai-warn); border-color: var(--ai-warn-line); background: var(--ai-warn-bg); }
#aichat-credits { flex: 1; overflow-y: auto; padding: 14px 16px; }
#aichat-credits .cr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 600 17px var(--ai-serif); }
#aichat-credits .cr-head .ic { display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--ai-line); color: var(--ai-fg); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-family: var(--ai-sans); }
#aichat-credits .cr-head .ic:hover { background: var(--ai-hover); }
#aichat-credits .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--ai-dim); margin-bottom: 6px; }
#aichat-credits .cr-bal { background: var(--ai-surface); border: 1px solid var(--ai-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--ai-shadow); }
#aichat-cr-amount { font: 600 30px/1.1 var(--ai-serif); font-variant-numeric: tabular-nums; color: var(--ai-fg); }
#aichat-cr-amount.neg { color: var(--ai-warn); }
#aichat-cr-note { display: block; font-size: 12.5px; color: var(--ai-dim); margin-top: 6px; }
#aichat-credits .cr-buy { margin-bottom: 16px; }
#aichat-cr-packs { display: flex; gap: 8px; }
#aichat-cr-packs .pack { flex: 1; background: var(--ai-acc); color: var(--ai-acc-ink); border: 0; border-radius: 12px; padding: 10px 0; font: 700 15px var(--ai-sans); cursor: pointer; }
#aichat-cr-packs .pack:hover:not(:disabled) { background: var(--ai-acc-hover); }
#aichat-cr-packs .pack:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
#aichat-cr-packs .pack:disabled { background: var(--ai-bg2); color: var(--ai-dim); border: 1px solid var(--ai-line); cursor: default; }
#aichat-cr-pay { font-size: 12px; color: var(--ai-dim); margin-top: 6px; }
#aichat-credits .cr-sec { margin-top: 14px; }
#aichat-credits ul { list-style: none; margin: 0; padding: 0; }
#aichat-credits li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--ai-line); font-size: 13px; }
#aichat-credits li .d { color: var(--ai-dim); font-size: 11.5px; white-space: nowrap; min-width: 118px; font-variant-numeric: tabular-nums; }
#aichat-credits li .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aichat-credits li .a { font-family: var(--ai-mono); font-size: 12.5px; margin-left: auto; }
#aichat-credits li .a.neg { color: var(--ai-warn); }
#aichat-credits li .s { color: var(--ai-dim); font-size: 11.5px; }
#aichat-credits li .s.paid { color: var(--ai-ok); }
#aichat-credits li .s.failed, #aichat-credits li .s.mismatch, #aichat-credits li .s.error { color: var(--ai-red); }
#aichat-credits li .pay { color: var(--ai-acc); font-size: 11.5px; font-weight: 600; }
#aichat-credits li.empty { color: var(--ai-dim); border: 0; }
#aichat-credits .dim { color: var(--ai-dim); }

/* ---- credit gate modal (plan §10.1) ---- */
#sf-left { position: relative; }
#aichat-gate { position: absolute; inset: 0; z-index: 60; background: rgba(40, 34, 24, .38); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
html[data-theme="dark"] #aichat-gate { background: rgba(0, 0, 0, .62); }
#aichat-gate[hidden] { display: none; }
#aichat-gate .box { background: var(--ai-surface); border: 1px solid var(--ai-line); border-top: 4px solid var(--ai-acc); border-radius: 16px; padding: 20px 22px; max-width: 440px; color: var(--ai-fg); font: 14.5px/1.55 var(--ai-sans); box-shadow: 0 20px 60px rgba(40, 30, 10, .25); }
#aichat-gate h3 { margin: 0 0 8px; color: var(--ai-fg); font: 600 19px var(--ai-serif); }
#aichat-gate p { margin: 0 0 8px; }
#aichat-gate .dim { color: var(--ai-dim); font-size: 13px; }
#aichat-gate .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
#aichat-gate button { border-radius: 999px; padding: 8px 16px; font: 600 13.5px var(--ai-sans); cursor: pointer; background: var(--ai-acc); color: var(--ai-acc-ink); border: 0; }
#aichat-gate button:hover { background: var(--ai-acc-hover); }
#aichat-gate button:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
#aichat-gate button.alt { background: transparent; color: var(--ai-fg); border: 1px solid var(--ai-line2); }
#aichat-gate button.alt:hover { background: var(--ai-hover); }

/* ---- voice input (web/aichat-voice.js; notes/AICHAT-VOICE-PLAN.md §3.4) ---- */
#aichat-voicebar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; flex: 1 1 0; }   /* wraps (state label first) instead of clipping the speaker/gear in a narrow composer */
#aichat-form .row:has(#aichat-voicebar) #aichat-hint:empty { display: none; }
#aichat-form .vbtn { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ai-dim); cursor: pointer; padding: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background .15s, color .15s; }
#aichat-form .vbtn[hidden] { display: none; }
#aichat-form .vbtn:hover { background: var(--ai-hover); color: var(--ai-fg); }
#aichat-form .vbtn:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
#aichat-form .vbtn.small { width: 30px; height: 30px; color: var(--ai-dim); }
#aichat-form .vbtn.off { color: var(--ai-dim); opacity: .8; }   /* the narration speaker while muted */
#aichat-form .vbtn.on { background: var(--ai-acc); color: var(--ai-acc-ink); border-color: var(--ai-acc); }
#aichat-mute.on { background: var(--ai-warn-bg); color: var(--ai-warn); border-color: var(--ai-warn-line); }
/* the state ring around the mic */
#aichat-mic { --lvl: 0; }
#aichat-mic .ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; transition: border-color .2s, box-shadow .12s; }
#aichat-mic[data-state="arming"] .ring { border-color: var(--ai-line2); border-top-color: var(--ai-acc); animation: aichat-spin 1s linear infinite; }
#aichat-mic[data-state="listening"] { color: var(--ai-acc); }
#aichat-mic[data-state="listening"] .ring { border-color: var(--ai-acc); animation: aichat-breathe 2.2s ease-in-out infinite; }
#aichat-mic[data-state="hearing"] { color: #221600; background: var(--ai-amber); border-color: var(--ai-amber); }
#aichat-mic[data-state="hearing"] .ring { border-color: var(--ai-amber); box-shadow: 0 0 0 calc(var(--lvl) * 10px) rgba(255, 182, 39, .35); }
#aichat-mic[data-state="transcribing"] .ring { border-color: transparent; border-top-color: var(--ai-warn); border-bottom-color: var(--ai-warn); animation: aichat-spin .8s linear infinite; }
#aichat-mic[data-state="thinking"] { color: var(--ai-dim); }
#aichat-mic[data-state="thinking"] .ring { border-color: var(--ai-line2); border-style: dotted; animation: aichat-spin 3s linear infinite; }
#aichat-mic[data-state="speaking"] { color: var(--ai-blue); }
#aichat-mic[data-state="speaking"] .ring { border-color: var(--ai-blue); animation: aichat-breathe 1.1s ease-in-out infinite; }
#aichat-mic[data-state="muted"] { color: var(--ai-dim); background: var(--ai-bg2); }
#aichat-mic[data-state="muted"] .ring { border-color: var(--ai-line2); }
#aichat-mic[data-state="error"] { color: var(--ai-red); border-color: var(--ai-red-line); }
#aichat-mic[data-state="error"] .ring { border-color: var(--ai-red-line); }
@keyframes aichat-spin { to { transform: rotate(360deg); } }
@keyframes aichat-breathe { 0%, 100% { opacity: .45; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); } }
#aichat-vstate { order: 99; font-size: 12px; color: var(--ai-dim); white-space: nowrap; min-width: 72px; flex: 1 1 72px; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
#aichat-vstate[data-state="hearing"] { color: var(--ai-warn); font-weight: 600; }
#aichat-vstate[data-state="listening"] { color: var(--ai-acc); }
#aichat-vstate[data-state="speaking"] { color: var(--ai-blue); }
#aichat-vstate[data-state="error"] { color: var(--ai-red); }
/* the composer while a transcript is parked (sent after the turn) or still interim */
#aichat-in.parked { color: var(--ai-warn); font-style: italic; }
#aichat-form:has(#aichat-in.parked) { border-color: var(--ai-warn-line); background: var(--ai-warn-bg); }
#aichat-in.interim { color: var(--ai-dim); font-style: italic; }
/* a spoken message in the transcript */
.msg.me.voice .txt { box-shadow: inset 0 0 0 1px var(--ai-line2); }
.msg .vmark { display: inline-block; margin-right: 6px; font-size: 11px; color: var(--ai-dim); vertical-align: 1px; }
/* consent / error / settings card above the composer */
#aichat-vcard { margin: 0 12px 8px; padding: 12px 14px; border: 1px solid var(--ai-line); border-radius: 16px; background: var(--ai-surface); font-size: 13px; color: var(--ai-fg); box-shadow: var(--ai-shadow); }
#aichat-vcard[hidden] { display: none; }
#aichat-vcard[data-kind="error"] { border-color: var(--ai-red-line); }
#aichat-vcard[data-kind="consent"] { border-color: var(--ai-line2); border-top: 3px solid var(--ai-acc); }
#aichat-vcard .vc-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--ai-fg); font-size: 14px; }
#aichat-vcard .vc-h svg { color: var(--ai-acc); }
#aichat-vcard .vc-h.err, #aichat-vcard .vc-h.err svg { color: var(--ai-red); }
#aichat-vcard .vc-h .x { margin-left: auto; background: none; border: 0; color: var(--ai-dim); cursor: pointer; font-size: 11px; width: 26px; height: 26px; border-radius: 50%; }
#aichat-vcard .vc-h .x:hover { background: var(--ai-hover); color: var(--ai-fg); }
#aichat-vcard p { margin: 0 0 6px; line-height: 1.5; }
#aichat-vcard .dim { color: var(--ai-dim); font-size: 12px; }
#aichat-vcard .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#aichat-vcard button { border-radius: 999px; padding: 7px 14px; font: 600 13px var(--ai-sans); cursor: pointer; background: var(--ai-acc); color: var(--ai-acc-ink); border: 0; min-height: 34px; }
#aichat-vcard button:hover { background: var(--ai-acc-hover); }
#aichat-vcard button:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
#aichat-vcard button.alt { background: transparent; color: var(--ai-fg); border: 1px solid var(--ai-line2); }
#aichat-vcard button.alt:hover { background: var(--ai-hover); }
#aichat-vcard .vc-h button.x { background: none; min-height: 0; padding: 0; border-radius: 50%; color: var(--ai-dim); font-weight: 400; }
#aichat-vcard .vc-h button.x:hover { background: var(--ai-hover); color: var(--ai-fg); }
#aichat-vcard label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
#aichat-vcard label.chk { justify-content: flex-start; }
#aichat-vcard label.chk input { accent-color: var(--ai-acc); }
#aichat-vcard select { max-width: 62%; background: var(--ai-surface); color: var(--ai-fg); border: 1px solid var(--ai-line2); border-radius: 8px; height: 30px; padding: 0 6px; font: 12.5px var(--ai-sans); }
#aichat-vcard select:focus { outline: none; border-color: var(--ai-acc); box-shadow: 0 0 0 3px var(--ai-acc-soft); }
#aichat-vcard .vc-meter { height: 6px; border-radius: 3px; background: var(--ai-bg2); border: 1px solid var(--ai-line); overflow: hidden; margin: 8px 0 4px; }
#aichat-vcard .vc-meter i { display: block; height: 100%; width: 0; background: var(--ai-acc); transition: width .1s; }
/* the Narrator section of the voice settings card (web/aichat.js SFChatNarrator, 2026-11-11): the card scrolls inside
   when it is taller than the room (phone), the voice picker takes the full width on a narrow card */
#aichat-vcard[data-kind="settings"] { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
#aichat-vcard .vs-sec { border-top: 1px solid var(--ai-line); margin-top: 10px; padding-top: 8px; }
#aichat-vcard .vs-h { font-size: 13.5px; color: var(--ai-fg); }
#aichat-vcard #aichat-vs-narr-sec label { flex-wrap: wrap; }
#aichat-vcard #aichat-vs-narr { flex: 1 1 200px; max-width: 100%; min-width: 0; }
#aichat-vcard .vs-narr-row { display: flex; justify-content: flex-end; margin: 0 0 6px; }
#aichat-vcard .vs-narr-row button { min-height: 30px; padding: 5px 12px; font-size: 12.5px; }
#aichat-vcard #aichat-vs-play.on { background: var(--ai-acc); color: var(--ai-acc-ink); border-color: var(--ai-acc); }
/* the site's link line under the composer (web/aichat.js #aichat-links, server/sites.js chatLinks; steelframe, owner
   2026-11-12): one line of small muted text, centred, tucked into the composer's bottom margin; 24 px targets on
   desktop, 44 px on touch-size screens. It goes with the composer (credits / courses windows, a read-only watch page) */
#aichat-links { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 2px; margin: -8px 12px 2px; padding: 0; font: 12px/1.2 var(--ai-sans); color: var(--ai-dim); }
#aichat-links a { display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px; border-radius: 6px; color: var(--ai-dim); text-decoration: none; white-space: nowrap; }
#aichat-links a:hover { color: var(--ai-fg); text-decoration: underline; text-underline-offset: 2px; }
#aichat-links a:focus-visible { color: var(--ai-fg); outline: 2px solid var(--ai-focus); outline-offset: 0; }
#aichat-links .sep { color: var(--ai-dim); opacity: .6; user-select: none; }
#aichat-form[hidden] + #aichat-links { display: none; }
@media (max-width: 1000px) { #aichat-links { margin-top: -10px; margin-bottom: 0; } #aichat-links a { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 8px; } }
/* mobile: 44 px targets, controls on their own line under the box */
@media (max-width: 1000px) {
  #aichat-form .row { flex-wrap: wrap; }
  #aichat-voicebar { flex: 1 1 100%; order: -1; gap: 8px; margin-bottom: 4px; }
  #aichat-form .vbtn { width: 44px; height: 44px; }
  #aichat-form .vbtn.small { width: 36px; height: 36px; }
  #aichat-send { width: 44px; height: 44px; }
  #aichat-stop { height: 44px; }
}

/* API keys block in the credits window (notes/API-KEYS-PAGE-PLAN.md) */
#aichat-apikeys .lbl a { float: right; font-weight: 600; font-size: 12px; color: var(--ai-acc); text-decoration: none; }
#aichat-apikeys .lbl a:hover { text-decoration: underline; }
#aichat-apikeys li { align-items: center; }
#aichat-apikeys li .l { white-space: normal; line-height: 1.4; }
#aichat-apikeys .ic.sm, #aichat-apikeys .pack.sm { font: 600 12.5px var(--ai-sans); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
#aichat-apikeys .ic.sm { background: transparent; border: 1px solid var(--ai-line2); color: var(--ai-fg); }
#aichat-apikeys .ic.sm:hover { background: var(--ai-hover); }
#aichat-apikeys .pack.sm { flex: none; background: var(--ai-acc); color: var(--ai-acc-ink); border: 0; font-weight: 700; }
#aichat-apikeys .pack.sm:hover:not(:disabled) { background: var(--ai-acc-hover); }
#aichat-apikeys .pack.sm:disabled { background: var(--ai-bg2); color: var(--ai-dim); cursor: default; }
#aichat-apikeys .ak-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
#aichat-apikeys #aichat-ak-note { font-size: 12px; margin-bottom: 6px; }
#aichat-ak-form { margin-top: 8px; display: grid; gap: 5px; font-size: 12.5px; }
#aichat-ak-form input, #aichat-ak-form select, #aichat-ak-secret { width: 100%; box-sizing: border-box; background: var(--ai-surface); border: 1px solid var(--ai-line2); color: var(--ai-fg); border-radius: 8px; padding: 7px 9px; font: 12.5px var(--ai-mono); }
#aichat-ak-form input:focus, #aichat-ak-form select:focus, #aichat-ak-secret:focus { outline: none; border-color: var(--ai-acc); box-shadow: 0 0 0 3px var(--ai-acc-soft); }
#aichat-ak-fresh { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ai-line2); border-top: 3px solid var(--ai-acc); border-radius: 14px; background: var(--ai-surface); font-size: 12.5px; }
#aichat-ak-fresh .ak-fresh-h { display: grid; gap: 4px; margin-bottom: 6px; }
#aichat-ak-fresh .warn { color: var(--ai-warn); }
#aichat-ak-fresh #aichat-ak-secret { flex: 1; min-width: 0; }
#aichat-ak-fresh .ak-snip { margin-top: 10px; }
#aichat-ak-fresh .ak-snip-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
#aichat-ak-fresh pre { margin: 0; padding: 9px 11px; background: var(--ai-code); border: 1px solid var(--ai-line); border-radius: 10px; font: 11.5px/1.45 var(--ai-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ai-code-fg); }

/* scrollbars inside the panel: thin and quiet */
#aichat-panel * { scrollbar-width: thin; scrollbar-color: var(--ai-line2) transparent; }

@media (prefers-reduced-motion: reduce) {
  #aichat-msgs { scroll-behavior: auto; }
  .msg .txt.thinking .spark, .msg .txt.thinking .dots i, .chip.run, #aichat-mic .ring { animation: none !important; }
  #aichat-form, #aichat-send, #aichat-form .vbtn, html.aichat-driving #crt { transition: none; }
}

/* ---- direct MCP tools ("via MCP", notes/AICHAT-DIRECT-TOOLS-PLAN.md D10/D11) ---- */
#aichat-mode { display: inline-flex; gap: 2px; padding: 2px; margin: 4px 0 0; border: 1px solid var(--ai-line); border-radius: 999px; background: var(--ai-bg2); }
#aichat-mode button { font: 12px/1.2 var(--ai-sans); border: 0; background: transparent; color: var(--ai-dim); padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
#aichat-mode button:hover { color: var(--ai-fg); background: var(--ai-hover); }
#aichat-mode button.on { background: var(--ai-surface); color: var(--ai-fg); box-shadow: 0 0 0 1px var(--ai-line2); font-weight: 600; }
#aichat-mode button:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
.msg .dstep { font: 12px/1.45 var(--ai-mono); margin: 6px 2% 0 0; color: var(--ai-fg); }
.msg .dstep .dcall { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.msg .dstep .ddot { flex: 0 0 auto; color: var(--ai-ok); font-size: 10px; }
.msg .dstep.run .ddot { color: var(--ai-dim); animation: aichat-pulse 1.2s ease-in-out infinite; }
.msg .dstep.bad .ddot { color: var(--ai-red); }
.msg .dstep .dname { font-weight: 600; flex: 0 0 auto; }
.msg .dstep .dargs { color: var(--ai-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg .dstep .dres { display: flex; gap: 6px; align-items: baseline; width: 100%; text-align: left; font: inherit; color: var(--ai-dim); background: transparent; border: 0; padding: 0 0 0 4px; cursor: pointer; }
.msg .dstep .dres:disabled { cursor: default; }
.msg .dstep .dres:hover:not(:disabled) .dt { color: var(--ai-fg); text-decoration: underline dotted; }
.msg .dstep .dres .dl { flex: 0 0 auto; }
.msg .dstep .dres .dt { white-space: normal; overflow-wrap: anywhere; min-width: 0; }   /* wraps: the cost at the end stays visible in a narrow panel */
.msg .dstep .dres .dx { flex: 0 0 auto; font-size: 10px; transition: transform .15s; }
.msg .dstep.open .dres .dx { transform: rotate(180deg); }
.msg .dstep.bad .dres, .msg .dstep.bad .dres .dt { color: var(--ai-red); }
.msg .dstep pre.dout { margin: 4px 0 2px 18px; max-height: 260px; overflow: auto; font: 11.5px/1.4 var(--ai-mono); background: var(--ai-code); color: var(--ai-code-fg); border: 1px solid var(--ai-line); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
.msg .dstep + .txt { margin-top: 8px; }
#aichat-ak-list li.ak-system .ak-lock { font-size: 11px; border: 1px solid var(--ai-line); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* the git_* confirmation card (notes/GIT-TWO-WAY-PLAN.md §6): a real click on Allow is the only way a git tool
   publishes to GitHub / GitLab or replaces mainframe text */
.msg .aiconfirm, #sf-mcp-banner .aiconfirm { margin: 8px 2% 8px 0; padding: 10px 12px; border: 1px solid var(--ai-warn-line); border-left: 4px solid var(--ai-warn); border-radius: 10px; background: var(--ai-warn-bg); color: var(--ai-fg); font-size: 13px; }
.msg .aiconfirm .ct, #sf-mcp-banner .aiconfirm .ct { font-weight: 600; margin-bottom: 6px; color: var(--ai-warn); }
.msg .aiconfirm .cd, #sf-mcp-banner .aiconfirm .cd { white-space: pre-wrap; word-break: break-word; font: 12px/1.45 var(--ai-mono); margin: 0 0 6px; max-height: 180px; overflow: auto; background: var(--ai-code); padding: 6px 8px; border-radius: 6px; }
.msg .aiconfirm .cn, #sf-mcp-banner .aiconfirm .cn { font-size: 12px; color: var(--ai-dim); margin-bottom: 8px; }
.msg .aiconfirm .cb, #sf-mcp-banner .aiconfirm .cb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msg .aiconfirm button, #sf-mcp-banner .aiconfirm button { padding: 5px 14px; border-radius: 8px; cursor: pointer; font: 600 13px var(--ai-sans); }
.msg .aiconfirm button.ok, #sf-mcp-banner .aiconfirm button.ok { background: var(--ai-acc); color: var(--ai-acc-ink, #fff); border: 1px solid var(--ai-acc); }
.msg .aiconfirm button.no, #sf-mcp-banner .aiconfirm button.no { background: transparent; color: var(--ai-fg); border: 1px solid var(--ai-line2, var(--ai-line)); }
.msg .aiconfirm button:focus-visible, #sf-mcp-banner .aiconfirm button:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
.msg .aiconfirm button:disabled, #sf-mcp-banner .aiconfirm button:disabled { opacity: .5; cursor: default; }
.msg .aiconfirm .cw, #sf-mcp-banner .aiconfirm .cw { font-size: 12px; color: var(--ai-dim); }
.msg .aiconfirm.done.allowed, #sf-mcp-banner .aiconfirm.done.allowed { border-left-color: var(--ai-ok); }
.msg .aiconfirm.done.denied, #sf-mcp-banner .aiconfirm.done.denied { border-left-color: var(--ai-line2, var(--ai-line)); opacity: .85; }

/* the screen MCP (notes/SEAT-CLAUDE-CODE-PLAN.md §8): the always-visible banner while the user's own MCP client drives
   this page, its Stop / "Let MCP drive again", and the door's confirmation card (the chat's .aiconfirm) under it */
#sf-mcp-banner { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2147483000; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: min(640px, calc(100vw - 24px)); box-sizing: border-box; padding: 7px 10px 7px 14px; border-radius: 12px; background: var(--ai-amber, #ffb627); color: #221600; font: 600 13px/1.3 var(--ai-sans, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
#sf-mcp-banner[hidden] { display: none; }
#sf-mcp-banner .dot { width: 9px; height: 9px; border-radius: 50%; background: #221600; flex: none; }
#sf-mcp-banner.active .dot { animation: sf-mcp-pulse 1.2s ease-in-out infinite; }
#sf-mcp-banner.stopped { background: #e9e6df; color: #3a3428; }
#sf-mcp-banner.stopped .dot { background: #8a5a00; }
#sf-mcp-banner .txt { flex: 1 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sf-mcp-banner button { font: 700 12px/1 var(--ai-sans, sans-serif); border-radius: 999px; padding: 6px 14px; cursor: pointer; border: 1px solid rgba(34, 22, 0, .5); background: #221600; color: #fff; }
#sf-mcp-banner button.resume { background: #fff; color: #221600; }
#sf-mcp-banner .cards { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; order: -1; max-height: 60vh; overflow: auto; }
#sf-mcp-banner .cards:empty { display: none; }
#sf-mcp-banner .aiconfirm.sf-mcp-card { margin: 0; background: var(--ai-surface, #fff); color: var(--ai-fg, #1d2125); font-weight: 400; }
@keyframes sf-mcp-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #sf-mcp-banner.active .dot { animation: none; } }
#aichat-seatclaude .sc-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
#aichat-seatclaude .sc-note { margin-top: 6px; }
#aichat-seatclaude .sc-access { margin-top: 4px; }
#aichat-seatclaude details.sc-adv { margin-top: 8px; border-top: 1px dashed var(--ai-line2, #ccc); padding-top: 4px; }
#aichat-seatclaude details.sc-adv > summary { cursor: pointer; font-size: 12px; color: var(--ai-fg2, #555); user-select: none; }
#aichat-seatclaude details.sc-adv[open] > summary { margin-bottom: 2px; }
/* your own Anthropic API key for the AI chat (web/aichat.js renderByok; notes/AICHAT-BYOK-PLAN.md) */
#aichat-byok .bk-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
#aichat-byok input[type=password] { flex: 1 1 200px; min-width: 0; font: 12.5px/1.3 var(--ai-mono, monospace); padding: 5px 7px; border: 1px solid var(--ai-line2, #ccc); border-radius: 6px; background: var(--ai-bg2, #fff); color: var(--ai-fg, #111); }
#aichat-byok .bk-note { margin-top: 4px; }
#aichat-byok .bk-err { color: var(--ai-err, #b3261e); }

/* ---- attachments (web/aichat-files.js; notes/AICHAT-PROMPT-BOX-FILES-PLAN.md §2): cards above the box and in the
   user's bubble, the drop overlay, the preview with "Save to data set" ---- */
.afiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; min-width: 0; }
.afiles[hidden] { display: none; }
.afile { position: relative; display: flex; align-items: stretch; max-width: 100%; min-width: 0; border: 1px solid var(--ai-line2); border-radius: 12px; background: var(--ai-bg2); color: var(--ai-fg); }
.afile .af-main { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 230px; padding: 4px 8px 4px 4px; background: transparent; border: 0; color: inherit; cursor: pointer; text-align: left; border-radius: 12px; font: 12.5px/1.25 var(--ai-sans); }
.afile .af-main:hover { background: var(--ai-hover); }
.afile .af-ic { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--ai-surface); border: 1px solid var(--ai-line); font: 700 9.5px/1 var(--ai-mono); letter-spacing: .02em; color: var(--ai-acc); overflow: hidden; }
.afile .af-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afile.k-paste .af-ic { color: var(--ai-blue); font: 600 17px/1 var(--ai-serif); }
.afile.k-pdf .af-ic { color: var(--ai-red); }
.afile .af-tx { display: flex; flex-direction: column; min-width: 0; }
.afile .af-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.afile .af-mt { color: var(--ai-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afile .af-x { flex: 0 0 auto; width: 26px; border: 0; background: transparent; color: var(--ai-dim); cursor: pointer; border-radius: 0 12px 12px 0; font-size: 10px; padding: 0; }
.afile .af-x:hover { color: var(--ai-red); background: var(--ai-hover); }
.afile.s-up .af-ic { animation: aichat-pulse 1.2s ease-in-out infinite; }
.afile.s-bad { border-color: var(--ai-red-line); background: var(--ai-red-bg); }
.afile.s-bad .af-main { cursor: default; max-width: 320px; }
.afile.s-bad .af-main:hover { background: transparent; }
.afile.s-bad .af-mt { color: var(--ai-red); white-space: normal; }
.afile.gone { opacity: .7; }
.afile.gone .af-mt { font-style: italic; }
.msg.me .afiles.sent { justify-content: flex-end; margin: 6px 0 0 12%; max-width: 88%; }
.msg.me .afile.sent { background: var(--ai-me); border-color: var(--ai-line); }
#aichat-drop { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; background: rgba(250, 249, 245, .88); border: 3px dashed var(--ai-acc); }
html[data-theme="dark"] #aichat-drop { background: rgba(38, 38, 36, .9); }
#aichat-drop[hidden] { display: none; }
#aichat-drop .dz { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ai-acc); font: 600 16px var(--ai-sans); text-align: center; padding: 16px; }
#aichat-drop .dz svg { width: 34px; height: 34px; }
#aichat-pv { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40, 34, 24, .38); }
html[data-theme="dark"] #aichat-pv { background: rgba(0, 0, 0, .6); }
#aichat-pv .box { width: 100%; max-height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--ai-surface); color: var(--ai-fg); border: 1px solid var(--ai-line); border-radius: 16px; box-shadow: 0 20px 60px rgba(40, 30, 10, .25); font: 13.5px/1.45 var(--ai-sans); }
#aichat-pv .pv-h { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--ai-line); }
#aichat-pv .pv-h b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aichat-pv .pv-m { flex: 1; color: var(--ai-dim); font-size: 12px; white-space: nowrap; }
#aichat-pv .pv-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--ai-dim); cursor: pointer; }
#aichat-pv .pv-x:hover { background: var(--ai-hover); color: var(--ai-fg); }
#aichat-pv .pv-b { flex: 1 1 auto; min-height: 60px; overflow: auto; padding: 10px 14px; }
#aichat-pv .pv-b pre { margin: 0; font: 12px/1.45 var(--ai-mono); white-space: pre; color: var(--ai-code-fg); background: var(--ai-code); border: 1px solid var(--ai-line); border-radius: 10px; padding: 8px 10px; overflow: auto; max-height: 50vh; }
#aichat-pv .pv-b img { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto; border-radius: 8px; }
#aichat-pv .dim { color: var(--ai-dim); margin: 0; }
#aichat-pv .pv-a { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 14px 12px; }
#aichat-pv .pv-a button, #aichat-pv .pv-r button { border-radius: 999px; padding: 6px 14px; min-height: 32px; font: 600 13px var(--ai-sans); cursor: pointer; border: 1px solid var(--ai-line2); background: transparent; color: var(--ai-fg); }
#aichat-pv .pv-a button:hover:not(:disabled) { background: var(--ai-hover); }
#aichat-pv .pv-a button:disabled { opacity: .5; cursor: default; }
#aichat-pv .pv-s { padding: 0 14px 14px; }
#aichat-pv .pv-s[hidden] { display: none; }
#aichat-pv .pv-f { display: flex; gap: 10px; flex-wrap: wrap; }
#aichat-pv .pv-s label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ai-dim); }
#aichat-pv .pv-s input[type="text"] { font: 13px var(--ai-mono); padding: 6px 8px; border-radius: 8px; background: var(--ai-surface); border: 1px solid var(--ai-line2); color: var(--ai-fg); text-transform: uppercase; }
#aichat-pv .pv-s input[type="text"]:focus { outline: none; border-color: var(--ai-acc); box-shadow: 0 0 0 3px var(--ai-acc-soft); }
#aichat-pv-dsn { width: 24ch; max-width: 100%; }
#aichat-pv-mem { width: 10ch; }
#aichat-pv .pv-s label.chk { flex-direction: row; align-items: center; gap: 6px; margin-top: 8px; color: var(--ai-fg); }
#aichat-pv .pv-s label.chk input { accent-color: var(--ai-acc); }
#aichat-pv .pv-r { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#aichat-pv #aichat-pv-save { background: var(--ai-acc); color: var(--ai-acc-ink); border: 0; }
#aichat-pv #aichat-pv-save:hover:not(:disabled) { background: var(--ai-acc-hover); }
#aichat-pv #aichat-pv-out { font-size: 12.5px; }
#aichat-pv #aichat-pv-out.ok { color: var(--ai-ok); }
#aichat-pv #aichat-pv-out.bad { color: var(--ai-red); }
@media (max-width: 1000px) {
  .afile .af-main { min-height: 44px; }
  .afile .af-x { width: 40px; }
  #aichat-pv .pv-x { width: 44px; height: 44px; }
  #aichat-pv .pv-a button, #aichat-pv .pv-r button { min-height: 44px; }
  #aichat-in { font-size: 16px; }   /* no iOS zoom-on-focus */
}
@media (prefers-reduced-motion: reduce) { .afile.s-up .af-ic { animation: none; } }

/* ------------------------------------------------ rich replies (web/aichat-rich.js; sfhost-work/rich-chat/PLAN.md) */
/* tables: a focusable region that scrolls sideways on a narrow panel; the page never scrolls */
.msg .txt .airich-table { max-width: 100%; overflow-x: auto; margin: .45em 0 .7em; border: 1px solid var(--ai-line); border-radius: 10px; background: var(--ai-surface); -webkit-overflow-scrolling: touch; }
.msg .txt .airich-table:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
.msg .txt .airich-table table { border-collapse: collapse; min-width: 100%; font: 13.5px/1.4 var(--ai-sans); }
.msg .txt .airich-table th, .msg .txt .airich-table td { padding: 6px 10px; border-bottom: 1px solid var(--ai-line); text-align: left; vertical-align: top; white-space: nowrap; }
.msg .txt .airich-table th { font-weight: 650; background: var(--ai-bg2); }
.msg .txt .airich-table tr:last-child td { border-bottom: 0; }
.msg .txt .airich-table .al-c { text-align: center; }
.msg .txt .airich-table .al-r { text-align: right; }
.msg .txt .airich-table td.more { color: var(--ai-dim); font-style: italic; }
/* choices: the course chips' look (.aiact); one button per option, or checkboxes + Submit */
.msg .airich-choices { margin: .5em 2% .7em 0; padding: 10px 12px; border: 1px solid var(--ai-line2); border-radius: 12px; background: var(--ai-surface); font: 14px/1.45 var(--ai-sans); color: var(--ai-fg); max-width: 100%; box-sizing: border-box; }
.msg .airich-choices .q { font-weight: 650; margin-bottom: 8px; overflow-wrap: anywhere; }
.msg .airich-choices .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.msg .airich-choices.multi .opts { flex-direction: column; gap: 4px; }
.msg .airich-choices .aiact.opt { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.msg .airich-choices .aiact.opt.picked { background: var(--ai-acc); color: var(--ai-acc-ink); border-color: transparent; opacity: 1; }
.msg .airich-choices .aiact.opt.picked::before { content: "\2713\00a0"; }
.msg .airich-choices .opt.chk { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.msg .airich-choices .opt.chk:hover { background: var(--ai-hover); }
.msg .airich-choices .opt.chk input { margin-top: 3px; accent-color: var(--ai-acc); }
.msg .airich-choices .opt.chk.picked { background: var(--ai-acc-soft); font-weight: 600; }
.msg .airich-choices .otherrow { display: flex; gap: 6px; margin-top: 8px; }
.msg .airich-choices .otherin { flex: 1; min-width: 0; font: 14px var(--ai-sans); padding: 6px 10px; border: 1px solid var(--ai-line2); border-radius: 8px; background: var(--ai-bg); color: var(--ai-fg); }
.msg .airich-choices .otherin:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 1px; }
.msg .airich-choices .submit { margin-top: 8px; }
.msg .airich-choices .ans { margin-top: 6px; color: var(--ai-dim); font-size: 12.5px; }
.msg .airich-choices .ans:empty { display: none; }
.msg .airich-choices.closed { opacity: .7; }
.msg .airich-choices.live .opts { opacity: .75; }
/* drawings: a white card (dark strokes read in both themes), scaled to the panel */
.msg .airich-svg { margin: .5em 2% .7em 0; padding: 8px; background: #fff; border: 1px solid var(--ai-line); border-radius: 10px; max-width: 100%; box-sizing: border-box; }
.msg .airich-svg svg { display: block; width: 100%; height: auto; max-height: 70vh; color: #222; }