/* Design system lifted from frontend-web/Teams AI Assistant.dc.html
   Warm paper neutrals, bronze accent, ivy for confirmations, clay for alerts.
   Archivo (display) / Public Sans (body) / JetBrains Mono (data + labels). */

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

:root{
  --bg:#FBFAF9;--surface:#FFFFFF;--surface2:#F2F1EE;--line:#E5E3DF;--lineSoft:#EFEEEA;
  --ink:#131417;--ink2:#55585E;--ink3:#8B8E94;
  --accent:#A8761F;--accentInk:#6E4B12;--accentSoft:rgba(168,118,31,.09);
  --ivy:#2C6A50;--ivySoft:rgba(44,106,80,.08);
  --alert:#B03A26;--alertSoft:rgba(176,58,38,.07);
  --ff:'Public Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fd:'Archivo','Public Sans',ui-sans-serif,system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --scrollThumb:#C3C0BA;--scrollThumbHover:#9A968E;
  --shadow:0 1px 2px rgba(19,20,23,.04),0 12px 32px -18px rgba(19,20,23,.16);
  --shadowLg:0 1px 3px rgba(19,20,23,.05),0 24px 56px -28px rgba(19,20,23,.26);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F11;--surface:#16181B;--surface2:#1E2125;--line:#282C31;--lineSoft:#202327;
    --ink:#F2F1EE;--ink2:#A9AEB4;--ink3:#787C82;
    --accent:#DFAC45;--accentInk:#F2CE83;--accentSoft:rgba(223,172,69,.11);
    --ivy:#6FBF9A;--ivySoft:rgba(111,191,154,.10);
    --alert:#E68C76;--alertSoft:rgba(230,140,118,.10);
    --scrollThumb:#3A3F45;--scrollThumbHover:#585E66;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -18px rgba(0,0,0,.85);
    --shadowLg:0 2px 6px rgba(0,0,0,.5),0 28px 64px -30px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F11;--surface:#16181B;--surface2:#1E2125;--line:#282C31;--lineSoft:#202327;
  --ink:#F2F1EE;--ink2:#A9AEB4;--ink3:#787C82;
  --accent:#DFAC45;--accentInk:#F2CE83;--accentSoft:rgba(223,172,69,.11);
  --ivy:#6FBF9A;--ivySoft:rgba(111,191,154,.10);
  --alert:#E68C76;--alertSoft:rgba(230,140,118,.10);
  --scrollThumb:#3A3F45;--scrollThumbHover:#585E66;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -18px rgba(0,0,0,.85);
  --shadowLg:0 2px 6px rgba(0,0,0,.5),0 28px 64px -30px rgba(0,0,0,1);
}

body{
  background:var(--bg);color:var(--ink);font-family:var(--ff);font-size:15px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--fd);font-feature-settings:"kern" 1,"liga" 1;margin:0}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease;white-space:nowrap}
