/* HeroUI tokens (values lifted from heroui v3 packages/styles/themes/default) */
:root{
  --background:#F5F5F5; --surface:#FFFFFF; --surface-2:#FAFAFA;
  --fg:#18181B; --muted:#71717A; --faint:#A1A1AA;
  --border:#DEDEE0; --separator:#E4E4E7; --default:#F1F1F3;
  --accent:#0485F7; --accent-soft:rgba(4,133,247,.10);
  --success:#17C964; --success-ink:#0E8F47; --success-soft:rgba(23,201,100,.12);
  --warn:#F5A524; --warn-ink:#A16207; --warn-soft:rgba(245,165,36,.14);
  --radius:8px; --field-radius:12px; --card-radius:16px;
  --shadow:0 2px 4px 0 rgba(0,0,0,.04),0 1px 2px 0 rgba(0,0,0,.06),0 0 1px 0 rgba(0,0,0,.06);
  --shadow-lg:0 12px 32px -8px rgba(24,24,27,.14),0 4px 10px -4px rgba(24,24,27,.08);
  --ease:cubic-bezier(.22,1,.36,1);

  /* Type scale. Linear at UI sizes (modular ratios fall apart below 16px),
     ~1.24 above. Tracking tightens as size grows; line-height loosens as it
     shrinks. Three weights only - 400 reads, 500 labels, 700 displays. */
  --fs-11:0.6875rem; --fs-12:0.75rem;  --fs-13:0.8125rem; --fs-14:0.875rem;
  --fs-15:0.9375rem; --fs-16:1rem;     --fs-17:1.0625rem; --fs-21:1.3125rem;
  --fs-26:1.625rem;  --fs-display:clamp(1.75rem, 1.15rem + 1.9vw, 2.35rem);
  --fw-body:400; --fw-med:500; --fw-display:700;
  --tr-label:0.062em; --tr-0:0; --tr-tight:-0.011em; --tr-tighter:-0.021em;
  --tr-display:-0.031em;
  --lh-tight:1.14; --lh-snug:1.35; --lh-body:1.55; --lh-loose:1.65;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--background);color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--fs-15);font-weight:var(--fw-body);line-height:var(--lh-body);
  letter-spacing:var(--tr-0);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1,'cv11' 1;
}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
h1,h2,h3{font-family:'Archivo',sans-serif;font-weight:var(--fw-display);
  letter-spacing:var(--tr-display);line-height:var(--lh-tight)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--accent);text-decoration:none}

/* ---------- shell ---------- */
.top{
  height:60px;display:flex;align-items:center;gap:14px;padding:0 22px;
  background:var(--surface);border-bottom:1px solid var(--separator);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:var(--fw-med);
  font-size:var(--fs-15);letter-spacing:var(--tr-tight)}
.leaf{width:30px;height:30px;border-radius:9px;background:var(--accent);
  display:grid;place-items:center;flex:0 0 auto}
.tag{font-size:var(--fs-13);color:var(--muted);font-weight:var(--fw-body)}
.spacer{flex:1}
.seg{display:flex;background:var(--default);border-radius:11px;padding:3px;gap:2px}
.seg button{padding:6px 14px;border-radius:8px;font-size:var(--fs-13);font-weight:var(--fw-med);color:var(--muted);
  transition:background .18s var(--ease),color .18s var(--ease)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}

/* website-view header hidden; iframe fills the screen */
body.on-site .top{display:none}
body.on-site #view-site{height:100vh !important}

/* floating view toggle over the website (pill-shaped, matches the assistant blue) */
.floatseg{position:fixed;right:22px;bottom:90px;z-index:2147483100;display:none;
  gap:3px;padding:4px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;box-shadow:var(--shadow-lg);
  transition:right .5s var(--ease),bottom .5s var(--ease),transform .5s var(--ease)}
body.on-site .floatseg{display:inline-flex}
.floatseg button{padding:8px 16px;border-radius:999px;font-size:var(--fs-13);
  font-weight:var(--fw-med);color:var(--muted);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.floatseg button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.floatseg::after{content:'';position:absolute;inset:-4px;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(4,133,247,.42);animation:segpulse 2.4s var(--ease) infinite}
.floatseg.chat-open{right:92px;bottom:26px;box-shadow:var(--shadow)}
.floatseg.chat-open::after{animation:none}
@keyframes segpulse{0%{box-shadow:0 0 0 0 rgba(4,133,247,.42)}
  70%{box-shadow:0 0 0 14px rgba(4,133,247,0)}100%{box-shadow:0 0 0 0 rgba(4,133,247,0)}}
@media (prefers-reduced-motion:reduce){.floatseg::after{animation:none}}

.wrap{display:grid;grid-template-columns:minmax(320px,38%) 1fr;gap:0;height:calc(100vh - 60px)}
.pane{overflow-y:auto;overflow-x:hidden}
.left{border-right:1px solid var(--separator);background:var(--surface-2)}
.right{background:var(--background)}
.pad{padding:22px}

/* ---------- source documents ---------- */
.eyebrow{font-size:var(--fs-11);font-weight:var(--fw-med);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--faint)}
.doclist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.doc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);
  padding:14px 16px;display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.doc:hover{border-color:#C9C9CE;box-shadow:var(--shadow);transform:translateY(-1px)}
.doc.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.doc .ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;flex:0 0 auto}
.doc .nm{display:block;font-size:var(--fs-15);font-weight:var(--fw-med);letter-spacing:var(--tr-tight)}
.doc .mt{display:block;font-size:var(--fs-13);color:var(--muted);margin-top:3px}

