/* The chat screen in the style of Mercury's Command (mercury.com/command, viewed 10-29-2026): a dark ink background
   with a soft violet glow, glass panels with hairline borders, the customer's messages as small pills on the right, the
   assistant's words as plain text, and approvals and results as cards inside the conversation. */
:root {
  --bg: #0e0e15; --glass: rgba(255,255,255,.035); --glass-2: rgba(255,255,255,.06); --glass-3: rgba(255,255,255,.1);
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  /* Text grays from ChatGPT's dark theme (measured 10-30-2026): primary, secondary, tertiary, placeholder. */
  --ink: #ffffff; --ink-2: #cdcdcd; --muted: #afafaf; --faint: #8f8f8f;
  --pill: #2a2a37; --violet: #a7a1ff; --violet-2: #6f67c9; --ok: #6fd3a0; --warn: #f2bd6b;
  --on-ink: #121218; --ink-hover: #ffffff; --error: #ff9a8f;
  --panel-a: rgba(255,255,255,.045); --panel-b: rgba(255,255,255,.02);
  --panel-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 60px rgba(0,0,0,.35);
  --card-a: rgba(255,255,255,.06); --card-b: rgba(255,255,255,.025); --split: #17171f; --well: rgba(0,0,0,.18);
  --field: rgba(0,0,0,.25); --box: rgba(10,10,16,.55); --focus: rgba(167,161,255,.45);
  --rule-strong: rgba(255,255,255,.15); --rule-faint: rgba(255,255,255,.06);
  --dots: rgba(255,255,255,.12); --bar-top: #8b83e6; --bar-bottom: rgba(111,103,201,.25); --bar-none: rgba(255,255,255,.12);
  --shine: #f2f2ff; --glow: rgba(122,112,235,.26); --glow-2: rgba(122,112,235,.06);
  --file-bg: rgba(111,211,160,.1); --file-line: rgba(111,211,160,.2);
  --radius: 18px;
  /* ChatGPT's type: the device's own font (SF Pro on a Mac, Segoe UI on Windows), no web font, no OpenType options. */
  font-family: -apple-system-body, ui-sans-serif, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --mono: "SF Mono", SFMono-Regular, ui-monospace, Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: dark;
}

/* Light theme (toggle in the header): ChatGPT's light text grays (#0d0d0d / #5d5d5d / #8f8f8f) on white panels. */
:root[data-theme="light"] {
  --bg: #ececf1; --glass: rgba(0,0,0,.02); --glass-2: rgba(0,0,0,.04); --glass-3: rgba(0,0,0,.07);
  --line: rgba(0,0,0,.08); --line-2: rgba(0,0,0,.12);
  --ink: #0d0d0d; --ink-2: #414141; --muted: #5d5d5d; --faint: #8f8f8f;
  --pill: #ececf1; --violet: #6f67c9; --violet-2: #5a52b8; --ok: #1f8a55; --warn: #b26b00;
  --on-ink: #ffffff; --ink-hover: #000000; --error: #c0392b;
  /* Mirror of dark: see-through panels over the same violet glow, so the gradient shows through in both themes. */
  --panel-a: rgba(255,255,255,.62); --panel-b: rgba(255,255,255,.34);
  --panel-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(20,20,40,.06);
  --card-a: rgba(255,255,255,.85); --card-b: rgba(255,255,255,.5); --split: rgba(244,244,248,.9); --well: rgba(0,0,0,.025);
  --field: #ffffff; --box: rgba(255,255,255,.6); --focus: rgba(111,103,201,.5);
  --rule-strong: rgba(0,0,0,.15); --rule-faint: rgba(0,0,0,.05);
  --dots: rgba(0,0,0,.1); --bar-top: #8b83e6; --bar-bottom: rgba(111,103,201,.18); --bar-none: rgba(0,0,0,.08);
  /* A violet glow reads far weaker on white than on black, so light needs a stronger one to look the same. */
  --shine: #0d0d0d; --glow: rgba(112,100,235,.4); --glow-2: rgba(112,100,235,.1);
  --file-bg: rgba(31,138,85,.08); --file-line: rgba(31,138,85,.2);
  --card-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(20,20,40,.04);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
.glow { position: fixed; inset: auto 0 0 0; height: 75vh; pointer-events: none; z-index: 0;
  background: radial-gradient(45% 55% at 50% 100%, var(--glow), var(--glow-2) 55%, transparent 80%); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 999px; padding: 8px 16px; color: var(--ink); background: var(--glass-3); font-weight: 500; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--ink); color: var(--on-ink); }
button.primary:hover:not(:disabled) { background: var(--ink-hover); }
button.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
button.ghost:hover { background: var(--glass-2); color: var(--ink); }
.glass { background: linear-gradient(180deg, var(--panel-a), var(--panel-b)); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--panel-shadow); backdrop-filter: blur(16px); }
.tile { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--line-2); }

/* Sign in */
.login { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { padding: 32px; width: min(380px, 100%); display: grid; gap: 12px; }
.login-card h1 { margin: 6px 0 0; font-size: 24px; line-height: 28px; font-weight: 600; }
.login-card p { margin: 0; color: var(--muted); }
.login-card input { font: inherit; color: var(--ink); padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--field); outline: 0; }
.login-card input:focus { border-color: var(--violet-2); }
.login-card #username { color: var(--muted); }
.login-card button { padding: 11px 16px; margin-top: 4px; }
.error { color: var(--error) !important; }

/* Frame */
.app { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
/* Commenda's wordmark (commenda.io); the white-lettering copy is for dark mode. */
.brand { display: flex; align-items: center; height: 38px; }
.wordmark { height: 22px; width: auto; display: block; }
.wordmark.on-light { display: none; }
:root[data-theme="light"] .wordmark.on-dark { display: none; }
:root[data-theme="light"] .wordmark.on-light { display: block; }
.login-mark { width: 36px; height: 36px; border-radius: 9px; }
.main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 0 24px 24px; }

/* Chat panel */
.chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-head { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-head b { display: block; font-weight: 600; font-size: 15px; line-height: 20px; }
.chat-head span { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.messages { flex: 1; overflow-y: auto; padding: 28px clamp(16px, 5vw, 64px) 20px; display: flex; flex-direction: column; gap: 18px; scrollbar-color: var(--glass-3) transparent; }
/* flex: none, or the column shrinks cards (overflow: hidden) to nothing once the conversation is taller than the panel. */
.messages > * { flex: none; width: 100%; max-width: 720px; margin-inline: auto; }
.msg.you { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* Message type follows ChatGPT (measured 10-30-2026): 16/26 text, 600 headings at 20 and 18, 14 px tables. */
.msg.you .bubble { max-width: 70%; background: var(--pill); border: 1px solid var(--line); padding: 10px 16px; border-radius: 22px; color: var(--ink); line-height: 24px; }
.msg.agent { color: var(--ink); line-height: 26px; }
.msg p { margin: 0 0 4px; } .msg p + p { margin-top: 12px; } /* 16 px between paragraphs, as measured */ .msg p:last-child, .msg .bubble > :last-child { margin-bottom: 0; }
.msg strong { color: var(--ink); font-weight: 600; }
.msg ul, .msg ol { padding-left: 26px; margin: 0 0 12px; }
.msg li { padding-left: 6px; margin: 2px 0; }
.msg h1, .msg h2 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); margin: 20px 0 4px; }
.msg h3, .msg h4 { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink); margin: 16px 0 4px; }
.msg > :first-child { margin-top: 0; }
.msg hr { border: 0; border-top: 1px solid var(--rule-strong); margin: 28px 0; }
.msg code { font-family: var(--mono); font-size: 14px; background: var(--glass-2); padding: 1px 5px; border-radius: 5px; }
.msg table { border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; width: 100%; font-variant-numeric: tabular-nums; }
.msg th, .msg td { text-align: left; }
.msg th { color: var(--ink); font-weight: 600; line-height: 16px; padding: 8px 24px 8px 0; border-bottom: 1px solid var(--rule-strong); }
.msg td { line-height: 26px; padding: 10px 24px 10px 0; border-bottom: 1px solid var(--rule-faint); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; line-height: 18px; }

/* Status lines between messages, like "✓ You sent an invoice" */
.event { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--muted); }
.event svg { color: var(--ok); }
.event .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.event.warn .dot { background: var(--warn); }

/* Cards inside the conversation */
.card { border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); overflow: hidden; box-shadow: var(--card-shadow, none); max-width: 520px !important; margin-inline: auto; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.card-head b { font-weight: 600; font-size: 14px; line-height: 20px; }
.card-head .tag { font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; }
.card-body { padding: 12px 16px 16px; }
.card-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.big { font-size: 36px; font-weight: 600; line-height: 40px; font-variant-numeric: tabular-nums; }
.big sup { font-size: 16px; font-weight: 400; vertical-align: 15px; margin-left: 1px; color: var(--ink-2); }
.sub { color: var(--muted); font-size: 13px; line-height: 18px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.split > div { background: var(--split); padding: 12px 14px; }
.split .n { font-size: 24px; line-height: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.split .n.warn { color: var(--warn); } .split .n.ok { color: var(--ok); }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.reasons li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink); }
.reasons li:last-child { border-bottom: 0; }
.reasons li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Approval card: the question, then the actions as numbered rows, as in Mercury's account picker */
.approval .q { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); padding: 14px 16px 10px; }
.options { list-style: none; margin: 0 8px 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--well); display: grid; gap: 2px; }
.options li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.options li:first-child { background: var(--glass-3); color: var(--ink); }
/* A question's options are choices, not a summary: none is highlighted until pointed at. */
.options.pick li:first-child { background: transparent; color: var(--ink-2); }
.options.pick li { cursor: pointer; }
.options.pick li:hover, .options.pick li:focus-visible { background: var(--glass-3); color: var(--ink); outline: 0; }
.question.decided .options li, .question.decided .options li:hover { cursor: default; background: transparent; color: var(--ink-2); }
.options .k { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; color: var(--muted); margin-top: 1px; }
.options small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; margin-top: 2px; word-break: break-word; }
.approval .card-foot { border-top: 0; padding-top: 8px; }
.approval .no { background: transparent; color: var(--muted); }
.approval .no:hover:not(:disabled) { color: var(--ink); }
.approval .done { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.approval .done svg { color: var(--ok); }
.approval.decided .options li:first-child { background: transparent; color: var(--ink-2); }
.approval.decided { opacity: .8; }

/* Result card chart */
.bars { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; align-items: end; height: 150px; padding: 8px 4px 0; margin-top: 30px; position: relative;
  background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 12px 12px; }
.bars .bar { position: relative; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom)); min-height: 3px; }
.bars .bar.none { background: var(--bar-none); }
.bars .bar span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-labels { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; padding: 6px 4px 0; font-size: 12px; color: var(--muted); text-align: center; }
.note { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }

/* Thinking: a pulsing dot and a label with a light sweeping across it */
.thinking { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 26px; }
.thinking .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); animation: pulse 1.4s ease-in-out infinite; }
.thinking .shimmer { color: transparent; background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--shine) 50%, var(--muted) 60%, var(--muted) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 1.8s linear infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.7); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .thinking .pulse, .thinking .shimmer { animation: none; } .thinking .shimmer { color: var(--muted); } }
/* Only newly added items fade in (app.js adds .enter); the screen redraws every 2 s and must not replay it. */
.enter, .thinking { animation: rise .25s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .enter, .thinking { animation: none; } }

/* Composer */
.composer { padding: 12px clamp(16px, 5vw, 64px) 18px; }
.box { max-width: 720px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: 16px; background: var(--box); padding: 10px 10px 8px 14px; transition: border-color .15s; }
.box:focus-within { border-color: var(--focus); }
textarea { width: 100%; font: inherit; font-size: 16px; line-height: 26px; color: var(--ink); resize: none; border: 0; outline: 0; padding: 3px 0; max-height: 160px; background: transparent; display: block; }
textarea::placeholder { color: var(--faint); }
.box-foot { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; line-height: 18px; color: var(--faint); margin-top: 6px; }
.attach { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; flex: none; margin-left: -6px; }
.attach:hover { color: var(--ink); background: var(--glass-2); }
.attach svg { width: 18px; height: 18px; }
.voice-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#send { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); flex: none; }
#send:disabled { background: var(--glass-3); color: var(--muted); opacity: 1; }
.attachment { margin: 0 0 8px; display: inline-flex; gap: 8px; align-items: center; background: var(--glass-2); border: 1px solid var(--line); color: var(--ink-2); border-radius: 10px; padding: 5px 6px 5px 10px; font-size: 13px; }
.attachment button { padding: 0 6px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; }

/* Voice input (same behavior as the main screen; colors for the dark panel) */
button.mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); }
button.mic:hover:not(:disabled) { background: var(--glass-2); color: var(--ink); }
button.mic:disabled { opacity: .4; cursor: not-allowed; }
button.mic:is([data-state=listening], [data-state=starting]) { border: 1px solid var(--line-2); background: var(--glass-2); }
.box-foot.dictating { gap: 10px; }
.voice-wave { flex: 0 1 270px; margin-left: auto; min-width: 0; height: 24px; display: block; color: var(--muted); }
button.dictate-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); }
button.dictate-btn:hover { background: var(--glass-2); }
.dictating .voice-wave, .dictating button.dictate-btn { transition: opacity .15s ease-out, transform .15s ease-out; }
@starting-style { .dictating .voice-wave, .dictating button.dictate-btn { opacity: 0; transform: scale(.92); } }
.mic-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Side panels */
.side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.panel { padding: 16px 18px; }
.panel.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel.grow > h2, .panel.grow > .side-switch, .panel.grow > .lin-key { flex: none; }
/* The list scrolls; the heading or switch above it stays in place. */
.panel.grow > .timeline, .panel.grow > .lineage { flex: 1; min-height: 0; overflow-y: auto; scrollbar-color: var(--glass-3) transparent; margin-right: -10px; padding-right: 10px; }
.panel h2 { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); margin: 0 0 12px; }
.files { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.files a { display: flex; gap: 10px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.files a:hover { background: var(--glass-2); }
.files b { display: block; font-weight: 400; font-size: 14px; line-height: 20px; }
.files small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.ficon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; color: var(--ok); background: var(--file-bg); border: 1px solid var(--file-line); flex: none; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; align-content: start; grid-auto-rows: max-content; }
.timeline li { position: relative; padding: 0 0 14px 20px; font-size: 14px; line-height: 20px; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.timeline li::after { content: ""; position: absolute; left: 6px; top: 17px; bottom: 2px; width: 1px; background: var(--line-2); }
.timeline li:last-child::after { display: none; }
.timeline li b { display: block; font-weight: 600; color: var(--ink); }
.timeline li span { color: var(--muted); font-size: 13px; line-height: 18px; }
.timeline li.task::before { background: var(--warn); } .timeline li.result::before { background: var(--ok); }
.timeline li.answer::before, .timeline li.confirm::before, .timeline li.confirm_request::before { background: var(--violet); }
.timeline .empty { padding: 0; color: var(--muted); }
.timeline .empty::before, .timeline .empty::after { display: none; }
.credits { margin: 8px 0 0; color: var(--faint); font-size: 12px; line-height: 16px; }

@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; padding: 0 16px 16px; }
  .side { display: none; }
  .top { padding: 12px 16px; }
}

/* Theme toggle in the header */
.top-actions { display: flex; align-items: center; gap: 8px; }
button.theme { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
button.theme:hover { background: var(--glass-2); color: var(--ink); }
button.theme .sun { display: none; } :root[data-theme="light"] button.theme .sun { display: block; } :root[data-theme="light"] button.theme .moon { display: none; }

/* Accepted transactions card: the import service's own rows, one table; rows past ten show with "Show all" */
table.rows { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
table.rows th { text-align: left; font-weight: 600; color: var(--muted); padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule-strong); }
table.rows td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-faint); color: var(--ink); white-space: nowrap; }
table.rows .num { text-align: right; font-variant-numeric: tabular-nums; }
table.rows th:last-child, table.rows td:last-child { padding-right: 0; }
table.rows tr.extra { display: none; }
.card.accepted.open tr.extra { display: table-row; }
.card.accepted .rows-wrap { overflow-x: auto; }
.card.accepted.open .rows-wrap { max-height: 380px; overflow-y: auto; }
.card.accepted .src { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.card.accepted .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card.accepted button.more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.card.accepted button.more:hover { color: var(--ink); }
@media (max-width: 480px) {
  table.rows { font-size: 13px; }
  table.rows th, table.rows td { padding-right: 6px; }
}

/* Settings drawer: a quiet sliders button at the end of the header opens a glass panel from the right. Esc, the close
   button or a click outside closes it. Holds the files to download before a session, the theme and product details. */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(4,4,10,.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
:root[data-theme="light"] .scrim { background: rgba(20,20,40,.14); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 41; top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column;
  border-radius: 20px; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--drawer-a), var(--drawer-b));
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(28px) saturate(140%);
  transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s; }
.drawer.open { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
:root { --drawer-a: rgba(28,28,38,.82); --drawer-b: rgba(18,18,26,.9); }
:root[data-theme="light"] { --drawer-a: rgba(255,255,255,.9); --drawer-b: rgba(248,248,251,.94); }
:root[data-theme="light"] .drawer { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 30px 80px rgba(20,20,40,.16); }
.d-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px 22px; border-bottom: 1px solid var(--line); }
.d-head h2 { flex: 1; margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
kbd.d-esc { font: 500 11px/1 var(--mono); color: var(--faint); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 6px; }
button.d-close { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--muted); border-radius: 9px; }
button.d-close:hover { background: var(--glass-2); color: var(--ink); }
.d-body { flex: 1; overflow-y: auto; padding: 6px 22px 22px; }
.d-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.d-sec:last-child { border-bottom: 0; }
.d-sec h3 { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.d-rows { margin: 0; display: grid; gap: 10px; }
.d-rows div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; }
.d-rows dt { color: var(--muted); } .d-rows dd { margin: 0; color: var(--ink); text-align: right; }
.d-files { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.d-files li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.d-files li:hover { background: var(--glass-2); }
.d-file { flex: 1; min-width: 0; }
.d-file b { display: block; font-weight: 500; font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-file small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
a.d-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--ink-2); border: 1px solid var(--line-2); }
a.d-icon:hover { color: var(--ink); background: var(--glass-3); }
.d-note { margin: 12px 0 0; color: var(--faint); font-size: 13px; line-height: 18px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--well); border: 1px solid var(--line); }
.seg button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--glass-3); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
:root[data-theme="light"] .seg button[aria-checked="true"] { background: #fff; }
.drawer :focus-visible, #settings:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button#settings[aria-expanded="true"] { background: var(--glass-2); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer.open, .scrim { transition: none; } }
@media (max-width: 480px) { .drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); } }
/* On a phone the header keeps New conversation and Settings; the theme switch lives in Settings. */
@media (max-width: 480px) { button#theme { display: none; } button#new-chat { white-space: nowrap; } }

/* Automations in Kognitos (Settings): one compact row each, in the order the study uses them; the row opens it in Kognitos */
.d-autos { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.d-autos a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; padding: 9px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.d-autos a:hover { background: var(--glass-2); }
.d-step { font: 500 11px/20px var(--mono); color: var(--faint); }
.d-name { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 500; }
.d-name .ext { color: var(--faint); transition: transform .15s ease, color .15s ease; }
.d-autos a:hover .ext { color: var(--ink); transform: translate(1px, -1px); }
.d-auto small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; margin-top: 1px; }
.d-tag { font-size: 11px; line-height: 16px; margin-top: 2px; padding: 1px 7px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line-2); white-space: nowrap; }

/* Guide link (Settings, About): opens the explainer in a new tab */
a.d-guide { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: var(--glass); }
a.d-guide:hover { background: var(--glass-2); }
a.d-guide:hover .ext { color: var(--ink); transform: translate(1px, -1px); }
.d-guide-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--violet); background: var(--glass-2); border: 1px solid var(--line-2); }

/* Study plan: one card per study, built from what the automation reports. Pinned to the top of the chat while the
   study runs; folds to its header once you scroll past it. Steps tick as they finish; the current one pulses (amber
   when it waits for you). */
:root { --plan-solid: #191921; } :root[data-theme="light"] { --plan-solid: #fcfcfe; }
.plan { position: relative; border-radius: 16px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--drawer-a), var(--drawer-b)); backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
:root[data-theme="light"] .plan { box-shadow: 0 8px 24px rgba(20,20,40,.08); }
.plan.finished { box-shadow: none; }

