/* Thread Shell — the conversation spine for AI + human chat surfaces.
   Message grouping, day dividers, streaming state, per-message copy, an
   honest scroll law, and jump-to-unanswered. The spine Skim Chips, ChatBar
   and InChat Callouts plug into.
   Zero deps, CSP-safe. Theme via custom props on .th-root;
   flip [data-th-theme="dark"] for Studio dark.
   ENOK Foundry · https://enok.com */

.th-root{
  /* Light — Santorini white / earth adobe (low glow, earthy, no gradients).
     Same values as the InChat / ChatBar / Skim Chips palette: one theme
     skins the whole chat-native family. */
  --th-bg:#FBF8F1; --th-panel:#FFFFFF; --th-line:#E5DECF; --th-line2:#D8CFBB;
  --th-ink:#2A2622; --th-ink2:#7A7266;
  --th-accent:#46708C; --th-accent-bg:#E9EEF2;
  --th-run:#3E6B4A;  --th-run-bg:#E8EFE5;   /* landed / positive */
  --th-wait:#8A6A2A; --th-wait-bg:#F3EBD8;  /* in flight / waiting */
  --th-err:#A24B37;  --th-err-bg:#F4E3DC;   /* failed / needs a hand */
  --th-r-shell:16px; --th-r-msg:12px; --th-r-ctl:8px;
  --th-shadow:0 1px 2px rgba(42,38,34,.05);
  --th-shadow-lift:0 6px 20px rgba(42,38,34,.13);
  --th-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --th-h:520px;            /* the shell owns ONE scroll region — size it here */
  --th-gutter:38px;        /* avatar column: messages in a group line up under it */
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--th-ink); line-height:1.55;
}
.th-root[data-th-theme="dark"]{
  --th-bg:#191713; --th-panel:#221F1A; --th-line:#3A352C; --th-line2:#4A4438;
  --th-ink:#F2EDE2; --th-ink2:#A79D8C;
  --th-accent:#7FA6C2; --th-accent-bg:#25303A;
  --th-run:#8FB98A;  --th-run-bg:#232C22;
  --th-wait:#CBA55E; --th-wait-bg:#2E2818;
  --th-err:#D08A6E;  --th-err-bg:#2E211B;
  --th-shadow:0 1px 2px rgba(0,0,0,.28);
  --th-shadow-lift:0 6px 20px rgba(0,0,0,.42);
}

/* ── Shell ────────────────────────────────────────────────────────────── */
.th-shell{position:relative;display:flex;flex-direction:column;
  height:var(--th-h);min-height:0;background:var(--th-bg);
  border:1px solid var(--th-line);border-radius:var(--th-r-shell);overflow:hidden;}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.th-top{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;background:var(--th-bg);border-bottom:1px solid var(--th-line);}
.th-tt{min-width:0;}
.th-title{font-size:14px;font-weight:700;letter-spacing:.01em;margin:0;}
.th-sub{font-size:11.5px;color:var(--th-ink2);}
.th-top-right{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* Waiting pill — the count comes from InChat.unresolved(), never a tally the
   shell keeps by hand. Hidden entirely at zero: no empty badge. */
.th-wait-pill{display:none;align-items:center;gap:7px;font:inherit;font-size:11.5px;
  font-weight:700;color:var(--th-wait);background:var(--th-wait-bg);
  border:1px solid transparent;border-radius:999px;padding:4px 12px;cursor:pointer;}
.th-wait-pill[data-th-on]{display:inline-flex;}
.th-wait-pill:hover{border-color:var(--th-wait);}
.th-wait-pill:focus-visible{outline:2px solid var(--th-accent);outline-offset:2px;}
.th-wait-pill .th-dot{width:6px;height:6px;border-radius:50%;
  background:var(--th-wait);animation:th-pulse 1.4s infinite;}

/* ── Scroll region ────────────────────────────────────────────────────── */
.th-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;padding:16px 18px 8px;}
.th-list:focus-visible{outline:2px solid var(--th-accent);outline-offset:-2px;}

/* ── Day divider ──────────────────────────────────────────────────────── */
.th-day{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--th-ink2);}
.th-day:first-child{margin-top:0;}
.th-day::before,.th-day::after{content:"";flex:1;height:1px;background:var(--th-line);}

/* ── System rail — joins, model switches, renames. Never a message. ────── */
.th-sys{display:flex;align-items:center;gap:10px;margin:12px 0;
  font-size:12px;color:var(--th-ink2);}
.th-sys::before,.th-sys::after{content:"";flex:1;height:1px;background:var(--th-line);}

/* ── Group ────────────────────────────────────────────────────────────── */
.th-group{margin:0 0 16px;}
.th-group:last-child{margin-bottom:0;}
.th-head{display:flex;align-items:center;gap:9px;margin:0 0 6px;}
.th-av{flex:none;width:26px;height:26px;border-radius:var(--th-r-ctl);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  color:var(--th-ink2);background:var(--th-panel);border:1px solid var(--th-line);}
.th-group[data-role="ai"] .th-av{color:var(--th-accent);border-color:var(--th-accent);}
.th-group[data-role="you"] .th-av{color:var(--th-ink);border-color:var(--th-line2);}
.th-name{font-size:13px;font-weight:700;}
.th-when{font-size:11.5px;color:var(--th-ink2);font-family:var(--th-mono);}

