/* Parity round 2 (slice 4b) — every number below is MEASURED from the real product,
   not styled from memory:
   · column: max-width 840px, 16px side padding (computed on chainlit-app-test — steps
     and composer pill both span the ~808px inner column; the old 770px was wrong)
   · message anatomy: bubbleless; eyebrow = Source Code Pro 10.5px/600, 0.8px tracking,
     uppercase, fg@55%, 11px icon (teal dot "You" / orange 4-point star "/Agent"),
     6px below; prose indented 19px under the eyebrow (custom.css:6540-6644)
   · cards: FULL column width, cancel the prose indent (custom.css .inline-custom rule)
   · caret: .fractl-caret — steady 2px × 1.05em orange bar, ml 3px, radius 1px, NO blink
     (custom.css:304-316; Dan 2026-07-07 replaced the pulsing dot; also the standalone
     waiting indicator, fork Messages/index.tsx:82)
   · header: the /login header — 34px round logo + "/Agents" wordmark 18px/600,
     px-8 py-2.5, rgba(33,33,33,.6) + blur (DreamLoginPage.tsx:167-186) */
/* ── fonts: the SAME variable-weight woff2 files the main chat self-hosts
   (public/fonts/*, inlined @font-face in public/build/index.html:97-127), not Google's
   static-instance build — round 5 (2026-08-25, Dan: "the text feels harder to read"):
   measured on both pages the CSS matched (Plex 14px/28px) but try.frac.tl rendered
   Google's static 400/500/600/700 instances with font-smoothing:auto while the real
   chat renders the variable file antialiased. Same bytes + same smoothing = same text. ── */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('ibm-plex-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('ibm-plex-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('source-code-pro-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('source-code-pro-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--bg:#212121;--card:#292929;--elev:#303030;--muted:#454545;--fg:#fff;
  --fgm:#a3a3a3;--action:#21ad8f;--action-h:#1b9279;--brand:#e94f29}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:'IBM Plex Sans',sans-serif;
  font-size:14px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--action);text-decoration:none}

/* ── header (login-page parity) ── */
.topbar{display:flex;align-items:center;gap:10px;padding:10px 32px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(33,33,33,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}
.brand .word{display:inline-flex;align-items:baseline;gap:0;font-size:18px;font-weight:600;
  letter-spacing:.02em;color:#fff}
.brand .word .slash{color:var(--brand)}
.badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fgm);border:1px solid var(--muted);border-radius:999px;padding:2px 8px}
.spacer{flex:1}
.signin{font-size:12.5px;color:var(--fgm)} .signin:hover{color:var(--fg)}
@media (max-width:700px){.topbar{padding:10px 16px}}

/* ── chat column: measured 840px / 16px padding ── */
.chatcol{width:100%;max-width:840px;margin:0 auto;padding:16px 16px 130px;display:flex;
  flex-direction:column;gap:0;flex:1}

/* ── message anatomy (measured: step px-16, eyebrow pl-16 w/ 11px icon, prose pl-19) ──
   Vertical rhythm (round 4, MEASURED on chainlit-app-test — Dan: "less space between
   sections… check line heights"): each message step has 7px padding top+bottom and NO
   margins → 14px between consecutive messages (steps are flush, [data-step-type] pt/pb
   7px). Eyebrow→prose = 12px total (.ai-message flex gap 6px + ::before margin-bottom
   6px, custom.css:6622-6644). Prose line-height = 28px @14px (measured on live threads;
   user text is whitespace-pre-wrap lh 28 too — the old 21px here was measured off a
   PROGRESS CARD step, not prose, and is what made the demo read tighter). Blocks inside
   a message sit in a flex col gap-2 → 8px paragraph gap (message-content classes). ── */
/* MEASURED on a real main-chat thread 2026-08-25 (Dan: "spacing seems off"): step padding
   7px top + a 14px tail → 21px from a message's last prose line to the next eyebrow (the old
   `margin:7px 0` COLLAPSED to 7px between siblings); eyebrow top → prose top 28px (kept);
   paragraph gap 16px (`[&:not(:first-child)]:mt-[16px]` in the fork — was 8px here). */
.msg{margin:0;padding:7px 16px 14px}
.eyebrow{display:block;font-family:'Source Code Pro',ui-monospace,SFMono-Regular,monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding-left:16px;margin-bottom:12px;
  background-repeat:no-repeat;background-position:0 center;background-size:11px 11px}