.plan-head { width: 100%; display: grid; grid-template-columns: 22px minmax(0,1fr) auto 18px; align-items: center; gap: 10px; padding: 12px 14px; background: none; border-radius: 16px; text-align: left; font-weight: 400; color: var(--ink); }
.plan-head b { display: block; font-size: 14px; font-weight: 600; line-height: 20px; }
.plan-head .now { display: block; font-size: 13px; color: var(--muted); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-head .count { font: 500 12px/1 var(--mono); color: var(--faint); }
.plan-head .chev { color: var(--faint); transition: transform .2s ease; }
.plan.folded .plan-head .chev { transform: rotate(-90deg); }
.plan .ring, .dock .ring { width: 20px; height: 20px; flex: none; }
.plan .ring circle, .dock .ring circle { fill: none; stroke-width: 2.5; }
.plan .ring .bg, .dock .ring .bg { stroke: var(--line-2); } .plan .ring .fg, .dock .ring .fg { stroke: var(--violet); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .5s ease; }
.plan-done { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: var(--on-ink); }
.plan ol { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 2px; }
.plan.folded ol { display: none; }
.plan li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; padding: 5px 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.plan li small { display: block; color: var(--faint); font-size: 12.5px; line-height: 18px; }
.plan li.done { color: var(--ink-2); } .plan li.now-step { color: var(--ink); }
.plan .chk, .dock .chk { width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.plan .done .chk, .dock .done .chk { background: var(--ok); border-color: var(--ok); color: var(--on-ink); }
:root[data-theme="light"] .plan .done .chk, :root[data-theme="light"] .dock .done .chk, :root[data-theme="light"] .plan-done { color: #fff; }
.plan .now-step .chk, .dock .now-step .chk { border-color: var(--violet); }
.plan .now-step .chk::after, .dock .now-step .chk::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); animation: pulse 1.4s ease-in-out infinite; }
.plan .now-step.waiting .chk, .dock .now-step.waiting .chk { border-color: var(--warn); } .plan .now-step.waiting .chk::after, .dock .now-step.waiting .chk::after { background: var(--warn); animation: none; }
.plan .label.shimmer, .dock .label.shimmer, .activity .shimmer { color: transparent; background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--shine) 50%, var(--muted) 60%, var(--muted) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 1.8s linear infinite; }

/* Work between two real replies, folded into one line ("Worked for 24s"); live while it runs. */
.activity { color: var(--muted); }
.act-head { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; background: none; border-radius: 0; font-size: 14px; line-height: 22px; color: var(--muted); font-weight: 400; }
.act-head:hover { color: var(--ink); }
.act-head .chev { transition: transform .2s ease; }
.activity.open .act-head .chev { transform: rotate(90deg); }
.activity .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); animation: pulse 1.4s ease-in-out infinite; }
.activity .secs { color: var(--faint); font-variant-numeric: tabular-nums; }
.act-body { display: none; list-style: none; margin: 8px 0 2px 6px; padding: 0 0 0 16px; border-left: 1px solid var(--line-2); }
.activity.open .act-body { display: block; }
.act-body li { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.act-body .ic { color: var(--faint); } .act-body .ic.ok { color: var(--ok); }
.act-body .t { font: 12px/20px var(--mono); color: var(--faint); }
.act-body .said { color: var(--muted); }
.act-body .who { font: 500 10.5px/16px var(--mono); letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--faint); margin-right: 6px; vertical-align: 1px; }
.messages { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
@media (prefers-reduced-motion: reduce) { .plan .now-step .chk::after, .activity .pulse, .activity .shimmer, .plan .label.shimmer { animation: none; } .activity .shimmer, .plan .label.shimmer { color: var(--muted); } }

/* Docked plan: one line between the conversation and the message box while a study runs; opens upward over the
   conversation, so it never changes the conversation's layout. */
.dock { position: relative; max-width: 720px; margin: 0 auto 8px; }
.dock-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--plan-solid); cursor: pointer; font-size: 13px; line-height: 18px; color: var(--muted); user-select: none; }
.dock-bar:hover { border-color: var(--rule-strong); }
.dock-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dock-count { font: 500 12px/18px var(--mono); color: var(--faint); flex: none; }
.dock-now { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-now b { color: var(--ink); font-weight: 500; }
.dock-now.waiting b { color: var(--warn); }
.dock-bar .chev { color: var(--faint); flex: none; transition: transform .2s ease; }
.dock.open .dock-bar .chev { transform: rotate(180deg); }
.dock-panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 6; padding: 12px 14px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--plan-solid);
  box-shadow: 0 -10px 40px rgba(0,0,0,.35); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
:root[data-theme="light"] .dock-panel { box-shadow: 0 -8px 30px rgba(20,20,40,.12); }
.dock.open .dock-panel { opacity: 1; transform: none; pointer-events: auto; }
.dock-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); margin: 0 0 6px; }
.dock ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dock li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; padding: 5px 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.dock li small { display: block; color: var(--faint); font-size: 12.5px; line-height: 18px; }
.dock li.done { color: var(--ink-2); } .dock li.now-step { color: var(--ink); }
.dock.ticked .dock-bar { animation: tick .9s ease; }
@keyframes tick { 0% { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dock-panel { transition: none; } .dock.ticked .dock-bar { animation: none; } }

/* Approval cards: exactly what will be sent. A one-line summary, then the rows (five shown; "Show all" opens the rest
   inside the card with its own scroll), what stays open, and what happens next. */
.approval-body { padding: 0 16px; }
.approval .sec { padding: 4px 0 12px; }
.approval .sec + .sec { border-top: 1px solid var(--line); padding-top: 12px; }
.approval .sum { font-size: 13px; line-height: 18px; color: var(--muted); margin-bottom: 8px; }
.approval .sum .why { color: var(--ink-2); }
.approval table.rows td { vertical-align: top; white-space: normal; }
.approval table.rows td:first-child { white-space: nowrap; }
.approval .chg { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-right: 12px; }
.approval .chg .f { color: var(--faint); font-size: 12px; }
.approval .chg .arr { color: var(--faint); }
.approval .chg b { font-weight: 500; color: var(--ok); }
.approval .blank { color: var(--faint); font-style: italic; }
.approval .sec.open tr.extra { display: table-row; }
.approval .sec.open .rows-wrap { max-height: 300px; overflow-y: auto; }
.approval button.more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.approval button.more:hover { color: var(--ink); }
.approval .stays { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.approval .stays .lbl { font-size: 13px; color: var(--warn); margin-right: 4px; }
.approval .pill { font-size: 12.5px; line-height: 18px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.approval .pill i { font-style: normal; color: var(--muted); }
.approval .next { margin: 0; padding: 0 0 4px; font-size: 13px; line-height: 19px; color: var(--muted); }
.approval .reasons li span:last-child { color: var(--ink-2); text-align: right; }
.approval .card-foot button { white-space: nowrap; }
@media (max-width: 480px) { .approval .card-foot { flex-direction: column-reverse; align-items: stretch; } .approval .card-foot button { width: 100%; } }

/* "Updated · Reload": shown after a new release when the message box isn't empty (otherwise the tab reloads itself). */
.updated { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 50; padding: 8px 16px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; border: 1px solid rgba(127,127,127,.35); background: #111; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* ---- Trace view (Settings → Answer sources): conversation on the left, automation runs on the right ---------------- */
:root { --src-auto: rgba(111,211,160,.18); --src-auto-ink: #8fe3b8; --src-file: rgba(122,170,255,.18); --src-file-ink: #a9c6ff; --src-you: rgba(242,189,107,.18); --src-you-ink: #f5cd8c; }
:root[data-theme="light"] { --src-auto: rgba(31,138,85,.13); --src-auto-ink: #146a40; --src-file: rgba(47,111,214,.12); --src-file-ink: #1f56ad; --src-you: rgba(178,107,0,.13); --src-you-ink: #8a5200; }
/* Not traced: a value nothing the assistant received holds. Outlined, not filled, so it never reads as sourced. */
:root { --src-none-ink: #ff9a8f; --src-none-line: rgba(255,154,143,.55); }
:root[data-theme="light"] { --src-none-ink: #b42318; --src-none-line: rgba(180,35,24,.5); }
/* The rest of a reply: wording that follows the assistant's instructions, numbers worked out, and its own words. */
:root { --src-instr: rgba(184,160,255,.18); --src-instr-ink: #cdbdff; --src-worked: rgba(94,214,230,.16); --src-worked-ink: #8ee3ef; --src-own: rgba(255,255,255,.11); --src-own-ink: #f1f1f5; }
:root { --src-calc: rgba(240,140,255,.17); --src-calc-ink: #f2a6ff; }
:root[data-theme="light"] { --src-calc: rgba(155,31,174,.11); --src-calc-ink: #8a1a9c; }
:root[data-theme="light"] { --src-instr: rgba(108,72,214,.11); --src-instr-ink: #5b3cc4; --src-worked: rgba(0,128,150,.11); --src-worked-ink: #036b7d; --src-own: rgba(20,20,40,.08); --src-own-ink: #2a2a36; }
body.tracing .main { grid-template-columns: minmax(0, 1fr); }
body.tracing .side { display: none; }
.messages.trace { display: grid; grid-template-columns: minmax(0, 720px) 340px; grid-auto-rows: max-content; justify-content: center; column-gap: 28px; row-gap: 18px; align-content: start; }
/* max-content rows: once the conversation is taller than the panel, auto rows shrink cards that clip (overflow: hidden) to 0 and they overlap the next item. */
.messages.trace > * { grid-column: 1; align-self: start; max-width: 720px; }
.messages.trace > .rec, .messages.trace > .rec-stack { grid-column: 2; width: 100%; max-width: 340px; margin: 0; }
.rec-stack { display: flex; flex-direction: column; gap: 10px; }
.rec-stack > .rec + .rec::before { display: none; }
.messages.trace > .trace-legend { grid-column: 1 / -1; max-width: none; }
.trace-legend { padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); font-size: 13px; line-height: 18px; color: var(--muted); }
.trace-legend p { margin: 0; }
.trace-legend p + p { margin-top: 8px; }
.trace-legend b { color: var(--ink-2); font-weight: 600; }
.trace-legend .keys { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.trace-legend .keys span { display: inline-flex; align-items: center; gap: 6px; }
.trace-legend .note { color: var(--faint); }
.matched { font-size: 11px; line-height: 16px; padding: 0 7px; border-radius: 999px; border: 1px dashed var(--line-2); color: var(--muted); flex: none; }
.rec.waiting { border-style: dashed; background: transparent; }
.rec.waiting .rec-icon { background: var(--glass-3); color: var(--muted); }
.rec summary { list-style: none; }
.rec summary::-webkit-details-marker { display: none; }
.rec summary::before { content: "▸"; display: inline-block; margin-right: 5px; transition: transform .15s ease; }
.rec details[open] summary::before { transform: rotate(90deg); }
.trace-legend i { font-style: normal; }
.src { border-radius: 5px; padding: 0 3px; margin: 0 -1px; font-weight: 500; text-decoration: none; }
.src.auto { background: var(--src-auto); color: var(--src-auto-ink); }
a.src.auto { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.src.auto:hover { text-decoration-style: solid; }
.src.file { background: var(--src-file); color: var(--src-file-ink); }
.src.you { background: var(--src-you); color: var(--src-you-ink); }
.src.worked { background: var(--src-worked); color: var(--src-worked-ink); }
.src.none { background: transparent; color: var(--src-none-ink); box-shadow: inset 0 0 0 1px var(--src-none-line); border-radius: 5px; }
mark.src.none { text-decoration: none; }
.msg.agent .from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-size: 12px; line-height: 18px; color: var(--muted); }
.msg.agent .from svg { color: var(--ok); flex: none; }
.msg.agent .from b { color: var(--ink-2); font-weight: 600; }
.msg.agent .from .count { flex-basis: 100%; color: var(--ink-2); }
.msg.agent.status { color: var(--muted); font-size: 14px; line-height: 22px; }
.tstep { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 20px; color: var(--muted); }
.tstep .ic { width: 14px; flex: none; text-align: center; color: var(--ok); }
.rec { border: 1px solid var(--line-2); border-radius: 14px; background: var(--glass-2); padding: 10px 12px 10px; font-size: 13px; line-height: 19px; color: var(--ink-2); position: relative; }
.rec::before { content: ""; position: absolute; left: -22px; top: 18px; width: 16px; border-top: 1px dashed var(--line-2); }
.rec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rec-head b { color: var(--ink); font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--src-auto); color: var(--src-auto-ink); flex: none; }
.run-state { margin-left: auto; flex: none; font-size: 11px; line-height: 16px; padding: 1px 8px; border-radius: 999px; background: var(--glass-3); color: var(--ink-2); }
.run-state.s-completed { background: var(--src-auto); color: var(--src-auto-ink); }
.run-state.s-executing, .run-state.s-pending { background: rgba(167,161,255,.18); color: var(--violet); }
.run-state.s-failed, .run-state.s-awaiting_guidance, .run-state.s-stopped { background: var(--src-you); color: var(--src-you-ink); }
.rec p { margin: 0; }
.rec-what b { color: var(--ink); font-weight: 600; }
.rec-sum { color: var(--muted); margin-top: 2px !important; overflow-wrap: anywhere; }
.rec-note { color: var(--faint); font-size: 12px; margin-top: 6px !important; }
.rec-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.run-link { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink); font-size: 12px; line-height: 18px; text-decoration: none; }
.run-link:hover { border-color: var(--violet-2); background: var(--glass-3); }
.run-link code { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.from .run-link { padding: 0 7px; }
.rec details { display: contents; }
.rec details summary { display: inline-block; padding: 3px 4px; }
.rec details[open] pre { flex-basis: 100%; }
.rec summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.rec pre { margin: 6px 0 0; max-height: 220px; overflow: auto; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--ink-2); background: var(--glass); border: 1px solid var(--line); border-radius: 8px; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .messages.trace { grid-template-columns: minmax(0, 720px); }
  .messages.trace > .rec, .messages.trace > .rec-stack { grid-column: 1; max-width: 560px; margin-left: 28px; }
  .rec::before { left: -18px; width: 12px; }
}
@media (max-width: 480px) { .messages.trace > .rec, .messages.trace > .rec-stack { margin-left: 12px; } .rec::before { display: none; } }
.rec details .when-open, .rec details[open] .when-closed { display: none; }
.rec details[open] .when-open { display: inline; }

/* ---- Lineage tree (Settings → Answer sources → In the side panel; side panel → Lineage) ---------------------------- */
.side-switch { margin: -2px 0 14px; }
.side-switch button { font-size: 13px; }
.side-switch button[aria-selected="true"] { background: var(--glass-3); color: var(--ink); }
:root[data-theme="light"] .side-switch button[aria-selected="true"] { background: #fff; }
.lin-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; font-size: 12px; line-height: 16px; color: var(--muted); }
.lin-key span { display: inline-flex; align-items: center; gap: 5px; }
.lin-key .k, .lin-icon.file, .lin-icon.you, .lin-icon.own { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.lin-key .k.auto { background: var(--src-auto-ink); } .lin-key .k.file, .lin-icon.file { background: var(--src-file-ink); } .lin-key .k.you, .lin-icon.you { background: var(--src-you-ink); }
.lin-icon.own { background: var(--line-2); }
.lin-note, .lin-empty { margin: 0 0 10px; font-size: 12px; line-height: 17px; color: var(--faint); }
.lin { list-style: none; margin: 0; padding: 0; }
.lin-node { position: relative; padding: 0 0 12px 18px; }
.lin-node::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.lin-node::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: 0; width: 1px; background: var(--line-2); }
.lin-node:last-child::after { display: none; }
.lin-node.status::before { background: var(--faint); width: 5px; height: 5px; left: 3px; top: 8px; }
.lin-head { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.lin-head:hover { background: var(--glass-2); }
.lin-head:focus-visible, .lin-row:focus-visible, .lin-said-btn:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 1px; }
.lin-from { display: block; font-size: 12px; line-height: 17px; color: var(--muted); }
.lin-from b { color: var(--ink-2); font-weight: 600; }
.lin-said { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--ink); margin-top: 1px; }
.lin-node.status .lin-from { color: var(--faint); }
.lin-kids { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.lin-kid { position: relative; padding-left: 12px; }
.lin-kid::before { content: ""; position: absolute; left: 0; top: 0; height: 13px; width: 8px; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-bottom-left-radius: 5px; }
.lin-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12px; line-height: 17px; color: var(--ink-2); padding: 2px 4px; margin: 0 -4px; border-radius: 7px; cursor: pointer; }
.lin-row.static { cursor: default; }
.lin-row:not(.static):hover { background: var(--glass-2); }
.lin-row .chev { color: var(--faint); flex: none; transition: transform .15s ease; }
.lin-kid.open .lin-row .chev { transform: rotate(90deg); }
.lin-icon.auto { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--src-auto); color: var(--src-auto-ink); flex: none; }
.lin-icon.auto svg { width: 10px; height: 10px; }
.lin-what { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-row.static .lin-what { white-space: normal; color: var(--muted); }
.lin-what b { color: var(--ink); font-weight: 600; }
.lin-n { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lin-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 1px 0 0 34px; font-size: 12px; line-height: 17px; color: var(--muted); }
.lin-rec { min-width: 0; }
.lin-meta .run-link { padding: 1px 7px; font-size: 11px; }
.lin-vals { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px 34px; max-height: 160px; overflow: auto; }
.lin-vals .src { font-size: 11px; line-height: 16px; padding: 0 5px; margin: 0; }
.lin-status { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lin-said-btn { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; font-size: 12px; line-height: 17px; color: var(--muted); padding: 2px 4px; margin: 0 -4px; border-radius: 7px; }
.lin-said-btn:hover { background: var(--glass-2); color: var(--ink-2); }
/* A reply picked from the tree flashes in the chat. */
.flash { animation: flash 1.8s ease-out; border-radius: 12px; }
@keyframes flash { 0%, 35% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--violet) 30%, transparent); background: color-mix(in srgb, var(--violet) 10%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; outline: 2px solid var(--violet-2); outline-offset: 6px; } }
.seg[aria-label="Answer sources"] { grid-template-columns: repeat(3, 1fr); }
.seg[aria-label="Answer sources"] button { font-size: 13px; line-height: 16px; text-align: center; padding: 8px 6px; }
.lin-run { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 16px; color: var(--violet); text-decoration: none; border-bottom: 1px dotted currentColor; }
.lin-run:hover { border-bottom-style: solid; }
.lin-run:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; border-radius: 3px; }
#lineage-key { gap: 3px 10px; font-size: 11px; margin-bottom: 12px; }

/* Lineage tree, second pass: plain summary, run details, values with their fields, how a reply came about, the intro. */
.lin-key .k.none, .lin-intro .k.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--src-none-ink); }
.lin-intro .k.auto { background: var(--src-auto-ink); } .lin-intro .k.file { background: var(--src-file-ink); } .lin-intro .k.you { background: var(--src-you-ink); }
.lin-tools { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.lin-tool { font: inherit; font-size: 11.5px; line-height: 16px; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink-2); cursor: pointer; }
.lin-tool:hover:not(:disabled) { background: var(--glass-3); color: var(--ink); }
.lin-tool:disabled { opacity: .45; cursor: default; }
/* The key's sources are switches: off is an outlined chip; on takes the same color its values get in the chat. */
.lin-show { width: 100%; color: var(--muted); }
.lin-sw { font: inherit; font-size: 11.5px; line-height: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.lin-sw:hover { background: var(--glass-3); color: var(--ink); }
.lin-sw[aria-pressed="true"].auto { background: var(--src-auto); color: var(--src-auto-ink); border-color: color-mix(in srgb, var(--src-auto-ink) 45%, transparent); }
.lin-sw[aria-pressed="true"].file { background: var(--src-file); color: var(--src-file-ink); border-color: color-mix(in srgb, var(--src-file-ink) 45%, transparent); }
.lin-sw[aria-pressed="true"].you { background: var(--src-you); color: var(--src-you-ink); border-color: color-mix(in srgb, var(--src-you-ink) 45%, transparent); }
.lin-sw[aria-pressed="true"].none { background: color-mix(in srgb, var(--src-none-ink) 14%, transparent); color: var(--src-none-ink); border-color: var(--src-none-line); }
.lin-sw[aria-pressed="true"].instr { background: var(--src-instr); color: var(--src-instr-ink); border-color: color-mix(in srgb, var(--src-instr-ink) 45%, transparent); }
.lin-sw[aria-pressed="true"].worked { background: var(--src-worked); color: var(--src-worked-ink); border-color: color-mix(in srgb, var(--src-worked-ink) 45%, transparent); }
.lin-sw[aria-pressed="true"].own { background: var(--src-own); color: var(--src-own-ink); border-color: color-mix(in srgb, var(--src-own-ink) 35%, transparent); }
.lin-key .k.instr, .lin-pop .k.instr { background: var(--src-instr-ink); } .lin-key .k.worked, .lin-pop .k.worked { background: var(--src-worked-ink); }
.lin-key .k.own, .lin-pop .k.own { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.lin-show .lin-link { font: inherit; background: none; border: 0; padding: 0 2px; margin-left: 6px; color: var(--violet-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lin-show .lin-link:hover { color: var(--ink); }
.lin-hint { font-size: 11px; line-height: 15px; }
.lin-icon.worked { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--src-worked); color: var(--src-worked-ink); font-size: 9.5px; font-weight: 700; flex: none; margin: 0 1px; }
.lin-kid.worked .lin-what { color: var(--src-worked-ink); }
.lin-vals .src.worked, .lin-val .src.worked { background: var(--src-worked); color: var(--src-worked-ink); }
/* Where a clicked part of a reply came from. */
.lin-pop { position: fixed; z-index: 30; width: min(360px, calc(100vw - 16px)); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--plan-solid); box-shadow: 0 12px 36px rgba(0,0,0,.35); font-size: 13px; line-height: 19px; color: var(--ink-2); }
:root[data-theme="light"] .lin-pop { box-shadow: 0 12px 32px rgba(20,20,40,.14); }
.lin-pop:focus { outline: none; }
.lin-pop p { margin: 0 0 8px; } .lin-pop b { color: var(--ink); font-weight: 600; }
.lin-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lin-pop-head .k { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lin-pop .k.auto { background: var(--src-auto-ink); } .lin-pop .k.file { background: var(--src-file-ink); } .lin-pop .k.you { background: var(--src-you-ink); }
.lin-pop .k.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--src-none-ink); }
.lin-pop-x { margin-left: auto; font: inherit; font-size: 18px; line-height: 18px; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.lin-pop-x:hover { background: var(--glass-3); color: var(--ink); }
.lin-pop-x:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 1px; }
.lin-pop-q { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.lin-pop blockquote { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--glass); color: var(--ink); overflow-wrap: anywhere; }
.lin-sw[aria-pressed="true"] { font-weight: 600; }
::highlight(lin-auto) { background-color: var(--src-auto); color: var(--src-auto-ink); }
::highlight(lin-file) { background-color: var(--src-file); color: var(--src-file-ink); }
::highlight(lin-you) { background-color: var(--src-you); color: var(--src-you-ink); }
::highlight(lin-auto-re) { color: var(--src-auto-ink); text-decoration: underline 2px var(--src-auto-ink); text-underline-offset: 4px; }
::highlight(lin-file-re) { color: var(--src-file-ink); text-decoration: underline 2px var(--src-file-ink); text-underline-offset: 4px; }
::highlight(lin-you-re) { color: var(--src-you-ink); text-decoration: underline 2px var(--src-you-ink); text-underline-offset: 4px; }
::highlight(lin-instr-re) { color: var(--src-instr-ink); text-decoration: underline 2px var(--src-instr-ink); text-underline-offset: 4px; }
::highlight(lin-worked) { background-color: var(--src-worked); color: var(--src-worked-ink); }
::highlight(lin-calc) { background-color: var(--src-calc); color: var(--src-calc-ink); }
::highlight(lin-sel-calc) { background-color: color-mix(in srgb, var(--src-calc-ink) 30%, transparent); color: var(--src-calc-ink); text-decoration: underline 2px var(--src-calc-ink); text-underline-offset: 3px; }
::highlight(lin-own) { background-color: var(--src-own); color: var(--src-own-ink); }
::highlight(lin-sel) { background-color: color-mix(in srgb, var(--violet) 40%, transparent); color: var(--ink); }
::highlight(lin-none) { background-color: color-mix(in srgb, var(--src-none-ink) 14%, transparent); color: var(--src-none-ink); text-decoration: underline 1.5px var(--src-none-ink); text-underline-offset: 3px; }
.lin-sw:focus-visible, .lin-tool:focus-visible, .lin-runbtn:focus-visible, .lin-val:focus-visible, .lin-howbtn:focus-visible, .lin-introbtn:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 1px; }
.lin-sum { margin: 4px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.lin-icon.none { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--src-none-ink); color: var(--src-none-ink); font-size: 9.5px; font-weight: 700; line-height: 1; flex: none; margin: 0 1px; }
.lin-kid.none .lin-what { color: var(--src-none-ink); }
.lin-runbtn { all: unset; cursor: pointer; font-size: 11px; line-height: 16px; color: var(--ink-2); border-bottom: 1px dotted currentColor; }
.lin-runbtn:hover { color: var(--ink); border-bottom-style: solid; }
.lin-runbox { margin: 6px 0 4px 34px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--glass); font-size: 11.5px; line-height: 16px; color: var(--ink-2); }
.lin-runbox p { margin: 0 0 4px; } .lin-runbox .rb-head { display: flex; align-items: center; gap: 6px; }
.lin-runbox .rb-head b { color: var(--ink); font-weight: 600; } .lin-runbox .run-state { margin-left: auto; font-size: 10.5px; padding: 0 7px; }
.lin-runbox .rb-h { margin: 6px 0 2px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.lin-runbox dl { margin: 0; display: grid; gap: 2px; } .lin-runbox dl div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px; }
.lin-runbox dt { color: var(--muted); } .lin-runbox dd { margin: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.lin-runbox .rb-id code { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.lin-runbox .rb-open { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 4px 0 0; } .lin-runbox .rb-open span { color: var(--faint); }
.lin-runbox .rb-err { color: var(--error); }
.lin-vals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; list-style: none; margin: 4px 0 2px 34px; padding: 0; max-height: 220px; overflow: auto; }
.lin-vals[hidden] { display: none; }
.lin-val { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 2px 4px; margin: 0 -4px; border-radius: 6px; cursor: pointer; font-size: 11.5px; line-height: 16px; }
.lin-val:hover { background: var(--glass-2); }
.lin-val .src { flex: none; font-size: 11px; line-height: 16px; padding: 0 5px; margin: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-field { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-kid.worked .lin-field { white-space: normal; overflow-wrap: anywhere; } /* the working is the point: show all of it */
.lin-how { margin: 4px 0 0; }
.lin-howbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11.5px; line-height: 16px; color: var(--muted); padding: 1px 4px; margin: 0 -4px; border-radius: 6px; }
.lin-howbtn:hover { background: var(--glass-2); color: var(--ink-2); }
.lin-howbtn .chev { color: var(--faint); transition: transform .15s ease; } .lin-how.open .lin-howbtn .chev { transform: rotate(90deg); }
.lin-steps { list-style: none; margin: 4px 0 0 4px; padding: 0 0 0 10px; border-left: 1px solid var(--line-2); display: grid; gap: 3px; }
.lin-steps li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px; font-size: 11.5px; line-height: 16px; color: var(--ink-2); }
.lin-steps .t { color: var(--faint); font-variant-numeric: tabular-nums; } .lin-steps b { color: var(--ink); font-weight: 600; }
.lin-steps code { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.lin-tz { margin: 3px 0 0 14px; font-size: 10.5px; line-height: 14px; color: var(--faint); }
.lin-intro { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--glass-2); font-size: 12px; line-height: 17px; color: var(--ink-2); }
.lin-intro p { margin: 0 0 6px; } .lin-intro .it { font-weight: 600; color: var(--ink); font-size: 13px; }
.lin-intro ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.lin-intro li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 6px; align-items: start; }
.lin-intro .k { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-top: 4px; }
.lin-intro b { color: var(--ink); font-weight: 600; } .lin-intro .ex { color: var(--ink-2); } .lin-intro .src { font-size: 11px; padding: 0 4px; }
.lin-introbtn { font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--glass-3); color: var(--ink); cursor: pointer; }
.lin-introbtn:hover { border-color: var(--violet-2); }
/* A value picked in the tree, highlighted in the chat; a value picked in the chat, flashed in the tree. */
::highlight(lin-hit) { background-color: color-mix(in srgb, var(--violet) 38%, transparent); color: var(--ink); }

/* Washington study result: liability table and every state's status */
.result table.wa { width: 100%; margin: 14px 0 6px; border-collapse: collapse; font-size: 14px; }
.result table.wa td { padding: 7px 2px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.result table.wa td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.result table.wa tr.tot td { color: var(--ink); font-weight: 600; }
.state-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.state-list li { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: var(--well); font-size: 13px; color: var(--muted); }
.state-list li b { color: var(--ink); min-width: 22px; }
.state-list li.st-exp b { color: var(--warn); }
.state-list li.st-app b { color: var(--violet); }
.state-list li.st-nt b, .state-list li.st-rem b { color: var(--ok); }
.result table.wa td { white-space: normal; }
.result table.wa td.num { white-space: nowrap; padding-left: 12px; }
/* A calculated figure opens its breakdown in the Calculations view (11-02-2026). */
.result table.wa tr.card-calc { cursor: pointer; }
.result table.wa tr.card-calc td.num { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.result table.wa tr.card-calc:hover td, .result table.wa tr.card-calc:focus-visible td { background: var(--line); }
.result table.wa tr.card-calc:focus-visible { outline: none; }

/* Report card: the finished study's files */
.r-files { list-style: none; margin: 4px 0 0; padding: 0; }
.r-files li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.r-files li:last-child { border-bottom: 0; }
.r-files .ficon { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 4px 6px; border-radius: 6px; background: var(--file-bg); border: 1px solid var(--file-line); color: var(--ok); }
.r-file { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-file b { color: var(--ink); font-size: 14px; font-weight: 600; }
.r-file small { color: var(--muted); font-size: 12px; line-height: 17px; }
.r-dl { flex: none; display: inline-flex; padding: 8px; border-radius: 10px; color: var(--ink-2); border: 1px solid var(--line-2); }
.r-dl:hover { color: var(--ink); background: var(--glass-2); }
.foot-link { margin: 10px 0 0; font-size: 13px; }
.foot-link a { color: var(--violet); }
.r-files .ficon { min-width: 40px; text-align: center; box-sizing: border-box; }

/* Approval press: the button shows the work it started */
.approval .yes.busy { display: inline-flex; align-items: center; gap: 8px; opacity: 1; cursor: progress; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
.thinking .secs { color: var(--faint); margin-left: 4px; font-variant-numeric: tabular-nums; }
/* Fix card: a long change wraps inside its cell instead of being cut off */
.approval .chg { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.approval td { overflow-wrap: anywhere; }

/* Each state's saved finding, in full */
.state-list { grid-template-columns: 1fr; }
.state-list li { align-items: flex-start; }
.state-list li > span { display: flex; flex-direction: column; gap: 2px; }
.state-list li .st-status { color: var(--ink-2); }
.state-list li small { color: var(--muted); font-size: 12.5px; line-height: 18px; }

/* Exposure table and state detail card (Commenda's exposure view) */
.result table.expo { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.result table.expo th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.result table.expo td { padding: 9px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.result table.expo td b { color: var(--ink); font-weight: 600; }
.result table.expo .num { text-align: right; font-variant-numeric: tabular-nums; }
.expo-row { cursor: pointer; }
.expo-row:hover td, .expo-row.open td { background: var(--glass-2); }
.expo-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.st-pill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--glass-3); color: var(--ink-2); }
.st-pill.st-exp { background: rgba(229, 72, 77, .16); color: #ff8a8f; }
.st-pill.st-local { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
.st-pill.st-app { background: rgba(242, 189, 107, .18); color: var(--warn); }
.st-pill.st-rem { background: rgba(111, 211, 160, .16); color: var(--ok); }
/* Light theme: darker text so every pill reads at 4.5:1 or better */
:root[data-theme="light"] .st-pill.st-exp { background: rgba(192, 57, 43, .1); color: #b42318; }
:root[data-theme="light"] .st-pill.st-local { background: rgba(109, 40, 217, .09); color: #5b21b6; }
:root[data-theme="light"] .st-pill.st-app { background: rgba(180, 83, 9, .1); color: #8a4b00; }
:root[data-theme="light"] .st-pill.st-rem { background: rgba(21, 128, 61, .1); color: #126b35; }
.expo-detail td { padding: 0 8px 12px !important; background: var(--glass-2); }
.sd { padding: 12px 6px 4px; }
.sd-rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13px; }
.sd-rows span:nth-child(odd) { color: var(--muted); }
.sd-rows span:nth-child(even) { color: var(--ink); }
.sd-bar-head { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.sd-bar-head span:first-child { color: var(--ink); }
.sd-bar { position: relative; height: 6px; border-radius: 3px; background: var(--glass-3); margin: 6px 0 2px; }
.sd-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--muted); }
.sd-bar.st-exp i { background: #e5484d; } .sd-bar.st-local i { background: #a78bfa; } .sd-bar.st-app i { background: var(--warn); } .sd-bar.st-rem i { background: var(--ok); }
.sd-bar b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); transform: translateX(-1px); }
.sd-next { margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.sd-next.st-exp { color: #ff8a8f; } :root[data-theme="light"] .sd-next.st-exp { color: #b42318; }
.sd-next.st-local { color: #c4b5fd; } .sd-next.st-app { color: var(--warn); }
:root[data-theme="light"] .sd-next.st-local { color: #5b21b6; } :root[data-theme="light"] .sd-next.st-app { color: #8a4b00; }
.sd-why { margin: 6px 0 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }
@media (max-width: 640px) { .result table.expo .c-sales, .result table.expo .c-reg { display: none; } }
.activity .act-body b { color: var(--ink); font-weight: 600; }

/* The results card holds a five-column table: it takes the conversation's full width, and the table scrolls inside it
   rather than being cut off when a phone is too narrow. */
.card.result { max-width: 720px !important; }
.result .rows-wrap { overflow-x: auto; }
.result .expo-sub { margin-top: 12px; }
/* Phone: three columns (state, status, exposure date) fit the card; long pills and the detail wrap instead of widening it. */
@media (max-width: 640px) {
  .result table.expo { font-size: 13px; }
  .result table.expo th:first-child { width: 36%; }
  .result table.expo th.c-date { width: 29%; }
  .result table.expo td, .result table.expo th { padding-inline: 3px; }
  .result table.expo td.c-date { white-space: nowrap; }
  .result table.expo .st-pill { padding: 2px 6px; font-size: 11.5px; }
  .result table.expo .st-pill.st-local { white-space: normal; }
  .sd-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
  .sd-bar-head { flex-wrap: wrap; gap: 2px 12px; }
}
/* Source card, version 2: the source's exact text above the assistant's, with differences marked in place. */
.lin-pop { width: min(420px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; }
.lp-block { margin-top: 10px; }
.lp-lab { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.lp-lab .k { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.lp-quote { padding: 7px 10px; border-radius: 8px; background: var(--glass); color: var(--ink); overflow-wrap: anywhere; }
.lp-meta { margin: 4px 0 0 !important; font-size: 12px; line-height: 17px; color: var(--muted); }
.lin-pop [data-pop="tree"] { margin-top: 10px; } /* room between the "From:" line and the button (George, 11-02-2026) */
.lp-result { margin: 10px 0 8px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink); }
.lp-result small { display: block; font-size: 12px; line-height: 17px; color: var(--muted); margin-top: 2px; }
.lin-pop del { color: var(--src-none-ink); background: color-mix(in srgb, var(--src-none-ink) 14%, transparent); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.lin-pop ins { background: var(--src-instr); color: var(--ink); text-decoration: underline; border-radius: 3px; padding: 0 2px; }
.lp-figs { list-style: none; margin: 0; padding: 0; }
.lp-figs li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.lp-figs li:first-child { border-top: 0; }
.lp-figs .v { color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
.lp-figs .ok { color: var(--src-auto-ink); text-align: right; } .lp-figs .bad { color: var(--src-none-ink); text-align: right; }
.lin-pop .k.own { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
/* Folded card sections: one line until opened, so a card and its buttons fit on screen. */
.fold { margin-top: 8px; }
.fold-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
.fold-btn:hover { color: var(--ink); }
.fold-btn:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; border-radius: 4px; }
.fold-btn .chev { display: inline-block; width: 10px; color: var(--muted); transition: transform .15s ease; }
.fold.open .fold-btn .chev { transform: rotate(90deg); }
.fold-btn .n { color: var(--muted); margin-left: 2px; }
.fold-body { display: none; margin-top: 8px; }
.fold.open .fold-body { display: block; }
.fold-body .rows-wrap { max-height: 260px; overflow-y: auto; }
ul.plain { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 20px; color: var(--ink-2); }
ul.plain .why { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .fold-btn .chev { transition: none; } }

/* Study steps tab: the same five steps as the bar above the message box (George, 11-01-2026), then the study's record. */
.timeline li.tl-steps, .timeline li.tl-h { padding-left: 0; }
.timeline li.tl-steps::before, .timeline li.tl-steps::after, .timeline li.tl-h::before, .timeline li.tl-h::after { display: none; }
.timeline li.tl-steps > b, .timeline li.tl-h > b { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.timeline .tl-steps ol { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.timeline .tl-steps li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.timeline .tl-steps li::before, .timeline .tl-steps li::after { display: none; }
.timeline .tl-steps li span { color: inherit; font-size: inherit; }
.timeline .tl-steps li small { display: block; color: var(--faint); font-size: 12.5px; line-height: 18px; }
.timeline .tl-steps li.done { color: var(--ink-2); } .timeline .tl-steps li.now-step { color: var(--ink); }
.timeline .tl-steps .chk { width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.timeline .tl-steps .done .chk { background: var(--ok); border-color: var(--ok); color: var(--on-ink); }
:root[data-theme="light"] .timeline .tl-steps .done .chk { color: #fff; }
.timeline .tl-steps .now-step .chk { border-color: var(--violet); }
.timeline .tl-steps .now-step .chk::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); animation: pulse 1.4s ease-in-out infinite; }
.timeline .tl-steps .now-step.waiting .chk { border-color: var(--warn); } .timeline .tl-steps .now-step.waiting .chk::after { background: var(--warn); animation: none; }

/* Lineage selection (George, 11-01-2026): what "Show where this came from" picked stays marked until Clear. */
.lin-sel { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--line-2)); background: var(--plan-solid); font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.lin-sel b { color: var(--ink); font-weight: 600; }
.lin-sel .lin-link { flex: none; }
.lin-kid.sel > .lin-row, .lin-node.sel > .lin-head { box-shadow: inset 0 0 0 1.5px var(--violet); border-radius: 8px; }
/* Comparison pop-up: no title, so the close button sits in the corner. */
.lin-pop .lp-x { position: absolute; top: 6px; right: 8px; }
.lin-pop .lp-x ~ .lp-block:first-of-type .lp-lab { padding-right: 24px; }

/* Lineage toolbar (George, 11-01-2026): one row instead of the full key. The menus open over the tree. */
#lineage-key.lin-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 12px; }
.lin-dd { position: relative; display: inline-flex; }
.lin-dd-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 10px; max-width: 100%; }
.lin-dd-btn span { color: var(--ink); font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-more-btn { font-size: 15px; line-height: 16px; padding: 4px 10px; letter-spacing: .05em; }
.lin-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; width: 270px; padding: 8px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--plan-solid); box-shadow: 0 12px 32px rgba(0,0,0,.35); display: grid; gap: 2px; }
:root[data-theme="light"] .lin-menu { box-shadow: 0 12px 32px rgba(20,20,40,.14); }
.lin-menu[hidden] { display: none; }
.lin-menu-right { left: auto; right: 0; width: 180px; }
.lin-menu-links { display: flex; align-items: center; gap: 10px; padding: 2px 6px 6px; color: var(--muted); font-size: 12px; }
.lin-opt { display: grid; grid-template-columns: 16px 22px minmax(0,1fr); align-items: start; gap: 6px; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 12.5px; line-height: 17px; color: var(--ink-2); }
.lin-opt:hover { background: var(--glass-3); }
.lin-opt input { margin: 1px 0 0; accent-color: var(--violet); }
.lin-opt input:disabled { opacity: .6; } .lin-opt:has(input:disabled) { cursor: default; }
.lin-opt b { display: block; color: var(--ink); font-weight: 600; } .lin-opt small { display: block; color: var(--muted); font-size: 11.5px; line-height: 16px; }
.lin-opt .k, .lin-opt .ks { margin-top: 4px; }
.lin-opt .ks { display: inline-flex; gap: 2px; }
.lin-opt .k { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.lin-opt .k.auto { background: var(--src-auto-ink); } .lin-opt .k.file { background: var(--src-file-ink); } .lin-opt .k.you { background: var(--src-you-ink); }
.lin-opt .k.instr { background: var(--src-instr-ink); } .lin-opt .k.worked { background: var(--src-worked-ink); }
.lin-opt .k.own { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); } .lin-opt .k.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--src-none-ink); }
.lin-opt-sep { margin-top: 4px; border-top: 1px solid var(--line-2); border-radius: 0 0 8px 8px; padding-top: 8px; }
.lin-menu-note { margin: 4px 6px 2px; color: var(--muted); font-size: 11.5px; line-height: 16px; }
.lin-menu-item { font: inherit; font-size: 13px; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.lin-menu-item:hover:not(:disabled) { background: var(--glass-3); color: var(--ink); }
.lin-menu-item:disabled { opacity: .45; cursor: default; }
#lineage-key .lin-opt > span:not(.ks) { display: block; }
#lineage-key .lin-dd-btn > span { display: inline; }
/* The sentence a reader jumped from, first in its source's list, in full (George, 11-01-2026). */
.lin-val.lin-sent { display: grid; gap: 3px; cursor: default; white-space: normal; text-align: left; }
.lin-val.lin-sent .src { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; line-height: 18px; }
.lin-val.lin-sent .lin-field { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }

/* Picked or selected words keep their source's color, deeper and underlined (George, 11-01-2026). */
::highlight(lin-hit-auto) { background-color: color-mix(in srgb, var(--src-auto-ink) 30%, transparent); color: var(--src-auto-ink); text-decoration: underline 2px var(--src-auto-ink); text-underline-offset: 3px; }
::highlight(lin-sel-auto) { background-color: color-mix(in srgb, var(--src-auto-ink) 30%, transparent); color: var(--src-auto-ink); text-decoration: underline 2px var(--src-auto-ink); text-underline-offset: 3px; }
::highlight(lin-hit-file) { background-color: color-mix(in srgb, var(--src-file-ink) 30%, transparent); color: var(--src-file-ink); text-decoration: underline 2px var(--src-file-ink); text-underline-offset: 3px; }
::highlight(lin-sel-file) { background-color: color-mix(in srgb, var(--src-file-ink) 30%, transparent); color: var(--src-file-ink); text-decoration: underline 2px var(--src-file-ink); text-underline-offset: 3px; }
::highlight(lin-hit-you) { background-color: color-mix(in srgb, var(--src-you-ink) 30%, transparent); color: var(--src-you-ink); text-decoration: underline 2px var(--src-you-ink); text-underline-offset: 3px; }
::highlight(lin-sel-you) { background-color: color-mix(in srgb, var(--src-you-ink) 30%, transparent); color: var(--src-you-ink); text-decoration: underline 2px var(--src-you-ink); text-underline-offset: 3px; }
::highlight(lin-hit-worked) { background-color: color-mix(in srgb, var(--src-worked-ink) 30%, transparent); color: var(--src-worked-ink); text-decoration: underline 2px var(--src-worked-ink); text-underline-offset: 3px; }
::highlight(lin-sel-worked) { background-color: color-mix(in srgb, var(--src-worked-ink) 30%, transparent); color: var(--src-worked-ink); text-decoration: underline 2px var(--src-worked-ink); text-underline-offset: 3px; }
::highlight(lin-hit-own) { background-color: color-mix(in srgb, var(--src-own-ink) 30%, transparent); color: var(--src-own-ink); text-decoration: underline 2px var(--src-own-ink); text-underline-offset: 3px; }
::highlight(lin-sel-own) { background-color: color-mix(in srgb, var(--src-own-ink) 30%, transparent); color: var(--src-own-ink); text-decoration: underline 2px var(--src-own-ink); text-underline-offset: 3px; }
::highlight(lin-hit-instr) { background-color: color-mix(in srgb, var(--src-instr-ink) 30%, transparent); color: var(--src-instr-ink); text-decoration: underline 2px var(--src-instr-ink); text-underline-offset: 3px; }
::highlight(lin-sel-instr) { background-color: color-mix(in srgb, var(--src-instr-ink) 30%, transparent); color: var(--src-instr-ink); text-decoration: underline 2px var(--src-instr-ink); text-underline-offset: 3px; }
::highlight(lin-hit-none) { background-color: color-mix(in srgb, var(--src-none-ink) 30%, transparent); color: var(--src-none-ink); text-decoration: underline 2px var(--src-none-ink); text-underline-offset: 3px; }
::highlight(lin-sel-none) { background-color: color-mix(in srgb, var(--src-none-ink) 30%, transparent); color: var(--src-none-ink); text-decoration: underline 2px var(--src-none-ink); text-underline-offset: 3px; }
/* Run details: where the selected text sits in what the run saved (George, 11-01-2026). */
.lin-runpath { margin: 6px 0 6px 26px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--line-2)); font-size: 12px; line-height: 17px; color: var(--ink-2); }
.lin-runpath p { margin: 0 0 6px; } .lin-runpath b { color: var(--ink); font-weight: 600; }
.lin-runpath blockquote { margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--src-auto); color: var(--src-auto-ink); }

/* The source card (George, 11-01-2026): replaces the strip; short lines that fit the 300 px panel. */
.lin-src { position: sticky; top: 0; z-index: 2; margin: 0 0 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--line-2)); background: var(--plan-solid); font-size: 12px; line-height: 17px; color: var(--ink-2); display: grid; gap: 4px; }
.lin-src p { margin: 0; }
.ls-head { display: flex; align-items: center; gap: 6px; }
.ls-head b { color: var(--ink); font-weight: 600; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-head .lin-link { flex: none; }
.ls-head .lin-icon.auto { flex: none; }
.ls-quote { color: var(--src-auto-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-step { color: var(--ink-2); }
.ls-go { color: var(--muted); } .ls-go .lin-run { font-weight: 600; }

/* "Where these numbers come from" on each card, and its source card in the Lineage panel (11-01-2026). */
.card-src { margin: 10px 0 0; font-size: 12px; }
.card-src .lin-link { display: inline-flex; align-items: center; gap: 5px; font: inherit; background: none; border: 0; padding: 0; color: var(--violet-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.card-src .lin-link:hover { color: var(--ink); }
.card-src .lin-link svg { color: var(--src-auto-ink); }
.ls-steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; }
.ls-steps li { display: grid; gap: 1px; }
.ls-steps li b { color: var(--ink); font-weight: 600; }
.ls-steps li span { color: var(--muted); }
.ls-how { color: var(--muted); font-size: 11.5px; }
.ls-how b { color: var(--ink-2); font-weight: 600; }
.chg-note { display: block; margin-top: 2px; font-size: 11.5px; }
.nw { white-space: nowrap; }

/* Settings → Click to trace (11-01-2026) */
.d-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.d-check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--violet); flex: none; }
.d-check span { display: grid; gap: 3px; }
.d-check b { color: var(--ink); font-weight: 600; font-size: 13px; }
.d-check small { color: var(--muted); font-size: 12px; line-height: 17px; }
.d-check small b { font-size: inherit; color: var(--ink-2); }

/* Replies flow in word by word (11-01-2026): each new word fades in over 300 ms; see REVEAL in app.js. */
.rv { opacity: 0; animation: rv-in var(--rv-fade, 300ms) ease forwards; }
@keyframes rv-in { from { opacity: 0; } to { opacity: 1; } }
/* A list item's bullet is drawn by the browser, not a word, so it fades in with the item's first word (11-02-2026). */
.rv-li::marker { color: transparent; animation: rv-marker var(--rv-fade, 300ms) ease var(--rv-delay, 0ms) forwards; }
@keyframes rv-marker { from { color: transparent; } to { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; animation: none; } .rv-li::marker { color: inherit; animation: none; } }

/* Files under the study steps, and their preview over the chat (11-02-2026). */
:root { --pv-solid: #15151d; --warn-soft: rgba(242,189,107,.10); --ok-soft: rgba(111,211,160,.09); }
:root[data-theme="light"] { --pv-solid: #fbfbfd; --warn-soft: rgba(178,107,0,.08); --ok-soft: rgba(31,138,85,.07); }
.timeline li.tl-files { padding-left: 0; }
.timeline li.tl-files::before, .timeline li.tl-files::after { display: none; }
.timeline li.tl-files > b { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.timeline .tl-file-list { list-style: none; margin: 0 -8px 8px; padding: 0; display: grid; gap: 2px; }
.timeline .tl-file-list li { padding: 0; }
.timeline .tl-file-list li::before, .timeline .tl-file-list li::after { display: none; }
.timeline .tl-file-list li.tl-file-h { padding: 8px 8px 2px; font-size: 11.5px; color: var(--muted); }
.timeline .tl-file-list li.tl-file-h:first-child { padding-top: 0; }
.tl-file { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px;
  background: transparent; color: var(--ink); font-weight: 400; text-align: left; }
.tl-file:hover, .tl-file:focus-visible { background: var(--glass-2); outline: 0; }
.tl-file .ficon { font-style: normal; width: auto; height: auto; min-width: 40px; box-sizing: border-box; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 4px 6px; border-radius: 6px; }
.tl-file em { font-style: normal; min-width: 0; display: grid; }
.tl-file em b { font-size: 13.5px; line-height: 19px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.tl-file em small { font-size: 12px; line-height: 16px; color: var(--faint); }
.tl-eye { display: grid; place-items: center; color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.tl-file:hover .tl-eye, .tl-file:focus-visible .tl-eye { opacity: 1; }

.pv { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 28px; background: rgba(4,4,10,.42); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s ease; }
:root[data-theme="light"] .pv { background: rgba(20,20,40,.14); }
.pv.open { opacity: 1; }
.pv-sheet { width: min(1200px, 100%); height: min(800px, 100%); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--drawer-a), var(--drawer-b)); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px rgba(0,0,0,.45); transform: translateY(10px) scale(.985); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
:root[data-theme="light"] .pv-sheet { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 30px 80px rgba(20,20,40,.16); }
.pv.open .pv-sheet { transform: none; }
.pv-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--line); }
.pv-head .ficon { font-style: normal; width: auto; height: auto; min-width: 42px; box-sizing: border-box; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 5px 7px; border-radius: 7px; }
.pv-title { flex: 1; min-width: 0; display: grid; }
.pv-title b { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title small { font-size: 12.5px; line-height: 17px; color: var(--muted); }
.pv-seg { grid-template-columns: auto auto; }
.pv-seg button { font-size: 13px; padding: 6px 12px; white-space: nowrap; }
.pv-seg button[aria-checked="true"] { background: var(--glass-3); color: var(--ink); }
:root[data-theme="light"] .pv-seg button[aria-checked="true"] { background: #fff; }
.pv-body { flex: 1; min-height: 0; overflow: auto; background: var(--pv-solid); scrollbar-color: var(--glass-3) transparent; }
.pv-body.pv-page { overflow: hidden; background: #fff; }
.pv-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.pv-msg { margin: 0; padding: 48px 24px; text-align: center; color: var(--muted); font-size: 14px; }
.pv-t { border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; min-width: 100%; }
.pv-t th, .pv-t td { padding: 7px 14px; white-space: nowrap; text-align: left; border-bottom: 1px solid var(--line); background: var(--pv-solid); }
.pv-t th { position: sticky; top: 0; z-index: 2; color: var(--muted); font-size: 12px; font-weight: 600; border-bottom-color: var(--line-2); }
.pv-t td { color: var(--ink-2); }
.pv-t .pv-n { position: sticky; left: 0; z-index: 1; width: 60px; min-width: 60px; box-sizing: border-box; text-align: right; color: var(--faint); padding-right: 12px; }
.pv-t th.pv-n { z-index: 3; }
.pv-t .pv-why { position: sticky; left: 60px; z-index: 1; min-width: 172px; box-sizing: border-box; font-size: 12.5px; border-right: 1px solid var(--line); }
.pv-t th.pv-why { z-index: 3; }
.pv-t tr.flag td { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--pv-solid); color: var(--ink); }
.pv-t tr.flag .pv-why { color: var(--warn); font-weight: 500; }
.pv-t tr.fixed td { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--pv-solid); color: var(--ink); }
.pv-t tr.fixed .pv-why { color: var(--ok); font-weight: 500; }
.pv-t td.pv-bad { text-decoration: underline wavy var(--warn); text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-skip-ink: none; cursor: help; }
.pv-t td.pv-fix { text-decoration: underline var(--ok); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; }
.pv-blank { color: var(--faint); font-style: italic; }
.pv-t.only tbody tr:not(.flag) { display: none; }
@media (max-width: 700px) {
  .pv { padding: 10px; }
  .pv-head { flex-wrap: wrap; }
  .pv-seg { order: 5; width: 100%; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pv, .pv-sheet { transition: none; } }

/* Lineage view: a wider side panel, so automation names and Run details fit (George, 11-02-2026) */
@media (min-width: 901px) { body.lin-wide .main { grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 420px); } }
/* Once the tree scrolls, the source card folds to its first line (click it to go back up) */
.lineage.scrolled .lin-src > :not(.ls-head) { display: none; }
.lineage.scrolled .lin-src { cursor: pointer; }
/* A traced sentence: its own figures first, the clicked one marked, the rest of the reply folded (11-02-2026) */
.lin-vals.lin-vals-sel { max-height: none; }
.lin-vh { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin: 6px 0 2px; }
.lin-val.picked { background: color-mix(in srgb, var(--violet) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 55%, transparent); }
.lin-val.lin-sent.picked { background: none; box-shadow: none; }
.lin-you { flex: none; margin-left: auto; font-size: 10.5px; color: var(--violet-2); font-weight: 600; }
.lin-others { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.lin-others:hover { color: var(--ink); }
.lin-others .chev { transition: transform .15s; } .lin-others[aria-expanded="true"] .chev { transform: rotate(90deg); }
.lin-others:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 1px; border-radius: 4px; }
.lin-tag { font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
/* Switching Study steps ↔ Lineage: the panel widens or narrows smoothly and its new contents fade in, instead of the
   width snapping 120 px in one frame (George, 11-02-2026: "the window jerks"). */
.main { transition: grid-template-columns .34s cubic-bezier(.22, .8, .24, 1); }
@keyframes side-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.panel.grow > .lineage:not([hidden]), .panel.grow > .timeline:not([hidden]) { animation: side-in .26s ease-out .06s both; }
@media (prefers-reduced-motion: reduce) {
  .main { transition: none; }
  .panel.grow > .lineage:not([hidden]), .panel.grow > .timeline:not([hidden]) { animation: none; }
}
/* Where a glide to a picked value lands, a ring pulses once (11-02-2026) */
.chat-pulse { position: fixed; z-index: 30; pointer-events: none; border-radius: 6px; box-shadow: 0 0 0 2px var(--violet); animation: chat-pulse .85s ease-out both; }
@keyframes chat-pulse { 0% { opacity: 0; transform: scale(1.25); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
/* Review: step through what the highlight colors (11-02-2026) */
.lin-review { margin-left: auto; display: inline-flex; }
.lin-review[hidden] { display: none; }
.lin-review .rv-go { font-size: 12px; padding: 5px 10px; white-space: nowrap; }
.lin-review .rv-go b { font-weight: 600; color: var(--ink); margin-left: 2px; }
.lin-review .rv-go:disabled { opacity: .55; cursor: default; }
.rv-step { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-2); border-radius: 8px; padding: 1px 2px; font-size: 12px; white-space: nowrap; }
.rv-count { padding: 0 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-arrow { all: unset; box-sizing: border-box; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 16px; line-height: 1; color: var(--ink); cursor: pointer; }
.rv-arrow:hover:not(:disabled) { background: var(--glass-2); }
.rv-arrow:disabled { color: var(--faint); cursor: default; }
.rv-arrow:focus-visible, .lin-review .rv-go:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 1px; }
/* Highlight menu (11-02-2026): one source per row, its name drawn the way the chat colors it, and a count */
#lineage-menu .lin-opt { grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; }
#lineage-menu .lin-opt input { margin: 0; }
#lineage-menu .sw { justify-self: start; font-size: 12.5px; line-height: 18px; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
#lineage-menu .sw.auto { background: var(--src-auto); color: var(--src-auto-ink); }
#lineage-menu .sw.file { background: var(--src-file); color: var(--src-file-ink); }
#lineage-menu .sw.you { background: var(--src-you); color: var(--src-you-ink); }
#lineage-menu .sw.worked { background: var(--src-worked); color: var(--src-worked-ink); }
#lineage-menu .sw.calc { background: var(--src-calc); color: var(--src-calc-ink); }
#lineage-menu .sw.none { background: color-mix(in srgb, var(--src-none-ink) 14%, transparent); color: var(--src-none-ink); text-decoration: underline 1.5px var(--src-none-ink); text-underline-offset: 3px; }
#lineage-menu .sw.instr { color: var(--src-instr-ink); text-decoration: underline 2px var(--src-instr-ink); text-underline-offset: 4px; padding: 0 1px; }
#lineage-menu .sw.own { background: var(--src-own); color: var(--src-own-ink); }
#lineage-menu .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
#lineage-menu .lin-opt.zero .sw { opacity: .5; }
#lineage-menu .lin-opt.zero .n { opacity: .6; }
#lineage-menu .lin-opt-sep { margin-top: 4px; padding-top: 8px; }
/* Copy the source's wording (11-02-2026): the green box in the tree and the source box in the pop-up */
.lin-val.lin-sent[data-copy] { position: relative; cursor: copy; }
.lin-val.lin-sent[data-copy] .src { padding-right: 22px; }
.cp-ico { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; color: var(--muted); opacity: 0; transition: opacity .12s; pointer-events: none; }
.lin-val.lin-sent[data-copy]:hover .cp-ico, .lp-copy:hover .cp-ico { opacity: 1; background: var(--glass-3); color: var(--ink); }
.lin-field.copied { color: var(--src-auto-ink); }
.lp-quote.lp-copy { position: relative; cursor: copy; padding-right: 26px; }
.lp-quote.lp-copy:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.copied-note { margin-left: 6px; font-size: 11px; color: var(--src-auto-ink); white-space: nowrap; }
.lp-lab .copied-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Calculations (11-02-2026): the pop-up's Calculation tab, the tree's Calculations mode and the breakdown both use */
.lin-pop.tabs { padding-top: 8px; }
.lin-pop.tabs .pop-pane .lin-pop-x, .lin-pop.tabs .pop-pane .lp-x { display: none; }
.pop-tabs { display: flex; align-items: center; gap: 2px; margin: 0 0 10px; border-bottom: 1px solid var(--line-2); }
.pop-tabs [role="tab"] { all: unset; cursor: pointer; padding: 6px 10px 7px; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pop-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--violet); font-weight: 600; }
.pop-tabs [role="tab"]:focus-visible { outline: 2px solid var(--violet-2); outline-offset: -2px; border-radius: 4px; }
.pop-tabs .pop-tabs-x { margin-left: auto; }
/* The Lineage panel's controls, in order (George, 11-03-2026): the main tabs; Wording and Calculations as small
   underlined tabs with ⋯ beside them; then Highlight and Review joined in one control. */
.lin-mode { display: flex; align-items: center; gap: 2px; margin: -6px 0 10px; border-bottom: 1px solid var(--line-2); }
.lin-mode[hidden] { display: none; }
.lin-mode > button { all: unset; cursor: pointer; padding: 6px 10px 7px; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lin-mode > button:hover { color: var(--ink); }
.lin-mode > button[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--violet); font-weight: 600; }
.lin-mode > button:focus-visible { outline: 2px solid var(--violet-2); outline-offset: -2px; border-radius: 4px; }
.lin-mode .lin-more { margin-left: auto; }
.lin-mode .lin-more-btn { border: 0; background: transparent; color: var(--muted); }
.lin-mode .lin-more-btn:hover { color: var(--ink); background: var(--glass-2); }
.lin-key.lin-bar { margin: 0 0 12px; }
.lin-group { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--glass); }
.lin-group .lin-dd { min-width: 0; flex: 0 1 auto; }
.lin-group .lin-dd-btn { border: 0; background: transparent; border-radius: 8px 0 0 8px; min-width: 0; height: 100%; }
.lin-group .lin-dd-btn span { min-width: 0; }
.lin-group .lin-review { margin-left: 0; flex: none; align-items: center; border-left: 1px solid var(--line-2); }
.lin-group .rv-go { border: 0; background: transparent; border-radius: 0 8px 8px 0; }
.lin-group .rv-step { border: 0; padding: 0 2px; }
.cx-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cx-v { font-size: 17px; line-height: 22px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.cx-l { color: var(--ink-2); font-size: 12.5px; }
.cx p { margin: 4px 0 0; }
.cx-who { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--src-auto-ink); }
.cx-who .k { width: 8px; height: 8px; border-radius: 2px; background: var(--src-auto-ink); display: inline-block; }
.cx-parts { list-style: none; margin: 8px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--glass); font-size: 12.5px; }
.cx-parts li { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: baseline; gap: 4px; padding: 2px 0; }
.cx-parts .op { color: var(--muted); text-align: center; }
.cx-part { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) 10px; gap: 8px; align-items: baseline; border-radius: 5px; padding: 1px 4px; margin: 0 -4px; }
.cx-part:hover { background: var(--glass-3); }
.cx-part:focus-visible { outline: 2px solid var(--violet-2); }
.cx-parts .v { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-parts .l { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-parts .go { color: var(--muted); }
.cx-parts .cx-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
.cx-parts .cx-row .l { color: var(--muted); }
.cx-parts .cx-x .l { color: var(--muted); }
.cx-parts .cx-more button { all: unset; cursor: pointer; color: var(--violet-2); font-size: 12px; }
.cx-parts .cx-eq { grid-template-columns: 14px auto minmax(0, 1fr); border-top: 1px solid var(--line-2); margin-top: 3px; padding-top: 4px; }
.cx-parts .cx-eq .v { font-weight: 650; }
.cx-parts .ok, .cx-wrote .ok { color: var(--src-auto-ink); text-align: right; } .cx-parts .bad, .cx-wrote .bad { color: var(--src-none-ink); text-align: right; }
.cx-how { font-size: 12px; color: var(--muted); }
.cx-wrote { font-size: 12px; color: var(--ink-2); }
.cx-go { font-size: 12px; }
.cx-go .cx-path { color: var(--muted); }
.cx-back { all: unset; cursor: pointer; display: block; font-size: 12px; color: var(--violet-2); margin: 0 0 6px; }
.cx-lab { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px !important; }
.cx-figs { list-style: none; margin: 0 0 8px; padding: 0; }
.cx-fig { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) 10px; gap: 8px; align-items: baseline; width: 100%; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; }
.cx-fig:hover { background: var(--glass-2); }
.cx-fig:focus-visible { outline: 2px solid var(--violet-2); }
.cx-fig.static { cursor: default; grid-template-columns: auto minmax(0, 1fr); }
.cx-fig .v { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-fig .l { color: var(--ink-2); min-width: 0; }
.cx-fig .l small { display: block; color: var(--muted); font-size: 11.5px; }
.cx-fig .go { color: var(--muted); }
.cx-fig.picked { background: color-mix(in srgb, var(--violet) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 55%, transparent); }
.lin-pop .lin-tool[data-pop="calc-tree"] { margin-top: 10px; }
.cx-note { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.cx-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.cx-step-h { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; color: var(--src-auto-ink); }
.cx-step ul { list-style: none; margin: 0; padding: 0; }
.cx-src .cx { margin-top: 6px; }