/* agent: pulls, requester, scribe, tags, type (cut from app.css, order preserved) */
/* pull records: patient add box, approval / progress card, banner, nav badge */
.addp { display: inline-flex; align-items: center; gap: 2px; } .addp input { width: 150px; padding: 5px 12px; border-radius: 99px; font-size: 12.5px; }
.ag-banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px dashed var(--green); border-radius: 12px; color: var(--green); font: 13px var(--sans); animation: fxIn .4s both; } .ag-banner span { font-weight: 800; }
.nbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--primary); color: var(--primary-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* queued follow-up: shown immediately, connected to the request it waits for */
.ag-m.a.queued { opacity: .92; } .ag-m.a.queued::before { background: repeating-linear-gradient(var(--amber) 0 4px, transparent 4px 8px); }
.ag-queued { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); font: 13.5px var(--sans); } .ag-queued .qdot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pulse 1.2s ease-in-out infinite; flex: none; }

.pform { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin: 4px 0 12px; } .pform label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); } .pform input { padding: 7px 10px; } .pform em { font-style: normal; color: var(--red); font-size: 11.5px; }
#agFresh { font-size: 11.5px; cursor: help; }

/* requester dialog */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; } .modal[hidden] { display: none; } .modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal-box { position: relative; width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow); animation: fxIn .3s both; } .modal-box h3 { margin: 0 0 6px; font-size: 18px; } .modal-box p { margin: 0 0 14px; font-size: 13px; }
.pform input.bad, #reqForm input.bad { border-color: var(--red); }

/* start-chat panel */
.ag-chatwrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } .ag-chatwrap[hidden] { display: none; }
.ag-setup { width: 100%; max-width: 900px; margin: 4vh auto 0; padding: 22px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; animation: fxIn .4s both; } .ag-setup[hidden] { display: none; }
.su-head { display: flex; align-items: center; gap: 12px; } .su-head h2 { margin: 0; font: 500 24px/1.3 var(--display); } .ag-setup p { margin: 6px 0 16px; font-size: 13px; }
.su-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; } @media (max-width: 800px) { .su-grid { grid-template-columns: 1fr; } }
.ag-setup fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-content: start; } .ag-setup legend { padding: 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ag-setup label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); } .ag-setup input.bad { border-color: var(--red); } .ag-setup .row { margin-top: 16px; }
/* a pull card that stands alone in the chat (no question behind it) */
.ag-m.pullmsg { padding-left: 2px; } .ag-m.pullmsg::before { display: none; }
/* payload review */

.chip.live { animation: pulse 1.6s ease-in-out infinite; }

.ag-chip { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font: inherit; cursor: pointer; transition: all .12s; } .ag-chip:hover { border-color: var(--amber); transform: translateY(-1px); }

.ag-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 9px 14px; border: 1px dashed var(--amber); border-radius: 12px; background: var(--amber-soft); font: 13px/1.4 var(--sans); animation: fxIn .4s both; } .ag-hint .hd { color: var(--amber); } .ag-hint .ht { color: var(--text); flex: 1 1 220px; }
.ag-flag { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 12px; background: var(--amber-soft); font: 13px/1.45 var(--sans); animation: fxIn .4s both; }
.ag-flag .fd { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--amber); color: var(--bg); font: 700 12px/18px var(--sans); text-align: center; }
.ag-flag .ft { flex: 1 1 auto; min-width: 0; color: var(--text); } .ag-flag .ft b { font-weight: 600; } .ag-flag .fi { margin-top: 3px; overflow-wrap: anywhere; } .ag-flag .fw { color: var(--muted); }
.ag-flag .flink { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--amber); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
mark.digw { font-weight: inherit; background: transparent; color: inherit; border-bottom: 2px solid color-mix(in srgb, var(--primary) 75%, transparent); cursor: pointer; padding: 0 1px; } mark.digw:hover { background: var(--primary-soft); }
mark.hintw { font-weight: inherit; background: transparent; color: inherit; border-bottom: 2px dotted var(--amber); cursor: pointer; padding: 0 1px; } mark.hintw:hover { background: var(--amber-soft); }
mark.billw { font-weight: inherit; background: transparent; color: inherit; border-bottom: 2px dotted var(--violet); cursor: pointer; padding: 0 1px; } mark.billw:hover { background: var(--violet-soft); }

/* paced reveal: each word fades in as it appears; settled words are plain text */
.ag-answer .w { animation: wIn .52s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wIn { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
.ag-answer > .fx, .ag-answer .fx { animation: none; }
/* pull hints: the words of an answer that made the agent suggest checking the HIE network (amber, dotted) */
.ag-sugg.ag-note > span { color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .ag-answer .w { animation: none; } }

/* type: one family at a time (Roboto by default; the header Font menu picks Atkinson or Claude, css/00-tokens.css); headings differ by weight only */
h1, h2, h3, .brand b, .stat b, .ag-empty h2, .su-head h2, .gs-title, .ag-answer h5 { font-family: var(--display); font-weight: 500; letter-spacing: -.005em; }
.logo { font-family: var(--display); }
.nav-item, .btn, .chip, .pill, .ag-chip, .pill-btn { font-family: var(--sans); }
.ag-answer b, .ag-answer strong { font-weight: 600; }

.ag-merged { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); font: 13px var(--sans); animation: fxIn .4s both; }

/* classification tags: note blocks and kinds */
.chip.bk { text-transform: lowercase; } .chip.bk-g { background: var(--primary-soft); color: var(--green); } .chip.bk-s { background: var(--sky-soft); color: var(--sky); } .chip.bk-v { background: var(--violet-soft); color: var(--violet); }
.ntabs { display: flex; gap: 4px; margin: 4px 0 10px; } .ntabs button { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; padding: 4px 12px; font: inherit; cursor: pointer; } .ntabs button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.nblocks { display: grid; gap: 10px; } .nblk { border-left: 2px solid var(--border-strong); padding: 2px 0 2px 12px; } .nblk .nbh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; } .nblk .nbh small { margin-left: auto; }
.nnoise { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }

/* scribe: dictation, transcript draft, provider notes */
.ag-composer textarea { padding-right: 140px !important; }
.ag-composer .mic, .ag-composer .note { position: absolute; bottom: 28px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: all .12s; }
.ag-composer .mic { right: 54px; } .ag-composer .note { right: 94px; } .ag-composer .mic:hover, .ag-composer .note:hover { color: var(--text); border-color: var(--amber); }
.ag-composer .mic svg, .ag-composer .note svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-composer .mic.off { opacity: .45; } .ag-composer .mic.recording { background: var(--red); border-color: var(--red); color: #fff; animation: pulse 1.1s ease-in-out infinite; }
.ag-draft { width: 100%; max-width: 780px; margin: 0 auto 10px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); animation: fxIn .3s both; }
.ag-draft .dh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ag-draft .dh small { margin-left: auto; font-variant-numeric: tabular-nums; }
.ag-draft .mic-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); } .ag-draft.busy .mic-dot { background: var(--red); animation: pulse 1s ease-in-out infinite; }
.ag-draft textarea { width: 100%; font: 15px/1.55 var(--sans); border-radius: 12px; resize: vertical; margin-bottom: 8px; }
.ag-m.u .b.dict { background: var(--primary-soft); border: 1px solid var(--primary); color: var(--text); } .ag-m.u .b .dtag { display: block; font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.stmt { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin: 10px 0; background: var(--surface-2); } .stmt.off { opacity: .55; } .stmt .stext { margin: 8px 0; } .stmt .stchk { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; }
.ag-draft textarea { min-height: 72px !important; height: auto; }

/* live dictation bubble */
.ag-m.dictm { display: flex; justify-content: flex-end; } .ag-m.dictm .dwrap { max-width: min(680px, 92%); width: 100%; }
.ag-m .b.dict { background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 20px; padding: 12px 16px; max-width: none; white-space: normal; }
.ag-m .b.dict.live { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.b.dict .dtag { display: flex; align-items: center; gap: 8px; font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; } .b.dict.live .dtag { color: var(--red); }
.b.dict .dpill { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 1px 9px; border-radius: 99px; background: var(--surface-3); color: var(--muted); } .b.dict .dpill.on { background: var(--green-soft); color: var(--green); }
.b.dict .dtext { font: 15.5px/1.6 var(--sans); white-space: pre-wrap; color: var(--text); } .b.dict .dtext textarea { background: var(--surface); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1s ease-in-out infinite; }
.b.dict .dacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.pill-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .pill-btn.primary:hover { background: var(--primary); filter: brightness(1.12); } .pill-btn.primary:disabled { opacity: .6; cursor: default; } .pill-btn.ghost { color: var(--muted); }

/* =====================================================================================================================
   LIQUID GLASS (last layer on purpose; palette tokens stay at the top). Material = a translucent tint, a 1px edge, a specular highlight on the
   top edge, a soft drop shadow. Real backdrop blur is used ONLY where content moves underneath (composer, drawer, toasts, popovers, sticky tops):
   blurring every card makes scrolling janky. Backdrop = static colour glow. Motion = opacity + a few px, never blur or filter.
   ===================================================================================================================== */
:root {
  --glass: rgba(255,255,255,.045); --glass-hi: rgba(255,255,255,.075); --glass-lo: rgba(255,255,255,.025); --edge: rgba(255,255,255,.085); --edge-2: rgba(255,255,255,.15);
  --spec: inset 0 1px 0 rgba(255,255,255,.055); --lift: 0 8px 28px rgba(0,0,0,.28); --frost: blur(24px) saturate(160%);
  --r-lg: 14px; --r-md: 10px; --r-sm: 8px; --radius: 12px; --ease: cubic-bezier(.25,.7,.25,1);
  --g1: rgba(140,155,185,.07); --g2: rgba(140,155,185,.045); --g3: rgba(140,155,185,.05);
}
:root[data-theme="light"] {
  --glass: rgba(255,255,255,.66); --glass-hi: rgba(255,255,255,.86); --glass-lo: rgba(255,255,255,.42); --edge: rgba(20,24,20,.08); --edge-2: rgba(20,24,20,.15);
  --spec: inset 0 1px 0 rgba(255,255,255,.9); --lift: 0 8px 26px rgba(40,50,40,.10); --g1: rgba(120,135,160,.14); --g2: rgba(120,135,160,.08); --g3: rgba(120,135,160,.10);
}
html { background: var(--bg); }
body { background: transparent; position: static; min-height: 0; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); background:
  radial-gradient(46vmax 40vmax at 6% -8%, var(--g1), transparent 65%), radial-gradient(40vmax 34vmax at 98% 4%, var(--g2), transparent 65%), radial-gradient(48vmax 38vmax at 70% 112%, var(--g3), transparent 65%), var(--bg); }
body::after { content: none; }
.app, .main { background: transparent; }
.ag-flag .fi { margin-top: 8px; } .ag-flag .fq { line-height: 1.45; } .ag-flag .fl { display: inline-block; min-width: 108px; color: var(--amber); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ag-flag .fa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ag-flag .fx { margin-top: 2px; } .ag-flag .fx .fl { color: var(--green); }