/* ── Message ──────────────────────────────────────────────────────────── */
.th-stack{margin:0;padding:0;list-style:none;}
.th-msg{position:relative;padding:3px 40px 3px var(--th-gutter);border-radius:var(--th-r-msg);}
.th-msg + .th-msg{margin-top:2px;}
.th-msg:hover{background:var(--th-panel);}
.th-msg:focus-within{background:var(--th-panel);}
.th-say{font-size:14.5px;margin:0;overflow-wrap:anywhere;white-space:pre-wrap;}
.th-say:empty{display:none;}

/* The gutter time is opacity-hidden, never display:none — it stays in the
   accessibility tree, so a screen reader keeps every message's timestamp. */
.th-gut{position:absolute;left:0;top:4px;width:calc(var(--th-gutter) - 8px);
  font-size:10.5px;font-family:var(--th-mono);color:var(--th-ink2);
  text-align:right;opacity:0;transition:opacity .12s ease;}
.th-msg:hover .th-gut,.th-msg:focus-within .th-gut{opacity:1;}

/* Per-message copy — always in the tab order, revealed on hover or focus. */
.th-acts{position:absolute;right:4px;top:2px;opacity:0;transition:opacity .12s ease;}
.th-msg:hover .th-acts,.th-msg:focus-within .th-acts{opacity:1;}
.th-copy{font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--th-ink2);background:var(--th-bg);
  border:1px solid var(--th-line);border-radius:var(--th-r-ctl);
  padding:3px 8px;cursor:pointer;}
.th-copy:hover{color:var(--th-ink);border-color:var(--th-line2);}
.th-copy:focus-visible{opacity:1;outline:2px solid var(--th-accent);outline-offset:2px;}
.th-copy[data-th-done]{color:var(--th-run);border-color:var(--th-run);}

/* Blocks — where InChat callouts (and any other owned block) live inside a
   message. The shell never styles the block itself; it only gives it room. */
.th-blocks{margin:8px 0 2px;}
.th-blocks:empty{display:none;}

/* Your own turn reads as material, not as a coloured bubble. */
.th-group[data-role="you"] .th-msg{background:var(--th-panel);
  border:1px solid var(--th-line);}
.th-group[data-role="you"] .th-msg:hover{border-color:var(--th-line2);}
.th-group[data-role="you"] .th-msg + .th-msg{margin-top:4px;}

/* ── Streaming ────────────────────────────────────────────────────────── */
.th-caret{display:inline-block;width:2px;height:1em;margin-left:2px;
  vertical-align:text-bottom;background:var(--th-accent);
  animation:th-blink 1s step-end infinite;}
.th-msg[data-th-state="failed"] .th-say{color:var(--th-err);}
.th-fail{display:block;margin-top:4px;font-size:12.5px;color:var(--th-err);}

/* ── Typing — a transient row, never a message ────────────────────────── */
.th-typing{display:flex;align-items:center;gap:9px;padding:4px 0 4px var(--th-gutter);
  font-size:12.5px;color:var(--th-ink2);}
.th-typing .th-dots{display:inline-flex;gap:4px;}
.th-typing .th-dots i{width:5px;height:5px;border-radius:50%;
  background:var(--th-ink2);animation:th-pulse 1.2s infinite;}
.th-typing .th-dots i:nth-child(2){animation-delay:.18s;}
.th-typing .th-dots i:nth-child(3){animation-delay:.36s;}

/* ── New-below pill — the scroll law made visible ─────────────────────── */
.th-new{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:none;align-items:center;gap:8px;font:inherit;font-size:12px;
  font-weight:700;color:var(--th-ink);background:var(--th-panel);
  border:1px solid var(--th-line2);border-radius:999px;padding:7px 15px;
  cursor:pointer;box-shadow:var(--th-shadow-lift);z-index:2;}
.th-new[data-th-on]{display:inline-flex;}
.th-new:hover{border-color:var(--th-ink2);}
.th-new:focus-visible{outline:2px solid var(--th-accent);outline-offset:2px;}
.th-new .th-arrow{font-size:11px;}

/* ── Foot — where a composer (ChatBar) sits ───────────────────────────── */
.th-foot{flex:none;padding:10px 14px 12px;border-top:1px solid var(--th-line);
  background:var(--th-bg);}
.th-foot:empty{display:none;}

@keyframes th-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes th-blink{0%,100%{opacity:1}50%{opacity:0}}

/* Reduced motion: state is never carried by movement alone — the caret and
   the dots hold still and keep their colour. */
@media (prefers-reduced-motion: reduce){
  .th-caret,.th-typing .th-dots i,.th-wait-pill .th-dot{animation:none;}
  .th-gut,.th-acts{transition:none;}
}

@media (max-width:520px){
  .th-root{--th-gutter:32px;}
  .th-list{padding:14px 12px 8px;}
  .th-msg{padding-right:8px;}
  /* No hover on touch — actions and times stay visible instead of hiding. */
  .th-acts,.th-gut{position:static;opacity:1;width:auto;text-align:left;}
  .th-acts{margin-top:4px;}
  .th-gut{margin-bottom:2px;}
}