button:active{transform:translateY(.5px)}
button:disabled{cursor:not-allowed;opacity:.55}
svg{display:block;flex:0 0 auto}
a{color:var(--accentInk);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
input,textarea,select{transition:border-color .16s ease,box-shadow .16s ease}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft);outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
::selection{background:var(--accentSoft)}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite}
.rise{animation:rise .28s cubic-bezier(.2,.7,.3,1) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- utility ---------- */
.mono{font-family:var(--fm)}
.muted{color:var(--ink2)}
.faint{color:var(--ink3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}

/* ---------- landing ---------- */
.landing{min-height:100dvh;display:grid;place-items:center;padding:24px}

/* Landscape card: what this is on the left, the way in on the right. The two
   panes share one rounded shell, so overflow is clipped rather than each pane
   carrying its own corner radii. */
.landing-card{
  width:100%;max-width:940px;display:grid;grid-template-columns:1.08fr .92fr;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadowLg);overflow:hidden;
}
.landing-intro{padding:40px 38px;background:var(--surface2);border-right:1px solid var(--line)}
.landing-action{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}
.landing-action h2{font-size:22px;letter-spacing:-.018em;margin-bottom:6px}
.landing-sub{margin:0 0 22px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.landing-fine{margin:16px 0 0;color:var(--ink3);font-size:12.5px;line-height:1.5}

/* One column on narrow screens; the divider moves to the top edge. */
@media (max-width:820px){
  .landing-card{grid-template-columns:1fr;max-width:480px}
  .landing-intro{border-right:0;border-bottom:1px solid var(--line);padding:32px 26px}
  .landing-action{padding:28px 26px}
}

.brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:15px}
.brand-name{font-family:var(--fd);font-weight:600;font-size:16px;letter-spacing:-.01em}
.landing h1{font-size:26px;line-height:1.2;letter-spacing:-.022em;margin-bottom:10px;text-wrap:balance}
.landing-intro p{margin:0 0 22px;color:var(--ink2);line-height:1.6}
.ms-btn{width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:11px;background:var(--ink);color:var(--bg);border:0;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none}
.ms-btn:hover{opacity:.9;color:var(--bg)}
.assure{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:11px}
.assure-row{display:flex;gap:10px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.assure-row svg{color:var(--ivy);margin-top:2px}
.banner{display:flex;gap:10px;padding:12px 14px;margin-bottom:20px;border-radius:12px;background:var(--alertSoft);border:1px solid var(--alert);color:var(--alert);font-size:13.5px;line-height:1.5}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:272px 1fr;height:100dvh;overflow:hidden}

/* The mobile drawer backdrop. It MUST be styled outside the media query:
   .shell is a two-column grid with three children, so an unstyled .scrim
   becomes a grid item, takes column 2, and pushes .main onto a second row at
   sidebar width. position:fixed also keeps it out of grid flow entirely. */
.scrim{display:none;position:fixed;inset:0;background:rgba(19,20,23,.4);z-index:20}

/* Belt and braces: pin the two real panes to their columns so a future child
   cannot displace them again. */
.sidebar{grid-column:1;grid-row:1}
.main{grid-column:2;grid-row:1}
.sidebar{background:var(--surface2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.sidebar-head{padding:14px 14px 10px;display:flex;align-items:center;gap:10px}
.new-chat{margin:0 14px 12px;height:40px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:11px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink)}
.new-chat:hover{border-color:var(--accent);color:var(--ink)}
.conv-list{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px}

/* Scrollbars: visible enough to find, quiet enough to ignore. The default is
   either invisible (overlay scrollbars) or a heavy grey slab that fights the
   palette, so both engines are styled to the same thin themed bar. The thumb
   is drawn with background-clip so the border becomes padding around it. */
/* Chrome 121+ ignores ::-webkit-scrollbar entirely once scrollbar-width is
   set, so `scrollbar-color` is what actually paints the bar in modern engines;
   the -webkit block below is the fallback for older ones. */
.conv-list,.transcript,.scroll{
  scrollbar-width:thin;scrollbar-color:var(--scrollThumb) transparent;
}
.conv-list::-webkit-scrollbar,
.transcript::-webkit-scrollbar,
.scroll::-webkit-scrollbar{width:10px;height:10px}
.conv-list::-webkit-scrollbar-track,
.transcript::-webkit-scrollbar-track,
.scroll::-webkit-scrollbar-track{background:transparent}
.conv-list::-webkit-scrollbar-thumb,
.transcript::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-thumb{
  background:var(--scrollThumb);border-radius:999px;
  border:3px solid transparent;background-clip:content-box;
}
.conv-list:hover::-webkit-scrollbar-thumb,
.transcript:hover::-webkit-scrollbar-thumb,
.scroll:hover::-webkit-scrollbar-thumb{background:var(--scrollThumbHover);background-clip:content-box}
.conv{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink);margin-bottom:2px}
.conv:hover{background:var(--surface);color:var(--ink)}
.conv[aria-current="page"]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.conv-title{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-date{font-family:var(--fm);font-size:10px;color:var(--ink3)}
.conv-del{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;background:transparent;border:0;border-radius:8px;color:var(--ink3);opacity:0;transition:opacity .12s ease}
.conv:hover .conv-del,.conv-del:focus-visible{opacity:1}
.conv-del:hover{background:var(--alertSoft);color:var(--alert)}
.sidebar-foot{border-top:1px solid var(--line);padding:10px 12px;display:grid;gap:8px}
/* Identity on its own row: sharing a row with the two icon buttons left only
   121px of 271px for the name and address, truncating both. */
.foot-id{display:flex;align-items:center;gap:10px;min-width:0}
.foot-actions{display:flex;align-items:center;gap:4px}
.foot-actions form{display:contents}
.foot-btn{flex:1;height:32px;display:flex;align-items:center;justify-content:center;gap:7px;
  background:transparent;border:1px solid transparent;border-radius:9px;
  font-size:12.5px;color:var(--ink3);text-decoration:none}
.foot-btn:hover{background:var(--surface);border-color:var(--line);color:var(--ink)}
.avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--accentSoft);color:var(--accentInk);display:grid;place-items:center;font-family:var(--fd);font-weight:600;font-size:12.5px}
.who{flex:1;min-width:0}
/* Both are <span>: without display:block they run inline and collide with the
   settings / sign-out icons. */
