/* liquid glass layer + final overrides (must stay last) (cut from app.css, order preserved) */
/* material: flat glass (no blur) for everything that sits in the page */
.card, .stat, .stage, .ag-chart, .ag-pull, .ag-upd, .ag-opts, .ag-ex .ex, .stmt, .ag-skills, .gs-card, fieldset, .tbl-wrap, .ag-answer .ag-tbl, .gwrap, #xbody, pre {
  background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--spec); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card, .stat, .stage, .ag-chart, .ag-pull, .ag-upd, .stmt, .gs-card, fieldset, .gwrap, #xbody { border-radius: var(--r-lg); }
.ag-opts, .ag-hint, .ag-ex .ex, .tbl-wrap, .ag-answer .ag-tbl, pre, .ag-answer .ag-code { border-radius: var(--r-md); }
.card { transition: border-color .25s var(--ease), background .25s var(--ease); } .card:hover { border-color: var(--edge-2); transform: none; }
.ag-answer .ag-code { background: var(--glass-lo); border: 1px solid var(--edge); }

/* frosted: only where something scrolls underneath */
.sidebar { background: var(--glass-lo); border-right: 1px solid var(--edge); box-shadow: none; backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); }
.drawer-bg { background: rgba(0,0,0,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.drawer-panel { background: var(--glass-hi); border: 0; border-left: 1px solid var(--edge); box-shadow: var(--spec), -24px 0 60px rgba(0,0,0,.3); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); }
:root:not([data-theme="light"]) .drawer-panel { background: rgba(28,30,27,.72); }
.toast { background: var(--glass-hi); border: 1px solid var(--edge); border-left: 2px solid var(--green); border-radius: var(--r-md); box-shadow: var(--spec), var(--lift); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); animation: rise .45s var(--ease) both; }
:root:not([data-theme="light"]) .toast { background: rgba(34,36,32,.78); }
.gs-sug { background: var(--glass-hi); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--spec), var(--lift); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); }
:root:not([data-theme="light"]) .gs-sug { background: rgba(30,32,29,.8); }

/* controls: capsules and soft rects */
input, select, textarea { background: var(--glass-lo); border: 1px solid var(--edge); border-radius: var(--r-sm); box-shadow: none; backdrop-filter: none; transition: border-color .2s, background .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { background: var(--glass); border-color: color-mix(in srgb, var(--amber) 55%, transparent); box-shadow: none; }
.btn, button.go { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: none; backdrop-filter: none; padding: 7px 14px; transition: background .2s, border-color .2s, transform .15s var(--ease); } .btn:hover { background: var(--glass-hi); border-color: var(--edge-2); transform: translateY(-1px); } .btn:active { transform: none; }
.btn.sm, button.go.sm { padding: 4px 11px; }
.btn.primary { background: var(--primary); border-color: transparent; color: var(--primary-ink); box-shadow: none; } .btn.primary:hover { background: var(--primary); filter: brightness(1.12); }
.btn.on { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 60%, transparent); }
.chip { border-radius: 999px; border: 1px solid var(--edge); background: var(--glass-lo); backdrop-filter: none; }
.chip.amber { background: var(--amber-soft); } .chip.green { background: var(--green-soft); } .chip.red { background: var(--red-soft); } .chip.sky { background: var(--sky-soft); } .chip.violet { background: var(--violet-soft); }
.nav-item { border-radius: var(--r-md); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; } .nav-item:hover { background: var(--glass); transform: none; } .nav-item.on { background: var(--glass-hi); border-color: var(--edge); box-shadow: none; color: var(--text); }
.nav-item.on svg { color: var(--amber); }
.logo { border-radius: 8px; background: var(--primary); box-shadow: none; }
.vtabs { background: var(--glass-lo); border: 1px solid var(--edge); border-radius: var(--r-md); padding: 3px; gap: 2px; width: auto; } .vtabs button { border-radius: var(--r-sm); padding: 5px 12px; } .vtabs button.on { background: var(--glass-hi); color: var(--text); box-shadow: var(--spec); font-weight: 600; }
.ag-skills { border-radius: var(--r-md); padding: 3px; } .ag-skills .btn { border-radius: var(--r-sm); } .ag-skills .btn { border: 0; background: transparent; box-shadow: none; padding: 4px 11px; } .ag-skills .btn:hover { background: var(--glass); transform: none; } .ag-skills .btn.on { background: var(--glass-hi); box-shadow: var(--spec); color: var(--text); }