.eyebrow.you{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2321ad8f'><circle cx='12' cy='12' r='8'/></svg>")}
.eyebrow.agent{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e94f29'><path d='M 12 2 Q 14 10 22 12 Q 14 14 12 22 Q 10 14 2 12 Q 10 10 12 2 Z'/></svg>")}
.msgbody{padding-left:19px;color:var(--fg);font-size:14px;line-height:28px;
  overflow-wrap:anywhere}
.msgbody p{margin:0 0 16px} .msgbody p:last-child{margin-bottom:0}
.msgbody ul,.msgbody ol{margin:4px 0 8px 20px}
.msgbody li{margin:2px 0}
.msgbody strong{font-weight:700}
.msgbody code{background:var(--elev);border-radius:4px;padding:1px 5px;font-size:12.5px}
.msgbody a{text-decoration:underline}

/* ── streaming caret: the real .fractl-caret bar (2px × 1.05em, orange, ml 3px) with a
   classic cursor blink — Dan 2026-08-25: "the cursor doesn't blink like it does in our main
   chat". (custom.css itself declares no animation; the main chat's caret re-mounts per
   token chunk, which reads as a blink. Here the bar is real and steady, so it blinks.) ── */
.fractl-caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;
  vertical-align:text-bottom;border-radius:1px;background:var(--brand);
  animation:fractl-caret-blink 1s steps(2,start) infinite}
@keyframes fractl-caret-blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.fractl-caret{animation:none}}

/* ── cards: align with the EYEBROW ICON edge (round 3, MEASURED on the real chat:
   card left 442 = step content edge = mustache icon; prose sits 19px further right
   at 461; the composer pill is 16px wider per side, 426..1238 vs cards 442..1222.
   So: NOT flush with the column, NOT as wide as the composer — inset 16px to the
   mustache line, like the real .inline-custom de-indent geometry). ── */
.card{background:var(--card);border:1px solid var(--muted);border-radius:12px;
  padding:18px;width:calc(100% - 32px);margin:7px 16px}
/* the RESULT card lands after chat prose — a new moment, so it gets air above it (Dan
   2026-08-25: "needs a little vertical space from the chat response text"); 7px was the
   collapsed .msg/.card margin, i.e. the same gap as between two lines of talk. */
.card.result{margin:10px 16px 14px}   /* + the message's 14px tail = 24px of air above */
.cardhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.icontile{width:30px;height:30px;border-radius:9px;background:rgba(33,173,143,.16);
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--action)}
.icontile svg{width:16px;height:16px}
.cardtitle{font-size:14px;font-weight:600}.cardsub{font-size:12px;color:var(--fgm)}
.card label{display:block;font-size:13px;font-weight:500;margin:12px 0 5px}
.dep-hint{font-weight:400;color:var(--fgm)}
.card input{width:100%;padding:8px 12px;font-size:14px;font-family:inherit;border-radius:8px;
  border:1px solid var(--muted);background:var(--bg);color:var(--fg);outline:none}
.card input:focus{border-color:rgba(33,173,143,.5);box-shadow:0 0 0 1px rgba(33,173,143,.2)}
.card textarea{width:100%;padding:8px 12px;font-size:14px;font-family:inherit;line-height:1.45;border-radius:8px;resize:vertical;min-height:7.5em;
  border:1px solid var(--muted);background:var(--bg);color:var(--fg);outline:none}
.card textarea:focus{border-color:rgba(33,173,143,.5);box-shadow:0 0 0 1px rgba(33,173,143,.2)}
.runbtn{width:100%;margin-top:16px;background:var(--action);color:#fff;border:none;
  border-radius:8px;height:40px;font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:background .15s}