.reader{margin-top:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--card-radius);overflow:hidden}
.reader header{padding:14px 18px;border-bottom:1px solid var(--separator);
  display:flex;align-items:center;gap:10px;background:var(--surface-2)}
.reader h3{font-family:'Inter',sans-serif;font-size:var(--fs-14);font-weight:var(--fw-med);
  letter-spacing:var(--tr-tight)}
.reader .body{padding:18px;font-size:var(--fs-14);line-height:var(--lh-loose);white-space:pre-wrap;
  max-height:52vh;overflow-y:auto;color:#3F3F46}
.reader .body h4{font-family:'Inter',sans-serif;font-size:var(--fs-13);font-weight:var(--fw-med);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);margin:20px 0 6px}
mark{background:var(--warn-soft);color:inherit;border-radius:4px;padding:2px 1px;
  box-shadow:inset 0 -2px 0 rgba(245,165,36,.45)}
mark.flash{animation:flash 1.5s var(--ease)}
@keyframes flash{0%{background:rgba(245,165,36,.65)}100%{background:var(--warn-soft)}}

/* ---------- chat ---------- */
.chat{max-width:760px;margin:0 auto;padding:22px 22px 140px;display:flex;flex-direction:column;gap:20px}
.hello{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);
  padding:24px;box-shadow:var(--shadow)}
.hello h2{font-size:var(--fs-display);margin-bottom:10px}
.hello p{color:var(--muted);font-size:var(--fs-15);line-height:var(--lh-body);max-width:58ch}
.sugg{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.sugg button{border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:9px 15px;font-size:var(--fs-13);font-weight:var(--fw-body);transition:all .18s var(--ease)}
.sugg button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sugg button.edge{border-style:dashed;color:var(--warn-ink)}
.sugg button.edge:hover{border-color:var(--warn);background:var(--warn-soft);color:var(--warn-ink)}

.turn{display:flex;flex-direction:column;gap:12px;animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.me{align-self:flex-end;max-width:78%;background:var(--accent);color:#fff;
  padding:12px 17px;border-radius:16px;border-bottom-right-radius:5px;
  font-size:var(--fs-15);line-height:var(--lh-snug)}
.bot{display:flex;gap:12px;align-items:flex-start}
.av{width:34px;height:34px;border-radius:999px;background:var(--accent-soft);
  display:grid;place-items:center;flex:0 0 auto;margin-top:2px}
.bubble{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;border-top-left-radius:5px;padding:15px 18px;box-shadow:var(--shadow)}

/* status line + scanning shimmer */
.status{display:flex;align-items:center;gap:9px;font-size:var(--fs-13);color:var(--muted);
  font-weight:var(--fw-body)}
.status .chev{flex:0 0 auto;color:var(--faint);transition:transform .25s var(--ease)}
.status.togglable{cursor:pointer;border-radius:8px;margin:-3px -6px;padding:3px 6px;width:fit-content;
  transition:background .18s var(--ease)}
.status.togglable:hover{background:var(--default)}
.status.togglable:hover .txt,.status.togglable:hover .chev{color:var(--fg)}
.status.open .chev{transform:rotate(180deg)}
.scan{flex:1;height:3px;border-radius:999px;background:var(--separator);overflow:hidden;max-width:180px}
.scan i{display:block;height:100%;width:38%;border-radius:999px;background:var(--accent);
  animation:sweep 1.05s infinite var(--ease)}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

/* retrieval cards */
.hits{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:1400px;
  transition:max-height .5s var(--ease),opacity .35s var(--ease),margin-top .3s var(--ease);overflow:hidden}
.hit{background:var(--surface-2);border:1px solid var(--separator);border-radius:12px;
  padding:10px 13px;display:flex;flex-direction:column;gap:7px;cursor:pointer;
  animation:slidein .42s var(--ease) both;transition:border-color .2s var(--ease),background .2s var(--ease)}
.hit:hover{border-color:var(--accent);background:var(--accent-soft)}
.hit.best{border-color:rgba(4,133,247,.4);background:#F7FBFF}
@keyframes slidein{from{opacity:0;transform:translateX(26px) scale(.98)}to{opacity:1;transform:none}}
.hit .row1{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-13)}
.hit .n{width:19px;height:19px;border-radius:6px;background:var(--default);color:var(--muted);
  display:grid;place-items:center;font-size:var(--fs-11);font-weight:var(--fw-med);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.hit.best .n{background:var(--accent);color:#fff}
.hit .src{font-weight:var(--fw-med);letter-spacing:var(--tr-tight)}
.hit .sec{color:var(--muted)}
.hit .sc{margin-left:auto;font-variant-numeric:tabular-nums;font-size:var(--fs-12);
  font-weight:var(--fw-med);color:var(--muted)}
.hit .bar{height:4px;border-radius:999px;background:var(--separator);overflow:hidden}
.hit .bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);
  transition:width .85s var(--ease)}
.hit.weak .bar i{background:var(--warn)}
.hit .prev{font-size:var(--fs-13);color:var(--muted);line-height:var(--lh-snug);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.hits.folded{max-height:0;opacity:0;margin-top:0}
.strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--separator);animation:rise .35s var(--ease) both}

/* follow-up suggestions under a finished answer */
.more{margin-top:12px}
.morebtn{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-13);font-weight:var(--fw-med);
  color:var(--muted);background:var(--default);border:1px solid var(--separator);border-radius:999px;
  padding:7px 13px;transition:all .18s var(--ease)}
