/* WilheLLM web service — neutral shadcn chrome (monochrome --primary / --ring)
   around a warm custom chat (serif prose + clay accent in chat content only).
   Dark is the default; light overrides at the bottom via body[data-theme]. */
:root {
  --clay: #d22672; --clay-hover: #b41f5f; --col: 740px;
  --serif: "Tiempos Text", Georgia, "Times New Roman", serif;
  /* 'Beedii' first → its 48 hand-drawn emoji glyphs win for those codepoints (the
     emoji the user types render hand-drawn, like in the Caret editor); every other
     character falls straight through to the system sans (unicode-range scoped). */
  --sans: 'Beedii', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --bg: #0a0a0a; --surface: #1c1c1c; --surface-2: #2a2a2a;
  --text: #fafafa; --muted: #a3a3a3; --faint: #6e6e6e;
  --border: #262626; --border-soft: #1f1f1f; --bubble-user: #262626;
  --code-bg: #141414; --shadow: 0 6px 24px rgba(0,0,0,.5);
  --primary: #fafafa; --primary-fg: #171717; --primary-hover: #e4e4e4; --ring: #d4d4d4;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.6 var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }

header.bar { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid var(--border-soft); font: 600 14px/1 var(--sans); letter-spacing: -.01em; }
header .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
header .dot.ok { background: #4a9e6a; } header .dot.warn { background: var(--clay); }
header .sp { margin-left: auto; font: 12px var(--sans); color: var(--muted); }

.scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.messages { max-width: var(--col); margin: 0 auto; padding: 26px 24px 40px; display: flex; flex-direction: column; gap: 22px; }

.welcome { max-width: var(--col); margin: 0 auto; padding: 13vh 24px 0; text-align: center; }
.welcome.hidden { display: none; }
.welcome .mk { font-size: 44px; }
.welcome h1 { font: 400 32px/1.2 var(--serif); margin: 14px 0 6px; }
.welcome p { color: var(--muted); margin: 0; }
/* Clause-Logo als Inline-SVG (window.CLAUSE_LOGO): Marke pink (#d22672), Wortmarke
   currentColor → theme-adaptiv (weiß auf dunkel, dunkel auf hell). */
.brand-logo { display: inline-block; height: 18px; width: 77px; vertical-align: middle; }
.welcome-logo { display: inline-block; height: 40px; width: 171px; }
.brand-logo svg, .welcome-logo svg { display: block; width: 100%; height: 100%; }
/* Team art is dark line work — give it a light panel so it reads on the dark page
   (same treatment as the OG card). */
.welcome-team { display: block; width: 100%; max-width: 480px; height: auto; margin: 30px auto 0; }
.suggestions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 26px; }
.suggestions:empty { display: none; }
.sugg { font: 14px var(--serif); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.sugg:hover { background: var(--surface-2); border-color: var(--clay); transform: translateY(-1px); }
.sugg .s-emo { margin-right: 6px; }

.msg { display: flex; flex-direction: column; }
/* WhatsApp-style: every message is a ~350px bubble (assistant left, user right);
   hand-drawn annotations live in the margin to the right (gutterizeNotes). The
   bubble is flow-root so a floated scribble inside it stays contained. */
.msg.assistant { align-items: flex-start; position: relative; padding-left: 46px; }
/* Santa Clause profile picture, left of every assistant message */
.msg.assistant::before {
  content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2) url("avatars/santa/neutral.svg") center / cover no-repeat;
  border: 1px solid var(--border-soft); flex: 0 0 auto;
}
.msg.user { align-items: flex-end; }
.msg.user .body { background: var(--bubble-user); padding: 11px 16px; border-radius: 18px 18px 5px 18px; max-width: 350px; white-space: pre-wrap; font-size: 15px; }
.msg.assistant .body { display: flow-root; max-width: 350px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 18px 18px 18px 5px; padding: 11px 16px; font-family: var(--sans); font-size: 15px; line-height: 1.62; }
.body > *:first-child { margin-top: 0; } .body > *:last-child { margin-bottom: 0; }
.body p { margin: 0 0 12px; }
.body h1,.body h2,.body h3 { font-family: var(--sans); font-weight: 600; line-height: 1.3; margin: 18px 0 8px; }
.body h1 { font-size: 22px; } .body h2 { font-size: 19px; } .body h3 { font-size: 16.5px; }
.body ul,.body ol { margin: 0 0 12px; padding-left: 22px; } .body li { margin: 3px 0; }
.body a { color: var(--clay); text-decoration: none; } .body a:hover { text-decoration: underline; }
/* **bold** → the Caret pink marker-stroke (markdown eats ** before GlyphUp sees it,
   so we style <strong> itself): a highlighter swash over otherwise-normal text. */
.msg.assistant .body strong { font-weight: 600; background: linear-gradient(transparent 52%, rgba(210,38,114,.42) 52%, rgba(210,38,114,.42) 92%, transparent 92%); padding: 0 .04em; border-radius: 2px; }
.msg.assistant .body em { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.body blockquote { margin: 0 0 12px; padding: 2px 14px; border-left: 3px solid var(--border); color: var(--muted); }
.body code.inline { font: 13px var(--mono); background: var(--code-bg); padding: 1.5px 5px; border-radius: 5px; }
.body hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

/* Scribbles — the model's hand-drawn note. Floated left so the prose wraps
   around it like a figure in a real notebook; its white edge blends into the
   page. clear:left keeps two in a row from colliding. */
.scribble { float: left; max-width: 300px; margin: 2px 20px 6px 0; clear: left; }
.scribble-canvas { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; display: flex; justify-content: center; }
.scribble-canvas svg { width: 100%; height: auto; max-height: 380px; display: block; }
.scribble-canvas .scribble-img { width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block; border-radius: 4px; }
.scribble-cap { margin-top: 1px; text-align: center; font-family: "Caveat", cursive; font-size: 16px; line-height: 1.15; color: var(--muted); }
.scribble-empty .scribble-cap { margin-top: 0; font-size: 12.5px; color: var(--faint); font-style: italic; font-family: var(--sans); }
.scribble-pending .scribble-canvas { min-height: 160px; align-items: center; }
.scribble-spinner { font-size: 40px; animation: scribble-pulse 1.1s ease-in-out infinite; }
@keyframes scribble-pulse { 0%,100% { opacity: .35; transform: scale(.9) rotate(-6deg); } 50% { opacity: 1; transform: scale(1.05) rotate(6deg); } }
/* Mindmaps are too wide to wrap text around — keep them as a full block. */
.scribble.mindmap { float: none; clear: both; max-width: 580px; margin: 10px 0 16px; }
.scribble.mindmap .scribble-canvas svg { max-height: 480px; }
/* Portrait graphs (tangled tree / tall packs) render längs and scroll instead of
   being squeezed flat — vertical fits a narrow chat column far better. */
.scribble.mindmap .mindmap-tall { max-height: 78vh; overflow: auto; align-items: flex-start; }
.scribble.mindmap .mindmap-tall svg { max-height: none; }
/* Narrow viewport: no room beside a 300px float, fall back to a full block. */
@media (max-width: 620px) { .scribble { float: none; clear: both; max-width: 100%; margin: 8px 0 12px; } }

/* Fun media — GIPHY GIFs + Reddit memes the model drops for laughs */
.funmedia { margin: 8px 0 12px; max-width: 220px; }
.funmedia-canvas { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; display: flex; justify-content: flex-start; overflow: visible; }
.funmedia-img { width: 100%; height: auto; max-height: 220px; object-fit: contain; display: block; border-radius: 0; }
.funmedia-src { margin-top: 6px; text-align: right; font-size: 11px; color: var(--faint); letter-spacing: .02em; font-family: var(--sans); }
.funmedia-empty .funmedia-src { text-align: center; font-style: italic; }
.funmedia-pending .funmedia-canvas { min-height: 120px; align-items: center; background: var(--surface); }
.funmedia-spinner { font-size: 30px; animation: scribble-pulse 1.1s ease-in-out infinite; }

/* Bluemoji stickers — full-color reaction stickers the model drops inline */
.sticker { margin: 6px 0 10px; }
.sticker-img { width: 148px; height: 148px; object-fit: contain; display: block; }

.code { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--code-bg); }
.code .code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; font: 11px var(--mono); color: var(--muted); border-bottom: 1px solid var(--border-soft); }
.code .copy { font-size: 11px; color: var(--muted); padding: 2px 8px; border-radius: 6px; }
.code .copy:hover { background: var(--surface-2); color: var(--text); }
.code pre { margin: 0; padding: 13px 14px; overflow-x: auto; } .code pre code { font: 13px/1.55 var(--mono); white-space: pre; }