.runbtn:hover{background:var(--action-h)} .runbtn:disabled{opacity:.6;cursor:default}
.fine{font-size:11.5px;color:var(--fgm);text-align:center;margin-top:8px}
.err{color:#f87171;font-size:12.5px;margin-top:8px;display:none}

/* ── progress (full width like every card) ──
   Spinner (round 4 — Dan: "it's the STAR that is supposed to spin, not the border"):
   the real product spins the Fractl 4-point star itself — theme.css:305-311, the
   Dan-LOCKED "Elastic" tune (0.95s, springy overshoot+settle linear() easing), star
   path from AgentProgressCard.jsx FractlMark / custom.css .fractl-star-loader-host.
   The old border-ring .spin is gone. ── */
/* Sticky status strip (2026-08-25, Dan: sitting right above the thinking caret, "typically
   10–15 minutes" read as the REPLY's ETA). It now pins to the top of the column as ambient
   run status, slimmer, and its copy says chat answers right away. */
.progress{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--muted);border-radius:12px;padding:9px 14px;margin:7px 16px;
  width:calc(100% - 32px);position:sticky;top:8px;z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.ptile{position:relative;width:30px;height:30px;border-radius:9px;flex:none;
  background:rgba(233,79,41,.14);display:flex;align-items:center;justify-content:center;
  color:var(--brand)}
.fractl-star-spinner{width:16px;height:16px;display:block;transform-origin:50% 50%;
  animation:fractl-star-spin .95s var(--ease-star-spin) infinite}
:root{--ease-star-spin:linear(0, 0.18, 0.42, 0.7, 0.92, 1.06, 1.11, 1.08, 1.03, 0.99, 0.985, 0.995, 1)}
@keyframes fractl-star-spin{to{transform:rotate(360deg)}}
.ptext{flex:1;min-width:0}.pstage{font-size:13px;font-weight:600}
.psub{font-size:12px;color:var(--fgm);margin-top:1px}
.ptime{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--fgm);flex:none}

/* ── chips — C3, Dan's pick 2026-08-05: the composer-chip pill language, lifted
   pixel-faithfully from the continuation-footer "suggestion chip" treatment
   (fork ContinuationFooterPreview.tsx:123-127 via /admin/mocks/chips C3):
   pill radius 999 · fill rgba(255,255,255,.07) → .13 hover · 12px/550 · teal
   12px trailing arrow. Replaces the demo-invented teal-tinted pills. ── */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0;padding:0 16px}
.chip{background:rgba(255,255,255,.07);border:none;color:var(--fg);
  border-radius:999px;padding:5px 13px;font:550 12px/1.4 'IBM Plex Sans',sans-serif;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s}
.chip:hover{background:rgba(255,255,255,.13)}
.chip svg{width:12px;height:12px;color:#21ad8f;flex:none}

/* ── teaser ── */
.heronum{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.heronum small{font-size:13px;font-weight:500;color:var(--fgm);letter-spacing:0}
.findrow{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--muted);
  font-size:13.5px;align-items:baseline}
.findrow svg{width:14px;height:14px;flex:none;color:var(--fgm);align-self:flex-start;margin-top:2px}
.locked{position:relative}
.locked .findrow{filter:blur(3.5px);user-select:none;pointer-events:none}
.lockover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lockpill{background:var(--elev);border:1px solid var(--muted);border-radius:999px;
  padding:6px 14px;font-size:12.5px;box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:flex;align-items:center;gap:6px}
.lockpill svg{width:12px;height:12px}
.ctabtn{display:block;text-align:center;background:var(--action);color:#fff;border-radius:8px;
  height:40px;line-height:40px;font-weight:600;margin-top:14px;transition:background .15s}
.ctabtn:hover{background:var(--action-h)}
.ctasub{font-size:11.5px;color:var(--fgm);text-align:center;margin-top:8px}

/* ── composer (pill spans the same 808px inner column as the cards) ──
   Radii + colors MEASURED on the real chat (round 5 — Dan: "the composer has a
   different border radius than the main chat, as well as for its send button"):
   pill = computed border-radius 21px, bg rgb(41,41,41), border 1px #454545
   (class rounded-3xl but 21px computed — trust the computed value);
   Send button = aria "Send message", border-radius 8px, teal, 70×32.
   Old demo values (28px pill / 20px button) were styled from memory — wrong. ── */
.composer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(transparent,var(--bg) 35%);
  padding:18px 16px 22px}
.composer .inner{max-width:808px;margin:0 auto;display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--muted);border-radius:21px;padding:8px 8px 8px 20px;
  transition:border-color .15s}
.composer .inner:focus-within{border-color:rgba(33,173,143,.45)}
.composer input{flex:1;padding:8px 0;font-size:14px;font-family:inherit;border:none;
  background:transparent;color:var(--fg);outline:none}
