/* The agent window (agentchat.js, docs/agent-bridge/CHAT.md section 6): a floating chat over the page. Everything
   lives under .ac-, except the header button's states (.agent-chat-btn), so nothing here reaches the rest of the page
   and nothing of the page's bare-tag rules (section, h2, .row, .part, .model, .mat) reaches in: the markdown
   renderer never makes an h1..h6, and the window uses no class the page already uses.
   The page has one theme, the dark one, so there is one here; the tokens come from app.css and agentui.css
   (--bg, --panel, --panel-2, --line, --text, --dim, --accent, --warn, --ok, --agent) with the same values as
   fallbacks, which is what lets tests/agent_chat_preview.html show the window without the page. The violet is the
   agent's alone, as in agentui.css: the page's blue means "selected", "yours". */

.ac-root, .ac-light {
  --ac-agent: var(--agent, #b59cff);
  --ac-bg: var(--bg, #1b1c1f);
  --ac-panel: var(--panel, #232428);
  --ac-panel2: var(--panel-2, #2b2d32);
  --ac-line: var(--line, #35373d);
  --ac-text: var(--text, #d8dae0);
  --ac-dim: var(--dim, #8c9099);
  --ac-accent: var(--accent, #4ea1ff);
  --ac-warn: var(--warn, #e0a33e);
  --ac-ok: var(--ok, #58c07a);
  --ac-bad: #ff6b6b;
  --ac-code: #14151a;
  --ac-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* The root is a point: the window and the bubble are fixed on their own, so nothing of it can sit in the page's flow or catch a pointer. */
.ac-root { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: visible; }

/* A class that sets display would otherwise beat the hidden attribute the script uses. */
.ac-root [hidden], .ac-light[hidden] { display: none !important; }
.ac-root *, .ac-light * { box-sizing: border-box; }

/* ---------------------------------------------------------------- the window */
.ac-win {
  position: fixed; z-index: 40;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--ac-panel); color: var(--ac-text);
  border: 1px solid var(--ac-line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ac-head {
  flex: none; padding: 7px 8px 6px 12px; cursor: move; user-select: none; touch-action: none;
  background: var(--ac-panel); border-bottom: 1px solid var(--ac-line);
}
.ac-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-head-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-title { font-weight: 600; }
.ac-head-btns { display: flex; align-items: center; gap: 2px; flex: none; }
.ac-head-btn {
  background: none; border: 0; border-radius: 4px; padding: 2px 7px; min-width: 24px; height: 24px;
  color: var(--ac-dim); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ac-head-btn:hover:not(:disabled), .ac-head-btn:focus-visible { color: var(--ac-text); background: var(--ac-panel2); outline: none; }
.ac-head-btn:disabled { opacity: .35; cursor: default; }
.ac-head-btn.armed { color: var(--ac-warn); }
.ac-gear { font-size: 15px; line-height: 1; }
.ac-sub { display: flex; gap: 8px; align-items: baseline; margin: 1px 0 0 16px; min-width: 0; font-size: 11px; color: var(--ac-dim); }
.ac-sub-model { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ac-mono); }
.ac-sub-state { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-sub-state::before { content: '·'; margin-right: 8px; }

.ac-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-dim); }
.ac-dot-idle { background: var(--ac-ok); }
.ac-dot-thinking, .ac-dot-acting { background: var(--ac-agent); animation: ac-pulse 1.2s ease-in-out infinite; }
.ac-dot-paused, .ac-dot-offline { background: var(--ac-warn); }
.ac-dot-offline { animation: ac-pulse 1.2s ease-in-out infinite; }
.ac-dot-error { background: var(--ac-bad); }

.ac-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ac-scrollwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ac-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 12px;
  scrollbar-width: thin; scrollbar-color: #4a4d55 transparent;
}
.ac-jump {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  padding: 3px 12px; border: 1px solid var(--ac-agent); border-radius: 12px;
  background: var(--ac-panel2); color: var(--ac-text); font: inherit; font-size: 12px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.ac-jump:hover { background: var(--ac-panel); }

.ac-empty { padding: 26px 8px 10px; text-align: center; }
.ac-empty-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ac-empty-text { color: var(--ac-dim); font-size: 12px; max-width: 300px; margin: 0 auto; }
.ac-list { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- messages */
.ac-msg { min-width: 0; }
.ac-user { display: flex; justify-content: flex-end; }
.ac-bubble-text {
  max-width: 88%; padding: 6px 10px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: #22324a; border: 1px solid rgba(78, 161, 255, .35); border-radius: 10px 10px 2px 10px;
}
.ac-run {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding-left: 10px; border-left: 2px solid rgba(181, 156, 255, .35);
}
.ac-run[data-live="1"] { border-left-color: var(--ac-agent); }
.ac-sys { padding: 0; }

/* The text the model writes: the markdown renderer's output goes straight into .ac-text. */
.ac-text, .md { overflow-wrap: anywhere; word-break: normal; min-width: 0; }
.ac-text > :first-child, .md > :first-child { margin-top: 0; }
.ac-text > :last-child, .md > :last-child { margin-bottom: 0; }
.ac-text p, .md p { margin: 0 0 .55em; }
.ac-text ul, .ac-text ol, .md ul, .md ol { margin: 0 0 .55em; padding-left: 1.35em; }
.ac-text li > ul, .ac-text li > ol, .md li > ul, .md li > ol { margin: .15em 0 0; }
.ac-text li, .md li { margin: .1em 0; }
.ac-text li > p, .md li > p { margin: 0 0 .3em; }
.ac-text strong, .md strong { font-weight: 600; color: #eceef3; }
.ac-text del, .md del { color: var(--ac-dim); }
.ac-text a, .md a { color: var(--ac-accent); text-decoration: underline; text-underline-offset: 2px; }
.ac-text a:hover, .md a:hover { color: #7ab8ff; }
/* Where a link really goes, when its label names another address. inline-block: the link's underline does not run through it. */
.ac-text .md-host, .md .md-host { display: inline-block; color: var(--ac-warn); font-size: .92em; font-family: var(--ac-mono); }
.ac-text blockquote, .md blockquote { margin: 0 0 .55em; padding: 1px 0 1px 10px; border-left: 3px solid var(--ac-line); color: var(--ac-dim); }
.ac-text hr, .md hr { border: 0; border-top: 1px solid var(--ac-line); margin: .7em 0; }
.ac-text code.md-ic, .md code.md-ic {
  padding: 0 4px; border-radius: 3px; background: rgba(255, 255, 255, .08);
  font-family: var(--ac-mono); font-size: .92em;
}
.ac-text pre.md-code, .md pre.md-code {
  margin: 0 0 .55em; padding: 8px 10px; overflow-x: auto; max-width: 100%;
  background: var(--ac-code); border: 1px solid var(--ac-line); border-radius: 6px;
  font-family: var(--ac-mono); font-size: 12px; line-height: 1.45; white-space: pre; tab-size: 2;
}
.ac-text pre.md-code code, .md pre.md-code code { font: inherit; background: none; padding: 0; }
.ac-text .md-h, .md .md-h { margin: .75em 0 .35em; font-weight: 600; line-height: 1.3; }
.ac-text .md-h1, .md .md-h1 { font-size: 1.25em; }
.ac-text .md-h2, .md .md-h2 { font-size: 1.15em; }
.ac-text .md-h3, .md .md-h3 { font-size: 1.05em; }
.ac-text .md-h4, .ac-text .md-h5, .ac-text .md-h6, .md .md-h4, .md .md-h5, .md .md-h6 { font-size: 1em; color: var(--ac-dim); }
.ac-text .md-table, .md .md-table { margin: 0 0 .55em; max-width: 100%; overflow-x: auto; }
.ac-text table, .md table { border-collapse: collapse; font-size: 12px; }
.ac-text th, .ac-text td, .md th, .md td { padding: 3px 9px; border: 1px solid var(--ac-line); text-align: left; vertical-align: top; }
.ac-text th, .md th { background: var(--ac-panel2); font-weight: 600; }
.ac-text .md-al-c, .md .md-al-c { text-align: center; }
.ac-text .md-al-r, .md .md-al-r { text-align: right; }
.ac-text .md-note, .md .md-note { color: var(--ac-dim); font-style: italic; }

/* The caret on the text that is still arriving: on the last line of whatever block is last. */
.ac-streaming > p:last-child::after,
.ac-streaming > .md-h:last-child::after,
.ac-streaming > ul:last-child > li:last-child::after,
.ac-streaming > ol:last-child > li:last-child::after,
.ac-streaming > ul:last-child > li:last-child > :is(ul, ol):last-child > li:last-child::after,
.ac-streaming > blockquote:last-child > p:last-child::after,
.ac-streaming > pre:last-child > code::after {
  content: ''; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom;
  background: var(--ac-agent); animation: ac-blink 1s steps(2, start) infinite;
}

/* ---------------------------------------------------------------- thinking */
.ac-think-head {
  display: block; padding: 0; background: none; border: 0; color: var(--ac-dim);
  font: inherit; font-size: 12px; font-style: italic; cursor: pointer; text-align: left;
}
.ac-think-head::before { content: '▸'; display: inline-block; margin-right: 5px; font-style: normal; transition: transform .12s; }
.ac-think-head[aria-expanded="true"]::before { transform: rotate(90deg); }
.ac-think-head:hover { color: var(--ac-text); }
.ac-think-body {
  margin-top: 4px; padding: 4px 0 4px 10px; border-left: 2px solid var(--ac-line);
  color: var(--ac-dim); font-size: 12px; font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto;
}

/* ---------------------------------------------------------------- tool cards */
.ac-tool {
  min-width: 0; background: var(--ac-bg); border: 1px solid var(--ac-line); border-left: 3px solid var(--ac-agent);
  border-radius: 6px; overflow: hidden;
}
.ac-tool[data-status="ok"] { border-left-color: var(--ac-ok); }
.ac-tool[data-status="error"] { border-left-color: var(--ac-bad); }
.ac-tool[data-status="stopped"] { border-left-color: var(--ac-dim); }
.ac-tool-head {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 7px;
  width: 100%; padding: 5px 8px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ac-tool-head:hover { background: rgba(255, 255, 255, .03); }
.ac-tool-head:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: -2px; }
.ac-tool-ico { color: var(--ac-agent); width: 1.1em; text-align: center; }
.ac-tool-name { font-family: var(--ac-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ac-tool-args { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-dim); font-family: var(--ac-mono); font-size: 11.5px; }
.ac-tool-stat { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; font-weight: 700; }
.ac-tool[data-status="ok"] .ac-tool-stat { color: var(--ac-ok); }
.ac-tool[data-status="error"] .ac-tool-stat { color: var(--ac-bad); }
.ac-tool[data-status="stopped"] .ac-tool-stat { color: var(--ac-dim); }
.ac-tool-ms { color: var(--ac-dim); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-tool-sum { padding: 0 8px 5px 31px; color: var(--ac-dim); font-size: 12px; overflow-wrap: anywhere; }
.ac-tool-act { padding: 0 8px 5px 31px; font-size: 12px; }
.ac-undo { padding: 0; background: none; border: 0; color: var(--ac-accent); font: inherit; cursor: pointer; }
.ac-undo:disabled { opacity: .4; cursor: default; }
.ac-undo:not(:disabled):hover { text-decoration: underline; }
.ac-undone { color: var(--ac-dim); font-style: italic; }
.ac-tool-body { padding: 4px 8px 8px; border-top: 1px solid var(--ac-line); }
.ac-tool-lab { margin-top: 5px; color: var(--ac-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.ac-json {
  margin: 2px 0 0; padding: 6px 8px; max-height: 220px; overflow: auto;
  background: var(--ac-code); border-radius: 4px; font-family: var(--ac-mono); font-size: 11.5px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ac-tool-res { margin-top: 2px; font-size: 12px; overflow-wrap: anywhere; }

/* Screenshots: thumbnails that open large. */
.ac-shots { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 6px; }
.ac-shot {
  position: relative; display: block; padding: 0; overflow: hidden; max-width: 100%;
  background: var(--ac-code); border: 1px solid var(--ac-line); border-radius: 5px; color: var(--ac-dim); font: inherit; cursor: zoom-in;
}
.ac-shot:hover:not(:disabled) { border-color: var(--ac-agent); }
.ac-shot:disabled { cursor: default; }
.ac-shot-img { display: block; max-width: 100%; max-height: 120px; }
.ac-shot-cap {
  position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 3px;
  background: rgba(0, 0, 0, .65); color: #dfe2ea; font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.ac-shot-none { display: block; padding: 6px 9px; font-size: 11.5px; }

/* ---------------------------------------------------------------- approval, notice, error */
.ac-approve {
  padding: 8px 10px; background: rgba(224, 163, 62, .08); border: 1px solid var(--ac-warn); border-radius: 6px;
}
.ac-approve[data-status="allowed"] { border-color: var(--ac-ok); background: rgba(88, 192, 122, .07); }
.ac-approve[data-status="denied"], .ac-approve[data-status="expired"], .ac-approve[data-status="handled"] { border-color: var(--ac-line); background: transparent; }
.ac-approve-title { font-weight: 500; }
.ac-approve-tool { font-family: var(--ac-mono); font-size: 12px; color: var(--ac-warn); }
.ac-approve-args { margin-top: 2px; color: var(--ac-dim); font-family: var(--ac-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.ac-approve-more { padding: 0; margin-top: 3px; background: none; border: 0; color: var(--ac-accent); font: inherit; font-size: 12px; cursor: pointer; }
.ac-approve .ac-json { margin-top: 4px; }
.ac-approve-btns { display: flex; gap: 8px; margin-top: 8px; }
.ac-approve-btns .btn { flex: none; padding: 4px 14px; }
.ac-approve-state { margin-top: 4px; color: var(--ac-dim); font-size: 12px; }
.ac-approve-err { margin-top: 5px; color: var(--ac-bad); font-size: 12px; }

.ac-notice { display: flex; align-items: flex-start; gap: 7px; color: var(--ac-dim); font-size: 12px; }
.ac-notice-ico {
  flex: none; width: 14px; height: 14px; margin-top: 1px; border: 1px solid currentColor; border-radius: 50%;
  font-size: 9px; font-weight: 700; line-height: 12px; text-align: center; font-style: normal;
}
.ac-notice-text { min-width: 0; overflow-wrap: anywhere; }
.ac-notice[data-level="warn"] { color: var(--ac-warn); }

.ac-error {
  padding: 8px 10px; background: rgba(255, 107, 107, .09); border: 1px solid var(--ac-bad); border-radius: 6px;
}
.ac-error-title { font-weight: 600; color: #ffb3b3; }
.ac-error-msg {
  margin-top: 4px; padding: 5px 7px; background: rgba(0, 0, 0, .22); border-radius: 4px;
  font-family: var(--ac-mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto;
}
.ac-error-hint { margin-top: 5px; color: var(--ac-text); font-size: 12px; }
.ac-error-act { margin-top: 4px; padding: 0; background: none; border: 0; color: var(--ac-accent); font: inherit; cursor: pointer; }

.ac-foot { margin-top: 1px; color: var(--ac-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.ac-foot-reason { color: var(--ac-text); }
.ac-foot[data-reason="max-steps"] .ac-foot-reason, .ac-foot[data-reason="max-time"] .ac-foot-reason { color: var(--ac-warn); }

.ac-typing { display: flex; gap: 4px; padding: 5px 0 2px; }
.ac-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ac-agent); opacity: .5; animation: ac-bounce 1.2s ease-in-out infinite; }
.ac-typing i:nth-child(2) { animation-delay: .15s; }
.ac-typing i:nth-child(3) { animation-delay: .3s; }

.ac-spin {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(181, 156, 255, .35); border-top-color: var(--ac-agent); animation: ac-spin .8s linear infinite;
}

/* ---------------------------------------------------------------- the strip: what to deal with first */
.ac-strip { flex: none; padding: 8px 10px; background: var(--ac-panel2); border-top: 1px solid var(--ac-line); }
.ac-card-title { font-weight: 600; }
.ac-strip[data-kind="offline"] .ac-card-title, .ac-strip[data-kind="paused"] .ac-card-title, .ac-strip[data-kind="setup"] .ac-card-title { color: var(--ac-warn); }
.ac-strip[data-kind^="gate"] .ac-card-title, .ac-strip[data-kind="unsupported"] .ac-card-title { color: var(--ac-bad); }
.ac-card-text { margin-top: 2px; color: var(--ac-dim); font-size: 12px; }
.ac-card-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.ac-card-row .btn { flex: none; padding: 4px 14px; }
.ac-card-act { margin-top: 8px; padding: 4px 14px; flex: none; }
.ac-card-row .ac-card-act { margin-top: 0; }
.ac-code, .ac-text-field { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------- composer */
.ac-composer { flex: none; padding: 8px 10px 10px; border-top: 1px solid var(--ac-line); background: var(--ac-panel); }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ac-chip {
  padding: 3px 10px; border: 1px solid var(--ac-line); border-radius: 12px;
  background: var(--ac-panel2); color: var(--ac-text); font: inherit; font-size: 12px; cursor: pointer;
}
.ac-chip:hover { border-color: var(--ac-agent); }
.ac-row { display: flex; align-items: flex-end; gap: 8px; }
.ac-input {
  flex: 1 1 auto; min-width: 0; min-height: 32px; max-height: 140px; resize: none; overflow-y: hidden;
  padding: 6px 9px; background: var(--ac-bg); color: var(--ac-text);
  border: 1px solid var(--ac-line); border-radius: 6px; font: inherit; line-height: 1.4;
}
.ac-input:focus { border-color: var(--ac-agent); outline: none; }
.ac-input:disabled { opacity: .55; }
/* A run is on: the field shows what it was and takes nothing, but it is not disabled, so it keeps the focus (a disabled one drops it to BODY and the page's shortcuts). */
.ac-input[readonly] { opacity: .65; cursor: default; }
.ac-input::placeholder { color: #64686f; }
/* app.css gives .btn.primary flex: 1, which in this row would squeeze the field. */
.ac-send { flex: none; height: 32px; padding: 0 16px; }
.ac-send.stop { background: var(--ac-bad); border-color: var(--ac-bad); color: #1b1c1f; }

/* ---------------------------------------------------------------- the grips */
.ac-grip { position: absolute; z-index: 4; width: 16px; height: 16px; touch-action: none; }
.ac-grip-se { right: 0; bottom: 0; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--ac-line) 50%, var(--ac-line) 70%, transparent 70%); }
.ac-grip-nw { left: 0; top: 0; cursor: nwse-resize; background: linear-gradient(315deg, transparent 50%, var(--ac-line) 50%, var(--ac-line) 70%, transparent 70%); }
.ac-grip:hover { filter: brightness(1.6); }

/* ---------------------------------------------------------------- the bubble */
.ac-bubble {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ac-panel2); color: var(--ac-agent); border: 1px solid var(--ac-agent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
}
.ac-bubble:hover { background: var(--ac-panel); }
.ac-bubble:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-bubble-dot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ac-panel2); }
.ac-bubble-dot.busy { background: var(--ac-agent); animation: ac-pulse 1.2s ease-in-out infinite; }
.ac-bubble-dot.unread { background: var(--ac-accent); }

/* The header button (#agentBtn) gets these classes from agentchat.js; the page styles the button itself. */
.agent-chat-btn { position: relative; }
.agent-chat-btn.on { border-color: var(--agent, #b59cff); }
.agent-chat-btn.busy::after, .agent-chat-btn.unread::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--agent, #b59cff);
}
.agent-chat-btn.busy::after { animation: ac-pulse 1.2s ease-in-out infinite; }
.agent-chat-btn.unread::after { background: var(--accent, #4ea1ff); }

/* ---------------------------------------------------------------- settings */
.ac-settings { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--ac-panel); }
.ac-settings:focus { outline: none; }
.ac-set-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--ac-line); }
.ac-set-title { color: var(--ac-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }
.ac-set-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 14px; scrollbar-width: thin; scrollbar-color: #4a4d55 transparent; }
.ac-set-note, .ac-set-lock { margin-bottom: 10px; padding: 6px 9px; background: rgba(224, 163, 62, .09); border: 1px solid var(--ac-warn); border-radius: 6px; color: var(--ac-text); font-size: 12px; }
.ac-set-group + .ac-set-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ac-line); }
.ac-field { margin-bottom: 10px; min-width: 0; }
.ac-field.locked { opacity: .7; }
.ac-label { display: block; margin-bottom: 3px; color: var(--ac-dim); font-size: 11.5px; }
.ac-hint { margin-top: 3px; color: #7b7f88; font-size: 11px; overflow-wrap: anywhere; }
.ac-settings input.ac-in {
  display: block; width: 100%; min-width: 0; padding: 4px 7px; background: var(--ac-bg); color: var(--ac-text);
  border: 1px solid var(--ac-line); border-radius: 4px; font: inherit;
}
.ac-settings input:focus, .ac-strip input:focus { border-color: var(--ac-agent); outline: none; }
.ac-settings input:disabled, .ac-settings select:disabled { opacity: .5; }
.ac-strip input.ac-code { padding: 4px 7px; background: var(--ac-bg); color: var(--ac-text); border: 1px solid var(--ac-line); border-radius: 4px; font: inherit; }
.ac-settings select.ac-select { width: 100%; }
.ac-keyrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ac-keystate { color: var(--ac-ok); font-family: var(--ac-mono); font-size: 12px; }
.ac-field.locked .ac-keystate { color: var(--ac-dim); }
.ac-reload, .ac-keyclear, .ac-srvcode-clear {
  padding: 0; background: none; border: 0; color: var(--ac-accent); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ac-reload:disabled, .ac-keyclear:disabled, .ac-srvcode-clear:disabled { opacity: .4; cursor: default; }
.ac-model-text { margin-top: 5px; }
.ac-set-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ac-set-actions .btn { flex: none; padding: 4px 16px; }
.ac-set-status { min-width: 0; color: var(--ac-ok); font-size: 12px; overflow-wrap: anywhere; }
.ac-set-status.bad { color: var(--ac-bad); }
.ac-test-out { margin-top: 6px; min-height: 18px; font-family: var(--ac-mono); font-size: 12px; overflow-wrap: anywhere; color: var(--ac-dim); }
.ac-test-out.good { color: var(--ac-ok); }
.ac-test-out.bad { color: var(--ac-bad); }
.ac-set-usage { margin-top: 8px; }
.ac-privacy { margin-top: 12px; padding: 6px 9px; border-left: 2px solid var(--ac-line); color: var(--ac-dim); font-size: 11.5px; font-style: italic; }

/* What a screen reader is told when a run is over: there, and not to be seen. */
.ac-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- the lightbox */
.ac-light {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, .84); cursor: zoom-out;
}
.ac-light:focus { outline: none; }
.ac-light-img { max-width: 100%; max-height: calc(100% - 28px); object-fit: contain; background: var(--ac-code); border-radius: 6px; box-shadow: 0 18px 60px rgba(0, 0, 0, .7); }
.ac-light-cap { margin-top: 8px; color: #cfd3dc; font-size: 12px; }

@keyframes ac-spin { to { transform: rotate(360deg); } }
@keyframes ac-pulse { 50% { opacity: .35; } }
@keyframes ac-blink { to { visibility: hidden; } }
@keyframes ac-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ac-spin, .ac-dot, .ac-typing i, .ac-bubble-dot, .agent-chat-btn::after, .ac-streaming *::after { animation: none !important; }
}

/* The card of a ui_point call (UI-CONTEXT 3.5): the question, its choices, and what the person chose. */
.ac-point { border-left-color: var(--ac-agent); }
.ac-point-ask { padding: 0 8px 4px 31px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
.ac-point-opts { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 4px 31px; }
.ac-point-opts[hidden] { display: none; }
.ac-point-opt { border: 1px solid var(--ac-line); border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--ac-dim); }
.ac-point-chosen { border-color: var(--ac-ok); color: var(--ac-ok); font-weight: 600; }
/* A form: each question is a block, its options a row of chips under it. */
.ac-point-opts.ac-point-form { display: block; }
.ac-point-q { padding: 2px 0 4px; }
.ac-point-qt { font-size: 12.5px; overflow-wrap: anywhere; }
.ac-point-qopts { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0; }
.ac-point-words { font-size: 12px; color: var(--ac-dim); overflow-wrap: anywhere; }
.ac-point-state { padding: 0 8px 5px 31px; font-size: 12px; color: var(--ac-dim); overflow-wrap: anywhere; }