th { background: transparent; } tr:hover td { background: var(--glass-lo); }
.page.on { animation: fade .35s var(--ease) both; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
*::-webkit-scrollbar-thumb { background: var(--edge); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; } *::-webkit-scrollbar-thumb:hover { background: var(--edge-2); background-clip: padding-box; }

/* the agent page is exactly one screen: only the conversation scrolls */
body:has(#agent.on) { overflow: hidden; } .main:has(#agent.on) { padding-top: 14px; padding-bottom: 0; }
.ag { height: calc(100dvh / var(--z, 1) - 14px); }
.ag-msgs { scroll-behavior: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 8px 4px 28px; }
.ag-side { overscroll-behavior: contain; border-left: 1px solid var(--edge); } .ag-composer { flex: none; padding-bottom: 14px; }

/* conversation */
.ag-m { margin: 26px 0; } .ag-m.fx { animation: rise .55s var(--ease) both; }
.ag-m.u .b { background: var(--glass-hi); border: 1px solid var(--edge); color: var(--text); border-radius: var(--r-lg); border-bottom-right-radius: 4px; box-shadow: none; padding: 10px 16px; }

.ag-m.a::before { content: none; }
.ag-answer { font-size: 15.5px; line-height: 1.7; max-width: 68ch; text-wrap: pretty; } .ag-answer p { margin: 0 0 12px; }
.ag-answer .w { animation: wIn 1.1s ease both; } @keyframes wIn { from { opacity: 0; } to { opacity: 1; } }
.ag-answer h5 { font-size: 13px; font-weight: 600; margin: 22px 0 6px; color: var(--text); }
.ag-answer h5.sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 8px; margin: 24px 0 8px; border-bottom: 1px solid var(--edge); }
.push { font: 500 12px var(--sans); padding: 4px 12px; color: var(--text); background: var(--glass); border: 1px solid var(--edge); border-radius: 999px; box-shadow: none; transition: background .2s, transform .15s var(--ease); } .push:hover:not(:disabled) { background: var(--glass-hi); transform: none; filter: none; }
.push.done { color: var(--green); background: var(--green-soft); border-color: transparent; box-shadow: none; animation: none; }
.cite { background: var(--glass); border: 1px solid var(--edge); border-radius: 999px; color: var(--muted); min-width: 17px; height: 17px; } .cite:hover { background: var(--glass-hi); color: var(--text); transform: none; }

/* thinking: one quiet capsule */
.ag-think { animation: none; margin: 0 0 14px; }
.think-h { background: var(--glass); border: 1px solid var(--edge); border-radius: 999px; box-shadow: none; padding: 6px 14px 6px 12px; gap: 12px; color: var(--muted); backdrop-filter: none; } .think-h:hover { border-color: var(--edge-2); color: var(--text); }
.stg i { height: 3px; width: 14px; border-radius: 3px; background: var(--edge-2); opacity: .5; } .stg i.now { width: 24px; background: var(--amber); opacity: 1; animation: none; } .stg i.done { background: var(--green); opacity: .9; }
.rotw { font-size: 13px; } .rot.in { animation: rotIn .45s var(--ease) both; } .rot.out { animation: rotOut .45s var(--ease) both; }
@keyframes rotIn { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes rotOut { from { opacity: 1; } to { transform: translateY(-70%); opacity: 0; } }
.think-body { border-left-color: var(--edge-2); margin-top: 10px; } .ag-think.open .think-body { animation: fade .3s both; }

/* under the answer */
.ag-tail > * { animation: rise .6s var(--ease) both; }
.ag-acts { margin-top: 14px; gap: 2px; margin-left: -6px; }
.act { height: 30px; min-width: 30px; padding: 0 8px; border-radius: 999px; color: var(--faint); background: transparent; border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s; } .act:hover { background: var(--glass); border-color: var(--edge); color: var(--text); transform: none; }
.act[data-act=up].on { color: var(--green); background: var(--green-soft); } .act[data-act=down].on { color: var(--red); background: var(--red-soft); } .act.srcs.on { background: var(--glass); border-color: var(--edge); color: var(--text); } .act.on svg { animation: none; }
.ag-sources.open { animation: fade .3s both; } .ag-src { background: var(--glass); border: 1px solid var(--edge); border-radius: 999px; box-shadow: none; } .ag-src:hover { border-color: var(--edge-2); transform: none; }
.ag-sugg { margin-top: 12px; gap: 8px; } .ag-sugg > span { font-size: 11px; letter-spacing: .07em; }
.pill-btn, .ag-chip { background: var(--glass); border: 1px solid var(--edge); color: var(--text); border-radius: 999px; padding: 5px 13px; box-shadow: none; backdrop-filter: none; transition: background .2s, border-color .2s, transform .15s var(--ease); } .pill-btn:hover, .ag-chip:hover { background: var(--glass-hi); border-color: var(--edge-2); color: var(--text); transform: none; box-shadow: none; }
.pill-btn.primary { background: var(--primary); border-color: transparent; color: var(--primary-ink); } .pill-btn.ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--muted); }
.ag-hint { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); }
.ag-meta { color: var(--faint); }

/* composer: the one floating frosted surface */
.ag-composer textarea { background: var(--glass-hi); border: 1px solid var(--edge-2); border-radius: 16px; box-shadow: var(--spec), var(--lift); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); padding: 15px 56px 15px 20px; min-height: 54px; transition: border-color .2s, box-shadow .25s; }
:root:not([data-theme="light"]) .ag-composer textarea { background: rgba(36,38,34,.62); }
.ag-composer textarea:focus { border-color: color-mix(in srgb, var(--amber) 55%, transparent); box-shadow: var(--spec), var(--lift); }
.send { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); border: 0; box-shadow: none; } .send:hover { background: var(--primary); filter: brightness(1.12); color: var(--primary-ink); transform: none; }
.ag-empty { animation: fade .7s both; } .ag-empty .spark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--spec); font-size: 20px; color: var(--muted); background-image: url("/static/testui/img/thinking.159a2aaebf37.svg"); background-size: 26px; background-repeat: no-repeat; background-position: center; }
.ag-empty h2 { font-size: 26px; font-weight: 500; } .ag-ex .ex { text-align: left; transition: background .2s, border-color .2s, transform .2s var(--ease); } .ag-ex .ex:hover { background: var(--glass-hi); border-color: var(--edge-2); transform: translateY(-1px); }

/* dictation bubble */
.ag-m .b.dict { background: var(--glass); border: 1px solid var(--edge-2); border-radius: var(--r-lg); box-shadow: none; padding: 14px 16px; backdrop-filter: none; } .ag-m .b.dict.live { border-color: color-mix(in srgb, var(--red) 70%, transparent); box-shadow: var(--spec), 0 0 0 4px var(--red-soft); }
.b.dict .dpill { border-radius: 999px; } .b.dict .dtext { font-size: 15px; }
.ag-fail, .ag-banner { border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) { .ag-m.fx, .ag-tail > *, .rot, .page.on, .ag-answer .w, .toast { animation: none !important; } }

/* structure of the answer chrome (thinking state, actions, sources, SOAP push) */
.think-h { display: inline-flex; align-items: center; cursor: pointer; font: inherit; } .think-h .chev { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .25s var(--ease); } .ag-think.open .chev { transform: rotate(180deg); }
.stg { display: inline-flex; align-items: center; gap: 4px; flex: none; } .stg i { display: block; transition: width .5s var(--ease), background .4s; }
.rotw { position: relative; display: inline-block; height: 20px; width: min(44vw, 340px); overflow: hidden; vertical-align: middle; color: var(--text); }
.rot { display: block; position: absolute; left: 0; top: 0; max-width: 100%; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rot.out { color: var(--muted); }
.ag-acts { display: flex; align-items: center; } .act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 12px var(--sans); cursor: pointer; } .act.srcs { margin-left: auto; padding: 0 12px; } .act.srcs .chev { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); } .act.srcs.on .chev { transform: rotate(180deg); }
.ag-sources { display: none; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ag-sources.open { display: flex; }
.push { flex: none; cursor: pointer; } .push:disabled { cursor: default; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1s ease-in-out infinite; flex: none; }
.ag-acts, .ag-sugg, .ag-sources, .ag-meta, .ag-hint { max-width: 68ch; }

/* evidence pane: a quiet list grouped like the answer's sources (numbers match the citations in the text) */
.evh { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 4px 6px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .evh:first-child { margin-top: 2px; } .evh small { font-weight: 500; letter-spacing: 0; }
.evr { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s; } .evr:hover { background: var(--glass); }
.evn { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; display: inline-grid; place-items: center; font: 500 11px var(--mono); color: var(--muted); border: 1px solid var(--edge-2); } .evr:not(.cited) .evn { border: 0; width: 20px; } .evr:not(.cited) .evn::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); opacity: .6; }
.evm { min-width: 0; } .evt { font-size: 13.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; } .evr:not(.cited) .evt { color: var(--muted); } .evs { margin-top: 1px; font-size: 12px; color: var(--faint); }
.evnone { padding: 8px 10px; color: var(--faint); font-size: 13px; }

/* dictation: your words in a quiet bubble, chunks fade in; timer and actions below it */
.ag-m.dictm { display: flex; flex-direction: column; align-items: flex-end; }
.ag-m.dictm .dwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: auto; max-width: min(640px, 92%); }
.ag-m .b.dict { width: auto; max-width: 100%; background: var(--glass-hi); border: 1px solid var(--edge); border-radius: var(--r-lg); border-bottom-right-radius: 4px; box-shadow: none; padding: 12px 18px; transition: border-color .4s, box-shadow .4s; }

.ag-m .b.dict.live { border-color: color-mix(in srgb, var(--red) 45%, transparent); box-shadow: var(--spec), 0 0 0 4px var(--red-soft); }
.b.dict .dtext { font: 16px/1.6 var(--sans); color: var(--text); white-space: pre-wrap; min-width: 120px; } .b.dict .dtext textarea { width: 100%; min-width: 320px; min-height: 90px; font: inherit; }
.dseg.new { animation: segIn .9s var(--ease) both; } @keyframes segIn { from { opacity: 0; } to { opacity: 1; } }
.b.dict .dtext.empty { height: 26px; min-width: 56px; display: flex; align-items: center; gap: 5px; } .b.dict .dtext.empty::before, .b.dict .dtext.empty::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1.2s ease-in-out infinite; } .b.dict .dtext.empty::after { animation-delay: .25s; }
.dmeta { display: flex; align-items: center; gap: 7px; min-height: 0; font: 500 12px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; } .dmeta:empty { display: none; } .dmeta .rec-dot { width: 6px; height: 6px; }
.dacts { display: flex; justify-content: flex-end; animation: rise .5s var(--ease) both; } .dacts:empty { display: none; } .dgrp { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ag-m .b.dict.live { border-color: color-mix(in srgb, var(--red) 30%, var(--edge-2)); box-shadow: var(--spec); }

.bar > i { background: var(--primary); opacity: .85; }
body::before { background: radial-gradient(60vmax 40vmax at 50% -10%, var(--g1), transparent 70%), radial-gradient(50vmax 40vmax at 100% 100%, var(--g2), transparent 70%), var(--bg); }

/* correctness: `hidden` must win over any display rule (chips used to show up empty) */
[hidden] { display: none !important; }
.chip:empty { display: none; }
/* agent toolbar: row 1 = patient, requester, status, actions; row 2 = skills */

 

  

   /* the model is shown in every run's Flow tab; keep the toolbar to one row of actions */

/* composer: textarea reserves room for its three buttons; buttons share one baseline (10px inside the field) and one size */
.ag-composer { position: relative; padding-bottom: 14px; }
.ag-composer textarea { padding: 16px 132px 16px 20px; min-height: 54px; line-height: 22px; }
.ag-composer .send, .ag-composer .mic, .ag-composer .note { position: absolute; bottom: 24px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.ag-composer .send { right: 12px; } .ag-composer .mic { right: 50px; } .ag-composer .note { right: 88px; }
.ag-composer .mic, .ag-composer .note { border: 0; background: transparent; color: var(--muted); transition: background .15s, color .15s; } .ag-composer .mic:hover, .ag-composer .note:hover { background: var(--glass-hi); color: var(--text); border: 0; }
.ag-composer .mic.recording { background: var(--red); color: #fff; }
/* top chips: one size, never clipped */

/* your messages are primary */
.ag-m.u .b, .ag-m .b.dict { background: var(--primary); border: 0; color: var(--primary-ink); box-shadow: none; }
.ag-m .b.dict .dtext, .ag-m .b.dict .dtext textarea { color: var(--primary-ink); } .ag-m .b.dict .dtext textarea { background: rgba(0,0,0,.18); border: 0; }
.ag-m .b.dict .dtext.empty::before, .ag-m .b.dict .dtext.empty::after { background: var(--primary-ink); opacity: .6; }
.ag-m .b.dict.live { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 55%, transparent); }

/* the agent fills the screen like a chat app: no page padding, a full-height column and pane, a centered reading column */
.main:has(#agent.on) { padding: 0; max-width: none; }
.ag { height: calc(100dvh / var(--z, 1)); gap: 0; grid-template-columns: minmax(0, 1fr) clamp(440px, 31%, 600px); }
.ag-main { padding: 0; }

.ag-opts { max-width: 780px; width: calc(100% - 40px); margin: 10px auto 0; }
.ag-msgs { max-width: none; width: 100%; margin: 0; padding: 8px 20px 28px; }
.ag-msgs > .ag-m { width: 100%; max-width: clamp(720px, 56vw / var(--z, 1), 880px); margin-left: auto; margin-right: auto; }
.ag-composer { max-width: clamp(720px, 56vw / var(--z, 1), 880px); width: calc(100% - 40px); margin: 0 auto; padding: 0 0 18px; }
.ag-composer .send, .ag-composer .mic, .ag-composer .note { bottom: 28px; }
.ag-setup { max-width: 900px; width: calc(100% - 48px); margin: 28px auto; }
.ag-side { padding: 0 20px; border-left: 1px solid var(--edge); } .ag-side .vtabs { margin: 12px 0 14px; }
@media (max-width: 1100px) { .ag { grid-template-columns: 1fr; height: auto; } .main:has(#agent.on) { padding: 0; } body:has(#agent.on) { overflow: auto; } .ag-msgs { max-height: none; } }
  

 

 

/* answers span the same column as the composer and your messages (no narrower reading width, no left indent) */
.ag-msgs > .ag-m.a, .ag-m.a .b, .ag-m.a { padding-left: 0; margin-left: auto; }
.ag-m.a .b { max-width: none; padding-left: 0; }
.ag-answer, .ag-acts, .ag-sugg, .ag-sources, .ag-meta, .ag-hint { max-width: none; }
.ag-msgs { scrollbar-gutter: auto; }

/* your bubbles stay primary in BOTH themes (an older light-theme rule made them pale with white text) */
:root[data-theme="light"] .ag-m .b.dict, :root[data-theme="light"] .ag-m.u .b { background: var(--primary); color: var(--primary-ink); border: 0; }
:root[data-theme="light"] .ag-m .b.dict .dtext, :root[data-theme="light"] .ag-m .b.dict .dtext textarea { color: var(--primary-ink); }
/* browser zoom / narrow windows: the chat keeps a full-screen height (composer pinned); the side pane moves below it instead of squeezing the chat */
@media (max-width: 1100px) {
  .ag { display: block; height: auto; }
  .ag-main { height: calc(100dvh / var(--z, 1)); }
  .ag-side { border-left: 0; border-top: 1px solid var(--edge); padding-top: 4px; min-height: 60vh; }
  body:has(#agent.on) { overflow: auto; }
}

/* add-a-note popup, anchored above the composer */
.ag-composer .note.on { background: var(--glass-hi); color: var(--text); }
.ag-notepop { position: absolute; right: 0; bottom: calc(100% - 8px); width: min(480px, 100%); z-index: 15; padding: 14px; border-radius: var(--r-lg); background: var(--glass-hi); border: 1px solid var(--edge-2); box-shadow: var(--lift); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); animation: rise .25s var(--ease) both; }
:root:not([data-theme="light"]) .ag-notepop { background: rgba(34,36,32,.86); }
.np-h { display: grid; gap: 2px; margin-bottom: 10px; } .np-h b { font: 600 14px var(--display); } .np-h span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ag-notepop textarea { width: 100%; min-height: 120px; max-height: 40vh; resize: vertical; font: 14.5px/1.55 var(--sans); padding: 10px 12px; border-radius: var(--r-md); }
.np-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .np-f small { color: var(--faint); } .np-f > span { display: flex; gap: 6px; }

.ag-composer textarea { overflow-y: hidden; max-height: 200px; } .ag-notepop textarea { overflow-y: auto; }

/* thinking, Claude-style: plain text, a light that sweeps across the verb; finished = a quiet "Thought for Ns" row */
.ag-think { margin: 0 0 14px; }
.think-h { background: none; border: 0; box-shadow: none; padding: 2px 0; gap: 8px; color: var(--muted); border-radius: var(--r-sm); font-size: 14px; } .think-h:hover { color: var(--text); border: 0; }
.ag-think.busy .think-h { color: var(--text); }
.spark { flex: none; width: 17px; height: 16px; display: inline-block; vertical-align: -3px; background: url("/static/testui/img/thinking.159a2aaebf37.svg") center / contain no-repeat; }   /* the thinking mark: an animated asterisk (img/thinking.svg) */
@keyframes sparkSpin { to { transform: rotate(360deg); } }
.rotw { width: 17ch; height: 22px; font-size: 14px; }
.rot { line-height: 22px; } .rot.in { color: var(--muted); }
.rot.shim { background: linear-gradient(100deg, var(--muted) 38%, var(--text) 50%, var(--muted) 62%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rotIn .45s var(--ease) both, strobe 1.9s linear infinite; }
@keyframes strobe { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.tick { width: 6px; height: 6px; border-radius: 50%; background: var(--green); font-size: 0; opacity: .8; display: inline-block; } .tick.bad { background: var(--red); }
.think-h .chev { margin-left: -2px; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .spark { background-image: url("/static/testui/img/icon.432d576d0070.svg"); } .rot.shim { animation: none; } .rot.shim { color: var(--text); background: none; } }
.rotw { transition: width .35s var(--ease); min-width: 0; }

.pwarn { margin-bottom: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--amber-soft); color: var(--text); font-size: 13px; }

/* ---------- landing summary: the chat's start page for a patient with data ---------- */
.ag-start { text-align: left; display: grid; gap: 14px; }
.ag-m.landingmsg { display: block; margin-top: 4px; } .ag-m.landingmsg .ag-empty { animation: none; }
/* the landing summary text: plain text like an agent reply, in the display face, pinned to the top of the conversation */
.ag-m.summsg { position: sticky; top: -8px; z-index: 6; margin: 0 0 6px; padding: 14px 0 8px; } .ag-m.summsg.pin { padding-top: 22px; background: color-mix(in srgb, var(--bg) 98%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.ag-m.summsg::before { display: none; } .ag-m.summsg[hidden] { display: none; }
.ag-m.summsg.folded { display: flex; align-items: center; gap: 14px; padding: 12px 0 10px; }
.ag-m.summsg .ag-answer.fold { flex: 1; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-m.summsg .ag-answer.fold p { display: inline; margin: 0; }
.ag-m.summsg.folded .sum-tail { flex: none; } .ag-m.summsg.folded .ag-acts { margin: 0; } .ag-m.summsg.folded .act span { display: none; } .ag-m.summsg.folded .act[data-sum-toggle] span, .ag-m.summsg.folded .act[data-sum-toggle] { display: inline-flex; }
.ic.rg.stale { position: relative; } .ic.rg.stale::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--bg); }
.ag-m.summsg .ag-acts { margin-top: 6px; } .ag-m.summsg .ld-wait { padding: 4px 0; }
/* ---- the point-of-care section: a light summary, interactive bullets, a separator. Light type, hairlines, no cards. ---- */
.ag-msgs > .ag-m.summsg, .ag-msgs > .ag-m.landingmsg { max-width: none; padding-left: 6px; padding-right: 6px; }
.pc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 10px; } .pc-h h2 { margin: 0; font: 400 24px/1.25 var(--display); letter-spacing: -.02em; color: var(--text); }
.pc-meta { font-size: 12px; color: var(--faint); white-space: nowrap; }
.ag-m.summsg.pin .pc-h { display: none; }
.ag-m.summsg .ag-answer { max-width: 96ch; font-weight: 400; color: color-mix(in srgb, var(--text) 90%, var(--muted)); }
.ldx { display: block; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 6px 44px; margin-top: 6px; }
.pc-col h3 { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px; font: 500 11px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .pc-col h3 small { font: 500 11px var(--sans); letter-spacing: 0; color: var(--faint); }
.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-li { display: flex; align-items: center; gap: 8px; border-radius: 10px; transition: background .15s; } .pc-li:hover { background: var(--glass-lo); }
.pc-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 11px; padding: 8px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.pc-dot { flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--primary); opacity: .75; } .pc-dot.sev-marked { background: var(--amber); opacity: 1; } .pc-dot.sev-critical { background: var(--red); opacity: 1; } .pc-dot.sev-abnormal { background: var(--amber); opacity: .8; }
.pc-t { display: grid; gap: 1px; min-width: 0; } .pc-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; } .pc-l1 b { font: 500 14.5px/1.45 var(--sans); color: var(--text); } .pc-main:hover .pc-l1 b { color: var(--amber); }
.pc-icd { font: 500 11px var(--mono); letter-spacing: .01em; color: var(--muted); padding: 1px 7px; border: 1px solid var(--edge); border-radius: 999px; }
.pc-v { font: 500 14px var(--sans); font-variant-numeric: tabular-nums; color: var(--text); } .pc-tag { font: 600 10.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--amber); }
.pc-m { font-size: 12.5px; line-height: 1.5; color: var(--faint); } .pc-m .bad { color: var(--red); }
.pc-act { flex: none; margin-right: 6px; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--faint); font: 500 12px var(--sans); cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; } .pc-li:hover .pc-act, .pc-act:focus-visible { color: var(--muted); border-color: var(--edge); } .pc-act:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.pc-more { margin: 4px 0 0 8px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; } .pc-more:hover { color: var(--text); }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.pc-deep { padding: 6px 15px; border: 1px solid var(--edge-2); border-radius: 999px; background: var(--glass-lo); color: var(--text); font: 500 13px var(--sans); cursor: pointer; transition: background .15s, border-color .15s; } .pc-deep:hover { background: var(--glass-hi); border-color: var(--primary); }
.pc-by { font-size: 11.5px; color: var(--faint); text-align: right; }
.pc-new { margin: 14px 0 6px; padding: 2px 0 8px; } .pc-new h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font: 500 11px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .pc-new h3 small { font: 500 11px var(--sans); letter-spacing: 0; }
.pc-newf { display: flex; gap: 14px; margin: 2px 0 0 8px; }
.pc-dot.sev-info { background: var(--primary); opacity: .75; }
.pc-sep { height: 0; margin: 20px 0 6px; border-top: 1px solid var(--edge); }
@media (max-width: 760px) { .pc-grid { grid-template-columns: 1fr; } .pc-foot { flex-direction: column; align-items: stretch; } .pc-by { text-align: left; } .pc-act { opacity: 1; color: var(--muted); } }
.ld-lnk { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 2px; } .ld-lnk:hover { color: var(--amber); }
.ld-sk { display: grid; gap: 10px; } .ld-sk i { display: block; height: 22px; border-radius: 8px; background: linear-gradient(100deg, var(--glass) 30%, var(--glass-hi) 50%, var(--glass) 70%); background-size: 250% 100%; animation: strobe 1.8s linear infinite; } .ld-sk i:first-child { height: 70px; } .ld-sk i:last-child { width: 55%; }

/* pulling records: a quiet line in the chat (never a box) + the approval modal */
.ag-sys { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 3px 0; font-size: 13px; line-height: 1.5; color: var(--muted); animation: fade .35s both; }
.ag-sys .sd { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); } .ag-sys .sd.ok { background: var(--green); } .ag-sys .sd.wait { background: var(--amber); } .ag-sys .sd.bad { background: var(--red); }
.ag-report { align-items: flex-start; margin: 8px 0; } .ag-report .st { max-width: 70ch; } .ag-report .rl { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--faint); }
.ag-sys.ok .st { color: var(--text); } .ag-sys.bad .st { color: var(--red); } .ag-sys.muted { opacity: .75; } .ag-sys .n { font: 12px var(--mono); color: var(--faint); }
.ag-sys .sl { border: 0; background: none; padding: 2px 8px; border-radius: var(--r-sm); color: var(--amber); font: 500 13px var(--sans); cursor: pointer; } .ag-sys .sl:hover, .ld-act .sl:hover { background: var(--glass-hi); } .sl.ghost { color: var(--faint); }
.ag-sys .spin { width: 12px; height: 12px; border-width: 2px; }
.ag-sbar { height: 3px; max-width: 340px; margin: 4px 0 2px 17px; border-radius: 3px; background: var(--surface-3); overflow: hidden; } .ag-sbar i { display: block; height: 100%; min-width: 5%; background: var(--primary); border-radius: 3px; transition: width .6s var(--ease); }
.ld-wait { display: flex; align-items: center; gap: 10px; padding: 18px 4px; font-size: 15px; } .ld-wait .shim { background: linear-gradient(100deg, var(--muted) 38%, var(--text) 50%, var(--muted) 62%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: strobe 1.9s linear infinite; }
.ld-empty { padding: 6px 2px; } .ld-lead { margin: 0 0 12px; font-size: 16px; } .ld-act { display: flex; align-items: center; gap: 10px; } .ld-act .sl { border: 0; background: none; padding: 7px 10px; border-radius: var(--r-sm); font: 500 13px var(--sans); cursor: pointer; }
.modal-box .agm-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modal-box .agm-h h3 { margin: 0; font: 600 18px var(--display); } .modal-box .agm-b { margin: 8px 0 4px; max-height: min(62vh, 560px); overflow: auto; } .modal-box .agm-b p { margin: 0 0 10px; font-size: 13.5px; }
.modal-box .agm-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge); }
.modal-box .rev .ep { font: 12.5px var(--mono); color: var(--text); margin-bottom: 6px; word-break: break-all; } .modal-box .rev pre { margin: 0 0 8px; max-height: 340px; overflow: auto; background: var(--glass-lo); border: 1px solid var(--edge); border-radius: var(--r-md); padding: 10px 12px; font: 12px/1.5 var(--mono); } .modal-box .rev .hl { background: var(--amber-soft); border-radius: 3px; }

/* ---- composer: context chips, attached items and the drawer that rises from behind the box ---- */
.ag-composer { z-index: 5; }
.ag-main .ag-composer textarea { position: relative; z-index: 2; min-height: 96px; padding: 16px 20px 56px !important; }
.ag-main .ag-composer.has-att textarea { padding-top: 54px !important; }
.ag-composer .send, .ag-composer .mic, .ag-composer .note { z-index: 4; }
.ag-ctx { position: absolute; left: 12px; bottom: 26px; z-index: 4; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 150px); overflow: hidden; }
.ctxc { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--edge); border-radius: 999px; background: transparent; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; white-space: nowrap; transition: color .15s, background .15s, border-color .15s; }
.ctxc small { font: 500 11px var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; } .ctxc:hover { color: var(--text); background: var(--glass-lo); border-color: var(--edge-2); }
.ctxc.on { color: var(--text); background: var(--glass-hi); border-color: color-mix(in srgb, var(--primary) 60%, var(--edge)); }
.ag-att { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 4; display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; } .ag-att:empty { display: none; }
.attc { display: inline-flex; align-items: center; gap: 7px; max-width: 280px; height: 28px; padding: 0 6px 0 10px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--edge)); border-radius: 999px; background: var(--primary-soft); font-size: 12.5px; animation: fxIn .25s var(--ease) both; }
.attc .ak { font: 600 10px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .attc b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attc button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; } .attc button:hover { background: var(--glass-hi); color: var(--text); }
.ag-drawer { position: absolute; left: 0; right: 0; bottom: calc(100% - 44px); z-index: 1; display: flex; flex-direction: column; height: min(calc(46vh / var(--z, 1)), 430px); padding-bottom: 46px; border: 1px solid var(--edge-2); border-radius: 20px; background: linear-gradient(var(--glass-lo), var(--glass-lo)), var(--bg); box-shadow: var(--spec), var(--lift);
  transform: translateY(calc(100% + 80px)); visibility: hidden; opacity: .6; transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s linear .42s; }
.ag-drawer.open { transform: none; visibility: visible; opacity: 1; transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s; }
.dr-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.dr-tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--edge); border-radius: 999px; background: var(--glass-lo); }
.dr-tab { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; } .dr-tab small { font-size: 11px; color: var(--faint); } .dr-tab:hover { color: var(--text); } .dr-tab.on { background: var(--glass-hi); color: var(--text); box-shadow: var(--spec); }
.dr-s { flex: 1; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 999px; color: var(--faint); } .dr-s svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .dr-s input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 400 13px var(--sans); } .dr-s:focus-within { border-color: color-mix(in srgb, var(--primary) 60%, var(--edge)); }
.dr-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; } .dr-x:hover { background: var(--glass-hi); color: var(--text); }
.dr-b { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 4px; overscroll-behavior: contain; }
.dr-g { display: flex; align-items: baseline; gap: 8px; padding: 12px 10px 4px; font: 500 10.5px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .dr-g small { letter-spacing: 0; }
.dr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .12s; } .dr-row:hover { background: var(--glass-lo); }
.dr-t { display: grid; gap: 1px; min-width: 0; } .dr-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; } .dr-l1 b { font: 500 14px/1.4 var(--sans); } .dr-m { font-size: 12.5px; line-height: 1.45; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-ck { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--edge-2); border-radius: 50%; transition: background .15s, border-color .15s; } .dr-row:hover .dr-ck { border-color: var(--muted); }
.dr-row.on { background: var(--primary-soft); } .dr-row.on .dr-ck { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--primary-soft); }
.dr-sub { margin: 0 0 6px 22px; padding-left: 8px; border-left: 1px solid var(--border); } .dr-sub .dr-row { padding-top: 5px; padding-bottom: 5px; } .dr-exp .ico { transition: transform .15s; } .dr-exp.open .ico { transform: rotate(180deg); }
.dr-wrap { display: flex; align-items: center; gap: 4px; } .dr-wrap .dr-row { flex: 1; min-width: 0; }
.dr-open { flex: none; padding: 4px 10px; border: 1px solid var(--edge-2); border-radius: 999px; background: none; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; } .dr-open:hover { background: var(--glass-hi); color: var(--text); }
.dr-empty { padding: 26px 12px; text-align: center; font-size: 13px; color: var(--faint); }
.dr-row.abn .pc-v { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ag-drawer, .ag-drawer.open { transition: none; } .attc { animation: none; } }
/* action items under the landing summary (pages/demo/actions.js) */
.ai-sec h3 .ai-upd { margin-left: 4px; font: 500 11px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); } .ai-sec h3 .ai-upd.bad { color: var(--red); }
.ai-none { padding: 6px 8px; }
.ai-p-high { background: var(--red); opacity: 1; } .ai-p-medium { background: var(--amber); opacity: 1; } .ai-p-low { background: var(--faint); opacity: .8; }
.ai-due { font-size: 12px; color: var(--faint); } .ai-late { color: var(--red); }
.ai.closed .pc-l1 b, .ai.closed .pc-m { color: var(--faint); }
.ai-more { margin: 0 8px 8px 25px; padding: 8px 0 2px; border-top: 1px solid var(--edge); display: grid; gap: 6px; }
.ai-action { font-size: 13px; color: var(--text); }
.ai-acts, .ai-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ai-menu select, .ai-menu input[type="date"] { font: 400 13px var(--sans); padding: 4px 8px; border: 1px solid var(--edge-2); border-radius: 8px; background: var(--glass-lo); color: var(--text); }
.ai-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.ai-closedlist { margin-top: 4px; opacity: .85; }
.ai-why { font-size: 13.5px; line-height: 1.55; color: var(--text); } .ai-why b { font-weight: 600; margin-right: 4px; }
.ai-by { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--edge); border-radius: 999px; font: 500 10.5px var(--sans); letter-spacing: .02em; color: var(--faint); vertical-align: 1px; }
.ai-dr .ai-more { margin: 0 10px 8px 12px; }
/* action items, second pass: tabs, quick action, badges, closure line, the details dialog, undo */
.ai-sp { flex: 1; }
.ai-tabs { display: flex; align-items: center; gap: 4px; margin: 2px 0 6px; flex-wrap: wrap; }
.ai-tab { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; } .ai-tab small { color: var(--faint); font: 500 11.5px var(--sans); }
.ai-tab:hover { color: var(--text); background: var(--glass-lo); } .ai-tab.on { color: var(--text); background: var(--primary-soft); border-color: var(--primary); }
.ai-link { padding: 3px 4px; border: 0; background: none; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--edge-2); text-underline-offset: 3px; } .ai-link:hover { color: var(--text); }
.ai-badge { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--glass-lo); border: 1px solid var(--edge); color: var(--muted); font: 500 11.5px/18px var(--sans); white-space: nowrap; } .ai-badge.late { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); }
.ai-quick { flex: none; padding: 4px 12px; border: 1px solid var(--edge-2); border-radius: 999px; background: none; color: var(--text); font: 500 12px var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .ai-quick:hover { background: var(--primary-soft); border-color: var(--primary); }
.ai-btn { padding: 5px 13px; border: 1px solid var(--edge-2); border-radius: 999px; background: var(--glass-lo); color: var(--text); font: 500 12.5px var(--sans); cursor: pointer; transition: background .15s, border-color .15s; } .ai-btn:hover { background: var(--glass-hi); }
.ai-btn.pri { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .ai-btn.pri:hover { filter: brightness(1.06); } .ai-btn:disabled { opacity: .55; cursor: default; }
.ai-empty { padding: 10px 8px; font-size: 13px; color: var(--faint); }
.ai-closure { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ai-more { margin: 0 8px 10px 25px; padding: 10px 0 2px; border-top: 1px solid var(--edge); display: grid; gap: 8px; }
.ai-action b { font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-right: 6px; } .ai-why b { font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.ai-hist { display: grid; gap: 4px; } .ai-h { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; } .ai-hd { flex: none; width: 92px; color: var(--faint); } .ai-h b { font-weight: 500; color: var(--text); }
.ai-newmenu { margin: 0 0 8px 8px; }
.ai-dlg-bg { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 20px; background: rgba(20, 22, 18, .42); backdrop-filter: blur(2px); animation: fade .15s both; }
.ai-dlg { width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow: auto; border-radius: 18px; border: 1px solid var(--edge-2); background: var(--bg); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); padding: 18px 20px 14px; display: grid; gap: 12px; }
.dl-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .dl-h small { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .dl-h h2 { margin: 2px 0 0; font: 400 21px/1.25 var(--display); letter-spacing: -.01em; }
.dl-why { font-size: 13px; line-height: 1.5; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: var(--glass-lo); }
.dl-b { display: grid; gap: 12px; } .dl-f { display: grid; gap: 5px; } .dl-f > label { font: 600 12px var(--sans); color: var(--text); } .dl-f > label i { font: 400 12px var(--sans); color: var(--faint); font-style: normal; } .dl-f small { font-size: 12px; color: var(--faint); line-height: 1.45; }
.dl-f input[type="date"], .dl-f input:not([type]), .dl-f select, .dl-f textarea { font: 400 14px var(--sans); padding: 7px 10px; border: 1px solid var(--edge-2); border-radius: 10px; background: var(--glass-lo); color: var(--text); width: 100%; box-sizing: border-box; } .dl-f textarea { resize: vertical; min-height: 54px; }
.dl-row { display: flex; gap: 8px; } .dl-row input { flex: 1; min-width: 0; } .dl-row select { flex: none; width: auto !important; }
.dl-seg { display: flex; flex-wrap: wrap; gap: 6px; } .dl-seg label, .dl-list label, .dl-code, .dl-ev label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dl-seg label span { padding: 5px 13px; border: 1px solid var(--edge-2); border-radius: 999px; font: 500 13px var(--sans); color: var(--muted); } .dl-seg input { position: absolute; opacity: 0; pointer-events: none; } .dl-seg input:checked + span { background: var(--primary-soft); border-color: var(--primary); color: var(--text); } .dl-seg input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.dl-list, .dl-codes, .dl-ev { display: grid; gap: 6px; } .dl-code span, .dl-list label span, .dl-ev label span { font-size: 13.5px; line-height: 1.4; } .dl-code b { font: 500 12px var(--mono); margin-right: 4px; }
.dl-err { padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font-size: 13px; }
.dl-foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--edge); } .dl-who { font-size: 12px; color: var(--faint); } .dl-who b { font-weight: 500; color: var(--muted); }
.ai-undo { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 56; display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font: 500 13px var(--sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); animation: fade .2s both; } .ai-undo button { padding: 3px 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); font: 600 12.5px var(--sans); cursor: pointer; }
@media (max-width: 520px) { .ai-hd { width: 70px; } .ai-more { margin-left: 12px; } }

/* "what you can do" under an answer that found nothing */
.ag-next { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--edge-2); border-radius: 14px; background: var(--glass-lo); }
.ns-h { font: 500 13.5px var(--sans); color: var(--text); margin-bottom: 8px; }
.ag-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ag-next li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ns-btn { flex: none; padding: 5px 14px; border: 1px solid var(--edge-2); border-radius: 999px; background: var(--glass-hi); color: var(--text); font: 500 13px var(--sans); cursor: pointer; transition: background .15s, border-color .15s; } .ns-btn:hover { border-color: var(--primary); background: var(--primary-soft); } .ns-btn:disabled { opacity: .6; cursor: default; }
.ns-d { flex: 1 1 260px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* "Add a gap to the action items?" under a care-gaps answer */
.ag-cg li { justify-content: space-between; } .cg-t { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13.5px; } .cg-d { font-size: 12px; color: var(--faint); } .cg-on { font-size: 12.5px; color: var(--muted); }

/* guideline-therapy chip and finding on a condition card */
.th-find { display: block; margin-top: 2px; line-height: 1.5; } .th-act { display: block; color: var(--text); } .pc-unc { margin: 4px 8px 0; font-size: 12px; color: var(--faint); }
.th-chip { display: inline-block; padding: 0 8px; border-radius: 999px; border: 1px solid var(--edge); font: 500 11.5px/18px var(--sans); white-space: nowrap; color: var(--muted); }
.th-chip-no { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); }
.th-chip-part { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
.th-chip-on { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--primary-soft); } .th-chip-none { color: var(--faint); }

/* action items: plans from visit notes offered as suggestions */
.ai-sugg { margin: 2px 0 8px; padding: 8px 10px 6px; border: 1px dashed var(--edge-2); border-radius: 12px; display: grid; gap: 2px; }
.ai-sugg-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .ai-sugg-h b { font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .ai-sugg-h small { color: var(--faint); font: 500 11.5px var(--sans); }
.ai-sg { display: flex; align-items: center; gap: 8px 12px; padding: 6px 0; flex-wrap: wrap; } .ai-sg + .ai-sg { border-top: 1px solid var(--edge); }
.ai-sg-t { flex: 1 1 220px; min-width: 0; display: grid; gap: 1px; } .ai-sg-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .ai-sg-l1 b { font-weight: 500; overflow-wrap: anywhere; }
.ai-sg-b { display: flex; align-items: center; gap: 6px; flex: none; }
/* the one action list: kind tags, the condition filter, and a card's own action items */
.ai-badge.kind { color: var(--muted); } .ai-badge.k-measure { border-color: color-mix(in srgb, var(--amber) 45%, transparent); } .ai-badge.k-therapy { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.ai-cond { font-style: normal; color: var(--faint); }
.ai-filt { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.ai-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 10px; border: 1px solid var(--edge); border-radius: 999px; background: none; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; } .ai-chip small { color: var(--faint); font: 500 11px var(--sans); }
.ai-chip:hover { color: var(--text); background: var(--glass-lo); } .ai-chip.on { color: var(--text); background: var(--primary-soft); border-color: var(--primary); }
.cd-items { margin: 0 8px 8px 25px; padding: 4px 0 0; border-top: 1px dashed var(--edge); display: grid; gap: 2px; }
.cd-it { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 8px; } .cd-it:hover { background: var(--glass-lo); }
.cd-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .cd-t b { font-weight: 500; overflow-wrap: anywhere; }
.cd-it .pc-dot { margin: 0; flex: none; }
.ag-pp li { align-items: flex-start; } .pp-k { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; } .pp-t { flex: 1 1 200px; min-width: 0; display: grid; gap: 1px; } .pp-t b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.pill-btn.fu { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; } .fu-s { display: block; margin: 0; font: 500 11px var(--sans); color: var(--faint); }
.ag-meta .scope { color: var(--muted); }
/* refresh icons, the condition badge, the collapsed suggestions line, the cost popover */
.h-sp { flex: 1; }
.pc-col h3 .ic.rg, .hero-h .ic.rg { width: 26px; height: 26px; margin: -4px 0; color: var(--faint); } .pc-col h3 .ic.rg:hover, .hero-h .ic.rg:hover { color: var(--text); }
.ic.rg.spin svg { animation: spin .9s linear infinite; } .ic.rg.spin { color: var(--primary-text); pointer-events: none; }
.cd-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; align-self: center; height: 24px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 999px; background: none; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; transition: background .15s, border-color .15s; }
.cd-badge:hover { background: var(--glass-lo); color: var(--text); } .cd-badge.on { background: var(--primary-soft); border-color: var(--primary); color: var(--text); } .cd-badge b { font-weight: 600; }
.cd-go { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.ai-sugg-sum { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 6px; padding: 6px 10px; border: 1px dashed var(--edge-2); border-radius: 10px; background: none; color: var(--muted); font: 500 12.5px var(--sans); text-align: left; cursor: pointer; } .ai-sugg-sum span { flex: 1; } .ai-sugg-sum b { color: var(--text); }
.ai-sugg-sum:hover { background: var(--glass-lo); color: var(--text); }
.ai-sec.flash { animation: flash 1.2s ease; } @keyframes flash { 0% { background: var(--primary-soft); } 100% { background: transparent; } }
.cost-pop { position: absolute; z-index: 40; top: 44px; right: 16px; width: min(300px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--edge-2); border-radius: 14px; background: var(--bg); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); display: grid; gap: 4px; font: 400 13px var(--sans); }
.cost-pop h4 { margin: 0 0 4px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cost-pop .cp-r { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; } .cost-pop .cp-r small { color: var(--faint); } .cost-pop .cp-t { border-top: 1px solid var(--edge); margin-top: 4px; padding-top: 6px; font-weight: 600; }
.cost-pop .ai-link { justify-self: start; margin-top: 4px; }

/* the lean first screen: legend, needs-attention rows, section pills, starter questions, the clamped briefing */
.ld-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 8px; font: 400 12.5px var(--sans); color: var(--faint); } .ld-legend i { font-style: normal; opacity: .6; } .ld-legend .lg-i { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--edge); border-radius: 6px; color: var(--muted); }
.at-sec h3 { margin-top: 8px; } .at-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.at-row { position: relative; display: flex; align-items: center; border-radius: 12px; transition: background .15s; } .at-row:hover, .at-row:focus-within { background: var(--glass-lo); }
.at-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.at-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--glass-lo); color: var(--muted); } .at-ic.ai-p-high { color: var(--red); } .at-ic.ai-p-medium { color: var(--amber); } .at-ic.ai-p-low { color: var(--faint); }
.at-t { flex: 1; min-width: 0; display: grid; gap: 1px; } .at-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .at-l1 b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; } .at-t .pc-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-go { flex: none; color: var(--faint); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; } .at-row:hover .at-go, .at-main:focus-visible .at-go { opacity: 1; transform: none; color: var(--primary-text); }
.at-acts { flex: none; display: flex; gap: 0; opacity: 0; transition: opacity .15s; padding-right: 4px; } .at-row:hover .at-acts, .at-row:focus-within .at-acts { opacity: 1; }
@media (hover: none) { .at-acts, .at-go { opacity: 1; transform: none; } }
.pl-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.pl { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--edge-2); border-radius: 999px; background: none; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .pl b { color: var(--text); font-weight: 600; } .pl small { color: var(--faint); font: 500 11.5px var(--sans); }
.pl:hover { background: var(--glass-lo); color: var(--text); } .pl.on { background: var(--primary-soft); border-color: var(--primary); color: var(--text); } .pl .ico { color: var(--primary-text); }
.pl-panel { margin: 4px 0 6px; padding: 2px 0 4px; border-top: 1px solid var(--edge); animation: fade .18s both; }
.pl-panel .pc-col h3 { margin-top: 10px; }
.ag-starters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; } .ag-starters[hidden] { display: none; }
.st-chip { padding: 6px 13px; border: 1px solid var(--edge-2); border-radius: 999px; background: var(--glass-lo); color: var(--text); font: 500 12.5px var(--sans); cursor: pointer; text-align: left; transition: background .15s, border-color .15s; } .st-chip:hover { background: var(--primary-soft); border-color: var(--primary); }
.ag-answer.clamp3 { max-height: 5.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
@media (max-width: 560px) { .at-main > .ai-badge.kind { display: none; } .at-go { opacity: 1; transform: none; } .at-main { gap: 8px; padding: 8px 6px; } .pl { padding: 6px 11px; } .pl small { display: none; } }
.at-go .ico { transform: rotate(-90deg); }

/* needs attention: guideline items under their condition, then the others */
.at-k { margin: 6px 0 2px 2px; font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.at-grp { margin: 2px 0 4px; } .at-ch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; } button.at-ch { cursor: pointer; } button.at-ch:hover { background: var(--glass-lo); }
.at-ch b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; } .at-ch small { color: var(--faint); font: 400 12px var(--sans); } .at-ci { display: grid; place-items: center; color: var(--primary-text); }
.at-ch .at-go { margin-left: auto; opacity: 0; } button.at-ch:hover .at-go, button.at-ch:focus-visible .at-go { opacity: 1; }
.at-sub { margin-left: 18px; padding-left: 10px; border-left: 2px solid var(--edge); } .at-sub .at-main { padding: 6px 8px; }
.at-sub .at-main { padding: 4px 8px; } .at-sub .at-t .pc-m { display: none; } .at-sub .at-ic { width: 22px; height: 22px; }

/* the Gather page: what is being pulled side by side, then the index */
.gr-run { margin: 12px 0 0; display: grid; gap: 4px; } .gr-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--edge); border-radius: 10px; font-size: 13.5px; } .gr-row b { font-weight: 500; min-width: 190px; } .gr-row > span:last-child { color: var(--muted); }
.gr-i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--edge-2); } .gr-row.run .gr-i { border-top-color: var(--primary); animation: spin .9s linear infinite; } .gr-row.ok .gr-i { background: var(--primary); border-color: var(--primary); } .gr-row.bad .gr-i { background: var(--red); border-color: var(--red); } .gr-row.skip { opacity: .55; }
.gr-ix { margin-top: 4px; background: var(--glass-lo); }