.composer input::placeholder{color:#8a8a8a}
.composer button{background:var(--action);color:#fff;border:none;border-radius:8px;
  padding:7px 16px;font-weight:600;font-size:13.5px;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:background .15s;height:32px}
.composer button:hover{background:var(--action-h)}
.composer button .ret{font-size:12px;opacity:.85}
/* ── sample-report overlay (round 4 MOCK — Dan: "option of showing a sample before
   they run it"; presentation for reaction, admin-upload plumbing comes after) ── */
.samplelink{display:block;width:100%;background:none;border:none;color:var(--action);
  font-size:12px;font-family:inherit;text-align:center;margin-top:10px;cursor:pointer;
  padding:0}
.samplelink:hover{color:var(--action-h);text-decoration:underline}
.overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;
  align-items:center;justify-content:center;padding:28px 16px}
.overlay .panel{width:100%;max-width:760px;max-height:calc(100vh - 56px);display:flex;
  flex-direction:column;background:var(--card);border:1px solid var(--muted);
  border-radius:14px;overflow:hidden}
.overlay .phead{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--muted);flex:none}
.overlay .phead .ptitle{font-size:14px;font-weight:600;flex:1}
.overlay .phead .note{font-size:11px;color:var(--fgm)}
.overlay .pclose{background:none;border:none;color:var(--fgm);font-size:20px;line-height:1;
  cursor:pointer;padding:4px 6px;font-family:inherit}
.overlay .pclose:hover{color:var(--fg)}
.overlay .pbody{overflow-y:auto;padding:22px 26px;flex:1}
.overlay .pfoot{flex:none;padding:12px 18px;border-top:1px solid var(--muted);
  background:var(--elev)}
.overlay .pfoot .ctabtn{margin-top:0}
/* sample report typography (rendered markdown incl. headings + tables) */
.sample-md{font-size:14px;line-height:28px;color:var(--fg)}
.sample-md h1{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px}
.sample-md h2{font-size:15px;font-weight:600;margin:20px 0 8px}
.sample-md h3{font-size:13.5px;font-weight:600;margin:16px 0 6px}
.sample-md p{margin:0 0 10px}
.sample-md ul,.sample-md ol{margin:4px 0 10px 20px}
.sample-md li{margin:2px 0}
.sample-md hr{border:none;border-top:1px solid var(--muted);margin:18px 0}
.sample-md em{color:var(--fgm)}
.sample-md table{border-collapse:collapse;width:100%;margin:8px 0 12px;font-size:13px;
  line-height:20px}
.sample-md th,.sample-md td{border:1px solid var(--muted);padding:6px 10px;text-align:left}
.sample-md th{background:var(--elev);font-weight:600;font-size:12px}
@media (max-width:700px){.overlay{padding:0}
  .overlay .panel{max-width:none;max-height:100vh;height:100%;border-radius:0;border:none}
  .overlay .pbody{padding:16px 14px}}

.hidden{display:none!important}
@media (max-width:700px){.chatcol{padding:14px 10px 120px}.msg{padding:0 8px}
  .chips{padding:0 8px}.composer{padding:12px 10px 16px}
  .card,.progress{margin:7px 8px;width:calc(100% - 16px)}}

/* ── the question to answer (Dan's pick 2026-08-25, "Retype"; replaces the chips): the
   moment the FIRST question of the conversation finishes streaming, its letters type
   themselves over again in teal, left to right, and settle back to the exact white text.
   Per-letter spans are added by demo.js for the animation and removed when it ends. ── */
.msgbody p.ask .c{display:inline-block;white-space:pre;color:#fff;
  animation:ask-retype .5s steps(1,end) both;animation-delay:calc(.25s + var(--i) * 22ms)}
@keyframes ask-retype{0%{color:#fff;opacity:.25}50%{color:#5fe0c1;opacity:1}100%{color:#fff;opacity:1}}
@media (prefers-reduced-motion:reduce){.msgbody p.ask .c{animation:none}}

/* feedback #112: Try again under a failed run */
.retryrow{margin-top:6px}
.retryrow .chip{background:#21ad8f;color:#fff;font-weight:600}
.retryrow .chip svg{color:#fff}
.retryrow .chip:hover{background:#1c9a7f}
.retryrow .chip:disabled{opacity:.6;cursor:default}