.morebtn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.morebtn svg{transition:transform .28s var(--ease)}
.more.open .morebtn svg{transform:rotate(45deg)}
.moretray{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s var(--ease),opacity .3s var(--ease),margin-top .3s var(--ease)}
.moretray .mtrow{overflow:hidden;min-height:0;display:flex;flex-wrap:wrap;gap:8px}
.more.open .moretray{grid-template-rows:1fr;opacity:1;margin-top:11px}
.sg{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:8px 13px;
  font-size:var(--fs-13);font-weight:var(--fw-body);color:var(--fg);text-align:left;
  transition:all .16s var(--ease)}
.sg:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sg.edge{border-style:dashed;color:var(--warn-ink)}
.sg.edge:hover{border-color:var(--warn);background:var(--warn-soft);color:var(--warn-ink)}

.answer{font-size:var(--fs-16);line-height:var(--lh-loose);letter-spacing:var(--tr-0);
  white-space:pre-wrap;margin-top:12px;max-width:66ch}
.answer:empty{display:none}
.cursor{display:inline-block;width:2px;height:16px;background:var(--fg);
  vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;
  font-size:var(--fs-12);font-weight:var(--fw-med);white-space:nowrap}
.chip.src{background:var(--success-soft);color:var(--success-ink);cursor:pointer;
  transition:transform .16s var(--ease),filter .16s var(--ease)}
.chip.src:hover{transform:translateY(-1px);filter:brightness(.96)}
.chip.grey{background:var(--default);color:var(--muted)}
.chip.warn{background:var(--warn-soft);color:var(--warn-ink)}
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;margin:0 2px;border-radius:6px;background:var(--success-soft);color:var(--success-ink);
  font-size:var(--fs-11);font-weight:var(--fw-med);font-variant-numeric:tabular-nums;
  vertical-align:1px;cursor:pointer;
  animation:pop .34s var(--ease) both}
.cite:hover{background:var(--success);color:#fff}
@keyframes pop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
.handover{margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 17px;border-radius:11px;
  font-size:var(--fs-14);font-weight:var(--fw-med);transition:all .18s var(--ease)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--default);border:1px solid var(--border)}
.btn-ghost:hover{border-color:#C9C9CE}

/* composer */
.composer{position:fixed;bottom:0;right:0;width:62%;padding:16px 22px 22px;
  background:linear-gradient(to top,var(--background) 62%,rgba(245,245,245,0));z-index:10}
.composer .in{max-width:760px;margin:0 auto;display:flex;gap:10px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--field-radius);
  padding:7px 7px 7px 17px;box-shadow:var(--shadow-lg);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.composer .in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-lg)}
.composer input{flex:1;border:0;outline:0;font:inherit;font-size:var(--fs-16);background:none;min-width:0}
.composer input::placeholder{color:var(--faint)}
.send{width:40px;height:40px;border-radius:10px;background:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.send:disabled{background:var(--default);cursor:not-allowed}
.foot{max-width:760px;margin:10px auto 0;font-size:var(--fs-12);color:var(--faint);text-align:center}

@media (max-width:980px){
  .wrap{grid-template-columns:1fr;height:auto}
  .left{border-right:0;border-bottom:1px solid var(--separator)}
  .pane{overflow:visible}
  .composer{width:100%}
}

[hidden]{display:none!important}

/* ---------- pinned demo video ---------- */
.vpin{
  position:fixed;z-index:2147483200;display:flex;align-items:center;gap:11px;
  top:7px;right:calc(22px + var(--segw,250px) + 16px);
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:4px 14px 4px 4px;box-shadow:var(--shadow-lg);cursor:pointer;text-align:left;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),opacity .32s var(--ease),
             border-color .28s var(--ease),background .28s var(--ease);
}
.vpin:hover{transform:translateY(-2px);border-color:#C9C9CE;
  box-shadow:0 16px 36px -10px rgba(24,24,27,.24)}
.vpin:focus-visible{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-lg)}

.vframe{position:relative;width:62px;aspect-ratio:16/9;flex:0 0 auto;
  border-radius:9px;overflow:hidden;background:#0B0B0D;transform-origin:top left}
.vframe video{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.32));
  transition:opacity .3s var(--ease)}
.vplay i{width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.95);
  display:grid;place-items:center;box-shadow:0 2px 9px rgba(0,0,0,.35)}
.vpin:hover .vplay{opacity:.18}
.vdur{display:none;position:absolute;right:7px;bottom:7px;padding:2px 6px;border-radius:5px;
  background:rgba(9,9,11,.72);color:#fff;font-size:var(--fs-11);font-weight:var(--fw-med);
  letter-spacing:var(--tr-0);line-height:1.5}

.vlabel{display:flex;flex-direction:column;line-height:1.28;min-width:0;
  transition:opacity .22s var(--ease)}
.vlabel b{font-size:var(--fs-13);font-weight:var(--fw-med);letter-spacing:var(--tr-tight);
  white-space:nowrap}
.vlabel span{font-size:var(--fs-11);color:var(--muted);white-space:nowrap}

/* nudge arrow - drifts toward and away from the card until it has been opened */
.vnudge{position:absolute;right:calc(100% + 13px);top:50%;width:50px;color:var(--accent);
  pointer-events:none;transform:translateY(-50%);
  animation:vnudge 1.6s ease-in-out infinite alternate}
.vnudge svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 2px 5px rgba(4,133,247,.30))}
@keyframes vnudge{from{transform:translateY(-50%) translateX(-11px)}
  to{transform:translateY(-50%) translateX(3px)}}
.vpin.seen .vnudge{opacity:0;animation:none;transition:opacity .4s var(--ease)}

/* over the mock website: a proper little card sitting above the view toggle */
body.on-site .vpin{
  top:auto;bottom:150px;right:22px;width:200px;
  flex-direction:column;align-items:stretch;gap:9px;padding:8px;border-radius:18px;
}
body.on-site .vframe{width:100%;border-radius:12px}
body.on-site .vdur{display:block}
body.on-site .vlabel{padding:0 4px 3px}
body.on-site .vnudge{top:63px}
.vpin.chat-open{opacity:0;transform:translateY(10px) scale(.94);pointer-events:none}

/* expanded */
.vscrim{position:fixed;inset:0;z-index:2147483250;background:rgba(9,9,11,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
body.vopen .vscrim{opacity:1;pointer-events:auto}
body.vopen .vpin{z-index:2147483300;background:transparent;border-color:transparent;
  box-shadow:none;transform:none;pointer-events:none;cursor:default}
body.vopen .vlabel{opacity:0}
body.vopen .vnudge{display:none}

#vframe.big{
  position:fixed;inset:0;margin:auto;z-index:2147483300;
  width:min(960px,92vw,138vh);height:auto;aspect-ratio:16/9;
  border-radius:20px;overflow:visible;background:transparent;
  box-shadow:0 44px 96px -24px rgba(0,0,0,.62);
}
#vframe.big video{border-radius:20px;object-fit:contain;background:#0B0B0D}
#vframe.big .vplay,#vframe.big .vdur{opacity:0;pointer-events:none}

.vclose{position:absolute;top:-54px;right:0;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.93);color:#18181B;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:scale(.8);
  transition:opacity .3s var(--ease) .18s,transform .3s var(--ease) .18s,background .18s}
body.vopen .vclose{opacity:1;pointer-events:auto;transform:none}
body.vopen .vclose:hover{background:#fff;transform:scale(1.06)}

@media (max-width:860px){
  .vpin .vlabel{display:none}
  .vpin{padding:4px}
  body.on-site .vpin{width:172px}
  body.on-site .vpin .vlabel{display:flex}
  .vnudge{display:none}
}
@media (prefers-reduced-motion:reduce){.vnudge{animation:none}}