.who-name{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-mail{display:block;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;background:transparent;border:0;border-radius:9px;color:var(--ink3);text-decoration:none}
.icon-btn:hover{background:var(--surface);color:var(--ink)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.topbar{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--lineSoft)}
.topbar h1{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.008em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transcript{flex:1;min-height:0;overflow-y:auto;padding:26px 18px 8px;scroll-behavior:smooth}
/* Centres the suggestions when the thread is empty, without affecting a
   real transcript (which fills from the top and scrolls). */
.transcript:has(#empty-state){display:flex;align-items:center}
.stream{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:26px}

/* ---------- model picker ---------- */
/* Visually hidden but still read out; the control is icon-free so the label
   has to exist somewhere for screen readers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.model-picker{flex:0 0 auto;display:flex;align-items:center}
.model-picker select{
  max-width:190px;padding:5px 26px 5px 10px;font:inherit;font-size:12.5px;
  color:var(--ink2);background:var(--surface);border:1px solid var(--line);
  border-radius:8px;cursor:pointer;appearance:none;
  /* Chevron drawn inline so the control needs no image request. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:13px;
}
.model-picker select:hover{border-color:var(--accent);color:var(--ink)}
.model-picker select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* The label is long ("Sonnet 5 — balanced"); on a phone the title matters more. */
@media (max-width:560px){.model-picker select{max-width:104px}}

/* ---------- empty state ---------- */
.empty{max-width:640px;margin:0 auto;padding-bottom:6vh;text-align:center}
.empty h2{font-size:26px;letter-spacing:-.02em;margin-bottom:8px;text-wrap:balance}
.empty p{color:var(--ink2);margin:0 0 26px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{padding:9px 14px;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--ink2)}
.chip:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- messages ---------- */
.turn{display:flex;flex-direction:column;gap:26px}
.msg{display:grid;grid-template-columns:34px 1fr;gap:14px}
.msg-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-weight:600;font-size:12px}
.msg-user .msg-avatar{background:var(--surface2);color:var(--ink2)}
.msg-bot .msg-avatar{background:var(--ink);color:var(--bg)}
.msg-body{min-width:0;padding-top:5px;font-size:15px;line-height:1.62}
.msg-user .msg-body{color:var(--ink)}

/* The user's own words sit right, the assistant's left -- the usual chat
   convention, so a glance at the edge tells you who spoke. The avatar is the
   first child in the markup for both, so the user's row is re-ordered here
   with explicit grid placement rather than by duplicating the template. */
.msg-user{grid-template-columns:1fr 34px}
.msg-user .msg-avatar{grid-column:2;grid-row:1}
.msg-user .msg-body{
  grid-column:1;grid-row:1;justify-self:end;max-width:min(38rem,88%);
  background:var(--surface2);border:1px solid var(--lineSoft);border-radius:16px;
  padding:9px 14px;
}
/* Rendered answers are real markup now (see web/richtext.py), so they get
   typography rather than a pre-wrapped blob. The live stream is still plain
   text nodes, so that state keeps pre-wrap to preserve its newlines. */
.answer{max-width:68ch}
.answer.streaming{white-space:pre-wrap}
.answer p{margin:0 0 10px}
.answer p:last-child{margin-bottom:0}
.answer ul{margin:8px 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.answer li{line-height:1.55}
.answer strong{font-weight:600;color:var(--ink)}
.answer em{font-style:italic}
.answer code{font-family:var(--fm);font-size:.88em;background:var(--surface2);
  border:1px solid var(--lineSoft);border-radius:5px;padding:1px 5px}
.answer a{color:var(--accentInk);text-decoration:underline}
.answer a:hover{color:var(--accent)}

/* Actions sit under the answer, where the reader finishes -- in normal flow,
   so they can never overlap the provenance chip at the top of the message. */
.msg-actions{display:flex;align-items:center;gap:6px;margin-top:12px}
.copy-btn{height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid transparent;border-radius:8px;
  font-family:var(--ff);font-size:12px;line-height:1;color:var(--ink3);
  opacity:0;transition:opacity .12s ease,color .12s ease,border-color .12s ease}
.msg-bot:hover .copy-btn,.copy-btn:focus-visible{opacity:1}
.copy-btn:hover{background:var(--surface);border-color:var(--line);color:var(--ink)}
/* Touch devices have no hover, so the affordance must always be visible. */
@media (hover:none){.copy-btn{opacity:1}}

.prov{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 12px;background:var(--accentSoft);border:1px solid var(--accent);border-radius:999px;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;color:var(--accentInk);margin-bottom:13px}
.prov-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.prov-none{display:inline-flex;align-items:center;height:28px;padding:0 11px;margin-bottom:13px;background:var(--surface2);border-radius:999px;font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:var(--ink3)}
.prov-panel{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:520px}
.prov-row{display:flex;align-items:center;gap:12px;padding:10px 13px;background:var(--surface);border-top:1px solid var(--lineSoft)}
.prov-row:first-child{border-top:0}
.prov-row .n{flex:1;min-width:0;font-size:13.5px;font-weight:500}
.prov-row .m{font-family:var(--fm);font-size:10.5px;color:var(--ink3)}

.section{margin-top:16px}
.section h3{font-family:var(--fd);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.section ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.section li{line-height:1.55}
.owner{font-family:var(--fm);font-size:11px;color:var(--accentInk);background:var(--accentSoft);padding:1px 6px;border-radius:5px;margin-left:6px;white-space:nowrap}
.unassigned{color:var(--ink3);background:var(--surface2)}

.gaps{margin-top:16px;padding:12px 14px;background:var(--surface2);border-radius:12px}
.gaps h3{font-family:var(--fm);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.gaps ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
.gaps li{font-size:13px;color:var(--ink2);line-height:1.5}

.callout{border-radius:14px;padding:14px}
.callout p{margin:0 0 4px;font-size:14.5px;font-weight:600}
.callout p+p{margin:0 0 13px;font-size:14px;font-weight:400;line-height:1.55;color:var(--ink2)}
.callout.gate{border:1px solid var(--accent);background:var(--accentSoft)}
.callout.fail{border:1px solid var(--alert);background:var(--alertSoft)}
.callout.fail p:first-child{color:var(--alert)}
.callout .go{height:38px;padding:0 15px;background:var(--ink);color:var(--bg);border:0;border-radius:10px;font-size:13.5px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}

.thinking{display:flex;align-items:center;gap:10px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--ink3);padding-top:6px}
.thinking .ring{width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%}

/* ---------- composer ---------- */
.composer-wrap{flex:0 0 auto;background:var(--bg);padding:4px 18px 18px}
.composer-inner{max-width:760px;margin:0 auto}
.composer{display:flex;align-items:flex-end;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:7px 7px 7px 8px;box-shadow:var(--shadow)}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft),var(--shadow)}
.composer-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;background:var(--surface2);color:var(--accentInk)}
.composer textarea{flex:1;min-width:0;resize:none;max-height:180px;background:transparent;border:0;outline:none;font-size:15.5px;line-height:1.5;padding:10px 2px;box-shadow:none}
.composer textarea:focus{box-shadow:none}
.send{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;background:var(--ink);color:var(--bg);border:0;border-radius:50%}
.send:hover:not(:disabled){opacity:.88}
.composer-hint{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center;margin-top:9px;font-size:11.5px;color:var(--ink3)}

/* htmx request states */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator{display:flex}
.htmx-request .send-icon{display:none}

/* ---------- settings ---------- */
.page{flex:1;min-height:0;overflow-y:auto;padding:30px 18px 60px}
.page-inner{max-width:720px;margin:0 auto}
.page h2{font-size:22px;letter-spacing:-.018em;margin-bottom:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px}
.card h3{font-size:15px;margin-bottom:4px}
.card>p{margin:0 0 16px;font-size:13.5px;color:var(--ink2);line-height:1.55}
.kv{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:10px 16px;font-size:14px}
.kv dt{color:var(--ink3);font-size:13px}
.kv dd{margin:0}
.danger{border-color:var(--alert)}
.danger h3{color:var(--alert)}
.btn-danger{height:40px;padding:0 16px;background:transparent;border:1px solid var(--alert);color:var(--alert);border-radius:10px;font-size:14px;font-weight:600}
.btn-danger:hover{background:var(--alertSoft)}
.btn-plain{height:40px;padding:0 16px;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:10px;font-size:14px;font-weight:600}
.btn-plain:hover{background:var(--surface2)}

/* Shared confirm dialog -- replaces the native browser confirm() everywhere. */
.confirm-overlay{display:none;position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:20px;background:rgba(19,20,23,.45)}
.confirm-overlay.open{display:flex}
.confirm-modal{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadowLg)}
.confirm-text{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--ink)}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px}
@media (max-width:420px){.confirm-actions{flex-direction:column-reverse}.confirm-actions .btn-plain,.confirm-actions .btn-danger{width:100%}}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:7px 10px;background:var(--surface2);font-family:var(--fm);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.tbl td{padding:7px 10px;border-top:1px solid var(--lineSoft);vertical-align:top}
.tbl .num{font-family:var(--fm);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-family:var(--fm);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.pill-success{background:var(--ivySoft);color:var(--ivy)}
.pill-no_data{background:var(--surface2);color:var(--ink3)}
.pill-failed,.pill-denied{background:var(--alertSoft);color:var(--alert)}
.pill-signin_required{background:var(--accentSoft);color:var(--accentInk)}
.scroll{overflow-x:auto}

/* ---------- responsive ---------- */
.menu-btn{display:none}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{grid-column:1;grid-row:1}
  .main{grid-column:1;grid-row:1}
  .sidebar{position:fixed;inset:0 auto 0 0;width:272px;z-index:30;transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
  .shell.open .sidebar{transform:none;box-shadow:var(--shadowLg)}
  .shell.open .scrim{display:block}
  .menu-btn{display:grid}
  .transcript{padding:20px 14px 8px}
  .composer-wrap{padding:4px 14px 14px}
}

/* ---------- boosted navigation ----------
   hx-boost swaps <body>, so nothing here reloads the page. This is the only
   feedback the user gets that a navigation is in flight. */

/* Boosted swaps crossfade where the browser supports view transitions. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
}

/* ---------- brand ----------
   The mark is inline SVG (templates/_logo.html): the tile paints with
   `currentColor` and the spark with the accent, so it is already correct in
   both themes. That replaces the old raster logo, which was dark ink on
   transparent and had to be filter-inverted to survive the dark ground. */
.logo-mark{width:30px;height:30px;flex:0 0 30px;color:var(--ink);display:block}
a.sidebar-head{text-decoration:none;min-height:56px;align-items:center;gap:10px;padding:16px 14px 12px}
a.sidebar-head .brand-name{font-family:var(--fd);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
a.sidebar-head:hover .logo-mark,a.sidebar-head:hover .brand-name{opacity:.82}
.landing .logo-mark{width:34px;height:34px;flex-basis:34px}

/* ---------- streaming answer ----------
   A blinking caret while text is arriving, so it reads as being written
   rather than as a stalled paragraph. */
@keyframes caret{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
.answer.streaming::after{
  content:'';display:inline-block;width:2px;height:1.05em;margin-left:2px;
  vertical-align:text-bottom;background:var(--accent);
  animation:caret 1.05s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.answer.streaming::after{animation:none;opacity:.6}}

/* Animated ellipsis on the status line, so a slow stage still reads as active. */
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}
.thinking [data-stage-text]::after{content:'...';animation:dots 1.4s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.thinking [data-stage-text]::after{animation:none;content:'...'}}