/* the app frame: ONE header for the whole site (both views), and the assistant's viewport as a tablet-like frame (a bounded, rounded box).
   Everything that opens over the chat (the island's panel, the evidence sheet, the context drawer, popovers) opens INSIDE that frame and is clamped to it.
   Loaded last on purpose. z-order, low to high: messages 1, island 20, composer 30 (its drawer and note popup live inside), frame sheets 40, header 50 (its menus), side navigation 60. */
:root { --head-h: 52px; }

/* ---------- the header ---------- */
.apphead { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px 12px; height: var(--head-h); padding: 0 clamp(12px, 1.6vw, 20px); border-bottom: 1px solid var(--edge, var(--border)); background: var(--bg); }
.ah-l, .ah-r { display: flex; align-items: center; gap: 6px 8px; min-width: 0; }
.ah-l { flex: 0 1 auto; } .ah-r { flex: none; margin-left: auto; }
.ah-brand { display: flex; align-items: center; gap: 8px; margin-right: 4px; font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.ah-brand .logo { width: 26px; height: 26px; font-size: 13px; }
.ah-meta { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
div.ah-chat { display: flex; align-items: center; gap: 6px; min-width: 0; }
body:not(.ag-live) .ah-chat, body:not(:has(#agent.on)) .ah-chat { display: none !important; }
.ah-l .chip, .ah-l .act-pill, .ah-l .pulloff { flex: none; white-space: nowrap; }
.ah-skills { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.ah-skills .btn { white-space: nowrap; }
.ah-skills:empty, body:not(:has(#agent.on)) .ah-skills, body:not(.ag-live) .ah-skills { display: none !important; }   /* the developer's skill picker belongs to the assistant */
.ah-menu { display: none; }
.apphead .bar-pt { max-width: 100%; }
.cost-pop { top: calc(100% + 6px); right: 16px; }
.ah-aa { font: 700 13px var(--sans); letter-spacing: -.02em; }
.ah-fontmenu { width: min(268px, calc(100vw - 24px)); gap: 2px; padding: 6px; }
.fo-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.fo-row:hover { background: var(--surface-2); } .fo-row.on { background: var(--primary-soft); border-color: var(--primary); }
.fo-row > span { display: grid; min-width: 0; } .fo-row small { color: var(--muted); }
.fo-s { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); font-size: 18px; font-weight: 500; }
.fo-roboto { font-family: "Roboto", sans-serif; } .fo-atkinson { font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", sans-serif; } .fo-claude { font-family: "Newsreader", Georgia, serif; }
.apphead .vmenu { top: calc(100% + 6px); }

/* the sidebar and the page sit under the header */
.app { min-height: calc(100vh / var(--z, 1) - var(--head-h)); }
.sidebar { top: var(--head-h); height: calc(100vh / var(--z, 1) - var(--head-h)); }
.sidebar .brand { display: none; }   /* the header carries the brand */
@media (max-width: 899px) {
  body.dev .ah-menu { display: inline-grid; }
  .sidebar { top: 0; height: 100dvh; }
  .sidebar .brand { display: flex; }   /* the slide-over keeps its own title and close button */
  .ah-meta, .ah-skills { display: none; }
  .bar-btn span { display: none; } .bar-btn { padding: 0 8px; }
  .bar-pt select { max-width: 120px; }
}
@media (max-width: 640px) { #agFresh, #agNet, #agStmts, .ah-brand b { display: none; } }

/* ---------- the assistant's viewport = a tablet frame ---------- */
.main:has(#agent.on) { padding: 0; }
@media (min-width: 1101px) {
  .ag { height: calc(100dvh / var(--z, 1) - var(--head-h)); padding: 12px; gap: 12px; }
  .ag-main, .ag[data-size="classic"] > .ag-main, .ag[data-size="large"] > .ag-main { position: relative; height: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--edge-2, var(--border)); border-radius: 22px; background: var(--bg); box-shadow: var(--lift, var(--shadow)); }
  .ag[data-size="classic"], .ag[data-size="large"] { align-items: stretch; }
  .ag-side { border: 1px solid var(--edge-2, var(--border)); border-radius: 22px; padding: 0 16px; background: var(--surface); }
}
@media (max-width: 1100px) {   /* a phone or a small window: the frame is the screen, edge to edge */
  .ag-main { position: relative; overflow: hidden; height: calc(100dvh / var(--z, 1) - var(--head-h)); }
}

/* ---------- the evidence sheet: a bottom drawer INSIDE the frame (the drawer element moves into the frame while the assistant is open; the other pages keep the side sheet) ---------- */
.ag-main > .drawer { position: absolute; inset: 0; z-index: 40; border-radius: inherit; overflow: hidden; }
.ag-main > .drawer .drawer-bg { background: rgba(0, 0, 0, .28); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.ag-main > .drawer .drawer-panel { --sp: clamp(16px, 3cqw, 28px); top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: min(74%, 720px); min-height: 160px; padding: 6px var(--sp) 28px; border: 0; border-top: 1px solid var(--edge-2, var(--border-strong)); border-radius: 22px 22px 0 0; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -18px 50px rgba(0, 0, 0, .26); animation: evUp .26s cubic-bezier(.2, .8, .2, 1); }
:root:not([data-theme="light"]) .ag-main > .drawer .drawer-panel { background: var(--surface); }
.ag-main > .drawer .drawer-panel::before { content: ""; display: block; width: 38px; height: 4px; margin: 4px auto 10px; border-radius: 4px; background: var(--border-strong); position: sticky; top: 0; }
.ag-main > .drawer .drawer-panel > .row { position: sticky; top: 0; z-index: 2; margin: 0 -2px 10px !important; padding: 2px 0 8px; background: var(--surface); }
@keyframes evUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ag-main > .drawer .drawer-panel { animation: none; } }
.ag-msgs { padding-bottom: 40px !important; }   /* the composer is in the flow below the list: room for the bottom fade only */

/* whatever is in focus (the evidence, the context drawer, the island opened over a conversation) blurs and dims the frame behind it; the composer stays sharp under the island */
.ag-composer.dr-on::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .2); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: islScrim .25s ease both; }
.ag-composer.dr-on .ag-starters { visibility: hidden; }

/* ---------- billing: the codes as chips (code + system) with their meaning beside them; in the sheet the cards sit in columns and the confirm bar is pinned to the bottom of the sheet ---------- */
.bl-code { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 10px; padding: 5px 0; }
.bl-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bl-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 7px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); white-space: nowrap; transition: background .15s, border-color .15s; }
.bl-chip b { font: 600 13px var(--mono); letter-spacing: .01em; } .bl-chip em { font: 500 11px var(--sans); font-style: normal; letter-spacing: .03em; color: var(--muted); padding-left: 7px; border-left: 1px solid var(--border); }
.bl-ck { flex: none; width: 15px; height: 15px; border: 1.5px solid var(--border-strong); border-radius: 50%; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.bl-code:hover .bl-chip { border-color: var(--primary); }
.bl-in:checked + .bl-chip { background: var(--primary-soft); border-color: var(--primary); }
.bl-in:checked + .bl-chip .bl-ck { background: var(--primary); border-color: var(--primary); } .bl-in:checked + .bl-chip .bl-ck::after { content: ''; width: 4px; height: 7px; margin-top: -1px; border: solid var(--primary-ink); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.bl-in:focus-visible + .bl-chip { outline: 2px solid var(--ring); outline-offset: 2px; }
.bl-code.off .bl-chip { border-style: dashed; }
.bl-cd { min-width: 0; padding-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-code:hover .bl-cd { color: var(--text); }
@container agmain (max-width: 520px) { .bl-code { grid-template-columns: 1fr; } .bl-cd { padding-top: 0; } }
.bl-card { background: var(--surface-2); }
.ag-main > .drawer .bill { max-width: none; }
.ag-main > .drawer .bill .bl-lead { max-width: 70ch; }
@container agmain (min-width: 860px) { .ag-main > .drawer .bill .bl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: start; } .ag-main > .drawer .bill .bl-cards .bl-card { margin: 0; } }
.ag-main > .drawer .bl-foot { bottom: -28px; margin: 18px calc(-1 * var(--sp)) -28px; padding: 12px var(--sp) 16px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, .18); z-index: 2; }

/* the quiet billing line under the answer: one pill, a chip per code (not a sentence) */
.cd-lbtn { flex-wrap: nowrap; max-width: 100%; gap: 8px; padding: 4px 8px 4px 12px; }
.cd-chips { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.cd-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); white-space: nowrap; }
.cd-chip b { font: 600 12px var(--mono); } .cd-chip em { font: 500 10.5px var(--sans); font-style: normal; color: var(--muted); padding-left: 5px; border-left: 1px solid var(--border); }
.cd-chip.sup { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.cd-chip.rev { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.cd-more3 { flex: none; font: 500 12px var(--sans); color: var(--muted); white-space: nowrap; }
.cd-car { flex: none; margin-left: 2px; }
@container agmain (max-width: 520px) { .cd-chip em { display: none; } }

/* "Add to the action items?" under an answer: the kind of change on top, the item and its reason, then the two buttons */
.ag-pp li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 10px; }
.ag-pp .pp-k { grid-column: 1 / -1; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ag-pp .pp-t { grid-column: 1; flex: none; }
.ag-pp .pp-t .ns-d { color: var(--muted); font-size: 12.5px; }
/* the date a provider confirms before recording a screening done elsewhere */
.ag-pp .pp-date { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.ag-pp .pp-date input { font: 12.5px var(--sans); color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.ag-pp .pp-date input:focus { outline: none; border-color: var(--border-strong); }
@container agmain (max-width: 520px) { .ag-pp li { grid-template-columns: 1fr auto; } .ag-pp .pp-t { grid-column: 1 / -1; } }

/* lean controls: the island's tabs, the drawer's tabs and the chips above the composer are icons (with their count) and only the active one shows its name; the tooltip says the rest */
.isl-t span { display: none; } .isl-t.on span { display: inline; }
.ctxc:not(.on) .cl { display: none; } .ctxc { padding-inline: 9px; }
.dr-tab .cl { display: none; } .dr-tab.on .cl { display: inline; } .dr-tab { gap: 5px; padding: 0 10px; } .dr-tab .ico, .dr-tab svg { flex: none; }
.dr-tabs { flex: none; }
.isl-t { padding: 0 10px; }

/* the brand mark: the still asterisk on a transparent ground, no tile and no letter */
.logo.mark { background: url("/static/testui/img/icon.432d576d0070.svg") center / contain no-repeat; box-shadow: none; border-radius: 0; font-size: 0; color: transparent; }
.ah-brand .logo.mark { width: 24px; height: 24px; }

/* the briefing's mark: the asterisk with "AI" in front of the text, same as the island's first button */
.hero-av { width: auto; grid-auto-flow: column; gap: 6px; padding: 0 12px 0 10px; }
.hero-av b { font: 700 13px var(--sans); letter-spacing: .03em; }

/* ---------- quick actions: ONE chip family ----------
   `.qa` (under an answer), `.st-chip` (above the composer) and the billing line share a shape: 30px, a hairline, a quiet fill, an icon in the brand green, 12.5px text. A menu opens as a list of rows, not a stack of pills. */
.qa, .st-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 500 12.5px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.qa:hover, .st-chip:hover { background: var(--primary-soft); border-color: var(--primary); }
.qa .ico, .st-chip .ico { flex: none; color: var(--primary-text); }
.qa small { padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font: 600 11px/17px var(--sans); }
.qa > .ico:last-child { color: var(--faint); transition: transform .2s; } .nx-menu[open] > .qa > .ico:last-child { transform: rotate(180deg); }
.qa:focus-visible, .st-chip:focus-visible, .qa-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nx-row { gap: 8px; margin: 12px 0 2px; }
.nx-menu > summary::after { content: none; }
.nx-pop { gap: 2px; padding: 6px; min-width: 260px; max-width: min(420px, 100%); border-radius: 14px; border-color: var(--border-strong); background: var(--surface); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); }
.qa-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: 500 13px/1.35 var(--sans); text-align: left; cursor: pointer; }
.qa-item .ico { flex: none; color: var(--primary-text); } .qa-item:hover { background: var(--surface-2); }
.st-chip { padding: 0 12px; font-size: 12.5px; } .st-chip span { overflow: hidden; text-overflow: ellipsis; } .st-chip { max-width: 100%; }
.cd-lbtn { height: 30px; border-color: var(--border-strong); background: var(--surface); }

/* the billing panel in the conversation: a card under the answer (the confirm bar only sticks inside the sheet) */
.bl-foot { position: static; bottom: auto; background: none; margin-top: 14px; }
.ag-main > .drawer .bl-foot { position: sticky; }
.ag-tail .bill { max-width: none; margin-top: 12px; padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.ag-tail .bill .bl-h h2 { font-size: 16px; } .ag-tail .bill .bl-lead { font-size: 13px; margin: 2px 0 8px; }
.ag-tail .bill .bl-card { background: var(--surface); }
.ag-tail .bill .bl-sec { margin: 12px 0 6px; }
.ag-tail .bill .bl-foot { padding-top: 12px; border-top: 1px solid var(--border); }

/* the answer's offers ("What you can do", "Add to the action items?") use the same chip as every other quick action */
.ns-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 500 12.5px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.ns-btn:hover { background: var(--primary-soft); border-color: var(--primary); } .ns-btn:disabled { opacity: .55; cursor: default; }
.ag-next { background: var(--surface-2); border-color: var(--border); }
.ag-next .ns-h { font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }

/* ---------- the island: closed until opened, it only breathes; opened it always hangs OVER the page (nothing underneath moves) ---------- */
.ag-isl.nudge:not(.is-open) .isl { animation: islNudge 5s ease-in-out 1.6s infinite; }
.ag-isl.nudge:not(.is-open) .isl:hover { animation: none; }
.ag-isl.nudge:not(.is-open) .isl-x { animation: islDip 5s ease-in-out 1.6s infinite; }
@keyframes islNudge { 0%, 62%, 100% { box-shadow: var(--shadow); } 78% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 15%, transparent), 0 6px 22px color-mix(in srgb, var(--primary) 18%, transparent); } }
@keyframes islDip { 0%, 60%, 100% { transform: none; } 72% { transform: translateY(3px); } 84% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ag-isl.nudge .isl, .ag-isl.nudge .isl-x { animation: none; } }

/* ---------- the briefing's thinking: the chat's own thinking line (mark + one verb) with the agent's thoughts in plain sentences ---------- */
.sum-think[hidden] { display: none; }
.tl { margin: 2px 0 12px; font-family: var(--sans); animation: feedIn .4s cubic-bezier(.2, .9, .2, 1) both; }
.tl-h { display: flex; align-items: center; gap: 9px; font: 500 14px/22px var(--sans); }
.tl-t { margin: 6px 0 0 26px; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.tl-s { animation: flIn .5s cubic-bezier(.2, .9, .2, 1) both; } .tl-s.running { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .tl, .tl-s { animation: none; } }

/* ---------- one type scale for the chat, the island and the drawers ----------
   reading text 16 (answers, the briefing, the summary in the island) · user message 15 · row titles 14 · body lines 13 · secondary lines 12.5 · chips, tabs and buttons 12.5 · captions 12 */
.ag-answer, .summsg .ag-answer, .isl-sumtext { font-size: 16px; }
.ag-m.u .b { font-size: 15px; }
.isl-t, .dr-tab, .ctxc, .qa, .st-chip, .ns-btn, .isl-body .ai-link, .isl-body .btn.sm { font-size: 12.5px; }
.cn-name b { font-size: 14.5px; font-weight: 600; } .cn-nar, .sa-m { font-size: 13px; } .cn-meta, .isl-r-m, .dr-m, .isl-body .pc-m { font-size: 12.5px; }
.isl-body .pc-main b, .isl-body .pc-t b, .isl-r-1 b, .dr-row b, .sa-l1 b { font-size: 14px; font-weight: 600; }
.isl-sub, .ig h4, .sa h4, .dr-g { font-size: 12px; }
.ig h4 { letter-spacing: .06em; }

/* Gather: every request is a run; the strip switches between the patients being gathered */
.gr-runs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .gr-runs[hidden] { display: none; }
.gr-run { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 500 12.5px var(--sans); cursor: pointer; transition: background .15s, border-color .15s; }
.gr-run:hover { background: var(--primary-soft); border-color: var(--primary); } .gr-run.on { background: var(--primary-soft); border-color: var(--primary); }
.gr-run small { color: var(--muted); font: 500 11.5px var(--sans); }
.gr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); } .gr-dot.ok { background: var(--green); } .gr-dot.bad { background: var(--red); } .gr-dot.run { background: var(--amber); animation: pulse 1.4s ease-in-out infinite; }

/* the console's login gate: it covers everything until a token exists */
.lg { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.lg-box { width: min(380px, 100%); display: grid; gap: 12px; justify-items: stretch; padding: 28px 24px 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); text-align: left; }
.lg-box .logo.mark { width: 36px; height: 34px; } .lg-box h2 { margin: 0; font: 600 20px var(--display); letter-spacing: -.01em; } .lg-box p { margin: 0; color: var(--muted); font-size: 14px; }
.lg-box .adm-field input { width: 100%; font-size: 15px; letter-spacing: .12em; } .lg-box .btn { justify-content: center; padding: 9px 14px; font-size: 14px; }
.lg-msg { min-height: 18px; color: var(--red); font-size: 13px; }

/* a question back to the provider: rows to pick (the care plan asks which conditions it should cover) */
.ag-choice { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 8px; }
.ag-choice .ch-h { font: 600 14px var(--sans); color: var(--text); }
.ag-choice .ch-rows { display: grid; gap: 6px; max-height: min(46vh, 380px); overflow-y: auto; padding-right: 2px; }
.ag-choice .ch-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.ag-choice .ch-row:hover { border-color: var(--border-strong); }
.ag-choice .ch-row:focus-visible, .ag-choice .ch-other input:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.ag-choice .ch-row[aria-checked="true"] { border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 5%, transparent); }
.ag-choice .ch-box { width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: 5px; display: grid; place-items: center; color: transparent; }
.ag-choice .ch-row[aria-checked="true"] .ch-box { background: var(--text); color: var(--bg); }
.ag-choice .ch-t { display: grid; gap: 1px; min-width: 0; } .ag-choice .ch-t b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; } .ag-choice .ch-t .ns-d { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ag-choice .ch-k { font: 11px ui-monospace, Menlo, monospace; color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.ag-choice .ch-other { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.ag-choice .ch-other input { font: 14px var(--sans); color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.ag-choice .ch-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ag-choice .ch-fx { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ag-choice .ns-btn:disabled { opacity: .45; cursor: not-allowed; }
.ag-choice.done .ch-a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
@media (hover: none) { .ag-choice .ch-k { display: none; } }