.tool { align-self: flex-start; font: 12px var(--mono); color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 7px 11px; }
.err { align-self: stretch; color: #e08585; background: color-mix(in srgb, #e08585 12%, transparent); border: 1px solid color-mix(in srgb, #e08585 35%, transparent); border-radius: 10px; padding: 9px 13px; font-size: 13px; }
.caret::after { content: "▍"; color: var(--clay); animation: blink 1s steps(2) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }

/* GlyphUp handwriting fonts (shared with desktop; copied into public/font by
   build-core). "Shantell Sans" = AI hand, "Caveat" = human hand. */
@font-face { font-family: "Shantell Sans"; src: url("font/ShantellSans-VF.ttf") format("truetype-variations"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("font/Caveat-VF.ttf") format("truetype-variations"); font-weight: 400 700; font-display: swap; }
/* Beedii — CC0 hand-drawn emoji font (webkul/beedii). unicode-range scopes it to
   EXACTLY the 48 emoji codepoints Beedii draws, so 'Beedii' first in --sans swaps
   ONLY those emoji for the hand-drawn glyph and all other text falls through. */
@font-face {
  font-family: 'Beedii';
  src: url('font/Beedii.woff') format('woff');
  font-display: swap;
  unicode-range: U+2600, U+2602, U+2639, U+263A, U+26A1, U+26FA, U+2764, U+2B50, U+1F384, U+1F389, U+1F451, U+1F45E, U+1F464, U+1F48C, U+1F48E, U+1F498, U+1F4AC, U+1F4F7, U+1F50D, U+1F52A, U+1F601, U+1F604, U+1F60A, U+1F60B, U+1F60C, U+1F60E, U+1F610, U+1F613, U+1F615, U+1F616, U+1F617, U+1F61B, U+1F61D, U+1F620, U+1F625, U+1F627, U+1F629, U+1F62B, U+1F62C, U+1F62E, U+1F632, U+1F634, U+1F635, U+1F636, U+1F642, U+1F910, U+1F974, U+1F9E6;
}

/* hand-drawn :name: icons (inline SVG, tint with text) + Beedii color emoji
   (black-line SVG masked + painted, theme-aware) — Caret parity */
.hand-icon { display: inline-flex; align-items: center; vertical-align: -0.16em; flex-shrink: 0; }
.hand-icon svg { display: block; overflow: visible; }
.bee-icon { display: inline-block; height: 1.3em; width: 1.3em; vertical-align: -0.32em; margin: 0 0.04em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

/* message-split: blank-line-separated bubbles, tied by a thin tree-line left */
.msg.assistant .bubbles { display: flex; flex-direction: column; gap: 9px; position: relative; max-width: 350px; }
.msg.assistant .bubbles .body.bubble { max-width: 100%; }

/* handwritten annotations beside the message (gutterizeNotes): desktop = a column
   to the RIGHT of the bubble on the bare ground, no frame; mobile = under the bubble.
   .has-gutter turns the message into a flex row [content | notes]. */
.msg.has-gutter { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; }
.msg.has-gutter .msg-main { flex: 0 0 auto; max-width: 350px; min-width: 0; }
.msg-gutter { flex: 0 1 232px; display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.gu-gnote { display: block; font-family: "Shantell Sans", "Caveat", cursive; color: var(--cc, var(--muted)); font-size: 1.06em; line-height: 1.34; }
.gu-gnote .gu-comment__who { vertical-align: baseline; }
/* anchored phrase keeps just its coloured underline; the note now lives in the gutter */
.gu-anc-flat { cursor: default; }
.gu-anc-flat .gu-pop { display: none; }
/* USER message: the AI's annotations on YOUR words sit to the LEFT of the right-aligned
   bubble (assistant self-comments stay right). order:-1 moves the gutter before the bubble. */
.msg.user.has-gutter { justify-content: flex-end; }
.msg.user.has-gutter .msg-gutter { order: -1; text-align: right; }
@media (max-width: 899px) {
  .msg.has-gutter { flex-direction: column; gap: 9px; }
  .msg.user.has-gutter { align-items: flex-end; }
  .msg.user.has-gutter .msg-gutter { order: 0; text-align: right; }
  .msg-gutter { flex: none; width: auto; padding-top: 0; }
}

/* <ASK> decision panel — clickable option buttons */
.ask { margin: 6px 0 14px; display: flex; flex-direction: column; gap: 14px; font-family: var(--sans); }
.ask.done { opacity: .6; pointer-events: none; }
.ask-q { display: flex; flex-direction: column; gap: 7px; }
.ask-head { font-size: 14.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ask-chip { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; }
.ask-opts { display: flex; flex-direction: column; gap: 7px; }
.ask-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); transition: border-color .12s, background .12s; }
.ask-opt:hover { border-color: var(--border); background: var(--surface-2); }
.ask-opt.sel { border-color: var(--primary); background: var(--surface-2); }
.ask-opt .ao-label { font-size: 14px; color: var(--text); }
.ask-opt .ao-desc { font-size: 12px; color: var(--muted); }
.ask-send { align-self: flex-start; padding: 8px 18px; border-radius: 10px; background: var(--primary); color: var(--primary-fg); font-size: 13.5px; font-weight: 600; }
.ask-send:hover { background: var(--primary-hover); }
.ask-send:disabled { background: var(--surface-2); color: var(--faint); cursor: default; }

/* <TODO> plan card + doc-card — collapsible, copyable */
.todo-card, .doc-card { margin: 6px 0 14px; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; background: var(--surface); font-family: var(--sans); }
.todo-head, .doc-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 14px; text-align: left; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.todo-head:hover, .doc-head:hover { background: var(--surface-2); }
.td-fold { color: var(--faint); font-size: 11px; }
.td-title, .doc-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.doc-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.td-copy { font-size: 11.5px; color: var(--muted); padding: 3px 9px; border-radius: 7px; }
.td-copy:hover { background: var(--bg); color: var(--text); }
.todo-body { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.todo-card.folded .todo-body, .doc-card.folded .doc-body { display: none; }
.td-section { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 10px 0 3px; }
.td-item { display: flex; align-items: flex-start; gap: 9px; padding: 3px 0; }
.td-box { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px; border: 1.5px solid var(--border); border-radius: 4px; cursor: pointer; transition: background .12s, border-color .12s; }
.td-box:hover { border-color: var(--primary); }
.td-item.checked .td-box { background: var(--primary); border-color: var(--primary); position: relative; }
.td-item.checked .td-box::after { content: "✓"; position: absolute; inset: 0; color: var(--primary-fg); font-size: 11px; line-height: 13px; text-align: center; }
.td-item.checked .td-text { color: var(--faint); text-decoration: line-through; }
.td-text { font-size: 14px; color: var(--text); line-height: 1.5; }
.td-text code.inline { font: 12px var(--mono); background: var(--code-bg); padding: 1px 4px; border-radius: 4px; }
.doc-body { padding: 4px 16px 14px; font-family: var(--serif); }

.composer-wrap { padding: 0 24px 16px; position: relative; }
/* 3D-Toon-Avatar: fix unten rechts im Viewport, damit er IMMER sichtbar ist (egal wie
   schmal das Panel/Fenster) und rechts neben der Message-Box-Zone liegt. Eigener Rahmen,
   damit die Platzierung auch vor dem Laden / bei leerem Canvas zu sehen ist. */
/* Kein Rahmen/Schatten/Hintergrund mehr: nur der Kopf schwebt (Canvas ist transparent). */
.avatar3d-dock { position: fixed; right: 16px; bottom: 86px; width: 148px; height: 176px; pointer-events: none; z-index: 30; }
.avatar3d-dock[hidden] { display: none; }
/* Schwarz-weiß: Graustufen über den ganzen Avatar (Kontur bleibt dunkel). */
.avatar3d-dock canvas { width: 100%; height: 100%; display: block; filter: grayscale(1); }
/* Emoji-Reaktion steigt vom Avatar auf (Insta/Stream-Style), in der User-Schrift (Beedii). */
.emoji-float { position: fixed; z-index: 31; pointer-events: none; font-family: var(--sans); font-size: 26px; line-height: 1;
  transform: translate(-50%, -50%); will-change: transform, opacity; animation: emoji-rise 2.2s ease-out forwards; }
@keyframes emoji-rise {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  18%  { opacity: 1; transform: translate(-50%, -95%) scale(1.15); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -270%) scale(1); }
}
/* 3D-Kopf aktiv → das Punkte-Overlay im Composer-Streifen verstecken (Tracking läuft
   weiter über das versteckte <video>, nur die Punkte-Darstellung weicht dem Avatar). */
body.avatar3d-on .eml-video-wrap { display: none; }
.composer { position: relative; max-width: var(--col); margin: 0 auto; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px 10px 18px; box-shadow: var(--shadow); }
/* Avatar liegt rechts halb im Eingabefeld → Text bekommt etwas Luft, damit er nicht drunter läuft. */
.composer:has(.eml-dock:not(:empty)) textarea { padding-right: 66px; }
.composer:focus-within { border-color: var(--ring); }
/* Drag-and-drop: Composer leuchtet auf wenn man eine Datei drüberzieht. */
.composer.dragover { border-color: var(--clay); border-style: dashed; background: color-mix(in srgb, var(--clay) 8%, var(--surface)); }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: none; color: var(--text); font: 15px/1.5 var(--sans); max-height: 220px; padding: 6px 2px; }
.composer textarea::placeholder { color: var(--faint); }
.composer-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comp-icon { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 16px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.comp-icon:hover { background: var(--surface-2); color: var(--text); }
.comp-icon.has-files { border-color: var(--primary); color: var(--text); }
.send { width: 34px; height: 34px; border-radius: 999px; background: var(--primary); color: var(--primary-fg); font-size: 16px; display: flex; align-items: center; justify-content: center; }
.send:hover { background: var(--primary-hover); } .send:disabled { background: var(--faint); cursor: default; }
.send.stop { background: var(--text); color: var(--bg); }
.composer-hint { max-width: var(--col); margin: 8px auto 0; text-align: center; font-size: 11.5px; color: var(--faint); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hint-link { background: none; border: 0; padding: 0; font: inherit; color: var(--faint); cursor: pointer; }
.hint-link:hover { color: var(--text); text-decoration: underline; }
/* Founder pic prepended to the Collective canned message. */
.msg .canned-img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 12px; margin: 0 0 12px; }

/* ── chrome: sidebar (history) + main + settings modal (desktop parity) ─────── */
.app { flex: 1; display: grid; grid-template-columns: 276px 1fr; min-height: 0; }
.app.collapsed { grid-template-columns: 0 1fr; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

/* Sidebar — shadcn-style: padding lives on the rail, children are flush; one calm
   radius scale (8px), soft hover, the New-Chat button as a clear secondary action. */
.sidebar { background: var(--surface); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 8px; }
.app.collapsed .sidebar { display: none; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 8px; }
.brand { font: 600 15px/1 var(--sans); letter-spacing: -.01em; padding-left: 2px; }
.icon-btn { width: 32px; height: 32px; border-radius: 8px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.new-chat { margin: 0 0 8px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--text); transition: background .12s, border-color .12s; }
.new-chat:hover { background: #333333; border-color: #3a3a3a; }
.new-chat span { color: var(--muted); font-size: 17px; line-height: 0; }
.side-label { padding: 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.history { flex: 1; overflow-y: auto; padding: 2px 0; display: flex; flex-direction: column; gap: 2px; }
.h-item { padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, color .12s; }
.h-item span { overflow: hidden; text-overflow: ellipsis; }
.h-item:hover, .h-item.active { background: var(--surface-2); color: var(--text); }
.h-item .del { margin-left: auto; opacity: 0; color: var(--faint); background: none; transition: opacity .12s, color .12s; }
.h-item:hover .del { opacity: 1; } .h-item .del:hover { color: var(--text); }
.side-foot { margin-top: 4px; padding: 8px 6px 2px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; }
.ghost { color: var(--muted); padding: 7px 9px; border-radius: 8px; font-size: 13.5px; transition: background .12s, color .12s; }
.ghost:hover { background: var(--surface-2); color: var(--text); }
.engine-dot { display: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.engine-dot.ok { background: #4a9e6a; } .engine-dot.warn { background: var(--clay); }
.only-mobile { display: none; }

/* settings modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-backdrop[hidden] { display: none; }
.settings-box { width: 560px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.set-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.set-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.set-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.set-field .muted { font-weight: 400; color: var(--muted); }
.set-field input, .set-field select, .set-field textarea { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-weight: 400; }
.set-field textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.set-field input:focus, .set-field select:focus, .set-field textarea:focus { outline: 0; border-color: var(--ring); }
.set-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); }
.set-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.set-foot { padding: 12px 18px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.set-saved { font-size: 12px; color: var(--faint); margin-right: auto; }
.set-saved.flash { color: #4a9e6a; }
.btn { padding: 8px 16px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-weight: 600; }
.btn:hover { background: var(--surface-2); }

/* light theme (default is dark via :root) */
body[data-theme="light"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f5;
  --text: #0a0a0a; --muted: #737373; --faint: #a3a3a3;
  --border: #e5e5e5; --border-soft: #efefef; --bubble-user: #f4f4f5;
  --code-bg: #f6f6f7; --shadow: 0 4px 16px rgba(0,0,0,.08);
  --primary: #171717; --primary-fg: #fafafa; --primary-hover: #2b2b2b; --ring: #0a0a0a;
}

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 40; width: 264px; height: 100%; }
  .app:not(.show-side) .sidebar { display: none; }
  .only-mobile { display: inline-flex; }
}

/* ── EML voice mode (capture panel + result card) ──────────────────────────── */
.eml-box { width: 600px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.eml-stage { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
/* Kein bg, keine Rundung, overflow sichtbar: der Emoji-Badge sitzt am Rand und darf
   nicht weggeschnitten werden. */
.eml-video-wrap { position: relative; width: 220px; height: 165px; overflow: visible; }
.eml-video-wrap video, .eml-video-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Video UND Punkte-Overlay spiegeln, damit der Avatar sich wie ein Spiegel verhält. */
.eml-video-wrap video, .eml-video-wrap canvas { transform: scaleX(-1); }
.eml-wave { width: 520px; max-width: 100%; height: 90px; }
.eml-status { font-size: 13px; color: var(--muted); text-align: center; min-height: 18px; }

/* EML dock — jetzt IM Composer, nicht als eigene Leiste darüber. */
.eml-dock { padding: 0; }
.eml-dock:empty { display: none; }
.composer > .eml-dock { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
/* Inline = nahtlos: kein Panel-Kasten, nur Avatar + Pegel, eingebettet im Composer. */
.eml-box.eml-inline { width: 100%; max-width: 100%; max-height: none; background: transparent; border: 0; box-shadow: none; }
/* Embed: oben nur die Wave über die volle Breite (max ~46px), sonst nichts. Der Punkt-
   Avatar liegt klein und gespiegelt rechts halb im Eingabefeld, spart so eine eigene Zeile. */
.eml-box.eml-embed.eml-inline .eml-stage { display: block; padding: 0; position: static; }
.eml-box.eml-embed.eml-inline.eml-dots-only .eml-wave { display: block; flex: none; width: 100%; height: 46px; }
.eml-box.eml-embed .eml-status { display: none; }
.eml-box.eml-embed.eml-inline.eml-dots-only .eml-video-wrap { position: absolute; right: 14px; bottom: 50px; width: 56px; height: 42px; flex: none; overflow: visible; cursor: pointer; opacity: .92; z-index: 3; pointer-events: auto; }
.eml-box.eml-embed.eml-inline.eml-dots-only .eml-video-wrap.rec { outline: 2px solid #c0392b; outline-offset: 2px; border-radius: 8px; }
.eml-box.eml-inline .eml-stage { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; position: relative; }
/* Rechteckiger Avatar (keine Rundung -> Emoji nicht abgeschnitten), tippbar = aufnehmen. */
.eml-box.eml-inline .eml-video-wrap { width: 120px; height: 90px; flex: 0 0 auto; overflow: visible; cursor: pointer; }
.eml-box.eml-inline .eml-video-wrap.rec { outline: 2px solid #c0392b; outline-offset: 2px; }
.eml-box.eml-inline .eml-wave { flex: 1 1 auto; width: auto; height: 48px; }
.eml-box.eml-inline .eml-status { font-size: 12px; text-align: left; flex: 1 1 auto; min-width: 0; color: var(--faint); }
/* dots-only: the raw camera video stays hidden, only the landmark overlay shows. */
.eml-dots-only #emlVideo, .eml-dots-only .eml-video-wrap video { display: none; }
/* Ohne echtes Video müssen die Punkte nicht aufs Cam-Bild gemappt werden — also größer
   anzeigen. Der Punkt-Avatar wächst, die Wave rückt daneben kleiner. */
.eml-dots-only.eml-inline .eml-video-wrap { width: 200px; height: 150px; }
.eml-status a { color: var(--clay); }
.eml-foot { justify-content: space-between; }
.btn.rec { background: #c0392b; color: #fff; border-color: #c0392b; }

.eml-result { align-self: stretch; border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.eml-r-head { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.eml-r-eml { font-family: var(--serif); font-size: 16px; line-height: 1.9; }
.eml-r-png { width: 100%; border-radius: 8px; border: 1px solid var(--border-soft); }
.eml-r-detail { font-size: 12px; color: var(--muted); }
.eml-r-detail summary { cursor: pointer; }
.eml-r-detail pre { white-space: pre-wrap; font: 11.5px var(--mono); background: var(--code-bg); padding: 8px 10px; border-radius: 7px; overflow-x: auto; }
.eml-handoff { align-self: flex-start; }
/* live transcript bubble (while speaking / waiting) — soft + serif until Gemini replaces it */
.msg.user.eml-live .body { font-family: var(--serif); opacity: .72; font-style: italic; white-space: pre-wrap; }
.eml-r-detail .eml-hidden { margin: 6px 0; color: var(--text); }
.eml-r-detail .eml-analysis { margin: 6px 0; line-height: 1.6; color: var(--text); }

/* Dev Mode — the in-between/technical messages (stderr, canary, raw markup). Dim,
   monospace, clearly not part of the normal conversation. Hidden unless Dev Mode is on. */
/* NUR die Dev-Nachrichten-Bubbles in der Liste — vorher traf `.dev` auch <body class="dev">
   und legte Padding/Border/Mono-Font um den ganzen Body. */
.messages .dev { align-self: stretch; margin: 4px 0; padding: 6px 10px; border-left: 2px solid var(--border); background: color-mix(in srgb, var(--muted) 8%, transparent); color: var(--muted); font: 11.5px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; border-radius: 0 6px 6px 0; }
body.dev .composer-wrap::before { content: "DEV"; position: absolute; top: -16px; left: 24px; font: 700 9px var(--mono); letter-spacing: .1em; color: var(--faint); }

/* Model picker — "Pick your Clause Model" (Santa active, rest coming soon). */
.model-pick { position: relative; }
.model-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.model-pill:hover { background: var(--hover, rgba(0,0,0,.04)); }
.model-pill .mp-name { font-weight: 700; }
.model-pill .mp-caret { opacity: .6; font-size: 11px; }
.mp-ico, .mm-ico { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #d22672, #a81b56) center/cover no-repeat; flex: 0 0 auto; display: inline-block; }
/* Per-model profile pic (avatars/<model>/neutral.svg). Gradient stays as the
   backdrop behind transparent art; the SVG covers the circle. */
.mp-ico[data-model="santa"], .mm-ico[data-model="santa"] { background-image: url("avatars/santa/neutral.svg"); }
.mp-ico[data-model="relative"], .mm-ico[data-model="relative"] { background-image: url("avatars/relative/neutral.svg"); }
.mp-ico[data-model="supremacy"], .mm-ico[data-model="supremacy"] { background-image: url("avatars/supremacy/neutral.svg"); }
.mp-ico[data-model="sub"], .mm-ico[data-model="sub"] { background-image: url("avatars/sub/neutral.svg"); }
.mm-ico { width: 30px; height: 30px; }
.model-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: 80vw; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.model-menu[hidden] { display: none; }
.mm-head { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 8px 8px; }
.mm-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); position: relative; }
.mm-item:hover:not([disabled]) { background: var(--hover, rgba(0,0,0,.05)); }
.mm-txt { display: flex; flex-direction: column; gap: 2px; }
.mm-txt b { font-size: 14px; }
.mm-txt small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.mm-item.is-soon { opacity: .55; cursor: default; }
.mm-soon { margin-left: auto; align-self: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }