/* === SECTION: tokens === */
/* Owner: global — CSS variables, themes, palettes. Delete this section only if the entire design system is replaced. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:      #f2eee6;
  --paper-dark: #ebe6db;
  --paper-worn: #e4dfd3;
  --ink:        #1c1a16;
  --ink-heavy:  #111009;
  --ink-mid:    rgba(28, 26, 22, 0.78);
  --ink-soft:   rgba(28, 26, 22, 0.62);
  --ink-dim:    rgba(28, 26, 22, 0.56);
  --ink-ghost:  rgba(28, 26, 22, 0.18);
  --ink-faint:  rgba(28, 26, 22, 0.10);
  --rule:       rgba(28, 26, 22, 0.20);
  --scrollbar-thumb: rgba(28, 26, 22, 0.22);
  --scrollbar-thumb-hover: rgba(28, 26, 22, 0.45);
  --red:        #b03020;
  --pass-1: #8a7040;
  --pass-2: #2a8a6e;
  --pass-3: #9a7a1a;
  --pass-4: #2a5a9a;
  --pass-5: #6a5a8a;
  --red-dim:    rgba(176, 48, 32, 0.12);
  --tab-num-color: rgba(200, 90, 80, 0.75);
  --tab-num-hover: rgba(200, 90, 80, 0.85);
  --tab-num-border: rgba(180, 60, 50, 0.35);
  --tab-warn:   rgba(200, 90, 80, 0.90);
  --hover-bg:   rgba(0, 0, 0, 0.04);
  --dream-1: #6a8aaa;
  --dream-2: #a08a5a;
  --dream-3: #5a9a7a;
  --dream-4: #a08a4e;
  --charcoal:   #14120f;
  /* 'Heebo' appended to each stack as a per-glyph Hebrew fallback — Latin glyphs keep
     the primary face, Hebrew glyphs render in Heebo. Fixes Hebrew everywhere (UI + content). */
  --font-codex: 'Source Serif 4', 'Heebo', Georgia, 'Times New Roman', serif;
  --font-editorial: 'Newsreader', 'Source Serif 4', 'Heebo', Georgia, 'Times New Roman', serif;
  --ui-sans:    'Geist', 'SF Pro Display', 'Helvetica Neue', 'Heebo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --code:       'JetBrains Mono', 'Heebo', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono:       var(--code);
  --serif:      var(--font-codex);
  --sans:       var(--ui-sans);
  --font-ui:    var(--ui-sans);
  --surface:    color-mix(in srgb, var(--paper) 94%, var(--ink) 6%);
  --surface-raised: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);
  --border:     color-mix(in srgb, var(--ink) 14%, transparent);
  --accent:     #62a6ff;
  --task-state-main: #66bfa0;
  --task-state-branch: #d0a657;
  --task-state-ready: #69b878;
  --task-state-muted: color-mix(in srgb, var(--ink) 48%, transparent);
  --sidebar:    48px;
  --sidebar-rail: 23px;
  --sidebar-open: 160px;
  --chrome-bg:  var(--paper);
  --frame-bg:   color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
  --inbox-bg:   var(--paper-dark);
  --chat-bg:    var(--frame-bg);
  --composer-bg: var(--inbox-bg);
  --cp-bridge-bg: color-mix(in srgb, var(--composer-bg) 50%, var(--chat-bg) 50%);
  --frame-rule: color-mix(in srgb, #e8a84a 55%, transparent);
  --frame-rule-soft: color-mix(in srgb, #e8a84a 22%, transparent);
  /* ── Spacing scale ───────────────────────────────────── */
  /* Use these tokens for padding/margin/gap. Odd values (3,5,6,7,10,14px) */
  /* are legacy — migrate them toward the nearest token on next touch.      */
  --space-1:    2px;
  --space-2:    4px;
  --space-3:    8px;
  --space-4:    12px;
  --space-5:    16px;
  --space-6:    24px;
  --space-7:    32px;
  --space-8:    48px;
  /* ── Font scale ──────────────────────────────────────── */
  --text-xs:    11px;  /* small labels, metadata, subnav caps  */
  --text-sm:    12px;  /* secondary text, timestamps           */
  --text-md:    14px;  /* primary UI text, body                */
  --text-lg:    16px;  /* headings, prominent controls         */
  --text-xl:    18px;  /* section headers                      */
  --gi-composer-font: 14px;
  --gi-desktop-density: 0.913;
}

/* @sas-section
   id: desktop:native-density
   claim: Keeps the packaged desktop, and a Make it customer's computer browser, as compact as the established 91.3% view while the page stays at native 100% zoom.
   terms: desktop density, native zoom, full-window compensation, gi-desktop-density, customer screen size */
html.gi-desktop-density body {
  zoom: var(--gi-desktop-density);
  width: 100%;
  height: 100%;
}
/* Outside the desktop window nothing stretches the shell to the zoomed body, and its 100vh
   shrinks with the zoom, leaving an empty strip below the screen. Fill the body instead. */
html.gi-desktop-density body > .shell {
  height: 100%;
}

body.dark, body.dark.palette-warm {
  --scrollbar-thumb: rgba(255, 255, 255, 0.22);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.50);
  --paper:      #101113;
  --paper-dark: #0c0d0f;
  --paper-worn: #09090c;
  --charcoal:   #101113;
  --ink:        #ffffff;
  --ink-heavy:  #ffffff;
  --ink-mid:    rgba(255, 255, 255, 0.88);
  --ink-soft:   rgba(255, 255, 255, 0.72);
  --ink-dim:    rgba(255, 255, 255, 0.72);
  --ink-ghost:  rgba(255, 255, 255, 0.45);
  --ink-faint:  rgba(255, 255, 255, 0.12);
  --rule:       rgba(255, 255, 255, 0.22);
  --surface:    #111315;
  --surface-raised: #171a1d;
  --border:     rgba(236, 233, 225, 0.13);
  --accent:     #62a6ff;
  --task-state-main: #69c3a3;
  --task-state-branch: #d7ad5f;
  --task-state-ready: #75c985;
  --red:        #d4503c;
  --pass-1: #c0a070;
  --pass-2: #3ab88e;
  --pass-3: #c4a030;
  --pass-4: #4a8ad4;
  --pass-5: #9a8aba;
  --red-dim:    rgba(212, 80, 60, 0.18);
  --hover-bg:   rgba(255, 255, 255, 0.04);
  --dream-1: #a0c0e0;
  --dream-2: #dcc080;
  --dream-3: #80d0a8;
  --dream-4: #dcc480;
  --chrome-bg:  var(--paper);
  --frame-bg:   color-mix(in srgb, var(--paper) 86%, var(--ink) 6%);
}
body.dark.palette-cool {
  --scrollbar-thumb: rgba(228, 229, 234, 0.22);
  --scrollbar-thumb-hover: rgba(228, 229, 234, 0.50);
  --paper:      #111114;
  --paper-dark: #0a0a0d;
  --paper-worn: #060608;
  --charcoal:   #111114;
  --ink:        #e4e5ea;
  --ink-heavy:  #f3f4f8;
  --ink-mid:    rgba(228, 229, 234, 0.88);
  --ink-soft:   rgba(228, 229, 234, 0.72);
  --ink-dim:    rgba(228, 229, 234, 0.72);
  --ink-ghost:  rgba(228, 229, 234, 0.45);
  --ink-faint:  rgba(228, 229, 234, 0.12);
  --rule:       rgba(228, 229, 234, 0.22);
}
body.dark.palette-neutral {
  --scrollbar-thumb: rgba(230, 230, 230, 0.22);
  --scrollbar-thumb-hover: rgba(230, 230, 230, 0.50);
  --paper:      #131313;
  --paper-dark: #0b0b0b;
  --paper-worn: #070707;
  --charcoal:   #131313;
  --ink:        #e6e6e6;
  --ink-heavy:  #f4f4f4;
  --ink-mid:    rgba(230, 230, 230, 0.88);
  --ink-soft:   rgba(230, 230, 230, 0.72);
  --ink-dim:    rgba(230, 230, 230, 0.72);
  --ink-ghost:  rgba(230, 230, 230, 0.45);
  --ink-faint:  rgba(230, 230, 230, 0.12);
  --rule:       rgba(230, 230, 230, 0.22);
}
body.dark.palette-abyss {
  --scrollbar-thumb: rgba(208, 212, 224, 0.22);
  --scrollbar-thumb-hover: rgba(208, 212, 224, 0.50);
  --paper:      #0b0e18;
  --paper-dark: #060811;
  --paper-worn: #03050a;
  --charcoal:   #0b0e18;
  --ink:        #d0d4e0;
  --ink-heavy:  #e4e7f0;
  --ink-mid:    rgba(208, 212, 224, 0.88);
  --ink-soft:   rgba(208, 212, 224, 0.72);
  --ink-dim:    rgba(208, 212, 224, 0.72);
  --ink-ghost:  rgba(208, 212, 224, 0.45);
  --ink-faint:  rgba(208, 212, 224, 0.12);
  --rule:       rgba(208, 212, 224, 0.22);
}
body.dark.palette-midnight {
  --scrollbar-thumb: rgba(200, 205, 216, 0.22);
  --scrollbar-thumb-hover: rgba(200, 205, 216, 0.50);
  --paper:      #0f1520;
  --paper-dark: #0a0f18;
  --paper-worn: #060a10;
  --charcoal:   #0f1520;
  --ink:        #c8cdd8;
  --ink-heavy:  #dce0ea;
  --ink-mid:    rgba(200, 205, 216, 0.88);
  --ink-soft:   rgba(200, 205, 216, 0.72);
  --ink-dim:    rgba(200, 205, 216, 0.72);
  --ink-ghost:  rgba(200, 205, 216, 0.45);
  --ink-faint:  rgba(200, 205, 216, 0.12);
  --rule:       rgba(200, 205, 216, 0.22);
}
body.palette-offwhite {
  --paper:      #f7f5f0;
  --paper-dark: #efece4;
  --paper-worn: #e6e2d8;
  --charcoal:   #f7f5f0;
  --ink:        #2c2a26;
  --ink-heavy:  #1a1816;
  --ink-mid:    rgba(44, 42, 38, 0.80);
  --ink-soft:   rgba(44, 42, 38, 0.60);
  --ink-dim:    rgba(44, 42, 38, 0.62);
  --ink-ghost:  rgba(44, 42, 38, 0.38);
  --ink-faint:  rgba(44, 42, 38, 0.20);
  --rule:       rgba(44, 42, 38, 0.22);
  --hover-bg:   rgba(44, 42, 38, 0.06);
}
body.palette-bone {
  --paper:      #faf8f4;
  --paper-dark: #f2efe8;
  --paper-worn: #eae6dc;
  --charcoal:   #faf8f4;
  --ink:        #33312c;
  --ink-heavy:  #201e1a;
  --ink-mid:    rgba(51, 49, 44, 0.80);
  --ink-soft:   rgba(51, 49, 44, 0.60);
  --ink-dim:    rgba(51, 49, 44, 0.62);
  --ink-ghost:  rgba(51, 49, 44, 0.38);
  --ink-faint:  rgba(51, 49, 44, 0.20);
  --rule:       rgba(51, 49, 44, 0.22);
  --hover-bg:   rgba(51, 49, 44, 0.06);
}

html, body {
  height: 100%;
  background: var(--chrome-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-md);
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
}

* {
  scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }

/* @sas claim: Keeps the app background free of full-screen smoky vignette overlays while preserving only a faint texture layer. | terms: body::before, body::after, global background, grain, vignette, smoky shadow | id: 0:remove-background-shadow | timestamp: 2026-05-29T16:55:00Z | live: true */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  opacity: 0.18;
  pointer-events: none;
  z-index: 200;
}

/* Removed body::after radial-gradient vignette: it created the large grey-dark background shadow/blob. */

/* === SECTION: shell-layout === */
/* Owner: chrome — shell grid, project-bar, aside sidebar, main-content frame. */
.shell {
  display: grid;
  /* Spine collapsed to a hairline at all times; expands on hover (rule below). */
  grid-template-columns: var(--sidebar-rail, 12px) 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  transition: grid-template-columns 0.2s ease;
}
.shell:has(> aside:is(:hover,.pinned)) {
  grid-template-columns: var(--sidebar-open) 1fr;
}
.shell > .project-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 16px 4px 4px;
  border-bottom: none;
  flex-shrink: 0;
  gap: 8px;
  position: relative;
  z-index: 400;
  overflow: visible;
  --flat-panel-bg: var(--chat-bg, var(--frame-bg));
  background: var(--chat-bg, var(--frame-bg));
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 0.25s ease;
}
/* Projects icon - compact workspace/grid entry point beside the project name. */
#project-block .project-view-btn {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 0;
  margin: 0;
  border-radius: 7px;
  justify-content: center;
  color: var(--ink-dim);
  background: transparent;
  transform: none;
}
#project-block .project-view-btn:hover {
  color: var(--ink-soft);
  background: transparent;
}
#project-block .project-view-btn svg {
  width: 17px;
  height: 17px;
}
#project-block .project-view-btn.space-open {
  color: var(--accent);
  background: transparent;
}

.top-context-cluster {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(58vw, 680px);
  order: 3;
  margin-left: auto;
}
/* @sas-section
// id: style:header-cp-lane-project-controls
// claim: When the context rail is visible, an empty context-control lane collapses so line tabs reclaim the left side while the Projects grid stays beside the project name.
// terms: context panel line, CP header lane, right rail, line strip, read mode, code mode, project name, project view icon
*/
@media (min-width: 701px) {
  .shell:has(#context-panel.active) > .project-bar {
    /* Match the actual CP column width (not 20vw, which overshot and diverged
       on wide screens) so the cluster lanes exactly over the context panel. */
    --header-cp-lane-width: var(--cp-width, 280px);
    /* Tighten the right corner gutter so the read/code picker hugs the edge,
       in line with the trimmed Spine/attachments card gutters below. */
    padding-right: 7px;
  }

  .shell:has(#context-panel.active) > .project-bar .project-bar-mode-wrap {
    flex: 0 0 var(--header-cp-lane-width);
    max-width: var(--header-cp-lane-width);
    margin-left: 0;
    /* Keep the project-bar's right padding as a corner gutter for the mode picker. */
    margin-right: 0;
    justify-content: flex-end;
  }

  .shell:has(#context-panel.active) > .project-bar .project-bar-mode-wrap:has(#context-bar:empty) {
    display: none;
  }

  .shell:has(#context-panel.active) > .project-bar .header-context-divider {
    display: none;
  }

  .shell:has(#context-panel.active) > .project-bar > .line-strip .line-tab-divider {
    display: none;
  }

  .shell:has(#context-panel.active) > .project-bar .project-picker-chip {
    max-width: min(100%, calc(var(--header-cp-lane-width) - 64px));
  }
}
.project-picker-chip {
  order: 3;
}
.header-context-divider {
  order: 2;
}
.line-picker-chip {
  order: 1;
  display: none;
}
.project-picker-chip,
.line-picker-chip {
  height: 26px;
  min-width: 0;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
}
.project-picker-chip {
  display: inline-flex;
}
.project-picker-chip {
  position: relative;
  max-width: min(28vw, 280px);
}
.line-picker-chip {
  max-width: min(30vw, 320px);
}
.header-context-divider {
  width: 1px;
  height: 18px;
  flex: 0 0 1px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  opacity: 0.55;
}
.project-bar-mode-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  order: 1;
  margin-left: 0;
}
.project-bar-mode-wrap .project-bar-line-mode-toggle {
  display: none;
}
#project-block > .line-strip {
  order: 4;
}
@media (min-width: 701px) {
  .top-context-cluster {
    order: 1;
    margin-left: 0;
    margin-right: 0;
  }
  .top-context-cluster .header-context-divider {
    display: none;
  }
  .project-bar-mode-wrap {
    order: 3;
    justify-content: flex-end;
    pointer-events: none;
  }
  .project-bar-mode-wrap > * {
    pointer-events: auto;
  }
  .project-bar-mode-wrap .line-mode-toggle {
    order: 2;
  }
  .project-bar-mode-wrap #context-bar {
    order: 1;
  }
}

/* gradient accent line replaces hard border */
.project-bar::after {
  content: none;
  position: absolute;
  bottom: 0;
  left: calc(var(--sidebar) + 28px);
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--ink-soft) 0%, var(--ink-dim) 20%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
  transition: left 0.2s ease;
}
.shell:has(> aside:is(:hover,.pinned)) > .project-bar::after { left: calc(var(--sidebar-open) + 28px); }
/* scroll-depth shadow */
.project-bar.scrolled {
  box-shadow: none;
}
body.dark .project-bar.scrolled {
  box-shadow: none;
}

.project-bar-name.active-line {
  text-shadow: none;
}

aside {
  width: 100%;
  flex-shrink: 0;
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--chrome-bg);
  position: relative;
  z-index: 200;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition: width 0.2s ease;
}
aside::-webkit-scrollbar { display: none; }
aside:is(:hover,.pinned) {
  box-shadow: none;
}

/* @sas claim: Early-cascade #main-content frame rules — radius 0 here, but these ::before/::after pseudos are SUPERSEDED later (hard-killed at the final chrome cleanup, content:none/display:none). The live desktop frame is the .mc-frame SVG path + the #main-content overflow-clip radius set !important near end of file. Kept at 0 for cascade consistency; editing here alone has no visible effect. | terms: #main-content, #main-content::before, #main-content::after, superseded by final cleanup, live frame is .mc-frame | id: 5436:equal-dimmed-frame-weight | modified_by: square-top-left-corner | timestamp: 2026-06-03T00:00:00Z | live: true */
#main-content {
  min-width: 0;
  height: 100%;
  position: relative;
  background: var(--frame-bg);
  border-top: none;
  border-left: 1px solid var(--frame-edge, rgba(255,255,255,0.32));
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 0;
  overflow: hidden;
  transition: background 0.2s ease;
}
#main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 61;
  background: linear-gradient(to right, var(--frame-edge, rgba(255,255,255,0.32)) 0%, var(--frame-edge, rgba(255,255,255,0.32)) 28%, transparent 68%);
}
#main-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 62;
  border-top: 1px solid var(--frame-edge, rgba(255,255,255,0.32));
  border-top-left-radius: 0;
}
#work-row::before,
body:not(.no-auth)::after {
  display: none;
  content: none;
}
body.dark #main-content {
  background: var(--frame-bg);
}

/* ring container — no phantom margin; CP panel is in work row, not project bar */
.project-bar > div:last-child {
  margin-right: 0;
}
.project-bar-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-picker-chip .project-bar-name {
  height: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--gi-chat-font, 15px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 650;
}
.project-picker-chip .project-bar-name:hover { background: transparent; }
.project-bar-name:hover { background: rgba(28,26,22,0.05); }
body.dark .project-bar-name:hover { background: rgba(212,207,197,0.07); }
body.dark .project-picker-chip .project-bar-name:hover { background: transparent; }
.project-bar-line {
  display: none; /* replaced by line-tab-bar */
}
/* ── Line tab bar ─────────────────────────────────────── */
.line-tab-divider {
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  flex-shrink: 0;
  margin: 0 4px 0 1px;
  align-self: center;
  opacity: 0.7;
}
.line-tab-bar {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  flex: 1 1 0;
  max-width: 100%;
  min-width: 0;
  scrollbar-width: none;
  padding: 0 5px;
  scroll-padding-inline: 16px;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.line-tab-bar > .line-tab:first-child {
  /* Consume only spare room: tabs sit at the left when they fit, while this
     margin naturally falls to zero when the lane needs horizontal scrolling. */
  margin-right: auto;
}
.line-tab-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.line-tab-scroll {
  width: 24px;
  min-width: 24px;
  height: 26px;
  border: 1px solid transparent;
  background: var(--frame-bg);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 6px;
  padding: 0;
  color: var(--ink-dim);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.line-tab-scroll svg {
  width: 12px;
  height: 12px;
  display: block;
  flex: 0 0 auto;
  stroke-width: 2.5;
}

.line-tab-scroll-label {
  display: none;
}

.line-strip.line-tabs-can-scroll-left .line-tab-scroll-left,
.line-strip.line-tabs-can-scroll-right .line-tab-scroll-right {
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--ink) 4.5%, var(--frame-bg));
  color: var(--ink-soft);
}

.line-tab-scroll:hover:not(:disabled),
.line-tab-scroll:focus-visible {
  background: color-mix(in srgb, var(--ink) 7.5%, var(--frame-bg));
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
  outline: none;
}

.line-tab-scroll:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  outline-offset: 2px;
}

.line-tab-scroll:active:not(:disabled) {
  transform: scale(0.97);
}

.line-tab-scroll:disabled {
  border-color: transparent;
  background: var(--frame-bg);
  color: var(--ink-ghost);
  cursor: default;
  pointer-events: none;
}

.line-search-tab-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  position: relative;
  z-index: 5;
  overflow: visible;
}
.line-search-tab-slot .line-search-btn {
  position: static;
  transform: none;
}
@media (max-width: 1180px) {
  .line-tab-scroll {
    min-width: 28px;
    height: 26px;
    padding: 0;
  }

  .line-tab-scroll-label {
    display: none;
  }
}

/* ── Floating top-left cluster + collapsible lines strip ── */
.float-line-name {
  --line-tab-hue: 210;
  --line-tab-accent: hsl(var(--line-tab-hue) 38% 76%);
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--line-tab-accent) 62%, var(--ink-soft));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  flex-shrink: 1;
  min-width: 0;
  text-shadow: none;
}
.float-line-name::first-letter {
  text-transform: uppercase;
}
.line-picker-chip .float-line-name {
  max-width: min(24vw, 260px);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.phone-context-line {
  --line-tab-hue: 210;
  --line-tab-accent: hsl(var(--line-tab-hue) 38% 76%);
  display: inline-block;
  color: color-mix(in srgb, var(--line-tab-accent) 58%, var(--ink-soft));
  text-shadow: none;
}
.phone-context-line::first-letter {
  text-transform: uppercase;
}
.float-line-name:empty { display: none; }
.float-line-wrap { display: inline-flex; align-items: center; gap: 1px; min-width: 0; }
.line-picker-chip .float-line-wrap { flex: 1 1 auto; }
.float-line-wrap:hover .float-line-action,
.float-line-wrap:focus-within .float-line-action { opacity: 1; pointer-events: auto; }
.float-line-wrap:has(.float-line-name:empty) .float-line-action { display: none; }
/* When the strip is open the active line shows as the first tab — drop the float copy. */
#project-block.strip-open .float-line-wrap { display: none; }

/* Per-line chat voice toggle (Code | Read) — top-right header.
   Only the ACTIVE option is colored & crisp; the inactive one is blurred + dimmed. */
.line-mode-toggle {
  -webkit-app-region: no-drag;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  flex-shrink: 0;
}
.line-mode-toggle .lmt-opt {
  -webkit-app-region: no-drag;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 0 7px;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.7;
  filter: none;
  transition: color 0.15s, opacity 0.15s, background-color 0.15s;
}
.line-mode-toggle .lmt-opt:hover { opacity: 0.9; color: var(--ink-soft); }
.line-mode-toggle .lmt-opt.active {
  opacity: 1;
  font-weight: 400;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.line-mode-toggle .lmt-code-signal,
.line-mode-toggle .lmt-read-signal {
  font-family: 'Geist Mono', 'SFMono-Regular', Consolas, monospace;
  font-weight: 400;
  line-height: 1;
}
.line-mode-toggle .lmt-opt[data-mode="code"].active { color: #3fb950; }       /* Code → green */
.line-mode-toggle .lmt-opt[data-mode="depth"].active { color: #62a6ff; } /* Read → blue */
.line-strip-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s ease;
}
.line-strip-toggle:hover {
  background: transparent;
  color: var(--ink-soft);
}
#project-block.strip-open .line-strip-toggle {
  transform: rotate(180deg);
  background: transparent;
  color: var(--ink-soft);
}
/* Collapsible strip — spreads inline across the header when open */
.line-strip {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  overflow: visible;
  background: var(--frame-bg);
}
.line-search-tab-slot { order: 0; }
.line-new-tab-btn { order: 1; }
.line-tab-scroll-right { order: 2; }
.line-tab-bar { order: 3; }
.line-tab-scroll-left { order: 4; }
.line-menu-btn { order: 5; }
.line-tab-divider { order: -1; }
#project-block.strip-open .line-strip { display: flex; }
.line-tab {
  --line-tab-hue: 210;
  --line-tab-accent: hsl(var(--line-tab-hue) 38% 76%);
  --line-tab-accent-muted: hsl(var(--line-tab-hue) 30% 68%);
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  min-height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--codex-chat-font-family, 'Heebo', system-ui, sans-serif);
  font-size: var(--codex-chat-font, var(--gi-chat-font, 15px));
  font-weight: var(--codex-chat-weight, var(--gi-chat-weight, 400));
  line-height: normal;
  letter-spacing: 0;
  font-synthesis-weight: none;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  background: color-mix(in srgb, var(--ink) 5.5%, transparent);
  transition: color 0.14s, background 0.14s, border-color 0.14s, opacity 0.14s;
  max-width: 190px;
  user-select: none;
  position: relative;
}
body:not(.dark) :is(.line-tab, .float-line-name, .phone-context-line) {
  /* Flat neutral, mirroring dark mode's white — the pastel hue cycle is
     intentionally neutralized in both themes. */
  --line-tab-accent: var(--ink);
  --line-tab-accent-muted: var(--ink);
}
body.dark :is(.line-tab, .float-line-name, .phone-context-line) {
  --line-tab-accent: #ffffff;
  --line-tab-accent-muted: #ffffff;
}
.line-tab:hover,
.line-tab:focus-within,
.line-tab:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 11%, transparent);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.line-tab:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  outline-offset: 2px;
}
.line-tab.active {
  --line-tab-accent-muted: var(--ink);
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-color: color-mix(in srgb, var(--ink) 42%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent), 0 0 18px color-mix(in srgb, var(--ink) 16%, transparent);
}
.line-tab.has-active-task[data-task-mode="main_focus"] {
  border-color: color-mix(in srgb, var(--task-color, #3aad7c) 36%, transparent);
}
.line-tab.has-active-task[data-task-mode="main_focus"] .line-tab-label {
  color: color-mix(in srgb, var(--line-tab-accent) 72%, var(--ink));
}
.line-tab-branch-indicator {
  display: inline-flex;
  flex: 0 0 12px;
  align-items: center;
  color: var(--ink-soft);
}
.line-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: inherit;
  color: color-mix(in srgb, var(--line-tab-accent-muted) 58%, var(--ink-soft));
  transition: color 0.14s ease;
  text-shadow: none;
  font-weight: inherit;
}
body.dark .line-tab-label {
  color: #ffffff;
}
body.dark .line-tab:not(.active):not(:hover):not(:focus-within):not(:focus-visible) .line-tab-label {
  color: rgba(255, 255, 255, 0.55);
}
.line-tab:hover .line-tab-label,
.line-tab:focus-within .line-tab-label,
.line-tab:focus-visible .line-tab-label {
  color: color-mix(in srgb, var(--line-tab-accent) 88%, var(--ink));
}
.line-tab-label::first-letter {
  text-transform: uppercase;
}
/* Runtime activity owns this dot — colour + shape + motion carry the state at a
   glance (working / waiting-for-you / paused / pushed / committed / failed / done); memory health has a separate
   glyph. Glyphs stay so no state depends on colour alone (WCAG use-of-colour). */
.line-tab-status-dot {
  --lt-run:  color-mix(in srgb, #e0a020 82%, var(--ink));
  --lt-wait: color-mix(in srgb, #7b61c9 84%, var(--ink));
  --lt-fail: color-mix(in srgb, #c85a4a 76%, var(--ink));
  --lt-pause: color-mix(in srgb, #77808b 80%, var(--ink));
  --lt-pushed: color-mix(in srgb, #278b67 82%, var(--ink));
  --lt-committed: color-mix(in srgb, #277f91 82%, var(--ink));
  --lt-done: color-mix(in srgb, #4a9d5b 80%, var(--ink));
  display: none;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 12px;
  border: 1.5px solid transparent;
  background: transparent;
  position: relative;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.line-tab[data-line-status] .line-tab-status-dot {
  display: inline-flex;
}
/* running — a live amber pulse: this line is working right now.
   The glow lives on a ::before layer whose opacity/scale animate — both compositable —
   instead of animating box-shadow on the dot itself, which forced a repaint every frame
   for as long as any tab reported running (including stale-status strands). */
.line-tab[data-line-status="running"] .line-tab-status-dot {
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--lt-run) 70%, #fff), var(--lt-run));
}
.line-tab[data-line-status="running"] .line-tab-status-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lt-run) 42%, transparent) 0%, transparent 70%);
  animation: line-tab-sig-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
/* waiting for you — purple, insistent throb + exclamation: come look */
.line-tab[data-line-status="waiting_user"] .line-tab-status-dot {
  background: var(--lt-wait);
  box-shadow: 0 0 6px color-mix(in srgb, var(--lt-wait) 55%, transparent);
  animation: line-tab-sig-attention 1.1s ease-in-out infinite;
}
.line-tab[data-line-status="waiting_user"] .line-tab-status-dot::after { content: '!'; }
/* failed — solid red, terminal, no motion */
.line-tab[data-line-status="failed"] .line-tab-status-dot {
  background: var(--lt-fail);
  box-shadow: 0 0 5px color-mix(in srgb, var(--lt-fail) 45%, transparent);
}
.line-tab[data-line-status="failed"] .line-tab-status-dot::after { content: '×'; }
/* paused — neutral and still, with a pause glyph */
.line-tab[data-line-status="paused"] .line-tab-status-dot {
  background: var(--lt-pause);
}
.line-tab[data-line-status="paused"] .line-tab-status-dot::after { content: 'Ⅱ'; font-size: 7px; }
/* pushed — green upload arrow, distinct from ordinary completion */
.line-tab[data-line-status="pushed"] .line-tab-status-dot {
  background: var(--lt-pushed);
  box-shadow: 0 0 6px color-mix(in srgb, var(--lt-pushed) 42%, transparent);
}
.line-tab[data-line-status="pushed"] .line-tab-status-dot::after { content: '↑'; }
/* committed — a still teal diamond: changes are safely recorded locally */
.line-tab[data-line-status="committed"] .line-tab-status-dot {
  background: var(--lt-committed);
  box-shadow: 0 0 5px color-mix(in srgb, var(--lt-committed) 38%, transparent);
}
.line-tab[data-line-status="committed"] .line-tab-status-dot::after { content: '◆'; font-size: 6px; }
/* done — a filled green check. The line stopped, and noticing that change is the
   whole point, so it carries the same visual weight as the amber running dot. */
.line-tab[data-line-status="done"] .line-tab-status-dot {
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--lt-done) 66%, #fff), var(--lt-done));
  border-color: color-mix(in srgb, var(--lt-done) 70%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--lt-done) 50%, transparent);
  color: #fff;
  opacity: 1;
  animation: line-tab-sig-settle 0.5s ease-out;
}
.line-tab[data-line-status="done"] .line-tab-status-dot::after { content: '✓'; }
/* memory health uses its own non-color-only marker */
.line-tab-health-dot {
  display: none;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.line-tab[data-mem-health="degraded"] .line-tab-health-dot {
  display: inline-flex;
  color: #ba7517;
}
.line-tab[data-mem-health="broken"] .line-tab-health-dot {
  display: inline-flex;
  color: #c85a4a;
  animation: line-tab-sig-breathe 2.6s ease-in-out infinite;
}
/* opacity/scale only — compositable; was box-shadow, which repainted every frame */
@keyframes line-tab-sig-pulse {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  50%      { opacity: 1; transform: scale(1); }
}
@keyframes line-tab-sig-attention {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}
@keyframes line-tab-sig-settle {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes line-tab-sig-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* Colour still separates every state without motion, so reduced-motion just stills them. */
@media (prefers-reduced-motion: reduce) {
  .line-tab[data-line-status="running"] .line-tab-status-dot,
  .line-tab[data-line-status="waiting_user"] .line-tab-status-dot,
  .line-tab[data-line-status="done"] .line-tab-status-dot { animation: none; }
  .line-tab[data-mem-health="broken"] .line-tab-health-dot { animation: none; }
}
.line-tab-status-announcer {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* A 3D card's build light (user decisions 2026-09-25): its part's build, not its line's chat, and
   only yellow — the line tab's pulsing dot while a build asked of the card is under way, and
   nothing otherwise. Title and aria-label carry the plain-language meaning. */
.model3d-card-build-signal {
  display: inline-flex;
  flex: 0 0 12px;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}
.model3d-card-build-signal[hidden] { display: none !important; }
.model3d-card-build-signal[data-build-status] .line-tab-status-dot { display: inline-flex; }
.model3d-card-build-signal[data-build-status="running"] .line-tab-status-dot {
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--lt-run) 70%, #fff), var(--lt-run));
}
.model3d-card-build-signal[data-build-status="running"] .line-tab-status-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lt-run) 42%, transparent) 0%, transparent 70%);
  animation: line-tab-sig-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .model3d-card-build-signal[data-build-status="running"] .line-tab-status-dot::before { animation: none; }
}
/* Pinned tabs wear a small tilted pin in front of the label. Badge only — the
   pin/unpin action itself stays in the ⋮ menu. */
.line-tab-pin {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--ink-soft);
  opacity: 0.72;
  line-height: 1;
  pointer-events: none;
}
.line-tab-pin svg {
  width: 12px;
  height: 12px;
  display: block;
  transform: rotate(-40deg);
}
.line-tab.active .line-tab-pin {
  color: var(--ink);
  opacity: 0.9;
}
body.dark .line-tab-pin {
  color: rgba(255, 255, 255, 0.72);
}
body.dark .line-tab.active .line-tab-pin {
  color: #ffffff;
}
.line-tab-action,
.line-tab-close {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  padding: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.line-tab-menu-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: currentColor;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.line-tab-menu-btn svg {
  width: 12px;
  height: 12px;
  display: block;
}
.line-tab:hover .line-tab-menu-btn,
.line-tab:focus-within .line-tab-menu-btn,
.line-tab.active .line-tab-menu-btn,
.line-tab-menu-open .line-tab-menu-btn {
  opacity: 0.68;
  pointer-events: auto;
}
.line-tab-menu-btn:hover,
.line-tab-menu-btn:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  opacity: 1;
  outline: none;
}
.line-tab-action {
  opacity: 0.48;
}
.line-tab-close {
  opacity: 0;
  color: var(--ink-dim);
  pointer-events: none;
}
.line-tab:not(:hover):not(:focus-within):not(.active) .line-tab-action {
  opacity: 0;
  pointer-events: none;
}
.line-tab:hover .line-tab-close,
.line-tab:focus-within .line-tab-close,
.line-tab:focus-visible .line-tab-close {
  opacity: 0.68;
  pointer-events: auto;
}
.line-tab:hover .line-tab-action,
.line-tab:focus-within .line-tab-action,
.line-tab-action:focus-visible,
.line-tab-menu-open .line-tab-action {
  opacity: 1;
  pointer-events: auto;
}
.line-tab-action:hover,
.line-tab-action:focus-visible,
.line-tab-close:hover,
.line-tab-close:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  outline: none;
}
.line-tab-close:hover,
.line-tab-close:focus-visible {
  color: var(--red);
}
.line-picker-chip .float-line-action {
  opacity: 0.68;
  pointer-events: auto;
  border: 0;
  background: transparent;
}
.line-picker-chip .float-line-action:hover,
.line-picker-chip .float-line-action:focus-visible {
  opacity: 1;
  background: transparent;
}
.line-tab-rename-input {
  min-width: 64px;
  max-width: 180px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  padding: 2px 6px;
  font: inherit;
  outline: none;
}
.line-tab-menu,
.line-tab-confirm {
  position: fixed;
  z-index: 9000;
  font-family: var(--sans);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
  color: var(--ink-soft);
}
.line-tab-confirm {
  background: var(--paper);
}
.line-tab-menu {
  background: var(--paper);
  width: 132px;
  padding: 5px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.line-drafts-menu {
  width: 228px;
  max-height: min(360px, calc(100vh - 56px));
  overflow-y: auto;
}
.line-drafts-menu-title {
  padding: 6px 9px 5px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.line-drafts-menu-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-tab-menu-item {
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.35;
  padding: 7px 9px;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.line-tab-menu-item:hover,
.line-tab-menu-item:focus-visible {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  outline: none;
}
.line-tab-menu-item.danger,
.line-tab-confirm-delete {
  color: rgba(210,110,95,0.82);
}
.line-tab-confirm {
  width: 220px;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 10px 11px 11px;
}
.line-tab-confirm-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.line-tab-confirm-sub {
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin-top: 3px;
}
.line-tab-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 11px;
}
.line-tab-confirm-actions button {
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 5px 8px;
}
.line-tab-confirm-cancel {
  color: var(--ink-dim);
}
.line-tab-confirm-cancel:hover,
.line-tab-confirm-cancel:focus-visible {
  border-color: rgba(236,233,225,0.12);
  color: var(--ink-soft);
  outline: none;
}
.line-tab-confirm-delete:hover,
.line-tab-confirm-delete:focus-visible {
  background: rgba(210,110,95,0.10);
  outline: none;
}
.line-tab-confirm-delete:disabled { opacity: 0.55; cursor: default; }
.line-tab-dot { display: none; }
.line-tab-sep {
  display: none;
}


/* ── Project switcher dropdown ──── */
.project-switcher-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--ink-dim);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.project-switcher-btn:hover {
  color: var(--ink);
  background: transparent;
}
.project-switcher-menu {
  position: absolute; top: calc(100% + 7px); left: 0; right: auto; z-index: 1500;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 8px; padding: 4px 0; min-width: 190px; max-width: 280px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.project-switcher-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 14px; font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.project-switcher-item:hover { background: rgba(128,128,128,0.1); }
.project-switcher-item.active { color: var(--pass-3); font-weight: 600; }

/* ── Floating chat button (below project bar) ──── */
.floating-chat-btn {
  position: absolute;
  top: 64px;
  left: 28px;
  z-index: 4;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.floating-chat-btn:hover {
  color: var(--ink);
}

/* === SECTION: context-panel === */
/* Owner: context-panel — input bar context strip, context items, add menu, pick mode, reminder. */
/* ── Context ─────────────────────────────────────── */

.context {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
  min-height: 26px;
  cursor: grab;
}
.context::-webkit-scrollbar { display: none; }
.context.is-dragging { cursor: grabbing; user-select: none; }
.context.context-fade-r {
  -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, black 88%, transparent 100%);
}
.context.context-fade-l {
  -webkit-mask-image: linear-gradient(to left, black 88%, transparent 100%);
  mask-image: linear-gradient(to left, black 88%, transparent 100%);
}
.context.context-fade-lr {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 88%, transparent 100%);
}

/* Attach icon — always visible */
.context-attach {
  position: absolute;
  left: calc(50% + 28px);
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  z-index: 2;
}
.context-attach:hover { color: var(--ink); }
.context-attach svg { width: 16px; height: 16px; }

/* Item labels — plain text chips */
/* @sas claim: Gives context-panel rows more readable rhythm and clearer active-versus-covered contrast without changing existing hover behavior or row actions. terms: context-item, covered context, context panel row, row breathing, readable done state id: 3654:context-panel-reading-rows timestamp: 2026-05-09T15:43:00.000Zlive: true */
.context-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: color 0.15s, opacity 0.15s, box-shadow 0.15s;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 6px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.context-item:hover { color: var(--ink); }
.context-item.covered {
  opacity: 0.62;
  color: var(--ink-dim);
  text-decoration: none;
  background: transparent;
  border-color: color-mix(in srgb, var(--ink) 6%, transparent);
}
.context-item.covered::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.context-item.covered:hover { opacity: 0.74; }

/* Separator dot between items */
.context-sep {
  color: var(--ink-ghost);
  font-size: 8px;
  flex-shrink: 0;
  user-select: none;
}

/* Item actions — × and cover eye */
.context-item-x, .context-item-cover {
  cursor: pointer;
  margin-left: 3px;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s;
  vertical-align: middle;
}
.context-item-x { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-dim); }
.context-item-x svg { width: 10px; height: 10px; stroke-width: 1.85; }
.context-item-cover { display: inline-flex; align-items: center; color: var(--ink-dim); }
.context-item-cover svg { width: 10px; height: 10px; stroke-width: 1.85; }
.context-item:hover .context-item-x,
.context-item:hover .context-item-cover { opacity: 1; }
.context-item-x:hover { color: var(--red, #c0392b); }
.context-item-cover:hover { color: var(--ink); }
.context-item.covered .context-item-cover { opacity: 0.8; }

/* Demo highlight pulse (onboarding) */
@keyframes demo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(184,150,11,0.6); }
  40% { box-shadow: 0 0 0 8px rgba(184,150,11,0.3); }
  70% { box-shadow: 0 0 0 12px rgba(184,150,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,150,11,0); }
}
.demo-pulse {
  animation: demo-pulse 0.8s ease-out 3;
  border-radius: 6px;
  position: relative;
  z-index: 100;
}

/* Drag-over */
.context.drag-over { background: rgba(28,26,22,0.05); border-radius: 6px; }
body.dark .context.drag-over { background: rgba(230,228,220,0.05); }
#context-panel.drag-over { outline: 1px dashed var(--ink-soft); background: rgba(28,26,22,0.03); }
body.dark #context-panel.drag-over { outline: 1px dashed var(--ink-soft); background: rgba(230,228,220,0.04); }

/* ── Context add menu ───────────────────────────── */
.context-add-menu {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 200;
  overflow: hidden;
  min-width: 130px;
}
body.dark .context-add-menu {
  background: var(--charcoal, #1e1c18);
}
.context-add-menu-item {
  display: block;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.context-add-menu-item:hover {
  background: rgba(28,26,22,0.06);
  color: var(--ink);
}
body.dark .context-add-menu-item:hover {
  background: rgba(230,228,220,0.06);
}

/* ── Context project picker ─────────────────────── */
/* Context pick mode */
#context-pick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--paper-dark, rgba(255,255,255,0.04));
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.context-pick-bar-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.context-pick-bar-done {
  font-family: var(--mono);
  font-size: var(--text-xs);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 3px 10px;
  color: var(--ink-soft);
  cursor: pointer;
}
.context-pick-bar-done:hover { color: var(--ink); border-color: var(--ink-dim); }
.context-pick-cb {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--ink);
  margin-right: 4px;
}
.context-pick-checked { opacity: 0.5; }
.file-item .context-pick-cb { position: absolute; top: 10px; left: 10px; }
.file-item:has(.context-pick-cb) { padding-left: 32px; }

.context-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.context-picker-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  width: 340px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.dark .context-picker-panel {
  background: var(--charcoal, #1e1c18);
}
.context-picker-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  padding: 12px 16px 8px;
}
.context-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
  scrollbar-width: none;
}
.context-picker-section {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  padding: 10px 8px 4px;
}
.context-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s;
}
.context-picker-item:hover {
  background: rgba(28,26,22,0.06);
}
body.dark .context-picker-item:hover {
  background: rgba(230,228,220,0.06);
}
.line-attach-picker-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
}
.line-attach-picker-item.shelved,
.line-attach-picker-item:disabled {
  opacity: .42;
  cursor: default;
}
.line-attach-picker-item.saving {
  opacity: .7;
}
.context-picker-kind {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-dim);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 3px;
  flex-shrink: 0;
}
.context-picker-name {
  font-family: var(--serif);
  font-size: var(--text-md);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-picker-meta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-left: 6px;
  flex-shrink: 0;
}
.context-picker-loading {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-ghost);
  padding: 20px 8px;
  text-align: center;
}
.context-picker-mode {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.context-picker-mode-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.context-picker-mode-btn:hover {
  background: var(--ink-soft);
  color: var(--paper);
}
.context-mode-badge {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0 3px;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ── Context reminder (per-turn) ────────────────── */
.context-reminder {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.context-reminder-icon {
  color: var(--ink-ghost);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.context-reminder-icon svg { width: 13px; height: 13px; }
.context-reminder-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  flex-shrink: 0;
  user-select: none;
}
.context-reminder-items {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.context-reminder-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
  padding: 2px 0;
}
.context-reminder-item.covered-item {
  opacity: 0.58;
  color: var(--ink-dim);
  text-decoration: none;
}
.context-reminder-sep {
  color: var(--ink-ghost);
  font-size: 8px;
  user-select: none;
}
.context-reminder-x, .context-reminder-cover {
  cursor: pointer;
  margin-left: 3px;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s;
  vertical-align: middle;
}
.context-reminder-x { display: inline-flex; align-items: center; color: var(--ink-dim); }
.context-reminder-x svg { width: 10px; height: 10px; display: block; }
.context-reminder-cover { display: inline-flex; align-items: center; color: var(--ink-dim); }
.context-reminder-cover svg { width: 10px; height: 10px; }
.context-reminder-item:hover .context-reminder-x,
.context-reminder-item:hover .context-reminder-cover { opacity: 1; }
.context-reminder-x:hover { color: var(--red, #c0392b); }
.context-reminder-cover:hover { color: var(--ink); }
.context-reminder-item.covered-item .context-reminder-cover { opacity: 0.8; }

/* Context item preview overlay */
.context-preview-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.context-preview-box {
  background: var(--paper); color: var(--ink);
  border-radius: 6px; padding: 24px;
  max-width: min(700px, 90vw); max-height: 85vh;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow-y: auto;
}
.context-preview-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--ink-dim); line-height: 1;
}
.context-preview-close:hover { color: var(--ink); }
.context-preview-title {
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--ink-dim); padding-right: 24px;
}
.context-preview-img {
  max-width: 100%; max-height: calc(85vh - 80px);
  object-fit: contain; border-radius: 3px;
}
.context-preview-text {
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--ink); white-space: pre-wrap; word-break: break-word;
  overflow-y: auto; max-height: calc(85vh - 80px);
  margin: 0; line-height: 1.6;
}

.brand-right {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--ink-soft);
  opacity: 0.85;
  line-height: 1.2;
  text-align: right;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand-icon { flex-shrink: 0; opacity: 0.7; }
.brand-text { display: flex; flex-direction: column; align-items: flex-end; }
.brand-sub {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
/* ── Projects page ──────────────────────────────── */
.pj-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 20px;
}
.pj-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  min-height: 54px;
  font-family: var(--sans);
  color: var(--ink-soft);
  padding: 14px 40px 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.pj-item.pj-system { background: rgba(184,150,11,0.04); }
body.dark .pj-item.pj-system { background: rgba(184,150,11,0.06); }
.pj-item.pj-system .pj-item-name { color: var(--pass-3); }
.pj-item:hover { color: var(--ink); border-color: var(--ink-dim); }
body.dark .pj-item:hover { border-color: var(--ink-dim); }
.pj-item.active { color: var(--ink-heavy); border-color: var(--ink-dim); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
body.dark .pj-item.active { box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.pj-item-name {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-item-archive {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  line-height: 0;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.pj-item:hover .pj-item-archive,
.pj-item-archive:focus-visible { opacity: 1; }
.pj-item-archive:hover { color: var(--ink); background: rgba(28,26,22,0.06); }
body.dark .pj-item-archive:hover { background: rgba(212,207,197,0.08); }
.pj-new-btn {
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink-dim);
  background: rgba(150,140,120,0.04);
  border: 1px dashed var(--rule);
  width: 200px;
  min-height: 54px;
  padding: 16px 18px !important;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
body.dark .pj-new-btn { background: rgba(255,255,255,0.02); }
.pj-new-btn:hover { color: var(--ink); border-color: var(--ink-dim); background: rgba(150,140,120,0.07); }
.pj-new-input {
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  outline: none;
  padding: 10px 14px;
  margin: 8px 20px;
  width: calc(100% - 40px);
  transition: border-color 0.2s;
}
.pj-new-input:focus { border-bottom-color: var(--ink-dim); }

/* ── Deleted projects section ──────────────────── */
.pj-deleted-toggle {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink-dim); opacity: 0.4; padding: 0;
  transition: opacity 0.15s;
}
.pj-deleted-toggle:hover { opacity: 0.7; }
.pj-archived-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; border-bottom: 1px solid var(--rule);
}
.pj-archived-name {
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink); opacity: 0.55; flex: 1;
}
.pj-archived-date {
  font-family: var(--sans); font-size: 11px;
  color: var(--ink-dim); opacity: 0.4; white-space: nowrap;
}
.pj-archived-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pj-archived-restore, .pj-archived-destroy {
  background: none; border: 1px solid var(--rule); cursor: pointer;
  font-family: var(--sans); font-size: 11px;
  color: var(--ink-dim); padding: 2px 7px; border-radius: 3px;
  opacity: 0.6; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.pj-archived-restore:hover { opacity: 1; }
.pj-archived-destroy:hover { opacity: 1; color: #e05555; border-color: #e05555; }
.pj-archived-empty {
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink-dim); opacity: 0.4; padding: 12px 20px;
}

/* ── Project Dashboard ─────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: 0 20px 20px;
}
.dash-card {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 90px;
}
.dash-card:hover { background: var(--paper-dark); border-color: var(--ink-dim); }
.dash-card-icon { color: var(--ink-dim); margin-bottom: 2px; }
.dash-card-icon svg { display: block; }
.dash-card-title {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-heavy);
  letter-spacing: 0.03em;
}
.dash-card-count {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-dim);
}
.dash-card-sub {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-top: auto;
}
.dash-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}
.dash-rename-input {
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink-heavy);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  outline: none;
  padding: 4px 0;
  flex: 1;
  transition: border-color 0.2s;
}
.dash-rename-input:focus { border-bottom-color: var(--ink-dim); }

/* @sas-section
 * id: code-city:runs-workspace
 * claim: Runs fits the standard rail and owns the live software city outright; the relationship galaxy that shared this stage under a 3D rail is gone.
 * terms: Code City workspace, Runs rail, standard rail, responsive 3D stage, activity filters, live agents
 */
#runs-view {
  width: 100%;
  max-width: none;
}
.wr-view-host > #runs-view {
  padding: 0 !important;
  overflow: hidden !important;
}
.wr-view-host > #runs-view .dash-explore {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}
.wr-view-host > #runs-view .dash-explore-head {
  flex: 0 0 auto;
  align-items: stretch;
  flex-direction: column;
  margin: 0;
  padding: 0 10px 8px;
}
.wr-view-host > #runs-view .dash-explore-title { display: none; }
.wr-view-host > #runs-view .dash-explore-tools { align-items: stretch; }
.wr-view-host > #runs-view .code-city-filters {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wr-view-host > #runs-view .code-city-filters select {
  width: 100%;
  max-width: none;
}
.wr-view-host > #runs-view .dash-explore-stage {
  flex: 1;
  height: auto;
  min-height: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}
.dash-explore {
  min-width: 0;
  padding: 0 0 22px;
}
.dash-explore-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.dash-explore-title {
  color: var(--ink-heavy);
  font: 600 15px/1.3 var(--sans);
  letter-spacing: 0;
}
.dash-explore-summary {
  margin-top: 3px;
  color: var(--ink-dim);
  font: 11px/1.45 var(--mono);
}
.dash-explore-tools {
  display: flex;
  align-items: center;
  gap: 7px;
}
.code-city-filters {
  display: none;
  align-items: center;
  gap: 5px;
}
.code-city-view-live .code-city-filters { display: flex; }
.code-city-filters select {
  max-width: 142px;
  height: 30px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-dim);
  font: 10px/1 var(--sans);
}
.dash-code-search[hidden] { display: none; }
.dash-code-search {
  width: min(220px, 28vw);
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  outline: 0;
  background: var(--paper);
  color: var(--ink-heavy);
  font: 11px/1 var(--mono);
  letter-spacing: 0;
}
.dash-code-search::placeholder { color: var(--ink-faint); }
.dash-code-search:focus {
  border-color: color-mix(in srgb, var(--ink) 44%, var(--rule));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent);
}
.dash-explore-stage {
  position: relative;
  width: 100%;
  height: clamp(560px, calc(100vh - 220px), 860px);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
  border-radius: 8px;
  background: #07090c;
  isolation: isolate;
}
.dash-explore-canvas {
  position: absolute;
  inset: 0;
  min-width: 0;
  cursor: grab;
}
.dash-explore-canvas:active { cursor: grabbing; }
.dash-explore-canvas canvas { display: block; }
.dash-explore-canvas canvas { filter: saturate(1.12) contrast(1.04); }
.code-city-webgl {
  width: 100%;
  height: 100%;
  outline: none;
}
.code-city-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.code-city-landmark-labels { z-index: 2; }
.code-city-activity-labels { z-index: 4; }
.code-city-district-label {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 180px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--district-color);
  border-radius: 3px;
  background: rgba(7, 9, 12, 0.82);
  color: #efeee9;
  font: 600 10px/1.2 var(--sans);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(7px);
  opacity: 0.84;
  will-change: transform;
}
.code-city-district-label b {
  margin-left: 6px;
  color: var(--district-color);
  font: 500 9px/1 var(--mono);
}
.code-city-view-live .code-city-district-label { display: none; }
.code-city-view-live .dash-explore-legend { display: none; }
.code-city-landmark-label {
  position: absolute;
  z-index: 3;
  max-width: 136px;
  padding: 3px 7px 3px 9px;
  overflow: hidden;
  border: 1px solid rgba(224, 229, 235, 0.22);
  border-left: 3px solid var(--rule);
  border-radius: 2px;
  background: rgba(7, 9, 12, 0.86);
  color: rgba(236, 239, 242, 0.72);
  font: 600 9px/1.2 var(--mono);
  letter-spacing: 0.055em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
  will-change: transform;
}
.code-city-landmark-label.is-active {
  border-color: rgba(245, 246, 242, 0.5);
  border-left-color: rgba(245, 246, 242, 0.94);
  color: rgba(255, 255, 252, 0.96);
  box-shadow: 0 0 12px rgba(245, 246, 242, 0.18);
}
.code-city-tooltip {
  position: absolute;
  z-index: 5;
  max-width: min(360px, calc(100% - 24px));
  padding: 6px 8px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: rgba(7, 9, 12, 0.94);
  color: #f4f1ea;
  font: 10px/1.4 var(--mono);
  letter-spacing: 0;
  pointer-events: none;
  transform: translate(12px, 12px);
}
.code-city-tooltip[hidden] { display: none; }
.code-city-activity-label {
  position: absolute;
  z-index: 4;
  max-width: 138px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--activity-color) 64%, rgba(255, 255, 255, 0.18));
  border-radius: 5px;
  background: rgba(7, 9, 12, 0.78);
  color: #f4f1ea;
  font: 600 11px/1.25 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--activity-color) 18%, transparent);
  opacity: 0.14;
  transition: opacity 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.code-city-activity-label.is-model {
  max-width: 154px;
  border-width: 2px;
  font-size: 12px;
  font-weight: 750;
}
.code-city-activity-label.is-hovered,
.code-city-activity-label.is-selected {
  background: rgba(7, 9, 12, 0.96);
  box-shadow: 0 0 20px color-mix(in srgb, var(--activity-color) 34%, transparent);
  opacity: 1;
}
.code-city-activity-label.is-thinking::after {
  content: ' · thinking';
  color: #aaa8a2;
}
.code-city-minimap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 156px;
  height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(7, 9, 12, 0.86);
  pointer-events: none;
}
.dash-graph-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.dash-graph-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 180px;
  padding: 5px 8px 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--node-color);
  border-radius: 3px;
  background: rgba(7, 9, 12, 0.78);
  color: #efeee9;
  font: 600 10px/1.2 var(--sans);
  letter-spacing: 0;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  opacity: 0.76;
  transition: opacity 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}
.dash-graph-label span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-graph-label b {
  color: var(--node-color);
  font: 500 10px/1 var(--mono);
}
.dash-graph-label.is-project {
  max-width: 220px;
  padding: 7px 10px;
  border-top-width: 3px;
  font-size: 12px;
  opacity: 0.94;
}
.dash-graph-label.is-selected {
  opacity: 1;
  box-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 35%, transparent);
}
.dash-explore-detail {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  grid-template-areas: "kicker value" "title value" "copy action";
  column-gap: 18px;
  width: min(390px, calc(100% - 32px));
  padding: 11px 12px 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--dash-detail-color, #70a6d9);
  border-radius: 5px;
  background: rgba(7, 9, 12, 0.88);
  color: #f4f1ea;
  backdrop-filter: blur(12px);
  z-index: 3;
}
.dash-detail-kicker {
  grid-area: kicker;
  color: #aaa8a2;
  font: 500 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0;
}
.dash-detail-title {
  grid-area: title;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font: 600 14px/1.35 var(--sans);
  letter-spacing: 0;
}
.dash-detail-copy {
  grid-area: copy;
  margin-top: 5px;
  color: #c6c2ba;
  font: 11px/1.5 var(--sans);
}
.dash-detail-value {
  grid-area: value;
  align-self: center;
  color: var(--dash-detail-color, #fff);
  font: 300 28px/1 var(--mono);
}
.dash-detail-open {
  grid-area: action;
  align-self: end;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4f1ea;
  font: 500 10px/1 var(--sans);
  letter-spacing: 0;
  cursor: pointer;
}
.dash-detail-open:hover {
  border-color: color-mix(in srgb, var(--dash-detail-color) 58%, white);
  background: rgba(255, 255, 255, 0.13);
}
.dash-explore-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 0;
}
.dash-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-dim);
  font: 10px/1.2 var(--mono);
  letter-spacing: 0;
  cursor: pointer;
}
.dash-legend-item:hover {
  border-color: color-mix(in srgb, var(--legend-color) 58%, var(--rule));
  color: var(--ink-heavy);
}
.dash-legend-item b {
  color: var(--legend-color);
  font-weight: 500;
}
.dash-legend-swatch {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--legend-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--legend-color) 72%, transparent);
}
@media (max-width: 720px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #runs-view { padding-inline: 12px; }
  .dash-explore-head { align-items: flex-start; }
  .dash-explore-tools { flex: 0 0 auto; }
  .dash-code-search { width: min(154px, 40vw); }
  .dash-explore-stage { height: max(500px, 68vh); min-height: 500px; }
  .dash-explore-detail {
    top: auto !important;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    height: auto;
    transform: none !important;
  }
  .dash-graph-label { max-width: 122px; }
  .dash-graph-label.is-project { max-width: 156px; }
  .code-city-district-label { max-width: 116px; font-size: 9px; }
  .code-city-minimap { right: 10px; bottom: 100px; width: 112px; height: 78px; }
  .dash-detail-copy { display: none; }
  .dash-explore-legend { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .dash-legend-item { flex: 0 0 auto; }
}

/* === SECTION: plugins === */
/* Owner: plugins — MCP plugin panel, catalog grid, connect sheet. */
/* ── Plugins view ──────────────────────────────── */
/* @sas claim: Plugin section wrapper — vertical stack with spacing between Connected and Catalog sections. terms: plugin-section id: plugins:css:section timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-section { margin-bottom: 32px; }
/* @sas claim: Plugin section header row — space-between flex for title and add button. terms: plugin-section-header id: plugins:css:section-header timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* @sas claim: Plugin section title — small caps label. terms: plugin-section-title id: plugins:css:section-title timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-section-title { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .5; color: var(--ink); }
/* @sas claim: Plugin add button — filled ink button to open the connect sheet. terms: plugin-add-btn id: plugins:css:add-btn timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-add-btn { font-family: var(--sans); font-size: 12px; padding: 4px 10px; background: var(--ink); color: var(--paper); border: none; border-radius: 4px; cursor: pointer; opacity: .85; }
/* @sas claim: Plugin add button hover — full opacity. terms: plugin-add-btn hover id: plugins:css:add-btn-hover timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-add-btn:hover { opacity: 1; }
/* @sas claim: Plugin card row — bordered flex row showing connected server name and action controls. terms: plugin-card id: plugins:css:card timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 6px; margin-bottom: 8px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.plugin-card-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plugin-card-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* @sas claim: Plugin card left column — stacks name and tool count vertically. terms: plugin-card-left id: plugins:css:card-left timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-card-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* @sas claim: Plugin card server name label. terms: plugin-card-name id: plugins:css:card-name timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-card-name { font-family: var(--sans); font-size: 13px; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* @sas claim: Plugin card tool-count meta label — dimmed. terms: plugin-card-meta id: plugins:css:card-meta timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-card-meta { font-family: var(--sans); font-size: 11px; opacity: .45; color: var(--ink); }
.plugin-health { display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; font-family: var(--sans); font-size: 10px; color: var(--ink); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plugin-health-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.plugin-health--connected .plugin-health-dot { background: #1f7a46; }
.plugin-health--no_tools .plugin-health-dot, .plugin-health--not_checked .plugin-health-dot { background: #9a7a18; }
.plugin-health--auth_failed .plugin-health-dot, .plugin-health--protocol_mismatch .plugin-health-dot, .plugin-health--timeout .plugin-health-dot, .plugin-health--blocked .plugin-health-dot, .plugin-health--not_found .plugin-health-dot, .plugin-health--server_error .plugin-health-dot, .plugin-health--invalid_response .plugin-health-dot, .plugin-health--error .plugin-health-dot { background: #c0392b; }
/* @sas claim: Plugin card actions row — toggle and icon buttons aligned right. terms: plugin-card-actions id: plugins:css:card-actions timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-card-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* === SECTION: mcp-lane-state === */
/* @sas claim: The MCP card's per-line row — the scope label plus the SAME PAIR of segmented controls a Skills rail row carries: scope (Line / All lines) then state (Hidden/Hinted/Loaded), with .skill-item-state / .skill-state-seg reused verbatim rather than restyled, and the prompt cost of the chosen state named beside them. A server switched off in the hub shows the off note instead of a control. | terms: per-lane picker, in this line, all lines, plugin-card-lane, plugin-lane-scope, plugin-lane-state, hidden hinted loaded | id: plugins:css:card-lane | live: true */
.plugin-card-lane { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding-top: 7px; }
.plugin-card-lane-label { font-family: var(--sans); font-size: 11px; color: var(--ink); opacity: .55; }
.plugin-card-lane-cost { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--ink); opacity: .38; }
.plugin-card-lane .skill-item-state { margin-top: 0; }
/* The scope pair reads as the quieter of the two: it says where a write lands, not what rides. */
.plugin-card-lane .plugin-lane-scope { opacity: .82; }
.plugin-card-lane[data-off="1"] .plugin-card-lane-label { opacity: .38; }
/* === END SECTION: mcp-lane-state === */
.plugin-tools-review { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding-top: 6px; }
.plugin-tools-review summary { cursor: pointer; font-family: var(--sans); font-size: 11px; color: var(--ink); opacity: .55; }
.plugin-tool-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.plugin-tool-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 28px; font-family: var(--sans); font-size: 11px; color: var(--ink); }
.plugin-tool-copy { display: flex; flex-direction: column; min-width: 0; }
.plugin-tool-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-tool-desc { opacity: .42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-tool-risk, .plugin-tool-new { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); opacity: .7; }
.plugin-tool-risk--high { color: #c0392b; background: color-mix(in srgb, #c0392b 10%, transparent); }
.plugin-tool-risk--medium, .plugin-tool-risk--unknown { color: #b45f06; background: color-mix(in srgb, #e67e22 10%, transparent); }
.plugin-tool-risk--low { color: #1f7a46; background: color-mix(in srgb, #27ae60 10%, transparent); }
.plugin-tool-empty { font-family: var(--sans); font-size: 11px; color: var(--ink); opacity: .4; padding: 4px 0; }
/* @sas claim: Plugin toggle label wrapper — positions checkbox and track. terms: plugin-toggle id: plugins:css:toggle timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
/* @sas claim: Plugin toggle hidden native checkbox. terms: plugin-toggle input id: plugins:css:toggle-input timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
/* @sas claim: Plugin toggle track — pill background that transitions color on checked state. terms: plugin-toggle-track id: plugins:css:toggle-track timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-toggle-track { width: 32px; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .15s; }
/* @sas claim: Plugin toggle checked — fills track with ink when enabled. terms: plugin-toggle checked id: plugins:css:toggle-checked timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-toggle input:checked + .plugin-toggle-track { background: var(--ink); }
/* @sas claim: Plugin toggle knob — circular white dot inside the track. terms: plugin-toggle-track after id: plugins:css:toggle-knob timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-toggle-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform .15s; }
/* @sas claim: Plugin toggle knob slides right when checked. terms: plugin-toggle checked knob id: plugins:css:toggle-knob-checked timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-toggle input:checked ~ .plugin-toggle-track::after { transform: translateX(14px); }
/* @sas claim: Plugin icon button — ghost button for refresh and disconnect actions. terms: plugin-icon-btn id: plugins:css:icon-btn timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-icon-btn { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--ink); opacity: .4; padding: 2px 4px; line-height: 1; }
/* @sas claim: Plugin icon button hover — raises opacity. terms: plugin-icon-btn hover id: plugins:css:icon-btn-hover timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-icon-btn:hover { opacity: .8; }
/* @sas claim: Plugin danger icon button hover — red on disconnect. terms: plugin-icon-btn--danger id: plugins:css:icon-btn-danger timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-icon-btn--danger:hover { color: #c0392b; opacity: 1; }
/* @sas claim: Plugin empty/loading state — muted placeholder text. terms: plugin-empty, plugin-loading id: plugins:css:empty timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-empty, .plugin-loading { font-family: var(--sans); font-size: 13px; color: var(--ink); opacity: .4; margin: 0; }
/* @sas claim: Plugin catalog grid — responsive auto-fill columns for catalog cards. terms: plugin-catalog-grid id: plugins:css:catalog-grid timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
/* @sas claim: Plugin catalog card — bordered column card for a curated MCP server entry. terms: plugin-catalog-card id: plugins:css:catalog-card timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-catalog-card { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
/* @sas claim: Plugin catalog card top row — flex row aligning name and safety dot. terms: plugin-catalog-card-top, flex, safety dot, name id: plugins:css:catalog-card-top timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-catalog-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.plugin-catalog-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plugin-logo { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: transparent; overflow: visible; }
.plugin-logo--connected { width: 32px; height: 32px; flex-basis: 32px; }
.plugin-logo-img { width: 22px; height: 22px; display: block; object-fit: contain; }
.plugin-logo--connected .plugin-logo-img { width: 21px; height: 21px; }
.plugin-logo-initials { display: none; font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: 0; opacity: .72; }
.plugin-logo--fallback .plugin-logo-initials { display: inline; }
.plugin-logo--fallback .plugin-logo-img { display: none; }
/* @sas claim: Plugin safety dot — small colored circle indicating data safety level of a plugin. terms: plugin-safety-dot, safety level, data risk indicator id: plugins:css:safety-dot timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-safety-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; cursor: help; }
/* @sas claim: Safety dot — local (green): data stays on device. terms: plugin-safety-dot, local, green id: plugins:css:safety-dot-local timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-safety-dot--local { background: #27ae60; }
/* @sas claim: Safety dot — low risk (blue): public/search data only. terms: plugin-safety-dot, low, blue id: plugins:css:safety-dot-low timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-safety-dot--low { background: #3498db; }
/* @sas claim: Safety dot — medium risk (amber): project or productivity data leaves GI. terms: plugin-safety-dot, medium, amber id: plugins:css:safety-dot-medium timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-safety-dot--medium { background: #e67e22; }
/* @sas claim: Safety dot — high risk (red): infrastructure, billing, or sensitive data. terms: plugin-safety-dot, high, red id: plugins:css:safety-dot-high timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-safety-dot--high { background: #e74c3c; }
/* @sas claim: Plugin safety note — small muted text below description explaining what data leaves GI. terms: plugin-safety-note, data note, privacy, safety info id: plugins:css:safety-note timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-safety-note { font-family: var(--sans); font-size: 10px; opacity: .4; color: var(--ink); line-height: 1.4; }
/* @sas claim: Plugin desktop-only badge — pill label shown on catalog cards that require the GI Desktop app. terms: plugin-desktop-badge, desktop only, badge, pill id: plugins:css:desktop-badge timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-desktop-badge { display: inline-block; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); opacity: .6; }
/* @sas claim: Plugin catalog card name — bold service name. terms: plugin-catalog-name id: plugins:css:catalog-name timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-catalog-name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* @sas claim: Plugin catalog card description — muted one-line caption. terms: plugin-catalog-desc id: plugins:css:catalog-desc timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-catalog-desc { font-family: var(--sans); font-size: 11px; opacity: .5; color: var(--ink); flex: 1; }
/* @sas claim: Plugin catalog connect button — outlined ghost that opens the connect sheet pre-filled. terms: plugin-catalog-btn id: plugins:css:catalog-btn timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-catalog-btn { align-self: flex-start; font-family: var(--sans); font-size: 11px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 3px; background: none; cursor: pointer; color: var(--ink); opacity: .7; }
/* @sas claim: Plugin catalog connect button hover. terms: plugin-catalog-btn hover id: plugins:css:catalog-btn-hover timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-catalog-btn:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* @sas claim: Plugin catalog search input — inline search bar in the catalog section header. terms: plugin-catalog-search, search, filter, input id: plugins:css:catalog-search timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-catalog-search { font-family: var(--sans); font-size: 12px; padding: 4px 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 4px; color: var(--ink); width: 140px; }
/* @sas claim: Plugin catalog search input focus state. terms: plugin-catalog-search focus id: plugins:css:catalog-search-focus timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-catalog-search:focus { outline: none; border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.plugin-catalog-offline-notice { font-family: var(--sans); font-size: 11px; color: var(--ink); opacity: 0.4; margin-left: 8px; display: inline-block; }
.plugin-auth-badge { font-family: var(--mono); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); opacity: 0.35; display: inline-block; }
/* @sas claim: Plugin catalog empty state — shown when search yields no results, with a request button. terms: plugin-catalog-empty, no results, request id: plugins:css:catalog-empty timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-catalog-empty { grid-column: 1/-1; display: flex; align-items: center; gap: 12px; padding: 16px 0; font-family: var(--sans); font-size: 13px; color: var(--ink); opacity: .5; }
/* @sas claim: Plugin request row — bottom of catalog, links to request a missing plugin. terms: plugin-request-row, missing, request id: plugins:css:request-row timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-request-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
/* @sas claim: Plugin request row label — muted text prompting the user to request a missing plugin. terms: plugin-request-label id: plugins:css:request-label timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-request-label { font-family: var(--sans); font-size: 12px; color: var(--ink); opacity: .4; }
/* @sas claim: Plugin request button — ghost outlined button to open the request sheet. terms: plugin-request-btn id: plugins:css:request-btn timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-request-btn { font-family: var(--sans); font-size: 12px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 4px; background: none; cursor: pointer; color: var(--ink); opacity: .6; }
/* @sas claim: Plugin request button hover. terms: plugin-request-btn hover id: plugins:css:request-btn-hover timestamp: 2026-05-12T00:00:00.000Zlive: true */
.plugin-request-btn:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* Plugin connect sheet */
/* @sas claim: Plugin connect sheet overlay — fixed full-viewport dim backdrop, hidden by default. terms: plugin-sheet-overlay id: plugins:css:sheet-overlay timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-overlay { display: none; position: fixed; inset: 0; z-index: 9000; background: color-mix(in srgb, #000 40%, transparent); align-items: center; justify-content: center; }
/* @sas claim: Plugin connect sheet overlay active state — flex-centered. terms: plugin-sheet-overlay active id: plugins:css:sheet-overlay-active timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-overlay.active { display: flex; }
/* @sas claim: Plugin connect sheet panel — paper card with shadow. terms: plugin-sheet id: plugins:css:sheet timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet { background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 8px; width: 420px; max-width: calc(100vw - 40px); box-shadow: 0 8px 32px color-mix(in srgb, #000 20%, transparent); }
/* @sas claim: Plugin connect sheet header — title and close button row with bottom border. terms: plugin-sheet-header id: plugins:css:sheet-header timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
/* @sas claim: Plugin connect sheet title text. terms: plugin-sheet-title id: plugins:css:sheet-title timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-title { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
/* @sas claim: Plugin connect sheet close button. terms: plugin-sheet-close id: plugins:css:sheet-close timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink); opacity: .4; line-height: 1; padding: 0 2px; }
/* @sas claim: Plugin sheet close button hover. terms: plugin-sheet-close hover id: plugins:css:sheet-close-hover timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-close:hover { opacity: .8; }
/* @sas claim: Plugin connect sheet body — column flex for form fields. terms: plugin-sheet-body id: plugins:css:sheet-body timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
/* @sas claim: Plugin form field label — small muted label above each input. terms: plugin-field-label id: plugins:css:field-label timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-field-label { font-family: var(--sans); font-size: 11px; opacity: .5; color: var(--ink); }
/* @sas claim: Plugin form field input/select — full-width text input with subtle background. terms: plugin-field-input id: plugins:css:field-input timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-field-input { width: 100%; padding: 7px 10px; font-family: var(--sans); font-size: 13px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 4px; color: var(--ink); box-sizing: border-box; }
/* @sas claim: Plugin form field focus — darkens border. terms: plugin-field-input focus id: plugins:css:field-input-focus timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-field-input:focus { outline: none; border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.plugin-connect-status { min-height: 16px; font-family: var(--sans); font-size: 11px; line-height: 1.35; color: var(--ink); opacity: .58; overflow-wrap: anywhere; }
/* @sas claim: Plugin connect sheet footer — right-aligned Cancel and Connect buttons. terms: plugin-sheet-footer id: plugins:css:sheet-footer timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-footer { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 8px; }
/* @sas claim: Plugin connect sheet cancel button — outlined ghost. terms: plugin-sheet-cancel id: plugins:css:sheet-cancel timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-cancel { font-family: var(--sans); font-size: 13px; padding: 6px 14px; background: none; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 4px; cursor: pointer; color: var(--ink); opacity: .6; }
/* @sas claim: Plugin cancel button hover. terms: plugin-sheet-cancel hover id: plugins:css:sheet-cancel-hover timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-cancel:hover { opacity: 1; }
/* @sas claim: Plugin connect submit button — filled ink primary CTA. terms: plugin-sheet-submit id: plugins:css:sheet-submit timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-submit { font-family: var(--sans); font-size: 13px; padding: 6px 16px; background: var(--ink); color: var(--paper); border: none; border-radius: 4px; cursor: pointer; }
/* @sas claim: Plugin submit button hover. terms: plugin-sheet-submit hover id: plugins:css:sheet-submit-hover timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-submit:hover { opacity: .85; }
/* @sas claim: Plugin submit button disabled — dimmed during connection fetch. terms: plugin-sheet-submit disabled id: plugins:css:sheet-submit-disabled timestamp: 2026-05-11T00:00:00.000Zlive: true */
.plugin-sheet-submit:disabled { opacity: .4; cursor: default; }

/* === SECTION: settings === */
/* Owner: settings — settings panel, billing, admin, BYOK, API keys. */
/* ── Settings ──────────────────────────────────── */
.settings-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 460px;
}
.settings-card-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-card-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  padding: 0 2px;
}
.settings-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--paper) 97%, var(--ink) 3%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
/* ── Connections hub ── */
.conn-zone-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: 0 2px 8px;
}
.conn-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--paper) 97%, var(--ink) 3%);
}
.conn-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.conn-card-head svg { color: var(--ink-soft); flex: 0 0 auto; }
.conn-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.conn-card-scope {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 6px;
}
#code-view .conn-card-scope { display: none; }
.conn-card-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.conn-card.is-connected .conn-card-desc { display: none; }
.conn-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.conn-status.is-connected {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pass-2, #3ab88e);
  background: color-mix(in srgb, var(--pass-2, #3ab88e) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pass-2, #3ab88e) 32%, transparent);
}
.conn-status.is-connected::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pass-2, #3ab88e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass-2, #3ab88e) 22%, transparent);
  flex: 0 0 auto;
}
.conn-card-actions,
.conn-card-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.conn-card-menu {
  position: relative;
}
.conn-card-menu > summary,
.conn-card-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
}
.conn-card-menu > summary::-webkit-details-marker,
.conn-card-details > summary::-webkit-details-marker { display: none; }
.conn-card-menu > summary {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 5px 9px;
  color: var(--ink-soft);
}
.conn-card-menu-panel {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  right: 0;
  min-width: 128px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
}
.conn-card-menu-panel .t-btn {
  width: 100%;
  text-align: left;
}
.conn-card-details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.conn-card-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.conn-card-details > summary::after {
  content: '+';
  color: var(--ink-dim);
}
.conn-card-details[open] > summary::after { content: '\2212'; }
.conn-card-detail-body { padding-top: 10px; }
.conn-card-detail-meta,
.conn-card-path {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.conn-card-path {
  margin-top: 5px;
  word-break: break-all;
}
.conn-card-message {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-dim);
}
.conn-card-message:empty { display: none; }
.conn-card-message[data-state="pending"] { color: var(--ink-soft); }
.conn-card-message[data-state="success"],
.conn-card-message[data-state="error"] { font-weight: 600; }
.conn-card-message[data-state="success"] { color: color-mix(in srgb, var(--pass-2) 48%, var(--ink) 52%); }
.conn-card-message[data-state="error"] { color: color-mix(in srgb, var(--red) 58%, var(--ink) 42%); }
.conn-card-getkey {
  display: inline-block;
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.conn-card-getkey:hover,
.conn-card-getkey:focus-visible { color: var(--ink); }
.conn-key-actions > input { min-width: min(220px, 100%) !important; }
@media (max-width: 480px) {
  .conn-key-actions > input { flex-basis: 100%; }
  .conn-key-actions > .t-btn { flex: 1 1 auto; }
}
.settings-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 2px;
}
.settings-storage-card { padding: 14px; }
.settings-storage-heading,
.settings-storage-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-storage-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  color: var(--ink);
}
.settings-storage-heading > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.settings-storage-title {
  font-size: 13px;
  font-weight: 600;
}
.settings-storage-scope {
  max-width: 34ch;
  font-size: 10px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.settings-storage-heading strong {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.settings-storage-row {
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
}
.settings-storage-row:first-child { padding-top: 11px; }
.settings-storage-row-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.settings-storage-row-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.settings-storage-row-detail {
  max-width: 35ch;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-dim);
}
.settings-storage-row-size {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
}
.settings-storage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
}
.settings-storage-actions[hidden] { display: none; }
.settings-storage-actions .t-btn:disabled {
  cursor: wait;
  opacity: .45;
}
.settings-storage-status {
  min-height: 16px;
  margin-top: 9px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.settings-storage-status[data-state="success"] { color: var(--pass-2, #3ab88e); }
.settings-storage-status[data-state="error"] { color: var(--danger, #c84f4f); }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink);
}
.settings-row:last-child { border-bottom: none; }
.settings-item {
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink-soft);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.settings-item:last-child { border-bottom: none; }
.settings-item.disabled { opacity: 0.4; cursor: default; }

/* ── Settings two-level nav ─────────────────── */
.settings-nav-list {
  display: flex;
  flex-direction: column;
}
.settings-nav-row {
  appearance: none;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 4px;
  cursor: pointer;
  margin: 0;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.settings-nav-row:last-child { border-bottom: none; }
.settings-nav-row:hover,
.settings-nav-row:focus-visible {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.settings-nav-row:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--ink-soft) 48%, transparent);
  outline-offset: -1px;
}
.settings-nav-row:hover svg,
.settings-nav-row:focus-visible svg {
  stroke: var(--ink-soft);
  transform: translateX(2px);
}
.settings-nav-row svg {
  flex: 0 0 auto;
  transition: transform 0.12s ease, stroke 0.12s ease;
}
.settings-nav-row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.settings-nav-row-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.settings-nav-row-summary {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-nav-row-summary:empty { display: none; }
.settings-nav-row-summary.summary--trial { color: var(--pass-3); }
.settings-nav-row-summary.summary--pastdue { color: var(--red); }
.settings-nav-links {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.settings-nav-link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 4px;
  border-radius: 4px;
}
.settings-nav-link:hover,
.settings-nav-link:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  outline: none;
}

/* ── Package billing card additions ─────────── */
.pkg-status-line {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.pkg-status-line--trial { color: var(--pass-3); }
.pkg-status-line--active { color: var(--pass-3); }
.pkg-status-line--pastdue { color: #c44; }
.pkg-tier-row--active {
  color: var(--pass-3);
}
.pkg-tier-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 3px;
}

/* ── Admin view ──────────────────────────────── */
.admin-section { margin-bottom: 28px; }
.admin-section-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.admin-section-title small { text-transform: none; letter-spacing: 0; }
.admin-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.admin-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--card, var(--paper));
  border: 1px solid var(--border);
}
.admin-stat-val {
  font-family: var(--mono);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--ink);
}
.admin-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin-top: 4px;
}
.admin-breakdown { margin-top: 14px; }
.admin-breakdown-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.admin-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  padding: 3px 0;
}
.admin-breakdown-row span:last-child { color: var(--ink); }
.admin-cost-daily { margin-top: 18px; }
.admin-cost-daily-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.admin-cost-daily-toggles { display: flex; gap: 4px; }
.admin-cost-range {
  font-size: 10px !important;
  padding: 2px 8px !important;
  opacity: 0.6;
}
.admin-cost-range-active { opacity: 1; border-color: var(--ink-soft) !important; }
.admin-cost-table-body { display: flex; flex-direction: column; }
.admin-beta-access-intro {
  max-width: 68ch;
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.admin-beta-access-create {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.admin-beta-access-create label {
  color: var(--ink-soft);
  font-size: var(--text-xs);
}
.admin-beta-access-create select,
.admin-beta-access-create input,
.admin-beta-access-link {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card, var(--paper));
  color: var(--ink);
  font: 12px var(--mono);
}
.admin-beta-access-create select { padding: 0 30px 0 9px; }
.admin-beta-access-create input { flex: 1; min-width: 160px; padding: 0 9px; }
.admin-beta-access-create button { margin-left: auto; }
.admin-beta-access-message {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
}
.admin-beta-access-message:not(:empty) {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.admin-beta-access-link {
  flex: 1;
  min-width: 120px;
  padding: 0 9px;
}
.admin-beta-access-copy { flex: 0 0 auto; }
.admin-beta-access-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.admin-beta-access-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
  font-family: var(--mono);
}
.admin-beta-access-total:last-child { border-right: none; }
.admin-beta-access-total strong {
  color: var(--ink);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}
.admin-beta-access-total span {
  color: var(--ink-soft);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.admin-beta-access-rows { display: flex; flex-direction: column; }
.admin-beta-access-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.admin-beta-access-row:last-child { border-bottom: none; }
.admin-beta-access-main { flex: 1; min-width: 0; }
.admin-beta-access-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.admin-beta-access-status {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font: 9px var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.admin-beta-access-status--active { border-color: var(--green, #4a7); }
.admin-beta-access-status--cancelled { border-color: var(--red, #c55); }
.admin-beta-access-id {
  overflow: hidden;
  color: var(--ink);
  font: var(--text-xs) var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-beta-access-meta {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.admin-beta-access-cancel { flex: 0 0 auto; }
.admin-beta-access-empty,
.admin-beta-access-error {
  padding: 10px 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
}
.admin-beta-access-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
}
@media (max-width: 620px) {
  .admin-beta-access-create,
  .admin-beta-access-message { align-items: stretch; flex-direction: column; }
  .admin-beta-access-create button { margin-left: 0; }
  .admin-beta-access-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-beta-access-total:nth-child(2) { border-right: none; }
  .admin-beta-access-total:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .admin-beta-access-row { align-items: stretch; flex-direction: column; }
  .admin-beta-access-cancel { align-self: flex-start; }
  .admin-beta-access-create select,
  .admin-beta-access-create button,
  .admin-beta-access-copy,
  .admin-beta-access-cancel,
  .admin-beta-access-retry { min-height: 44px; }
  .admin-beta-access-error { align-items: stretch; flex-direction: column; }
  .admin-beta-access-retry { align-self: flex-start; }
}
.admin-feedback-row {
  display: flex;
  gap: var(--space-3);
  padding: 4px 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}
.admin-feedback-type {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--card, var(--paper));
  border: 1px solid var(--border);
  flex-shrink: 0;
  align-self: flex-start;
}
.admin-feedback-msg {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-key-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.admin-key-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-key-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-ghost);
  flex-shrink: 0;
}
.admin-key-dot.set { background: var(--green, #4a7); }
.admin-key-label {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--ink);
  min-width: 80px;
}
.admin-key-masked {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  flex: 1;
}
.admin-key-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.admin-key-input {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: 8px;
}
.admin-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) 16px;
}
.admin-config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.admin-config-label {
  font-family: var(--mono);
  color: var(--ink-soft);
}
.admin-config-val {
  font-family: var(--mono);
  color: var(--ink);
  text-align: right;
}

/* ── Billing success toast ───────────────────── */
.billing-success-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 9999;
  animation: toast-in .25s ease;
}
@keyframes toast-in { from { opacity:0; transform:translateX(-50%) translateY(8px) } to { opacity:1; transform:translateX(-50%) translateY(0) } }


/* ── Billing view ─────────────────────────────── */
.billing-plan {
  font-family: var(--mono);
  font-size: var(--text-md);
  color: var(--ink);
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.billing-plan-detail {
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-left: 8px;
}
.billing-plan-detail-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-top: 2px;
  font-family: var(--mono);
}
.billing-unbilled {
  color: var(--ink-soft);
  font-style: normal;
}
.billing-plan-trial { color: var(--pass-3); }
.billing-plan-expired { color: var(--red, #c44); }
.billing-plan-active { color: var(--pass-3); }
.billing-subscribe-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.billing-subscribe-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 8px 16px;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.billing-subscribe-btn:hover { background: var(--rule); }
.billing-manage-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  margin-bottom: 20px;
  padding: 6px 12px;
}
.billing-type-row {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.billing-type-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 5px 12px;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.billing-type-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.billing-credits-balance {
  font-size: var(--text-md);
  margin-bottom: 10px;
  color: var(--ink);
}
.billing-credits-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.billing-credit-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 6px 12px;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.billing-credit-btn:hover { background: var(--rule); }
.billing-line { gap: var(--space-4); }
.billing-line span:nth-child(2) { color: var(--ink-dim); min-width: 60px; text-align: right; }
.billing-storage-bar {
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
}
.billing-storage-over { background: var(--pass-3) !important; }
.billing-over { color: var(--pass-3); }
.billing-storage-fill {
  height: 100%;
  background: var(--pass-3);
  border-radius: 2px;
  transition: width 0.3s;
}
.billing-total {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 24px;
}
.billing-total small {
  font-size: var(--text-xs);
  color: var(--ink-dim);
  font-weight: 400;
  margin-left: 6px;
}
.billing-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.billing-group h4 {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin: 0 0 8px;
}
.billing-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  padding: 3px 0;
}
.billing-line span:last-child { color: var(--ink); }
.billing-rates-group {
  margin-top: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.billing-rates-note {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.billing-rates-section {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin: 14px 0 6px;
}
.billing-rates-section:first-of-type { margin-top: 0; }
.billing-rate-detail { color: var(--ink-dim) !important; font-size: var(--text-xs); }
.billing-recent-title {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.billing-recent-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  padding: 3px 0;
  border-bottom: 1px solid var(--rule);
}
.billing-recent-row span:last-child { color: var(--ink-soft); }

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

body:not([data-line-mode="code"]) .nav-item[data-nav-mode="code"] { display: none; }
body[data-line-mode="code"] .nav-item[data-nav-mode="read"] { display: none; }
.nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 32px;
  font-size: var(--text-md);
  color: var(--ink-dim);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--mono);
  position: relative;
  border-radius: 6px;
  padding: 0 0 0 20px;
  gap: 0;
  transition: color 0.15s ease, background 0.15s ease, padding 0.2s ease, gap 0.2s ease;
}
/* One optical size for every rail glyph — icons must not resize on approach. */
.nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
aside:is(:hover,.pinned) .nav-item { padding: 0 10px 0 14px; gap: 10px; }
/* Center the icons in the collapsed strip (expanded/hover keeps left-aligned for labels) */
#app-shell > aside:not(:hover):not(.pinned) .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
/* Navbar open/close control — first row, replacing the old Chat doorway. */
.nav-collapse-btn {
  flex: 0 0 32px;
  color: color-mix(in srgb, var(--ink) 44%, transparent);
}
.nav-collapse-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.nav-collapse-btn:hover { color: var(--ink-dim); }
aside.pinned .nav-collapse-btn {
  align-self: flex-end;
  justify-content: center;
  width: 32px;
  max-width: 32px;
  padding: 0;
}
.nav-collapse-btn[aria-pressed="true"] svg { transform: rotate(180deg); }

.nav-item:hover { color: var(--ink); background: rgba(28,26,22,0.06); }
body.dark .nav-item:hover { background: rgba(212,207,197,0.08); }
body:not(.dark) .nav-item {
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
body:not(.dark) .nav-item svg,
body:not(.dark) .nav-item i {
  color: currentColor;
  stroke: currentColor;
  opacity: 1;
}
body:not(.dark) .nav-item:hover {
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  background: rgba(0,0,0,0.04);
}
@keyframes nav-bar-slide {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.nav-item.active,
.nav-item.space-open { color: var(--ink-heavy); background: none; position: relative; border-left: none; }
body:not(.dark) .nav-item.active,
body:not(.dark) .nav-item.space-open {
  color: color-mix(in srgb, var(--ink) 94%, transparent);
}
@keyframes chip-fade { from { opacity: 0; } to { opacity: 1; } }
/* active = neutral current-page emphasis; no filled chip or accent tint */
.nav-item.active::before,
.nav-item.space-open::before {
  content: none;
  display: none;
}
.nav-item.active svg, .nav-item.active i,
.nav-item.active .nav-label,
.nav-item.space-open svg, .nav-item.space-open i,
.nav-item.space-open .nav-label { position: relative; z-index: 1; }
body.dark .nav-item.active,
body.dark .nav-item.space-open { background: none; }

/* ── View enter ───────────────────────────── */
@keyframes view-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.view-enter { animation: view-enter 0.12s ease-out forwards; }

/* ── Send button ghost when empty ─────────── */
#send-btn { transition: opacity 0.15s ease; }
#send-btn.send-empty { opacity: 0.5; }
body.palette-offwhite #send-btn.send-empty,
body.palette-bone #send-btn.send-empty { opacity: 0.55; }


/* ── Message fade-in ──────────────────────── */
@keyframes msg-enter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-row { animation: msg-enter 0.2s ease-out both; }
/* Per-line .line-chat containers go display:none on switch-away. A msg-row's one-shot
   msg-enter fade (fill: both) pins it at its opacity:0 start while the container is hidden and
   never recovers on switch-back — so streamed AND finalized responses return invisible
   (content present, opacity 0) until a refresh. The fade is incompatible with the hide/show
   model: drop the entry animation for rows inside per-line containers, keep them opaque.
   (Verified live: stuck rows' computed opacity flips 0 -> 1.) */
.line-chat .msg-row { animation: none; opacity: 1; }

/* ── Streaming cursor blink ───────────────── */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.cursor { animation: cursor-blink 1s step-start infinite; }

/* ── Nav icon hover tint ──────────────────── */
/* Icons hold one size at rest and while the spine is expanded — only colour and
   the row background carry state, so approaching the rail never makes it twitch. */
.nav-item svg, .nav-item i { transform-origin: center; }
.nav-item:hover svg,
.nav-item:hover i { color: var(--pass-3); stroke: var(--pass-3); transition: color 0.15s ease, stroke 0.15s ease; }
.nav-item.active svg,
.nav-item.active i,
.nav-item.space-open svg,
.nav-item.space-open i { color: inherit; stroke: currentColor; transition: color 0.15s ease, stroke 0.15s ease; }
/* Resting rail icons sit dimmer; hover and the current page bring them back to full. */
.nav-item:not(.nav-collapse-btn) svg,
.nav-item:not(.nav-collapse-btn) i { transition: color 0.15s ease, stroke 0.15s ease, opacity 0.15s ease; }
.nav-item:not(.nav-collapse-btn):not(:hover):not(.active):not(.space-open) svg,
.nav-item:not(.nav-collapse-btn):not(:hover):not(.active):not(.space-open) i { opacity: 0.6; }

/* ── Destructive button red tint ──────────── */
.btn-destructive {
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btn-destructive:hover { color: #c0392b; border-color: #c0392b; }

/* ── Copy button checkmark ────────────────── */
.copy-btn { transition: opacity 0.15s ease; }
.copy-btn.copied { color: var(--pass-3); }

/* ── Skeleton shimmer ─────────────────────── */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--ink-ghost) 25%,
    rgba(255,255,255,0.05) 50%,
    var(--ink-ghost) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 4px;
  height: 1em;
}

/* ── Ring pulse on update ─────────────────── */
@keyframes ring-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}
.ring-updating { animation: ring-pulse 0.6s ease-in-out; }

.aside-middle,
.aside-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  position: relative;
}
.aside-middle::before,
.aside-bottom::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 1px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  opacity: 0.82;
  pointer-events: none;
  transition: width 0.2s ease, opacity 0.2s ease;
}
.aside-bottom {
  margin-top: auto;
}

/* More group — Code mode spends one rail row on everything you read with or open
   over the view (Library, Visuals, Papers, Bookmarks, Checklist, PDF,
   Dictionary, Editor) and discloses them all on hover or keyboard focus. Sticky
   notes is deliberately outside the group: it is a capture action, so it keeps its
   own flat row above the trigger in both modes. Read mode leaves the group flat
   (the trigger is data-nav-mode="code", already hidden), so neither mode needs a
   duplicate copy.
   ponytail: in-rail disclosure, not a floating flyout — aside is overflow:auto,
   which would clip one; revisit with anchor positioning if it needs to float. */
/* The Coding group is Code mode only: Terminal, Worktrees, Files, 3D Code Map and
   Runs sit flat there and the whole group is hidden in Read mode. */
.nav-more,
.nav-more-menu,
.nav-coding,
.nav-coding-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
body:not([data-line-mode="code"]) .nav-coding { display: none; }
body[data-line-mode="code"] .nav-more-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.18s ease, opacity 0.14s ease;
}
body[data-line-mode="code"] .nav-more:hover .nav-more-menu,
body[data-line-mode="code"] .nav-more:focus-within .nav-more-menu {
  max-height: 380px; /* nine 32px rows plus their gaps */
  opacity: 1;
  pointer-events: auto;
}
/* The trigger holds the open state so the group reads as one control. */
body[data-line-mode="code"] .nav-more:hover .nav-more-trigger,
body[data-line-mode="code"] .nav-more:focus-within .nav-more-trigger {
  color: var(--ink);
}

/* ponytail: no band captions — the hairline above each band does the grouping
   in both the collapsed and expanded rail. */

.nav-label {
  font-size: 13px;
  font-family: var(--sans);
  letter-spacing: 0.03em;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: max-width 0.2s ease, opacity 0.18s ease 0.07s, transform 0.2s ease 0.04s;
}
aside:is(:hover,.pinned) .nav-label {
  max-width: 120px;
  opacity: 1;
  transform: translateX(0);
}
.nav-item::after {
  content: '';
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  width: 0;
  height: 2px;
  background: var(--pass-3);
  border-radius: 1px;
  opacity: 0;
  transition: width 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}
aside:is(:hover,.pinned) .nav-item:hover::after {
  width: 6px;
  opacity: 0.7;
  transform: translateY(-50%) scaleX(1);
}
body:not(.dark) .nav-item::after {
  content: none;
  display: none;
}

.context-status-row {
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  gap: 10px;
  margin-left: auto;
  min-height: 20px;
  padding-left: 16px;
  color: var(--ink);
  font-family: var(--codex-chat-font-family, var(--sans));
  font-size: 12px;
  font-weight: 350;
  letter-spacing: 0;
  line-height: 1;
}
.context-exchange-counts {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
.context-compaction-control {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.context-compaction-picker-shell {
  position: relative;
}
.context-compaction-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  margin: 0;
  min-height: 20px;
  padding: 1px 3px;
  cursor: pointer;
}
.context-compaction-picker:hover,
.context-compaction-picker[aria-expanded="true"] {
  color: var(--ink);
}
.context-compaction-picker:focus-visible {
  outline: 1px solid var(--ink-dim);
  outline-offset: 2px;
  border-radius: 2px;
}
.context-compaction-picker-caret {
  font-size: 11px;
}
.context-compaction-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  z-index: 30;
  min-width: 188px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.context-compaction-menu[hidden] {
  display: none;
}
.context-compaction-option {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 8px 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.context-compaction-option:hover,
.context-compaction-option:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  outline: none;
}
.context-compaction-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
}
.context-compaction-option.recommended {
  font-weight: 700;
}

/* ── Background status banner ────────────────────────────── */
/* @sas claim: Base layout for the fixed background-status notification banner — left-docked to the live chat composer lane with bounded width, flex row, font and z-index set. terms: bg-status-banner, fixed, bottom, chat status dock, composer lane, flex, z-index, font, border-radius id: bg-alarm:css:banner-base timestamp: 2026-05-10T00:00:00.000Zlive: true */
:root {
  --chat-status-left: 54px;
  --chat-status-width: min(700px, calc(100vw - 108px));
  --chat-status-bottom: 80px;
}
.bg-status-banner {
  position: fixed;
  bottom: var(--chat-status-bottom, 80px);
  left: var(--chat-status-left, 54px);
  transform: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: min(440px, var(--chat-status-width, 700px));
  box-sizing: border-box;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--sans);
  letter-spacing: 0;
  z-index: 9999;
  max-width: calc(100vw - 16px);
  box-shadow: 0 10px 28px rgba(20, 16, 12, 0.14);
  pointer-events: auto;
  text-align: left;
}
/* @sas claim: Amber color theme for failure-state background status banner. terms: bg-status-banner, failure, amber, #f59e0b, background, border id: bg-alarm:css:banner-failure timestamp: 2026-05-10T00:00:00.000Zlive: true */
.bg-status-banner.failure {
  background: color-mix(in srgb, var(--paper) 92%, rgba(176, 92, 42, 0.12));
  color: var(--ink);
  border: 1px solid rgba(176, 92, 42, 0.28);
}
/* @sas claim: Green color theme for recovery-state background status banner. terms: bg-status-banner, recovery, green, #22c55e, background, border id: bg-alarm:css:banner-recovery timestamp: 2026-05-10T00:00:00.000Zlive: true */
.bg-status-banner.recovery {
  background: color-mix(in srgb, var(--paper) 92%, rgba(74, 145, 110, 0.14));
  color: var(--ink);
  border: 1px solid rgba(74, 145, 110, 0.28);
}
/* @sas claim: Text area in the background status banner — flex-grow 1 with readable line-height. terms: bg-status-text, flex, line-height id: bg-alarm:css:banner-text timestamp: 2026-05-10T00:00:00.000Zlive: true */
.bg-status-text { flex: 1; line-height: 1.4; min-width: 0; }
/* @sas claim: Dismiss button inside the background status banner — no chrome, inherits color. terms: bg-status-dismiss, button, cursor, opacity, flex-shrink id: bg-alarm:css:banner-dismiss timestamp: 2026-05-10T00:00:00.000Zlive: true */
.bg-status-dismiss {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.5; font-size: 16px;
  line-height: 1; padding: 0; flex-shrink: 0;
}
/* @sas claim: Hover state for the dismiss button — full opacity on hover. terms: bg-status-dismiss, hover, opacity id: bg-alarm:css:banner-dismiss-hover timestamp: 2026-05-10T00:00:00.000Zlive: true */
.bg-status-dismiss:hover { opacity: 0.9; }

/* ── Autofix dot ─────────────────────────────────────────── */
#autofix-dot {
  position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  display: none; pointer-events: none;
}
#autofix-dot.dot-orange { display: block; background: #f59e0b; }
#autofix-dot.dot-green  { display: block; background: #22c55e; }
#autofix-dot.dot-red    { display: block; background: #ef4444; }

/* === SECTION: view-panels === */
/* Owner: view-panels — ground, sessions, library, notes, work-view panels. */
/* ── View panels (Ground, Sessions, Library, Notes) ─────────── */
.view-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 32px;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  visibility: hidden;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  contain: layout style paint;
}
#work-view {
  max-width: none;
  will-change: visibility;
}
#work-row {
  --cp-width: 280px;
  --tp-width: 400px;
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

/* ── Task Panel (left side, mirrors context-panel) ─────────────────────────────── */
#task-panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  z-index: 5;
}
#task-panel.active { width: var(--tp-width); }
#task-panel-bar {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
#task-panel.active #task-panel-bar { display: flex; }
#task-panel-bar-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
#task-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 16px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
}
#task-panel-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
#task-panel-body {
  flex: 1; overflow-y: auto; min-height: 0; padding: 16px 16px 48px;
}
#task-panel-resize-handle {
  width: 2px;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  cursor: col-resize;
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: none;
  z-index: 6;
}
#work-row:has(#task-panel.active) #task-panel-resize-handle { display: flex; left: var(--tp-width); }
#task-panel-resize-handle:hover { background: rgb(100, 155, 210); }
#task-panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 28px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 18%, var(--paper));
  transition: background 0.2s;
}
#task-panel-resize-handle:hover::after { background: rgb(130, 175, 225); }
#work-row:has(#task-panel.active) .messages {
  margin-left: var(--tp-width);
  transition: margin-left 0.2s ease;
}
#work-row:has(#task-panel.active) .input-zone {
  margin-left: var(--tp-width);
  transition: margin-left 0.2s ease;
}
#work-row:has(#task-panel-resize-handle.dragging) #task-panel { transition: none; }
#work-row:has(#task-panel-resize-handle.dragging) .messages,
#work-row:has(#task-panel-resize-handle.dragging) .input-zone { transition: none; }
#work-row:has(#task-panel.active) .brain-margin { display: none !important; }

/* ── Skills Panel ─────────────────────────────────────────────────── */
:root { --sp-width: 248px; }

#skills-panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.22s ease;
  background: color-mix(in srgb, var(--paper) 94%, var(--ink) 6%);
  border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  z-index: 4;
}
#skills-panel.active { width: var(--sp-width); }

#skills-panel-bar {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
#skills-panel.active #skills-panel-bar { display: flex; }
#skills-panel-bar-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
#skills-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 16px; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
}
#skills-panel-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

#skills-panel-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* When skills panel is active, push messages & input right */
#work-row:has(#skills-panel.active) .messages {
  margin-left: var(--sp-width);
  transition: margin-left 0.2s ease;
}
#work-row:has(#skills-panel.active) .input-zone {
  margin-left: var(--sp-width);
  transition: margin-left 0.2s ease;
}

/* ── Skill Cards ─────────────────────────────────────────────────── */
.view-panel.skills-view-shell {
  overflow-y: auto;
  padding: 32px 36px 40px;
}
.skills-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.skills-hero-copy {
  max-width: 760px;
}
.skills-eyebrow,
.skills-form-kicker,
.skills-reader-kicker {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skills-hero-title {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 13ch;
}
.skills-hero-text {
  margin-top: 12px;
  max-width: 560px;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.62;
}
.skills-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.skills-toolbar-actions--hero {
  justify-content: flex-end;
}
.skills-status {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 95%, var(--ink) 5%);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.skills-status[hidden] {
  display: none !important;
}
.skills-status.error {
  color: #9f2f2d;
  border-color: color-mix(in srgb, #9f2f2d 18%, transparent);
  background: #fdebec;
}
.skills-draft-notice {
  margin: 0 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #e07b4f) 36%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--paper) 92%, var(--accent, #e07b4f) 8%);
}
.skills-draft-kicker {
  color: var(--accent, #e07b4f);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skills-draft-copy {
  margin-top: 6px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}
.skills-create-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 97%, var(--ink) 3%);
}
.skills-create-form[hidden],
.skills-create-form [hidden] {
  display: none !important;
}
.skills-form-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skills-form-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.skills-form-grid,
.skills-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.skills-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skills-field-wrap--wide {
  grid-column: 1 / -1;
}
.skills-field-label {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skills-field {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 94%, white 6%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 12px;
}
.skills-field:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
.skills-globs-field {
  min-height: 78px;
  resize: vertical;
  line-height: 1.5;
}
.skills-prompt-field {
  min-height: 132px;
  resize: vertical;
  line-height: 1.55;
}
.skills-form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.skills-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 22px;
  align-items: start;
}
.skills-index-column {
  min-width: 0;
}
.skills-index-summary {
  margin-bottom: 16px;
}
.skills-control-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
}
.skills-filter-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.skills-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.skills-filter-tab:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, var(--paper) 90%, white 10%);
}
.skills-filter-tab.active {
  color: var(--ink);
  border-color: color-mix(in srgb, #1f6c9f 28%, transparent);
  background: color-mix(in srgb, #e1f3fe 62%, transparent);
}
.skills-filter-count {
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.skills-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}
.skills-search-label {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skills-search-input {
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 94%, white 6%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 9px;
}
.skills-search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, #1f6c9f 42%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #1f6c9f 16%, transparent);
}
.skills-summary-card {
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 95%, var(--ink) 5%);
}
.skills-summary-label {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skills-summary-value {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.skills-summary-meta {
  margin-top: 8px;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
}
.skills-cards-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.skills-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skills-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}
.skills-section-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.skills-section-note {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skills-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.skills-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 0 6px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
}
.skills-empty-hint {
  max-width: 420px;
  color: color-mix(in srgb, var(--ink) 56%, transparent);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
}
.skill-item {
  display: block;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, var(--ink) 5%);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  opacity: 0;
  transform: translateY(12px);
  animation: skill-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--index, 0) * 40ms);
}
.skill-item:hover {
  background: color-mix(in srgb, var(--paper) 88%, white 12%);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}
.skill-item.selected-skill {
  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
  background: color-mix(in srgb, var(--paper) 90%, white 10%);
}
.skill-item.active-skill {
  border-color: color-mix(in srgb, var(--accent, #e07b4f) 34%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, var(--accent, #e07b4f) 8%);
}
.skill-item-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  min-width: 0;
}
.skill-item-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.skill-item-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.skill-item-install-btn {
  padding: 6px 10px;
  font-size: 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.skill-item-install-btn[disabled] {
  cursor: default;
  opacity: 0.56;
}
.skill-item-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.skill-item-badges,
.skills-reader-badges,
.skills-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skills-reader-action-primary,
.skills-reader-action-secondary {
  min-height: 30px;
}
.skills-reader-action-secondary {
  opacity: 0.88;
}
.skills-reader-action-danger {
  margin-left: auto;
  color: #9f2f2d;
  border-color: color-mix(in srgb, #9f2f2d 24%, transparent);
  background: transparent;
}
.skills-reader-action-danger:hover {
  background: color-mix(in srgb, #9f2f2d 8%, transparent);
}
.skills-reader-action-danger[disabled] {
  opacity: 0.55;
  cursor: default;
}
.skill-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.skill-badge--source-local,
.skill-badge--source-imported {
  background: #edf3ec;
  border-color: color-mix(in srgb, #346538 18%, transparent);
  color: #346538;
}
.skill-badge--source-provider,
.skill-badge--kind-rule {
  background: #fbf3db;
  border-color: color-mix(in srgb, #956400 18%, transparent);
  color: #956400;
}
.skill-badge--source-user {
  background: #e1f3fe;
  border-color: color-mix(in srgb, #1f6c9f 18%, transparent);
  color: #1f6c9f;
}
.skill-badge--source-project,
.skill-badge--scope-project {
  background: color-mix(in srgb, var(--paper) 88%, white 12%);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink-soft);
}
.skill-badge--kind-workflow {
  background: #f3edf7;
  border-color: color-mix(in srgb, #684b89 16%, transparent);
  color: #684b89;
}
.skill-badge--scope-account {
  background: #fdebec;
  border-color: color-mix(in srgb, #9f2f2d 16%, transparent);
  color: #9f2f2d;
}
.skill-badge--activation-always_on,
.skill-badge--activation-glob,
.skill-badge--activation-model_decision {
  border-style: dashed;
}
.skill-item-provenance,
.skill-item-path,
.skill-item-warning,
.skills-reader-provenance,
.skills-reader-note,
.skills-reader-fact-label {
  color: color-mix(in srgb, var(--ink) 56%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  word-break: break-word;
}
.skill-item-meta,
.skill-item-reason,
.skills-reader-description,
.skills-reader-reason,
.skills-reader-fact-value {
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
}
.skill-item.active-skill .skill-item-reason {
  color: color-mix(in srgb, var(--accent, #e07b4f) 52%, white 48%);
}
.skill-item-warning {
  color: #9f2f2d;
}
.skill-item-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  margin-top: 6px;
}
.skill-item.active-skill .skill-item-dot {
  background: var(--accent, #e07b4f);
}
.skill-item.local-skill {
  border-style: dashed;
}
.skill-item.local-skill .skill-item-dot {
  background: color-mix(in srgb, #346538 40%, transparent);
}
.skill-item.local-skill.active-skill .skill-item-dot {
  background: #346538;
}
.skill-item.user-skill {
  border-color: color-mix(in srgb, #1f6c9f 18%, transparent);
}
.skill-item.user-skill.active-skill {
  border-color: color-mix(in srgb, #1f6c9f 34%, transparent);
}
.skill-item.user-skill .skill-item-dot {
  background: color-mix(in srgb, #1f6c9f 40%, transparent);
}
.skill-item.user-skill.active-skill .skill-item-dot {
  background: #1f6c9f;
}
/* Tri-state per-card signals: loaded fills the dot (via .active-skill above);
   hinted is a distinct hollow ring so the two raised bands read at a glance. */
.skill-item[data-state="hinted"] .skill-item-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent, #e07b4f) 65%, transparent);
}
.skill-item-state {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.skill-state-seg {
  appearance: none;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font: inherit;
  font-size: 10px;
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
}
.skill-state-seg:last-child {
  border: 0 solid var(--rule, color-mix(in srgb, var(--ink) 12%, transparent));
}
/* The pick the click will land on. This must read stronger than any surface behind
   it — a 7% wash sat under the row's own hover tint and vanished, so the frame
   looked like the target. Accent tint + full ink names the one segment. */
.skill-state-seg:hover:not(.is-on) {
  background: color-mix(in srgb, var(--accent, #e07b4f) 16%, transparent);
  color: var(--ink);
}
/* Entering the control tightens its own outline: "you are in the state switch". */
.skill-item-state:hover {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.skill-state-seg.is-on {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent, #e07b4f) 22%, transparent);
  cursor: default;
}
.skills-reader-panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 190px);
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
}
.skills-reader-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 320px;
}
.skills-reader-placeholder-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.skills-reader-placeholder-text {
  max-width: 34ch;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
}
.skills-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.skills-reader-back {
  display: none;
  font-size: 10px;
  padding: 6px 10px;
}
.skills-reader-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.skills-reader-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.skills-reader-fact {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 94%, white 6%);
}
.skills-reader-note {
  color: var(--ink-dim);
}
.skills-reader-section-label {
  margin-top: 4px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skills-reader-instruction {
  margin: 0;
  padding: 16px 18px;
  max-height: min(48vh, 620px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper-dark) 92%, #000 8%);
  color: color-mix(in srgb, var(--ink) 84%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}
#work-row.rail-max .wr-view-host > #skills-view[data-skills-view-mode="full"] {
  padding: 30px 36px 40px !important;
}
#skills-view[data-skills-view-mode="rail"] {
  padding: 16px 14px 18px !important;
  overflow-y: auto;
}
#skills-view[data-skills-view-mode="rail"] .skills-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
}
#skills-view[data-skills-view-mode="rail"] .skills-hero-copy {
  max-width: none;
}
#skills-view[data-skills-view-mode="rail"] .skills-hero-title {
  max-width: none;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0;
}
#skills-view[data-skills-view-mode="rail"] .skills-hero-text {
  display: none;
}
#skills-view[data-skills-view-mode="rail"] .skills-toolbar-actions--hero {
  justify-content: flex-start;
}
#skills-view[data-skills-view-mode="rail"] .skills-toolbar-actions .t-btn {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 10px;
}
#skills-view[data-skills-view-mode="rail"] .skills-create-form {
  padding: 14px;
  border-radius: 8px;
}
#skills-view[data-skills-view-mode="rail"] .skills-form-grid,
#skills-view[data-skills-view-mode="rail"] .skills-meta-grid {
  grid-template-columns: 1fr;
}
#skills-view[data-skills-view-mode="rail"] .skills-index-summary {
  margin-bottom: 14px;
}
#skills-view[data-skills-view-mode="rail"] .skills-control-strip {
  align-items: stretch;
  flex-direction: column;
  padding: 8px;
}
#skills-view[data-skills-view-mode="rail"] .skills-search-wrap {
  min-width: 0;
  width: 100%;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-action-danger {
  margin-left: 0;
}
#skills-view[data-skills-view-mode="rail"] .skills-layout {
  display: block;
}
#skills-view[data-skills-view-mode="rail"] .skills-cards-list {
  gap: 16px;
}
#skills-view[data-skills-view-mode="rail"] .skills-section {
  gap: 8px;
}
#skills-view[data-skills-view-mode="rail"] .skills-section-head {
  align-items: flex-start;
  padding: 0;
}
#skills-view[data-skills-view-mode="rail"] .skills-section-title {
  font-size: 18px;
  letter-spacing: 0;
}
#skills-view[data-skills-view-mode="rail"] .skills-section-note {
  display: none;
}
#skills-view[data-skills-view-mode="rail"] .skills-cards-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
#skills-view[data-skills-view-mode="rail"] .skill-item {
  padding: 13px 14px;
  border-radius: 8px;
}
#skills-view[data-skills-view-mode="rail"] .skill-item-body {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}
#skills-view[data-skills-view-mode="rail"] .skill-item-actions {
  grid-column: 2;
  justify-content: flex-start;
}
#skills-view[data-skills-view-mode="rail"] .skill-item-title {
  font-size: 18px;
  letter-spacing: 0;
}
#skills-view[data-skills-view-mode="rail"] .skill-item-badges {
  gap: 5px;
}
#skills-view[data-skills-view-mode="rail"] .skill-badge {
  min-height: 18px;
  padding: 0 6px;
  font-size: 9px;
}
#skills-view[data-skills-view-mode="rail"] .skill-item-provenance,
#skills-view[data-skills-view-mode="rail"] .skill-item-path,
#skills-view[data-skills-view-mode="rail"] .skill-item-reason {
  display: none;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-panel {
  display: none;
  position: static;
  min-height: 0;
  padding: 16px;
  border-radius: 8px;
}
#skills-view[data-skills-view-mode="rail"].skills-reader-open .skills-index-column {
  display: none;
}
#skills-view[data-skills-view-mode="rail"].skills-reader-open .skills-reader-panel {
  display: flex;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-back {
  display: inline-flex;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-title {
  font-size: 24px;
  letter-spacing: 0;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-facts {
  grid-template-columns: 1fr;
  gap: 8px;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-actions {
  flex-direction: column;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-action-primary,
#skills-view[data-skills-view-mode="rail"] .skills-reader-action-secondary {
  width: 100%;
  justify-content: center;
}
#skills-view[data-skills-view-mode="rail"] .skills-reader-instruction {
  max-height: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 10.5px;
}
@keyframes skill-card-enter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 980px) {
  .view-panel.skills-view-shell {
    padding: 24px 18px calc(env(safe-area-inset-bottom, 0px) + 32px);
  }
  .skills-hero {
    flex-direction: column;
    gap: 18px;
  }
  .skills-hero-title {
    max-width: none;
    font-size: 28px;
  }
  .skills-layout {
    grid-template-columns: 1fr;
  }
  .skills-index-summary {
    margin-bottom: 14px;
  }
  .skills-control-strip {
    align-items: stretch;
    flex-direction: column;
  }
  .skills-search-wrap {
    min-width: 0;
    width: 100%;
  }
  .skills-cards-grid,
  .skills-form-grid,
  .skills-meta-grid,
  .skills-reader-facts {
    grid-template-columns: 1fr;
  }
  .skills-reader-panel {
    display: none;
    position: static;
    min-height: 0;
  }
  .skills-view-shell.skills-reader-open .skills-index-column {
    display: none;
  }
  .skills-view-shell.skills-reader-open .skills-reader-panel {
    display: flex;
  }
  .skills-reader-back {
    display: inline-flex;
  }
}
@media (max-width: 640px) {
  .skills-index-summary {
    margin-bottom: 12px;
  }
  .skills-filter-tabs {
    gap: 5px;
  }
  .skills-filter-tab {
    flex: 1 1 auto;
    justify-content: center;
  }
  .skills-hero-title {
    font-size: 24px;
  }
  .skills-form-title,
  .skills-section-title,
  .skills-reader-title {
    font-size: 22px;
  }
  .skill-item {
    padding: 14px;
  }
  .skill-item-body {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .skill-item-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* ── Pulse states ─────────────────────────────────────────────────── */
/* User-activated: warm pulse, 2s */
@keyframes pulse-user {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #e07b4f 40%, transparent); }
  50%       { box-shadow: 0 0 0 5px color-mix(in srgb, #e07b4f 0%, transparent); }
}
.skill-item.pulse-user {
  animation: pulse-user 2s ease-in-out infinite;
  border-color: #e07b4f;
}

/* GI-running: cool pulse, 1.4s */
@keyframes pulse-gi-running {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #6b9fd4 40%, transparent); }
  50%       { box-shadow: 0 0 0 5px color-mix(in srgb, #6b9fd4 0%, transparent); }
}
.skill-item.pulse-gi-running {
  animation: pulse-gi-running 1.4s ease-in-out infinite;
  border-color: #6b9fd4;
}

/* GI-suggested/pending: dashed border, muted */
.skill-item.pulse-gi-suggested {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  opacity: 0.75;
}

/* ── Skills nav button active state ─────────────────────────────── */
#skills-nav-btn.active { color: var(--accent, #e07b4f); }


/* === SECTION: task-panel === */
/* Owner: task-panel — task detail panel (tp-*), plan list, complete button, add-todo. */
/* Task Panel anatomy */
.tp-anatomy { display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; }
.tp-section { display: flex; flex-direction: column; gap: 7px; }
.tp-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.6;
}
.tp-section-body {
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.6;
}
.tp-section-body.tp-rendered { white-space: normal; }

/* Bar status pill */
.tp-bar-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.tp-bar-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-dim);
  opacity: 0.5;
}
.tp-bar-status[data-status="open"] .tp-bar-dot { background: #6b9fd4; opacity: 1; }
.tp-bar-status[data-status="open"] { color: #6b9fd4; }
.tp-bar-status[data-status="complete"] .tp-bar-dot { background: #6ba56b; opacity: 1; }
.tp-bar-status[data-status="complete"] { color: #6ba56b; }

/* Title block */
.tp-title-block {
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  position: relative;
}
.tp-title-text {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}
.tp-title-input {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  font-family: inherit;
  width: 100%;
  border: none;
  background: transparent;
  outline: 1px solid var(--border);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Blocker */
.tp-blocker {
  background: color-mix(in srgb, #c06030 10%, var(--paper));
  border-radius: 4px;
  padding: 10px 12px;
}
.tp-blocker .tp-section-label { color: #c06030; opacity: 1; }

/* Done when */
.tp-done-when { gap: 7px; }
.tp-done-when-body {
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.5;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: 3px;
  padding: 8px 12px;
}

/* Open items */
.tp-open-items { gap: 8px; }
.tp-open-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tp-open-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--text-sm); color: var(--ink); line-height: 1.45;
  background: color-mix(in srgb, #e8a84a 6%, transparent);
  border-radius: 3px;
  padding: 5px 9px 5px 8px;
}
.tp-open-dot {
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #e8a84a;
  opacity: 0.7;
  margin-top: 6px;
}

/* Section header color accents */
.tp-open-items  > .tp-section-label { color: #c49a3a; opacity: 1; }
.tp-plan        > .tp-section-label { color: #6b9fd4; opacity: 1; }
.tp-done-when   > .tp-section-label { color: #6ba56b; opacity: 1; }
.tp-decisions   > .tp-section-label { color: #9370db; opacity: 1; }
.tp-blocker     > .tp-section-label { color: #c06030; opacity: 1; }
.tp-folder      > .tp-section-label { color: #7ec8c8; opacity: 1; }

/* Generic sections (GOAL, CONTEXT, DEFINITION, NEXT, CONSTRAINTS) */
.tp-section:not(.tp-open-items):not(.tp-plan):not(.tp-done-when):not(.tp-decisions):not(.tp-blocker):not(.tp-folder):not(.tp-named-section) > .tp-section-label {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 1;
}

/* NEXT line — emphasize the body */
.tp-next > .tp-section-body {
  color: var(--ink);
  font-weight: 500;
}

/* GOAL body — soft green tint left border */
.tp-goal > .tp-section-body {
  color: var(--ink);
}

/* =============================================================================
   NAMED SECTIONS — ruled, airy design
   Color lives in the left rule + label. No filled boxes. No boxy borders.
   ============================================================================= */

/* Base — no box, just a left rule and space */
.tp-named-section {
  gap: 0;
  border-radius: 0;
  overflow: visible;
  border: none;
  padding-left: 12px;
  margin-left: 2px;
}

/* Label row — small, colored, no background strip */
.tp-named-section > .tp-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 4px 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 1;
}

/* Icon via ::before */
.tp-named-section > .tp-section-label::before {
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}

/* Body — open, no padding box */
.tp-named-section > .tp-section-body {
  padding: 0 0 2px 0;
  font-size: 12px;
  line-height: 1.7;
  border-top: none;
}

/* GOAL — green */
.tp-ns-goal > .tp-section-label { color: #6ba56b; }
.tp-ns-goal > .tp-section-label::before { content: '\25CE'; }
.tp-ns-goal > .tp-section-body { color: var(--ink); }

/* CONTEXT — blue */
.tp-ns-context > .tp-section-label { color: #6b9fd4; }
.tp-ns-context > .tp-section-label::before { content: '\25C8'; }
.tp-ns-context > .tp-section-body { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* NEXT — amber, body slightly heavier */
.tp-ns-next > .tp-section-label { color: #e8a84a; }
.tp-ns-next > .tp-section-label::before { content: '\25B6'; font-size: 8px; }
.tp-ns-next > .tp-section-body {
  color: var(--ink);
  font-weight: 500;
  font-size: 12.5px;
}

/* CONSTRAINTS — orange-red */
.tp-ns-constraints > .tp-section-label { color: #c06030; }
.tp-ns-constraints > .tp-section-label::before { content: '\2298'; }
.tp-ns-constraints > .tp-section-body { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* DECISIONS — purple */
.tp-ns-decisions > .tp-section-label { color: #9370db; }
.tp-ns-decisions > .tp-section-label::before { content: '\25C6'; font-size: 9px; }
.tp-ns-decisions > .tp-section-body { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* ESTIMATED EFFORT — amber */
.tp-ns-effort > .tp-section-label { color: #b08d57; }
.tp-ns-effort > .tp-section-label::before { content: '\29D6'; font-size: 9px; }
.tp-ns-effort > .tp-section-body { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* PROGRESS — teal */
.tp-ns-progress > .tp-section-label { color: #7ec8c8; }
.tp-ns-progress > .tp-section-label::before { content: '\25D1'; }
.tp-ns-progress > .tp-section-body { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* Decision items — numbered badge gets purple */
.tp-decision-num {
  background: color-mix(in srgb, #9370db 18%, transparent);
  color: #9370db;
}

/* Decision item text */
.tp-decision-item { color: var(--ink); }

/* Plan / todo checklist */
.tp-plan { gap: 8px; }
.tp-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tp-plan-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  padding: 2px 0;
}
.tp-plan-item--done { opacity: 0.72; }
.tp-plan-item--done .tp-plan-text {
  text-decoration: none;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  position: relative;
}
.tp-plan-item--done .tp-plan-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0.78em;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  pointer-events: none;
}
.tp-plan-cb {
  flex-shrink: 0;
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  margin-top: 2px;
  position: relative;
}
.tp-plan-cb--checked {
  background: color-mix(in srgb, #6ba56b 70%, transparent);
  border-color: color-mix(in srgb, #6ba56b 60%, transparent);
}
.tp-plan-cb--checked::after {
  content: '';
  position: absolute;
  left: 2px; top: 0px;
  width: 5px; height: 8px;
  border: 1.5px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(40deg);
}
.tp-plan-text { flex: 1; }

/* Footer / mark complete */
.tp-footer {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  margin-top: 4px;
  display: flex;
  gap: 6px;
}
.tp-complete-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex: 1;
}
.tp-complete-btn:hover {
  background: color-mix(in srgb, #6ba56b 12%, transparent);
  border-color: #6ba56b;
  color: #6ba56b;
}
/* === SECTION: terminal-btn === */
.tp-terminal-btn {
  background: none;
  border: 1px solid color-mix(in srgb, #e07b4f 40%, transparent);
  border-radius: 6px;
  color: #e07b4f;
  font-size: var(--text-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex: 1;
}
.tp-terminal-btn:hover {
  background: color-mix(in srgb, #e07b4f 12%, transparent);
  border-color: #e07b4f;
  color: #e07b4f;
}
/* === END SECTION: terminal-btn === */

/* Add todo input */
.tp-add-todo-row {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.tp-add-todo-input {
  width: 100%;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 6px;
  color: var(--ink);
  font-size: var(--text-sm);
  padding: 7px 12px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.tp-add-todo-input:focus {
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.tp-add-todo-input::placeholder {
  color: var(--ink-faint, color-mix(in srgb, var(--ink) 35%, transparent));
}
.tp-add-todo-input:disabled {
  opacity: 0.5;
}

/* Definition textarea editor */
.tp-def-edit .tp-section-label {
  display: flex; align-items: center; gap: 8px;
}
.tp-def-saved {
  font-size: 10px;
  color: #6ba56b;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.tp-def-saved--visible { opacity: 1; }
.tp-def-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 400px;
  resize: none;
  overflow-y: auto;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 12px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.tp-def-textarea:focus {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* Folder section */
.tp-folder {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.tp-folder-header { margin-bottom: 8px; }
.tp-folder-list { display: flex; flex-direction: column; gap: 4px; }
.tp-folder-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.tp-folder-row--pinned {
  background: color-mix(in srgb, #6b9fd4 8%, transparent);
  border: 1px solid color-mix(in srgb, #6b9fd4 20%, transparent);
}
.tp-folder-badge {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.tp-folder-label {
  flex: 1;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-folder-pin {
  font-size: 11px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.35;
  padding: 2px 4px;
  border-radius: 3px;
  transition: opacity 0.15s;
}
.tp-folder-pin:hover, .tp-folder-pin--on { opacity: 1; }
.tp-folder-detach {
  font-size: 14px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.tp-folder-detach:hover { opacity: 1; color: #c06060; }
/* Attach row — two-line stacked layout */
.tp-folder-attach-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
/* Row 1: label input + kind select */
.tp-folder-attach-input {
  grid-column: 1; grid-row: 1;
  font-size: 11px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 4px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.tp-folder-attach-kind {
  grid-column: 2; grid-row: 1;
  font-size: 11px;
  padding: 5px 6px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 4px;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 68px;
}
/* Row 2: id input + attach button */
.tp-folder-attach-id {
  grid-column: 1; grid-row: 2;
  font-size: 11px;
  padding: 5px 8px;
  font-family: var(--mono);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 4px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.tp-folder-attach-btn {
  grid-column: 2; grid-row: 2;
  font-size: 11px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.tp-folder-attach-btn:hover {
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.tp-folder-attach-input::placeholder,
.tp-folder-attach-id::placeholder {
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}

/* Legacy — kept for remaining references */
.tp-decisions { gap: 8px; }
.tp-decision-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tp-decision-item { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--ink); line-height: 1.4; }
.tp-decision-num { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink-dim); font-family: var(--mono); font-size: 10px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.tp-status-row { display: flex; align-items: center; padding-top: 4px; }
.tp-status-badge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-dim); }
.tp-status-badge[data-status="open"] { background: color-mix(in srgb, #6b9fd4 15%, transparent); color: #6b9fd4; }
.tp-status-badge[data-status="complete"] { background: color-mix(in srgb, #6ba56b 15%, transparent); color: #6ba56b; }

#work-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  order: 2;
  position: relative;
}
#chat-main-shell {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  position: relative;
}
#chat-container-wrap {
  min-width: 0;
}
@media (max-width: 1320px) {
  #chat-main-shell .messages {
    padding: 0 0 24px 20px;
  }
  #chat-main-shell .msg-row,
  #chat-main-shell .msg-row.coding-event.local-event {
    max-width: min(760px, calc(100% - 108px));
    margin-left: auto;
    margin-right: 54px;
  }
  #chat-main-shell .msg-row.coding-event {
    max-width: 640px;
    margin: 24px auto;
    padding: 0 20px;
    justify-content: center;
  }
}
#panel-resize-handle {
  width: 2px;
  flex-shrink: 0;
  cursor: col-resize;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.05);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  display: none;
  position: relative;
  transition: background 0.15s;
  z-index: 7;
  order: 1;
}
#panel-resize-handle:hover,
#right-panel-resize-handle:hover { background: rgb(100, 155, 210); }
#panel-resize-handle .rh-grip,
#right-panel-resize-handle .rh-grip { display: none; }
#panel-resize-handle::after,
#right-panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 28px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 18%, var(--paper));
  transition: background 0.2s;
}
#panel-resize-handle:hover::after,
#right-panel-resize-handle:hover::after { background: rgb(130, 175, 225); }
.rh-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--ink-dim) 30%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 18%, var(--paper));
  color: var(--ink-dim);
  transition: color 0.15s, border-color 0.15s;
  pointer-events: none;
}
.rh-action {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--ink-dim) 25%, transparent);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-dim);
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.15s, border-color 0.15s;
  z-index: 10;
}
.rh-expand { top: calc(50% - 42px); color: #2ec4b6; border-color: #2ec4b6; }
.rh-close  { top: calc(50% + 22px); color: #e05555; border-color: #e05555; }
.rh-action:hover { color: #2ec4b6; border-color: #2ec4b6; }
.rh-close:hover { color: #e05555; border-color: #e05555; }
#panel-resize-handle:hover .rh-grip,
#panel-resize-handle.dragging .rh-grip,
#right-panel-resize-handle:hover .rh-grip,
#right-panel-resize-handle.dragging .rh-grip { color: #2ec4b6; border-color: #2ec4b6; }
#work-row:has(#right-side-panel.active) #panel-resize-handle { display: flex; }
#right-side-panel {
  --sp-width: 50%;
  flex: 0 0 0;
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex-basis 0.2s ease;
  background: var(--surface);
  border-radius: 8px;
  order: 0;
}
#right-side-panel.active {
  flex: 0 0 var(--sp-width);
  border: 1px solid var(--rule);
  margin: 8px 0 8px 8px;
}
#right-side-panel .side-panel-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
/* checklist + dict slot headers */
#right-side-panel .checklist-panel,
#right-side-panel .dict-panel {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}
#right-side-panel .dict-search-row {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--rule);
}
#right-side-panel .checklist-add-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
#right-side-panel .dict-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
}
#right-side-panel .checklist-items {
  flex: 1;
  overflow-y: auto;
}
#work-row:has(#right-side-panel.active) #work-right-panel,
#work-row:has(#right-side-panel.active) #brain-frame { display: none !important; }
#work-row:has(#right-side-panel.active) #work-left { position: relative; padding-right: 82px; }
#work-row:has(#right-side-panel.active) .msg-row { margin-left: 16px; margin-right: auto; }
#work-row:has(#right-side-panel.active) .input-zone { margin-left: 16px; }
#work-row:has(#right-side-panel.active) .cycle-btn { min-width: 34px !important; padding: 0 5px !important; font-size: 9px !important; }
#work-row:has(#right-side-panel.active) .input-ta-wrap { gap: var(--space-2) !important; padding: 6px 10px !important; }
#work-row:has(#right-side-panel.active) .input-disclaimer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Right panel (opens on right of chat) ──────────────── */
#right-panel-resize-handle {
  width: 2px; flex-shrink: 0; cursor: col-resize;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.05);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  display: none; position: relative; transition: background 0.15s; z-index: 7; order: 3;
}
#work-row:has(#right-panel.active) #right-panel-resize-handle { display: flex; }
#work-row:has(#right-panel-resize-handle.dragging) #right-panel { transition: none; }
#work-row:has(#panel-resize-handle.dragging) #right-side-panel { transition: none; }
#right-panel {
  --rp-width: 40%; flex: 0 0 0; position: relative; z-index: 6;
  display: flex; flex-direction: column; overflow: hidden;
  transition: flex-basis 0.2s ease; background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  order: 4;
}
#work-row:has(#right-panel.active) #work-right-panel { display: none !important; }
#work-row:has(#right-panel.active) #book-edge { display: none !important; }
#work-row:has(#right-panel.active) .msg-row {
  max-width: min(760px, calc(100% - 108px));
  margin-left: auto;
  margin-right: 54px;
}
#work-row:has(#right-panel.active) .input-zone { max-width: calc(100% - 32px); width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
#right-panel.active { flex: 0 0 var(--rp-width); margin-right: 54px; }
#right-panel .side-panel-slot { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#right-panel-bar {
  flex-shrink: 0; display: none; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
}
#right-panel.active #right-panel-bar { display: flex; }

/* ── Panel bar action buttons (expand + close) ── */
.panel-bar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pb-action {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, border-color 0.15s;
  color: var(--ink-dim);
}
.pb-action:hover { opacity: 1; }
.pb-expand { color: #2ec4b6; }
.pb-expand:hover { border-color: #2ec4b6; color: #2ec4b6; }
.pb-close { color: #e05555; }
.pb-close:hover { border-color: #e05555; color: #e05555; }

#right-panel-view-slot .toolbar { display: none !important; }
#panel-view-slot .toolbar { display: none !important; }
/* Settings drilled into a section inside the panel — show its toolbar so the back arrow returns to the section list */
#panel-view-slot #settings-view.settings-in-section .toolbar { display: flex !important; padding-right: 64px; }
#right-panel-view-slot > .view-panel {
  position: relative !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  max-width: none !important;
  contain: none !important;
  flex: 1 !important;
  overflow-y: visible !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 12px 16px !important;
}

/* ── Chat subnav (right-edge vertical nav) ──────────────── */
.chat-subnav {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: var(--space-1); padding: 6px 4px; z-index: 20;
  width: 38px; overflow: hidden; transition: width 0.2s ease;
  background: var(--paper);
}
.chat-subnav:hover { width: 160px; box-shadow: -2px 0 16px rgba(0,0,0,0.15); }
.subnav-btn {
  display: flex; align-items: center; justify-content: flex-end;
  width: 100%; height: 30px; color: var(--ink-dim); cursor: pointer;
  border: none; background: none; border-radius: 6px; padding: 0 6px; gap: 10px;
}
.subnav-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.subnav-btn:hover { color: var(--ink); background: rgba(28,26,22,0.06); }
body.dark .subnav-btn:hover { background: rgba(212,207,197,0.08); }
.subnav-btn:hover svg { color: var(--pass-3); stroke: var(--pass-3); transition: color 0.15s ease, stroke 0.15s ease; }
.subnav-btn.active { color: var(--ink-heavy); background: rgba(28,26,22,0.06); position: relative; border-right: 2px solid #4fa896; }
body.dark .subnav-btn.active { background: rgba(79,168,150,0.12); }
.subnav-btn.active svg { color: var(--pass-3); stroke: var(--pass-3); }
.chat-subnav:hover .nav-label { max-width: 120px; opacity: 1; }
#panel-bar {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--rule);
}
#right-side-panel.active #panel-bar { display: flex; }
#right-side-panel.panel-has-own-header #panel-bar { display: none !important; }
#sp-panel-actions {
  display: none;
  position: absolute;
  top: 10px; right: 12px;
  z-index: 20;
}
#right-side-panel.active #sp-panel-actions { display: flex; }
#right-side-panel.active #doc-viewer-close { display: none; }
/* Protect all panel headers from the absolute-positioned expand/close buttons (≈52px wide at right:12px) */
#right-side-panel.active .tasks-header,
#right-side-panel.active .lib-toolbar,
#right-side-panel.active .lines-action-bar,
#right-side-panel.active .checklist-add-row,
#right-side-panel.active .dict-search-row,
#right-side-panel.active .bookmark-tray-header,
#right-side-panel.active .notes-toolbar,
#right-side-panel.active .pulse-header,
#right-side-panel.active .sv-header { padding-right: 64px; }
#panel-bar-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
#panel-view-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}
#panel-view-slot > .view-panel {
  position: relative !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  max-width: none !important;
  contain: none !important;
  flex: 1 !important;
  overflow-y: visible !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 16px 20px !important;
}
@media (max-width: 900px) {
  #right-side-panel.active {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80% !important;
    z-index: 900;
    border-right: none;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
  #panel-resize-handle { display: none !important; }
}
.view-panel.active {
  visibility: visible;
  position: relative;
  pointer-events: auto;
  z-index: 1;
  contain: none;
  overflow-y: auto;
}
.view-heading {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 4px 0;
}
.view-heading-sub {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 20px 0;
}
/* TipTap toolbar */
#doc-editor-toolbar { border-bottom: 1px solid var(--rule); padding: 10px 24px; display: flex; align-items: center; background: transparent; overflow-x: auto; gap: 0; }
.tt-group { display: flex; align-items: center; gap: 2px; padding: 0 8px; }
.tt-group:first-child { padding-left: 0; }
.tt-group + .tt-group { border-left: 1px solid var(--rule); }
#doc-editor-toolbar button[data-tt] { background: none; border: none; color: var(--ink-dim); padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1; font-family: var(--sans); }
#doc-editor-toolbar button[data-tt]:hover, #doc-editor-toolbar button[data-tt].is-active { background: var(--hover-bg); color: var(--ink); }
body.dark #doc-editor-toolbar button[data-tt]:hover, body.dark #doc-editor-toolbar button[data-tt].is-active { background: rgba(255,255,255,0.08); }
#tt-heading { background: transparent; border: none; color: var(--ink-dim); font-size: 13px; font-family: var(--sans); padding: 4px 4px; cursor: pointer; border-radius: 4px; }
#tt-heading:hover { background: var(--hover-bg); color: var(--ink); }
/* TipTap editor */
#doc-editor .ProseMirror { font-family: var(--serif); font-size: var(--text-md); line-height: 1.85; padding: 0; min-height: 200px; color: var(--ink); outline: none; }
#doc-editor .ProseMirror h2 { font-size: 1.3em; margin: 1.2em 0 0.4em; }
#doc-editor .ProseMirror h3 { font-size: 1.1em; margin: 1em 0 0.3em; color: var(--ink-soft); }
#doc-editor .ProseMirror blockquote { border-left: 3px solid var(--rule); padding-left: 16px; color: var(--ink-soft); margin: 0.8em 0; }
#doc-editor .ProseMirror a { color: var(--ink-mid, var(--ink)); text-decoration: underline; text-underline-offset: 2px; }
#doc-editor .ProseMirror p { margin: 0 0 0.5em; }
.doc-save-to { font-family: var(--mono); font-size: var(--text-xs); background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 3px; padding: 3px 6px; cursor: pointer; }

/* Doc viewer modal */
/* doc-viewer is now a side panel slot — layout handled by #right-side-panel */
#doc-viewer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--paper);
}
#doc-viewer #doc-editor {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.doc-viewer-header {
  display: flex;
  align-items: flex-start;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--rule);
  gap: var(--space-4);
}
.doc-viewer-header > div:first-child { flex: 1; min-width: 0; overflow: hidden; }
.doc-viewer-header > div:last-child { flex-shrink: 0; }
.doc-viewer-title {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  outline: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s;
  min-width: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-viewer-title:hover { border-bottom-color: var(--rule); }
.doc-viewer-title:focus { border-bottom-color: var(--ink-dim); }
.draft-rename-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--ink-dim); opacity: 0; transition: opacity 0.15s;
}
.bulk-parent:hover .draft-rename-btn { opacity: 0.5; }
.draft-rename-btn:hover { opacity: 1 !important; color: var(--ink-soft); }
#xfiles-list .bulk-parent {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
#xfiles-list .bulk-parent:hover {
  background: var(--paper-dark);
  border-color: var(--ink-dim);
}
.doc-viewer-author {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-top: 4px;
}
.doc-viewer-close {
  font-size: 20px;
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.doc-viewer-close:hover { color: var(--ink); }
.doc-viewer-nav {
  display: none;
  padding: 10px 24px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  gap: var(--space-5);
  white-space: nowrap;
}
.doc-viewer-nav.has-chapters { display: flex; }
.doc-viewer-nav a {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}
.doc-viewer-nav a:hover { color: var(--ink); }

/* Identity & Transmissions */
/* Identity cards */
.tx-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tx-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-card-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  opacity: 0.5;
}
.tx-card-meta {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  opacity: 0.4;
  margin-top: 10px;
}
.tx-card-content {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-wrap;
}
.tx-card-edit,
.tx-card-import {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.tx-card-edit:hover,
.tx-card-import:hover { color: var(--ink); }
/* Map sections list */
.tx-map-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tx-map-item {
  border-bottom: 1px solid var(--rule);
}
.tx-map-item:last-child { border-bottom: none; }
.tx-map-item-title {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}
.tx-map-item-title:hover { color: var(--ink); }
.tx-map-section-edit {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-dim);
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0; letter-spacing: 0.04em;
}
.tx-map-item:hover .tx-map-section-edit { opacity: 1; }
.tx-map-section-edit:hover { color: var(--ink); }
.tx-map-item-title::before {
  content: '›';
  font-size: var(--text-xs);
  color: var(--ink-dim);
  transition: transform 0.15s;
  display: inline-block;
  width: 8px;
}
.tx-map-item.open .tx-map-item-title::before {
  transform: rotate(90deg);
}
.tx-map-item-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--serif);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-dim);
  padding: 0 0 0 14px;
  white-space: pre-wrap;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
}
.tx-map-item.open .tx-map-item-body {
  max-height: 600px;
  opacity: 1;
  padding: 0 0 10px 14px;
}
/* Identity archive */
.tx-archive-toggle {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.tx-archive-toggle:hover { color: var(--ink-soft); }
.tx-archive-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.tx-archive-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.tx-archive-item-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.tx-archive-item-date {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
}
.tx-archive-item-content {
  font-family: var(--serif);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-dim);
  white-space: pre-wrap;
  max-height: 60px;
  overflow: hidden;
  margin-top: 4px;
  cursor: pointer;
  transition: max-height 0.25s ease;
}
.tx-archive-item.open .tx-archive-item-content {
  max-height: none;
}

/* === SECTION: scope-version-history === */
.tx-scope-versions-wrap { margin-top: 14px; }
.tx-scope-version-body {
  color: var(--ink-dim);
  max-height: 64px;
  overflow: hidden;
  margin-top: 6px;
  cursor: pointer;
  transition: max-height 0.25s ease;
}
.tx-archive-item.open .tx-scope-version-body { max-height: none; }
/* === END SECTION: scope-version-history === */

#transmissions-view {
  --tx-card-bg: color-mix(in srgb, var(--surface) 88%, #ffffff 12%);
  --tx-card-border: color-mix(in srgb, var(--ink) 12%, transparent);
  --tx-chip-bg: color-mix(in srgb, var(--surface) 82%, var(--paper) 18%);
  --tx-chip-bg-hover: color-mix(in srgb, var(--surface-raised) 84%, var(--paper) 16%);
  --tx-chip-border: color-mix(in srgb, var(--ink) 10%, transparent);
  --tx-divider: color-mix(in srgb, var(--ink) 10%, transparent);
  --tx-note-bg: #EDF3EC;
  --tx-note-fg: #346538;
}
body.dark #transmissions-view {
  --tx-card-bg: var(--surface-raised);
  --tx-card-border: color-mix(in srgb, var(--ink) 14%, transparent);
  --tx-chip-bg: color-mix(in srgb, var(--surface) 86%, var(--paper-dark) 14%);
  --tx-chip-bg-hover: color-mix(in srgb, var(--surface-raised) 90%, var(--paper-dark) 10%);
  --tx-chip-border: color-mix(in srgb, var(--ink) 14%, transparent);
  --tx-divider: color-mix(in srgb, var(--ink) 12%, transparent);
  --tx-note-bg: rgba(91, 140, 108, 0.16);
  --tx-note-fg: #b8d9b1;
}
.toolbar.tx-toolbar {
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 0 6px;
  margin-bottom: 20px;
}
.toolbar.tx-toolbar .toolbar-left {
  font-size: 17px;
}
.tx-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1080px;
  /* Respond to the panel's own width (half-open rail), not the viewport. */
  container-type: inline-size;
  container-name: tx-shell;
}
.tx-intro {
  display: flex;
  justify-content: flex-end;
  padding: 0 2px 2px;
}
.tx-intro-note {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-note-fg);
  background: var(--tx-note-bg);
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}
.tx-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.tx-block {
  min-width: 0;
  animation: txBlockIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.tx-block-foundation,
.tx-block-scope {
  grid-column: span 7;
}
.tx-block-map,
.tx-block-archive {
  grid-column: span 5;
}
#transmissions-view .settings-card-group {
  gap: 8px;
}
#transmissions-view .settings-card-label {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  padding: 2px 2px 0;
}
#transmissions-view .settings-card {
  border: 1px solid var(--tx-card-border);
  border-radius: 8px;
  padding: 22px 24px;
  background: var(--tx-card-bg);
  box-shadow: none;
}
.tx-card-header {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.tx-card-actions {
  gap: 8px;
  flex-wrap: wrap;
}
.tx-card-sub {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  opacity: 1;
}
.tx-card-meta {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  margin-top: 14px;
  opacity: 1;
}
.tx-card-content {
  font-size: 15px;
  line-height: 1.74;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
#tx-content-foundation {
  font-family: var(--font-editorial);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
}
#tx-content-scope,
#tx-content-map {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.tx-card-edit,
.tx-card-import,
.tx-archive-toggle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  background: var(--tx-chip-bg);
  border: 1px solid var(--tx-chip-border);
  border-radius: 6px;
  cursor: pointer;
  padding: 5px 8px;
  transition: color 0.2s, background 0.2s, transform 0.16s ease, border-color 0.2s;
}
.tx-card-edit:hover,
.tx-card-import:hover,
.tx-archive-toggle:hover {
  color: var(--ink);
  background: var(--tx-chip-bg-hover);
  border-color: var(--tx-chip-border);
}
.tx-card-edit:active,
.tx-card-import:active,
.tx-archive-toggle:active {
  transform: scale(0.98);
}
.tx-map-item {
  border-bottom: 1px solid var(--tx-divider);
}
.tx-map-item-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
  gap: 8px;
}
.tx-map-section-edit {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 44%, transparent);
  padding: 2px 0;
}
.tx-map-item-title::before {
  content: '+';
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 44%, transparent);
  width: 12px;
  text-align: center;
  transition: none;
}
.tx-map-item.open .tx-map-item-title::before {
  content: '−';
  transform: none;
}
.tx-map-item-body {
  font-size: 13px;
  line-height: 1.68;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  padding: 0 0 0 20px;
}
.tx-map-item.open .tx-map-item-body {
  padding: 0 0 12px 20px;
}
.tx-archive-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--tx-divider);
}
.tx-archive-item-header {
  gap: 16px;
}
.tx-archive-item-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.tx-archive-item-date {
  font-size: 10px;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}
.tx-archive-item-content {
  font-size: 13px;
  line-height: 1.68;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  max-height: 64px;
  margin-top: 8px;
}
@keyframes txBlockIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1080px) {
  .tx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tx-block-foundation,
  .tx-block-scope {
    grid-column: span 2;
  }
  .tx-block-map,
  .tx-block-archive {
    grid-column: span 1;
  }
}
@media (max-width: 720px) {
  .tx-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .tx-block-foundation,
  .tx-block-map,
  .tx-block-scope,
  .tx-block-archive {
    grid-column: span 1;
  }
  #transmissions-view .settings-card {
    padding: 18px 18px 20px;
  }
  .tx-card-header {
    flex-direction: column;
  }
}
/* Half-open rail / docked side panel: collapse to a single column based on the
   shell's own width so Foundation + Map stop fighting for a narrow lane. */
@container tx-shell (max-width: 640px) {
  .tx-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .tx-block-foundation,
  .tx-block-map,
  .tx-block-scope,
  .tx-block-archive {
    grid-column: 1 / -1;
  }
  #transmissions-view .settings-card {
    padding: 16px 16px 18px;
  }
  .tx-card-header {
    flex-direction: column;
    gap: 8px;
  }
  #tx-content-foundation {
    font-size: 16px;
    line-height: 1.66;
  }
  .tx-card-content {
    font-size: 14px;
    line-height: 1.62;
  }
}

/* Garbage items */
.gb-section-header {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  padding: 12px 0 4px;
}
.gb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.gb-item-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-item-date {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  margin: 0 10px;
  white-space: nowrap;
}
.gb-item-actions { display: flex; gap: 6px; }
.gb-item-actions button {
  font-family: var(--mono);
  font-size: 9px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s, border-color 0.15s;
}
.gb-item-actions button:hover { color: var(--ink); border-color: var(--ink-soft); }
.gb-item-actions .gb-destroy:hover { color: #c44; border-color: #c44; }
.gb-kind {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.gb-kind-session         { background: rgba(107,140,255,0.12); color: #6b8cff; }
.gb-kind-session_period  { background: rgba(76,201,201,0.12);  color: #4cc9c9; }
.gb-kind-note            { background: rgba(240,192,96,0.12);  color: #f0c060; }
.gb-kind-file            { background: rgba(240,144,96,0.12);  color: #f09060; }
.gb-kind-transmission    { background: rgba(192,128,224,0.12); color: #c080e0; }
.gb-kind-board           { background: rgba(112,192,128,0.12); color: #70c080; }
.gb-kind-project         { background: rgba(224,112,112,0.12); color: #e07070; }

/* Bulk select — checkbox + action bar */
.bulk-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink-dim);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  position: relative;
  margin-right: 8px;
}
.bulk-check:checked {
  opacity: 1;
  background: var(--ink);
  border-color: var(--ink);
}
.bulk-check:checked::after {
  content: '✓';
  position: absolute;
  top: -1px; left: 2px;
  font-size: var(--text-xs);
  color: var(--paper);
  font-weight: 700;
}
/* Show on row hover or when any checkbox in the list is checked */
.bulk-parent:hover > .bulk-check,
.bulk-list.has-selection .bulk-check { opacity: 1; }
.bulk-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--paper-dark);
  border-top: 1px solid var(--rule);
  position: sticky;
  bottom: 0;
  z-index: 10;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.bulk-bar.visible { display: flex; }
.bulk-bar-count { margin-right: auto; }
.bulk-bar button {
  font-family: var(--mono);
  font-size: var(--text-xs);
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.bulk-bar button:hover { color: var(--ink); border-color: var(--ink-soft); }
.bulk-bar button.danger:hover { color: #c44; border-color: #c44; }

/* Sessions list */
.line-item {
  padding: 10px 14px;
  cursor: pointer;
  border: 1px solid var(--rule);
  transition: background 0.15s, border-color 0.15s;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.line-item:hover { background: var(--paper-dark); border-color: var(--ink-dim); }
.line-item .line-ellipsis {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.line-item:hover .line-ellipsis { opacity: 1; }
.line-ellipsis:hover { background: var(--rule); color: var(--ink); }
.line-item:hover { background: var(--paper-dark); }
.line-meta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}


/* Library */
#source-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 10px;
  padding: 12px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
#source-list:hover {
  scrollbar-width: none;
}
.file-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 95%, var(--ink) 5%);
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
  position: relative;
  min-height: 72px;
}
.file-item:hover { border-color: var(--ink-soft); background: var(--paper-dark); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.file-item:hover .lib-dots { opacity: 1; }
.file-name {
  font-size: var(--text-md); line-height: 1.35; color: var(--ink); cursor: pointer;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 1.35em;
}
.file-meta { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 8px; font-family: var(--mono); }
.file-date { font-size: 9.5px; color: var(--ink-dim); font-family: var(--mono); }

/* Empty state — unified across all views */
.empty-state {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 12px 14px;
}


/* Memory proposal */
.memory-proposal {
  margin-top: 14px;
  padding: 16px 18px 14px;
  background: rgba(79, 168, 150, 0.04);
  border-radius: 6px;
  color: var(--ink-mid);
}
.memory-proposal-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.memory-proposal-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #4fa896;
  flex: 1;
}
.memory-proposal-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.4;
}
.memory-proposal-autosave {
  margin-top: 10px;
  padding: 7px 12px;
  background: rgba(79, 168, 150, 0.05);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.memory-proposal-autosave-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4fa896;
  opacity: 0.65;
  white-space: nowrap;
}
.memory-proposal-autosave-content {
  font-family: var(--serif);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Diff — prose style, no container box */
.memory-proposal-diff {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.85;
  margin-bottom: 16px;
  max-height: 50vh;
  overflow-y: auto;
  /* Override the global scrollbar-hide so this card reads as scrollable/inspectable */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
  overscroll-behavior: contain;
}
.memory-proposal-diff::-webkit-scrollbar { display: block; width: 9px; }
.memory-proposal-diff::-webkit-scrollbar-track { background: transparent; }
.memory-proposal-diff::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.memory-proposal-diff::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  background-clip: padding-box;
}
.diff-line {
  display: block;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-marker { display: none; }
.diff-sep {
  display: block;
  height: 1px;
  background: var(--rule);
  margin: 8px 0;
  opacity: 0.4;
}
.diff-same   { color: var(--ink-soft); opacity: 0.4; }
.diff-removed {
  color: #d44e45;
  text-decoration: line-through;
  text-decoration-color: #d44e45;
  text-decoration-thickness: 1px;
  opacity: 0.75;
}
.diff-added  { color: #4fa896; }
.diff-focus {
  animation: diff-focus-pulse 2.2s ease-out;
  border-radius: 3px;
}
@keyframes diff-focus-pulse {
  0%, 45% { background: rgba(184, 150, 11, 0.18); }
  100% { background: transparent; }
}
body.dark .diff-removed { color: #e06058; text-decoration-color: #e06058; }
body.dark .diff-added   { color: #5bbfaa; }
/* Actions */
.memory-proposal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.tx-accept-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background: #4fa896;
  color: #fff;
  transition: background 0.15s;
}
.tx-accept-btn:hover { background: #3d9080; }
.tx-edit-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-dim);
  transition: border-color 0.15s, color 0.15s;
}
.tx-edit-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.tx-dismiss-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  opacity: 0.35;
  margin-left: auto;
  transition: opacity 0.15s, color 0.15s;
}
.tx-dismiss-btn:hover { opacity: 0.9; color: #d44e45; }
/* Done state */
.memory-proposal-done {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #4fa896;
  animation: tx-done-fade 2.8s ease forwards;
}
.memory-proposal-done-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4fa896;
  flex-shrink: 0;
}
@keyframes tx-done-fade {
  0%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}


.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  flex-shrink: 0;
}
#work-view > .toolbar { display: none; }
.lines-view { padding: 0; overflow: hidden; }
.lines-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 20px;
  flex-shrink: 0;
}
.lines-tab {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 14px 10px;
  cursor: default;
  transition: color 0.15s, border-color 0.15s;
}
.lines-tab.active { color: var(--ink); border-bottom-color: var(--ink-soft); }
.lines-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.lines-action-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.lines-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 12px var(--sans);
  padding: 7px 9px;
  outline: none;
}
.lines-search-input:focus { border-color: var(--ink-dim); }
.lines-search-input::placeholder { color: var(--ink-ghost); }
#right-side-panel .lines-tabs .view-back-btn { display: none; }

.toolbar-left {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--ink);
}
.line-rename-input {
  font-family: var(--sans);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  outline: none;
  padding: 2px 0;
  width: 160px;
}
.line-rename-input:focus { border-bottom-color: var(--ink-dim); }

.line-title-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.line-title-label:not(:empty)::before {
  content: '/';
  color: #4fa896;
  margin-right: 6px;
}

.t-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.t-btn:hover { color: var(--ink); border-color: var(--ink-dim); background: rgba(28,26,22,0.04); }
body.dark .t-btn:hover { background: rgba(212,207,197,0.06); }
/* Compact sibling of .t-btn for inline card/toolbar actions (text label or inline SVG).
   The class was already used in six places but carried no rule at all, so every button
   wearing it rendered as the browser's default white chrome on the dark surface. */
.t-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink-dim);
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.t-btn-icon:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.t-btn-icon:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 70%, transparent);
  outline-offset: 2px;
}
.t-btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.palette-btn.active { border-color: var(--pass-3); color: var(--pass-3); }

/* ── Control panel ───────────────────────────────────────── */
/* ── Custom tooltips ──────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 200;
}
[data-tip]:hover::after { opacity: 1; }
body.dark [data-tip]::after {
  background: #2b2926;
  border-color: rgba(212,207,197,0.1);
  color: var(--ink-mid);
}

/* @sas claim: Borderless text chips in the inbox toolbar — minimal weight, soft hover background, subtle caret. terms: cycle-btn, ic-divider, caret, dropdown, inbox id: inbox:cycle-btn-elegant timestamp: 2026-05-16T00:00:00Z modified_by: inbox-option-b-wave3 live: true */
.cycle-btn {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 4px 7px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.1s;
  align-self: center;
  flex-shrink: 0;
  user-select: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.cycle-btn::after {
  content: '';
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
  opacity: 0.45;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.15s;
}
.cycle-btn:hover { color: var(--ink); background: rgba(28,26,22,0.05); }
.cycle-btn:hover::after { opacity: 0.85; }
body.dark .cycle-btn:hover { background: rgba(212,207,197,0.06); }
.cycle-btn:active { transform: scale(0.96); }
.cycle-btn.is-open { color: var(--ink); background: rgba(28,26,22,0.07); }
body.dark .cycle-btn.is-open { background: rgba(212,207,197,0.08); }
.cycle-btn.is-open::after { transform: rotate(180deg); opacity: 0.9; }

.computer-access-btn::before {
  content: '';
  width: 11px;
  height: 12px;
  box-sizing: border-box;
  background-color: currentColor;
  -webkit-mask: var(--ca-shield-icon) center / contain no-repeat;
  mask: var(--ca-shield-icon) center / contain no-repeat;
  opacity: 0.9;
  flex-shrink: 0;
}
:root {
  --ca-shield-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 20 5v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* Composer mode glyph — ~ (Read) / > (Code) in the substrip under the composer frame. */
.composer-mode-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 30px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  cursor: default;
  pointer-events: none;
  flex-shrink: 0;
  align-self: center;
}
.composer-action-cluster { align-self: center; }
.composer-mode-glyph {
  font-family: var(--code); /* Geist Mono was never loaded — match code-block face */
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
}
#composer-line-mode[data-mode="code"] .composer-mode-glyph { color: #3fb950; }
#composer-line-mode[data-mode="depth"] .composer-mode-glyph { color: var(--accent); }

/* Neutralize legacy tier colors — single ink palette across all chips */
.cycle-btn.level-1,
.cycle-btn.level-2,
.cycle-btn.level-3,
.cycle-btn.level-codex { color: var(--ink-soft); }

/* Thin divider for semantic grouping in #input-controls */
.ic-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--ink-ghost);
  opacity: 0.5;
  align-self: center;
  flex-shrink: 0;
  margin: 0 2px;
}

/* @sas claim: The keyboard-accessible agent access menu stays anchored to the composer and inside every viewport. terms: agent access, responsive anchored menu, keyboard navigation, computer-access-menu, computer-access-menu-item, computer-access-check id: 3774:computer-access-menu-styles-anchor timestamp: 2026-05-10T05:37:00+03:00live: true */
.computer-access-menu {
  display: none;
  position: fixed;
  z-index: 2100;
  box-sizing: border-box;
  width: min(286px, calc(100vw - 16px));
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  transform: translateY(-100%);
}
.computer-access-menu.open { display: flex; flex-direction: column; gap: 3px; }
body.dark .computer-access-menu { background: var(--charcoal); }
.computer-access-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  padding: 6px 8px;
  text-align: left;
}
.computer-access-menu-item:hover,
.computer-access-menu-item.active {
  color: var(--ink);
  border-color: var(--rule);
  background: rgba(28,26,22,0.04);
}
body.dark .computer-access-menu-item:hover,
body.dark .computer-access-menu-item.active { background: rgba(212,207,197,0.06); }
.computer-access-menu-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.computer-access-menu-copy strong { font: inherit; color: inherit; }
.computer-access-menu-copy small {
  color: var(--ink-ghost);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.25;
}
.computer-access-menu-item.active .computer-access-menu-copy small,
.computer-access-menu-item:hover .computer-access-menu-copy small { color: var(--ink-soft); }
.computer-access-check { color: var(--ink); min-width: 12px; text-align: right; }

:is(#input-controls, .input-underbar) .cycle-btn.computer-access-btn.access-full-access {
  color: #d85f47 !important;
}
:is(#input-controls, .input-underbar) .cycle-btn.computer-access-btn.access-full-access:hover,
:is(#input-controls, .input-underbar) .cycle-btn.computer-access-btn.access-full-access.is-open {
  color: #d85f47 !important;
  background: rgba(216, 95, 71, 0.10) !important;
}
body.dark :is(#input-controls, .input-underbar) .cycle-btn.computer-access-btn.access-full-access,
body.dark :is(#input-controls, .input-underbar) .cycle-btn.computer-access-btn.access-full-access:hover,
body.dark :is(#input-controls, .input-underbar) .cycle-btn.computer-access-btn.access-full-access.is-open {
  color: #e7785f !important;
}
body.dark :is(#input-controls, .input-underbar, .composer-substrip) .cycle-btn.computer-access-btn.access-full-access:hover,
body.dark :is(#input-controls, .input-underbar, .composer-substrip) .cycle-btn.computer-access-btn.access-full-access.is-open {
  background: rgba(231, 120, 95, 0.11) !important;
}
.computer-access-menu-item.access-full-access,
.computer-access-menu-item.access-full-access:hover,
.computer-access-menu-item.access-full-access.active {
  color: #d85f47;
}
.computer-access-menu-item.access-full-access:hover,
.computer-access-menu-item.access-full-access.active {
  border-color: rgba(216, 95, 71, 0.35);
  background: rgba(216, 95, 71, 0.08);
}
body.dark .computer-access-menu-item.access-full-access,
body.dark .computer-access-menu-item.access-full-access:hover,
body.dark .computer-access-menu-item.access-full-access.active {
  color: #e7785f;
}
body.dark .computer-access-menu-item.access-full-access:hover,
body.dark .computer-access-menu-item.access-full-access.active {
  border-color: rgba(231, 120, 95, 0.34);
  background: rgba(231, 120, 95, 0.10);
}
.computer-access-menu-item.access-full-access .computer-access-check { color: currentColor; }

.desktop-helper-menu-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
}
.desktop-helper-menu-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
}
.desktop-helper-menu-status > small { color: var(--ink-ghost); }
.desktop-helper-menu-action:disabled {
  cursor: wait;
  opacity: 0.72;
}
.desktop-helper-state {
  flex: 0 0 auto;
  color: var(--ink-ghost);
  font-family: var(--sans);
  font-size: 10px;
  white-space: nowrap;
}
.desktop-helper-menu-status.is-ready .desktop-helper-state { color: #3f7b57; }
body.dark .desktop-helper-menu-status.is-ready .desktop-helper-state { color: #75b78c; }
.desktop-helper-manual-note {
  padding: 0 8px 3px;
  color: var(--ink-ghost);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.35;
}

/* @sas claim: Generic chip-dropdown menu — used by compact composer pickers. Visually matches .computer-access-menu. terms: gi-picker-menu, gi-picker-item, gi-picker-check, dropdown id: inbox:gi-picker-menu timestamp: 2026-05-16T00:00:00Z modified_by: inbox-option-b live: true */
.gi-picker-menu {
  display: none;
  position: fixed;
  z-index: 2100;
  min-width: 160px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  transform: translateY(-100%);
}
.gi-picker-menu.open { display: flex; flex-direction: column; gap: 3px; }
body.dark .gi-picker-menu { background: var(--charcoal); }
.gi-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  padding: 6px 8px;
  text-align: left;
}
.gi-picker-item:hover,
.gi-picker-item.active {
  color: var(--ink);
  border-color: var(--rule);
  background: rgba(28,26,22,0.04);
}
body.dark .gi-picker-item:hover,
body.dark .gi-picker-item.active { background: rgba(212,207,197,0.06); }
.gi-picker-check { color: var(--ink); min-width: 12px; text-align: right; }
.gi-picker-desc { color: var(--ink-dim); font-size: 10px; opacity: 0.75; margin-left: 8px; }

/* ── Chat text size (Aa) — Settings → Appearance stepper, persisted via --gi-chat-font ── */
.text-size-pop {
  display: none;
  position: fixed;
  z-index: 2100;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  transform: translateY(-100%);
}
.text-size-pop.open { display: flex; }
body.dark .text-size-pop { background: var(--charcoal); }
.text-size-pop button {
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
}
.text-size-pop button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.text-size-pop .ts-val { min-width: 28px; text-align: center; color: var(--ink); }
.text-size-pop .ts-sep { width: 1px; height: 16px; background: var(--rule); margin: 0 2px; }
.text-size-pop .ts-weight { min-width: 56px; text-align: center; }

/* @sas claim: Clickable model picker dropdown — fixed panel above the model button with scrollable model list grouped by provider. terms: model-picker-menu, fixed, z-index, max-height, overflow-y id: 2899:model-picker-menu-styles timestamp: 2026-05-07T00:00:00.000Zlive: true */
.model-picker-menu {
  display: none;
  position: fixed;
  z-index: 2000;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.22);
  padding: var(--space-3) 0;
  width: min(392px, calc(100vw - 16px));
  min-width: min(360px, calc(100vw - 16px));
  max-height: min(560px, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  font-family: var(--codex-chat-font-family, var(--sans));
  font-weight: var(--codex-chat-weight, var(--gi-chat-weight, 400));
  font-synthesis-weight: none;
}
body.dark .model-picker-menu { background: var(--charcoal); }
.model-picker-menu::-webkit-scrollbar { display: block; width: 6px; }
.model-picker-menu::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--scrollbar-thumb); }
.model-picker-menu::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
/* @sas claim: Provider group header row inside the model picker — small uppercase label with top rule separator. terms: mhc-group, group header, uppercase, border-top, provider label id: 2899:mhc-group-styles timestamp: 2026-05-07T00:00:00.000Zlive: true */
.mhc-group {
  padding: var(--space-4) var(--space-5) var(--space-2);
  font: inherit;
  font-size: calc(var(--codex-chat-font, var(--gi-chat-font, 15px)) - 1px);
  font-weight: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  border-top: 1px solid var(--rule);
}
/* @sas claim: Removes top border from the first provider group header so the menu top edge stays clean. terms: mhc-group, first-child, border-top id: 2899:mhc-group-first-child timestamp: 2026-05-07T00:00:00.000Zlive: true */
.mhc-group:first-child { border-top: none; }
/* @sas claim: Individual model row in the picker — compact 2-column grid for model and reasoning effort. terms: mhc-row, grid-template-columns, cursor, transition, model, reasoning effort id: 2899:mhc-row-styles timestamp: 2026-05-07T00:00:00.000Zlive: true */
.mhc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - 16px);
  min-height: 40px;
  margin: 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: var(--codex-chat-font, var(--gi-chat-font, 15px));
  font-weight: inherit;
  line-height: var(--codex-chat-line, 1.62);
  color: var(--ink-soft);
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out;
}
/* @sas claim: Hover and active state backgrounds for model picker rows, with dark-mode variants. terms: mhc-row, hover, mhc-active, mhc-blocked, dark, background, opacity, cursor id: 2899:mhc-row-state-styles timestamp: 2026-05-07T00:00:00.000Zlive: true */
.mhc-row:not(.mhc-blocked):hover { background: rgba(28,26,22,0.04); color: var(--ink); }
body.dark .mhc-row:not(.mhc-blocked):hover { background: rgba(212,207,197,0.05); }
.mhc-row.mhc-active { border-color: var(--rule); background: rgba(28,26,22,0.05); color: var(--ink); }
body.dark .mhc-row.mhc-active { background: rgba(212,207,197,0.07); }
.mhc-row:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: -2px; }
.mhc-row.mhc-blocked { cursor: not-allowed; }
.mhc-row.mhc-blocked:not(.mhc-unavailable) { color: var(--ink-soft); opacity: 0.35; }
.mhc-row.mhc-unavailable { opacity: 1; }
.mhc-row.mhc-unavailable .mhc-label { color: var(--ink-soft); }
.mhc-row.mhc-unavailable .mhc-status { color: var(--ink); }
/* @sas claim: Model picker row text keeps the model prominent and essential status notices readable. terms: mhc-label, mhc-status, mhc-vertex, font-weight, color, ink-soft, vertex badge id: 2899:mhc-column-styles timestamp: 2026-05-16T00:00:00+03:00 modified_by: ir-cleanup live: true */
.mhc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; color: inherit; }
.mhc-row.mhc-active .mhc-label { color: var(--ink); }
.mhc-check { display: grid; width: 20px; height: 20px; place-items: center; color: var(--ink); }
.mhc-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.mhc-status { grid-column: 1 / -1; min-width: 0; color: var(--ink-soft); line-height: 1.4; }
.mhc-row.mhc-notice .mhc-status { grid-column: 1 / -1; }
.mhc-key { margin-left: var(--space-2); color: var(--ink-dim); font-size: var(--text-xs); font-weight: 450; }
/* @sas claim: Renders the Vertex badge shown on Vertex-routed model picker entries using the Google brand gradient. terms: mhc-vertex, Vertex badge, Google gradient, model picker id: 3774:model-picker-vertex-badge timestamp: 2026-05-10T10:00:00Z modified_by: ommit-hook-fixlive: true */
.mhc-vertex {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 3px;
  background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC04 100%);
  color: #fff;
  vertical-align: middle;
  line-height: 1.4;
}
.mhc-nvidia {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 3px;
  background: #76B900;
  color: #fff;
  vertical-align: middle;
  line-height: 1.4;
}

/* @sas claim: Floating context menu container — fixed position, paper background, subtle shadow, hidden until .open. terms: ctx-menu, position fixed, z-index, paper, charcoal, rule, box-shadow, padding, display none, .open id: 2899:ctx-menu-container timestamp: 2026-05-08T00:00:00.000Zlive: true */
.ctx-menu {
  position: fixed;
  z-index: 1000;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px;
  min-width: 140px;
  display: none;
}
body.dark .ctx-menu { background: var(--charcoal); }
.ctx-menu.open { display: block; }
.ctx-menu-item[hidden],
.ctx-menu-sep[hidden] { display: none !important; }
.ctx-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.ctx-menu-item:hover { background: var(--paper-dark); color: var(--ink); }
.ctx-menu-sep { height: 1px; background: var(--rule); margin: 3px 8px; }
.lib-dots {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-size: var(--text-md); line-height: 1; color: var(--ink-dim); letter-spacing: 1px;
  opacity: 0; transition: opacity 0.15s; flex-shrink: 0; margin-left: auto;
}
.file-item:hover .lib-dots, .ground-file-item:hover .lib-dots, #xfiles-list .bulk-parent:hover .lib-dots, .line-card:hover .lib-dots { opacity: 1; }
.lib-dots:hover { color: var(--ink); }
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 24px 20px;
  scrollbar-width: none;
  position: relative;
  overflow-x: hidden;
}
#chat-main-shell .messages {
  /* Keep the transcript lane on the same horizontal grid as the composer. */
  padding: 0 0 24px 0;
}

/* per-task color wash removed — task rooms keep the plain chat background (cp-plain-text-redesign 2026-05-15). */
.messages::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 0.55s ease, opacity 0.55s ease;
}

/* === SECTION: per-line-dom-containers === */
/* Per-line chat containers inside #messages. Only the active line is visible;
   backgrounded containers stay in memory with display:none, keeping their DOM
   and scroll position alive. No position:relative so children's offsetTop
   resolves against #messages (the positioned ancestor) — preserves
   scrollToBottom's bottom-anchor padding measurement. */
.line-chat {
  display: none;
  min-height: 100%;
}
.line-chat.active {
  display: block;
}
/* === END SECTION: per-line-dom-containers === */

/* ─── LANDING FRAME ─── */
#landing-frame-wrap { width: 100%; background: #0e0d0b; }
#landing-frame {
  width: 100%; border: none; display: block;
  background: #0e0d0b;
  color-scheme: dark;
}

/* ─── SIGNUP CTA ─── */
#signup-cta {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.1em;
  text-transform: lowercase; text-decoration: none;
  color: var(--ink-dim);
  flex-shrink: 0;
  transition: color 0.2s;
  padding: 0 4px;
}
#signup-cta:hover { color: var(--ink); }

#chat-thumb {
  position: fixed;
  width: 5px;
  border-radius: 2.5px;
  background: var(--scrollbar-thumb);
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  z-index: 10;
  transition: opacity 0.4s ease;
  user-select: none;
}
/* visible only when the chat content overflows */
#chat-thumb.has-overflow { opacity: 0.18; pointer-events: auto; }
/* active while user is scrolling (class toggled by _resetChatIdle) */
#chat-thumb.has-overflow.chat-active { opacity: 0.35; transition: opacity 0.15s ease; }
#chat-thumb.has-overflow:hover { opacity: 0.55; }
#chat-thumb.has-overflow:active { cursor: grabbing; opacity: 0.75; }

/* === SECTION: exchange-navigator === */
#exchange-navigator {
  position: fixed;
  width: 28px;
  z-index: 11;
  opacity: 0.34;
  user-select: none;
  pointer-events: none;
  transition: opacity 140ms ease;
}
#exchange-navigator.is-active,
#exchange-navigator:focus-within { opacity: 0.82; }
#exchange-navigator[hidden],
#exchange-navigator-preview[hidden] { display: none !important; }
#app-shell:has(#artifact-shelf:not([hidden])) #exchange-navigator,
#app-shell:has(#artifact-shelf:not([hidden])) #exchange-navigator-preview,
#app-shell:has(#work-rail.has-tiles) #exchange-navigator,
#app-shell:has(#work-rail.has-tiles) #exchange-navigator-preview {
  display: none !important;
}
#exchange-navigator-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.exchange-navigator-marker {
  position: absolute;
  left: 0;
  width: 28px;
  height: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
}
.exchange-navigator-marker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink-dim) 58%, transparent);
  transform: translate(-50%, -50%);
  transition: width 120ms ease, background-color 120ms ease, opacity 120ms ease;
  opacity: 0.65;
}
.exchange-navigator-marker.is-current::before {
  width: 8px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  opacity: 1;
}
.exchange-navigator-marker:hover::before,
.exchange-navigator-marker:focus-visible::before {
  width: 14px;
  background: var(--ink-heavy);
  opacity: 1;
}
.exchange-navigator-marker:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--ink) 38%, transparent);
  outline-offset: 2px;
  border-radius: 3px;
}
.exchange-navigator-marker.exchange-navigator-older::before {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink-dim) 46%, transparent);
  box-shadow:
    -4px 0 0 color-mix(in srgb, var(--ink-dim) 30%, transparent),
    4px 0 0 color-mix(in srgb, var(--ink-dim) 30%, transparent);
}
#exchange-navigator-preview {
  position: fixed;
  z-index: 120;
  width: min(460px, calc(100vw - 88px));
  max-height: min(180px, calc(100vh - 32px));
  overflow: hidden;
  padding: 15px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--rule) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 95%, var(--ink) 5%);
  color: var(--ink);
  pointer-events: none;
}
#exchange-navigator-preview-meta {
  overflow: hidden;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--ink-dim) 76%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
#exchange-navigator-preview-title {
  overflow: hidden;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#exchange-navigator-preview-body {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.msg-row.exchange-navigator-arrival .msg-body {
  outline: 1px solid transparent;
  outline-offset: 6px;
  animation: exchange-navigator-arrival 900ms ease-out;
}
@keyframes exchange-navigator-arrival {
  0%, 28% {
    outline-color: color-mix(in srgb, var(--accent, var(--ink)) 70%, transparent);
    background-color: color-mix(in srgb, var(--accent, var(--ink)) 9%, transparent);
  }
  100% {
    outline-color: transparent;
    background-color: transparent;
  }
}
@media (max-width: 700px) {
  .exchange-navigator-marker:hover::before,
  .exchange-navigator-marker:focus-visible::before { width: 12px; }
  #exchange-navigator-preview { width: min(340px, calc(100vw - 70px)); }
}
@media (prefers-reduced-motion: reduce) {
  #exchange-navigator,
  .exchange-navigator-marker::before { transition: none; }
  .msg-row.exchange-navigator-arrival .msg-body { animation: none; }
}

#view-thumb {
  position: fixed;
  width: 5px;
  border-radius: 2.5px;
  background: var(--scrollbar-thumb);
  opacity: 0;
  cursor: grab;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.4s ease;
  user-select: none;
}
/* Direct views (library, pulse, etc.) — show when overflow present */
#view-thumb.visible { opacity: 0.28; pointer-events: auto; transition: opacity 0.15s ease; }
#view-thumb.visible:hover { opacity: 0.55; }
#view-thumb.visible:active { cursor: grabbing; opacity: 0.75; }
/* Side panel open — hide thumb until mouse enters the panel */
body.panel-open #view-thumb.visible { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
body.panel-open.panel-thumb-hover #view-thumb.visible { opacity: 0.28; pointer-events: auto; transition: opacity 0.15s ease; }
body.panel-open.panel-thumb-hover #view-thumb.visible:hover { opacity: 0.55; }


.scroll-down-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}
.scroll-down-btn.visible { opacity: 1; pointer-events: auto; }
.scroll-down-btn:hover { color: var(--ink); border-color: var(--ink-dim); }


.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  gap: 14px;
}
.empty-line-number {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.empty-ground-note {
  font-family: var(--mono);
  font-size: var(--text-md);
  color: var(--ink-ghost);
  letter-spacing: 0.03em;
}

/* === SECTION: first-project-setup === */
/* Owner: first-project-setup — usable first-run project creation for an empty local profile. */
.first-project-setup {
  width: min(620px, calc(100% - 64px));
  display: grid;
  gap: 26px;
  padding: 36px 0;
  text-align: left;
}
.first-project-copy h1 {
  margin: 0 0 10px;
  color: var(--ink-heavy);
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.first-project-copy p,
.first-project-provider-note {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: 1.55;
}
.first-project-form {
  display: grid;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.first-project-form label {
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--text-sm);
}
.first-project-form input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: 8px;
  outline: none;
  font-family: var(--sans);
  font-size: var(--text-md);
}
.first-project-form input::placeholder { color: var(--ink-faint); }
.first-project-form input:focus-visible {
  border-color: var(--ink-dim);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pass-3) 28%, transparent);
}
.first-project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.first-project-actions .t-btn {
  min-height: 38px;
  padding: 8px 13px;
}
.first-project-actions .first-project-primary {
  color: var(--paper);
  background: var(--ink-heavy);
  border-color: var(--ink-heavy);
}
.first-project-actions .t-btn:disabled,
.first-project-form input:disabled {
  cursor: wait;
  opacity: 0.55;
}
.first-project-status {
  min-height: 18px;
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.first-project-provider-note {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}
@media (max-width: 700px) {
  .first-project-setup { width: min(100% - 32px, 620px); padding: 24px 0; }
  .first-project-actions { align-items: stretch; flex-direction: column; }
  .first-project-actions .t-btn { width: 100%; }
}

/* === SECTION: chat-messages === */
/* Owner: chat-messages — msg-row, msg-body, user/assistant bubbles, coding events, session separators, streaming. */
.msg-row {
  max-width: min(760px, calc(100% - 108px));
  margin-left: auto;
  margin-right: 54px;
  min-width: 0;
  padding: 0 0 28px 0;
  animation: arrive 0.25s ease;
  position: relative;
}
#chat-main-shell .msg-row {
  max-width: min(780px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 24px;
}
.msg-row.pres::before {
  content: '';
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 28px;
  width: 1px;
  background: rgba(255,255,255,0.07);
}
body.light .msg-row.pres::before { background: rgba(28,26,22,0.12); }
.msg-row.user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  width: fit-content;
  margin-left: auto;
  gap: 6px;
}
.msg-row.coding-event {
  display: flex;
  justify-content: center;
  margin: 24px auto;
  width: 100%;
  max-width: 640px;
  padding: 0 20px;
  box-sizing: border-box;
}
.transcript-event-row {
  --transcript-event-max: min(620px, 100%);
}
.transcript-event-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: var(--transcript-event-max);
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  opacity: 0.72;
  line-height: 1.55;
}
.transcript-event-card--coding.coding-event-card {
  flex: 1 1 auto;
  width: auto;
  max-width: min(760px, 100%);
}
.transcript-event-card--tool > .tool-activity-receipt {
  margin: 0;
  opacity: 1;
}
/* Expandable grouped receipts — one quiet summary line, steps unfold on click */
details.transcript-event-card.transcript-event-expand {
  display: block;
}
.transcript-event-expand-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.transcript-event-expand-summary::-webkit-details-marker { display: none; }
.transcript-event-expand-summary > .tool-activity-receipt {
  margin: 0;
  opacity: 1;
}
.transcript-event-expand-chevron {
  flex: 0 0 auto;
  align-self: center;
  font-size: 12px;
  opacity: 0.55;
  transition: transform 0.15s ease;
}
.transcript-event-expand[open] .transcript-event-expand-chevron {
  transform: rotate(90deg);
}
.transcript-event-steps {
  margin: 4px 0 2px 18px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--ink-dim) 25%, transparent);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.transcript-event-step .tool-activity-receipt {
  margin: 0;
  opacity: 0.85;
}
.transcript-event-label {
  flex: 0 0 auto;
}
.transcript-event-text {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* Local action events — follow normal message flow (same as .msg-row base) */
.msg-row.coding-event.local-event {
  justify-content: flex-start;
  margin: 4px 54px 4px auto;
  width: auto;
  max-width: min(760px, calc(100% - 108px));
  padding: 0;
}
#chat-main-shell .msg-row.coding-event.local-event {
  margin: 4px auto;
  max-width: min(780px, calc(100% - 64px));
}
#chat-main-shell .msg-row.coding-event {
  max-width: min(780px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  justify-content: flex-start;
}
/* Browser screenshot inline card (15x) */
.browser-screenshot-row { margin: 4px 0; }
.browser-screenshot-card {
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--rule);
  margin-left: 96px;
}
.browser-screenshot-card img {
  display: block;
  max-width: 760px;
  width: 100%;
  height: auto;
}

.coding-event-card {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  opacity: 0.72;
  line-height: 1.55;
  max-height: 260px;
  overflow-y: auto;
}
.coding-event-header {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.coding-event-header code {
  background: none;
  padding: 0;
  font-family: var(--code);
  color: var(--ink);
}
.coding-event-body {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.coding-event-body p { margin: 0 0 6px; }
.coding-event-body p:last-child { margin-bottom: 0; }

/* ── Coding step styles ───────────────────────────────────── */
.msg-body p.step-heading,
.msg-body h1.step-heading,
.msg-body h2.step-heading,
.msg-body h3.step-heading,
.msg-body h4.step-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-heavy);
  margin: 18px 0 2px;
  line-height: 1.4;
}
.msg-body p.step-heading + p,
.msg-body h3.step-heading + p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 0;
}
.msg-body code.file-chip {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: none;
  border-radius: 3px;
  padding: 0.06em 0.3em;
  font-size: 0.9em;
  color: var(--ink-heavy);
}
.msg-body code.file-chip.file-chip--change-review {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 24%, transparent);
  text-underline-offset: 3px;
}
.msg-body code.file-chip.file-chip--change-review:hover,
.msg-body code.file-chip.file-chip--change-review:focus-visible {
  color: var(--ink-heavy);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  text-decoration-color: currentColor;
  outline: none;
}
.diff-add { color: #6ba56b; font-variant-numeric: tabular-nums; }
.diff-del { color: #c06030; font-variant-numeric: tabular-nums; }
.msg-body ol.coding-ol {
  list-style: none;
  padding: 0;
  margin: 4px 0 12px;
  counter-reset: step-counter;
}
.msg-body ol.coding-ol > li {
  font-size: 12px;
  line-height: 1.5;
  padding-block: 4px;
  padding-inline: 28px 0;
  margin-bottom: 1px;
  position: relative;
  counter-increment: step-counter;
  border-inline-start: 2px solid var(--ink-ghost);
  margin-inline-start: 4px;
  color: var(--ink-mid);
}
.msg-body ol.coding-ol > li::before {
  content: counter(step-counter);
  position: absolute;
  inset-inline-start: 7px;
  color: var(--ink-ghost);
  font-size: 9.5px;
  font-weight: 700;
  top: 5px;
  letter-spacing: 0.02em;
}

/* ── Fix-it panel chrome ─────────────────────────────────── */
#fixit-panel {
  flex-direction: column;
  padding: 16px 18px;
  gap: 12px;
}
.fixit-panel-header {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
#fixitbtn-input {
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 7px 9px;
  resize: none;
  outline: none;
  line-height: 1.5;
  flex: 1;
  min-height: 80px;
}
#fixitbtn-input:focus { border-color: rgba(195,85,90,0.40); }
#fixitbtn-input::placeholder { color: var(--ink-ghost); }
#fixitbtn-submit {
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 12px 6px;
  border-radius: 4px;
  border: 1px solid rgba(195,85,90,0.40);
  background: transparent;
  color: rgba(195,85,90,0.85);
  cursor: pointer;
  transition: background 0.12s;
}
#fixitbtn-submit:hover { background: rgba(195,85,90,0.08); }

/* ── Bug fixer panel ──────────────────────────────────────── */
#bugfix-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.bugfix-step-feed {
  flex: 1;
  overflow-y: auto;
  padding: 14px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bugfix-empty-state {
  padding: 32px 20px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-ghost);
  line-height: 1.7;
  text-align: center;
}
.bugfix-empty-state em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.bugfix-step-card {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 8px 14px;
  gap: 3px;
  opacity: 0;
  transform: translateY(4px);
  animation: toolActivityEnter 0.22s ease forwards;
  transition: background 0.15s ease;
}
.bugfix-step-card.running { background: rgba(120,148,220,0.05); }
.bugfix-step-card.done { background: rgba(85,175,120,0.05); }
.bugfix-step-card.failed { background: rgba(195,85,90,0.05); }
.bugfix-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bugfix-step-label {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.4;
}
.bugfix-step-card.done .bugfix-step-label,
.bugfix-step-card.failed .bugfix-step-label { color: var(--ink-soft); }
.bugfix-step-detail {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  line-height: 1.5;
  padding-left: 16px;
}
.bugfix-patch-preview {
  margin: 8px 0 0 20px;
  max-height: 260px;
  overflow: auto;
  white-space: pre;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px;
}
.bugfix-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-ghost);
}
.bugfix-dot.breathing {
  background: rgba(120,148,220,0.75);
  animation: breatheGlow 2.2s ease-in-out infinite;
}
.bugfix-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.bugfix-icon.check { color: rgba(85,175,120,0.85); }
.bugfix-icon.cross { color: rgba(195,85,90,0.85); }
.bugfix-action-zone {
  flex-shrink: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--paper);
}
.bugfix-action-zone:empty { display: none; }
.bugfix-chip {
  appearance: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  border: 1px solid;
  cursor: default;
  transition: filter 0.15s ease;
}
.bugfix-chip.chip-inform {
  border-color: rgba(120,148,220,0.30);
  color: rgba(120,148,220,0.85);
}
.bugfix-chip.chip-approve {
  border-color: rgba(85,175,120,0.45);
  color: rgba(85,175,120,0.90);
  cursor: pointer;
}
.bugfix-chip.chip-approve:hover { filter: brightness(1.15); }
.bugfix-chip.chip-act {
  border-color: rgba(200,145,55,0.45);
  color: rgba(200,145,55,0.90);
  cursor: pointer;
}
.bugfix-chip.chip-act:hover { filter: brightness(1.15); }
.bugfix-chip.chip-report {
  border-color: var(--ink-ghost);
  color: var(--ink-dim);
  cursor: pointer;
}
.bugfix-chip.chip-report:hover { filter: brightness(1.10); }
/* Entry chip on error message rows */
.bugfix-entry-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 0;
  padding: 4px 9px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  background: color-mix(in srgb, var(--paper) 92%, rgba(176, 70, 50, 0.10));
  color: var(--ink);
  border: 1px solid rgba(176, 70, 50, 0.24);
  transition: background 0.15s ease, border-color 0.15s ease;
  vertical-align: middle;
}
.bugfix-entry-chip:hover {
  background: color-mix(in srgb, var(--paper) 88%, rgba(176, 70, 50, 0.14));
  border-color: rgba(176, 70, 50, 0.36);
}

/* Local action event — state badge (15e) */
.coding-event-card.local-action { opacity: 0.65; }
.event-state {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 2px;
  font-family: var(--mono);
}
/* State badge styling (dot + grey text) is owned by "chat message presentation" block. */

/* === SECTION: chat-action-strip === */
/* Owner: chat approval actions -- compact transcript action strips replacing old heavy plan/task/worker card UI. */
/* Compatibility selectors stay because app.js still emits plan-* nodes for proposal behavior. */
.plan-row {
  padding: 0 0 0 56px;
  margin: 8px 0;
}
.plan-row.plan-executed,
.plan-card.plan-executed {
  display: none;
}
.plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "header actions" "body actions";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  max-width: 720px;
  padding: 7px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.plan-card-header { grid-area: header; display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; }
.plan-badge { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-dim); background: transparent; padding: 0; border: 0; border-radius: 0; flex-shrink: 0; }
.plan-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink); opacity: 0.88; }
.plan-card-body { grid-area: body; max-height: 2.9em; overflow: hidden; margin: 1px 0 0; font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--ink-dim); word-wrap: break-word; }
.plan-card-body h1, .plan-card-body h2, .plan-card-body h3 { display: inline; margin: 0; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.plan-card-body p { margin: 0; }
.plan-card-body ol, .plan-card-body ul { margin: 0; padding-left: 16px; }
.plan-card-body li { margin: 0; }
.plan-card-body code { font-family: var(--code); font-size: 11px; background: transparent; color: inherit; padding: 0; border-radius: 0; }
.plan-card-body pre code { background: none; color: inherit; padding: 0; font-size: 11px; }
.plan-card-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.plan-btn { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 5px 8px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--rule) 84%, transparent); cursor: pointer; transition: background 0.15s, opacity 0.15s; background: transparent; color: var(--ink); opacity: 0.82; }
.plan-btn:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.plan-approve { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--rule) 88%, transparent); opacity: 1; }
.plan-approve:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.line-plan-row {
  padding: 0 0 0 56px;
  margin: 8px 0;
}
.line-plan-row.line-plan-executed .line-plan-actions {
  display: none;
}
.line-plan-choice {
  max-width: 760px;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.line-plan-body {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.line-plan-body h1,
.line-plan-body h2,
.line-plan-body h3 {
  margin: 12px 0 5px;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink);
}
.line-plan-body h1:first-child,
.line-plan-body h2:first-child,
.line-plan-body h3:first-child {
  margin-top: 0;
}
.line-plan-body ul,
.line-plan-body ol {
  margin: 4px 0;
  padding-left: 18px;
}
.line-plan-body p {
  margin: 4px 0;
}
.line-plan-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.line-plan-action {
  display: grid;
  align-content: start;
  gap: 5px;
}
.line-plan-btn {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--gi-chat-font, 15px);
  font-weight: 650;
  letter-spacing: 0;
  text-align: left;
  padding: 9px 14px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--rule) 84%, transparent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.line-plan-btn:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.line-plan-btn:disabled {
  cursor: default;
  opacity: 0.5;
}
.line-plan-primary {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.line-plan-error {
  color: var(--danger, #a23b32);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  padding-top: 2px;
}
/* === SECTION: preview-review-strip === */
#preview-panel, #preview-iframe, #preview-node-host, #rail-webview { background: #0a0a0a !important; }
#right-side-panel #preview-panel { background: #0a0a0a !important; }
#preview-panel-bar { display:flex; align-items:center; gap:6px; min-height:32px; padding:0 6px; flex-shrink:0; background:#0a0a0a; border-bottom:1px solid var(--border); }
#preview-tabs { display:flex; align-self:stretch; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
#preview-tabs::-webkit-scrollbar { display:none; }
.preview-tab { display:flex; align-items:center; gap:5px; max-width:150px; padding:0 9px; border:0; border-right:1px solid rgba(255,255,255,.08); background:transparent; color:#777; font:10px/1 var(--mono); cursor:pointer; }
.preview-tab[aria-selected="true"] { color:#ddd; background:rgba(255,255,255,.06); }
.preview-tab-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-tab-close { color:#666; font-size:12px; }
.preview-tab:hover .preview-tab-close { color:#bbb; }
/* Production review strip (Preview rail chrome, 2026-07-17): verdict + lineage actions
   over the painted production asset. Chrome-level bar — the sandboxed srcdoc iframe is
   never touched. Status identity rides the dot + label only; no tinted fills. */
#preview-review-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  min-height: 0;
  flex-shrink: 0;
  border-bottom: 0;
}
#preview-review-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  max-width: 100%;
}
.preview-review-object-list {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 180px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.preview-review-object {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-ghost);
  font: 9px/1 var(--mono);
  cursor: pointer;
}
.preview-review-object[data-active="true"] {
  border-color: var(--accent);
  color: var(--ink);
}
#preview-review-nav-pos {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-ghost);
  min-width: 26px;
  text-align: center;
}
.preview-review-status {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.preview-review-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(120, 148, 220, 0.7);
  flex-shrink: 0;
}
#preview-review-status-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  line-height: 1.3;
}
#preview-review-strip[data-status="approved"] .preview-review-dot { background: rgba(85, 175, 120, 0.8); }
#preview-review-strip[data-status="approved"] #preview-review-status-label { color: rgba(85, 175, 120, 0.9); }
#preview-review-strip[data-status="rejected"] .preview-review-dot { background: rgba(195, 85, 90, 0.8); }
#preview-review-strip[data-status="rejected"] #preview-review-status-label { color: rgba(195, 85, 90, 0.9); }
#preview-review-strip[data-status="superseded"] .preview-review-dot { background: var(--ink-ghost); }
#preview-review-strip[data-status="superseded"] #preview-review-status-label { color: var(--ink-ghost); }
#preview-review-strip[data-locked="true"] .preview-review-dot { background: rgba(200, 145, 55, 0.8); }
#preview-review-strip[data-locked="true"] #preview-review-status-label { color: rgba(200, 145, 55, 0.9); }
.preview-review-btn {
  width: auto;
  flex: 0 0 auto;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.22s ease;
}
.preview-review-btn.preview-review-failed,
.preview-review-ghost-btn.preview-review-failed {
  border: 1px solid rgba(195, 85, 90, 0.5);
}
.preview-review-export-btn[data-state="working"] {
  cursor: wait;
  opacity: 0.72;
}
.preview-review-export-btn[data-state="error"] {
  border-color: rgba(195, 85, 90, 0.55);
  color: rgba(225, 120, 125, 0.95);
}
.preview-review-export-status {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-ghost);
  font: 9px/1.3 var(--mono);
  letter-spacing: 0.02em;
}
.preview-review-export-status[data-state="done"] { color: rgba(85, 175, 120, 0.9); }
.preview-review-export-status[data-state="error"] { color: rgba(225, 120, 125, 0.95); }
.preview-review-ghost-btn {
  position: relative;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--ink-ghost);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 4px;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.22s ease;
}
.preview-review-ghost-btn:hover { color: var(--ink-soft); }
/* Lock button in locked state ("unlock") — same amber identity as the locked status dot/label. */
.preview-review-ghost-btn[data-lock-active="true"] {
  color: rgba(200, 145, 55, 0.85);
  border-color: rgba(200, 145, 55, 0.28);
}
.preview-review-ghost-btn[data-lock-active="true"]:hover {
  color: rgba(200, 145, 55, 1);
  border-color: rgba(200, 145, 55, 0.45);
}
.preview-review-ghost-btn:disabled,
.preview-review-btn:disabled {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}
.preview-review-divider {
  width: 1px;
  height: 12px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}
.preview-review-note-dot {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 145, 55, 0.7);
}
#preview-review-note-area {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 10px 7px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#preview-review-note-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  max-height: 72px;
  resize: none;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  padding: 4px 7px;
  overflow-y: auto;
}
#preview-review-note-dismiss {
  width: 18px;
  height: 18px;
  background: none;
  border: none;
  color: var(--ink-ghost);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
/* Reference card in the tile (import-origin assets, routing slice): a reference is not a
   verdict surface — suppress Approve/Reject/Regenerate; the primary gesture is lock. */
#preview-review-strip[data-origin="provider_resolved"] #preview-review-approve,
#preview-review-strip[data-origin="provider_resolved"] #preview-review-reject,
#preview-review-strip[data-origin="provider_resolved"] #preview-review-regenerate {
  display: none;
}
/* Locked-reference indicator: a locked import reference exists on this line even when a
   later product displaced it from the tile. Amber at 0.55 — same hue as the lock identity,
   quieter than lock-active. Read-only: no hover, no click, no focus. */
.preview-review-ref-indicator {
  display: none;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
#preview-review-strip[data-has-locked-ref="true"] .preview-review-ref-indicator {
  display: flex;
}
.preview-review-ref-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(200, 145, 55, 0.55);
  flex-shrink: 0;
}
.preview-review-ref-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(200, 145, 55, 0.55);
  line-height: 1.3;
}

/* Recovery-card chrome (.worker-handoff-choice/-title/-body/-actions): originally the
   retired click-approve proposal card; now owned by the backstage-swim-continue
   "This response didn't finish" recovery card (app.js). The proposal card itself and its
   row/executed/note/outcome rules were removed with the dead
   _renderWorkerHandoffChoice subtree. */
.worker-handoff-choice {
  max-width: 760px;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.worker-handoff-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.worker-handoff-body {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.worker-handoff-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}
.backstage-approval-message {
  display: grid;
  gap: 7px;
}
.backstage-approval-message p {
  margin: 0;
}
.backstage-approval-detail,
.backstage-approval-outcome {
  color: var(--ink-dim);
  font-size: 12.5px;
}
.backstage-approval-reason {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}
.backstage-approval-command {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.backstage-approval-command-text {
  overflow-wrap: anywhere;
}
.backstage-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .plan-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "body" "actions"; }
  .plan-card-actions { justify-content: flex-start; margin: 6px 0 0; }
}

/* === SECTION: vault-interrupted-notice === */
/* Owner: vault-interrupted-notice — leftover user-row status after a stop or dropped turn. */
.vault-interrupted-notice {
  display: grid;
  justify-items: start;
  max-width: min(760px, calc(100% - 108px));
  margin-left: auto;
  margin-right: 54px;
}
#chat-main-shell .vault-interrupted-notice {
  max-width: min(780px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
}
.vault-interrupted-notice .worker-handoff-choice {
  width: fit-content;
  max-width: min(420px, 100%);
}
.vault-interrupted-notice .worker-handoff-title {
  font-weight: 650;
}
.vault-interrupted-notice .worker-handoff-body {
  color: var(--ink-dim);
}
.vault-interrupted-notice .line-plan-btn {
  width: auto;
  min-height: 28px;
  padding: 5px 11px;
  font-size: 12px;
}
/* === END SECTION: vault-interrupted-notice === */

/* === SECTION: founding-card === */
/* Owner: founding-card -- optional Identity founding flow shown in empty chat. */
.founding-card {
  width: min(560px, calc(100% - 64px));
  max-width: min(560px, calc(100% - 64px));
  margin: 8vh auto 0;
  animation: journalAppear 0.4s ease both;
}
.founding-card .plan-card.founding-panel {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  border-left-color: color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 0 6px 6px 0;
  background: rgba(85, 175, 120, 0.04);
  box-shadow: none;
  padding: 18px 20px;
}
.founding-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 62%, transparent);
}
.founding-panel > .founding-eyebrow {
  display: block;
}
.founding-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  margin-bottom: 10px;
}
.founding-title {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink-heavy);
  word-break: break-word;
  margin-bottom: 26px;
}
.founding-stage {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 78%, #956400 22%);
  background: color-mix(in srgb, var(--paper) 88%, #FBF3DB 12%);
  border: 1px solid color-mix(in srgb, var(--rule) 70%, #956400 14%);
  border-radius: 6px;
  padding: 5px 9px;
  line-height: 1;
}
.founding-doc-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  border-bottom: none;
}
.founding-doc-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--rule) 66%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 94%, var(--ink) 4%);
  color: color-mix(in srgb, var(--ink) 54%, transparent);
}
.founding-doc-step + .founding-doc-step {
  padding-left: 0;
  border-left: none;
}
.founding-doc-step.active {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, var(--ink) 7%);
  border-color: color-mix(in srgb, var(--ink) 20%, var(--rule));
}
.founding-doc-step.done {
  color: color-mix(in srgb, #346538 64%, var(--ink));
  background: color-mix(in srgb, var(--paper) 88%, #EDF3EC 12%);
  border-color: color-mix(in srgb, #346538 16%, var(--rule));
}
.founding-doc-step.later {
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.founding-doc-index {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: currentColor;
  opacity: 0.72;
}
.founding-doc-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.founding-doc-title {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 650;
  color: currentColor;
  line-height: 1.2;
}
.founding-doc-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.founding-doc-step.active .founding-doc-note {
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.founding-doc-step.done .founding-doc-note {
  color: color-mix(in srgb, #346538 58%, var(--ink));
}
.founding-doc-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: currentColor;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 999px;
  padding: 4px 7px;
  white-space: nowrap;
}
.founding-doc-step.active .founding-doc-status {
  color: color-mix(in srgb, var(--ink) 72%, #956400 28%);
  background: color-mix(in srgb, var(--paper) 82%, #FBF3DB 18%);
}
.founding-doc-step.done .founding-doc-status {
  color: #346538;
  background: color-mix(in srgb, var(--paper) 82%, #EDF3EC 18%);
}
.founding-body {
  padding-top: 0;
}
.founding-q-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.founding-optional {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
  margin-left: 6px;
}
.founding-fork-tiles {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}
.founding-fork-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: auto;
  text-align: left;
  padding: 16px 16px 14px;
  border: 1px solid var(--ink-dim);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.founding-fork-tile:hover {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.founding-fork-tile:active {
  transform: scale(0.99);
}
.founding-tile-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
.founding-tile-desc {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: inherit;
  opacity: 0.55;
}
.founding-skip-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.65;
}
.founding-skip-link:hover { opacity: 1; }
.founding-nav {
  display: flex;
  gap: 18px;
  margin-top: 16px;
}
.founding-nav .founding-skip-link { margin-top: 0; }
.founding-explainer {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.88;
  margin-bottom: 16px;
}
.founding-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  box-sizing: border-box;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
  border: 1px solid var(--ink-dim);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--ink);
  margin-bottom: 14px;
  outline: none;
}
.founding-textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.founding-textarea:focus {
  border-color: var(--ink);
  background: transparent;
}
.founding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.founding-card .plan-btn {
  border-radius: 6px;
  padding: 8px 12px;
  letter-spacing: 0;
}
.founding-card .plan-approve {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.founding-card .plan-approve:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--paper) 14%);
  border-color: color-mix(in srgb, var(--ink) 86%, var(--paper) 14%);
}
.founding-done-copy {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  margin-bottom: 16px;
}
.founding-review-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}
.founding-review-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 2px 7px;
  border-radius: 3px;
}
.founding-review-body {
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-left: 18px;
  margin-bottom: 18px;
}
.founding-review-edit {
  min-height: 150px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.founding-drafting {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  margin-bottom: 16px;
}
.founding-drafting-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #956400 64%, var(--ink));
  animation: foundingPulse 1.4s ease-in-out infinite;
}
.founding-skeleton {
  display: grid;
  gap: 9px;
}
.founding-skeleton span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.founding-skeleton span:nth-child(1) { width: 82%; }
.founding-skeleton span:nth-child(2) { width: 64%; }
.founding-skeleton span:nth-child(3) { width: 44%; }
@keyframes foundingPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}
@media (max-width: 720px) {
  .founding-card {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin: 0 auto;
  }
  .founding-card .plan-card.founding-panel {
    padding: 22px 18px;
  }
  .founding-topline {
    gap: 16px;
  }
  .founding-title {
    font-size: 25px;
  }
  .founding-doc-rail,
  .founding-fork-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .founding-doc-step + .founding-doc-step {
    padding-left: 0;
    border-left: 0;
    border-top: 0;
  }
}

/* Agent artifact card (invoke_agent tool) */
.agent-step-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  opacity: 0.5;
  line-height: 1.4;
}
.agent-step-role {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}
.agent-step-tool {
  color: var(--ink);
}
.agent-step-line::before {
  content: '◆';
  font-size: 6px;
  opacity: 0.6;
  flex-shrink: 0;
}
.agent-artifact-row {
  padding: 0 0 0 56px;
  margin: 12px 0;
}
.agent-artifact-card {
  background: rgba(160,160,180,0.04);
  border-radius: 6px;
  padding: 12px 16px;
  max-width: 700px;
}
.agent-artifact-card[data-role="explorer"]     { background: rgba(80,140,210,0.04); }
.agent-artifact-card[data-role="sentinel"]     { background: rgba(210,80,80,0.04); }
.agent-artifact-card[data-role="architect"]    { background: rgba(210,165,50,0.04); }
.agent-artifact-card[data-role="designer"]     { background: rgba(100,180,140,0.04); }
.agent-artifact-card[data-role="advisor"]      { background: rgba(160,100,210,0.04); }
.agent-artifact-card[data-role="verifier"]     { background: rgba(80,190,190,0.04); }
.agent-artifact-card[data-role="data-steward"] { background: rgba(210,130,50,0.04); }
.agent-artifact-card[data-role="prompt-engineer"] { background: rgba(140,170,100,0.04); }
.agent-artifact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.agent-artifact-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(160,160,180,0.9);
  background: rgba(160,160,180,0.12);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.agent-artifact-card[data-role="explorer"]     .agent-artifact-badge { color: rgba(80,140,210,0.9);  background: rgba(80,140,210,0.12); }
.agent-artifact-card[data-role="sentinel"]     .agent-artifact-badge { color: rgba(210,80,80,0.9);   background: rgba(210,80,80,0.12); }
.agent-artifact-card[data-role="architect"]    .agent-artifact-badge { color: rgba(210,165,50,0.9);  background: rgba(210,165,50,0.12); }
.agent-artifact-card[data-role="designer"]     .agent-artifact-badge { color: rgba(100,180,140,0.9); background: rgba(100,180,140,0.12); }
.agent-artifact-card[data-role="advisor"]      .agent-artifact-badge { color: rgba(160,100,210,0.9); background: rgba(160,100,210,0.12); }
.agent-artifact-card[data-role="verifier"]     .agent-artifact-badge { color: rgba(80,190,190,0.9);  background: rgba(80,190,190,0.12); }
.agent-artifact-card[data-role="data-steward"] .agent-artifact-badge { color: rgba(210,130,50,0.9);  background: rgba(210,130,50,0.12); }
.agent-artifact-card[data-role="prompt-engineer"] .agent-artifact-badge { color: rgba(140,170,100,0.9); background: rgba(140,170,100,0.12); }
.agent-artifact-task {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  opacity: 0.55;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-artifact-summary {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.agent-artifact-status {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
/* @sas claim: Styles compact specialist artifact action pills for expand/collapse and return-to-work controls. terms: agent-artifact-return, agent-artifact-toggle, action pill, return-to-work id: 3544:agent-artifact-action-pill-styles timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return,
.agent-artifact-toggle {
  margin-left: auto;
  border: 1px solid rgba(160,160,180,0.22);
  background: rgba(160,160,180,0.08);
  color: var(--ink-soft);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
}
/* @sas claim: Removes the automatic left offset between adjacent specialist artifact return and expand controls so paired action pills sit together. terms: agent-artifact-return, agent-artifact-toggle, adjacent controls, margin-left id: 3544:agent-artifact-adjacent-action-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return + .agent-artifact-toggle { margin-left: 0; }
/* @sas claim: Provides hover feedback for specialist artifact return and expand controls without changing layout. terms: agent-artifact-return:hover, agent-artifact-toggle:hover, hover feedback, action pill id: 3544:agent-artifact-action-hover-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return:hover,
.agent-artifact-toggle:hover { background: rgba(160,160,180,0.14); color: var(--ink); }
/* @sas claim: Constrains specialist artifact markdown bodies into a readable collapsed preview that can expand without losing rich text structure. terms: agent-artifact-body, markdown preview, collapsed, expanded, typography id: 3544:agent-artifact-body-styles timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-body {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.65;
  word-wrap: break-word;
  max-height: 260px;
  overflow: hidden;
  position: relative;
}
.agent-artifact-card-expanded .agent-artifact-body {
  max-height: 70vh;
  overflow: auto;
}
.agent-artifact-body h1,
.agent-artifact-body h2,
.agent-artifact-body h3 {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 14px 0 5px;
}
.agent-artifact-body h1:first-child,
.agent-artifact-body h2:first-child,
.agent-artifact-body h3:first-child { margin-top: 0; }
.agent-artifact-body h1 { font-size: 11px; }
.agent-artifact-body h2 { font-size: 10.5px; }
.agent-artifact-body h3 { font-size: 10px; }
.agent-artifact-body p { margin: 0 0 7px; }
.agent-artifact-body ol,
.agent-artifact-body ul { padding-left: 18px; margin: 4px 0 8px; }
.agent-artifact-body li { margin-bottom: 3px; }
.agent-artifact-body code {
  font-family: var(--code);
  font-size: 11.5px;
  background: rgba(160,160,180,0.1);
  padding: 1px 5px;
  border-radius: 3px;
}
.agent-artifact-body pre code {
  background: none;
  padding: 0;
  font-size: 12px;
}
.task-md-artifact-row {
  padding: 0 0 0 56px;
  margin: 12px 0;
}
.task-md-artifact {
  --task-artifact-accent: var(--task-state-main, #66bfa0);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--surface, var(--paper)) 94%, var(--task-artifact-accent) 6%);
  border-radius: 8px;
  padding: 14px 15px 13px;
  max-width: 760px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}
.task-md-artifact[data-route="branch"] {
  --task-artifact-accent: var(--task-state-branch, #d0a657);
}
.task-md-artifact-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}
.task-md-artifact-icon {
  width: 20px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--task-artifact-accent) 58%, var(--ink) 20%);
  border-radius: 5px;
  background: color-mix(in srgb, var(--task-artifact-accent) 8%, transparent);
  position: relative;
  margin-top: 1px;
}
.task-md-artifact-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 7px;
  height: 1px;
  background: color-mix(in srgb, var(--task-artifact-accent) 72%, var(--ink) 20%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--task-artifact-accent) 48%, transparent),
              0 8px 0 color-mix(in srgb, var(--task-artifact-accent) 34%, transparent);
}
.task-md-artifact-identity {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.task-md-artifact-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-md-artifact-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.task-md-artifact-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.task-md-artifact-route {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  color: color-mix(in srgb, var(--task-artifact-accent) 72%, var(--ink) 28%);
  background: color-mix(in srgb, var(--task-artifact-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--task-artifact-accent) 20%, transparent);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.task-md-artifact-preview {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  margin: 0 0 11px 34px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.task-md-artifact-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 0 34px;
}
.task-md-artifact-actions button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 560;
  padding: 4px 9px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.1s ease;
}
.task-md-artifact-actions button:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
  color: var(--ink);
}
.task-md-artifact-actions button:active {
  transform: translateY(1px);
}
.task-md-artifact-actions .task-md-primary {
  border-color: color-mix(in srgb, var(--task-artifact-accent) 34%, transparent);
  background: color-mix(in srgb, var(--task-artifact-accent) 14%, transparent);
  color: color-mix(in srgb, var(--task-artifact-accent) 74%, var(--ink) 26%);
}
.task-md-artifact-body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.58;
  color: var(--ink);
  max-height: 0;
  overflow: hidden;
}
.task-md-artifact-expanded .task-md-artifact-body {
  max-height: 62vh;
  overflow: auto;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  margin: 12px 0 0 34px;
  padding-top: 12px;
}
.task-md-artifact-body h1,
.task-md-artifact-body h2,
.task-md-artifact-body h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  margin: 12px 0 6px;
  color: var(--ink);
}
.task-md-artifact-body p,
.task-md-artifact-body ul,
.task-md-artifact-body ol {
  margin: 0 0 9px;
}
/* @sas claim: Positions the returned specialist artifact card as a chat-row surface distinct from the original compact artifact output. terms: agent-artifact-return-row, agent-artifact-return-card, chat return surface, background task id: 3544:agent-artifact-return-card-styles timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-row {
  padding: 0 0 0 56px;
  margin: 12px 0;
}
/* @sas claim: Frames the returned specialist artifact as a bounded continuation card with quiet border and background inside chat. terms: agent-artifact-return-card, continuation card, border, background id: 3544:agent-artifact-return-frame-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-card {
  max-width: 700px;
  border: 1px solid rgba(160,160,180,0.18);
  background: rgba(160,160,180,0.045);
  border-radius: 6px;
  padding: 12px 14px;
}
/* @sas claim: Lays out returned specialist artifact identity, status, summary, ids, and follow-up actions inside the continuation card. terms: agent-artifact-return-head, return-title, return-summary, return-ids, return-actions id: 3544:agent-artifact-return-content-styles timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
/* @sas claim: Keeps returned specialist artifact titles compact and ellipsized so long task prompts do not dominate chat. terms: agent-artifact-return-title, compact title, ellipsis, task prompt id: 3544:agent-artifact-return-title-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-title {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* @sas claim: Presents the returned specialist artifact summary as compact mono context before follow-up actions. terms: agent-artifact-return-summary, compact summary, mono context, continuation card id: 3544:agent-artifact-return-summary-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-summary {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
/* @sas claim: Shows artifact, run, and team-task identifiers as low-emphasis continuation context in returned specialist artifact cards. terms: agent-artifact-return-ids, artifactId, runId, teamTaskId, low emphasis id: 3544:agent-artifact-return-ids-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-ids {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-soft);
  opacity: 0.58;
  margin-bottom: 10px;
}
/* @sas claim: Arranges returned specialist artifact follow-up actions as wrapping pills for continuation, revision, and verifier review. terms: agent-artifact-return-actions, continue, revise, ask verifier, wrapping pills id: 3544:agent-artifact-return-actions-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* @sas claim: Styles returned specialist artifact follow-up buttons as subtle chat action pills. terms: agent-artifact-return-actions button, action pill, continue, revise, verifier id: 3544:agent-artifact-return-button-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-actions button {
  border: 1px solid rgba(160,160,180,0.22);
  background: rgba(160,160,180,0.08);
  color: var(--ink-soft);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 9px;
  cursor: pointer;
}
/* @sas claim: Gives returned specialist artifact follow-up buttons visible hover affordance before they seed the chat composer. terms: agent-artifact-return-actions button:hover, hover affordance, chat composer id: 3544:agent-artifact-return-button-hover-style timestamp: 2026-05-07T02:00:00.000Zlive: true */
.agent-artifact-return-actions button:hover { background: rgba(160,160,180,0.14); color: var(--ink); }

/* Edit proposal card (propose_edit tool) */
.edit-proposal {
  display: block;
  margin: 12px 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  opacity: 0.92;
  font-family: var(--mono);
  font-size: 12.5px;
}
.edit-proposal.accepted { opacity: 0.72; }
.edit-proposal.rejected { opacity: 0.5; }
.edit-proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 6px;
  border-bottom: 0;
  background: transparent;
  font-size: 12px;
}
.edit-proposal-file {
  color: var(--ink);
  font-weight: 500;
}
.edit-proposal-repo {
  color: var(--ink-soft);
  font-size: 11px;
}
.edit-proposal-diff {
  max-height: 480px;
  overflow-y: auto;
  padding: 2px 0;
  background: transparent;
}
body.light .edit-proposal-diff { background: transparent; }
.edit-proposal-diff[data-diff="pending"] {
  padding: 4px 0;
  color: var(--ink-soft);
  font-style: italic;
}
.edit-proposal-hunk { margin: 6px 0; }
.edit-proposal-hunk-header {
  padding: 2px 0;
  color: var(--ink-soft);
  font-size: 11px;
  background: transparent;
}
.edit-proposal-stat {
  font-size: 11px;
  padding: 0 0 4px;
  letter-spacing: 0.04em;
}
.edit-proposal-line {
  display: flex;
  padding: 0 0 0 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
/* Colored signal is row background + glyph color — never a chromatic
   left-border (see scripts/check-left-stripe.mjs). */
.edit-proposal-line:not(.add):not(.del) {
  background: transparent;
  border-left: 0;
}
.edit-proposal-line.add { background: rgba(107,165,107,0.10); border-left: 0; }
.edit-proposal-line.del { background: rgba(192,96,48,0.10); border-left: 0; }
body.dark .edit-proposal-line.add { background: rgba(91,191,170,0.12); }
body.dark .edit-proposal-line.del { background: rgba(224,96,88,0.12); }
.edit-proposal-gutter {
  color: var(--ink-soft);
  padding-right: 8px;
  font-size: 11px;
  flex-shrink: 0;
  user-select: none;
  min-width: 80px;
  text-align: right;
}
.edit-proposal-glyph {
  width: 14px;
  flex-shrink: 0;
  color: var(--ink-soft);
  text-align: center;
}
.edit-proposal-line.add .edit-proposal-glyph { color: #6ba56b; }
.edit-proposal-line.del .edit-proposal-glyph { color: #c06030; }
body.dark .edit-proposal-line.add .edit-proposal-glyph { color: #5bbfaa; }
body.dark .edit-proposal-line.del .edit-proposal-glyph { color: #e06058; }
.edit-proposal-content {
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}
/* Intra-line word change — the precise span that differs */
.edit-proposal-line.add .diff-word { background: rgba(107,165,107,0.30); border-radius: 2px; }
.edit-proposal-line.del .diff-word { background: rgba(192,96,48,0.30); border-radius: 2px; }
body.dark .edit-proposal-line.add .diff-word { background: rgba(91,191,170,0.32); }
body.dark .edit-proposal-line.del .diff-word { background: rgba(224,96,88,0.32); }
.edit-proposal-commit {
  padding: 6px 0 0;
  border-top: 0;
  font-size: 12px;
  color: var(--ink);
}
.edit-proposal-commit-label {
  color: var(--ink-soft);
  margin-right: 6px;
}
.edit-proposal-actions {
  display: flex;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 0;
  justify-content: flex-end;
  background: transparent;
}
.edit-proposal-reject,
.edit-proposal-accept {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 14px;
  border: 1px solid var(--ink-dim);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.edit-proposal-reject:hover:not(:disabled) { border-color: #c06030; color: #c06030; }
.edit-proposal-accept { background: rgba(107,165,107,0.15); border-color: #6ba56b; color: #6ba56b; }
.edit-proposal-accept:hover:not(:disabled) { background: rgba(107,165,107,0.3); }
.edit-proposal-reject:disabled,
.edit-proposal-accept:disabled { opacity: 0.4; cursor: not-allowed; }
.edit-proposal-status {
  padding: 4px 0 0;
  font-size: 11px;
  color: var(--ink-soft);
}
.edit-proposal-status.error { color: #c06030; }
.edit-proposal-status code {
  background: rgba(107,165,107,0.2);
  color: #6ba56b;
  padding: 1px 5px;
  border-radius: 3px;
}
/* §18 — streaming build output card */
.build-output-card {
  margin: 12px 0;
  border: 1px solid var(--ink-dim);
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
}
.build-output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--ink-dim);
  background: rgba(255,255,255,0.02);
}
.build-output-cmd { color: var(--ink); font-weight: 500; }
.build-output-status { font-size: 11px; color: var(--ink-soft); }
.build-output-status.pass { color: #6ba56b; }
.build-output-status.fail { color: #c06030; }
.build-output-pre {
  margin: 0;
  padding: 10px 12px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink);
  background: rgba(0,0,0,0.12);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}
body.light .build-output-pre { background: rgba(0,0,0,0.04); }



/* ── Chat note (inline notification) ── */
.chat-note {
  max-width: 700px;
  margin: 6px auto 10px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-align: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* ── Book edge — session tabs + line/session nav ── */
.book-edge {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  z-index: 25;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
#book-edge {
  position: fixed;
  height: 100vh;
}
body.electron-mode #book-edge {
  top: 32px;
  height: calc(100vh - 32px);
}
.book-edge > * {
  pointer-events: auto;
}

/* ── line menu button (top of edge) ── */
.book-edge-line {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  cursor: pointer;
  color: var(--ink-ghost);
  transition: color 0.15s;
  position: relative;
}
.book-edge-line:hover { color: var(--ink-soft); }
.book-edge-line svg { width: 14px; height: 14px; }

/* ── line menu dropdown (from top of edge) ── */
.book-edge-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 0;
  z-index: 130;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
body.dark .book-edge-menu { background: var(--charcoal); border-color: rgba(255,255,255,0.08); }
.book-edge-menu.open { display: block; }
.book-edge-menu-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.book-edge-menu-item:hover { background: var(--paper-dark); color: var(--ink); }
.book-edge-menu-item.danger:hover { color: #c44; }
.book-edge-menu-item svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ── session tab strip (middle) ── */
.book-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  scrollbar-width: none;
}
.book-tabs::-webkit-scrollbar { display: none; }

.book-tab {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  flex-shrink: 0;
  border-radius: 4px 0 0 4px;
  background: rgba(180,60,50,0.06);
  border: 1px solid rgba(180,60,50,0.18);
  border-right: none;
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 1px;
  overflow: visible;
  padding: 0 6px;
}
.book-tab:last-child { margin-bottom: 0; }

.book-tab-trigger {
  flex-shrink: 0;
  font-size: 8px;
  letter-spacing: 0.05em;
  color: var(--ink-ghost);
  opacity: 0;
  transition: opacity 0.1s;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.book-tab:hover .book-tab-trigger { opacity: 1; }
.book-tab-trigger:hover { color: var(--ink-soft); }

.book-tab-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--tab-num-color);
  transition: color 0.15s;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  flex: 1 1 0;
  min-width: 0;
}
.book-tab:hover {
  background: rgba(180,60,50,0.12);
  border-color: var(--tab-num-border);
}
.book-tab:hover .book-tab-num { color: var(--tab-num-hover); }

.book-tab.active {
  background: rgba(180,60,50,0.18);
  border-color: rgba(180,60,50,0.55);
}
.book-tab.active .book-tab-num {
  color: #c85a4a;
  font-weight: 700;
}

.book-tab-signal {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 4px;
  white-space: nowrap;
}
.book-tab-signal-score {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #60a5fa;
  opacity: 0.65;
  transition: opacity 0.15s ease;
  line-height: 1;
}
.book-tab-signal-ref {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #fbbf24;
  opacity: 0.65;
  transition: opacity 0.15s ease;
  line-height: 1;
}
.book-tab:hover .book-tab-signal-score,
.book-tab:hover .book-tab-signal-ref { opacity: 0.85; }
.book-tab.active .book-tab-signal-score,
.book-tab.active .book-tab-signal-ref { opacity: 1.0; }
.book-tab.active .book-tab-signal-score { font-weight: 600; }

/* tooltip on hover */
.book-tab .book-tab-tip {
  position: absolute;
  right: calc(100% + 8px);
  white-space: normal;
  width: 200px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--charcoal, #1e1c18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.18s, transform 0.18s;
  z-index: 130;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-tab-tip-label {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-tab-tip-ghost {
  font-size: 8px;
  color: var(--ink-ghost);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
  opacity: 0.75;
}
.book-tab:hover .book-tab-tip {
  opacity: 1;
  transform: translateX(0);
}


/* ── sessions panel tab (bottom of strip) ── */
.book-tab-panel-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  flex-shrink: 0;
  border-radius: 4px 0 0 4px;
  background: none;
  border: none;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-dim);
  opacity: 0.55;
  transition: opacity 0.2s;
  user-select: none;
}
.book-tab-panel-btn:hover { opacity: 0.9; }

/* ── session tab context menu ── */
.sess-tab-menu {
  position: fixed;
  z-index: 500;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 140px;
}
body.dark .sess-tab-menu { background: var(--charcoal); border-color: rgba(255,255,255,0.08); }
.sess-tab-menu-item {
  display: block;
  width: 100%;
  padding: 6px 14px;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.sess-tab-menu-item:hover { background: var(--paper-dark); color: var(--ink); }
.sess-tab-menu-item.danger:hover { color: #c44; }

/* ── session tab rename input ── */
.sess-tab-rename-input {
  position: fixed;
  width: 140px;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 3px 7px;
  outline: none;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}


/* ── book edge: hover action panel ── */
.book-edge-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 148px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0 6px 6px 6px;
  padding: 5px 0;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
body.dark .book-edge-panel { background: #1a1814; border-color: rgba(255,255,255,0.07); }
.book-edge-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.book-edge-panel-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: color 0.1s, background 0.1s;
}
.book-edge-panel-btn:hover:not(.dim) { color: var(--ink); background: rgba(128,128,128,0.07); }
.book-edge-panel-btn.dim { opacity: 0.28; pointer-events: none; }
.book-edge-panel-btn.warn { color: var(--tab-warn); }
.book-edge-panel-btn .bep-icon { width: 12px; text-align: center; flex-shrink: 0; color: var(--ink-ghost); }
.book-edge-panel-btn:hover:not(.dim) .bep-icon { color: var(--ink-soft); }
.book-edge-panel-btn .bep-label { flex: 1; }
.book-edge-panel-btn .bep-value { font-size: 9px; color: var(--ink-ghost); letter-spacing: 0; }
.book-edge-panel-btn .bep-value.active { color: var(--gold); }

/* ── line menu button in project bar ── */
/* ── Lines nav button + dropdown ── */
.lines-nav-btn {
  background: none; border: none; cursor: pointer; padding: 2px 4px; color: var(--ink-dim);
  border-radius: 4px; transition: color 0.15s, background 0.15s; flex-shrink: 0;
  position: relative;
}
.lines-nav-btn:hover { color: var(--ink); background: rgba(128,128,128,0.1); }
.lines-nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  max-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 4px 0;
  z-index: 900;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.lines-nav-menu.open { display: block; }
.lines-nav-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lines-nav-item:hover { background: rgba(128,128,128,0.1); }
.lines-nav-item.active { color: var(--pass-3); font-weight: 600; }
.lines-nav-empty {
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-dim);
}
.lines-nav-sep {
  height: 1px;
  background: var(--rule);
  margin: 4px 0;
}
.lines-nav-action {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  white-space: nowrap;
}
.lines-nav-action:hover { background: rgba(128,128,128,0.1); }
.lines-nav-action.danger { color: var(--red, #e05555); }
.lines-nav-action.danger:hover { background: rgba(128,128,128,0.1); }

.line-search-btn,
.line-new-tab-btn {
  height: 28px;
  margin: 0 3px 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.line-search-btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
  position: absolute;
  left: 2px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: var(--ink-dim);
  opacity: 1;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
}
.line-new-tab-btn {
  width: auto;
  min-width: max-content;
  padding: 0 10px;
  color: var(--ink-dim);
  opacity: 1;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}
.line-new-tab-btn:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink);
  opacity: 1;
}
.line-search-btn:hover,
.line-search-btn:focus-visible {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink);
  opacity: 1;
}
.line-search-btn svg,
.line-new-tab-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
/* Header New line popover */
.line-new-tab-pop {
  display: none;
  position: fixed;
  z-index: 9000;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.04);
  min-width: 220px;
  font-family: var(--sans);
}
.line-new-tab-pop.open { display: block; }
.line-new-tab-pop .pop-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.line-new-tab-pop .pop-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.line-new-tab-pop .pop-input:focus { border-color: var(--ink-dim); }
.line-new-tab-pop .pop-error {
  display: none;
  font-size: 11px;
  color: var(--red, #e05555);
  margin-top: 6px;
}
.line-new-tab-pop .pop-error.visible { display: block; }
.line-new-tab-pop .pop-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.line-new-tab-pop .pop-create {
  flex: 1;
  padding: 5px 0;
  border-radius: 5px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s;
}
.line-new-tab-pop .pop-create:hover { background: var(--ink-soft); }
.line-new-tab-pop .pop-create:disabled { opacity: 0.5; cursor: default; }
.line-new-tab-pop .pop-cancel {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-dim);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.line-new-tab-pop .pop-cancel:hover { color: var(--ink); border-color: var(--ink-soft); }

.line-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-ghost);
  padding: 0 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  transition: color 0.15s;
}
.line-menu-btn:hover { color: var(--ink-soft); }
.line-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 0;
  z-index: 1500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
body.dark .line-menu-dropdown { background: var(--charcoal); border-color: rgba(255,255,255,0.08); }
.line-menu-dropdown.open { display: block; }

/* line card context menu */
.line-menu {
  position: absolute;
  z-index: 1500;
  min-width: 168px;
  background: #1a1916;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: menu-appear 0.1s ease;
}
body:not(.dark) .line-menu {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
}
@keyframes menu-appear {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.line-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 3px 2px;
}
body:not(.dark) .line-menu-divider { background: rgba(0,0,0,0.08); }

.line-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.line-menu-item:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
body:not(.dark) .line-menu-item:hover { background: rgba(0,0,0,0.05); }
.line-menu-item.danger { color: var(--ink-ghost); }
.line-menu-item.danger:hover { background: rgba(200,60,60,0.12); color: #e05555; }
.line-menu-item svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.6; }
.line-menu-item:hover svg { opacity: 1; }

/* Line transfer modal */

@keyframes arrive {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-exchange-num {
  /* Hidden: exchange numbers are project-global so per-line gaps are expected and
     read as "missing" to users. The number stays in the DOM (dedup logic relies on
     the element) but is never shown. */
  display: none;
  float: right;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint, rgba(140,130,120,0.5));
  margin-left: 8px;
  margin-top: 2px;
  letter-spacing: 0.02em;
  user-select: none;
  pointer-events: none;
}
/* @sas claim: Renders a faint uppercase model byline at the bottom of each AI response message. terms: msg-model, model byline, response attribution, Space Grotesk, uppercase id: 490:msg-model timestamp: 2026-05-11T00:00:00.000Zlive: true */
.msg-model {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink);
  opacity: 0.3;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  text-align: left;
  user-select: none;
  pointer-events: none;
}

/* Chat message typography is owned by the single block "chat message presentation"
   near the end of this file (modes: .line-code / .line-depth). The four legacy
   typography patches that used to live here, at 8879, 9372, and 15318 are removed. */


.artifact-error {
  width: 100%;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 12px 14px;
}
.ingest-status-msg { display: block; }
.ingest-leave-hint {
  display: block;
  margin-top: 5px;
  font-size: var(--text-xs);
  opacity: 0.5;
  font-style: italic;
}
.retry-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink-dim);
  border-radius: 3px;
  padding: 2px 10px;
  cursor: pointer;
  margin-left: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.retry-btn:hover { opacity: 1; }
.report-btn { border-color: var(--ink-ghost); }

/* === SECTION: platform-problem-report === */
.bug-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, 0.58);
}
.bug-report-card {
  width: min(560px, 100%);
  max-height: calc(100vh - (2 * var(--space-5)));
  overflow: auto;
  padding: var(--space-6);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 28px 72px -32px rgba(0, 0, 0, 0.72);
  font-family: var(--sans);
}
.bug-report-header {
  margin-block-end: var(--space-6);
}
.bug-report-title {
  margin-block-end: var(--space-3);
  color: var(--ink-heavy);
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.bug-report-intro {
  max-width: 65ch;
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.55;
}
.bug-report-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
}
.bug-report-label {
  align-self: end;
  color: var(--ink-mid);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.35;
}
.bug-report-select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 var(--space-4);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: var(--text-md);
  appearance: auto;
}
.bug-report-textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 104px;
  padding: var(--space-4);
  resize: vertical;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bug-report-textarea::placeholder {
  color: var(--ink-dim);
}
.bug-report-textarea:focus-visible,
.bug-report-select:focus-visible,
.bug-report-actions .retry-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: transparent;
}
.bug-report-select:disabled,
.bug-report-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}
.bug-report-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  margin-block: var(--space-6) var(--space-4);
  padding-block: var(--space-5);
  border-block: 1px solid var(--rule);
}
.bug-report-summary-group {
  min-width: 0;
}
.bug-report-summary-group + .bug-report-summary-group {
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--rule);
}
.bug-report-summary-title {
  margin-block-end: var(--space-3);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}
.bug-report-summary-list {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bug-report-status {
  min-height: 1.5em;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bug-report-status[data-state="error"] { color: var(--red); }
.bug-report-status[data-state="success"] { color: var(--pass-2); }
.bug-report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}
.bug-report-actions .retry-btn {
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-5);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
.bug-report-actions .retry-btn:disabled {
  cursor: wait;
  opacity: 0.58;
}
.bug-report-cancel-btn {
  border-color: var(--rule);
}
.bug-report-submit-btn {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.bug-report-submit-btn:hover:not(:disabled) {
  color: var(--paper);
  background: var(--ink-heavy);
}
.bug-report-submit-btn[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .bug-report-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .bug-report-card {
    width: 100%;
    max-height: 94vh;
    padding: var(--space-5);
    border-radius: 14px 14px 0 0;
  }
  .bug-report-form,
  .bug-report-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .bug-report-select,
  .bug-report-textarea {
    font-size: 16px;
  }
  .bug-report-summary-group + .bug-report-summary-group {
    padding-block-start: var(--space-4);
    padding-inline-start: 0;
    border-block-start: 1px solid var(--rule);
    border-inline-start: 0;
  }
  .bug-report-actions .retry-btn {
    flex: 1 1 0;
  }
}

/* === SECTION: platform-problem-report-inbox === */
.admin-problem-reports-card {
  padding-block: var(--space-5);
}
.admin-problem-report-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
}
.admin-problem-report-intro {
  max-width: 65ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}
.admin-problem-report-toolbar .t-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 11px;
}
.admin-problem-report-toolbar .t-btn:focus-visible,
.admin-problem-report-diagnostics summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.admin-problem-report-toolbar .t-btn:disabled {
  cursor: wait;
  opacity: .55;
}
.admin-problem-reports-list {
  display: grid;
}
.admin-problem-report-state {
  padding-block: var(--space-5);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}
.admin-problem-report-state[data-state="error"] {
  color: var(--red);
}
.admin-problem-report {
  min-width: 0;
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--rule);
}
.admin-problem-report-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  min-width: 0;
}
.admin-problem-report-title {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.admin-problem-report-category {
  justify-self: end;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.admin-problem-report-received {
  grid-column: 1 / -1;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.admin-problem-report-fields,
.admin-problem-report-fact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  min-width: 0;
  margin: var(--space-4) 0 0;
}
.admin-problem-report-field {
  min-width: 0;
}
.admin-problem-report-field-wide {
  grid-column: 1 / -1;
}
.admin-problem-report-field dt {
  margin: 0 0 2px;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.admin-problem-report-field dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.admin-problem-report-description {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule);
}
.admin-problem-report-description h4,
.admin-problem-report-diagnostic-section h4 {
  margin: 0 0 var(--space-2);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.admin-problem-report-description p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.admin-problem-report-diagnostics {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule);
}
.admin-problem-report-diagnostics summary {
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}
.admin-problem-report-diagnostics[open] summary {
  margin-block-end: var(--space-4);
  color: var(--ink);
}
.admin-problem-report-diagnostic-section + .admin-problem-report-diagnostic-section {
  margin-block-start: var(--space-5);
}
.admin-problem-report-facts,
.admin-problem-report-fingerprints {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-inline-start: 18px;
}
.admin-problem-report-fact-fields {
  margin: 0;
}
.admin-problem-report-fingerprints {
  gap: var(--space-2);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.admin-problem-report-empty-detail {
  margin: 0;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .admin-problem-report-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-problem-report-toolbar .t-btn {
    align-self: flex-start;
  }
  .admin-problem-report-fields,
  .admin-problem-report-fact-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-problem-report-field-wide {
    grid-column: auto;
  }
}

/* ── Supervisor ──────────────────────────────────────────── */
.admin-sup-briefing {
  font-size: 13px; line-height: 1.65; color: var(--ink-soft);
  border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 4px;
}
.admin-sup-briefing p { margin: 0 0 8px; }
.admin-sup-msgs {
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.admin-sup-msg {
  font-size: 12px; line-height: 1.55; padding: 6px 10px; border-radius: 6px;
}
.admin-sup-msg.user {
  background: var(--border); color: var(--ink-soft);
  align-self: flex-end; max-width: 80%;
}
.admin-sup-msg.ai {
  border-left: 2px solid var(--border); padding-left: 10px; color: var(--ink);
}



.msg-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2) 6px;
  padding: 8px 0 0;
  margin: 0 -6px;
  opacity: 0.38;
}
.msg-row:hover .msg-actions { opacity: 1; }

/* ── Message menu (··· dropdown) ──────────────────────── */
.msg-menu-wrap {
  padding: 8px 0 0;
  opacity: 0.28;
  transition: opacity 0.15s;
}
.msg-row.pres:hover .msg-menu-wrap,
.msg-row.pres:focus-within .msg-menu-wrap { opacity: 1; }
.msg-menu-btn,
.msg-bookmark-btn,
.msg-doc-btn,
.msg-delete-btn { background: none; border: none; cursor: pointer; }

.msg-menu-btn {
  color: var(--ink-dim);
  font-size: var(--text-md);
  letter-spacing: 0.14em;
  padding: 6px 6px;
  border-radius: 4px;
  line-height: 1;
  min-height: 28px;
  font-family: var(--font-ui);
}
.msg-menu-btn:hover { color: var(--ink); background: var(--paper-dark); }
body.dark .msg-menu-btn:hover { background: rgba(212,207,197,0.07); }
.msg-menu-dropdown {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  min-width: 162px;
  padding: 5px 0;
  overflow: hidden;
}
body.dark .msg-menu-dropdown {
  background: #1e1c18;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.msg-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 15px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.msg-menu-item:hover { background: var(--paper-dark); }
body.dark .msg-menu-item:hover { background: rgba(212,207,197,0.06); }
.msg-menu-item.danger { color: #b44; }
.msg-menu-item.danger:hover { background: rgba(180,68,68,0.08); color: #c44; }
body.dark .msg-menu-item.danger { color: #d66; }
body.dark .msg-menu-item.danger:hover { background: rgba(204,68,68,0.12); color: #e88; }
.msg-menu-sep { height: 1px; background: var(--rule); margin: 4px 0; }

/* ── Bookmark ─────────────────────────────────────────── */
.msg-bookmark-btn {
  padding: 6px 6px;
  color: var(--ink-dim);
  min-height: 28px;
  font-size: var(--text-md);
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 4px;
}
.msg-bookmark-btn:hover { color: var(--ink); background: rgba(28,26,22,0.04); }
body.dark .msg-bookmark-btn:hover { background: rgba(212,207,197,0.06); }
.msg-bookmark-btn.active { color: #b8860b; }
body.dark .msg-bookmark-btn.active { color: #e0aa20; }

/* Bookmarked row marker */
.msg-row.bookmarked::before { display: none; }

/* Bookmark label prompt (inline) */
.bookmark-label-prompt {
  position: absolute;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}
body.dark .bookmark-label-prompt { box-shadow: 0 3px 12px rgba(0,0,0,0.35); }
.bookmark-label-prompt input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink);
  width: 140px;
  letter-spacing: 0.02em;
}
.bookmark-label-prompt input::placeholder { color: var(--ink-dim); font-style: italic; }
.bookmark-label-prompt-hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-left: 1px solid var(--rule);
  padding-left: 8px;
}

/* Bookmark tray */
.bookmark-tray {
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}
.bookmark-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 5px;
  border-bottom: 1px solid var(--rule);
}
.bookmark-tray-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.bm-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  line-height: 0;
  padding: 2px;
  transition: color 0.15s;
}
.bm-copy-btn:hover { color: var(--ink); }
.bookmark-tray-list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
}
.bookmark-tray-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);

  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.12s;
}
.bookmark-tray-item:hover { background: rgba(28,26,22,0.04); }
body.dark .bookmark-tray-item:hover { background: rgba(212,207,197,0.06); }
.bookmark-tray-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b8860b;
  flex-shrink: 0;
  margin-top: 4px;
  align-self: flex-start;
}
body.dark .bookmark-tray-dot { background: #e0aa20; }
.bookmark-tray-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.bookmark-tray-excerpt {
  display: none;
}
.bookmark-tray-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: var(--text-md);
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.12s;
}
.bookmark-tray-x:hover { color: var(--ink); }

/* Tray toggle button — sidebar nav */
.bookmark-tray-toggle {
  position: relative;
}
.bookmark-tray-toggle-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b8860b;
  font-family: var(--mono);
  font-size: 7px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
body.dark .bookmark-tray-toggle-count { background: #e0aa20; color: #111; }
.highlight-toolbar {
  position: absolute;
  display: flex;
  gap: var(--space-1);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 12px 30px rgba(28,26,22,0.14);
  backdrop-filter: blur(14px);
  z-index: 500;
  pointer-events: auto;
}
body.dark .highlight-toolbar {
  background: rgba(18, 21, 24, 0.86);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 16px 36px rgba(0,0,0,0.32);
}
.highlight-toolbar button {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 5px 9px;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
}
.highlight-toolbar button:hover {
  background: color-mix(in srgb, #f2bd63 18%, transparent);
  color: var(--ink);
}
body.dark .highlight-toolbar button:hover {
  background: color-mix(in srgb, #f2bd63 20%, transparent);
  color: var(--ink-heavy);
}
/* Text highlight (<mark>) - warm ink tint plus a faint warm underlay band; no underline (link-confusable). */
.msg-body mark {
  background: color-mix(in srgb, #f2bd63 16%, transparent);
  color: color-mix(in srgb, var(--ink) 40%, #8a5715 60%);
  border: 0;
  border-radius: 3px;
  padding: 0.02em 0.22em;
  box-shadow: none;
  text-decoration: none;
}
body.dark .msg-body mark {
  background: color-mix(in srgb, #f2bd63 14%, transparent);
  color: color-mix(in srgb, var(--ink) 55%, #f2bd63 45%);
}
.msg-doc-btn {
  padding: 6px;
  color: var(--ink-dim);
  transition: color 0.15s, background 0.12s;
  min-height: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.msg-doc-btn:hover { color: var(--ink); background: rgba(28,26,22,0.04); }
body.dark .msg-doc-btn:hover { background: rgba(212,207,197,0.06); }
.msg-doc-btn.done { color: var(--pass-3); }
.msg-doc-btn:disabled { cursor: default; }
.response-card-pin.is-pinned { color: var(--accent, #b8860b); opacity: 1 !important; }
.msg-voice-btn.speaking {
  color: var(--pass-4);
  background: rgba(52, 142, 137, 0.09);
}
body.dark .msg-voice-btn.speaking { background: rgba(92, 188, 178, 0.12); }
.msg-voice-btn.paused {
  color: var(--ink-soft);
  background: rgba(52, 142, 137, 0.06);
}
body.dark .msg-voice-btn.paused { background: rgba(92, 188, 178, 0.08); }
.msg-row.pres .read-aloud-paragraph {
  background: rgba(225, 243, 254, 0.72);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(126, 181, 214, 0.08);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}
body.dark .msg-row.pres .read-aloud-paragraph {
  background: rgba(180, 219, 242, 0.16);
  box-shadow: 0 0 0 2px rgba(180, 219, 242, 0.06);
}
.msg-voice-btn.generating {
  color: var(--pass-4);
  animation: gi-voice-pulse 1s ease-in-out infinite;
}
@keyframes gi-voice-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .msg-voice-btn.generating { animation: none; opacity: 0.7; }
}
/* ── Exchange delete button ── */
.msg-delete-btn {
  padding: 6px;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  min-width: 28px;
  border-radius: 4px;
  transition: color 0.15s, background 0.12s;
}
.msg-delete-btn:hover { color: #c44; background: rgba(196,68,68,0.08); }
.user-msg-actions {
  align-self: flex-end;
  width: auto;
  justify-content: flex-end;
  max-width: 100%;
  margin: -2px 2px 0 0;
  padding: 0;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.msg-row.user:hover .user-msg-actions,
.msg-row.user:focus-within .user-msg-actions {
  opacity: 1;
  pointer-events: auto;
}
.exchange-deleting { opacity: 0.4; background: rgba(196,68,68,0.08); transition: opacity 0.3s, background 0.3s; }

/* === SECTION: response-margin-and-progress === */
/* Owner: response-margin-and-progress — remarks, thoughts, journal, streaming and
   in-flight pulses, exchange stats, brain frame. Split out when the retired Boards
   section that used to head this block was deleted. */
/* ── Remarks (left margin) ─────────────────────────────── */
.remark-zone {
  position: absolute;
  left: -87px;
  top: 0;
  width: 75px;
  height: 100%;
  cursor: text;
  overflow: visible;
}
.remark-plus {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  line-height: 1;
  user-select: none;
}
/* Dim signal on message row hover — shows the zone exists */
.msg-row.pres:hover .remark-plus { opacity: 0.30; }
/* Brighter when actually hovering the zone */
.remark-zone:hover .remark-plus { opacity: 1; }
/* Keyboard focus — same signal as hover */
.remark-zone:focus-visible .remark-plus { opacity: 1; }
.remark-zone:focus-visible { outline: none; }
/* "add side notes to memory" label appears on zone hover */
.remark-zone::after {
  content: 'add side notes\A to memory';
  white-space: pre;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-family: var(--serif);
  color: var(--ink-ghost);
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.remark-zone:hover::after { opacity: 0.7; }
.remark {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 75px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.03em;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  overflow: hidden;
  cursor: pointer;
  user-select: text;
  text-align: right;
}
.remark[contenteditable="true"] {
  outline: none;
  cursor: text;
}
.remark-more {
  opacity: 0.35;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 0.05em;
}
.remark-more:hover { opacity: 0.75; }
.remark-color-picker {
  position: absolute;
  left: 0;
  display: flex;
  gap: 5px;
  padding: 4px 0;
  z-index: 10;
}
.remark-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.remark-swatch:hover { opacity: 1; transform: scale(1.3); }
.remark-swatch.active { opacity: 1; outline: 1px solid currentColor; outline-offset: 2px; }


.msg-row.pres .msg-body {
  padding: 0 10px 0 16px;
  position: relative;
}
.thought-margin {
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  width: 140px;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
}

.thought {
  position: absolute;
  right: 0;
  left: 0;
  max-width: 130px;
  padding: 0;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dream-1);
  white-space: normal;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
  animation: thoughtDrift var(--dur, 4s) ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes thoughtDrift {
  0%   { opacity: 0;    transform: translateY(0px); }
  10%  { opacity: 0.75; }
  60%  { opacity: 0.5;  }
  100% { opacity: 0;    transform: translateY(-140px); }
}

/* Promoted phase entries — persist in chat until next message */
.journal-inline-phase {
  box-sizing: border-box;
  max-width: 700px;
  margin-left: auto;
  margin-right: 104px;
  padding: 3px 32px 3px 36px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  line-height: 1.65;
  border-left: none;
  transition: opacity 1.5s ease-out;
}
.journal-inline-phase::before {
  display: none;
}
.journal-inline-phase.journal-fade {
  opacity: 0 !important;
}

/* Journal prose — quiet text inside its owning response row */
.journal-inline {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0 0 8px;
  font-family: inherit;
  font-size: calc(var(--gi-chat-font, 15px) - 2px);
  line-height: 1.55;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  opacity: 0;
  will-change: opacity;
  animation: journalAppear 0.6s ease-out forwards;
  border: 0;
}
.journal-inline-text {
  display: inline;
  opacity: 0.58;
  overflow-wrap: anywhere;
}
@keyframes journalAppear {
  0%   { opacity: 0; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}


/* Depth trace — collapsed journal summary after response */
.depth-trace {
  box-sizing: border-box;
  max-width: 700px;
  margin-left: auto;
  margin-right: 104px;
  padding: 0 0 10px 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  opacity: 0.38;
  transition: opacity 1.5s ease-out;
}
.depth-trace.journal-fade {
  opacity: 0 !important;
}

/* Response opening beat — breathe in before streaming begins */
#streaming-msg {
  animation: msg-enter 0.45s ease-out 0.08s both;
}
/* While streaming: typography owned by "chat message presentation" block. */


/* Stream-pause cursor — sluggish blink when tokens stall */
#streaming-body.stream-paused .cursor {
  animation-duration: 2s;
  background: var(--ink-dim);
}

/* Send dead-zone pulse — appears between send and first thinking event */
#send-pulse {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 12px 0 4px;
}
.send-pulse-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-dim);
  animation: sendPulseBeat 1.2s ease-in-out infinite;
}
.send-pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.send-pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes sendPulseBeat {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 0.75; transform: scale(1.2); }
}

/* In-flight signal — pulse card shown when returning to a line whose response is still generating */
.inflight-pulse-row {
  padding: 14px 0 24px;
  display: flex;
  justify-content: flex-start;
}
.inflight-pulse-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.inflight-pulse-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.inflight-pulse-dots > span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-dim);
  animation: sendPulseBeat 1.2s ease-in-out infinite;
}
.inflight-pulse-dots > span:nth-child(2) { animation-delay: 0.2s; }
.inflight-pulse-dots > span:nth-child(3) { animation-delay: 0.4s; }
.inflight-pulse-age {
  font-size: 10px;
  opacity: 0.7;
}

.inflight-working-label { white-space: nowrap; text-transform: none; }

/* Elapsed depth note */
.depth-note {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.28;
  padding: 8px 0 0;
  text-align: right;
}

/* Exchange stats footer — depth passes · elapsed · tokens, subtle, left-aligned.
   Pairs with .msg-model directly below it as one coherent meta block. */
.exchange-stats {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 12px 0 0;
  text-align: left;
  text-transform: lowercase;
}

/* Dimming lives on the copy, not the container, so the meter control stays readable. */
.exchange-stats .exchange-stats-copy { opacity: 0.3; }

.exchange-stats .token-meter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: transform 160ms ease-out, opacity 160ms ease-out;
  vertical-align: -1px;
}

.exchange-stats .token-meter-toggle svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.exchange-stats .token-meter-toggle:hover {
  opacity: 1;
  transform: scale(1.04);
}

.exchange-stats .token-meter-toggle:active {
  transform: scale(0.92);
}

.exchange-stats .token-meter-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* Short response — slightly wider breathing room */
.response-short .msg-body { max-width: 780px; }

/* ── Brain Frame (left panel, full history) ── */
#brain-frame {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  padding: 24px 20px;
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 6;
  background: var(--paper);
  border-right: 1px solid var(--ink-dim);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: transform, opacity;
}
#brain-frame::-webkit-scrollbar { display: none; }
#brain-frame.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.brain-entry {
  margin-bottom: 28px;
}
.brain-entry-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.brain-entry-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--ink-mid);
  white-space: pre-wrap;
}


/* ── Brain Orientation (input zone left margin) ── */
/* ── Brain margin: icon only ── */
.brain-margin {
  position: absolute;
  left: -96px;
  top: 30px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 5;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.brain-margin.visible {
  opacity: 0.25;
  pointer-events: auto;
}
.brain-margin:hover {
  opacity: 0.55;
}
.brain-margin-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--ink);
}

/* per-exchange memory sketch — left gutter of assistant message row */
.exchange-sketch {
  position: absolute;
  left: -76px;
  top: 10px;
  width: 60px;
  height: 28px;
  pointer-events: none;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.exchange-sketch.visible { opacity: 0.18; }
.exchange-sketch.ghost   { opacity: 0.04; transition: opacity 2.5s ease; }
@media (max-width: 900px) {
  .exchange-sketch { display: none; }
}

.src-row {
  margin: 12px 0 0;
  padding: 0 0 4px 0;
}

.src-inner { padding: 0; }

.src-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: color 0.12s;
}
.src-btn:hover { color: var(--ink-soft); }
.src-btn .mark { width: 12px; height: 1px; background: currentColor; }

.src-content {
  margin-top: 16px;
  border-left: 1px solid var(--rule);
  padding-left: 18px;
  display: none;
  flex-direction: column;
  gap: 18px;
}

.src-pass { display: flex; flex-direction: column; gap: 7px; }

.src-pass-q {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 4px;
}

.src-chunk {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink-mid);
  padding-left: 10px;
  border-left: 2px solid var(--rule);
}
.src-kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-right: 6px;
}

.src-meta {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 2px;
}



/* Ghost icon buttons inside #input-controls (attach, mic) */
.ic-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.ic-icon-btn svg { width: 19px; height: 19px; }
.input-icon-btn svg { width: 19px; height: 19px; }
#mic-btn { width: 30px; height: 30px; }
#mic-btn svg, #mic-icon { width: 16px; height: 16px; stroke-width: 1.8; }

/* Keep the explicit model name readable while metadata controls remain compact. */
#model-cycle.cycle-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0;
  white-space: nowrap;
}
#degree-cycle.cycle-btn {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.ic-icon-btn:hover { color: var(--ink); background: rgba(28,26,22,0.05); }
body.dark .ic-icon-btn:hover { background: rgba(212,207,197,0.06); }
.ic-icon-btn:active { transform: scale(0.94); }

.composer-command-cluster,
.composer-action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 0;
}
.composer-action-cluster {
  margin: 0;
  gap: 4px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  max-width: 100%;
}
.composer-command-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: color-mix(in srgb, var(--ink) 44%, transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
}
.composer-command-btn:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
body.dark .composer-command-btn {
  border-color: rgba(212,207,197,0.15);
  background: rgba(212,207,197,0.045);
}
body.dark .composer-command-btn:hover {
  border-color: rgba(212,207,197,0.20);
  background: rgba(212,207,197,0.075);
}
.composer-command-btn:active { transform: scale(0.96); }

/* Clear reports its progress on the same button. */
.composer-clear-btn[data-clear-state="busy"] {
  cursor: default;
  opacity: 0.55;
}
.composer-clear-btn[data-clear-state="done"],
.composer-clear-btn[data-clear-state="done"]:hover {
  color: #3fb950;
  border-color: color-mix(in srgb, #3fb950 42%, transparent);
  background: color-mix(in srgb, #3fb950 10%, transparent);
}

/* Recording is an overlay state: Consult keeps its normal action-row slot while
   the voice HUD is free to cover it from the right. */
#composer-consult-btn { flex: 0 0 auto; }

.composer-land-wrap { display: inline-flex; position: relative; }
.composer-land-wrap .composer-push-btn { border-radius: 6px 0 0 6px; }
.composer-land-caret { display: none; }
.composer-land-menu-btn { min-width: 20px; margin-left: -1px; padding: 2px 5px; border-radius: 0 6px 6px 0; }
.composer-land-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 30;
  width: 260px;
  max-width: calc(100vw - 32px);
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0;
  line-height: 1;
}
.composer-land-menu[hidden] { display: none; }
.composer-land-menu strong { display: block; font-weight: 600; }
.composer-land-menu button span { display: block; margin-top: 4px; line-height: 1.4; white-space: normal; }
.composer-land-menu button {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.composer-land-menu button:hover,
.composer-land-menu button:focus-visible { background: color-mix(in srgb, currentColor 9%, transparent); outline: none; }
body.dark .composer-land-menu { background: #202020; border-color: rgba(255, 255, 255, 0.14); }

/* Every composer command button wears the same frame at rest and the same
   firm-up on hover — one row of equals, no ghost member. */
.composer-plan-btn { margin-left: 0; }

/* Keep the primary action seated at the end of the unified composer footer. */
#input-controls #send-btn { margin-left: 0; }
/* === END SECTION: new-task-line-button === */

.input-zone {
  padding: 4px 0 2px 0;
  flex-shrink: 0;
  background: transparent;
  position: relative;
  z-index: 7;
  max-width: min(760px, calc(100% - 108px));
  margin: 0 auto;
  width: 100%;
}
.input-underbar {
  --composer-control-size: 30px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  transform: translateY(5px);
  box-sizing: border-box;
}
.composer-tool-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.composer-tool-group-left {
  flex: 1 1 auto;
  gap: 4px;
}
#composer-attach-btn {
  position: static;
  transform: none;
}
#composer-attach-btn:active { transform: scale(0.94); }
.composer-tool-group-right {
  position: relative;
  flex: 0 1 auto;
  margin-left: auto;
  justify-content: flex-end;
}
.input-underbar .computer-access-btn {
  min-height: 30px;
  padding: 3px 8px;
}
.input-underbar .ic-icon-btn {
  width: var(--composer-control-size);
  height: var(--composer-control-size);
}
.input-underbar .ic-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}
.input-underbar .cycle-btn {
  min-height: 30px;
  padding: 3px 8px;
}
/* === SECTION: composer-substrip === */
/* Mode glyph (~/>), computer access, model, and contemplation-mode pickers live
   UNDER the rounded composer frame — one quiet side-by-side strip. The zone is
   bottom-anchored: margin-top here LIFTS the frame, it never lowers the strip
   (the strip is pinned by .input-zone's bottom padding). Keep this small. */
.composer-substrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: var(--space-3);
  padding: 1px 12px 0;
  min-height: 20px; /* flush with the 20px chips — no slack below the glyph row */
}
.composer-substrip .composer-mode-chip { height: 20px; }
.composer-substrip .cycle-btn {
  min-height: 20px;
  padding: 1px 7px;
}
/* Model, power, Fast mode, and contemplation use the same type as chat text. */
.composer-substrip #power-cycle.cycle-btn,
.composer-substrip #model-cycle.cycle-btn,
.composer-substrip #fast-mode-toggle.cycle-btn,
.composer-substrip #degree-cycle.cycle-btn {
  color: var(--ink-heavy);
  font-family: var(--codex-chat-font-family, var(--sans));
  font-size: 12px;
  font-weight: 350;
  letter-spacing: 0;
}
.composer-substrip .computer-access-btn.access-full-access {
  color: #e7785f !important;
  font-family: var(--codex-chat-font-family, var(--sans));
  font-size: 12px;
  font-weight: 350;
  letter-spacing: 0;
}
.composer-substrip #model-cycle.cycle-btn:hover,
.composer-substrip #power-cycle.cycle-btn:hover,
.composer-substrip #degree-cycle.cycle-btn:hover,
.composer-substrip #model-cycle.cycle-btn.is-open,
.composer-substrip #power-cycle.cycle-btn.is-open,
.composer-substrip #degree-cycle.cycle-btn.is-open {
  color: var(--ink-heavy) !important;
}
.composer-substrip .computer-access-btn.access-full-access:hover,
.composer-substrip .computer-access-btn.access-full-access.is-open {
  color: #e7785f !important;
}
/* === END SECTION: composer-substrip === */

/* === SECTION: composer-fast-mode === */
.composer-substrip .fast-mode-btn[hidden] { display: none; }
.composer-substrip .fast-mode-btn::after { content: none; }
.composer-substrip .fast-mode-btn svg { visibility: hidden; }
.composer-substrip .fast-mode-btn[aria-pressed="true"] svg { visibility: visible; }
.composer-substrip .fast-mode-btn:disabled { cursor: default; opacity: 0.5; }
.composer-substrip .fast-mode-btn:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
/* === END SECTION: composer-fast-mode === */

/* === SECTION: composer-power-picker === */
/* @sas claim: The thinking-power chip's anchored menu mirrors the agent-access menu so the
   composer strip keeps one popover language. terms: thinking power, reasoning effort,
   power-menu, power-menu-item, anchored menu id: composer:power-menu | live: true */
.power-menu {
  display: none;
  position: fixed;
  z-index: 2100;
  min-width: 180px;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  transform: translateY(-100%);
}
.power-menu.open { display: flex; flex-direction: column; gap: 3px; }
body.dark .power-menu { background: var(--charcoal); }
.power-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--codex-chat-font-family, var(--sans));
  font-size: 12px;
  cursor: pointer;
  padding: 6px 8px;
  text-align: left;
}
.power-menu-item:hover,
.power-menu-item.active {
  color: var(--ink);
  border-color: var(--rule);
  background: rgba(28,26,22,0.04);
}
body.dark .power-menu-item:hover,
body.dark .power-menu-item.active { background: rgba(212,207,197,0.06); }
.power-menu-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.power-menu-copy strong { font: inherit; color: inherit; }
.power-menu-copy small { color: var(--ink-ghost); font-size: 11px; line-height: 1.25; }
.power-menu-check { color: var(--ink); min-width: 12px; text-align: right; }
/* === END SECTION: composer-power-picker === */

/* Keep the action row on one line; trailing commands disappear as space runs out. */
#composer-underbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  flex-wrap: nowrap;
}
#composer-underbar .composer-tool-group { flex-wrap: nowrap; }
#composer-underbar .composer-tool-group-left {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: 4px;
  width: 100%;
}
#composer-command-cluster {
  flex-wrap: nowrap;
  width: 100%;
}
#composer-command-cluster > .composer-action-hidden { display: none !important; }
#composer-underbar .composer-tool-group-right { margin-left: 0; }
.update-available-signal {
  --update-available-color: var(--pass-2);
  color: var(--update-available-color);
}
.nav-item.update-available-signal[hidden] { display: none; }
.update-available-signal:hover {
  color: var(--update-available-color);
  background: color-mix(in srgb, var(--update-available-color) 10%, transparent);
}
.update-available-signal:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--update-available-color) 72%, transparent);
  outline-offset: 2px;
}
.update-available-signal:disabled { cursor: progress; }
.update-available-glyph {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
}
.update-available-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--surface, var(--paper));
  border-radius: 50%;
  background: var(--update-available-color);
}
.update-available-signal[data-update-state="installing"] { --update-available-color: var(--pass-4); }
.update-available-signal[data-update-state="error"] { --update-available-color: var(--red); }
.scope-signal {
  --scope-signal-color: #62b887;
  --scope-signal-progress: 14;
  --scope-signal-rest: 86;
}
/* No connected folder = nothing to scope: the control is absent, never a red failure. */
.nav-item.scope-signal[hidden] { display: none; }
.scope-signal:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--scope-signal-color) 70%, transparent);
  outline-offset: 2px;
}
.scope-signal:disabled {
  cursor: progress;
}
.scope-signal-ring {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}
.scope-signal-check {
  display: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--scope-signal-color);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}
.scope-signal-track,
.scope-signal-arc {
  fill: none;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}
.scope-signal-track {
  stroke: color-mix(in srgb, var(--ink) 15%, transparent);
}
.scope-signal-arc {
  stroke: var(--scope-signal-color);
  stroke-linecap: round;
  stroke-dasharray: var(--scope-signal-progress) var(--scope-signal-rest);
  transform: rotate(-90deg);
  transform-origin: 8px 8px;
  transition: stroke 0.18s ease, stroke-dasharray 0.22s ease;
}
/* An implementation-only commit is primarily a color warning; the arc moves only enough to register a first step. */
.scope-signal[data-scope-state="minor"] { --scope-signal-color: #d6b24c; --scope-signal-progress: 16; --scope-signal-rest: 84; }
.scope-signal[data-scope-state="unknown"] { --scope-signal-color: #c6a34a; --scope-signal-progress: 52; --scope-signal-rest: 48; }
.scope-signal[data-scope-state="medium"] { --scope-signal-color: #d98536; --scope-signal-progress: 66; --scope-signal-rest: 34; }
.scope-signal[data-scope-state="stale"] { --scope-signal-color: #d45a44; --scope-signal-progress: 88; --scope-signal-rest: 12; }
.scope-signal[data-scope-state="updating"] { --scope-signal-color: #78b7e8; --scope-signal-progress: 72; --scope-signal-rest: 28; }
.scope-signal[data-scope-state="complete"] { --scope-signal-color: #62b887; }
.scope-signal[data-scope-state="error"] { --scope-signal-color: #d0483b; --scope-signal-progress: 100; --scope-signal-rest: 0; }
.scope-signal[data-scope-state="empty"] { --scope-signal-color: color-mix(in srgb, var(--ink) 34%, transparent); --scope-signal-progress: 0; --scope-signal-rest: 100; }
.scope-signal[data-scope-state="empty"] .scope-signal-track { stroke: var(--scope-signal-color); }
.scope-signal[data-scope-state="empty"] .scope-signal-arc { opacity: 0; }
.scope-signal[data-scope-state="updating"] .scope-signal-arc { animation: scope-signal-advance 1.1s linear infinite; }
.scope-signal[data-scope-state="complete"] .scope-signal-ring { display: none; }
.scope-signal[data-scope-state="complete"] .scope-signal-check { display: inline-flex; animation: scope-signal-check-in 0.18s ease-out both; }
.scope-signal[data-scope-state="complete"]:disabled { cursor: default; }
@keyframes scope-signal-advance { to { transform: rotate(270deg); } }
@keyframes scope-signal-check-in { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
body.dark .scope-signal-track {
  stroke: rgba(255, 255, 255,0.16);
}
.main-task-workbench[hidden] {
  display: none !important;
}
.main-task-workbench {
  --main-task-workbench-color: var(--task-state-main, #66bfa0);
  flex-shrink: 0;
  width: 100%;
  max-width: min(760px, calc(100% - 108px));
  margin: 5px auto -1px;
  padding: 8px 9px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, var(--paper-dark)) 96%, var(--main-task-workbench-color) 4%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  position: relative;
  z-index: 8;
}
.main-task-workbench-rail {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--main-task-workbench-color);
  opacity: 0.82;
}
.main-task-workbench-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.main-task-workbench-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.main-task-workbench-mode,
.main-task-workbench-status {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: color-mix(in srgb, var(--main-task-workbench-color) 76%, var(--ink));
  white-space: nowrap;
}
.main-task-workbench-status {
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.main-task-workbench-title {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-task-workbench-next {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 64%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-task-workbench-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.main-task-workbench-btn {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  cursor: pointer;
  padding: 0;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.1s ease;
}
.main-task-workbench-btn svg {
  width: 14px;
  height: 14px;
}
.main-task-workbench-btn:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--main-task-workbench-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--main-task-workbench-color) 20%, transparent);
}
.main-task-workbench-btn:active {
  transform: scale(0.94);
}
.main-task-workbench-btn[data-action="done"] {
  color: color-mix(in srgb, #6ba56b 70%, var(--ink) 30%);
}
.main-task-workbench-btn[data-action="cover"],
.main-task-workbench-btn[data-action="exit"] {
  color: color-mix(in srgb, var(--red, #c0392b) 58%, var(--ink) 42%);
}
.main-task-workbench.is-covered {
  opacity: 0.72;
}
#input-controls {
  position: static;
  transform: none;
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
#input-controls {
  width: 100%;
  min-width: 0;
}


.identity-suggest-btn {
  position: absolute;
  left: -56px;
  top: 30px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ink-dim);
  opacity: 0.3;
  transition: opacity 0.2s;
  display: block;
}
.identity-suggest-btn:hover { opacity: 0.6; }
.identity-suggest-btn svg { width: 24px; height: 24px; display: block; }
#identity-suggest-btn {
  left: auto;
  right: -88px;
  top: auto;
  bottom: 12px;
  transform: none;
}
.dict-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dict-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-dim) 30%, transparent);
}
.dict-input {
  width: auto;
  min-width: 0;
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink);
  box-sizing: border-box;
}
.dict-input::placeholder { color: var(--ink-dim); opacity: 0.6; }
.dict-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 45%, transparent);
  outline-offset: 4px;
}
.dict-submit {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.dict-submit:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.dict-submit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 45%, transparent);
  outline-offset: 2px;
}
.dict-submit:disabled {
  cursor: default;
  opacity: 0.45;
}
.dict-results {
  overflow-y: auto;
  padding: 10px 14px 14px;
  flex: 1;
}
.dict-empty {
  padding: 10px 0;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: var(--text-sm);
  opacity: 0.55;
}
.dict-word {
  font-family: var(--serif);
  font-size: var(--text-lg);
  color: var(--ink);
  margin-bottom: 2px;
}
.dict-lang {
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
  opacity: 0.6;
  margin-bottom: 6px;
}
.dict-phonetic {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.dict-pos {
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b8960b;
  margin: 10px 0 4px;
}
.dict-def {
  font-family: var(--serif);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 3px;
}
.dict-example {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--ink-dim);
  line-height: 1.5;
  margin-bottom: 2px;
}
.dict-synonyms {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-top: 10px;
}
.dict-loading, .dict-not-found {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-dim);
  padding: 8px 0;
}
.checklist-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.checklist-tabs {
  display: flex;
  gap: 10px;
  padding: 9px 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-dim) 30%, transparent);
}
.cl-tab {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
  opacity: 0.45;
  padding: 0 0 7px;
  transition: opacity 0.15s;
}
.cl-tab.active { opacity: 1; color: var(--ink); border-bottom-color: var(--ink); }
.cl-tab:hover { opacity: 0.75; }
.checklist-add-row {
  padding: 10px 14px 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-dim) 30%, transparent);
}
.checklist-input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink);
  box-sizing: border-box;
}
.checklist-input::placeholder { color: var(--ink-dim); opacity: 0.6; }
.checklist-items {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}
.cl-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  transition: background 0.1s;
}
.cl-item:hover { background: rgba(255,255,255,0.03); }
.cl-check {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  color: var(--ink-dim);
  opacity: 0.55;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  margin-top: 1px;
}
.cl-check:hover { opacity: 1; }
.cl-text {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  flex: 1;
  line-height: 1.45;
  word-break: break-word;
}
.cl-done .cl-text { text-decoration: line-through; opacity: 0.35; }
.cl-del {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--ink-dim);
  opacity: 0;
  font-size: var(--text-md);
  line-height: 1;
  transition: opacity 0.15s;
  flex-shrink: 0;
  margin-top: 0px;
}
.cl-item:hover .cl-del { opacity: 0.35; }
.cl-del:hover { opacity: 0.8 !important; }
.cl-empty {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-dim);
  opacity: 0.45;
  padding: 10px 14px;
}
.cl-sel {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  margin-top: 1px;
}
.cl-item:hover .cl-sel { opacity: 0.4; }
.cl-sel:hover { opacity: 0.8 !important; }
.cl-selected .cl-sel { opacity: 0.9 !important; color: #b8960b; }
.cl-selected { background: rgba(184,150,11,0.06); }
.cl-actions {
  display: flex;
  gap: 6px;
  padding: 7px 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink-dim) 30%, transparent);
  flex-shrink: 0;
}
.cl-action-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--ink-dim) 40%, transparent);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 3px 7px;
  opacity: 0.6;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.cl-action-btn:hover { opacity: 1; }
.cl-action-all { margin-left: auto; }
.identity-suggest-btn.has-suggestion {
  opacity: 0.7;
  color: #b8960b;
  animation: identity-breathe 2.2s ease-in-out infinite;
}
.identity-suggest-btn.has-suggestion:hover { opacity: 1; }
@keyframes identity-breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

/* === SECTION: input-zone === */
/* Owner: input-zone — composer, textarea, send button, input controls, model picker, voice mode. */
.input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  border-radius: 16px;
  background: var(--paper-dark);
  padding: 5px 12px 5px;
  transition: border-color 0.2s;
}
.input-row:focus-within { border-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }

/* === SECTION: composer-draw-pad === */
/* Owner: composer-draw-pad — the light sketch surface above the message box, and the
   app's only drawing surface since the Boards rail was removed. Closed it occupies
   nothing, so the composer is pixel-unchanged. Separate from the 3D-card sketch layer. */
.composer-draw-pad {
  --draw-pad-height: 360px;
  /* Out of flow on purpose. In flow the pad's height came straight out of the chat shell
     above it — at 1280x720 the shell fell 637px -> 269px and the pinned-card shelf on the
     left was clipped from 520px to 245px — and it capped how far the grip could ever drag.
     Floating it over the transcript leaves the shelf at full height and lets the pad grow
     into the room above the composer instead. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: var(--draw-pad-height);
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  border-radius: 16px;
  background: var(--paper-dark);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.composer-draw-pad[hidden] { display: none !important; }
.composer-draw-grip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  cursor: ns-resize;
  touch-action: none;
}
.composer-draw-grip span {
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: background 0.14s ease;
}
.composer-draw-grip:hover span,
.composer-draw-pad.is-resizing .composer-draw-grip span { background: color-mix(in srgb, var(--ink) 42%, transparent); }
/* Every child is a fixed-width control, so this row cannot shrink — it can only wrap or spill past
   the pad's own edge. Two destination buttons plus a picture name exceed a narrow composer, so the
   end group drops to its own right-aligned line and the canvas below gives up the height. */
.composer-draw-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  padding: 0 10px 7px;
  min-height: 29px;
}
.composer-draw-tool-set {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.composer-draw-tool,
.composer-draw-width,
.composer-draw-colour,
.composer-draw-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, opacity 0.14s ease;
}
.composer-draw-act { width: auto; padding: 0 7px; }
.composer-draw-act span { font-family: var(--sans); font-size: 10.5px; line-height: 1; }
/* Zoom is a view control, not a mark control — its own set, after the ones that make marks. */
.composer-draw-act[data-draw-zoom] { padding: 0 5px; }
.composer-draw-zoom-level { min-width: 34px; }
.composer-draw-zoom-level span { font-variant-numeric: tabular-nums; }
.composer-draw-pad.is-panning #composer-draw-canvas { cursor: grabbing; }
.composer-draw-tool:hover,
.composer-draw-width:hover,
.composer-draw-colour:hover,
.composer-draw-act:not(:disabled):hover {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
}
.composer-draw-tool.is-on,
.composer-draw-width.is-on,
.composer-draw-colour.is-on {
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
}
.composer-draw-act:disabled { opacity: 0.35; cursor: default; }
.composer-draw-width span {
  display: block;
  border-radius: 999px;
  background: currentColor;
}
.composer-draw-width[data-draw-width="2"] span { width: 4px; height: 4px; }
.composer-draw-width[data-draw-width="4"] span { width: 7px; height: 7px; }
.composer-draw-width[data-draw-width="8"] span { width: 11px; height: 11px; }
.composer-draw-colour span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
.composer-draw-colour[data-draw-colour="ink"] span { background: var(--ink); }
.composer-draw-colour[data-draw-colour="#62a6ff"] span { background: #62a6ff; }
.composer-draw-colour[data-draw-colour="#3fb950"] span { background: #3fb950; }
.composer-draw-colour[data-draw-colour="#f0644d"] span { background: #f0644d; }
.composer-draw-tools-end {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
/* Names the picture being drawn on, when the pad was opened from one. */
.composer-draw-source {
  max-width: 190px;
  overflow: hidden;
  color: var(--ink-dim);
  font: 10px/1.2 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-draw-source[hidden] { display: none; }
.composer-draw-add {
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, opacity 0.14s ease;
}
.composer-draw-add:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
}
.composer-draw-add:disabled { opacity: 0.4; cursor: default; }
/* The other destination — a standing context panel item instead of this message. Quiet, because
   Send is the obvious default: it takes the drawing with the message. */
.composer-draw-add--panel {
  padding: 5px 9px;
  border-color: transparent;
  color: var(--ink-dim);
}
.composer-draw-add--panel:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.composer-draw-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.composer-draw-close:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.composer-draw-canvas-wrap {
  position: relative; /* the typing box is placed at the click point inside this frame */
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 10px 10px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 55%, transparent);
}
/* Where text is typed before it is baked into the drawing. Deliberately near-invisible chrome:
   what you type should already look like what will be painted — same face, size and colour,
   sitting on the exact point you clicked. Colour and size are set per use in JS. */
.composer-draw-text-input {
  position: absolute;
  z-index: 1;
  min-width: 42px;
  padding: 0;
  border: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  background: transparent;
  line-height: 1.2;
  outline: none;
  caret-color: var(--accent);
}
#composer-draw-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.composer-draw-pad.is-text #composer-draw-canvas { cursor: text; }
.composer-draw-pad.is-resizing #composer-draw-canvas { cursor: ns-resize; }
/* The scribble fills its viewBox edge to edge, so at the icon row's shared 19px it carried far
   more ink than the + beside it. Sized down until both glyphs read the same height; the stroke
   is thickened to hold its weight at the smaller size. */
#composer-draw-btn svg { width: 14px; height: 14px; stroke-width: 2.2; }
#composer-draw-btn.is-open { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }

/* === SECTION: line-diff-control === */
/* A standalone review control: it is absent until the current Code line has changes. */
.line-diff-control-slot {
  display: flex;
  flex-shrink: 0;
  width: min(var(--chat-frame-width, 740px), calc(100% - 108px));
  max-width: min(var(--chat-frame-width, 740px), calc(100% - 108px));
  margin: 0 var(--chat-frame-gutter, 54px) 0 auto;
}
.line-diff-control-slot[hidden] {
  display: none !important;
}
.line-diff-control {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  max-width: 100%;
  margin: 0 auto 8px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-dark) 90%, var(--paper) 10%);
  color: color-mix(in srgb, var(--ink) 54%, transparent);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.line-diff-control:hover {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--paper-dark) 72%, var(--ink) 6%);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.line-diff-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.line-diff-control:disabled {
  cursor: default;
  opacity: 0.48;
}
#work-row:has(#context-panel.active) .line-diff-control-slot {
  margin-right: calc(var(--cp-width) + var(--chat-frame-gutter, 54px));
  width: min(var(--chat-frame-width, 740px), calc(100% - var(--cp-width) - 108px));
  max-width: min(var(--chat-frame-width, 740px), calc(100% - var(--cp-width) - 108px));
}
#work-row:has(#task-panel.active) .line-diff-control-slot,
#work-row:has(#terminal-panel.active) .line-diff-control-slot {
  margin-left: calc(var(--tp-width, 320px) + var(--chat-frame-gutter, 54px));
  margin-right: var(--chat-frame-gutter, 54px);
  width: min(var(--chat-frame-width, 740px), calc(100% - var(--tp-width, 320px) - 108px));
  max-width: min(var(--chat-frame-width, 740px), calc(100% - var(--tp-width, 320px) - 108px));
}
#work-row:has(#context-panel.active):has(#task-panel.active) .line-diff-control-slot,
#work-row:has(#context-panel.active):has(#terminal-panel.active) .line-diff-control-slot {
  margin-right: calc(var(--cp-width) + var(--chat-frame-gutter, 54px));
  width: min(var(--chat-frame-width, 740px), calc(100% - var(--tp-width, 320px) - var(--cp-width) - 108px));
  max-width: min(var(--chat-frame-width, 740px), calc(100% - var(--tp-width, 320px) - var(--cp-width) - 108px));
}
.line-diff-control[hidden] {
  display: none !important;
}
.line-diff-additions,
.line-diff-deletions {
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  flex-shrink: 0;
}
.line-diff-additions {
  color: #3fb950;
}
.line-diff-deletions {
  color: #f0644d;
  margin-right: 2px;
}
.line-diff-files {
  flex-shrink: 0;
}
/* Untracked contents are outside the +/- totals, so those totals are marked
   as partial rather than reading as an exact count. */
.line-diff-control[data-stats="partial"] .line-diff-additions,
.line-diff-control[data-stats="partial"] .line-diff-deletions {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}
.line-diff-review-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.72;
}
.line-diff-review-label::before {
  content: '·';
  margin-right: 7px;
  opacity: 0.55;
}
/* @sas claim: One calm line-scoped signal above the composer covers every kind of unfinished background work — workers, sub-agents and ordinary background commands alike — and carries a Stop control once the reply is done. terms: Background work continues, Background work running, composer signal, Stop, background command, delegated AI worker, sub-agent id: chat:background-work-signal-css live: true */
.composer-background-work-signal {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 26px;
  margin: 0 0 6px;
  padding: 2px 4px 2px 8px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper) 98%, var(--ink) 2%);
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.25;
}
.composer-background-work-signal[hidden] { display: none !important; }
.composer-background-work-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.composer-background-work-label::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
}
.composer-background-work-stop {
  appearance: none;
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.composer-background-work-stop:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}
.composer-background-work-stop:disabled { cursor: wait; opacity: 0.45; }
/* Goal chip — modelled on the Territory chip: a small fit-content chip that shows only its
   "goal" label and border-merges into the input. Click opens the bound Plan MD; hover reveals
   a drop that clears the runtime (the Plan survives). Purple-leaning so it reads distinctly from
   the moss Territory chip. Lifecycle (pause/complete) lives in the /goal verbs and the Plan. */
.composer-goal-runtime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: min(560px, 100%);
  min-height: 30px;
  box-sizing: border-box;
  margin: 0 0 -1px 0;
  padding: 0 11px 0 0;
  border: 1px solid color-mix(in srgb, #9a8cc7 18%, var(--rule) 62%);
  border-bottom-color: color-mix(in srgb, #9a8cc7 10%, var(--rule) 44%);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 95%, #9a8cc7 5%);
  color: color-mix(in srgb, #9a8cc7 46%, var(--ink) 54%);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  position: relative;
  z-index: 3;
}
.composer-goal-runtime[hidden] { display: none !important; }
.composer-goal-open {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0 2px 0 13px;
  cursor: pointer;
}
.composer-goal-kicker {
  font-weight: 700;
  text-transform: lowercase;
  white-space: nowrap;
}
.composer-goal-clear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.composer-goal-runtime:hover .composer-goal-clear,
.composer-goal-runtime:focus-within .composer-goal-clear {
  opacity: 0.58;
}
.composer-goal-clear:hover {
  opacity: 0.9;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.composer-goal-clear:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
}
body.dark .composer-goal-runtime {
  border-color: rgba(177, 162, 222, 0.14);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 91%, #9a8cc7 9%);
  color: rgba(205, 193, 238, 0.72);
}
.composer-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: min(560px, 100%);
  min-height: 30px;
  box-sizing: border-box;
  margin: 0 0 -1px 0;
  padding: 0 11px 0 13px;
  border: 1px solid color-mix(in srgb, #8ed3ff 14%, var(--rule) 62%);
  border-bottom-color: color-mix(in srgb, #8ed3ff 8%, var(--rule) 44%);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 94%, #8ed3ff 6%);
  color: color-mix(in srgb, #8ed3ff 58%, var(--ink) 42%);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  position: relative;
  z-index: 3;
}
.composer-plan-chip[hidden] {
  display: none !important;
}
.composer-plan-chip-kicker,
.composer-plan-chip-state {
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
}
.composer-plan-chip-title {
  min-width: 0;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}
.composer-plan-chip-remove {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.composer-plan-chip:hover .composer-plan-chip-remove,
.composer-plan-chip:focus-within .composer-plan-chip-remove {
  opacity: 0.58;
}
.composer-plan-chip-remove:hover {
  opacity: 0.9;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.composer-plan-chip-remove:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
/* === SECTION: composer-territory-chip === */
/* Territory chip — the line's engine-compiled read-only codebase region. Same seat as the
   plan chip, moss-leaning so loaded ground reads distinctly from the loaded Plan. The chip is
   engine-owned state: inspect (passage popover) and drop only — never editable. */
.composer-territory-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: min(560px, 100%);
  min-height: 30px;
  box-sizing: border-box;
  margin: 0 0 -1px 0;
  padding: 0 11px 0 0;
  border: 1px solid color-mix(in srgb, #9fd8a4 14%, var(--rule) 62%);
  border-bottom-color: color-mix(in srgb, #9fd8a4 8%, var(--rule) 44%);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 94%, #9fd8a4 6%);
  color: color-mix(in srgb, #6fae76 58%, var(--ink) 42%);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  position: relative;
  z-index: 3;
}
.composer-territory-chip[hidden] {
  display: none !important;
}
.composer-territory-chip-open {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0 2px 0 13px;
  cursor: pointer;
}
.composer-territory-chip-state {
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
}
.composer-territory-chip-title {
  min-width: 0;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.composer-territory-chip-remove {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.composer-territory-chip:hover .composer-territory-chip-remove,
.composer-territory-chip:focus-within .composer-territory-chip-remove {
  opacity: 0.58;
}
.composer-territory-chip-remove:hover {
  opacity: 0.9;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.composer-territory-chip-remove:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
/* Inspect popover — the compiled passage, verbatim and read-only. */
.composer-territory-passage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  max-height: min(46vh, 420px);
  overflow: auto;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #9fd8a4 16%, var(--rule) 60%);
  border-radius: 10px;
  background: var(--inbox-bg, var(--paper-dark));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  z-index: 40;
}
.composer-territory-passage[hidden] {
  display: none !important;
}
/* Minimise (−) — closes the passage; sticky so it stays reachable while scrolling. */
.composer-territory-passage-min {
  appearance: none;
  position: sticky;
  top: 0;
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0.55;
  padding: 0;
  margin: 0 0 4px 8px;
  z-index: 1;
  transition: opacity 120ms ease, background 120ms ease;
}
.composer-territory-passage-min:hover {
  opacity: 0.9;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.composer-territory-passage-min:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
.composer-territory-passage pre {
  margin: 0;
  font-family: var(--mono, monospace);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
body.dark .composer-territory-chip {
  border-color: rgba(159, 216, 164, 0.14);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 92%, #9fd8a4 8%);
  color: rgba(196, 232, 200, 0.74);
}
@media (max-width: 700px) {
  .composer-territory-chip-title { max-width: 130px; }
  .composer-territory-chip-state { display: none; }
}
/* === END SECTION: composer-territory-chip === */
/* Failure Trace chip — the stopped-line (andon) state. Same seat as the plan chip,
   amber-leaning so an embargoed line reads as stopped at a glance. */
.composer-trace-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: min(620px, 100%);
  min-height: 30px;
  box-sizing: border-box;
  margin: 0 0 -1px 0;
  padding: 0 11px 0 13px;
  border: 1px solid color-mix(in srgb, #ffb86e 18%, var(--rule) 62%);
  border-bottom-color: color-mix(in srgb, #ffb86e 10%, var(--rule) 44%);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 93%, #ffb86e 7%);
  color: color-mix(in srgb, #ffb86e 52%, var(--ink) 48%);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  position: relative;
  z-index: 3;
}
.composer-trace-chip[hidden] { display: none !important; }
.composer-trace-chip-kicker {
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-size: 11px;
  font-weight: 600;
  text-transform: lowercase;
  white-space: nowrap;
}
.composer-trace-chip-title {
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}
.composer-trace-chip-warn {
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, #ff7a6e 62%, var(--ink) 38%);
  white-space: nowrap;
}
.composer-trace-chip-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 7px;
  background: transparent;
  color: currentColor;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
}
.composer-trace-chip-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 9%, transparent); }
.composer-trace-chip-btn:disabled { opacity: 0.42; cursor: not-allowed; }
body.dark .composer-trace-chip {
  background: color-mix(in srgb, var(--inbox-bg, #111) 90%, #ffb86e 10%);
}

/* Terminal-path composer button KILLED (P2 step 1, user ruling 2026-07-04) — no mode UI;
   routing follows the model picker + connected credentials. */

/* Chips shrink on one line as the chat lane narrows.
   Keep the passage popover and chip controls outside any clipping box. */
.composer-chip-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  /* Anchor for the territory passage popover (composer-territory-chip section). */
  position: relative;
}
/* The 3D chip turns into a button while it can bring its card back; it keeps the row's size. */
.composer-chip-row > [role="status"],
.composer-chip-row > .composer-model3d-active-chip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  padding: 0 6px;
  gap: 4px;
  font-size: 11px;
}
.composer-chip-row > [role="status"] button {
  flex-shrink: 0;
}
.composer-chip-row [class$="-kicker"],
.composer-chip-row [class$="-state"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-chip-row > [role="status"] .composer-territory-chip-open,
.composer-chip-row > [role="status"] .composer-suggest-chip-open {
  flex-shrink: 1;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  gap: 4px;
}
/* Steer chip — mirror of the plan chip's grammar (kicker · title · state · x)
   but warm coral instead of cool blue, and pinned to the right. */
.composer-steer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-width: 0;
  max-width: min(420px, 70%);
  overflow: hidden;
  flex-shrink: 1;
  min-height: 30px; /* match the plan chip — same grammar, same seat height */
  margin: 0 0 -1px auto; /* margin-left:auto keeps it right even when the plan chip is absent */
  box-sizing: border-box;
  padding: 0 8px 0 10px;
  border: 1px solid color-mix(in srgb, #e7785f 16%, var(--rule) 60%);
  border-bottom-color: color-mix(in srgb, #e7785f 9%, var(--rule) 44%);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 93%, #e7785f 7%);
  color: color-mix(in srgb, #e7785f 56%, var(--ink) 44%);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  position: relative;
  z-index: 3;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.composer-steer-chip:hover {
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 88%, #e7785f 12%);
  border-color: color-mix(in srgb, #e7785f 26%, var(--rule) 50%);
}
.composer-steer-chip[hidden] { display: none !important; }
.composer-steer-chip-kicker,
.composer-steer-chip-state {
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-size: 11px; /* match the plan chip kicker/state */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
}
.composer-steer-chip-title {
  min-width: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}
.composer-steer-chip-remove {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.composer-steer-chip:hover .composer-steer-chip-remove,
.composer-steer-chip:focus-within .composer-steer-chip-remove { opacity: 0.58; }
.composer-steer-chip-remove:hover {
  opacity: 0.9;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.composer-steer-chip-remove:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
body.dark .composer-steer-chip {
  border-color: rgba(231, 120, 95, 0.16);
  border-bottom-color: rgba(231, 120, 95, 0.09);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 90%, #e7785f 7%);
}
#work-row .input-zone.has-composer-goal-runtime .input-row,
#work-row .input-zone.has-composer-plan-chip .input-row,
#work-row .input-zone.has-composer-model3d-active-chip .input-row,
#work-row .input-zone.has-composer-steer-chip .input-row,
#work-row .input-zone.has-composer-territory-chip .input-row {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top-color: transparent !important;
}
#work-row .composer-chip-row > .composer-plan-chip,
#work-row .composer-chip-row > .composer-model3d-active-chip,
#work-row .composer-chip-row > .composer-steer-chip,
#work-row .composer-chip-row > .composer-territory-chip,
#work-row .composer-goal-runtime {
  border-bottom-color: transparent;
}
body.dark .line-diff-control {
  border-color: rgba(255, 255, 255, 0.075);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 92%, var(--frame-bg, #0b0d0f) 8%);
  color: rgba(255, 255, 255, 0.54);
}
body.dark .composer-plan-chip {
  border-color: rgba(142, 211, 255, 0.12);
  border-bottom-color: rgba(142, 211, 255, 0.075);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 90%, #8ed3ff 6%);
  color: rgba(174, 224, 255, 0.68);
}
body.dark .line-diff-additions {
  color: #3fb950;
}
body.dark .line-diff-deletions {
  color: #f0644d;
}
body.dark .line-diff-control:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 78%, #ffffff 6%);
  color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 560px) {
  .line-diff-control-slot {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .line-diff-control {
    max-width: calc(100% - 20px);
    margin-bottom: 6px;
    padding: 5px 10px;
    gap: 6px;
  }
  .composer-plan-chip {
    min-height: 23px;
    padding: 0 8px;
    font-size: 10.5px;
  }
  .composer-plan-chip-title {
    max-width: 148px;
  }
  .line-diff-review-label {
    max-width: 120px;
  }
}
.slash-command-hint {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  min-height: 22px;
  margin: 0 2px 1px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface, var(--paper-dark)) 92%, var(--task-state-main, #3aad7c) 8%);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slash-command-hint[hidden] {
  display: none !important;
}
.slash-command-hint[data-state="inactive"] {
  border-color: color-mix(in srgb, #d7a84e 30%, transparent);
  background: color-mix(in srgb, var(--surface, var(--paper-dark)) 90%, #d7a84e 10%);
}
.composer-slash-menu {
  position: absolute;
  left: 14px;
  bottom: calc(100% + 8px);
  width: min(352px, calc(100% - 28px));
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper-dark) 96%, #000 4%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  max-height: min(48vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 42;
}
.composer-slash-menu[hidden] {
  display: none !important;
}
.composer-slash-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.composer-slash-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.composer-slash-item:hover,
.composer-slash-item.is-active {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.composer-slash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.composer-slash-icon--skills {
  color: #a8d7ff;
}
.composer-slash-icon--scope {
  color: #9fd8bc;
}
.composer-slash-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.composer-slash-title {
  overflow: hidden;
  color: color-mix(in srgb, #a8d7ff 84%, var(--ink) 16%);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-slash-description {
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-slash-command {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .composer-slash-menu {
    left: 8px;
    width: calc(100% - 16px);
  }
  .composer-slash-command {
    display: none;
  }
}
.input-disclaimer {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-ghost);
  text-align: center;
  letter-spacing: 0.01em;
  padding-top: 12px;
  pointer-events: none;
}

.ib {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  background: none;
  border: 1px solid var(--ink-dim);
  border-radius: 8px;
  height: 34px;
  min-width: 52px;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ib:hover { color: var(--ink); border-color: var(--ink-dim); }
.ib:disabled { opacity: 0.3; cursor: not-allowed; }
.ib.on { color: var(--ink); border-color: var(--ink-dim); background: rgba(28,26,22,0.07); font-weight: 500; }
.ib.on-red { color: var(--red); border-color: rgba(176,48,32,0.3); background: var(--red-dim); font-weight: 500; }
body.dark .ib.on { background: rgba(212,207,197,0.09); }

/* @sas claim: Primary send action — filled circular button, high-contrast against muted chips. terms: ib.send, send-btn, primary-action id: inbox:send-circle timestamp: 2026-05-16T00:00:00Z modified_by: inbox-option-b live: true */
.ib.send {
  position: relative;
  color: #11100e;
  background: #f1ece4;
  border: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s, transform 0.1s, opacity 0.15s;
}
.ib.send svg { width: 13px; height: 13px; }
.ib.send:hover:not(:disabled) {
  background: #fff1e9;
  box-shadow: 0 0 0 2px rgba(231, 120, 95, 0.28);
  transform: scale(1.06);
}
.ib.send:active:not(:disabled) {
  color: #120d0b;
  background: #e7785f;
  transform: scale(0.94);
}
body.dark .ib.send {
  color: #11100e;
  background: #f1ece4;
}
.ib.send:disabled {
  color: rgba(61, 35, 23, 0.58);
  background: #e7c7ad;
  box-shadow: 0 0 0 1px rgba(231, 120, 95, 0.14), 0 0 16px rgba(231, 120, 95, 0.10);
  opacity: 1;
  cursor: default;
  animation: send-thinking 1.8s ease-in-out infinite;
}
body.dark .ib.send:disabled {
  color: rgba(61, 35, 23, 0.60);
  background: #e4b996;
}
@keyframes send-thinking {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.75; }
}

/* The empty desktop composer uses the same primary circle to start talk mode.
   Content restores Send; an active response still takes priority as Stop. */
.ib.send .send-ic-voice,
.ib.send .send-ic-stop { display: none; }
.ib.send.talk-mode {
  opacity: 1;
}
.ib.send.talk-mode .send-ic-arrow { display: none; }
.ib.send.talk-mode .send-ic-voice {
  display: block;
  width: 15px;
  height: 15px;
}
.ib.send.talk-mode:hover:not(:disabled) {
  color: #185f41;
  background: #daf2e5;
  box-shadow: 0 0 0 2px rgba(74, 173, 124, 0.22);
}
.ib.send.talk-mode-active {
  color: #0f6840;
  background: #c5ead6;
  box-shadow: 0 0 0 3px rgba(47, 158, 103, 0.34);
  animation: talk-mode-active-pulse 1.55s ease-in-out infinite;
}
body.dark .ib.send.talk-mode-active {
  color: #0f6840;
  background: #c5ead6;
}
.ib.send.talk-mode-send-countdown::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    #4aad7c var(--talk-mode-send-progress, 0deg),
    rgba(74, 173, 124, 0.16) 0deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  pointer-events: none;
}
@keyframes talk-mode-active-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ib.send.talk-mode-active { animation: none; }
}

/* Stop — while the visible line is active, the primary circle becomes the
   halt control. The arrow and centered square are mutually exclusive. */
.ib.send.stop {
  position: relative;
  background: #fff;
  color: #11100e;
  animation: none;
  opacity: 1;
  cursor: pointer;
}
.ib.send.stop .send-ic-arrow { display: none; }
.ib.send.stop .send-ic-stop {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
.ib.send.stop:hover:not(:disabled) {
  background: #f5f2ed;
  box-shadow: 0 0 0 2px rgba(231, 120, 95, 0.32);
  transform: scale(1.06);
}
.ib.send.stop:active:not(:disabled) { transform: scale(0.94); }
body.dark .ib.send.stop { background: #fff; color: #11100e; }

.input-ta-wrap {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  min-height: 22px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  gap: var(--space-3);
  transition: border-color 0.2s;
  background: transparent;
}
/* input task chip — attaches flush on top of the chamber when a task is bound */
#input-task-chip {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 10px;
  margin: 0 0 -1px 0;
  background: color-mix(in srgb, var(--task-color, #3aad7c) 12%, var(--paper-dark));
  border: 1px solid color-mix(in srgb, var(--task-color, #3aad7c) 32%, transparent);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--task-color, #3aad7c);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: calc(100% - 16px);
  margin-left: 12px;
}
#input-task-chip.active { display: none; } /* chip removed from inbox per design — exit-task-room affordance must live elsewhere */
#input-task-chip-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--task-color, #3aad7c);
  flex-shrink: 0; opacity: 0.8;
}
#input-task-chip-label {
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#input-task-chip-dismiss {
  background: none; border: 1px solid currentColor; border-radius: 10px; cursor: pointer;
  color: var(--task-color, #3aad7c);
  padding: 2px 8px; font-size: 10px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.04em;
  flex-shrink: 0; opacity: 0.7;
  font-family: inherit;
}
#input-task-chip-dismiss:hover { opacity: 1; }
#input-task-chip.chip-completing #input-task-chip-label {
  text-decoration: line-through; opacity: 0.5;
}
@keyframes chipFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; max-height: 0; margin-bottom: 0; padding: 0; }
}
#input-task-chip.chip-fading {
  animation: chipFadeOut 0.4s ease forwards;
}
.input-icon-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.input-icon-btn:hover { color: var(--ink-soft); }
.input-ta-wrap:focus-within { border-color: transparent; }

textarea {
  background: none; border: none; outline: none;
  font-family: var(--serif);
  font-size: var(--text-md);
  color: var(--ink);
  resize: none;
  height: 22px;
  overflow-y: auto;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
}
textarea#input { caret-color: var(--accent, currentColor); }
textarea::placeholder { color: var(--ink-dim); font-style: italic; }

/* Codex-style conversation typography */
.messages {
  font-family: var(--font-codex);
  font-size: 15px;
  line-height: 1.55;
}

.msg-row {
  max-width: min(780px, calc(100% - 108px));
  padding-bottom: 22px;
}

/* Legacy chat-typography patch removed — owned by "chat message presentation" block. */

.input-ta-wrap textarea,
textarea {
  font-family: var(--font-codex);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}
body.dark .input-ta-wrap textarea,
body.dark textarea {
  color: #ffffff;
}
body.dark .input-ta-wrap textarea::placeholder,
body.dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.input-ta-wrap textarea::placeholder,
textarea::placeholder {
  font-style: normal;
}

/* File chips */
.file-chips {
  display: inline-flex;
  vertical-align: top;
  max-width: 100%;
  flex-wrap: nowrap;
  /* Wider than a thumbnail's gap to its own pen and ×, so each pair reads as belonging to its picture. */
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}
.file-chips:empty { display: none; }
.file-chips:not(:empty) { padding: 0 2px 8px; }

.file-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-mid);
  animation: arrive 0.2s ease;
}
.file-chip .chip-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-chip .chip-remove {
  cursor: pointer;
  color: var(--ink-dim);
  font-size: var(--text-md);
  line-height: 1;
  transition: color 0.12s;
}
.file-chip .chip-remove:hover { color: var(--ink); }
.file-chip.uploading { opacity: 0.5; border-color: var(--ink-dim); }
.file-chip--failed {
  border-color: var(--danger, #b84b3f);
  color: var(--danger, #b84b3f);
}
.file-chip .chip-retry {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 1px 2px;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.file-chip .chip-retry:hover { color: var(--ink); }
.file-chip .chip-retry:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
/* Staged picture or movie: the thumbnail IS the chip — one per attachment. The thumbnail carries
   its own frame and its pen and × sit just outside it, so no control ever covers the picture. */
.file-chip--img,
.file-chip--video { padding: 0; border: 0; gap: 5px; align-items: flex-start; }
.file-chip--img .chip-thumb,
.file-chip--video .chip-thumb--video {
  display: block;
  max-height: 56px;
  max-width: 96px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: zoom-in;
  transition: border-color 0.12s;
}
.file-chip--video .chip-thumb--video { background: #111; }
.file-chip--img .chip-thumb:hover,
.file-chip--video .chip-thumb--video:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
/* Pen above ×, stacked beside the thumbnail's top edge, so a staged picture can be marked up
   or dropped before it is sent. */
.file-chip .chip-thumb-tools {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
/* Small round buttons: a faint disc at rest; the pen warms to the accent, the × to red. */
.file-chip .chip-thumb-tools .chip-remove,
.file-chip .chip-draw {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.file-chip .chip-draw svg { width: 10px; height: 10px; stroke-width: 2.5; }
.file-chip .chip-thumb-tools .chip-remove svg { width: 11px; height: 11px; stroke-width: 2.4; }
.file-chip .chip-draw:hover {
  color: var(--accent, var(--ink));
  background: color-mix(in srgb, var(--accent, var(--ink)) 18%, transparent);
}
.file-chip .chip-thumb-tools .chip-remove:hover {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 18%, transparent);
}
.file-chip .chip-draw:focus-visible,
.file-chip .chip-thumb-tools .chip-remove:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}
.composer-attachment-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10000;
  transform: translateX(-50%);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
}
.input-zone.composer-drag-over .input-row {
  outline: 1px solid var(--ink-dim);
  outline-offset: 3px;
}

.file-indicator {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 4px;
}
.file-previews {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.file-preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--rule);
  display: block;
  cursor: zoom-in;
}
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.img-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

.generated-images { margin: 12px 0; }
.generated-audio { margin: 12px 0; }
.generated-video { margin: 12px 0; }

.tool-checkpoint-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0;
  background: var(--ink-faint, rgba(255,255,255,0.04));
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-soft, #999);
}
.tcp-btn {
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.tcp-continue { color: var(--accent, #d4622a); }
.tcp-stop { color: var(--ink-soft, #999); }
.generated-video video {
  max-width: 100%;
  max-height: 480px;
  border-radius: 8px;
  display: block;
}
.video-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.video-dl-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.video-dl-btn:hover { color: var(--ink); }
.video-dl-btn:disabled { opacity: 0.5; cursor: default; }
.generated-audio audio {
  width: 100%;
  max-width: 400px;
  height: 40px;
  border-radius: 8px;
}
.generated-img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  display: block;
}
.img-download-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.img-download-btn:hover { color: var(--ink); }

/* Streaming cursor */
.cursor {
  display: none;
  width: 1px;
  height: 1em;
  background: var(--ink);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Thinking indicator */
.thinking-row {
  max-width: 680px;
  margin-left: auto;
  margin-right: 104px;
  padding: 0 32px 20px;
  animation: arrive 0.3s ease;
}
.thinking-inner {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.thinking-breath {
  width: 38px; height: 38px;
  position: relative;
  display: inline-block;
  perspective: 84px;
  flex-shrink: 0;
}
.thinking-breath .gi-orbit {
  position: absolute; inset: 0;
}
.thinking-breath .gi-ball {
  position: absolute; top: 50%; left: 50%;
  width: 9.5px; height: 9.5px; margin: -4.75px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  /* All three share one sphere — theme ink color (adapts light/dark, matches chat text) */
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--ink-heavy) 88%, #fff),
    var(--ink-heavy) 58%,
    color-mix(in srgb, var(--ink-heavy) 82%, #000));
  /* Rounded drop shadow + inner shading so each reads as a 3D ball */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.36),
    inset -0.7px -0.9px 1.4px rgba(0,0,0,0.24),
    inset 0.8px 0.8px 1px rgba(255,255,255,0.28);
  transform-origin: center;
  will-change: transform;
}
/* The thinking logo splits, settles, and rejoins in a quick three-beat cascade. */
.thinking-breath .gi-ball.b1 { animation: thinkingLogoTop 900ms linear infinite; }
.thinking-breath .gi-ball.b2 { animation: thinkingLogoLeft 900ms linear infinite; }
.thinking-breath .gi-ball.b3 { animation: thinkingLogoRight 900ms linear infinite; }
@keyframes thinkingLogoTop {
  0%, 100% { transform: translate(0, 0) scale(1.45); }
  10%      { transform: translate(0, 0) scale(1.54); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  36%      { transform: translate(0, -6.4px) scale(0.80); }
  52%      { transform: translate(0, -6.4px) scale(0.94); }
  64%      { transform: translate(0, -6.4px) scale(0.88); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  82%      { transform: translate(0, 0) scale(1.45); }
}
@keyframes thinkingLogoLeft {
  0%, 100% { transform: translate(0, 0) scale(1.45); }
  13%      { transform: translate(0, 0) scale(1.52); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  40%      { transform: translate(-5.55px, 3.2px) scale(0.80); }
  55%      { transform: translate(-5.55px, 3.2px) scale(0.94); }
  66%      { transform: translate(-5.55px, 3.2px) scale(0.88); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  84%      { transform: translate(0, 0) scale(1.45); }
}
@keyframes thinkingLogoRight {
  0%, 100% { transform: translate(0, 0) scale(1.45); }
  16%      { transform: translate(0, 0) scale(1.50); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  44%      { transform: translate(5.55px, 3.2px) scale(0.80); }
  58%      { transform: translate(5.55px, 3.2px) scale(0.94); }
  68%      { transform: translate(5.55px, 3.2px) scale(0.88); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  86%      { transform: translate(0, 0) scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-breath .gi-ball.b1,
  .thinking-breath .gi-ball.b2,
  .thinking-breath .gi-ball.b3 { animation: none; will-change: auto; }
  .thinking-breath .gi-ball.b1 { transform: translate(0, -6.4px) scale(0.88); }
  .thinking-breath .gi-ball.b2 { transform: translate(-5.55px, 3.2px) scale(0.88); }
  .thinking-breath .gi-ball.b3 { transform: translate(5.55px, 3.2px) scale(0.88); }
}
.thinking-elapsed {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 1;
  margin-left: 6px;
}
.thinking-label {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: opacity 0.25s ease;
  /* Shimmer sweep — gradient rides across the text, resting at chat-font ink */
  background: linear-gradient(90deg,
    var(--ink)   0%,
    var(--ink)  22%,
    var(--ink-heavy) 50%,
    var(--ink)  78%,
    var(--ink) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: labelShimmer 2.2s linear infinite;
}
@keyframes labelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.thinking-activity {
  padding: 4px 0 10px 0;
}
.thinking-activity.thinking-streaming {
  padding: 10px 0 4px 0;
  opacity: 1;
}

/* Tool activity rows — accumulate during AI tool calls */
.tool-activity-list {
  padding-left: 15px;
  margin-top: 5px;
  display: grid;
  gap: 3px;
  max-width: min(560px, 100%);
}
.tool-activity-summary {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  margin-bottom: 4px;
  text-transform: none;
}
.tool-activity-item {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  opacity: 0.62;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.11s ease, transform 0.11s ease;
}
.tool-activity-more {
  color: var(--ink-ghost);
  opacity: 0.62;
}
.tool-activity-item.tool-activity-enter {
  animation: toolActivityEnter 0.22s ease forwards;
}
@keyframes toolActivityEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 0.75; transform: translateY(0); }
}
.tool-activity-inline {
  margin: 6px 0;
}
.streaming-transcript-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.streaming-transcript-events:empty,
.msg-transcript-events:empty {
  display: none;
  margin: 0;
}
.streaming-transcript-event-row {
  display: flex;
  justify-content: flex-start;
}
.streaming-transcript-event-row .tool-activity-receipt {
  margin: 0;
}
.msg-transcript-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.msg-transcript-event-row {
  display: flex;
  justify-content: flex-start;
}
.msg-transcript-event-row .tool-activity-receipt {
  margin: 0;
}
.assistant-transcript-event-row {
  margin: 12px 0;
}
.assistant-transcript-event-row:first-child {
  margin-top: 0;
}
.assistant-transcript-event-row:last-child {
  margin-bottom: 0;
}
.tool-activity-receipt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: min(620px, 100%);
  min-height: 18px;
  margin: 6px 0;
  padding: 0;
  color: var(--ink);
  opacity: 1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.tool-activity-receipt .tool-activity-label {
  overflow-wrap: anywhere;
}
.tool-activity-glyph {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 4px;
  position: relative;
  color: var(--ink-dim);
}
.tool-activity-glyph::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.72;
}
.tool-activity-receipt--edited .tool-activity-glyph::before,
.tool-activity-receipt--ran .tool-activity-glyph::before {
  border-radius: 50%;
}
.tool-activity-receipt--agent .tool-activity-glyph::before {
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-dim) 16%, transparent);
}
.tool-activity-receipt--file-edit {
  --file-edit-muted: color-mix(in srgb, var(--ink-dim) 70%, var(--ink-ghost) 30%);
  --file-edit-strong: color-mix(in srgb, var(--ink-heavy) 42%, var(--ink-dim) 58%);
  --file-edit-live: color-mix(in srgb, var(--task-state-main) 54%, var(--ink-dim) 46%);
  --file-edit-add: color-mix(in srgb, var(--task-state-main) 56%, var(--ink-dim) 44%);
  --file-edit-del: color-mix(in srgb, var(--red) 56%, var(--ink-dim) 44%);
  --chat-inline-tool-grey: color-mix(in srgb, var(--ink-dim) 68%, var(--ink-ghost) 32%);
  --chat-inline-tool-grey-live: color-mix(in srgb, var(--ink-soft) 52%, var(--ink-dim) 48%);
  align-items: center;
  gap: 0.42em;
  max-width: min(620px, 100%);
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--file-edit-muted);
  opacity: 0.86;
  box-shadow: none;
  white-space: normal;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.38;
}
.tool-activity-receipt--file-edit .tool-activity-file-label {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0.38em;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
  white-space: nowrap;
}
.tool-activity-receipt--file-edit .tool-activity-file-action {
  color: var(--file-edit-muted);
  font-weight: 400;
}
.tool-activity-receipt--file-edit .tool-activity-file-name {
  min-width: 0;
  max-width: min(320px, 48vw);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--file-edit-strong);
  font-weight: 500;
  white-space: nowrap;
}
.tool-activity-receipt--file-edit .tool-activity-stat {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.tool-activity-receipt--file-edit .tool-activity-stat--add {
  color: var(--file-edit-add);
}
.tool-activity-receipt--file-edit .tool-activity-stat--del {
  color: var(--file-edit-del);
}
.tool-activity-receipt--file-edit .tool-activity-glyph {
  width: 0.8em;
  height: 1em;
  flex: 0 0 0.8em;
  margin-top: 0;
  border-radius: 0;
  color: var(--ink-ghost);
}
.tool-activity-receipt--file-edit .tool-activity-glyph::before {
  left: 0.22em;
  top: 0.5em;
  width: 0.34em;
  height: 0.34em;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.5;
}
.tool-activity-receipt--file-edit .tool-activity-glyph::after {
  content: '';
  position: absolute;
  left: 0.22em;
  top: 0.5em;
  width: 0.34em;
  height: 0.34em;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%) scale(1);
  opacity: 0;
}
.tool-activity-receipt--file-edit .event-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--file-edit-muted);
  font: inherit;
}
.tool-activity-receipt--file-edit .event-state::before {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin-right: 0;
  vertical-align: baseline;
}
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-glyph,
.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit .tool-activity-glyph {
  color: var(--file-edit-live);
}
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-glyph::before,
.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit .tool-activity-glyph::before {
  opacity: 1;
  animation: fileEditLiveDot 1.35s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-glyph::after,
.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit .tool-activity-glyph::after {
  animation: fileEditLiveRing 1.35s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes fileEditLiveDot {
  0%, 100% { transform: translateY(-50%) scale(0.82); opacity: 0.68; }
  50% { transform: translateY(-50%) scale(1); opacity: 1; }
}
@keyframes fileEditLiveRing {
  0% { transform: translateY(-50%) scale(0.9); opacity: 0.34; }
  70%, 100% { transform: translateY(-50%) scale(2.35); opacity: 0; }
}
#messages.line-code .tool-activity-receipt {
  font-size: 10.5px;
  opacity: 0.86;
}
/* Live tool receipts read at chat-font ink (not dim grey); the newest active row adds a shimmer sweep. */
#streaming-msg .tool-activity-summary,
#streaming-msg .tool-activity-receipt {
  --chat-inline-tool-grey: var(--ink);
  --chat-inline-tool-grey-live: var(--ink);
  --chat-inline-tool-shine: var(--ink-heavy);
  --chat-inline-tool-glyph-grey: var(--ink);
  color: var(--chat-inline-tool-grey, var(--ink));
  opacity: 1;
}
#streaming-msg .tool-activity-summary,
#streaming-msg .tool-activity-receipt {
  position: relative;
  isolation: isolate;
  border-radius: 7px;
}
#streaming-msg .tool-activity-summary {
  width: fit-content;
  max-width: 100%;
}
#streaming-msg .tool-activity-glyph {
  color: var(--chat-inline-tool-glyph-grey, color-mix(in srgb, var(--ink-dim) 70%, #8f969f 30%));
}
.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt :is(.tool-activity-label, .event-state),
#streaming-msg .is-active-tooling .tool-activity-receipt :is(.tool-activity-label, .event-state),
.tool-activity-receipt.is-active-tooling :is(.tool-activity-label, .event-state) {
  color: var(--chat-inline-tool-grey-live);
}
#streaming-msg .is-active-tooling .tool-activity-receipt :is(.tool-activity-label, .event-state),
.tool-activity-receipt.is-active-tooling :is(.tool-activity-label, .event-state) {
  background: linear-gradient(90deg,
    var(--chat-inline-tool-grey-live) 0%,
    var(--chat-inline-tool-grey-live) 28%,
    var(--chat-inline-tool-shine) 50%,
    var(--chat-inline-tool-grey-live) 72%,
    var(--chat-inline-tool-grey-live) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: labelShimmer 1.9s linear infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.13);
}
#streaming-msg .is-active-tooling .tool-activity-glyph,
#streaming-msg .tool-activity-receipt.is-active-tooling .tool-activity-glyph {
  color: var(--chat-inline-tool-glyph-grey, color-mix(in srgb, var(--ink-dim) 70%, #8f969f 30%));
}
@media (prefers-reduced-motion: reduce) {
  .streaming-transcript-event-row.is-active-tooling .tool-activity-receipt :is(.tool-activity-label, .event-state),
  #streaming-msg .is-active-tooling .tool-activity-receipt :is(.tool-activity-label, .event-state),
  .tool-activity-receipt.is-active-tooling :is(.tool-activity-label, .event-state) {
    animation: none;
  }
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) :is(.tool-activity-label, .event-state),
.tool-activity-receipt--file-edit.is-active-tooling :is(.tool-activity-label, .event-state) {
  background: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-file-label,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-file-label {
  display: inline-flex !important;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling),
.tool-activity-receipt--file-edit.is-active-tooling {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--file-edit-muted) !important;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-glyph,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-glyph {
  color: var(--file-edit-live) !important;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-file-action,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-file-action {
  color: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-file-name,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-file-name {
  color: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-stat--add,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-stat--add {
  color: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-stat--del,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-stat--del {
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .tool-activity-receipt--file-edit.is-active-tooling .tool-activity-glyph::before,
  .streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit .tool-activity-glyph::before,
  .tool-activity-receipt--file-edit.is-active-tooling .tool-activity-glyph::after,
  .streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit .tool-activity-glyph::after {
    animation: none;
  }
}

/* === SECTION: round-notes === */
/* @sas claim: Collapsed dimmed "working notes" block holding all tool-loop rounds before the final one (split server-side by the U+2063 round-break marker). Folds interleaved per-round coding narration out of the visible message; summary toggle is small muted Grotesk, body is reduced-size dim prose behind a neutral grey rule. | terms: .round-notes, summary, .round-notes-body, .round-note, working notes, round-break, U+2063 | id: 6320:round-notes-css | timestamp: 2026-06-12T00:00:00.000Z | live: true */
.round-notes {
  margin: 2px 0 14px;
}
.round-notes > summary {
  cursor: pointer;
  width: fit-content;
  list-style: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  opacity: 0.8;
  user-select: none;
}
.round-notes > summary::-webkit-details-marker { display: none; }
.round-notes > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  transition: transform 0.15s ease;
}
.round-notes[open] > summary::before { transform: rotate(90deg); }
.round-notes > summary:hover { opacity: 1; }
.round-notes-body {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--ink-faint);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.round-note {
  font-size: 0.84em;
  color: var(--ink-soft);
}
.round-note p { margin: 0 0 6px; }
.round-note p:last-child { margin-bottom: 0; }

/* @sas claim: Retires the framed inline heartbeat pill because the generation signal now stays as the frameless under-response pulse. | terms: .inline-heartbeat, inline heartbeat pill, framed pulse, under-response pulse, display none | id: 5917:inline-heartbeat-orbit-css | timestamp: 2026-06-06T11:37:00.000+03:00 | live: true */
.inline-heartbeat {
  display: none !important;
}

/* Phase entries inside thinking block */
.thinking-phases {
  margin-top: 7px;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.thinking-phase {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.thinking-phase-text {
  color: #60a5fa;
  opacity: 0.9;
}

/* Stop button */
#mic-btn { flex-shrink: 0; }
/* Extra breathing room between the mic and the send button in the composer. */
#input-controls #mic-btn { margin-right: 12px; }
#mic-btn:hover { color: var(--ink) !important; }
/* Recording: the mic itself is the stop control — a light green surround wraps
   the icon (click it to stop + transcribe). Soft pulse signals it's live. */
#mic-btn.recording {
  color: #3bbf7a !important;
  background: rgba(74, 222, 128, 0.18) !important;
  border-radius: 9px;
  animation: mic-pulse 1.6s ease-in-out infinite;
}
#mic-btn.recording:hover {
  color: #2fa869 !important;
  background: rgba(74, 222, 128, 0.28) !important;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.0); }
  50% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
}

/* === SECTION: voice-ux-states === */
/* Transcribing keeps the mic button a fixed 28px — it never grows an inline
   label, so the attach + mic icon cluster stays put. The "Transcribing…"
   status + spinner render in the voice HUD slot after the mic instead. */
#mic-btn.transcribing { color: var(--ink-dim) !important; animation: none; cursor: progress; }
#mic-btn .mic-btn-label { display: none !important; }
@keyframes mic-spin { to { transform: rotate(360deg); } }

/* The HUD floats OVER the command cluster instead of taking width in the right
   tool group — recording covers the action buttons, it never displaces them.
   The fill is the composer's own surface, so the seam is invisible. */
.voice-hud {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--sans); font-size: 11px; color: var(--ink-dim);
  line-height: 1; margin-left: 0; padding: 4px 6px 4px 24px; z-index: 3;
  background: linear-gradient(to right, transparent 0,
    var(--composer-surface, var(--paper-dark)) 20px);
  transition: opacity 0.15s ease;
}
.voice-hud[hidden] { display: none !important; }
.voice-hud-timer {
  font-variant-numeric: tabular-nums; font-weight: 500;
  min-width: 28px; text-align: center;
}
.voice-hud-level {
  display: inline-block; width: 36px; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden;
}
.voice-hud-level-bar {
  display: block; height: 100%; width: 0%; border-radius: 2px;
  background: var(--accent); transition: width 0.06s linear;
}

/* Recording controls — pause / stop+transcribe / cancel — live in the HUD
   slot after the level meter, shown only while actively recording. */
.voice-hud-controls { display: inline-flex; align-items: center; gap: 1px; }
.voice-hud-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  border-radius: 6px; color: var(--ink-dim); cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.voice-hud-btn:hover { color: var(--ink); background: rgba(28,26,22,0.06); }
body.dark .voice-hud-btn:hover { background: rgba(212,207,197,0.08); }
.voice-hud-btn:active { transform: scale(0.9); }
.voice-hud-btn-stop:hover { color: var(--accent); }
.voice-hud-btn-cancel:hover { color: #c0392b; }
.voice-hud .vh-ic-play { display: none; }
.voice-hud.paused .vh-ic-pause { display: none; }
.voice-hud.paused .vh-ic-play { display: inline-flex; }
.voice-hud.paused .voice-hud-timer { opacity: 0.45; }
.voice-hud.paused .voice-hud-level-bar { background: var(--ink-dim); }
.voice-hud.is-transcribing .voice-hud-controls { display: none; }

/* Transcribing status — swaps in for the recording timer/level in the same
   HUD slot, so the voice state never changes the icon toolbar's geometry. */
.voice-hud-status { display: none; align-items: center; gap: 6px; white-space: nowrap; }
.voice-hud.is-transcribing .voice-hud-timer,
.voice-hud.is-transcribing .voice-hud-level { display: none; }
.voice-hud.is-transcribing .voice-hud-status { display: inline-flex; }
.voice-hud-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink-dim); border-top-color: transparent;
  animation: mic-spin 0.7s linear infinite;
}

.input-ta-wrap.voice-arrived { animation: voice-arrival-flash 0.9s ease-out; }
@keyframes voice-arrival-flash {
  0% { box-shadow: 0 0 0 0 rgba(79, 168, 150, 0); border-color: rgba(79, 168, 150, 0.55); }
  30% { box-shadow: 0 0 0  3px rgba(79, 168, 150, 0.18); border-color: rgba(79, 168, 150, 0.40); }
  100% { box-shadow: 0 0 0 0 rgba(79, 168, 150, 0); border-color: transparent; }
}

#mic-error-toast {
  font-size: 11px;
  color: var(--ink-mid);
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 6px;
  animation: fadeIn 0.2s ease;
}

.stop-inline {
  background: none;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--ink-mid);
  display: none;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.stop-inline:hover { color: #c0392b; }
.stop-inline svg { width: 14px; height: 14px; }

.ib.send.stop.is-stopping {
  cursor: wait;
  opacity: 0.72;
}

/* Markdown msg-body typography owned by "chat message presentation" block. */
.callout {
  border-left: 2px solid var(--rule); padding: 10px 14px;
  margin: 12px 0; border-radius: 2px;
}
.callout-label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px;
}
.callout p:last-child { margin-bottom: 0; }
.callout-note    { background: rgba(90,143,160,0.06); }
.callout-note    .callout-label { color: #5a8fa0; }
.callout-key     { background: rgba(184,146,74,0.06); }
.callout-key     .callout-label { color: #b8924a; }
.callout-example { background: rgba(90,138,90,0.06); }
.callout-example .callout-label { color: #5a8a5a; }
.callout-warning { background: rgba(192,120,64,0.06); }
.callout-warning .callout-label { color: #c07840; }
.callout-def     { background: rgba(138,90,154,0.06); }
.callout-def     .callout-label { color: #8a5a9a; }
.copy-btn {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  color: var(--ink-dim); background: none; border: none;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
  padding: 2px 4px;
}
.msg-body pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--ink); }
/* Inline-code, pre code, streaming-code and hr are owned by "chat message presentation". */
.msg-body pre code {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  font-size: inherit;
  font-family: var(--code);
  color: inherit;
}
.msg-body a {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
}
.msg-body a:hover { text-decoration-color: var(--accent); }
.chat-link-with-shelf {
  position: relative;
}
.chat-link-shelf-action {
  position: absolute;
  inset-inline-end: -2px;
  bottom: calc(100% - 2px);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 4px 8px;
  color: var(--ink-soft);
  font: 600 11px/1 var(--sans);
  white-space: nowrap;
  background: color-mix(in srgb, var(--paper) 94%, var(--ink) 6%);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 7px;
  box-shadow: 0 7px 18px color-mix(in srgb, #000 18%, transparent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease, color 140ms ease, background 140ms ease;
}
.chat-link-with-shelf:hover .chat-link-shelf-action,
.chat-link-with-shelf:focus-within .chat-link-shelf-action {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.chat-link-shelf-action:hover,
.chat-link-shelf-action:focus-visible,
.chat-link-shelf-action.is-shelved {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 86%, var(--accent) 14%);
}
.chat-link-shelf-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-link-shelf-action:disabled {
  cursor: wait;
}

.msg-body strong { color: var(--ink-heavy); }
.msg-body em { font-style: italic; color: var(--pass-4); }
/* Tables: horizontal rules only — grid borders read as a spreadsheet, not prose */
.msg-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 0.9em 0 1.1em; font-size: 0.9em; }
.msg-body th, .msg-body td { border: none; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); padding: 0.45em 1em 0.45em 0; text-align: start; }
.msg-body th { color: var(--ink-mid); font-weight: 600; border-bottom: 1px solid var(--rule); }
.msg-body tr:last-child td { border-bottom: none; }

/* highlight.js overrides */
.hljs { background: transparent !important; color: var(--ink) !important; }
.hljs-keyword, .hljs-selector-tag { color: #8a5cf5; }
.hljs-string, .hljs-attr { color: #5a7a3a; }
.hljs-comment { color: var(--ink-dim); font-style: italic; }
.hljs-number, .hljs-literal { color: #b06830; }
.hljs-title, .hljs-name { color: #a03030; }
.hljs-type, .hljs-built_in { color: #3a7a7a; }
.hljs-variable, .hljs-params { color: var(--ink-mid); }
body.dark .hljs-keyword, body.dark .hljs-selector-tag { color: #c5a5c5; }
body.dark .hljs-string, body.dark .hljs-attr { color: #b5cea8; }
body.dark .hljs-number, body.dark .hljs-literal { color: #d19a66; }
body.dark .hljs-title, body.dark .hljs-name { color: #e06c75; }
body.dark .hljs-type, body.dark .hljs-built_in { color: #56b6c2; }

/* ── Mobile hamburger button ────────────────────────────── */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none;
  color: var(--ink-dim); cursor: pointer;
  border-radius: 6px; padding: 0; flex-shrink: 0;
}
.mobile-menu-btn:hover { color: var(--ink); background: rgba(28,26,22,0.06); }
body.dark .mobile-menu-btn:hover { background: rgba(212,207,197,0.08); }

.mobile-sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4); z-index: 999;
}
.mobile-sidebar-backdrop.open { display: block; }

.mobile-home-actions {
  display: none;
}

/* Context bar for phone — shows active line + session info inline in project bar */
.phone-context-bar {
  display: none;
}

/* === SECTION: mobile-responsive === */
/* Owner: mobile-responsive — @media max-width overrides for shell, messages, input, sidebar. */

/* ── Phone bottom nav (hidden on desktop) ────────────────── */
/* Gated on (pointer: coarse): phone chrome engages only on real touch devices.
   A narrow desktop window (half-snapped, high display scale) must never grow
   the nav or its padding reservations — that read as a dead band under the
   composer on desktop. */
.phone-bottom-nav {
  display: none;
}
@media (max-width: 700px) and (pointer: coarse) {
  .phone-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--paper);
    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
  }
  /* Account for bottom nav — one reservation only. #main-content already
     contains #work-left; padding both stacked 112px for a 56px nav. */
  .shell > #main-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .phone-nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--ink-dim);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: color 0.15s;
  }
  .phone-nav-tab svg {
    flex: 0 0 auto;
    opacity: 0.55;
    transition: opacity 0.15s;
  }
  .phone-nav-tab.is-active {
    color: var(--pass-3);
  }
  .phone-nav-tab.is-active svg {
    opacity: 1;
  }
  .phone-nav-tab:active {
    color: var(--ink);
  }

  .mobile-home-actions { display: none !important; }
  /* Show phone context bar inline in project bar */
  .phone-context-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .phone-context-line {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--line-tab-accent) 58%, var(--ink-soft));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .phone-context-session {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    white-space: nowrap;
  }
  .phone-context-sep {
    width: 1px;
    height: 12px;
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    flex-shrink: 0;
  }
}

@media (max-width: 700px) {
  .mobile-menu-btn { display: inline-flex; }
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
  }
  .shell > .project-bar {
    min-width: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
    gap: 7px;
  }
  .top-context-cluster {
    flex: 1 1 auto;
    max-width: none;
  }
  .project-picker-chip {
    max-width: 34vw;
  }
  .line-picker-chip {
    display: inline-flex;
    max-width: 42vw;
  }
  .line-picker-chip .float-line-name {
    max-width: 30vw;
  }
  .shell:has(> aside:is(:hover,.pinned)) {
    grid-template-columns: var(--sidebar) 1fr;
  }
  .shell:has(> aside:is(:hover,.pinned)) > .project-bar::after,
  .shell > .project-bar::after {
    left: 0;
  }
  #main-content {
    border-top-left-radius: 0;
    border-left: none;
  }
  #main-content::before {
    display: none;
  }
  #main-content::after {
    display: none;
  }
  body:not(.no-auth)::after {
    display: none;
  }
  .project-bar-name {
    max-width: 28vw;
    padding-inline: 4px;
  }
  .project-switcher-btn {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
  .line-tab-divider {
    margin: 0 1px;
    opacity: 0.35;
  }
  .line-strip {
    display: none;
  }
  #project-block.strip-open .line-strip {
    display: flex;
  }
  .line-tab-bar {
    display: none;
  }
  .line-tab-scroll {
    display: none;
  }
  .line-search-btn,
  .line-new-tab-btn,
  .line-menu-btn { display: none; }
  .mobile-sidebar-backdrop.open {
    backdrop-filter: blur(2px);
  }
  aside {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(82vw, 280px);
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 10px calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    justify-content: flex-start;
    gap: 4px;
    box-shadow: 12px 0 32px rgba(0,0,0,0.28);
  }
  aside:is(:hover,.pinned) { width: min(82vw, 280px); }
  aside.mobile-open { transform: translateX(0); }
  aside .nav-item,
  aside:is(:hover,.pinned) .nav-item {
    height: 36px;
    padding: 8px 12px;
    gap: 12px;
  }
  aside .nav-label,
  aside:is(:hover,.pinned) .nav-label {
    max-width: 180px;
    opacity: 1;
    transform: translateX(0);
  }
  aside .nav-item::after { display: none; }
  .toolbar { padding: 11px 16px; }
  #work-row { min-width: 0; }
  #work-left { padding-right: 0 !important; }
  .mobile-home-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 12px 6px;
    flex-shrink: 0;
  }
  .mobile-home-action {
    min-width: 0;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-home-action svg {
    flex: 0 0 auto;
    color: var(--pass-3);
  }
  .mobile-home-action:active,
  .mobile-home-action.is-active {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--pass-3) 55%, transparent);
    background: color-mix(in srgb, var(--pass-3) 12%, transparent);
  }
  .messages {
    padding-left: 0;
    padding-bottom: 14px;
    margin-right: 0 !important;
  }
  .msg-row,
  .msg-row.coding-event.local-event {
    padding: 0 16px 24px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .msg-row.user { justify-content: flex-end; }
  .remark-zone { display: none; }
  .floating-chat-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    top: auto;
    left: auto;
    z-index: 500;
    background: var(--paper-dark);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    padding: 10px;
  }
  .src-row { padding: 0 16px 24px; }
  .input-zone {
    padding: 4px 12px 12px;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #context-panel,
  #context-panel.active { display: none !important; }
  #work-row:has(#context-panel.active) .input-zone {
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #work-row:has(#context-panel.active) .messages {
    margin-right: 0 !important;
  }
  .input-row {
    border-radius: 20px;
    padding: 10px 12px 8px;
    gap: 6px;
  }
  .input-ta-wrap {
    flex-wrap: wrap;
    padding: 0;
    gap: 6px;
    border-radius: 0;
  }
  .input-ta-wrap > span[style*="width:1px"] { display: none; }
  .input-ta-wrap textarea { flex: 1 1 0; min-width: 0; order: 0; min-height: 36px; font-size: 16px; }
  .input-ta-wrap .stop-inline { order: 1; }
  .input-ta-wrap #mic-btn {
    flex: 0 0 32px;
    justify-content: center;
    padding-inline: 6px !important;
  }
  .input-ta-wrap #send-btn { order: 2; }
  #input-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }
  #input-controls .cycle-btn {
    min-width: auto !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
  }
  .composer-command-cluster,
  .composer-action-cluster {
    flex-wrap: wrap;
  }
  .composer-command-btn {
    min-height: 21px;
    padding: 2px 6px;
    font-size: 10px;
  }
  .input-underbar {
    padding: 5px 2px 0;
  }
  .input-disclaimer { display: none; }
  .thought-margin { display: none; }
  .brain-margin { display: none; }
  .journal-inline { padding: 0 0 8px; }
  .view-panel { padding: 24px 16px; }
  .chat-subnav { display: none; }
  .identity-suggest-btn { display: none; }
  #book-edge { display: none; }
  #work-right-panel { display: none; }
  #task-panel,
  #skills-panel {
    max-width: 100vw;
    box-shadow: 0 -18px 36px rgba(0,0,0,0.32);
  }
  #task-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100vw;
    height: min(88dvh, 720px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    z-index: 1200;
  }
  #task-panel.active {
    width: 100vw;
    transform: translateY(0);
  }
  #task-panel-bar {
    display: flex;
    padding: 12px 16px 9px;
  }
  #task-panel-bar::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    transform: translateX(-50%);
  }
  #task-panel-body {
    padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 28px);
  }
  #work-row:has(#task-panel.active) .messages,
  #work-row:has(#skills-panel.active) .messages,
  #work-row:has(#task-panel.active) .input-zone,
  #work-row:has(#skills-panel.active) .input-zone {
    margin-left: 0;
  }
  #task-panel-resize-handle,
  #work-row:has(#task-panel.active) #task-panel-resize-handle {
    display: none;
  }
  .mobile-task-sheet {
    position: fixed;
    inset: 0;
    z-index: 1190;
  }
  .mobile-task-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(2px);
  }
  .mobile-task-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(88dvh, 720px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 16px 16px 0 0;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 -18px 36px rgba(0,0,0,0.34);
    overflow: hidden;
  }
  .mobile-task-sheet-handle {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  .mobile-task-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    flex-shrink: 0;
  }
  .mobile-task-sheet-title {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
  }
  .mobile-task-count {
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .mobile-task-sheet-close {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1;
  }
  .mobile-task-sheet-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 18px);
  }
  .mobile-task-empty {
    padding: 28px 10px;
    text-align: center;
    color: var(--ink-dim);
    font-size: 12px;
  }
  .mobile-task-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    background: color-mix(in srgb, var(--ctx-task) 5%, transparent);
  }
  .mobile-task-item.is-covered {
    opacity: 0.62;
  }
  .mobile-task-item[data-status="complete"] {
    background: color-mix(in srgb, #6ba56b 6%, transparent);
    opacity: 0.58;
  }
  .mobile-task-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-items: center;
    padding: 11px 10px;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
  }
  .mobile-task-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
  }
  .mobile-task-meta {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .mobile-task-snippet {
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--ink) 68%, transparent);
  }
  .mobile-task-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 8px 8px 0;
  }
  .mobile-task-action {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    color: var(--ink-soft);
  }
  .mobile-task-done {
    color: #6ba56b;
    background: color-mix(in srgb, #6ba56b 10%, transparent);
    border-color: color-mix(in srgb, #6ba56b 24%, transparent);
  }
  .mobile-task-action:disabled {
    opacity: 0.38;
  }
}
@media (max-width: 768px) {
  .msg-row { padding: 0 12px 20px; }
  .src-row { padding: 0 12px 20px; }
  .input-zone { padding: 8px 12px calc(56px + env(safe-area-inset-bottom, 0px) + 12px); }
  .main-task-workbench {
    max-width: calc(100% - 24px);
    margin-top: 6px;
  }
  .view-panel { padding: 20px 12px; }
  #right-side-panel.active { width: 100vw; }
  #work-row:has(#right-side-panel.active) #work-left {
    padding-right: 0;
  }
  #work-row:has(#right-side-panel.active) .msg-row,
  #work-row:has(#right-panel.active) .msg-row {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #work-row:has(#right-side-panel.active) .input-zone,
  #work-row:has(#right-panel.active) .input-zone {
    max-width: 100%;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  #work-row:has(#right-side-panel.active) .main-task-workbench,
  #work-row:has(#right-panel.active) .main-task-workbench {
    max-width: calc(100% - 24px);
  }
  #right-panel { display: none; }
}
@media (max-width: 480px) {
  .msg-row { padding: 0 8px 16px; }
  .src-row { padding: 0 8px 16px; }
  .input-zone { padding: 6px 8px calc(56px + env(safe-area-inset-bottom, 0px) + 10px); }
  .main-task-workbench {
    max-width: calc(100% - 16px);
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 8px;
  }
  .main-task-workbench-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .toolbar { padding: 8px 12px; }
  .view-panel { padding: 16px 8px; }
  .project-bar { padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 6px; gap: 6px; }
  .project-picker-chip,
  .header-context-divider {
    display: none;
  }
  .line-picker-chip {
    display: inline-flex;
    max-width: min(48vw, 180px);
  }
  .line-picker-chip .float-line-name {
    max-width: min(32vw, 128px);
  }
  .project-bar-name { display: none; }
  .project-switcher-btn { display: none; }
  .line-tab-divider { display: none; }
  .line-tab { max-width: 96px; }
  .context { display: none; }
}

/* ── Orientation: landscape phone ───────────────────────── */
/* Thin height on a rotated phone — collapse bottom nav to compact strip,
   compress project bar, give maximum vertical room to messages */
@media (max-width: 700px) and (orientation: landscape) and (pointer: coarse) {
  .phone-bottom-nav {
    height: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .phone-nav-tab {
    flex-direction: row;
    gap: 4px;
    font-size: 9px;
    padding: 0 4px;
  }
  .phone-nav-tab svg {
    width: 16px;
    height: 16px;
  }
  .phone-nav-tab span {
    font-size: 9px;
  }
  .shell > #main-content {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .input-zone {
    padding: 3px 12px calc(40px + env(safe-area-inset-bottom, 0px) + 8px);
  }
  .shell > .project-bar {
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 10px 4px;
    gap: 5px;
  }
  .project-picker-chip,
  .header-context-divider {
    display: none;
  }
  .line-picker-chip {
    display: inline-flex;
    max-width: 160px;
  }
  .project-bar-name { display: none; }
  .project-switcher-btn { display: none; }
  .phone-context-bar {
    gap: 4px;
  }
  .phone-context-line {
    font-size: 9px;
    max-width: 90px;
  }
  .phone-context-session {
    font-size: 8px;
  }
  .messages {
    padding-bottom: 8px;
  }
  .msg-row {
    padding: 0 12px 14px;
  }
  .msg-row.user .msg-body {
    padding: 7px 10px;
    font-size: 14px;
  }
  .msg-body {
    font-size: 15px;
    line-height: 1.6;
  }
  /* Landscape phone: hide right panel, let chat use full width */
  #work-right-panel { display: none; }
}

/* ── Orientation: landscape phone — very short (keyboard up, split view) ── */
@media (max-width: 700px) and (orientation: landscape) and (max-height: 360px) and (pointer: coarse) {
  .phone-bottom-nav {
    height: 32px;
  }
  .phone-nav-tab svg {
    width: 14px;
    height: 14px;
  }
  .phone-nav-tab span {
    display: none;
  }
  .shell > #main-content {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
  .input-zone {
    padding: 2px 10px calc(32px + env(safe-area-inset-bottom, 0px) + 6px);
  }
  .shell > .project-bar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 2px);
    padding-bottom: 2px;
  }
  .phone-context-bar {
    display: none;
  }
  .messages {
    padding-bottom: 4px;
  }
  .msg-row {
    padding: 0 8px 8px;
  }
  .msg-body {
    font-size: 14px;
    line-height: 1.5;
  }
  .input-row {
    padding: 6px 8px 4px;
  }
}

/* ── Orientation: portrait tablet (tall, 7–10″) ─────────── */
/* Keep bottom nav but relax spacing — more room for context, wider content */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
  .phone-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    height: calc(52px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--paper);
    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
  }
  .shell > #main-content {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
  .input-zone {
    padding: 6px 20px calc(52px + env(safe-area-inset-bottom, 0px) + 12px);
  }
  .phone-context-bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .phone-context-line {
    font-size: 11px;
    max-width: 160px;
  }
  .phone-context-session {
    font-size: 10px;
  }
  /* Portrait tablet: context panel as slide-in from right instead of hidden */
  .context {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(55vw, 360px);
    z-index: 910;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    border-left: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: -4px 0 16px rgba(0,0,0,0.12);
  }
  .context.panel-open {
    transform: translateX(0);
  }
  .msg-row {
    max-width: 100%;
    padding: 0 24px 24px;
  }
  /* Line tabs visible on tablet portrait */
  .line-tab-bar {
    display: flex;
  }
  .line-tab-scroll {
    display: inline-flex;
  }
  .line-search-btn,
  .line-new-tab-btn {
    display: inline-flex;
  }
  .project-bar-name {
    display: inline;
  }
  .project-switcher-btn {
    display: inline-flex;
  }
}

/* ── Orientation: landscape tablet (wide, 7–10″) ─────────── */
/* Side rail instead of bottom nav — more vertical room, nav on the left edge.
   The #phone-side-rail element is shown/hidden via JS (_syncPhoneNavOrientation),
   so we only need structural CSS here — not display toggling. */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  .phone-bottom-nav {
    display: none !important;
  }
  #phone-side-rail {
    display: flex !important;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 52px;
    z-index: 900;
    background: var(--paper);
    border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    flex-direction: column;
    align-items: center;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    gap: 2px;
  }
  #phone-side-rail .phone-nav-tab {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    gap: 2px;
  }
  #phone-side-rail .phone-nav-tab span {
    display: none;
  }
  #phone-side-rail .phone-nav-tab svg {
    width: 20px;
    height: 20px;
  }
  .shell {
    grid-template-columns: 52px 1fr;
  }
  .shell > .project-bar {
    grid-column: 1 / -1;
  }
  #work-left,
  .shell > #main-content {
    padding-bottom: 0;
  }
  .input-zone {
    padding: 6px 20px 12px;
  }
  .phone-context-bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .phone-context-line {
    font-size: 10px;
    max-width: 140px;
  }
  /* Landscape tablet: context panel as slide-in from right */
  .context {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(45vw, 340px);
    z-index: 910;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    border-left: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: -4px 0 16px rgba(0,0,0,0.12);
  }
  .context.panel-open {
    transform: translateX(0);
  }
  .msg-row {
    max-width: 100%;
    padding: 0 20px 20px;
  }
  #work-right-panel { display: none; }
}

/* ── Work right panel ────────────────────────────────────── */
#work-right-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 240px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 3;
  pointer-events: none;
}
#work-right-panel::-webkit-scrollbar { display: none; }
.right-panel-line {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-height: 16px;
}
.right-panel-session {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  min-height: 14px;
}
.right-panel-arc {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink-mid);
  min-height: 20px;
}
.right-panel-ring {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
@media (max-width: 900px) {
  #work-right-panel { display: none; }
}

/* ── Hub views (Lines) ───────────────────────────────────── */
.hub-view { padding: 40px 32px; }

/* ── Library view: 3-tab layout ─────────────────────────── */
.lib-view {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.lib-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 20px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tab {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 14px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lib-tab:hover { color: var(--ink-soft); }
.lib-tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; letter-spacing: 0.1em; }
.lib-section {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  gap: 0;
}
.lib-section.active { display: flex; }
.lib-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Sessions view ───────────────────────────────────── */
.sessions-view {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.sv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  flex-shrink: 0;
}
.sv-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.sv-break-section {
  padding: 0 20px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.sv-break-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 8px;
}
.sv-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sess-chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  letter-spacing: 0.04em;
}
.sess-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.sess-chip.active { border-color: var(--pass-3); color: var(--pass-3); background: rgba(154,122,26,0.08); }
body.dark .sess-chip.active { background: rgba(196,160,48,0.1); }
.sv-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sv-loading, .sv-empty, .sv-error {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-ghost);
  letter-spacing: 0.06em;
  padding: 20px;
}
.sv-card {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.sv-card:hover { background: rgba(28,26,22,0.04); border-color: var(--ink-dim); }
body.dark .sv-card:hover { background: rgba(212,207,197,0.06); }
.sv-card-active { border-color: var(--pass-3) !important; }
.sv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.sv-card-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-ghost);
  text-transform: uppercase;
}
.sv-badge-open, .sv-badge-closed {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 10px;
  text-transform: uppercase;
}
.sv-badge-open  { color: var(--pass-3); background: rgba(154,122,26,0.1); }
body.dark .sv-badge-open { background: rgba(196,160,48,0.1); }
.sv-badge-closed { color: var(--ink-ghost); background: rgba(128,128,128,0.08); }
.sv-card-name {
  font-family: var(--serif);
  font-size: var(--text-sm);
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.35;
}
.sv-card-date {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-ghost);
}
.sv-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s;
}
.sv-card:hover .sv-card-actions { opacity: 1; }
.sv-action-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-dim);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  line-height: 1;
}
.sv-action-btn:hover { color: var(--ink); border-color: var(--ink-dim); }
.sv-action-delete:hover { color: #c44; border-color: #c44; }
body.dark .sv-action-btn { background: var(--charcoal); }

/* ── Line cards (lines view) ─────────────────────────── */
#lines-list { display: flex; flex-direction: column; gap: 18px; padding: 4px 0; overflow-y: auto; }
.lines-overview-section { display: flex; flex-direction: column; gap: 7px; }
.lines-overview-heading {
  margin: 0;
  color: var(--ink-dim);
  font: 600 9px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lines-overview-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.line-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  background: none;
  color: var(--ink);
  transition: background 0.12s, border-color 0.12s;
  width: 100%;
}
.line-card:hover { background: rgba(28,26,22,0.04); border-color: var(--ink-dim); }
body.dark .line-card:hover { background: rgba(212,207,197,0.06); }
.line-card-active { border-color: var(--ink-soft); }
/* Universal line continuity — labeled activity signal for lines with an active stream.
   Shares the open-tab activity language but reads at a glance with a word, so the
   meaning no longer hides in a hover tooltip. */
.line-card-streaming { border-color: var(--ink-soft); }
.line-card-status {
  --line-card-status-color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
}
.line-card-status-orb {
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--line-card-status-color);
  animation: lineCardStatusSpin 0.9s linear infinite;
}
.line-card-status:not(.line-card-status-running) .line-card-status-orb {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
  border: 0;
  background: var(--line-card-status-color);
  animation: none;
}
.line-card-status-text {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--line-card-status-color);
  animation: lineCardStatusBreathe 1.8s ease-in-out infinite;
}
.line-card-status:not(.line-card-status-running) .line-card-status-text { animation: none; }
@keyframes lineCardStatusSpin { to { transform: rotate(360deg); } }
@keyframes lineCardStatusBreathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .line-card-status-orb { animation: none; border-color: var(--line-card-status-color); border-right-color: transparent; }
  .line-card-status-text { animation: none; opacity: 0.85; }
}
.line-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.line-card-header-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.line-card-title { font-family: var(--serif); font-size: var(--text-md); color: var(--ink); flex: 1; }
.line-card-open-btn {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.line-card-open-btn:hover { color: var(--ink-soft); }
.line-card-open-btn:focus-visible,
.line-card-plan:focus-visible,
.line-card-plans-toggle:focus-visible,
.line-card-mention:focus-visible {
  outline: 2px solid var(--ink-dim);
  outline-offset: 3px;
}
.line-card-visibility,
.line-card-plans-label,
.line-card-mention-meta {
  color: var(--ink-dim);
  font: 600 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.line-card-visibility { padding: 2px 0; }
.line-card-plans { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.line-card-plan-items { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 2px; }
.line-card-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
}
.line-card-plan:hover .line-card-plan-title { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.line-card-plan-title { font: 12px/1.35 var(--sans); }
.line-card-plan-snippet,
.line-card-mention-snippet {
  color: var(--ink-dim);
  font: 11px/1.45 var(--sans);
}
.line-card-plan-snippet { max-width: 72ch; }
.line-card-plans-toggle {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink-dim);
  font: 10px var(--sans);
  cursor: pointer;
}
.line-card-plans-toggle:hover { color: var(--ink); }
.line-card-mention {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-dark);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.line-card-mention:hover { border-color: var(--ink-dim); }
.line-card-mention:disabled { cursor: wait; opacity: 0.7; }
.line-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-ghost);
  font: var(--text-xs) var(--mono);
  letter-spacing: 0.04em;
}
.line-card-meta-separator { opacity: 0.7; }
.lines-overview-search-state {
  padding: 10px 0;
  color: var(--ink-dim);
  font: 11px/1.4 var(--sans);
}
.line-detail-count { font-family: var(--serif); font-size: 20px; color: var(--ink); min-width: 28px; }
.hub-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.hub-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hub-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: background 0.12s, border-color 0.12s;
  width: 100%;
}
.hub-card:hover { background: var(--paper-dark); border-color: var(--ink-dim); }
.hub-card svg { flex-shrink: 0; color: var(--ink-soft); }
.hub-card-name {
  font-family: var(--mono);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
  min-width: 80px;
}
.hub-card-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--ink-soft);
}
.hub-card-upload {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 3px 10px;
  margin-left: auto;
  transition: color 0.15s, border-color 0.15s;
}
.hub-card-upload:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}

/* ── Welcome block ───────────────────────────────────────── */
#welcome-block {
  max-width: 560px;
  margin: 40px auto 48px;
  padding: 0 8px;
}
.welcome-quote {
  font-family: var(--serif);
  font-size: var(--text-md);
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.75;
  margin-bottom: 10px;
}
.welcome-attribution {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 10px;
}
.welcome-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 28px 0;
}
.welcome-body {
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink-soft);
  line-height: 1.65;
}
.welcome-body p { margin: 0 0 14px; }
.welcome-body ul {
  margin: 0 0 14px;
  padding-left: 18px;
}
.welcome-body li { margin-bottom: 5px; }

/* ── Onboarding block (in-chat) ───────────────────────────── */
#onboard-block {
  max-width: none;
  margin: 0;
  padding: 0 0 160px;
}
#onboard-msg { padding-bottom: 6px !important; }
#onboard-msg .src-row { padding-bottom: 6px; }
.onboard-header span {
  font-family: var(--sans);
  font-size: var(--text-xl); font-weight: 500;
  color: var(--ink);
}
.onboard-trial-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(79, 168, 150, 0.35);
  border-radius: 2px;
  padding: 3px 8px;
}
.onboard-messages {
  flex: 1; overflow-y: auto; display: flex;
  flex-direction: column; gap: var(--space-5);
  padding: 8px 0; margin-bottom: 16px;
}
.onboard-msg {
  max-width: 85%; padding: 10px 14px;
  border-radius: 12px; line-height: 1.55;
  font-family: var(--serif);
  font-size: var(--text-md); color: var(--ink);
}
.onboard-msg-assistant {
  align-self: flex-start;
  background: var(--rule);
}
.onboard-msg-user {
  align-self: flex-end;
  background: rgba(184, 150, 11, 0.12);
}
.onboard-input-zone {
  display: flex; gap: var(--space-3); align-items: flex-end;
}
#onboard-input {
  flex: 1; resize: none; border: 1px solid var(--rule);
  background: transparent; color: var(--ink);
  font-family: var(--serif); font-size: var(--text-md);
  padding: 10px 14px; border-radius: 12px;
  outline: none; line-height: 1.5;
}
#onboard-input:focus { border-color: var(--ink-soft); }
#onboard-send {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); padding: 8px;
  display: flex; align-items: center;
}
#onboard-send:hover { color: var(--ink); }
#onboard-send:disabled { opacity: 0.3; cursor: default; }

/* Onboarding quote */
.onboard-quote {
  font-family: var(--serif);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.75;
  margin-bottom: 8px;
}
.onboard-quote-attr {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 10px;
  font-style: normal;
}
.onboard-quote-attr::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--rule);
  margin: 28px auto 0;
}

/* Path choice */
.onboard-path-choice {
  display: flex; flex-direction: column; gap: var(--space-5);
  align-items: center; justify-content: center;
  flex: 1;
}
.onboard-path-btn {
  width: 100%; max-width: 400px; padding: 20px 24px;
  background: transparent; border: 1px solid var(--rule);
  border-radius: 12px; cursor: pointer;
  text-align: left; transition: border-color 0.2s;
}
.onboard-path-btn:hover { border-color: #b8960b; }
.onboard-path-btn strong {
  display: block; font-family: var(--sans);
  font-size: var(--text-md); color: var(--ink); margin-bottom: 6px;
}
.onboard-path-btn span {
  font-family: var(--serif);
  font-size: var(--text-sm); color: var(--ink-dim);
}

/* BYOK setup form */
.onboard-setup { padding: 0 4px; }
.onboard-back-btn {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  display: block;
  transition: color 0.15s;
}
.onboard-back-btn:hover { color: var(--ink-soft); }
.onboard-form h3 {
  font-family: var(--sans);
  font-size: var(--text-lg); font-weight: 500;
  color: var(--ink); margin: 0 0 16px;
}
.onboard-form label {
  display: block; font-family: var(--sans);
  font-size: var(--text-sm); color: var(--ink-soft);
  margin: 12px 0 4px; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.onboard-form input {
  width: 100%; padding: 10px 12px;
  background: transparent; border: 1px solid var(--rule);
  border-radius: 8px; color: var(--ink);
  font-family: var(--sans); font-size: var(--text-md);
  outline: none; box-sizing: border-box;
}
.onboard-form input:focus { border-color: var(--ink-soft); }
.onboard-hint {
  font-family: var(--serif);
  font-size: var(--text-sm); color: var(--ink-soft);
  margin: 8px 0 20px; line-height: 1.5;
}
.onboard-activate-btn {
  width: auto;
  padding: 11px 44px;
  display: block;
  margin: 0 auto;
  background: rgba(242, 238, 230, 0.05);
  border: 1px solid rgba(242, 238, 230, 0.18);
  border-radius: 6px; color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-md); font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.onboard-activate-btn:hover { background: rgba(242,238,230,0.09); border-color: rgba(242,238,230,0.3); }
.onboard-activate-btn:disabled { opacity: 0.5; cursor: default; }
.onboard-error {
  font-family: var(--sans);
  font-size: var(--text-md); color: #c44; margin: 8px 0 0;
}
.onboard-choice-btn {
  display: block; width: 100%; padding: 10px 14px;
  background: transparent; border: 1px solid var(--rule);
  border-radius: 8px; color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--text-md); cursor: pointer;
  margin-bottom: 8px; text-align: left;
  transition: border-color 0.15s, color 0.15s;
}
.onboard-choice-btn:hover { border-color: var(--ink-soft); }
.onboard-choice-active {
  border-color: rgba(184, 150, 11, 0.5);
  color: var(--ink);
  background: rgba(184, 150, 11, 0.06);
}
.onboard-choice-desc {
  font-family: var(--serif);
  font-size: var(--text-sm); color: var(--ink-soft);
  line-height: 1.5; margin: 4px 0 16px;
}
.onboard-recovery-key {
  font-family: monospace; font-size: var(--text-md);
  color: var(--ink); background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 12px 14px; word-break: break-all;
  line-height: 1.6; user-select: all; margin: 12px 0;
}

/* === SECTION: landing-auth === */
/* Owner: landing-auth — landing overlay, login/signup form, onboarding block, welcome block. */
/* ── Landing overlay ──────────────────────────────────── */
#landing-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
#landing-overlay::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; }
@keyframes landing-fade-out { from { opacity: 1; } to { opacity: 0; } }
#landing-welcome { display: contents; }
#landing-overlay .arrival { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 780px; padding: 0 40px; margin-top: 8vh; }
#landing-overlay .quote { font-family: var(--serif); font-style: italic; font-size: 1.45rem; line-height: 1.8; text-align: center; color: rgba(236, 233, 225, 0.84); letter-spacing: 0.01em; margin-bottom: 16px; }
#landing-overlay .highlight { color: #b8960b; font-style: italic; }
#landing-overlay .quote-source { font-family: var(--sans); font-size: 0.72rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 233, 225, 0.7); margin-bottom: 80px; }
#landing-overlay .description { font-family: var(--sans); font-size: 0.98rem; font-weight: 300; color: rgba(236, 233, 225, 0.75); letter-spacing: 0.02em; margin-bottom: 64px; text-align: center; }
#landing-overlay .enter { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.18em; color: rgba(236, 233, 225, 0.82); background: none; border: none; cursor: pointer; padding: 18px 56px; position: relative; transition: color 0.6s ease; }
#landing-overlay .enter:hover { color: #b8960b; }
#landing-overlay .enter::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: #b8960b; transition: width 0.6s ease; }
#landing-overlay .enter:hover::after { width: 60%; }
#landing-overlay .side-signals { position: fixed; right: 36px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 44px; z-index: 2; }
#landing-overlay .signal { display: flex; align-items: center; gap: var(--space-4); flex-direction: row-reverse; opacity: 0; animation: signal-arrive 1.2s ease forwards; position: relative; }
#landing-overlay .signal:nth-child(1) { animation-delay: 2.0s; }
#landing-overlay .signal:nth-child(2) { animation-delay: 2.4s; }
#landing-overlay .signal:nth-child(3) { animation-delay: 2.8s; }
#landing-overlay .signal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#landing-overlay .signal-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236, 233, 225, 0.68); white-space: nowrap; transition: color 0.4s ease; }
#landing-overlay .signal:hover .signal-label { color: rgba(236, 233, 225, 0.95); }
#landing-overlay .signal-memory .signal-dot { background: none; width: 16px; height: 16px; border: 1.5px solid rgba(184, 150, 11, 0.35); border-top-color: rgba(184, 150, 11, 0.7); animation: memory-breathe 4s ease-in-out infinite; }
#landing-overlay .signal-searching .signal-dot { background: rgba(106, 138, 109, 0.5); animation: search-pulse 3s ease-in-out infinite; box-shadow: 0 0 6px rgba(106, 138, 109, 0.15); }
#landing-overlay .signal-alive .signal-dot { background: rgba(184, 150, 11, 0.4); animation: alive-beat 5s ease-in-out infinite; }
#landing-overlay .signal-tooltip { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%); background: rgba(20, 20, 20, 0.92); border: 1px solid rgba(236, 233, 225, 0.08); padding: 9px 16px; border-radius: 4px; font-family: var(--sans); font-size: 0.78rem; font-weight: 300; color: rgba(236, 233, 225, 0.75); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#landing-overlay .signal:hover .signal-tooltip { opacity: 1; }
#landing-overlay .ambient { position: fixed; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(184, 150, 11, 0.03) 0%, transparent 70%); top: 45%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; animation: ambient-breathe 8s ease-in-out infinite; }
#landing-overlay .bottom-mark { position: fixed; bottom: 28px; left: 28px; display: flex; flex-direction: column; align-items: flex-start; z-index: 1; }
#landing-overlay .lo-wordmark { font-family: var(--sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(236, 233, 225, 0.48); margin-bottom: 6px; }
#landing-overlay .lo-tagline { font-family: var(--serif); font-size: var(--text-md); font-style: italic; text-transform: none; color: rgba(236, 233, 225, 0.35); }
@keyframes signal-arrive { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes memory-breathe { 0%, 100% { border-top-color: rgba(184, 150, 11, 0.3); transform: rotate(0deg); } 50% { border-top-color: rgba(184, 150, 11, 0.7); transform: rotate(180deg); } }
@keyframes search-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 30% { opacity: 0.7; transform: scale(1.3); } 60% { opacity: 0.15; transform: scale(0.8); } }
@keyframes alive-beat { 0%, 100% { transform: scale(1); opacity: 0.35; } 8% { transform: scale(1.5); opacity: 0.8; } 16% { transform: scale(1); opacity: 0.35; } 24% { transform: scale(1.3); opacity: 0.6; } 32% { transform: scale(1); opacity: 0.35; } }
@keyframes ambient-breathe { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
@media (max-width: 640px) { #landing-overlay .quote { font-size: 1.3rem; } #landing-overlay .side-signals { right: 14px; gap: 28px; } #landing-overlay .signal-label { display: none; } }
.landing-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 24px; border-bottom: 1px solid rgba(236,233,225,0.1); }
.landing-tab { background: none; border: none; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236,233,225,0.35); cursor: pointer; padding: 0 0 10px; margin: 0 16px; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.landing-tab.active { color: rgba(236,233,225,0.82); border-bottom-color: rgba(236,233,225,0.5); }
.landing-tab:hover { color: rgba(236,233,225,0.6); }
.landing-link-btn {
  background: none; border: none; font-family: var(--mono); font-size: var(--text-xs);
  color: var(--ink-dim); cursor: pointer; letter-spacing: 0.07em;
  transition: color 0.15s; display: block; margin: 0 auto 10px;
}
.landing-link-btn:hover { color: var(--ink-soft); }
.landing-signin-link {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}
.landing-signin-link:hover { color: var(--ink-soft); }
.landing-form {
  text-align: left;
  width: 320px;
  position: relative;
}
.landing-back-btn {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  margin-bottom: 28px;
  display: block;
  transition: color 0.15s;
  text-align: center;
  width: 100%;
}
.landing-back-btn:hover { color: var(--ink-soft); }
.landing-form label {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.landing-form input {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-md);
  outline: none;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.landing-form input:focus { border-color: var(--ink-soft); }
.landing-hint {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-dim);
  margin: -8px 0 16px;
  line-height: 1.5;
}
.landing-submit {
  display: block;
  width: 100%;
  padding: 13px 0;
  background: var(--ink);
  border: none;
  border-radius: 7px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.landing-submit:hover { opacity: 0.82; }
.landing-submit:disabled { opacity: 0.5; cursor: default; }
.landing-error {
  font-family: var(--sans);
  font-size: var(--text-md);
  color: #c44;
  margin: 10px 0 0;
}
.landing-confirm {
  text-align: center;
  padding: 20px 0;
}
#landing-overlay mark {
  background: rgba(230, 200, 100, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
body.dark #landing-overlay mark {
  background: rgba(230, 200, 100, 0.2);
}

/* ── Guide ref links + highlight (used in chat for [[ui:key|text]] refs) ── */
.explorer-ref {
  color: var(--gold); cursor: pointer;
  border-bottom: 1px dotted rgba(184,150,11,0.4);
  transition: all 0.15s;
}
.explorer-ref:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.explorer-highlight {
  animation: explorerGlow 2.5s ease-out forwards;
  position: relative; z-index: 100;
}
@keyframes explorerGlow {
  0%   { box-shadow: 0 0 0 3px rgba(184,150,11,0.6), 0 0 16px rgba(184,150,11,0.3); }
  60%  { box-shadow: 0 0 0 2px rgba(184,150,11,0.3), 0 0 8px rgba(184,150,11,0.1); }
  100% { box-shadow: none; }
}

/* ── Universal pulse gesture — AI attention signal ──────── */
@keyframes gi-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,150,11,0.7); transform: scale(1); }
  35%  { box-shadow: 0 0 0 7px rgba(184,150,11,0.25); transform: scale(1.1); }
  70%  { box-shadow: 0 0 0 12px rgba(184,150,11,0); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(184,150,11,0); transform: scale(1); }
}
.gi-pulse {
  animation: gi-pulse 0.65s ease-out 3;
  border-radius: 6px;
  position: relative;
  z-index: 100;
}
@keyframes gi-pulse-green {
  0%   { box-shadow: 0 0 0px 0px rgba(74,173,124,0); border-color: transparent; }
  12%  { box-shadow: 0 0 8px 2px rgba(74,173,124,0.55); border-color: rgba(74,173,124,0.7); }
  88%  { box-shadow: 0 0 8px 2px rgba(74,173,124,0.55); border-color: rgba(74,173,124,0.7); }
  100% { box-shadow: 0 0 0px 0px rgba(74,173,124,0); border-color: transparent; }
}
.gi-pulse-green {
  animation: gi-pulse-green 7s ease-in-out 1 forwards;
  border-radius: 6px;
}
@keyframes gi-pulse-red {
  0%   { box-shadow: 0 0 0px 0px rgba(210,80,80,0); border-color: transparent; }
  12%  { box-shadow: 0 0 8px 2px rgba(210,80,80,0.55); border-color: rgba(210,80,80,0.7); }
  88%  { box-shadow: 0 0 8px 2px rgba(210,80,80,0.55); border-color: rgba(210,80,80,0.7); }
  100% { box-shadow: 0 0 0px 0px rgba(210,80,80,0); border-color: transparent; }
}
.gi-pulse-red {
  animation: gi-pulse-red 7s ease-in-out 1 forwards;
  border-radius: 6px;
}

/* ── Pulse view ─────────────────────────────────────────── */
.pulse-section {
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  margin-bottom: 12px;
}
.pulse-section-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pulse-section[data-probe="tensions"]  .pulse-section-title { color: #c4533a; }
.pulse-section[data-probe="questions"] .pulse-section-title { color: #5b8dd9; }
.pulse-section[data-probe="decisions"] .pulse-section-title { color: #4aad7c; }
.pulse-section[data-probe="threads"]   .pulse-section-title { color: #9b6bce; }
.pulse-section[data-probe="stuck"]     .pulse-section-title { color: #d07830; }
.pulse-section[data-probe="momentum"]  .pulse-section-title { color: #3aadad; }

.pulse-section-body {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink);
}
.pulse-section-body.pulse-loading {
  min-height: 1.4em;
  min-width: 60%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rule) 25%, var(--paper) 50%, var(--rule) 75%);
  background-size: 200% 100%;
  animation: pulse-shimmer 1.6s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes pulse-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* @sas claim: Unauthenticated landing — hides every signed-in UI element so the landing iframe shows alone (sidebar, project bar, book edge, side panels, chat input pill row, brain icon, identity icon, mic, stop, scroll-down, thought margin, AI disclaimer). terms: body.no-auth, project-block, book-edge, input-controls, brain-margin, identity-suggest-btn, mic-btn, stop-btn, scroll-down-btn, thought-margin, input-disclaimer id: css:body-no-auth-hide-chrome timestamp: 2026-05-09T13:30:00Zlive: true */
body.no-auth aside, body.no-auth #project-block, body.no-auth #book-edge, body.no-auth #panel-view-slot, body.no-auth #work-right-panel, body.no-auth #left-panel, body.no-auth #chat-subnav, body.no-auth #session-chart, body.no-auth #chat-thumb, body.no-auth #input-controls, body.no-auth #brain-margin, body.no-auth #identity-suggest-btn, body.no-auth #mic-btn, body.no-auth #stop-btn, body.no-auth #thought-margin, body.no-auth #scroll-down-btn, body.no-auth #main-task-workbench, body.no-auth .input-disclaimer, body.no-auth .input-zone, body.no-auth .input-row, body.no-auth .file-chips, body.no-auth #right-panel, body.no-auth #right-panel-resize-handle, body.no-auth #right-side-panel, body.no-auth #panel-resize-handle, body.no-auth #context-panel, body.no-auth #context-panel-resize-handle, body.no-auth #scope-orb-wrap, body.no-auth .work-row > *:not(.work-left), body.no-auth .work-left > *:not(#chat-main-shell), body.no-auth .messages > *:not(#landing-frame-wrap) { display: none !important; }
/* @sas claim: When body.no-auth, app shell collapses to a single column and main content takes full width so the landing iframe fills the viewport. terms: body.no-auth, app-shell, main-content, grid-template-columns id: css:body-no-auth-shell-layout timestamp: 2026-05-09T13:30:00Zlive: true */
body.no-auth #app-shell { grid-template-columns: 1fr !important; }
body.no-auth #main-content { width: 100% !important; }
/* @sas claim: Landing iframe messages row clears side margins so it fills full width regardless of context-panel state. terms: body.no-auth, messages, margin-right, padding-left id: css:body-no-auth-messages-fullwidth timestamp: 2026-05-09T13:30:00Zlive: true */
body.no-auth .messages { margin-right: 0 !important; padding-left: 0 !important; }
body.no-auth #chat-main-shell .messages { padding: 0 !important; }

/* === SECTION: inline-artifacts === */
/* Owner: inline-artifacts — diagrams (Mermaid), charts (ECharts), presentations, mind maps, timelines, formulas, concept maps. */
/* ── Diagrams (Mermaid) ──────────────────────────────── */
.meshy-asset-card {
  margin: 12px 0;
  padding: 0;
  max-width: 820px;
  overflow: hidden;
  color: #e7e6e1;
  background: #151815;
  border: 1px solid rgba(224, 221, 211, 0.14);
  border-radius: 16px;
}
.model3d-chat-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
}
.model3d-chat-reference-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.model3d-chat-reference-title {
  overflow: hidden;
  color: #e7e6e1;
  font: 600 var(--text-sm)/1.25 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model3d-chat-reference-state {
  color: #918f87;
  font: var(--text-xs)/1.3 var(--mono);
}
.model3d-chat-reference-activate {
  flex: 0 0 auto;
}
.meshy-asset-surface {
  height: clamp(300px, 42vh, 440px);
  min-height: 300px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  margin: var(--space-3);
  border: 1px solid rgba(224, 221, 211, 0.12);
  border-radius: 12px;
}
.model3d-viewer-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #111512;
}
.model3d-viewer-surface::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(230, 218, 188, 0.08), transparent 43%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.018), transparent 34%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(to right,
      rgba(224, 221, 211, 0.07) 0 1px,
      transparent 1px 16px,
      rgba(224, 221, 211, 0.032) 16px 17px,
      transparent 17px 32px,
      rgba(224, 221, 211, 0.032) 32px 33px,
      transparent 33px 48px,
      rgba(224, 221, 211, 0.032) 48px 49px,
      transparent 49px 64px),
    repeating-linear-gradient(to bottom,
      rgba(224, 221, 211, 0.07) 0 1px,
      transparent 1px 16px,
      rgba(224, 221, 211, 0.032) 16px 17px,
      transparent 17px 32px,
      rgba(224, 221, 211, 0.032) 32px 33px,
      transparent 33px 48px,
      rgba(224, 221, 211, 0.032) 48px 49px,
      transparent 49px 64px);
  /* Both tiers in one 64px module per axis, anchored at the corner. As four separately tiled
     layers centred in the box, each tier took its own centring offset — (W-16)/2 against
     (W-64)/2 — so the heavy rule sat 8px off the fine grid and bisected a cell instead of landing
     on one, and an odd box size put every rule on a half-pixel (measured: rows 15,16,17px apart,
     majors 64 then 65). One module, one origin, integer positions: square cells at any size. */
  background-position: 0 0;
}
.model3d-viewer-surface model-viewer {
  position: relative;
  z-index: 1;
  display: block;
}
/* === SECTION: model3d-light === */
.model3d-light-layer {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}
.model3d-light-toggle:not(.model3d-shelf-tool),
.model3d-light-handle {
  position: absolute;
  pointer-events: auto;
  border: 1px solid var(--border);
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.model3d-light-toggle:not(.model3d-shelf-tool) {
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.model3d-light-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.model3d-light-toggle:not(.model3d-shelf-tool)[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
}
.model3d-light-toggle[aria-pressed="true"] .model3d-light-toggle-dot {
  background: #f0c56b;
  box-shadow: 0 0 8px rgba(240, 197, 107, 0.72);
  opacity: 1;
}
.model3d-light-handle {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border-color: rgba(255, 239, 196, 0.84);
  background: #f0c56b;
  box-shadow: 0 0 0 4px rgba(240, 197, 107, 0.16), 0 3px 12px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
}
.model3d-light-toggle:not(.model3d-shelf-tool):focus-visible,
.model3d-light-handle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.model3d-light-handle:active {
  cursor: grabbing;
}
.model3d-light-handle[hidden] {
  display: none;
}
.model3d-viewer-surface.marking .model3d-light-layer,
.model3d-viewer-surface.is-sculpting .model3d-light-layer {
  visibility: hidden;
  pointer-events: none;
}
.model3d-scale-bar {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 5px 7px 6px;
  color: rgba(241, 238, 230, 0.88);
  background: rgba(9, 12, 13, 0.72);
  border-radius: 5px;
  font: 500 10px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.model3d-scale-bar[hidden] { display: none; }
.model3d-scale-bar-label { white-space: nowrap; }
.model3d-scale-bar-rule {
  position: relative;
  display: block;
  height: 6px;
  box-sizing: border-box;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  opacity: 0.9;
}
.model3d-scale-bar-rule::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 3px;
  border-left: 1px solid currentColor;
}
/* On the card the scale is plain text over a thin rule, in the card's own type, with no box. A
   thin dark outline keeps text and rule readable when the part sits behind them. */
.model3d-shelf-plain-viewer .model3d-scale-bar {
  left: 12px;
  bottom: 11px;
  gap: 4px;
  padding: 0;
  color: rgba(241, 238, 230, 0.8);
  background: none;
  font-family: var(--sans);
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95));
}
.model3d-touch-still {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: #111512;
}
.model3d-touch-still[hidden] { display: none; }
.model3d-touch-still img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.model3d-touch-still span {
  position: absolute;
  bottom: 12px;
  left: 50%;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(241, 238, 230, 0.82);
  background: rgba(9, 12, 13, 0.78);
  font: 600 11px/1 var(--sans);
  transform: translateX(-50%);
}
.model3d-touch-still.is-empty span {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.model3d-viewer-surface.is-model3d-touch-released model-viewer,
.model3d-shelf-plain-viewer.is-model3d-touch-released model-viewer,
.rail-model3d-surface.is-model3d-touch-released model-viewer {
  cursor: grab;
}
.model3d-viewer-surface.is-model3d-touch-live model-viewer,
.model3d-shelf-plain-viewer.is-model3d-touch-live model-viewer,
.rail-model3d-surface.is-model3d-touch-live model-viewer {
  cursor: grabbing;
}
.model3d-viewer-surface.is-sculpting model-viewer {
  cursor: none;
  touch-action: none;
}
.model3d-live-sculpt-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background: #111512;
  cursor: none;
  touch-action: none;
}
.model3d-live-sculpt-layer[hidden] { display: none; }
.model3d-live-sculpt-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}
.model3d-sculpt-cursor {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border: 1px solid rgba(238, 244, 248, 0.92);
  border-radius: 50%;
  background: rgba(122, 171, 204, 0.12);
  box-shadow: 0 0 0 1px rgba(11, 21, 32, 0.72);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* A 3D model filling the work-rail preview tile. */
.rail-model3d-surface {
  flex: 1;
  min-width: 0;
  min-height: 260px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  border-radius: 5px;
}
/* === SECTION: model3d-mark-layer === */
.model3d-mark-host {
  position: relative;
}
.model3d-mark-host.marking model-viewer {
  cursor: crosshair;
  touch-action: none;
}
.model3d-mark-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-1);
  max-width: calc(100% - 122px);
  padding: var(--space-2);
  background: rgba(27, 30, 27, 0.9);
  border: 1px solid rgba(224, 221, 211, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}
.model3d-mark-bar.is-measure-only {
  max-width: calc(100% - 16px);
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
}
.model3d-mark-bar.is-measure-only .model3d-mark-mode {
  min-width: 0;
  height: 26px;
  padding-inline: 8px;
  font-size: 11px;
  border-radius: 5px;
}
.model3d-mark-bar button[hidden] {
  display: none;
}
.model3d-mark-bar[hidden] { display: none; }
.model3d-mark-bar.is-shelf-tools {
  max-width: calc(100% - 16px);
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
}
.model3d-mark-bar.is-shelf-tools button {
  min-width: 0;
  height: 28px;
  padding-inline: 7px;
  font-size: 11px;
}
.model3d-card-controls {
  position: static;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  color: #aaa9a3;
  pointer-events: auto;
}
.model3d-card-size-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.model3d-card-controls .model3d-card-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  color: #aaa9a3;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  opacity: 1;
  cursor: pointer;
}
.model3d-card-control-label {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
}
.model3d-card-controls :is(.model3d-minimize-action, .model3d-unpin-action) {
  width: 40px;
  padding: 0;
}
.model3d-card-controls .model3d-card-control:hover,
.model3d-card-controls .model3d-card-control:focus-visible {
  color: #f3f1eb;
  background: rgba(232, 226, 210, 0.09);
}
.model3d-card-controls .model3d-shelf-more { display: flex; }
.model3d-card-controls .model3d-shelf-more-trigger {
  flex: 0 0 40px;
  width: 40px;
  padding: 0;
}
.model3d-card-controls .model3d-shelf-more-trigger svg {
  display: block;
  width: 14px;
  height: 14px;
}
.model3d-card-controls .model3d-pin-action.is-pinned {
  color: var(--accent, #c8a24a);
  background: color-mix(in srgb, var(--accent, #c8a24a) 10%, transparent);
}
.model3d-mark-bar button,
.model3d-mark-bar select {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  color: #aaa9a3;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.model3d-mark-bar .is-labeled {
  width: auto;
  min-width: 48px;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}
.model3d-marks-toggle[hidden] { display: none; }
.model3d-mark-bar button:hover,
.model3d-mark-bar select:hover {
  color: #f3f1eb;
  background: rgba(232, 226, 210, 0.09);
}
.model3d-mark-bar button:disabled {
  opacity: 0.38;
  cursor: default;
}
.model3d-mark-mode.on {
  color: #fff7ec;
  background: rgba(188, 121, 82, 0.24);
  border-color: rgba(220, 151, 106, 0.42);
}
.model3d-mark-bar [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 12;
  right: 0;
  top: calc(100% + 7px);
  width: max-content;
  max-width: 170px;
  padding: 5px 7px;
  pointer-events: none;
  color: #eef4f8;
  background: #111d2b;
  border: 1px solid rgba(149, 173, 194, 0.22);
  border-radius: 5px;
  font: 10px/1.25 var(--sans);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.model3d-mark-bar [data-tooltip]:hover::after,
.model3d-mark-bar [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
/* The geometry outline is repainted from where model-viewer actually puts the pins. */
.model3d-mark-ink {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.model3d-ink-line {
  fill: none;
  stroke: var(--accent, #c8a24a);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.model3d-ink-line.intent-change {
  fill: color-mix(in srgb, var(--accent, #c8a24a) 14%, transparent);
}
.model3d-ink-line.intent-keep {
  fill: none;
  stroke: #70b989;
  stroke-dasharray: 2 3;
  stroke-width: 3;
}
.model3d-ink-line.intent-remove {
  fill: color-mix(in srgb, #b85b4d 16%, transparent);
  stroke: #dc745f;
  stroke-dasharray: 8 3;
}
.model3d-ink-line.intent-reference {
  fill: none;
  stroke: #6fa7d8;
  stroke-dasharray: 1 5;
}
.model3d-ink-line.intent-name {
  fill: color-mix(in srgb, #6b9fd4 12%, transparent);
  stroke: #aa8bd4;
  stroke-width: 1.5;
}
.model3d-ink-line.state-historical {
  opacity: 0.48;
}
.model3d-mark-ink polygon.model3d-ink-line {
  fill: color-mix(in srgb, var(--accent, #c8a24a) 12%, transparent);
}
.model3d-mark-ink polygon.intent-keep { fill: color-mix(in srgb, #70b989 12%, transparent); }
.model3d-mark-ink polygon.intent-remove { fill: color-mix(in srgb, #dc745f 12%, transparent); }
.model3d-mark-ink polygon.intent-reference { fill: color-mix(in srgb, #6fa7d8 12%, transparent); }
.model3d-mark-ink polygon.intent-name { fill: color-mix(in srgb, #aa8bd4 12%, transparent); }
.model3d-ink-line.air {
  stroke-dasharray: 5 4;
  opacity: 0.8;
}
/* The Area boundary still under the hand — drawn from raw screen samples before pins exist. */
.model3d-ink-line.wet {
  stroke-width: 2.5;
  opacity: 0.6;
}
.model3d-measure-hotspot {
  display: block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  background: var(--accent, #c8a24a);
  border: 2px solid var(--paper, #14120f);
  border-radius: 50%;
  pointer-events: none;
}
.model3d-measure-line {
  fill: none;
  stroke: var(--accent, #c8a24a);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 3;
  pointer-events: none;
}
.model3d-measure-label {
  fill: var(--ink, #f1eee6);
  stroke: var(--paper, #14120f);
  stroke-width: 5px;
  paint-order: stroke fill;
  text-anchor: middle;
  font: 600 11px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.model3d-measure-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 8px;
  max-width: calc(100% - 112px);
  padding: 6px 9px;
  color: var(--ink, #f1eee6);
  background: color-mix(in srgb, var(--paper, #14120f) 92%, transparent);
  border-radius: 5px;
  font: 11px/1.3 var(--sans);
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
}
.model3d-mark-pin {
  width: 20px;
  height: 20px;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper, #14120f);
  background: var(--accent, #c8a24a);
  border: 1px solid color-mix(in srgb, var(--paper, #14120f) 45%, transparent);
  border-radius: 50%;
  cursor: pointer;
  overflow: visible;
}
.model3d-mark-pin-number { pointer-events: none; }
.model3d-part-name-label {
  position: absolute;
  left: 24px;
  top: 50%;
  min-width: max-content;
  padding: 3px 6px;
  color: #eef4f8;
  background: rgba(9, 17, 28, 0.9);
  border: 1px solid rgba(149, 173, 194, 0.24);
  border-radius: 5px;
  font: 10px/1.2 var(--sans);
  letter-spacing: 0.01em;
  pointer-events: none;
  transform: translateY(-50%);
}
/* A name near the right edge opens back into the card instead of running off it. */
.model3d-mark-pin[data-label-side="left"] > .model3d-part-name-label {
  right: 24px;
  left: auto;
}
.model3d-part-name-hotspot {
  display: block;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-width: 1px;
  cursor: default;
  opacity: 1;
  pointer-events: none;
  transition: opacity 100ms linear;
}
.model3d-part-name-hotspot[data-covered="true"] { opacity: 0; }
.model3d-mark-pin.model3d-part-name-hotspot[data-intent="name"] { border-radius: 50%; }
.model3d-part-name-hotspot .model3d-part-name-label {
  left: 13px;
  width: max-content;
  min-width: 0;
  max-width: 144px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.model3d-part-name-hotspot[data-label-side="left"] .model3d-part-name-label {
  right: 13px;
  left: auto;
}
.model3d-mark-pin[data-intent="keep"] { background: #70b989; }
.model3d-mark-pin[data-intent="remove"] { background: #dc745f; }
.model3d-mark-pin[data-intent="reference"] { background: #6fa7d8; }
.model3d-mark-pin[data-intent="name"] { background: #aa8bd4; }
.model3d-mark-pin[data-state="historical"] { opacity: 0.5; }
.model3d-mark-pin.air {
  color: var(--accent, #c8a24a);
  background: color-mix(in srgb, var(--paper, #14120f) 70%, transparent);
  border: 1px dashed var(--accent, #c8a24a);
}
.model3d-mark-pin[data-intent="keep"] {
  border: 2px double var(--accent, #c8a24a);
}
.model3d-mark-pin[data-intent="remove"] {
  border-radius: 2px;
}
.model3d-mark-pin[data-intent="reference"] {
  background: transparent;
  border-style: dotted;
}
.model3d-mark-pin[data-intent="name"] {
  border-radius: 50% 50% 50% 0;
}
.model3d-mark-pin[data-state="historical"] {
  opacity: 0.42;
}
/* Only the head of an Area wears the number; the boundary trail is plain dots. */
.model3d-mark-pin.trail {
  width: 9px;
  height: 9px;
  font-size: 0;
  cursor: default;
}
/* On the card beside chat the pins step back: a smaller marker, and the part name as plain text
   with a shadow instead of a dark box. */
.model3d-shelf-plain-viewer .model3d-mark-pin:not(.trail):not(.model3d-part-name-hotspot) {
  width: 15px;
  height: 15px;
  font: 600 9px/1 var(--sans);
}
.model3d-shelf-plain-viewer .model3d-mark-pin:not(.model3d-part-name-hotspot) > .model3d-part-name-label {
  left: 19px;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  background: none;
  border: 0;
  font: 500 10.5px/1 var(--sans);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
}
.model3d-shelf-plain-viewer .model3d-mark-pin:not(.model3d-part-name-hotspot)[data-label-side="left"] > .model3d-part-name-label {
  right: 19px;
  left: auto;
}
.model3d-mark-list {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 42px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 42%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--paper, #14120f) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  border-radius: 4px;
}
/* One line per mark (user decision 2026-09-25): the number wears its pin's colour and shape, the
   name takes the free room, then its meaning, and hide and delete show when you point at the row. */
.model3d-mark-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
  padding: 3px 3px 3px 6px;
  border-radius: 7px;
}
.model3d-mark-row:hover,
.model3d-mark-row:focus-within {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.model3d-mark-row[data-state="historical"] { opacity: 0.58; }
.model3d-mark-row[data-state="hidden"] { opacity: 0.38; }
.model3d-mark-tag {
  display: inline-grid;
  flex: 0 0 16px;
  place-items: center;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  font: 600 9px/1 var(--sans);
  color: var(--paper, #14120f);
  background: var(--accent, #c8a24a);
  border-radius: 50%;
}
.model3d-mark-row[data-intent="keep"] > .model3d-mark-tag { background: #70b989; }
.model3d-mark-row[data-intent="remove"] > .model3d-mark-tag { background: #dc745f; border-radius: 2px; }
.model3d-mark-row[data-intent="reference"] > .model3d-mark-tag { background: #6fa7d8; }
.model3d-mark-row[data-intent="name"] > .model3d-mark-tag {
  background: #aa8bd4;
  border-radius: 50% 50% 50% 0;
}
.model3d-mark-row input[type="text"] {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  padding: 2px 0;
  font: 500 12.5px/1.3 var(--sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
}
.model3d-mark-row input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}
.model3d-mark-row input[type="text"]:focus {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 34%, transparent);
}
/* The meaning is quiet text with a small caret, not a boxed field: on each row, and in Next mark. */
.model3d-mark-intent,
.model3d-mark-next-intent {
  flex: 0 0 auto;
  max-width: 88px;
  padding: 2px 11px 2px 0;
  font: 400 11px/1.2 var(--sans);
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  background: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 5px center, right 2px center;
  background-size: 3px 3px;
  background-repeat: no-repeat;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.model3d-mark-intent:hover,
.model3d-mark-intent:focus-visible,
.model3d-mark-next-intent { color: var(--ink); }
/* A native list takes its colours from the field, so a light word would open on a white list. */
.model3d-mark-intent option,
.model3d-mark-next-intent option {
  color: var(--ink);
  background: var(--paper, #14120f);
}
body.dark :is(.model3d-mark-intent, .model3d-mark-next-intent) { color-scheme: dark; }
.model3d-part-color {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 4px;
  cursor: pointer;
}
.model3d-part-color::-webkit-color-swatch-wrapper { padding: 2px; }
.model3d-part-color::-webkit-color-swatch { border: 0; border-radius: 2px; }
.model3d-mark-state,
.model3d-mark-drop {
  display: inline-grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
}
.model3d-mark-state svg { width: 14px; height: 14px; }
.model3d-mark-drop svg { width: 12px; height: 12px; }
/* A hidden or already-sent mark keeps its eye or its reuse arrow in view: it says the row's state. */
.model3d-mark-row:hover > :is(.model3d-mark-state, .model3d-mark-drop),
.model3d-mark-row:focus-within > :is(.model3d-mark-state, .model3d-mark-drop),
.model3d-mark-row:not([data-state="current"]) > .model3d-mark-state {
  opacity: 1;
}
.model3d-mark-state:hover,
.model3d-mark-state:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.model3d-mark-drop:hover,
.model3d-mark-drop:focus-visible {
  color: #f09a89;
  background: color-mix(in srgb, #dc745f 12%, transparent);
}
/* Pointing at a row lights its pin on the model. */
.model3d-mark-pin.is-lit {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.34);
}
@media (hover: none) {
  .model3d-mark-state,
  .model3d-mark-drop { opacity: 1; }
}
@media (pointer: coarse) {
  .model3d-mark-bar button,
  .model3d-mark-bar select,
  .model3d-mark-state,
  .model3d-mark-drop {
    min-height: 34px;
  }
  .model3d-mark-list {
    max-height: 52%;
  }
}
/* === END SECTION: model3d-mark-layer === */

/* === SECTION: model3d-mark-review === */
.model3d-mark-review {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  min-height: 28px;
  padding: 7px 9px;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper, #14120f) 91%, transparent);
  border: 1px solid color-mix(in srgb, var(--rule) 65%, transparent);
  border-radius: 4px;
}
@media (max-width: 700px) {
  .model3d-mark-bar { left: 8px; }
}
/* === END SECTION: model3d-mark-review === */

.model3d-mark-panel {
  display: grid;
  gap: 6px;
}
/* Next mark shows only while drawing, as one plain line above the list. */
.model3d-mark-settings {
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.model3d-mark-settings[hidden] { display: none; }
.model3d-mark-setting {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font: 400 11px/1.3 var(--sans);
}
/* In a panel the list sits on the background: no box and no borders. */
.model3d-mark-panel > .model3d-mark-list {
  position: static;
  inset: auto;
  width: auto;
  max-height: 150px;
  gap: 1px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
/* The foot: saved version, mark visibility and Clear all as quiet text. */
.model3d-mark-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 6px 0 7px;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font: 400 11px/1.4 var(--sans);
}
.model3d-mark-foot > .model3d-mark-review {
  position: static;
  min-height: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}
.model3d-mark-cover-all,
.model3d-mark-clear {
  flex: 0 0 auto;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.model3d-mark-clear:hover,
.model3d-mark-clear:focus-visible { color: #f09a89; }
.model3d-mark-cover-all:hover,
.model3d-mark-cover-all:focus-visible { color: var(--ink); }

/* === SECTION: model3d-part-list === */
/* Parts (user request 2026-09-25): one row per separate body in the model file, in Full view's left
   column and under the card beside chat. The whole row is its show/hide switch and wears the eye a
   mark row's hide button wears; a hidden part's name steps back. Show all is the quiet text at the
   foot, the way Clear all is for marks. */
.model3d-part-list { display: grid; gap: 2px; }
.model3d-part-row-container { display: flex; align-items: center; min-width: 0; }
.model3d-part-menu-button {
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 30px;
  padding: 0;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.model3d-part-menu-button svg { width: 16px; height: 16px; }
.model3d-part-menu-button:hover,
.model3d-part-menu-button[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.model3d-part-menu-button:focus-visible { outline: 2px solid var(--accent, #c8a24a); outline-offset: 1px; }
.model3d-part-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 3px 6px;
  color: var(--ink);
  font: 500 12.5px/1.3 var(--sans);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.model3d-part-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.model3d-part-row:focus-visible { outline: 2px solid var(--accent, #c8a24a); outline-offset: 1px; }
.model3d-part-eye {
  display: inline-grid;
  flex: 0 0 16px;
  place-items: center;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.model3d-part-eye svg { width: 14px; height: 14px; }
.model3d-part-row:hover .model3d-part-eye { color: var(--ink); }
.model3d-part-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model3d-part-row[aria-checked="false"] .model3d-part-name {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
/* Naming rows (user decision 2026-09-26): on the card beside chat the row splits — the eye alone
   is the switch, and the name is its own button that renames in place. */
.model3d-part-row.is-namable { padding: 0; cursor: default; }
.model3d-part-toggle {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-height: 30px;
  padding: 3px 4px 3px 6px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.model3d-part-toggle:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.model3d-part-toggle:focus-visible { outline: 2px solid var(--accent, #c8a24a); outline-offset: 1px; }
.model3d-part-toggle:hover .model3d-part-eye { color: var(--ink); }
.model3d-part-row.is-namable .model3d-part-name {
  min-height: 30px;
  padding: 3px 6px 3px 4px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: text;
}
.model3d-part-row.is-namable .model3d-part-name:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.model3d-part-row.is-namable .model3d-part-name:focus-visible { outline: 2px solid var(--accent, #c8a24a); outline-offset: 1px; }
.model3d-part-row[data-shown="false"] .model3d-part-name {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.model3d-part-rename {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 26px;
  padding: 2px 6px;
  color: var(--ink);
  font: 500 12.5px/1.3 var(--sans);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 6px;
}
.model3d-part-rename:focus { outline: none; border-color: var(--accent, #c8a24a); }
.model3d-part-show-all {
  justify-self: start;
  padding: 2px 6px 0 7px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font: 400 11px/1.4 var(--sans);
  background: none;
  border: 0;
  cursor: pointer;
}
.model3d-part-show-all[hidden] { display: none; }
.model3d-part-show-all:hover,
.model3d-part-show-all:focus-visible { color: var(--ink); }
/* Right-click on a part row (user request 2026-09-26): colours, show/hide, dim the rest, solo.
   The menu wears the ⋮ menu's clothes but rides the pointer, so it sits fixed on the screen,
   above Full view. */
.model3d-part-menu {
  position: fixed;
  z-index: 12000;
  display: grid;
  width: 178px;
  padding: 5px;
  background: #141816;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 9px;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.92);
}
.model3d-part-menu-colors {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px 9px;
}
.model3d-part-menu-color {
  width: 16px;
  height: 16px;
  padding: 0;
  background: var(--swatch, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 50%;
  cursor: pointer;
}
/* The first swatch is the part's own colour: the printed-part grey with a slash, meaning "no
   colour worn over it". */
.model3d-part-menu-color.is-own-color {
  background: linear-gradient(135deg, transparent 44%, #10403a 44%, #10403a 56%, transparent 56%), #9aa3ab;
}
.model3d-part-menu-color.is-active {
  outline: 2px solid var(--accent, #c8a24a);
  outline-offset: 1px;
}
.model3d-part-menu-color:hover,
.model3d-part-menu-color:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 55%, transparent);
  outline-offset: 1px;
}
/* === END SECTION: model3d-part-list === */

/* === SECTION: artifact-shelf === */
/* The panel takes the room the chat doesn't need (user decision 2026-09-25): as wide as it can be
   while the chat column keeps its full width, from 310px up to 480px. The chat's rows keep 54px
   empty on their left; the panel reaches 22px into that, so 32px stay between the card and the chat.
   --artifact-shelf-chat-side is the room the transcript keeps free on its right. */
.artifact-shelf {
  --artifact-shelf-chat-side: 0px;
  --artifact-shelf-headline-height: 28px;
  --artifact-shelf-gap: 14px;
  flex: 0 0 auto;
  width: clamp(310px, calc(100% + 10px - var(--chat-frame-width, 740px) - 2 * var(--chat-frame-gutter, 54px) - var(--artifact-shelf-chat-side)), 480px);
  min-width: 0;
  max-height: calc(100% - 24px);
  margin: 12px -22px 12px 12px;
  padding: 0;
  gap: var(--artifact-shelf-gap);
  overflow: auto;
  align-self: flex-start;
  container-type: inline-size;
}
#work-row:has(#context-panel.collapsed) .artifact-shelf { --artifact-shelf-chat-side: 6px; }
#work-row:has(#context-panel.active) .artifact-shelf { --artifact-shelf-chat-side: var(--cp-width); }
/* Side panels lay the chat out their own way; beside them the panel keeps its earlier size. */
#work-row:has(#task-panel.active, #terminal-panel.active, #skills-panel.active, #right-side-panel.active, #right-panel.active) .artifact-shelf:not(.is-model-chip-only) {
  width: clamp(310px, 25vw, 390px);
  margin-right: 0;
}
@media (min-width: 701px) {
  /* The header arrow switches between the original card and the fixed equal split. */
  #work-row:has(#artifact-shelf:not([hidden]):not(.is-model-chip-only)) #work-right-panel { display: none; }
  #work-row.has-card-split:not(:has(#task-panel.active, #terminal-panel.active, #skills-panel.active, #right-side-panel.active, #right-panel.active)) .artifact-shelf:not(.is-model-chip-only) {
    width: calc(var(--card-split-width) - 24px);
    margin: 12px;
    transition: none;
  }
  #work-row.has-card-split:not(:has(#task-panel.active, #terminal-panel.active, #skills-panel.active, #right-side-panel.active, #right-panel.active)):has(#artifact-shelf:not([hidden]):not(.is-model-chip-only)) #work-left > :is(.input-zone, .line-diff-control-slot) {
    width: calc(100% - var(--card-split-width) - var(--card-split-context-width) - 48px) !important;
    max-width: var(--chat-frame-width, 740px) !important;
    margin-left: auto !important;
    margin-right: calc(var(--card-split-context-width) + 24px) !important;
  }
  #work-row.has-card-split:not(:has(#task-panel.active, #terminal-panel.active, #skills-panel.active, #right-side-panel.active, #right-panel.active)):has(#artifact-shelf:not([hidden]):not(.is-model-chip-only)) #chat-main-shell .msg-row {
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  #work-row:not(.has-card-split):not(:has(#task-panel.active, #terminal-panel.active, #skills-panel.active, #right-side-panel.active, #right-panel.active)):has(#artifact-shelf:not([hidden]):not(.is-model-chip-only)) #work-left > :is(.input-zone, .line-diff-control-slot) {
    width: min(var(--chat-frame-width), calc(100% - 408px)) !important;
    max-width: min(var(--chat-frame-width), calc(100% - 408px)) !important;
  }
  #work-row:not(.has-card-split):not(:has(#task-panel.active, #terminal-panel.active, #skills-panel.active, #right-side-panel.active, #right-panel.active)):has(#artifact-shelf:not([hidden]):not(.is-model-chip-only)):has(#context-panel.active) #work-left > :is(.input-zone, .line-diff-control-slot) {
    width: min(var(--chat-frame-width), calc(100% - var(--cp-width) - 408px)) !important;
    max-width: min(var(--chat-frame-width), calc(100% - var(--cp-width) - 408px)) !important;
  }
  /* With both stepped aside, the room under the chat's row beside them is the panel's too, so it
     runs down to the window's foot instead of stopping above the strip: the card's Parts and Marks
     lists need that room (user request 2026-09-25). app.js measures it as
     --artifact-shelf-room-below. */
  #work-row:not(:has(#task-panel.active, #terminal-panel.active, #skills-panel.active, #right-side-panel.active, #right-panel.active)) .artifact-shelf:not(.is-model-chip-only) {
    max-height: calc(100% - 24px + var(--artifact-shelf-room-below, 0px));
  }
}
/* The chat's per-exchange sketches live in the margin the open panel reaches into; like the
   exchange marks strip, they step aside while it is there. */
#chat-main-shell:has(> #artifact-shelf:not([hidden]):not(.is-model-chip-only)) .exchange-sketch { display: none; }
/* The shelf is part of the chat's space, not a second sidebar. It is an <aside>, so the generic
   aside rules would give it the nav bar's darker fill and lit right edge; what sits on it floats on
   the chat's own background instead (user decision 2026-09-24). The id outranks body.dark aside. */
#artifact-shelf { background: transparent; }
#artifact-shelf::after { content: none !important; }
.artifact-shelf.is-model-chip-only {
  flex-basis: auto;
  width: min(260px, 23vw);
  max-height: none;
  margin-right: 0;
  overflow: visible;
}
/* The whole panel's title (user decisions 2026-09-25): a handwritten face, not the app's UI type,
   on the same left line as the card's tools, one line high (20px, the line as high as the card's
   28px buttons that ride on it). The panel's own gap spaces it from what follows. Tucked away, the
   panel is only the slim bar, and the title would take back the room tucking freed. A long card
   name is cut with "…" and rides the pointer whole. */
.artifact-shelf-headline {
  display: flex;
  min-width: 0;
  height: var(--artifact-shelf-headline-height);
  margin: 0;
  padding: 0 12px;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  font: 500 20px/1.1 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  line-height: var(--artifact-shelf-headline-height);
  white-space: nowrap;
}
.artifact-shelf-headline-journal { flex: none; }
/* The handwritten letters reach a little past their own boxes; the padding keeps the last one whole
   where the "…" cut clips. */
.artifact-shelf-headline-name {
  flex: 0 1 auto;
  min-width: 0;
  padding-right: 0.15em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
.artifact-shelf.is-model-chip-only .artifact-shelf-headline { display: none; }
.artifact-shelf[hidden],
.draft-card-shelf[hidden],
.shelf-reference-shelf[hidden],
.image-artifact-shelf[hidden],
.model3d-card-shelf[hidden] { display: none !important; }
.artifact-shelf > section:not([hidden]) + section:not([hidden]) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
}
.artifact-shelf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.artifact-shelf-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.artifact-shelf-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.artifact-shelf-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 172px;
  max-height: 240px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 82%, #000 18%);
}
.artifact-shelf-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.artifact-shelf-thumb > * { min-height: 0 !important; }
.artifact-shelf-thumb .mermaid-diagram { width: 100%; height: 100%; padding: 14px !important; overflow: hidden !important; }
.artifact-shelf-label {
  display: block;
  padding: 7px 8px;
  overflow: hidden;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-card-grid { display: grid; gap: 8px; }
.draft-card-shell { position: relative; min-width: 0; }
.draft-card {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 116px;
  padding: 14px 14px 36px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink) 2%);
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 9px;
  cursor: pointer;
}
.draft-card:hover { border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.draft-card-title {
  overflow: hidden;
  font: 600 12px/1.35 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-card-preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font: 11px/1.5 var(--sans);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.draft-card-controls { right: 6px; bottom: 6px; }
.draft-card-chip { width: 100%; }
/* Everything this card can show is one list on one quiet row, so the block carries no frame of
   its own: no panel fill and no rule above it to fence it off from the card it sits on. */
.model3d-pinned-history {
  display: grid;
  gap: 6px;
  padding: 8px 12px 10px;
}
.model3d-pinned-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
/* The arrows belong to the list they step, so they never wrap away from it. The list yields its
   width instead, which is why it can be cut with an ellipsis. */
.model3d-pinned-history-navigation {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}
.model3d-pinned-history-navigation > .model3d-pinned-history-nav { flex: 0 0 auto; }
.model3d-pinned-history-lane {
  min-width: 0;
  color: var(--ink-dim);
  font: 500 11px/1.2 var(--sans);
  white-space: normal;
}
.model3d-pinned-history.is-error .model3d-pinned-history-note { color: #dc745f; }
/* The list names the version or study on screen, so it is held to the row and cut with an
   ellipsis rather than pushing the action beside it onto a line of its own. */
.model3d-pinned-history-position {
  flex: 0 1 auto;
  max-width: 190px;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-dim);
  font: 520 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* It has to read as the same quiet text while still being the way into the list: the name of what
   is on screen and a small caret, no box. It is as wide as that name, and max-width catches long
   ones. No blue frame (user decision 2026-09-25): a keyboard sees a soft highlight instead. */
.model3d-pinned-history-position.is-jump {
  position: relative;
  min-height: 28px;
  padding: 0 22px 0 8px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.model3d-pinned-history-position.is-jump::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 6px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.model3d-pinned-history-position.is-jump:hover:not(:disabled),
.model3d-pinned-history-position.is-jump.is-open,
.model3d-pinned-history-position.is-jump:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  outline: none;
}
.model3d-pinned-history-position.is-jump:disabled { opacity: 0.42; cursor: default; }
/* The list the counter opens is the app's own: the card's dark menu surface, as wide as the row it
   rises from, no blue anywhere, and a tick on the one on screen. It opens up over the model and
   drops down only when the row has no room above it. */
.model3d-pinned-history-navigation { position: relative; }
.model3d-pinned-history-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  max-height: 320px;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #141816;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.92);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
.model3d-pinned-history-list[hidden] { display: none; }
.model3d-pinned-history-list.opens-down { top: calc(100% + 6px); bottom: auto; }
.model3d-pinned-history-list:focus { outline: none; }
.model3d-pinned-history-list-group + .model3d-pinned-history-list-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.model3d-pinned-history-list-group-name {
  padding: 7px 9px 4px;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  font: 600 11px/1 var(--sans);
}
/* A long name wraps instead of being cut: the counter above it is cut to one line, so this list is
   where a name is read whole, even in Full view's narrow panel. */
.model3d-pinned-history-list-item {
  position: relative;
  min-height: 30px;
  padding: 6px 28px 6px 9px;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font: 500 12px/18px var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  border-radius: 6px;
  cursor: pointer;
}
.model3d-pinned-history-list-item[aria-selected="true"] { color: var(--ink); }
.model3d-pinned-history-list-item.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.model3d-pinned-history-list-item[aria-selected="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 9px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.model3d-pinned-history-nav,
.model3d-pinned-history-action {
  min-height: 28px;
  padding: 0 8px;
  overflow: hidden;
  color: var(--ink-soft);
  font: 560 11px/1 var(--sans);
  white-space: nowrap;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.model3d-pinned-history-nav {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--ink-dim);
  background: none;
  border-radius: 6px;
}
.model3d-pinned-history-nav svg { width: 14px; height: 14px; }
.model3d-pinned-history-nav:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.model3d-pinned-history-nav:hover,
.model3d-pinned-history-action:hover { color: var(--ink); }
.model3d-pinned-history-nav:focus-visible,
.model3d-pinned-history-action:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  outline: none;
}
.model3d-pinned-history-nav:disabled,
.model3d-pinned-history-action:disabled { opacity: 0.42; cursor: default; }
.model3d-pinned-history-note {
  margin: 0;
  color: var(--ink-soft);
  font: 11px/1.4 var(--sans);
}
/* The one press that can change this card keeps its whole label; the list beside it is what gives
   way. It stays a wrapping row so a second press, if one is ever added, drops cleanly. */
.model3d-pinned-history-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.model3d-pinned-history-action {
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding-inline: 6px;
}
.model3d-pinned-history-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
@media (pointer: coarse) {
  .model3d-pinned-history-action { min-height: 44px; }
  .model3d-pinned-history-nav { min-width: 44px; min-height: 44px; }
}
.model3d-shelf-chip {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  color: #d9d8d2;
  background: #121413;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 999px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14);
}
.model3d-shelf-chip-restore {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 10px;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  overflow: hidden;
}
.model3d-shelf-chip-kind {
  flex: 0 0 auto;
  color: #8f8e88;
  font: 9px/1 var(--mono);
  letter-spacing: 0.08em;
}
.model3d-shelf-chip-title {
  min-width: 0;
  overflow: hidden;
  font: 11px/1.2 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model3d-shelf-chip-remove {
  flex: 0 0 28px;
  height: 28px;
  padding: 0;
  color: #8f8e88;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.model3d-shelf-chip-restore:hover,
.model3d-shelf-chip-remove:hover { color: #f3f1eb; }
/* Only the model sits in a box (user decision 2026-09-24). The card itself has no fill and no
   edge, so its name row above the box and its version row under it float on the chat's own
   background. */
.model3d-shelf-plain-card {
  position: relative;
  isolation: isolate;
}
/* A status line under the title strip. GI's own pinned card no longer builds one (user decision
   2026-09-24); the customer print app's card still wears it. It carries the accent warning
   colours only while the card is showing a shape study. */
.model3d-shelf-card-status {
  position: relative;
  z-index: 4;
  min-height: 26px;
  padding: 6px 11px;
  color: #aaa9a3;
  font: 650 11px/1.25 var(--sans);
  background: #0d100f;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.model3d-shelf-card-status.is-shape-study {
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  background: color-mix(in srgb, var(--accent) 9%, #0d100f);
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
/* One row, the same height for every model: a long name is cut with "…" and the full name rides
   the pointer, so the controls never drop onto a second row. It floats over the box, and the name
   starts on the same line as the side name, the scale and the ‹ arrow. */
.model3d-shelf-plain-head {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 0 0 12px;
}
.model3d-shelf-plain-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 600 12px/1.2 var(--sans);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model3d-shelf-plain-head > .model3d-card-build-signal { margin-right: 1px; }
.model3d-shelf-plain-controls {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  gap: 2px;
}
.model3d-shelf-plain-controls .model3d-card-control {
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font: 500 12px/1 var(--sans);
  border-radius: 6px;
}
/* Full view is the icon alone here; its name stays on the button for the pointer and screen readers. */
.model3d-shelf-plain-controls .model3d-card-control-label { display: none; }
.model3d-shelf-plain-controls .model3d-view-expand {
  padding: 0 7px;
  color: var(--ink-soft);
  background: transparent;
  border-color: transparent;
}
.model3d-shelf-plain-controls .model3d-card-layout-toggle {
  width: 28px;
  padding: 0;
  color: var(--ink-soft);
}
.model3d-card-layout-toggle svg {
  width: 15px;
  height: 15px;
}
#work-row.has-card-split .model3d-card-layout-toggle svg { transform: rotate(180deg); }
.model3d-shelf-plain-controls :is(.model3d-minimize-action, .model3d-unpin-action) {
  width: 28px;
  padding: 0;
}
.model3d-shelf-plain-controls :is(.model3d-minimize-action, .model3d-unpin-action) svg {
  width: 14px;
  height: 14px;
}
.model3d-shelf-plain-controls .model3d-card-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .model3d-card-layout-toggle { display: none !important; }
}
.model3d-shelf-more { position: relative; }
.model3d-shelf-plain-controls .model3d-shelf-more-trigger {
  width: 26px;
  padding: 0;
}
.model3d-shelf-more-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 6;
  display: grid;
  width: 178px;
  padding: 5px;
  background: #141816;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 9px;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.92);
}
.model3d-shelf-more-menu[hidden] { display: none !important; }
.model3d-shelf-more-action {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  color: var(--ink-soft);
  font: 560 11px/1 var(--sans);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.model3d-shelf-more-action svg { width: 14px; height: 14px; flex: 0 0 14px; }
.model3d-shelf-more-action:hover,
.model3d-shelf-more-action:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Shared tool row; Full view keeps it above the model. The shelf card overlays it below. */
.model3d-shelf-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  margin-bottom: 4px;
  padding: 0 0 0 4px;
}
/* User decision 2026-09-26: the shelf tools sit inside the model's top-right corner.
   Keep the row outside the viewer's DOM so repainting the model cannot remove its controls. */
.model3d-shelf-plain-card > .model3d-shelf-tools {
  position: relative;
  top: 12px;
  z-index: 4;
  justify-content: flex-end;
  align-items: flex-start;
  height: 0;
  margin: 0;
  padding: 0 12px;
  pointer-events: none;
}
.model3d-tools-menu {
  position: relative;
  pointer-events: auto;
}
.model3d-tools-menu-panel {
  position: absolute;
  top: 0;
  right: 100%;
  display: flex;
  gap: 2px;
  padding-right: 4px;
  width: max-content;
}
.model3d-tools-menu-panel[hidden] { display: none; }
.model3d-shelf-tools .model3d-tools-toggle,
.model3d-tools-menu-panel {
  color: var(--ink);
  background: var(--bg);
  border-radius: 6px;
}
.model3d-shelf-tools .model3d-tools-toggle.is-active {
  color: #70b989;
}
/* Tools toggle: the word gives way to a lock on hover, and to a fold chevron once locked open. */
.model3d-shelf-tools .model3d-tools-toggle { position: relative; }
.model3d-tools-toggle-icon {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.model3d-tools-toggle-icon svg { width: 16px; height: 16px; }
.model3d-tools-toggle-fold svg { width: 12px; height: 12px; stroke-width: 1.3; opacity: .55; }
.model3d-shelf-tools .model3d-tools-menu.is-locked .model3d-tools-toggle { background: transparent; }
.model3d-shelf-tools .model3d-tools-menu.is-locked .model3d-tools-toggle:hover .model3d-tools-toggle-fold svg { opacity: 1; }
.model3d-tools-menu:hover:not(.is-locked) .model3d-tools-toggle-lock,
.model3d-tools-menu:not(.is-locked) .model3d-tools-toggle:focus-visible .model3d-tools-toggle-lock,
.model3d-tools-menu.is-locked .model3d-tools-toggle-fold { display: flex; }
.model3d-tools-menu:hover .model3d-tools-toggle-word,
.model3d-tools-menu .model3d-tools-toggle:focus-visible .model3d-tools-toggle-word,
.model3d-tools-menu.is-locked .model3d-tools-toggle-word { visibility: hidden; }
.model3d-tools-menu .model3d-shelf-tools-done {
  margin-left: 0;
}
.model3d-shelf-plain-card > .model3d-shelf-plain-viewer .model3d-mark-bar {
  top: 48px;
}
.model3d-shelf-tools .model3d-shelf-tool {
  display: inline-flex;
  align-items: center;
  height: 28px;
  min-height: 0;
  padding: 0 8px;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font: 500 12px/1 var(--sans);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.model3d-shelf-tools .model3d-shelf-tool.is-icon {
  position: relative;
  justify-content: center;
  width: 30px;
  padding: 0;
}
.model3d-shelf-tools .model3d-shelf-tool-icon {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
}
.model3d-shelf-tools .model3d-shelf-tool.is-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 50%;
  width: max-content;
  padding: 5px 7px;
  color: #f1eee6;
  background: #242824;
  border: 1px solid rgba(224, 221, 211, 0.16);
  border-radius: 5px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -2px);
  transition: opacity 110ms ease, transform 110ms ease;
}
.model3d-shelf-tools .model3d-shelf-tool.is-icon:first-child::after {
  left: 0;
  transform: translateY(-2px);
}
.model3d-shelf-tools .model3d-shelf-tool.is-icon:hover::after,
.model3d-shelf-tools .model3d-shelf-tool.is-icon:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.model3d-shelf-tools .model3d-shelf-tool.is-icon:first-child:hover::after,
.model3d-shelf-tools .model3d-shelf-tool.is-icon:first-child:focus-visible::after {
  transform: translateY(0);
}
.model3d-shelf-tools .model3d-shelf-tool:hover:not(:disabled),
.model3d-shelf-tools .model3d-shelf-tool:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.model3d-shelf-tools .model3d-shelf-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model3d-shelf-tools .model3d-shelf-tool[aria-pressed="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 11%, transparent);
}
.model3d-shelf-tools .model3d-shelf-tool.is-icon[aria-pressed="true"] {
  color: #70b989;
  background: color-mix(in srgb, #70b989 14%, transparent);
}
.model3d-shelf-tools .model3d-shelf-tool:disabled { opacity: .45; cursor: default; }
.model3d-shelf-tools .model3d-shelf-tools-done { margin-left: auto; }
.model3d-shelf-tools .model3d-shelf-tools-done[hidden] { display: none; }
/* The model's box is the card's only box: one black, a hairline edge and round corners. It takes
   the room the old status rows had, and its floor grid fades out before it reaches the box's edges. */
.model3d-shelf-plain-viewer {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: clamp(340px, 46vh, 400px);
  min-height: 340px;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(#121413, #0b0d0c);
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 12px;
}
.model3d-shelf-plain-viewer.model3d-viewer-surface::before {
  background:
    radial-gradient(ellipse 60% 48% at 50% 58%, rgba(255, 255, 255, 0.045), transparent 70%),
    repeating-linear-gradient(to right, rgba(224, 221, 211, 0.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, rgba(224, 221, 211, 0.05) 0 1px, transparent 1px 32px);
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 35%, transparent 100%);
}
.model3d-shelf-plain-versions {
  display: grid;
  gap: 0;
  padding: 0;
}
.model3d-shelf-plain-versions:empty { display: none; }
/* Under the box the current study reads as a caption, then one quiet control line handles history
   (user decision 2026-09-25): the name says what is on screen, the figures and caret open the list,
   and the two arrows stay together at the far end. On the card the text starts on the box's left
   line, where Parts and Marks start too; the card in chat wears the same row inside its own padding.
   A stored version has no separate name, so it keeps only the control line. The card carries no
   print wording (user decision 2026-09-24). The customer print app copies none of these rules: its
   row keeps GI's base dress above. */
.model3d-shelf-plain-versions .model3d-pinned-history { gap: 2px; padding: 7px 0 0; }
.model3d-card-version-slot .model3d-pinned-history { padding: 8px 4px 10px; }
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1px;
}
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
  font: 560 12px/17px var(--sans);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-name[hidden] { display: none; }
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-controls {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 28px;
}
/* The list rises from the whole row, so the row is what it is placed against. */
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-navigation {
  position: static;
  flex: 0 1 auto;
  width: max-content;
  max-width: calc(100% - 56px);
  gap: 0;
  justify-content: flex-start;
}
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-position.is-jump {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 108px;
  min-height: 28px;
  margin-left: -6px;
  padding: 0 27px 0 6px;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  font: 500 11px/1 var(--sans);
  white-space: nowrap;
}
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-count {
  font-variant-numeric: tabular-nums;
}
/* A version has no name of its own, so its figures become the primary line. */
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-position.is-unnamed .model3d-pinned-history-count {
  font-size: 12px;
}
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-position.is-unnamed {
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-steps {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-steps[hidden] { display: none; }
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-actions { margin-left: auto; }
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-actions + .model3d-pinned-history-steps { margin-left: 2px; }
.model3d-shelf-plain-versions .model3d-pinned-history-steps { margin-right: -7px; }
:is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-nav { min-width: 28px; min-height: 28px; }
@media (pointer: coarse) {
  :is(.model3d-shelf-plain-versions, .model3d-card-version-slot) .model3d-pinned-history-nav { min-width: 44px; min-height: 44px; }
}
.model3d-shelf-plain-versions .model3d-pinned-history-lane { display: none; }
.model3d-shelf-plain-versions .model3d-pinned-history-note { padding: 0 0 2px; }
.model3d-card-version-slot :is(.model3d-pinned-history-lane, .model3d-pinned-history-note) { padding: 0 8px; }
/* While the card is the drawing surface it owns the only Back on screen, so the version
   block steps aside instead of offering a second one, and the lists under it go with it. */
.model3d-shelf-plain-card:has(.model3d-card-sketch-home) :is(.model3d-shelf-plain-versions, .model3d-shelf-plain-lists) { display: none; }
/* GI's own panel only; the customer print app copies the card rules above but not these.
   Beside chat the model's box is 5:4, with room below for the study name and lists.
   Short windows cap its height; the existing 340px floor keeps narrow boxes usable. */
#artifact-shelf .model3d-shelf-plain-viewer {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  max-height: calc(100dvh - 240px);
}
/* Parts and Marks under the version row (user request 2026-09-25), in the look Full view's left column
   gives them: a clickable heading with its count, then the rows when opened. Empty lists stay hidden.
   The panel scrolls as a whole, so the marks list may run longer than a mark panel's usual 150px. */
.model3d-shelf-plain-lists {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}
.model3d-shelf-plain-lists:not(:has(> details:not([hidden]))) { display: none; }
.model3d-shelf-plain-lists > details[hidden] { display: none; }
.model3d-shelf-plain-list-title {
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0;
  color: var(--ink-soft);
  font: 500 12px/1.4 var(--sans);
  cursor: pointer;
  list-style: none;
}
.model3d-shelf-plain-list-title::-webkit-details-marker { display: none; }
.model3d-shelf-plain-list-title::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.model3d-shelf-plain-lists > details[open] > summary::before { transform: rotate(45deg); }
.model3d-shelf-plain-list-title:hover { color: var(--ink); }
.model3d-shelf-plain-list-title:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
.model3d-shelf-plain-list-count {
  margin-left: 7px;
  color: var(--ink-soft);
}
.model3d-shelf-plain-list-count:empty { display: none; }
.model3d-shelf-plain-marks-home .model3d-mark-panel > .model3d-mark-list { max-height: min(36vh, 360px); }
/* Parts owns naming (user decision 2026-09-26): name-mark rows live under the body rows. A row is
   a part here, so its intent select stays out; a body's given name is managed from the body row,
   so its own mark row stays out of sight entirely. */
.model3d-shelf-plain-part-names { display: grid; gap: 2px; max-height: min(36vh, 360px); overflow-y: auto; }
.model3d-shelf-plain-part-names:empty { display: none; }
.model3d-shelf-plain-part-names .model3d-mark-intent { display: none; }
.model3d-shelf-plain-part-names .model3d-mark-row.is-body-named { display: none; }
/* With the card alone on the panel its name rides in the headline ("Process journal - Axis Capo",
   user decision 2026-09-25), and what is left of its name row (the build light, Full view,
   Minimize, Unpin and the layout arrow)
   rises onto the headline's line, so the card itself starts with its tools. On a narrow panel
   the line writes a little smaller (never under 17px) before it cuts the name. */
.artifact-shelf.has-model3d-headline .artifact-shelf-headline {
  padding-right: 122px;
  font-size: clamp(17px, 5cqi, 20px);
}
.artifact-shelf.has-model3d-headline:has(.model3d-shelf-plain-head > .model3d-card-build-signal:not([hidden])) .artifact-shelf-headline { padding-right: 144px; }
.artifact-shelf.has-model3d-headline .model3d-shelf-plain-title { display: none; }
.artifact-shelf.has-model3d-headline .model3d-shelf-plain-head {
  position: absolute;
  top: calc(-1 * (var(--artifact-shelf-headline-height) + var(--artifact-shelf-gap)));
  right: 0;
  height: var(--artifact-shelf-headline-height);
  padding: 0;
}
@media (max-width: 700px) {
  .artifact-shelf { display: none !important; }
}
/* === END SECTION: artifact-shelf === */

/* === SECTION: model3d-unpin-confirm === */
/* The small "Unpin this card?" box under the × on the card beside chat. It floats on the page so
   the card's own clipping never cuts it. */
.model3d-unpin-confirm {
  position: fixed;
  z-index: 9000;
  width: 200px;
  box-sizing: border-box;
  padding: 10px 11px 11px;
  font-family: var(--sans);
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
}
.model3d-unpin-confirm-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
.model3d-unpin-confirm-sub {
  margin-top: 3px;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.35;
}
.model3d-unpin-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 11px;
}
.model3d-unpin-confirm-actions button {
  padding: 5px 8px;
  color: var(--ink-dim);
  font: 400 11px/1.2 var(--sans);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.model3d-unpin-confirm-actions .model3d-unpin-confirm-unpin {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.model3d-unpin-confirm-actions button:hover {
  color: var(--ink);
  border-color: var(--rule);
}
.model3d-unpin-confirm-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* === END SECTION: model3d-unpin-confirm === */

/* === SECTION: model3d-axis-gizmo === */
/* The X/Y/Z marker on a live viewer: it turns with the model, and a click on an
   axis end looks straight down that axis. Near ends are drawn over far ones. */
.model3d-axis-gizmo {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 68px;
  height: 68px;
  background: radial-gradient(circle, rgba(10, 13, 11, 0.68) 26%, rgba(10, 13, 11, 0) 70%);
  user-select: none;
  -webkit-user-select: none;
}
.model3d-axis-gizmo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.model3d-axis-gizmo line {
  stroke-width: 1.7;
  stroke-linecap: round;
}
.model3d-axis-end {
  cursor: pointer;
  outline: none;
  transition: opacity 120ms ease;
}
.model3d-axis-end.is-behind { opacity: 0.55; }
.model3d-axis-end:hover circle,
.model3d-axis-end:focus-visible circle {
  stroke: #f4f1ea;
  stroke-width: 1.5;
  fill-opacity: 1;
}
.model3d-axis-end text {
  font: 700 9px/1 var(--sans);
  fill: #0f120e;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
/* The shelf needs only a compact direction signal. Keep larger work surfaces at
   their normal size, but tuck this one into the model frame's top-left corner.

   The disc goes with the size. At 68px the radial gradient reads as a shadow behind the
   arms; at 34px it is a grey blob in the corner with coloured specks on it, because the
   frame under it is already near-black — the disc darkens the dark and nothing else. The
   legibility job moves to the strokes: a shadow on the drawing follows the arms wherever
   they swing, including over a pale face of the model, and leaves the corner clean when
   they are not there.

   And the square lets pointers through, so the model can still be dragged from under the
   marker; only the six axis ends take a click. At full size the gizmo sits beside the
   model, but tucked into a corner it sits ON it, and an opaque 34px square would swallow
   every drag that started there. */
.model3d-shelf-plain-viewer .model3d-axis-gizmo {
  top: 8px;
  right: auto;
  bottom: auto;
  left: 8px;
  width: 34px;
  height: 34px;
  transform: none;
  background: none;
  pointer-events: none;
}
.model3d-shelf-plain-viewer .model3d-axis-gizmo svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.model3d-shelf-plain-viewer .model3d-axis-gizmo line { stroke-width: 2.8; }
.model3d-shelf-plain-viewer .model3d-axis-end { pointer-events: auto; }
.model3d-shelf-plain-viewer .model3d-axis-end text { font-size: 16px; }
/* === END SECTION: model3d-axis-gizmo === */

/* === SECTION: model3d-facing-title === */
/* The side you are facing, named in a corner of a live viewer and renamed as the
   model turns. Dim off a square view: the nearest side, not a straight-on claim. */
.model3d-facing-title {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 2px 7px;
  color: var(--ink, #f1eee6);
  font: 600 11px/1.5 var(--sans);
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--paper, #14120f) 78%, transparent);
  border-radius: 5px;
  opacity: 0.6;
  transition: opacity 120ms ease;
  /* Never a dead zone: a drag that starts on the name still turns the model. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.model3d-facing-title.is-square { opacity: 1; }
.model3d-facing-title:empty { display: none; }
/* On the card the side name is plain text in the corner, not a label in a box. */
.model3d-shelf-plain-viewer .model3d-facing-title {
  top: auto;
  right: 12px;
  bottom: 10px;
  left: auto;
  padding: 0;
  color: #e9e7e1;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 0.02em;
  background: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* While the card's drawing bar is open across the top, the marker steps down under it instead of
   showing through it. */
.model3d-shelf-plain-viewer:has(.model3d-mark-bar:not([hidden])) .model3d-axis-gizmo { top: 52px; }
/* === END SECTION: model3d-facing-title === */

/* === SECTION: model3d-view-move === */
/* The way back to the middle, in the bottom-right corner, only while the model is moved or zoomed. */
.model3d-view-center {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: rgba(241, 238, 230, 0.86);
  font: 500 15px/1 var(--sans);
  background: rgba(9, 12, 13, 0.72);
  border: 1px solid rgba(224, 221, 211, 0.16);
  border-radius: 7px;
  cursor: pointer;
}
.model3d-view-center:hover { color: #fff; background: rgba(9, 12, 13, 0.9); }
.model3d-view-center:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model3d-view-center[hidden] { display: none; }
/* On the card the side name keeps the corner itself, so the button stands just above it. */
.model3d-shelf-plain-viewer .model3d-view-center { right: 8px; bottom: 28px; }
/* The first-time line under the model, above the scale and side name, until the first move. */
.model3d-view-hint {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 3;
  max-width: calc(100% - 24px);
  overflow: hidden;
  color: rgba(241, 238, 230, 0.6);
  font: 500 11px/1.3 var(--sans);
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Drawing and measuring take the drag for themselves, and sculpting brings its own view. */
.model3d-viewer-surface.marking .model3d-view-hint,
.model3d-viewer-surface.is-sculpting :is(.model3d-view-hint, .model3d-view-center) { display: none; }
/* === END SECTION: model3d-view-move === */

/* === SECTION: model3d-workspace === */
/* The part workspace — the one full-detail room. Full view on any 3D card
   opens it in the rail system full view: the WorkRail seats its parked slot
   as the maximized 'model3d' view surface (like Lines), so the nav bars stay
   visible. Full view is its only size; it never sits in the rail as a tile
   beside chat (user decision 2026-09-25).
   Full view is the card beside chat at full size (user decision 2026-09-25): the Process journal
   headline with the part's name and its dot, ⋮ and ×; below it the marks column and, beside that,
   the card's tool row, the model's box (the viewport wears the card's box class) and the version
   row. Everything but the box floats on the chat's own background. */
.model3d-workspace {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(48px, auto) minmax(0, 1fr);
  background: color-mix(in srgb, var(--paper, #14120f) 92%, #000 8%);
}
/* The headline carries Full view's Close, so the rail's own bar and its title step aside. */
.wr-tile[data-surface="model3d"] > .wr-tile-bar { display: none; }
.model3d-workspace.is-full-view {
  --model3d-workspace-columns: 260px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 12px 22px 16px 24px;
  background: transparent;
}
.model3d-workspace.is-full-view .model3d-workspace-head {
  gap: 2px;
  height: 28px;
  padding: 0;
  border-bottom: 0;
  background: none;
}
/* The panel headline's own face and size: "Process journal - Axis Capo" at 20px on the 28px line its
   buttons need. A long name is cut with "…" and rides the pointer whole; the padding keeps the
   handwritten last letter whole at the cut. */
.model3d-workspace.is-full-view .model3d-workspace-title {
  display: flex;
  min-width: 0;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  font: 500 20px/28px 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  white-space: nowrap;
}
/* The rail sets its one standard face on everything it holds (#work-rail, !important); the headline
   keeps the panel's handwritten one. */
#work-rail .wr-tile[data-surface="model3d"] .model3d-workspace.is-full-view .model3d-workspace-title,
#work-rail .wr-tile[data-surface="model3d"] .model3d-workspace.is-full-view .model3d-workspace-title > span {
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive !important;
}
.model3d-workspace-journal { flex: none; white-space: pre; }
.model3d-workspace:not(.is-full-view) .model3d-workspace-journal { display: none; }
.model3d-workspace.is-full-view .model3d-workspace-name {
  flex: 0 1 auto;
  min-width: 0;
  padding-right: 0.15em;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The build light, ⋮ and × sit at the headline's right end in the card's quiet control look. */
.model3d-workspace.is-full-view .model3d-workspace-head > .model3d-card-build-signal { margin-right: 4px; }
.model3d-workspace.is-full-view .model3d-workspace-controls .model3d-card-control,
.model3d-workspace-close {
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 7px;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  border-radius: 6px;
}
.model3d-workspace.is-full-view .model3d-workspace-controls .model3d-shelf-more-trigger {
  flex-basis: 26px;
  width: 26px;
  padding: 0;
}
.model3d-workspace-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.model3d-workspace-close svg { width: 15px; height: 15px; }
.model3d-workspace-close:hover,
.model3d-workspace-close:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.model3d-workspace-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model3d-workspace.is-full-view .model3d-workspace-body { column-gap: 28px; }
/* The marks column floats too: no fill and no edge of its own. It is an <aside>, so it also steps out
   of the generic lit edge every aside gets. Its title sits on the tool row's line. */
.model3d-workspace.is-full-view .model3d-workspace-left {
  gap: 14px;
  padding: 0 4px 0 0;
  background: none;
  border-right: 0;
}
.model3d-workspace.is-full-view .model3d-workspace-left::after { content: none !important; }
.model3d-workspace.is-full-view .model3d-workspace-panel-title {
  font: 500 12px/1.4 var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
.model3d-workspace.is-full-view .model3d-workspace-left > section > .model3d-workspace-panel-title {
  display: flex;
  align-items: center;
  height: 32px;
}
.model3d-workspace.is-full-view .model3d-workspace-marks { gap: 4px; }
.model3d-workspace-marks-count {
  margin-left: 7px;
  color: var(--ink-soft);
}
.model3d-workspace-marks-count:empty { display: none; }
/* Parts (user request 2026-09-25): Full view's list of the separate bodies in the model file, above
   Marks. Its rows are the shared part list (model3d-part-list). */
.model3d-workspace-parts { display: grid; gap: 4px; }
.model3d-workspace-parts[hidden] { display: none; }
.model3d-workspace-parts-count {
  margin-left: 7px;
  color: var(--ink-soft);
}
.model3d-workspace-parts-count:empty { display: none; }
.model3d-workspace-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}
/* The box is the card's box (.model3d-shelf-plain-viewer); here it takes the room the stage has. */
.model3d-workspace.is-full-view .model3d-workspace-viewport {
  height: auto;
  min-height: 0;
}
/* A word the tool row keeps out of reach steps out of it entirely. */
.model3d-full-view-tools [hidden] { display: none; }
.model3d-full-view-tools > .model3d-full-view-sculpt-tool:not([hidden]) { display: contents; }
.model3d-shelf-tools .model3d-shelf-tool[aria-expanded="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
/* The Views word opens the standard views as the card's own dark menu, over the box. */
.model3d-views { position: relative; display: inline-flex; }
.model3d-standard-views {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  width: 244px;
  padding: 5px;
  background: #141816;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.92);
}
.model3d-standard-views[hidden], .model3d-standard-views-actions[hidden] { display: none; }
.model3d-standard-views .model3d-workspace-panel-title {
  padding: 7px 9px 4px;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  font: 600 11px/1 var(--sans);
}
.model3d-standard-views-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.model3d-standard-views-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.model3d-standard-views button {
  min-height: 30px;
  padding: 0 9px;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font: 500 12px/1 var(--sans);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.model3d-standard-views button:hover,
.model3d-standard-views button:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  outline: none;
}
.model3d-standard-views .model3d-workspace-sketch-status {
  min-height: 0;
  padding: 6px 9px 5px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.model3d-standard-views[inert] { opacity: .55; }
/* Under Full view's wide box the version list keeps a menu's width, rising from the name at the
   row's left end. */
.model3d-workspace.is-full-view .model3d-pinned-history-list {
  right: auto;
  left: 0;
  width: min(460px, 100%);
}
.model3d-full-view-sculpt { display: grid; gap: 12px; min-width: 0; }
.model3d-full-view-sculpt button:focus-visible,
.model3d-full-view-sculpt input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.model3d-full-view-sculpt[hidden],
.model3d-workspace-sketch-entry[hidden],
.model3d-workspace-work[hidden],
.model3d-workspace-marks[hidden] { display: none; }
.model3d-full-view-sculpt .model3d-sculpt-toolbar,
.model3d-full-view-sculpt .model3d-clay-settings,
.model3d-full-view-sculpt .model3d-clay-describe-body { grid-template-columns: minmax(0, 1fr); }
.model3d-full-view-sculpt .model3d-clay-describe-body { grid-column: 1; }
.model3d-full-view-sculpt .model3d-clay-status { white-space: normal; overflow-wrap: anywhere; color: var(--ink-soft); }
.model3d-full-view-sculpt .model3d-clay-status.is-error { color: #efb2a6; }
.model3d-full-view-sculpt .model3d-clay-session-actions { justify-content: flex-start; }
.model3d-full-view-sculpt .model3d-sculpt-toolbar { padding: 0; border: 0; }
.model3d-full-view-sculpt input[type="range"] { accent-color: var(--ink-soft); }
@media (max-width: 980px) {
  .model3d-workspace.is-full-view .model3d-workspace-body {
    overflow-y: auto;
    grid-template-rows: minmax(360px, 1fr) max-content;
  }
  .model3d-workspace.is-full-view .model3d-workspace-stage { order: 1; }
  .model3d-workspace.is-full-view .model3d-workspace-left { order: 2; max-height: none; border-top: 0; }
}
.model3d-workspace-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  background: color-mix(in srgb, var(--paper, #14120f) 88%, #000 12%);
}
.model3d-workspace-head-copy {
  display: grid;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.model3d-workspace-title-row {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.model3d-workspace-title {
  margin: 0;
  overflow: hidden;
  font: 600 13px/1.2 var(--sans);
  overflow-wrap: anywhere;
  white-space: normal;
}
/* This line carries the card's status sentence now, not a bare version id, so it
   reads in the same voice as the card's own status strip. */
.model3d-workspace-version {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font: 650 11px/1.25 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model3d-workspace-controls-home {
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
}
.model3d-workspace-controls-home:empty { display: none; }
.model3d-workspace-controls { margin-left: 0; }
.model3d-workspace-controls .model3d-card-control {
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding-inline: 8px;
  border-radius: 7px;
}
.model3d-workspace-controls .model3d-card-control-label { font-size: 11px; }
.model3d-workspace-controls .model3d-shelf-more-trigger {
  flex-basis: 32px;
  width: 32px;
}
.model3d-workspace-controls .model3d-active-switch {
  min-height: 32px;
  padding: 0 8px;
  font: 600 11px/1 var(--sans);
  text-transform: none;
  letter-spacing: 0;
  border-color: transparent;
  border-radius: 7px;
}
.model3d-workspace-card-back {
  margin-left: auto;
  min-height: 32px;
  padding: 0 10px;
  color: var(--ink);
  font: 650 11px/1 var(--sans);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rule) 82%, transparent);
  border-radius: 8px;
  cursor: pointer;
}
.model3d-workspace-card-back:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.model3d-workspace-card-back:focus-visible {
  outline: 2px solid var(--accent, #c8a24a);
  outline-offset: 2px;
}
.model3d-workspace-card-back[hidden] { display: none; }
.model3d-workspace-body {
  display: grid;
  grid-template-columns: var(--model3d-workspace-columns, 260px minmax(0, 1fr));
  min-height: 0;
}
.model3d-workspace-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 14px 12px;
  overflow-y: auto;
  border-right: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  background: color-mix(in srgb, var(--paper, #14120f) 90%, #000 10%);
}
.model3d-workspace-marks {
  display: grid;
  gap: 8px;
}
.model3d-workspace-sketch-entry {
  display: grid;
  gap: 9px;
  padding-bottom: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
}
.model3d-workspace-sketch-action {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #c8a24a) 58%, var(--rule));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent, #c8a24a) 14%, transparent);
  color: var(--ink);
  font: 700 11px/1.2 var(--sans);
  cursor: pointer;
}
.model3d-workspace-sketch-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, #c8a24a) 22%, transparent);
}
.model3d-workspace-sketch-action:focus-visible,
.model3d-reference-sketch button:focus-visible {
  outline: 2px solid var(--accent, #c8a24a);
  outline-offset: 2px;
}
.model3d-workspace-sketch-action:disabled {
  cursor: default;
  opacity: 0.48;
}
.model3d-workspace-sketch-status {
  min-height: 1.35em;
  margin: 0;
  color: var(--ink-soft);
  font: 11px/1.4 var(--sans);
}
.model3d-workspace-panel-title {
  margin: 0;
  color: var(--ink-soft);
  font: 600 10px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.model3d-workspace-marks-home {
  display: grid;
  gap: 8px;
}
/* The panel hides itself while the part carries no marks; the rail says so
   instead of standing empty. Pinned-open behavior makes hidden ⇔ no marks. */
.model3d-workspace-marks-home:empty::after,
.model3d-workspace-marks-home:has(> .model3d-mark-panel[hidden])::after {
  content: 'No marks yet. Draw, point, or outline on the part to start the list.';
  color: var(--ink-soft);
  font: 11px/1.5 var(--sans);
}
/* The rail is tall; the docked list may use it instead of the card's 150px cap. */
.model3d-workspace-marks-home .model3d-mark-panel > .model3d-mark-list {
  max-height: min(48vh, 460px);
}
/* The foot is the one line that answers what the marks are saved with, and it is last in the
   panel — so a rail with more in it than fits cut it in half exactly when the list was long
   enough to need it. Both homes scroll (the rail, and the card's marks slot), so the foot
   sticks to the bottom of whichever one is scrolling instead of falling below the fold. */
.model3d-workspace-marks-home .model3d-mark-panel > .model3d-mark-foot,
.model3d-card-workspace-marks .model3d-mark-panel > .model3d-mark-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  /* It covers the rows scrolling under it in the colour already behind it, so it never reads as a box. */
  background: var(--model3d-marks-backdrop, var(--chat-bg, var(--frame-bg)));
}
.model3d-workspace-viewport {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
}
.model3d-workspace.is-sketching:not(.is-full-view) .model3d-workspace-body {
  grid-template-columns: 300px minmax(0, 1fr);
}
body .model3d-workspace.is-sketching:not(.is-full-view) .model3d-workspace-marks {
  display: none;
}
.model3d-workspace.is-sketching .model3d-workspace-viewport > :not(.model3d-reference-sketch) {
  visibility: hidden;
  pointer-events: none;
}
.model3d-glass-depth { display: grid; gap: 8px; color: var(--ink); font-size: 13px; }
.model3d-glass-depth[hidden] { display: none; }
.model3d-glass-depth input { width: 100%; accent-color: var(--accent, #edb84c); }
.model3d-glass-depth output { font-variant-numeric: tabular-nums; }
.model3d-glass-overlay { position: absolute; z-index: 24; pointer-events: none; overflow: hidden; }
.model3d-glass-sheet { fill: none; stroke: rgba(235, 247, 247, 0.85); stroke-width: 1; }
.model3d-glass-overlay,
.model3d-reference-sketch-canvas {
  /* A straight reflection and cut edge make the drawing plane visible without blurring it. */
  background: linear-gradient(118deg, transparent 12%, rgba(255, 255, 255, 0.075) 12.2%, rgba(255, 255, 255, 0.015) 25%, transparent 25.2%, transparent 78%, rgba(255, 255, 255, 0.045) 78.2%, transparent 90%);
  box-shadow: inset 0 0 0 1px rgba(235, 247, 247, 0.85), inset 0 0 0 3px rgba(27, 48, 50, 0.45), inset 0 0 0 4px rgba(235, 247, 247, 0.22);
}
.model3d-glass-caption {
  position: absolute;
  z-index: 2;
  left: 8px;
  bottom: 8px;
  padding: 4px 6px;
  border: 1px solid rgba(235, 247, 247, 0.35);
  border-radius: 2px;
  background: rgba(18, 28, 29, 0.88);
  color: #edf5f5;
  font: 500 10px/1.2 var(--sans);
  pointer-events: none;
}
.model3d-workspace.is-glass-setup:not(.is-full-view) .model3d-workspace-body { grid-template-columns: 300px minmax(0, 1fr); }
body .model3d-workspace.is-glass-setup:not(.is-full-view) .model3d-workspace-marks { display: none; }
.model3d-workspace.is-glass-setup .model3d-workspace-viewport > :not(model-viewer):not(.model3d-glass-overlay) { visibility: hidden; pointer-events: none; }
.model3d-workspace.is-capturing-sketch { pointer-events: none; }
.is-sketching-on-card > [hidden] { display: none !important; }
.model3d-card-sketch-home {
  position: relative;
  display: flex;
  width: 100%;
  height: clamp(500px, 70vh, 720px);
  min-height: 500px;
  overflow: hidden;
  background: #0d100f;
}
.model3d-card-sketch-home > .model3d-workspace { min-height: 0; }
/* Drawing on the card takes the model's box, edge and corners included. */
.model3d-shelf-plain-card .model3d-card-sketch-home {
  height: clamp(360px, 45vh, 440px);
  min-height: 360px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 12px;
}
.model3d-workspace.is-card-sketch .model3d-workspace-body,
.model3d-workspace.is-card-sketch.is-shape-study .model3d-workspace-body,
.model3d-workspace.is-card-sketch.is-glass-setup .model3d-workspace-body,
.model3d-workspace.is-card-sketch.is-sketching .model3d-workspace-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(180px, 1fr) auto;
}
.model3d-workspace.is-card-sketch .model3d-workspace-viewport { order: 1; }
.model3d-workspace.is-card-sketch .model3d-workspace-left {
  order: 2;
  max-height: 180px;
  padding: 12px;
  overflow-y: auto;
  border-top: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  border-right: 0;
}
/* History, Marks and Work are not built into the card surface at all — see
   layoutRoom — and the head's Back hides itself, so nothing here has to. */
.model3d-workspace.is-card-sketch.is-sketching .model3d-workspace-body {
  grid-template-rows: minmax(0, 1fr);
}
body .model3d-workspace.is-card-sketch.is-sketching .model3d-workspace-left { display: none; }
.model3d-reference-sketch {
  position: absolute;
  inset: 0;
  z-index: 20;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: color-mix(in srgb, var(--paper, #14120f) 87%, #000 13%);
}
.model3d-reference-sketch-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
}
.model3d-reference-sketch-heading {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.model3d-reference-sketch-heading strong {
  color: var(--ink);
  font: 700 12px/1.2 var(--sans);
}
.model3d-reference-sketch-heading span {
  overflow: hidden;
  color: var(--ink-soft);
  font: 10px/1.25 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model3d-reference-sketch-close {
  margin-left: auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--rule) 82%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 650 11px/1 var(--sans);
  cursor: pointer;
}
.model3d-reference-sketch-stage-home {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px;
  background: color-mix(in srgb, var(--paper, #14120f) 76%, #000 24%);
}
.model3d-reference-sketch-stage {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(235, 247, 247, 0.55);
  border-radius: 2px;
  background: #141719;
  box-shadow: 0 16px 36px -24px rgba(0, 0, 0, 0.82);
}
.model3d-reference-sketch-image,
.model3d-reference-sketch-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.model3d-reference-sketch-image {
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.model3d-reference-sketch-canvas {
  z-index: 1;
  touch-action: none;
}
.model3d-reference-sketch-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  overflow-x: auto;
  border-top: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
  scrollbar-width: thin;
}
.model3d-reference-sketch-tool-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.model3d-reference-sketch-tool,
.model3d-reference-sketch-edit {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: 650 11px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.model3d-reference-sketch-tool:hover,
.model3d-reference-sketch-edit:hover:not(:disabled) {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.model3d-reference-sketch-tool.is-active {
  border-color: color-mix(in srgb, var(--accent, #c8a24a) 68%, var(--rule));
  background: color-mix(in srgb, var(--accent, #c8a24a) 16%, transparent);
  color: var(--ink);
}
.model3d-reference-sketch-tool[data-sketch-tool="surface_guide"].is-active {
  border-color: color-mix(in srgb, #79cbd1 72%, var(--rule));
  background: color-mix(in srgb, #79cbd1 14%, transparent);
}
.model3d-reference-sketch-edit:disabled {
  cursor: default;
  opacity: 0.38;
}
.model3d-reference-sketch-edit.is-clear {
  color: color-mix(in srgb, var(--ink-soft) 86%, #d36b5c 14%);
}
.model3d-reference-sketch-status {
  flex: 1 0 150px;
  min-width: 150px;
  color: var(--ink-soft);
  font: 10px/1.3 var(--sans);
  text-align: right;
}
.model3d-card-sketch-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border-top: 1px solid var(--rule);
}
.model3d-card-sketch-tools { flex: 0 0 auto; }
.model3d-card-sketch-tools summary {
  padding: 8px 4px;
  color: var(--ink);
  font: 600 11px/1.2 var(--sans);
  cursor: pointer;
}
.model3d-card-sketch-tools summary:focus-visible {
  outline: 2px solid var(--accent, #c8a24a);
  outline-offset: 2px;
}
.model3d-card-sketch-more {
  position: absolute;
  bottom: 100%;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  overflow: visible;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper, #14120f);
}
.model3d-card-sketch-tools button { min-height: 28px; padding: 0 8px; }
.model3d-card-sketch-footer > .model3d-reference-sketch-toolbar {
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  gap: 4px;
}
.model3d-card-sketch-footer .model3d-reference-sketch-tool-group { gap: 3px; }
.model3d-card-sketch-footer button { min-height: 28px; padding-inline: 7px; }
.model3d-card-sketch-footer .model3d-reference-sketch-status {
  flex: 1 0 100%;
  min-width: 0;
  text-align: right;
}
/* Build / Print's steps take the left column while that word is on. */
.model3d-workspace-work { display: grid; gap: 8px; }
.model3d-workspace-work-home { display: grid; gap: 10px; }
@media (max-width: 980px) {
  .model3d-workspace-body,
  .model3d-workspace.is-shape-study .model3d-workspace-body,
  .model3d-workspace.is-glass-setup .model3d-workspace-body,
  .model3d-workspace.is-sketching .model3d-workspace-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(360px, 1fr) auto;
  }
  body .model3d-workspace-left {
    position: static;
    inset: auto;
    width: auto;
    padding: 14px 12px;
    z-index: auto;
    transform: none;
    transition: none;
    gap: 16px;
    box-shadow: none;
  }
  .model3d-workspace-left {
    order: 2;
    max-height: 38vh;
    border-right: 0;
    border-top: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  }
  .model3d-workspace-viewport { order: 1; }
  .model3d-reference-sketch-head {
    gap: 9px;
  }
  .model3d-reference-sketch-stage-home {
    padding: 8px;
  }
  .model3d-reference-sketch-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    overflow-x: visible;
  }
  .model3d-reference-sketch-status {
    flex: 1 0 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
  }
}
@media (max-width: 700px) {
  .model3d-workspace:not(.is-card-sketch) {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .model3d-workspace:not(.is-card-sketch) .model3d-workspace-head {
    min-height: 78px;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-block: 6px;
  }
  .model3d-workspace:not(.is-card-sketch) .model3d-workspace-head-copy {
    flex: 1 1 260px;
    gap: 8px;
  }
  .model3d-workspace:not(.is-card-sketch) .model3d-workspace-controls-home {
    flex: 1 0 100%;
    margin-left: 0;
  }
  .model3d-workspace:not(.is-card-sketch) .model3d-workspace-controls {
    width: 100%;
    margin-left: 0;
  }
  .model3d-card-sketch-home {
    height: min(660px, calc(100vh - 72px));
    min-height: 460px;
  }
  .model3d-workspace.is-card-sketch .model3d-workspace-head {
    gap: 8px;
    padding-inline: 10px;
  }
  .model3d-workspace.is-card-sketch .model3d-workspace-version { display: none; }
}
/* === END SECTION: model3d-workspace === */

/* === SECTION: model3d-active-work === */
/* Active/shelved: the switch is the control (shelf card head + room header);
   the composer chip is a light — passive while the card is on the shelf, and the way back
   (one click restores the card) once the user has unpinned or minimized it. */
.model3d-active-switch {
  padding: 3px 10px;
  color: var(--ink-soft);
  font: 600 10px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  border-radius: 999px;
  cursor: pointer;
}
.model3d-active-switch:hover,
.model3d-active-switch:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent, #c8a24a) 50%, var(--rule));
}
.model3d-active-switch.is-active {
  color: color-mix(in srgb, var(--accent, #c8a24a) 80%, #fff 20%);
  border-color: color-mix(in srgb, var(--accent, #c8a24a) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #c8a24a) 12%, transparent);
}
.composer-model3d-active-chip {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-width: 0;
  max-width: min(420px, 60%);
  overflow: hidden;
  flex-shrink: 1;
  min-height: 30px; /* seated in the chip row beside the plan chip — same tab height */
  box-sizing: border-box;
  margin: 0 0 -1px 0;
  padding: 0 11px 0 12px;
  border: 1px solid color-mix(in srgb, #e0b487 16%, var(--rule) 60%);
  border-bottom-color: color-mix(in srgb, #e0b487 9%, var(--rule) 44%);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 93%, #e0b487 7%);
  color: color-mix(in srgb, #c98b4e 52%, var(--ink) 48%);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  position: relative;
  z-index: 3;
}
.composer-model3d-active-chip[hidden] { display: none !important; }
.composer-model3d-active-chip-kicker,
.composer-model3d-active-chip-state {
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
}
.composer-model3d-active-chip-title {
  min-width: 0;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}
body.dark .composer-model3d-active-chip {
  border-color: rgba(224, 180, 135, 0.16);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 90%, #e0b487 6%);
  color: rgba(233, 197, 157, 0.72);
}
/* Off the shelf, the chip acts: one click restores the active work's card. */
.composer-model3d-active-chip.can-restore-card {
  pointer-events: auto;
  cursor: pointer;
}
.composer-model3d-active-chip.can-restore-card:hover,
.composer-model3d-active-chip.can-restore-card:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, #e0b487 36%, var(--rule) 60%);
}
body.dark .composer-model3d-active-chip.can-restore-card:hover,
body.dark .composer-model3d-active-chip.can-restore-card:focus-visible {
  color: rgba(233, 197, 157, 0.95);
  border-color: rgba(224, 180, 135, 0.36);
}
/* The mark cap speaks once, on the part, then leaves. */
.model3d-mark-cap-note {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 6px 12px;
  color: var(--ink);
  font: 11px/1.4 var(--sans);
  background: color-mix(in srgb, var(--paper, #14120f) 82%, #000 18%);
  border: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  border-radius: 8px;
  white-space: nowrap;
}
/* === END SECTION: model3d-active-work === */

/* === SECTION: model3d-work-rail === */
/* The room's work rail: review only — Check & slice, stage dots, Show slice,
   Send with the double confirm. No chat door; Discuss stays out of the room. */
.model3d-workrail-check {
  min-height: 34px;
  padding: 6px 12px;
  color: #f0eee7;
  font: 600 12px/1.2 var(--sans);
  background: color-mix(in srgb, var(--accent, #c8a24a) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #c8a24a) 55%, transparent);
  border-radius: 8px;
  cursor: pointer;
}
.model3d-workrail-check:hover,
.model3d-workrail-check:focus-visible {
  background: color-mix(in srgb, var(--accent, #c8a24a) 28%, transparent);
}
.model3d-workrail-check:disabled { opacity: 0.55; cursor: wait; }
.model3d-workrail-stages { display: grid; gap: 6px; }
.model3d-workrail-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
  font: 11px/1.4 var(--sans);
}
.model3d-workrail-dot {
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--rule) 80%, transparent);
  border-radius: 50%;
}
.model3d-workrail-dot.is-now {
  background: var(--accent, #c8a24a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #c8a24a) 20%, transparent);
}
.model3d-workrail-dot.is-done { background: #63a06b; }
.model3d-workrail-dot.is-error { background: var(--danger, #b84b3f); }
.model3d-workrail-status {
  min-height: 1em;
  color: var(--ink-soft);
  font: 11px/1.5 var(--sans);
}
.model3d-workrail-status.is-error { color: var(--danger, #b84b3f); }
.model3d-workrail-facts {
  color: var(--ink-soft);
  font: 10px/1.6 var(--mono);
}
.model3d-workrail-facts:empty { display: none; }
.model3d-workrail-problems {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.model3d-workrail-problem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-left: 2px solid color-mix(in srgb, var(--rule) 60%, transparent);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--rule) 12%, transparent);
}
.model3d-workrail-problem-text {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--ink-soft);
  font: 11px/1.5 var(--sans);
}
/* Severity rides the dot, the way the stage dots above it do — never the left rail. */
.model3d-workrail-problem-text::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.35em;
  background: color-mix(in srgb, var(--rule) 80%, transparent);
  border-radius: 50%;
}
.model3d-workrail-problem.is-error .model3d-workrail-problem-text::before {
  background: var(--danger, #b84b3f);
}
.model3d-workrail-problem.is-warning .model3d-workrail-problem-text::before {
  background: var(--accent, #c8a24a);
}
.model3d-workrail-problem-show {
  align-self: flex-start;
  min-height: 26px;
  padding: 3px 9px;
  color: var(--ink);
  font: 10px/1.2 var(--sans);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  border-radius: 6px;
  cursor: pointer;
}
.model3d-workrail-problem-show:hover:not(:disabled),
.model3d-workrail-problem-show:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--rule) 30%, transparent);
}
.model3d-workrail-problem-show:disabled { opacity: 0.45; cursor: not-allowed; }
.model3d-workrail-actions { display: flex; gap: 8px; }
.model3d-workrail-action {
  min-height: 32px;
  padding: 5px 11px;
  color: var(--ink);
  font: 11px/1.2 var(--sans);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  border-radius: 7px;
  cursor: pointer;
}
.model3d-workrail-action:hover:not(:disabled),
.model3d-workrail-action:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--rule) 30%, transparent);
}
.model3d-workrail-action.is-send {
  color: color-mix(in srgb, var(--danger, #b84b3f) 60%, var(--ink));
  border-color: color-mix(in srgb, var(--danger, #b84b3f) 55%, transparent);
}
.model3d-workrail-action:disabled { opacity: 0.45; cursor: not-allowed; }
/* === END SECTION: model3d-work-rail === */

/* === SECTION: artifact-card-chrome === */
.artifact-card-host { isolation: isolate; }
.artifact-presentation-surface { position: relative; }
.artifact-visual-card {
  display: grid;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin: 14px 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--paper-raised, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 14px;
}
.artifact-visual-card .mermaid-diagram,
.artifact-visual-card .chart-canvas,
.artifact-visual-card .concept-map-canvas,
.artifact-visual-card .mind-map-canvas,
.artifact-visual-card .artifact-presentation-surface,
.artifact-visual-card .generated-img {
  max-width: 100%;
  border: 0;
  border-radius: 0;
}
.artifact-card-chrome {
  display: block;
  min-width: 0;
  contain: inline-size;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 2%);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
/* One row: the name, then the controls. Drawing happens in the pad above the message box,
   so nothing overlays the picture itself any more. */
.artifact-card-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  gap: 7px;
  padding: 7px 9px 7px 13px;
  color: var(--ink-soft);
}
.artifact-card-bar[hidden] { display: none; }
.artifact-card-name {
  flex: 1 1 48px;
  min-width: 48px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  font: 600 12px/1.25 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artifact-inline-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}
.artifact-inline-control {
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font: 500 11px/1 var(--sans);
  white-space: nowrap;
}
.artifact-inline-draw,
.artifact-inline-enlarge {
  width: 30px;
  padding: 0;
}
.artifact-inline-control:hover,
.artifact-inline-control:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}
.artifact-inline-draw:hover,
.artifact-inline-draw:focus-visible { color: var(--accent, #62a6ff); }
.artifact-inline-pin.is-pinned { color: var(--accent, #c8a24a); }
.artifact-card-status {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font: 10px/1.2 var(--mono);
  white-space: nowrap;
}
.artifact-card-status[hidden] { display: none; }
.artifact-shelf-card-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 90%, var(--ink) 3%);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 10px;
}
.artifact-shelf-card-shell:not(.is-minimized):hover,
.artifact-shelf-card-shell:not(.is-minimized):focus-within {
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}
.artifact-shelf-card-shell.is-minimized {
  grid-column: 1 / -1;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.artifact-shelf-card-shell .artifact-shelf-card { width: 100%; }
.artifact-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.artifact-shelf-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 600 12px/1.3 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artifact-shelf-card-controls {
  position: static;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.artifact-shelf-control {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.artifact-shelf-control:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
.artifact-shelf-control:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.artifact-shelf-chip {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 90%, var(--ink) 3%);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 999px;
}
.artifact-shelf-chip-restore {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 10px;
  overflow: hidden;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.artifact-shelf-chip-kind { flex: 0 0 auto; color: var(--ink-dim); font: 9px/1 var(--mono); letter-spacing: 0.08em; }
.artifact-shelf-chip-title { min-width: 0; overflow: hidden; font: 11px/1.2 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.artifact-shelf-chip-unpin {
  flex: 0 0 28px;
  height: 28px;
  padding: 0;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.artifact-shelf-chip-restore:hover,
.artifact-shelf-chip-unpin:hover { color: var(--ink); }
.shelf-reference-grid { gap: 8px; }
.shelf-reference-body {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 12px;
  box-sizing: border-box;
  color: var(--ink-soft);
  text-align: left;
  background: transparent;
  border: 0;
}
.shelf-reference-link {
  gap: 8px;
  cursor: pointer;
}
.shelf-reference-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.shelf-reference-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.shelf-reference-address {
  overflow-wrap: anywhere;
  color: inherit;
  font: 12px/1.45 var(--sans);
}
.shelf-reference-open-label {
  color: var(--accent);
  font: 600 11px/1.2 var(--sans);
}
.shelf-reference-text blockquote {
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow: auto;
  color: var(--ink-soft);
  font: 13px/1.55 var(--sans);
  white-space: pre-wrap;
}
@media (max-width: 560px) {
  .artifact-card-chrome .artifact-card-name { display: block; }
  .artifact-inline-control-label { display: none; }
}
/* === END SECTION: artifact-card-chrome === */

.model3d-fallback {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  box-sizing: border-box;
  color: var(--ink-soft);
  text-align: center;
}
.model3d-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #8ea2b4;
  background: #0a121e;
  font: 11px/1 var(--mono);
  letter-spacing: 0.04em;
}
.model3d-loading::after {
  content: '';
  width: 18px;
  height: 18px;
  margin-left: 9px;
  border: 2px solid rgba(142, 162, 180, 0.24);
  border-top-color: #8ea2b4;
  border-radius: 50%;
  animation: model3d-loading-spin 800ms linear infinite;
}
@keyframes model3d-loading-spin { to { transform: rotate(360deg); } }
.model3d-fallback img {
  max-width: min(100%, 360px);
  max-height: 260px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.model3d-fallback-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.model3d-card-tool-rail {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  margin: 0 var(--space-3) var(--space-3);
  min-width: 0;
  padding: var(--space-2);
  overflow: visible;
  box-sizing: border-box;
  color: #aaa9a3;
  background: rgba(29, 32, 29, 0.92);
  border: 1px solid rgba(224, 221, 211, 0.15);
  border-radius: 14px;
}
.model3d-card-identity {
  position: relative;
  z-index: 5;
  padding: var(--space-3) var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.model3d-card-identity-copy {
  flex: 1 1 260px;
  min-width: 0;
  color: #f0eee7;
}
.model3d-card-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.model3d-card-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}
.model3d-card-state {
  margin-top: var(--space-1);
  color: #aaa9a3;
  font-family: var(--sans);
  font-size: var(--text-xs);
  line-height: 1.4;
}
/* Shape study on a card: drawing tools and the version block stay — the block names the
   study and carries the way back to the saved shape; sculpt, build, and print hide. */
.meshy-asset-card.is-shape-study .model3d-clay-action,
.meshy-asset-card.is-shape-study .model3d-clay-panel,
.meshy-asset-card.is-shape-study .model3d-card-primary-actions,
.meshy-asset-card.is-shape-study .model3d-print-status { display: none; }
.model3d-card-tool-rail > .model3d-mark-bar {
  position: static;
  flex: 1 1 auto;
  max-width: none;
  padding: 0;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.model3d-card-primary-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding-left: var(--space-2);
  border-left: 1px solid var(--rule);
}
.model3d-card-action {
  position: relative;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: #aaa9a3;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.model3d-card-action:hover,
.model3d-card-action:focus-visible {
  color: #f3f1eb;
  background: rgba(232, 226, 210, 0.09);
}
.model3d-card-action:disabled {
  opacity: 0.45;
  cursor: wait;
}
.model3d-discuss-action.is-active {
  color: #fff7ec;
  background: rgba(188, 121, 82, 0.24);
  border-color: rgba(220, 151, 106, 0.42);
}
.model3d-card-workspace-marks {
  position: static;
  flex: 1 0 100%;
  width: 100%;
  max-width: none;
  max-height: min(36vh, 260px);
  padding: var(--space-3) var(--space-2) var(--space-2);
  overflow: auto;
  color: #aaa9a3;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(224, 221, 211, 0.14);
  border-radius: 0;
  box-shadow: none;
}
.model3d-card-version-slot {
  width: 100%;
  min-width: 0;
}
.model3d-card-workspace-marks { display: none; }
.model3d-card-workspace-marks:has(> .model3d-mark-panel:not([hidden])) { display: block; }
.model3d-card-version-slot:empty,
.model3d-mark-panel[hidden] { display: none; }
.model3d-prepare-action {
  color: #e6e2d7;
  font-weight: 650;
}
.model3d-card-file-status:not(:empty) {
  max-width: 240px;
  padding: var(--space-2) var(--space-3);
  color: #efb2a6;
  font: var(--text-xs)/1.4 var(--sans);
}
.model3d-print-status {
  position: static;
  flex: 1 0 100%;
  padding: var(--space-3) var(--space-2) var(--space-2);
  color: #c5c1b8;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(224, 221, 211, 0.14);
  border-radius: 0;
  font: 11px/1.5 var(--mono);
}
.model3d-print-status.is-error {
  color: #efb2a6;
  background: #251817;
}
.model3d-print-recovery-title {
  color: #f0eee7;
  font: 650 var(--text-sm)/1.35 var(--sans);
}
.model3d-print-recovery-issue {
  margin-top: var(--space-1);
  color: #efb2a6;
  font-family: var(--sans);
}
.model3d-print-recovery-issue.is-warning { color: #d9bd88; }
.model3d-print-recovery-next {
  margin-top: var(--space-2);
  color: #c5c1b8;
  font-family: var(--sans);
}
.model3d-print-review-facts {
  margin-top: var(--space-1);
  color: #aaa69d;
}
.model3d-print-review-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.model3d-print-review-action {
  min-height: 34px;
  padding: var(--space-1) var(--space-2);
  color: #d5d1c7;
  background: transparent;
  border: 1px solid rgba(224, 221, 211, 0.22);
  border-radius: 7px;
  font: 11px/1.2 var(--sans);
  cursor: pointer;
}
.model3d-print-review-action:hover,
.model3d-print-review-action:focus-visible {
  color: #fff;
  background: rgba(232, 226, 210, 0.09);
}
.model3d-print-review-action.is-send {
  color: #f3eee3;
  border-color: rgba(220, 151, 106, 0.5);
}
.model3d-print-review-action:disabled {
  opacity: 0.48;
  cursor: wait;
}

/* === SECTION: model3d-digital-clay === */
.model3d-clay-action {
  color: #f0eee7;
  font-weight: 650;
}
.model3d-clay-action.is-active {
  color: #fff7ec;
  background: rgba(188, 121, 82, 0.24);
  border-color: rgba(220, 151, 106, 0.42);
  border-radius: 8px;
  padding-inline: var(--space-3);
}
.visual-presenter-surface.model3d-lightbox-card-host {
  align-items: stretch !important;
  overflow: hidden !important;
}
.model3d-lightbox-card-host > .meshy-asset-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
  overflow: auto;
}
.model3d-lightbox-card-host > .meshy-asset-card > .meshy-asset-surface {
  flex: 1 1 auto;
  height: auto;
  min-height: 300px;
}
.meshy-asset-card.is-sculpt-active { position: relative; }
.meshy-asset-card.is-sculpt-active > .meshy-asset-surface { min-height: 400px; }
.model3d-sculpt-toolbar {
  position: static;
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(220px, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--space-2) var(--space-2);
  color: #d2cfc7;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(224, 221, 211, 0.15);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  font: var(--text-xs)/1.35 var(--sans);
}
.model3d-sculpt-toolbar[hidden] { display: none; }
.meshy-asset-card.is-sculpting-stroke .model3d-sculpt-toolbar {
  opacity: 0.68;
  pointer-events: none;
}
.model3d-clay-tools {
  display: flex;
  min-width: 0;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.model3d-clay-tool,
.model3d-clay-preview-button,
.model3d-clay-accept,
.model3d-clay-discard,
.model3d-clay-undo,
.model3d-clay-redo {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  color: #bbb8b0;
  background: rgba(45, 48, 44, 0.92);
  border: 1px solid rgba(224, 221, 211, 0.14);
  border-radius: 8px;
  font: var(--text-xs)/1.2 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.model3d-clay-tool:hover,
.model3d-clay-session-actions button:hover,
.model3d-clay-preview-button:hover {
  color: #f3f1eb;
  border-color: rgba(224, 181, 148, 0.42);
}
.model3d-clay-undo:disabled,
.model3d-clay-redo:disabled {
  opacity: 0.38;
  cursor: default;
}
.model3d-clay-tool[aria-pressed="true"],
.model3d-clay-accept {
  color: #fff7ec;
  background: #704a36;
  border-color: rgba(224, 181, 148, 0.48);
}
.model3d-clay-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  min-width: 0;
}
.model3d-clay-settings label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.model3d-clay-settings input[type="range"] { min-width: 0; }
.model3d-clay-settings output {
  color: #96938c;
  font-family: var(--mono);
}
.model3d-clay-session-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.model3d-clay-status {
  grid-column: 1;
  min-width: 0;
  color: #aaa69d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model3d-clay-status.is-error { color: #efb2a6; }
.model3d-clay-describe-body {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
}
.model3d-clay-instruction {
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  box-sizing: border-box;
  color: #e1ded6;
  background: #151916;
  border: 1px solid rgba(224, 221, 211, 0.16);
  border-radius: 8px;
  font: var(--text-xs)/1.4 var(--sans);
}
.model3d-clay-preview-button:disabled { opacity: 0.48; cursor: wait; }
.model3d-clay-preview {
  position: absolute;
  z-index: 7;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: #c5c1b8;
  background: #171b18;
  border: 1px solid rgba(224, 221, 211, 0.14);
  border-radius: 12px;
  font: var(--text-xs)/1.45 var(--sans);
}
.model3d-clay-preview[hidden] { display: none; }
.model3d-clay-preview-surface {
  grid-column: 1 / -1;
  height: 260px;
  overflow: hidden;
  border: 1px solid rgba(224, 221, 211, 0.14);
  border-radius: 8px;
}
.model3d-clay-preview-summary { min-width: 0; color: #aaa69d; }
@media (max-width: 700px) {
  .model3d-sculpt-toolbar {
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: auto;
  }
  .model3d-clay-settings { grid-template-columns: 1fr 1fr; }
  .model3d-clay-session-actions { justify-content: flex-start; flex-wrap: wrap; }
  .model3d-clay-status,
  .model3d-clay-describe-body { grid-column: 1; }
  .model3d-clay-status { white-space: normal; }
  .model3d-clay-describe-body { grid-template-columns: 1fr; }
  .model3d-clay-preview { grid-template-columns: 1fr 1fr; }
  .model3d-clay-preview-summary { grid-column: 1 / -1; }
}
/* === END SECTION: model3d-digital-clay === */

/* The card in chat is dark in every theme, so its marks read the card's own ink. */
.meshy-asset-card .model3d-mark-panel,
.meshy-asset-card .model3d-mark-list,
.meshy-asset-card .model3d-mark-review {
  --ink: #dedbd3;
  --ink-soft: rgba(222, 219, 211, 0.72);
  --paper: #151815;
  --model3d-marks-backdrop: #151815;
  color: #aaa9a3;
}
.diagram-container {
  margin: 16px 0;
  overflow-x: auto;
}
.diagram-container.artifact-visual-card {
  margin: 16px 0;
}
.diagram-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.mermaid-diagram { text-align: center; }
.mermaid-diagram svg { max-width: 100%; height: auto; }
/* THE cause, measured: a mermaid node label is a <p>, so `#messages.line-code .msg-body p`
   (margin: 0 0 1.16em) wins over mermaid's in-SVG reset and adds ~15px INSIDE a foreignObject
   mermaid already baked at margin 0 — every label overruns its box by exactly that, and the node
   border cuts through the last line. Chat prose margins must not reach into SVG labels.
   htmlLabels:false at the init sites means flowcharts emit no <p> at all; this covers the types
   that still do. */
.mermaid-diagram p { margin: 0; }
/* Belt: mermaid bakes the label height at render time, so anything that reflows it afterwards
   still costs the last line. Let the label paint past the baked box rather than vanish.
   ponytail: one line, cause-agnostic. */
foreignObject { overflow: visible; }
.diagram-actions { margin-top: 8px; text-align: right; }
.diagram-dl-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.diagram-dl-btn:hover { color: var(--ink); }

/* ── Inline SVG render (raw <svg> emitted in a code fence) ── */
.svg-render-block { margin: 16px 0; }
.svg-render-canvas {
  max-width: 360px;
  padding: 16px;
  background: var(--paper-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.svg-render-canvas svg { width: 100%; height: auto; display: block; }
.svg-render-actions { margin-top: 8px; }
.svg-render-dl {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.svg-render-dl:hover { color: var(--ink); }
.svg-render-code { margin-top: 6px; }
.svg-render-code summary {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  list-style: none;
}
.svg-render-code summary:hover { color: var(--ink-soft); }
.svg-render-code pre { margin-top: 8px; }

/* ── Charts (ECharts — Chart.js legacy fallback kept) ── */
.chart-container {
  margin: 16px 0;
  padding: 16px;
  background: var(--paper-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.chart-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.chart-canvas { width: 100% !important; }
.chart-actions { margin-top: 8px; text-align: right; }
.chart-dl-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.chart-dl-btn:hover { color: var(--ink); }

/* ── Sketches (Mermaid handDrawn — Rough.js legacy fallback kept) ── */
.sketch-container {
  margin: 16px 0;
  padding: 16px;
  background: var(--paper-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow-x: auto;
}
.sketch-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.sketch-canvas { max-width: 100%; display: block; margin: 0 auto; }
.sketch-actions { margin-top: 8px; text-align: right; }
.sketch-dl-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.sketch-dl-btn:hover { color: var(--ink); }

/* ── Concept Maps (Cytoscape.js) ─────────────────────── */
.concept-map-container {
  margin: 16px 0;
  padding: 16px;
  background: var(--paper-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.concept-map-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.concept-map-canvas {
  width: 100%;
  height: 420px;
  border-radius: 4px;
  overflow: hidden;
}
.concept-map-actions { margin-top: 8px; text-align: right; }
.concept-map-dl-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0 4px 12px;
  transition: color 0.15s;
}
.concept-map-dl-btn:hover { color: var(--ink); }

/* ── Mind Maps (Mind-Elixir) ─────────────────────────── */
.mind-map-container {
  margin: 16px 0;
  padding: 16px;
  background: var(--paper-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.mind-map-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.mind-map-canvas {
  width: 100%;
  height: 420px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.mind-map-actions { margin-top: 8px; text-align: right; }
.mind-map-dl-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0 4px 12px;
  transition: color 0.15s;
}
.mind-map-dl-btn:hover { color: var(--ink); }

/* ── Formula (KaTeX) ─────────────────────────────────── */
.formula-container {
  margin: 12px 0;
  padding: 16px 20px;
  background: var(--surface, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 6px;
}
.formula-title {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.formula-display {
  text-align: center;
  overflow-x: auto;
}
.formula-inline {
  display: inline-block;
}
.formula-output .katex { font-size: 1.15em; }
.formula-display .katex-display { margin: 0; }

/* === SECTION: ground-map-and-artifacts === */
/* 3D Code Map (themes + scope graph) and the Artifacts rail share this shell: same
   header, same paddings. Artifacts owns one extra child, the scrolling card list. */
#ground-map-view,
#artifacts-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
#ground-map-view {
  padding: 0;
  overflow: hidden;
}
#artifacts-view {
  padding: 20px 24px;
  overflow: hidden;
}
/* Shelf mount, worn by the Artifacts rail and by Library › Visuals (#lib-visuals-container).
   It must be a flex column with min-height:0, or the grid inside it cannot own the scroll and
   the archive gets silently clipped instead of scrolling. */
.artifacts-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.visuals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.visuals-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.visuals-header-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.visual-ground-area {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.visual-graph-3d {
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
}
.visual-layer-controls {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-dim);
}
.visual-mode-switch {
  display: flex;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  overflow-x: auto;
  pointer-events: auto;
  scrollbar-width: none;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--chrome-bg) 91%, transparent);
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.72);
}
.visual-mode-switch::-webkit-scrollbar { display: none; }
.visual-mode-switch-button {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.visual-mode-switch-button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.visual-mode-switch-button[aria-pressed="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent, #62a6ff) 22%, transparent);
  cursor: default;
}
.visual-mode-switch-button:focus-visible,
.visual-layer-menu > summary:focus-visible,
.visual-layer-toggle:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 70%, transparent);
  outline-offset: 1px;
}
.visual-layer-menu {
  position: relative;
  flex: 0 0 auto;
  pointer-events: auto;
}
.visual-layer-menu > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--chrome-bg) 91%, transparent);
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.72);
}
.visual-layer-menu > summary::-webkit-details-marker { display: none; }
.visual-layer-menu > summary::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform .12s ease;
}
.visual-layer-menu[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.visual-layer-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 180px;
  max-height: min(360px, 62vh);
  padding: 5px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  background: var(--chrome-bg);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.85);
}
.visual-layer-toggle {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 7px;
  border-radius: 5px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.visual-layer-toggle:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.visual-layer-toggle input {
  margin: 0;
  accent-color: var(--accent, #62a6ff);
}
.visual-layer-warning {
  align-self: center;
  justify-self: end;
  pointer-events: none;
  color: var(--danger, #d65f5f);
}
.visual-scope-status {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.visual-graph-window-note,
.visual-runtime-overlay-note {
  max-width: min(520px, calc(100vw - 80px));
  padding: 5px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--chrome-bg) 88%, transparent);
  color: var(--ink-dim);
  line-height: 1.35;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.72);
}
.visual-runtime-overlay-note { color: var(--ink-soft); }
.visual-insight {
  font-family: var(--serif);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.visual-empty-hint {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  line-height: 1.7;
  padding: 32px 0;
}
.visual-loading {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  padding: 32px 0;
  animation: pulse-opacity 1.4s ease-in-out infinite;
}
@keyframes pulse-opacity { 0%,100%{opacity:0.4} 50%{opacity:1} }
.visual-error {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  padding: 16px 0;
}
.visual-error-recoverable {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 96px 24px 24px;
  text-align: center;
}
.visual-error-retry {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font: 600 11px/1 var(--sans);
  cursor: pointer;
}
.visual-error-retry:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.visual-error-retry:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 70%, transparent);
  outline-offset: 2px;
}
/* === SECTION: visual-archive-shelf === */
/* Library › Visuals and the Artifacts rail share this shelf. It reads as a tile grid, not a
   text log: preview first, caption under it. One kind breaks the grid on purpose — a 3D card
   carries its own toolbars and viewer, so it takes the whole row. */
.lib-visuals-import-toolbar {
  align-items: center;
  margin-bottom: 12px;
}
.lib-visuals-import-status {
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
}
.lib-visuals-import-status[data-phase="done"] { color: var(--pass, #4f8a65); }
.lib-visuals-import-status[data-phase="error"] { color: var(--red); }
.visual-archive-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.visual-archive-count {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-left: auto;
  flex-shrink: 0;
}
.visual-archive-filter {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.visual-archive-filter:hover { color: var(--ink-soft); }
.visual-archive-filter.active {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.visual-archive-filter:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 70%, transparent);
  outline-offset: 2px;
}
.lib-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 16px;
}
.lib-visual-grid > .visual-archive-load-more { grid-column: 1 / -1; }
.lib-visual-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  transition: border-color 0.15s, background 0.15s;
}
.lib-visual-card:hover { border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
.lib-visual-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 70%, transparent);
  outline-offset: 2px;
}
/* A 3D card is a full workspace, not a thumbnail: it spans the row and keeps its own chrome. */
.lib-visual-card.is-wide { grid-column: 1 / -1; padding: 0; border-color: transparent; background: none; }
.lib-visual-card.is-wide .lib-visual-card-header { padding: 0 2px; }
.lib-visual-card.is-wide .lib-visual-summary {
  min-height: 0;
  max-height: none;
  display: block;
  background: none;
  border-radius: 0;
}
/* Preview above caption without reordering the DOM the delete/transfer handlers walk. */
.lib-visual-summary {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  max-height: 132px;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.lib-visual-summary.is-text {
  display: block;
  padding: 10px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
  overflow: hidden;
}
.lib-visual-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lib-visual-media-audio { width: 100%; padding: 0 8px; }
.lib-visual-card-header {
  order: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.lib-visual-type { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.lib-visual-name {
  order: -1;
  flex: 1 0 100%;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-visual-date { color: var(--ink-dim); flex-shrink: 0; margin-left: auto; }
/* Review/lock state as a quiet chip, not another uppercase label competing with the kind. */
.lib-visual-badge {
  flex-shrink: 0;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: calc(var(--text-xs) - 1px);
  line-height: 1.4;
}
.lib-visual-delete { background: none; border-color: transparent; cursor: pointer; color: var(--ink-dim); font-size: 15px; line-height: 1; padding: 2px 7px; flex-shrink: 0; }
.lib-visual-delete:hover { color: var(--ink); }
/* Cross-project transfer control — pinned like the other header actions so a long title
   cannot squeeze it out of the flex row (its old class carried no rule at all). */
.lib-visual-open, .lib-visual-transfer { flex-shrink: 0; }
.lib-visual-transfer { color: var(--ink-dim); }
.lib-visual-transfer:hover { color: var(--ink); }
.visual-ranked-list { display: flex; flex-direction: column; gap: 8px; }
.visual-rank-row { display: flex; align-items: center; gap: 10px; }
.visual-rank-label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  width: 160px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visual-rank-bar {
  height: 6px;
  border-radius: 3px;
  min-width: 4px;
  transition: width 0.4s ease;
  background: var(--ink-dim);
}
.visual-rank-bar.tension  { background: #e07b4f; }
.visual-rank-bar.decision { background: #6b9fd4; }
.visual-rank-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  flex-shrink: 0;
}

/* ── Presentations (Reveal.js) ───────────────────────── */
html.reveal-full-page { width: auto !important; height: auto !important; overflow: visible !important; }
body.reveal-viewport, #main-content.reveal-viewport { height: auto !important; overflow: visible !important; }
#presentation-modal .reveal { font-family: var(--serif); }
#presentation-modal .reveal h1,
#presentation-modal .reveal h2,
#presentation-modal .reveal h3 { font-family: var(--serif); font-weight: 400; }
#presentation-modal .reveal p,
#presentation-modal .reveal li { font-family: var(--sans); font-size: 0.7em; line-height: 1.7; }
#presentation-modal .reveal blockquote { border-left: 2px solid var(--rule); padding-left: 20px; font-style: italic; }
#presentation-modal .reveal .controls { color: rgba(184,150,11,0.6); }
#presentation-modal .reveal .progress { color: rgba(184,150,11,0.4); height: 3px; }
#presentation-close { transition: opacity 0.15s; }
#presentation-close:hover { opacity: 0.7; }


/* ─── BOARD SUBSTRATE ─── */
/* The ambient canvas is a framed panel in the empty gutter LEFT of the chat column, anchored
   to #work-row. It used to be a fixed full-viewport layer at z 1, which the opaque
   #main-content background covered entirely — nothing drawn on it was ever visible.
   Width tracks the gutter the centred chat column leaves behind and clamps to 0 when the
   column fills the row, so the panel can never overlap the transcript.
   The offset parent must stay #work-row, never the chat wrap: the wrap shrinks when a flex
   rail (#right-panel, #right-side-panel) opens, which squeezed the panel out of the gutter.
   work-row's own width is rail-invariant, so an open rail covers the panel at z 5-7 instead
   of pushing it aside — which is why z-index here must stay BELOW the rails.
   z-index must stay ABOVE .messages: .messages is position:relative and later in DOM, so
   at z 0 it paints AND hit-tests over the gutter — which left the pin button unclickable.
   The frame is pointer-events:none, so sitting above the transcript costs nothing.
   NO CHROME UNTIL THERE IS INK: the tint, the edge and the pin all hang off .has-marks,
   set by window.backgroundCanvas.mark(). An always-painted frame put a large empty box in
   the gutter that read as broken UI. The ring is an inset shadow, not a border, so gaining
   it never changes clientWidth and never re-triggers the canvas ResizeObserver. */
#board-canvas-frame {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: clamp(0px, calc((100% - 780px) / 2 - 28px), 320px);
  overflow: hidden;
  border-radius: 6px;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  transition: background-color 0.2s, box-shadow 0.2s;
}
#board-canvas-frame.has-marks {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
#boardCanvas {
  display: block;
  width: 100%;
  height: 100%;
}
#board-canvas-pin {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  /* Hidden with the rest of the chrome until there is something to pin, and never a
     0-opacity click trap. Not hover-gated on the frame: the frame is pointer-events:none so
     the gutter stays click-through for chat scrolling, which means :hover never fires on it.
     The button re-enables pointer events for itself alone. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, color 0.15s;
}
#board-canvas-frame.has-marks #board-canvas-pin { opacity: 0.22; pointer-events: auto; }
#board-canvas-frame.has-marks #board-canvas-pin:hover,
#board-canvas-frame.has-marks #board-canvas-pin.is-pinned { opacity: 1; }
#board-canvas-pin:hover { color: var(--ink); }
#board-canvas-pin.is-pinned { color: var(--accent, #2fe3b3); }

/* ─── STICKY NOTES — free-floating, draggable scratchpad ─── */
/* #gi-sticky-tab is a standard .nav-item; only its icon gets a slight diagonal tilt
   to read as a stuck-on note. The rail no longer scales icons on hover, so the
   tilt is the whole treatment. */
#gi-sticky-tab svg { transform: rotate(-8deg); }

/* Full-viewport layer holding the free notes; click-through except on the notes.
   z 2: above the canvas (z 1) but BELOW every panel (context/task 5, side/work-rail 6,
   resize 7) and the rail (aside 200) — so any panel or the rail covers the notes. */
#gi-sticky-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.gi-sticky-note {
  position: fixed;
  width: 200px;
  pointer-events: auto;
  background: var(--paper);
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 8px 18px -8px rgba(0, 0, 0, 0.42);
  transform: rotate(var(--r, 0deg));
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
  cursor: grab;
}
.gi-sticky-note:hover { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.20), 0 14px 28px -8px rgba(0, 0, 0, 0.50); }
.gi-sticky-note:focus-within { transform: rotate(0deg); }
.gi-sticky-note.dragging {
  cursor: grabbing;
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 18px 34px -8px rgba(0, 0, 0, 0.55);
  transition: box-shadow 120ms ease;
}

/* Shape pluralism — varied footprints, square <-> rectangle. */
.gi-sticky-note[data-shape="0"] { width: 190px; }
.gi-sticky-note[data-shape="0"] textarea { min-height: 118px; }
.gi-sticky-note[data-shape="1"] { width: 212px; }
.gi-sticky-note[data-shape="1"] textarea { min-height: 92px; }
.gi-sticky-note[data-shape="2"] { width: 168px; }
.gi-sticky-note[data-shape="2"] textarea { min-height: 150px; }
.gi-sticky-note[data-shape="3"] { width: 228px; }
.gi-sticky-note[data-shape="3"] textarea { min-height: 102px; }
.gi-sticky-note[data-shape="4"] { width: 158px; }
.gi-sticky-note[data-shape="4"] textarea { min-height: 152px; }
/* Tape strip — frosted band, the universal sticky-note tell. */
.gi-sticky-note::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 54px;
  height: 15px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 1px;
  pointer-events: none;
}
/* Peel — folded bottom-right corner, the board showing through. */
.gi-sticky-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 0 13px 13px;
  border-style: solid;
  border-color: transparent transparent var(--chrome-bg) transparent;
  filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.25));
}
.gi-sticky-note:hover,
.gi-sticky-note:focus-within {
  transform: rotate(0deg) translateY(-3px) scale(1.012);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.20), 0 12px 26px -8px rgba(0, 0, 0, 0.50);
  z-index: 1;
}
.gi-sticky-note textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  padding: 15px 22px 13px 22px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  cursor: grab;
  pointer-events: none;            /* whole card is the drag surface… */
}
.gi-sticky-note.editing textarea { /* …until you click in to edit */
  pointer-events: auto;
  cursor: text;
}
.gi-sticky-note textarea::placeholder {
  color: var(--ink-dim);
  font-style: italic;
  opacity: 0.55;
}
.gi-sticky-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.gi-sticky-note:hover .gi-sticky-del { opacity: 0.7; }
.gi-sticky-del:hover { opacity: 1; background: var(--rule); color: var(--ink); }

/* Muted note tints — the hue mixed into paper, so each note is a soft coloured
   sheet (never a shiny wash) and stays calm on light AND dark palettes. */
.gi-sticky-note[data-color="amber"] { background: color-mix(in srgb, #d4af37 17%, var(--paper)); border-color: color-mix(in srgb, #d4af37 32%, var(--rule)); }
.gi-sticky-note[data-color="sage"]  { background: color-mix(in srgb, #78a06e 17%, var(--paper)); border-color: color-mix(in srgb, #78a06e 32%, var(--rule)); }
.gi-sticky-note[data-color="sky"]   { background: color-mix(in srgb, #6094c4 17%, var(--paper)); border-color: color-mix(in srgb, #6094c4 32%, var(--rule)); }
.gi-sticky-note[data-color="rose"]  { background: color-mix(in srgb, #c8788a 17%, var(--paper)); border-color: color-mix(in srgb, #c8788a 32%, var(--rule)); }
.gi-sticky-note[data-color="lilac"] { background: color-mix(in srgb, #9680c4 17%, var(--paper)); border-color: color-mix(in srgb, #9680c4 32%, var(--rule)); }

/* Colour dot — sits left of the delete ×, reveals on hover. */
.gi-sticky-color {
  position: absolute;
  top: 6px;
  right: 24px;
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease;
}
.gi-sticky-note:hover .gi-sticky-color,
.gi-sticky-note.show-swatches .gi-sticky-color { opacity: 0.75; }
.gi-sticky-color:hover { opacity: 1 !important; }

/* Swatch popover — only on demand, no layout shift. */
.gi-sticky-swatches {
  position: absolute;
  top: 24px;
  right: 4px;
  z-index: 2;
  display: none;
  gap: 6px;
  padding: 6px;
  background: var(--chrome-bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.gi-sticky-note.show-swatches .gi-sticky-swatches { display: flex; }
.gi-sticky-swatches button {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: transform 120ms ease;
}
.gi-sticky-swatches button:hover { transform: scale(1.18); }

/* Entry animation — panel fades/slides in on expand (calm two-phase mount). */
#gi-sticky-dock:not(.collapsed) #gi-sticky-panel {
  animation: giStickyIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes giStickyIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Drag handle — reveals on hover, top-left. Reorder by priority. */
.gi-sticky-grip {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  cursor: grab;
  opacity: 0;
  transition: opacity 140ms ease;
}
.gi-sticky-note:hover .gi-sticky-grip { opacity: 0.55; }
.gi-sticky-grip:hover { opacity: 1; }
.gi-sticky-grip:active { cursor: grabbing; }
.gi-sticky-note.dragging { opacity: 0.5; transform: rotate(0deg); box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.55); }

.shell {
  position: relative;
  z-index: 10;
  background: transparent;
}
.sidebar {
  background: transparent;
}
.main {
  background: transparent;
}


/* ── Right-align chat on full viewport ── */
@media (min-width: 860px) {
  .msg-row,
  .journal-inline, .journal-inline-phase,
  .thinking-row, .depth-trace {
    margin-left: auto;
    margin-right: 54px;
  }
  .input-zone {
    margin: 0 auto;
  }
}

/* ── Upload pages ──────────────────────────────────────── */
.upload-drop-zone {
  border: 2px dashed var(--rule);
  border-radius: 12px;
  padding: 48px 24px 32px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
  max-width: 560px;
  margin: 0 auto;
}
.upload-drop-zone.drag-over {
  border-color: var(--accent, var(--ink));
  background: rgba(255,255,255,0.03);
}
.upload-drop-icon {
  font-size: 28px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  opacity: 0.5;
}
.upload-drop-text {
  font-family: var(--prose);
  font-size: var(--text-md);
  color: var(--ink);
  margin-bottom: 4px;
}
.upload-drop-sub {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.upload-drop-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.upload-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 50vh;
  overflow-y: auto;
  max-width: 560px;
  margin: 0 auto;
}
.upload-file-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.upload-file-row .file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.upload-file-row .file-title-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink);
}
.upload-file-row .file-status {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}
.upload-file-row .file-status.done { color: var(--green, #4fa896); }
.upload-file-row .file-status.error { color: var(--red, #b03020); }
.upload-file-row .file-remove {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: var(--text-md);
  padding: 0 2px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.upload-file-row .file-remove:hover { opacity: 1; }
.upload-write-zone {
  max-width: 560px;
  margin: 0 auto;
}
.upload-write-zone textarea {
  line-height: 1.6;
}
#ground-upload-queue, #xfiles-upload-queue,
#ground-upload-progress, #xfiles-upload-progress {
  max-width: 560px;
  margin: 0 auto;
}


/* ── Session-wide UI fixes & polish (rounds 1–3) ────────── */

/* Focus ring — keyboard nav (buttons & links only; inputs have their own focus styling) */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #4fa896;
  outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible {
  outline: none;
}

/* Bookmark jump pulse */
@keyframes bookmark-pulse {
  0%   { background: rgba(79,168,150,0); }
  20%  { background: rgba(79,168,150,0.12); }
  100% { background: rgba(79,168,150,0); }
}
.msg-row.bookmark-pulse {
  animation: bookmark-pulse 1.2s ease-out forwards;
  border-radius: 6px;
}

/* Smooth scroll on messages & common scrollable containers */
.messages,
.notes-list,
.context,
.book-tabs,
.panel-view-slot,
.bookmark-tray-list {
  scroll-behavior: smooth;
}
/* During streaming, disable smooth scroll — rapid scrollToBottom calls fight each other */
.messages.is-streaming { scroll-behavior: auto; }

/* Dark mode dropdown shadow lift — replace dark-on-dark with faint glow */
body.dark .lines-nav-menu,
body.dark .project-switcher-menu,
body.dark .context-add-menu,
body.dark .book-edge-panel,
body.dark .ctx-menu,
body.dark .sess-tab-menu,
body.dark .sketch-board-dropdown {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

/* Mount animation for list items */
@keyframes item-arrive {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.note-item,
.context-item,
.file-item,
.source-item,
.bookmark-tray-item {
  animation: item-arrive 0.2s ease-out both;
}

/* Disabled states for cycle-btn and t-btn */
.cycle-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.t-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Context item-x — larger touch target via padding */
.context-item-x {
  padding: 4px 6px;
  margin: -4px -6px;
}

/* Checklist done — smooth text fade + strikethrough */
.cl-text {
  transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
  text-decoration-color: transparent;
}
.cl-done .cl-text {
  text-decoration: line-through;
  text-decoration-color: var(--ink-dim);
}

/* ── Conversational signup messages ── */
.landing-msg {
  display: flex;
  justify-content: flex-start;
  padding: 4px 24px;
  animation: landing-msg-in 0.3s ease forwards;
}
.landing-msg-user { justify-content: flex-end; }

@keyframes landing-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.landing-msg-bubble {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 480px;
}
.landing-msg-user .landing-msg-bubble {
  color: var(--ink-dim);
  font-style: italic;
}

/* trial card */
.landing-trial-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-top: 4px;
}
.landing-trial-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.landing-trial-n {
  font-family: var(--mono);
  font-size: 28px;
  color: var(--ink);
  line-height: 1;
}
.landing-trial-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-dim);
}
.landing-trial-modes {
  gap: 8px;
}
.landing-trial-mode {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.landing-trial-sep {
  color: var(--ink-ghost);
  font-size: 11px;
}
.landing-trial-signin {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-ghost);
  text-decoration: none;
  margin-top: 4px;
}
.landing-trial-signin:hover { color: var(--ink-dim); }

/* Timeline */
.tl-wrap {
  position: relative;
  margin: 28px 20px 20px;
  height: 80px;
}
.tl-line {
  position: absolute;
  top: 28px;
  left: 0; right: 0;
  height: 2px;
  background: rgba(150,150,150,0.2);
  border-radius: 1px;
}
.tl-event {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tl-event:hover .tl-dot { transform: scale(1.4); }
.tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 23px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.tl-label {
  position: absolute;
  top: -18px;
  font-size: 9px;
  font-family: var(--mono);
  color: var(--ink-dim);
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.tl-date {
  position: absolute;
  top: 38px;
  font-size: 9px;
  font-family: var(--mono);
  white-space: nowrap;
  opacity: 0.7;
}
.tl-detail-box {
  margin: 0 20px 16px;
  padding: 10px 14px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--ink-dim);
  line-height: 1.6;
}

/* Comparison Matrix */
.cm-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  font-family: var(--mono);
}
.cm-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.cm-table td {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
  color: var(--ink);
  vertical-align: top;
}
.cm-row-label {
  font-weight: 600;
  background: transparent !important;
  color: var(--ink-dim) !important;
  white-space: nowrap;
  font-size: 11px !important;
}

/* Nested Outline */
.ol-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--sans);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.ol-list {
  list-style: none;
  margin: 0;
  padding-left: 16px;
}
.ol-list .ol-list { padding-left: 20px; }
.ol-item { margin: 3px 0; }
.ol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.ol-row:hover { background: rgba(255,255,255,0.04); }
.ol-toggle {
  font-size: 10px;
  color: var(--ink-dim);
  width: 12px;
  flex-shrink: 0;
  user-select: none;
}
.ol-dot {
  font-size: 14px;
  color: var(--ink-ghost);
  width: 12px;
  flex-shrink: 0;
}
.ol-label {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--ink);
  line-height: 1.5;
}
.ol-children { margin-top: 2px; }

/* ── Presentation inline ─────────────────────────────────────────────────── */
.presentation-container {
  margin: 8px 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.presentation-inline-frame {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
  background: #0f0e0c;
}
.presentation-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--rule);
  background: rgba(255,255,255,0.02);
}
.pres-btn {
  font-size: 11px;
  font-family: var(--mono);
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.pres-btn:hover { color: var(--ink); border-color: rgba(255,255,255,0.2); }
.pres-btn:disabled { opacity: 0.4; cursor: default; }
.pres-btn-del { margin-left: auto; color: rgba(200,100,60,0.6); }
.pres-btn-del:hover { color: rgba(200,100,60,0.9); border-color: rgba(200,100,60,0.4); }

/* ── Draft save bar ─────────────────────────────────────────────────────── */
.draft-save-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, rgba(200,194,184,0.12));
}
.draft-save-btn {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  background: none;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}
.draft-save-btn:hover { color: var(--ink); border-color: var(--border, rgba(200,194,184,0.25)); }
.draft-save-btn:disabled { cursor: default; opacity: 0.5; }

/* task focus transition marker in chat — rule + "Focus — [title]" label + rule */
.task-transition-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  padding: 0 24px;
}
.task-transition-row-rule {
  flex: 1;
  height: 1px;
  border: none;
  background: var(--ttr-color, #3aad7c);
  opacity: 0.28;
}
.task-transition-row-rule.right { opacity: 0.12; }
.task-transition-row-label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ttr-prefix { color: var(--ink-ghost); }
.ttr-name   { color: var(--ttr-color, #3aad7c); opacity: 0.75; }

/* ── Context Panel ──────────────────────────────────────────────────────── */
:root {
  --ctx-rules:    var(--pass-1);
  --ctx-info:     var(--pass-4);
  --ctx-keep:     var(--pass-2);
  --ctx-question: var(--pass-5);
  --ctx-goal:     var(--pass-3);
  --ctx-task:     #3aad7c;
}
/* ── Context Panel ─────────────────────────────────────────────────────────── */
#context-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  z-index: 5;
}
#context-panel.active {
  width: var(--cp-width);
}
/* Attach (paperclip) control — third row of the frame head, right under "+ skill". */
#context-panel .ctx-add-actions .cp-attach-btn {
  width: 22px;
  height: 22px;
  opacity: 0.7;
  /* Sits a little below "+ skill", glyph flush with the panel's right edge. */
  margin-top: 6px;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
}
#context-panel .ctx-add-actions .cp-attach-btn:hover { opacity: 1; }
/* Stand the diagonal paperclip glyph upright (its axis runs along "/", so rotate CCW). */
#context-panel .cp-attach-btn svg { width: 13px; height: 13px; transform: rotate(-45deg); }
#context-panel .side-panel-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Resize handle */
#context-panel-resize-handle {
  width: 2px;
  position: absolute;
  right: 0; top: 0; bottom: 0;
  cursor: col-resize;
  background: transparent;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.05);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  display: none;
  z-index: 6;
}
#context-panel-resize-handle:hover {
  background: rgb(100, 155, 210);
}
#work-row:has(#context-panel.active) #context-panel-resize-handle { display: flex; right: var(--cp-width); }
#context-panel-resize-handle:hover .rh-grip,
#context-panel-resize-handle.dragging .rh-grip { color: #2ec4b6; border-color: #2ec4b6; }
#context-panel-resize-handle .rh-action,
#context-panel-resize-handle .rh-grip { display: none; }
#context-panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 28px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 18%, var(--paper));
  transition: background 0.2s;
}
#context-panel-resize-handle:hover::after {
  background: rgb(130, 175, 225);
}
#work-row:has(#context-panel-resize-handle.dragging) #context-panel { transition: none; }

/* Bar */
#context-panel-bar {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
}
#context-panel.active #context-panel-bar { display: flex; }
#context-panel-bar-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

#ctx-panel-hint {
  display: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-ghost);
  padding: 0 16px 10px;
  line-height: 1.4;
}
#context-panel.active #ctx-panel-hint { display: block; }

/* View slot */
#context-panel-view-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}
#context-panel-view-slot > .view-panel {
  position: relative !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  max-width: none !important;
  contain: none !important;
  flex: 1 !important;
  overflow-y: visible !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  padding: 10px 12px !important;
}
#context-panel-view-slot .file-list,
#context-panel-view-slot .notes-list,
#context-panel-view-slot .xfiles-list,
#context-panel-view-slot .transmissions-list,
#context-panel-view-slot .visuals-grid,
#context-panel-view-slot .library-list,
#context-panel-view-slot .view-list {
  gap: 8px !important;
}
#context-panel-view-slot .file-item,
#context-panel-view-slot .note-item,
#context-panel-view-slot .xfile-item,
#context-panel-view-slot .tx-card,
#context-panel-view-slot .visual-card,
#context-panel-view-slot .library-card,
#context-panel-view-slot .view-card {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
#context-panel-view-slot .toolbar { display: none !important; }

/* Collapsed strip */
#context-panel.collapsed {
  width: 6px;
  cursor: pointer;
}
#context-panel.collapsed #context-panel-bar,
#context-panel.collapsed #context-panel-view-slot { display: none; }
#work-row:has(#context-panel.collapsed) #context-panel-resize-handle { display: none; }
#work-row:has(#context-panel.collapsed) .messages { margin-right: 6px; }

/* Reserve the right CP lane for both the transcript and composer. */
#work-row:has(#context-panel.active) .messages,
#work-row:has(#context-panel.active) .input-zone {
  margin-right: var(--cp-width);
  transition: margin-right 0.2s ease;
}
#work-row:has(#context-panel.active) .input-zone {
  width: calc(100% - var(--cp-width));
}
#work-row:has(#context-panel-resize-handle.dragging) .messages,
#work-row:has(#context-panel-resize-handle.dragging) .input-zone { transition: none; }
#work-row:has(#context-panel.active) .book-tabs,
#work-row:has(#context-panel.active) .book-edge-panel { pointer-events: none; }

/* Context in context panel */
#ctx-context-clip {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 20;
}
#ctx-context-items {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 8px 10px 6px;
  gap: 8px;
  max-height: 50%;
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 9;
  position: relative;
}
#ctx-context-items::-webkit-scrollbar { display: none; }
#ctx-context-items .context-item {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ctx-context-items .context-sep { display: none; }

/* Hover cursor + card insert */
#ctx-add-cursor {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  font-size: 20px;
  font-weight: 300;
  color: var(--ink-dim);
  line-height: 1;
  user-select: none;
  z-index: 20;
}
/* Done region — bottom 1/3 of CP, scrolls independently from active task region. */
#ctx-done-region {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
  border-top: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
}
#ctx-done-region::-webkit-scrollbar { display: block; width: 4px; }
#ctx-done-region::-webkit-scrollbar-track { background: transparent; }
#ctx-done-region::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 2px; }
#ctx-done-search {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px 6px 11px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 40%, transparent);
  outline: none;
}
#ctx-done-search::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); }
#ctx-done-search:focus { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ctx-team-role { color: var(--ink-mid); font-weight: 500; }
.ctx-team-sep  { color: var(--ink-faint); }
.ctx-team-model { color: var(--ink-faint); }
.ctx-task-status {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.ctx-task-status.open { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.ctx-task-status.complete { background: var(--ink-ghost, rgba(255,255,255,0.06)); color: var(--ink-muted, #888); }
.ctx-task-lane-states {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  max-width: 112px;
  overflow: hidden;
}
.ctx-task-lane-chip {
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 6px 4px;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  background: transparent;
  white-space: nowrap;
}
.ctx-task-lane-chip[data-state="active"] { color: #c89137; background: color-mix(in srgb, #c89137 9%, transparent); }
.ctx-task-lane-chip[data-state="running"] { color: #6b9fd4; background: color-mix(in srgb, #6b9fd4 8%, transparent); }
.ctx-task-lane-chip[data-state="blocked"] { color: #c06030; background: color-mix(in srgb, #c06030 10%, transparent); }
.ctx-task-lane-chip[data-state="ready"] { color: #6ba56b; background: color-mix(in srgb, #6ba56b 10%, transparent); }
.ctx-task-lane-chip[data-state="covered"] { color: color-mix(in srgb, var(--ink) 32%, transparent); }
.ctx-task-lane-chip[data-state="complete"] { color: color-mix(in srgb, #6ba56b 55%, transparent); }
.ctx-task-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 3px 0 0 24px;
}
.ctx-task-meta-chip {
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  padding: 3px 6px 4px;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  white-space: nowrap;
}
@keyframes ctxSigSpin { to { transform: rotate(360deg); } }
.ctx-task-def {
  font-size: 12px; color: var(--ink-muted, #888);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px;
}
.ctx-task-next {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  padding-bottom: 8px;
  word-break: break-word;
}
.ctx-task-todo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
}
.ctx-task-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.ctx-task-todo-item.done {
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  text-decoration: line-through;
}
.ctx-task-todo-box { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; }
.ctx-task-todo-box svg { width: 14px; height: 14px; }
.ctx-task-todo-label { word-break: break-word; }
.ctx-task-body-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ctx-task-merge-chip {
  color: #6ba56b;
  border: 1px solid color-mix(in srgb, #6ba56b 34%, transparent);
  border-radius: 999px;
  padding: 3px 7px 4px;
  background: color-mix(in srgb, #6ba56b 10%, transparent);
  text-transform: uppercase;
}
@keyframes status-bar-spin { to { transform: rotate(360deg); } }
/* Lane badge dots (orange/green/red right-aligned PTY state) — hidden. Status bar covers this signal now. */
.lane-badge-dot { display: none !important; }
/* Kind-dot quick-create buttons */
.ctx-kind-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}
.ctx-kind-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.12s;
  flex-shrink: 0;
}
.ctx-kind-dot:hover { opacity: 1; transform: scale(1.25); }
.ctx-kind-dot[data-kind="rules"] { background: var(--ctx-rules); }
.ctx-kind-dot[data-kind="info"]  { background: var(--ctx-info);  }
.ctx-kind-dot[data-kind="keep"]  { background: var(--ctx-keep);  }
.ctx-kind-dot[data-kind="goal"]  { background: var(--ctx-goal);  }
.ctx-kind-dot[data-kind="task"]  { background: var(--ctx-task);  }
/* Context Panel prompt + skill actions (+ prompt with + skill stacked under it) */
#context-panel-frame #ctx-add-new,
#context-panel-frame #ctx-add-skill {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  justify-content: flex-end;
  height: 28px;
  min-height: 28px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0;
  text-align: right;
  transition: color 0.15s;
}
#context-panel-frame #ctx-add-new:hover,
#context-panel-frame #ctx-add-skill:hover {
  color: var(--ink);
}
#context-panel-frame #ctx-add-new:focus-visible,
#context-panel-frame #ctx-add-skill:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent, #3aad7c) 70%, transparent);
  outline-offset: 2px;
}
.ctx-add-actions {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 8;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
#context-panel-frame .ctx-add-actions #ctx-add-skill {
  height: 22px;
  min-height: 22px;
}
.context-panel-frame-head {
  flex: 0 0 auto;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}
#context-panel-frame .context-panel-frame-head #ctx-add-new {
  align-self: flex-end;
}
#context-panel-frame-title {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  min-height: 28px;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, #cfd8d2 48%, transparent);
  opacity: 1;
}
#ctx-add-clip {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ink-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
#ctx-add-clip:hover { color: var(--ink); }
#ctx-add-clip svg { width: 14px; height: 14px; }
/* ── Done task list ──────────────────────────────────────────────── */
.ctx-done-list {
  margin: auto 8px 4px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.ctx-done-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  user-select: none;
}
.ctx-done-header:hover { color: color-mix(in srgb, var(--ink) 58%, transparent); }
.ctx-done-chevron { font-size: 9px; }
.ctx-done-body { overflow: hidden; }
.ctx-done-body--collapsed { display: none; }
.ctx-done-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 2px;
  cursor: pointer;
}
.ctx-done-item:hover .ctx-done-title { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.ctx-done-item:hover .ctx-done-check { color: color-mix(in srgb, var(--ink) 50%, transparent); }
.ctx-done-check {
  flex-shrink: 0;
  display: flex;
  color: color-mix(in srgb, var(--ink) 28%, transparent);
}
.ctx-done-check svg { width: 13px; height: 13px; }
.ctx-done-title {
  font-family: var(--mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink) 20%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kind popover */
.ctx-kind-popover {
  position: fixed;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 3px 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ctx-kind-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.ctx-kind-pill:hover { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); color: var(--ink); }
.ctx-kind-pill-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--ink-dim);
}
.ctx-kind-pill[data-kind="rules"] .ctx-kind-pill-swatch { background: var(--ctx-rules); }
.ctx-kind-pill[data-kind="info"]  .ctx-kind-pill-swatch { background: var(--ctx-info);  }
.ctx-kind-pill[data-kind="keep"]  .ctx-kind-pill-swatch { background: var(--ctx-keep);  }
.ctx-kind-pill[data-kind="goal"]  .ctx-kind-pill-swatch { background: var(--ctx-goal);  }
.ctx-kind-pill[data-kind="task"]  .ctx-kind-pill-swatch { background: var(--ctx-task);  }
@keyframes ctxViewFade { from { opacity: 0 } to { opacity: 1 } }
.ctx-view-panel {
  background: color-mix(in srgb, var(--ink) 12%, var(--paper));
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: min(780px, 88vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  overflow: hidden;
}

/* Header */
.ctx-view-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  flex-shrink: 0;
}
.ctx-view-kind {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.ctx-view-kind[data-kind="rules"] { color: var(--ctx-rules); }
.ctx-view-kind[data-kind="info"]  { color: var(--ctx-info); }
.ctx-view-kind[data-kind="keep"]  { color: var(--ctx-keep); }
.ctx-view-kind[data-kind="goal"]  { color: var(--ctx-goal); }
.ctx-view-kind[data-kind="task"]  { color: var(--ctx-task); }
.ctx-view-label {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
input.ctx-view-label { cursor: text; }
input.ctx-view-label::placeholder { color: var(--ink-ghost); font-style: italic; }
.ctx-view-meta-chip {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  flex-shrink: 0;
}
.ctx-view-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-ghost);
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.12s;
}
.ctx-view-close:hover { color: var(--ink); }

/* Body */
.ctx-view-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.ctx-view-loading {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-ghost);
  text-align: center;
  padding: 40px 0;
}
.ctx-view-textarea {
  flex: 1;
  width: 100%;
  min-height: 320px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  resize: none;
  padding: 0;
  box-sizing: border-box;
}
.ctx-view-textarea[readonly] { color: var(--ink-dim); cursor: default; }
.ctx-view-textarea::placeholder { color: var(--ink-ghost); font-style: italic; }

/* Image */
.ctx-view-image-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.ctx-view-image {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

/* Rendered (mermaid / echarts / sketch) */
.ctx-view-rendered {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}
.ctx-view-rendered svg { max-width: 100%; height: auto; }

/* Ground library info card */
.ctx-view-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 4px;
  font-family: var(--mono);
}
.ctx-view-info-title {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 40%, transparent);
}
.ctx-view-info-row {
  display: flex;
  gap: 12px;
  font-size: 11px;
}
.ctx-view-info-key {
  color: var(--ink-ghost);
  min-width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
  align-self: center;
}
.ctx-view-info-val {
  color: var(--ink);
  word-break: break-all;
}
.ctx-view-info-note {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-dim);
  padding-top: 8px;
  line-height: 1.5;
}

/* Dropdown menu (kind picker + attach) drops from the Context Panel frame. */
#context-panel-frame.menu-open {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
  color: var(--ink);
}
.ctx-add-menu {
  position: fixed;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
  border-top: 1px solid color-mix(in srgb, var(--rule) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 40%, transparent);
  z-index: 1000;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--mono);
}
.ctx-add-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
  padding: 0 11px;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-ghost);
  cursor: pointer;
  text-align: left;
  transition: color 0.12s, background 0.12s;
  box-sizing: border-box;
}
.ctx-add-menu-item + .ctx-add-menu-item {
  border-top: 1px solid color-mix(in srgb, var(--rule) 20%, transparent);
}
.ctx-add-menu-item:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}
.ctx-prompt-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  border-radius: 8px;
  background: var(--cp-bg, var(--paper));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.ctx-prompt-compose[hidden] { display: none; }
.ctx-prompt-compose { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctx-prompt-scope {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-soft);
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.ctx-prompt-polish,
.ctx-prompt-save {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}
.ctx-prompt-polish:hover,
.ctx-prompt-save:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
/* Dismissal sits in the corner, out of the action row — quiet, and never a rival to Attach. */
.ctx-prompt-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.ctx-prompt-close svg { width: 12px; height: 12px; }
.ctx-prompt-close:hover,
.ctx-prompt-close:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.ctx-prompt-preset-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
/* This display beats [hidden]'s UA display:none, so an empty section would still show its
   label. The library section is hidden until it has picks. */
.ctx-prompt-preset-section[hidden] { display: none; }
.ctx-prompt-section-label {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ctx-prompt-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  max-height: 68px;
  overflow: auto;
}
.ctx-prompt-preset {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--rule) 52%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: var(--ink-soft);
  cursor: pointer;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 150px;
  min-height: 26px;
  overflow: hidden;
  padding: 0 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ctx-prompt-preset:hover,
.ctx-prompt-preset:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 18%, var(--rule));
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  outline: none;
}
/* A saved library pick is a ready-rule chip carrying its own remove ×, so the chip is the shell
   and the two buttons inside it stay unstyled. */
.ctx-prompt-library-pick {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 0;
}
.ctx-prompt-library-use,
.ctx-prompt-library-drop {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctx-prompt-library-use { padding-left: 8px; }
.ctx-prompt-library-drop {
  color: var(--ink-ghost);
  font-size: 14px;
  line-height: 1;
}
.ctx-prompt-library-drop:hover,
.ctx-prompt-library-drop:focus-visible { color: var(--ink); outline: none; }
.ctx-prompt-library-drop[disabled] { opacity: .4; cursor: default; }
.ctx-prompt-personal-grid {
  max-height: 58px;
}
.ctx-prompt-empty {
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 26px;
}
.ctx-prompt-title,
.ctx-prompt-body {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink);
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
}
.ctx-prompt-title {
  height: 30px;
  padding: 0 9px;
}
.ctx-prompt-body {
  min-height: 118px;
  max-height: min(34vh, 260px);
  padding: 9px;
  line-height: 1.45;
  resize: vertical;
}
.ctx-prompt-title:focus,
.ctx-prompt-body:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #3aad7c) 62%, transparent);
}
.ctx-prompt-library-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.ctx-prompt-library-checkbox {
  margin: 0;
  accent-color: var(--accent, #3aad7c);
}
.ctx-prompt-actions {
  display: flex;
  flex-wrap: wrap; /* a narrow ~320px panel wraps rather than clips — a wrapped control is invisible, so keep this row short */
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.ctx-prompt-status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
}
.ctx-prompt-status.is-error {
  color: var(--red, #e5534b);
}
.ctx-prompt-polish,
.ctx-prompt-save {
  height: 30px;
  padding: 0 11px;
}
.ctx-prompt-polish {
  color: var(--ink-soft);
}
/* Attach is the one thing this composer exists to do — it is the only primary. */
.ctx-prompt-save {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent, #3aad7c) 70%, transparent);
  background: color-mix(in srgb, var(--accent, #3aad7c) 20%, transparent);
}
.ctx-prompt-save:hover {
  background: color-mix(in srgb, var(--accent, #3aad7c) 30%, transparent);
}
/* A rewrite is on the table: the attach action says so until the offer is taken or dropped. */
.ctx-prompt-save.is-offered {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3aad7c) 22%, transparent);
}
.ctx-prompt-polish:disabled,
.ctx-prompt-save:disabled {
  cursor: default;
  opacity: .45;
}
/* Processing signal — a BYOK round trip takes seconds, so the whole composer shows it. */
.ctx-prompt-composer.is-generating .ctx-prompt-body {
  border-color: color-mix(in srgb, var(--accent, #3aad7c) 55%, transparent);
  animation: ctx-prompt-working 1.15s ease-in-out infinite;
}
.ctx-prompt-composer.is-generating .ctx-prompt-polish {
  opacity: 1;
  color: var(--accent, #3aad7c);
  border-color: color-mix(in srgb, var(--accent, #3aad7c) 55%, transparent);
  animation: ctx-prompt-working 1.15s ease-in-out infinite;
}
.ctx-prompt-composer.is-generating .ctx-prompt-polish::after {
  content: '…';
}
/* The status strip IS the signal while a rewrite is in flight — one pulsing word, never a
   sentence: this line is nowrap+ellipsis, so a sentence truncates into unreadable noise. */
.ctx-prompt-composer.is-generating .ctx-prompt-status {
  color: var(--accent, #3aad7c);
  animation: ctx-prompt-working 1.15s ease-in-out infinite;
}
@keyframes ctx-prompt-working {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ctx-prompt-composer.is-generating .ctx-prompt-body,
  .ctx-prompt-composer.is-generating .ctx-prompt-status,
  .ctx-prompt-composer.is-generating .ctx-prompt-polish { animation: none; opacity: .8; }
}

/* Hide on no-auth / mobile */
body.no-auth #context-panel,
body.no-auth #context-panel-resize-handle { display: none; }
@media (max-width: 768px) {
  #context-panel, #context-panel-resize-handle { display: none; }
}

/* ── Electron title bar ─────────────────────────────────── */
#electron-title-bar {
  display: none; /* shown by JS when isElectron */
  align-items: center;
  height: 32px;
  min-height: 32px;
  background: var(--chrome-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  -webkit-app-region: no-drag;
  user-select: none;
  position: relative;
  z-index: 10000;
  flex-shrink: 0;
}

/* === SECTION: title-bar-pinned-line-rail === */
/* Pinned line tabs ride the desktop title strip, so the line strip below carries only
   the lines that come and go. renderLineTabBar routes them into #line-tab-pin-rail. */
.line-tab-pin-rail {
  display: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  /* Takes the whole strip between the window buttons and the window controls,
     the same full width the tab strip below gets. */
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* The rail itself still drags the window; only the tabs on it are clickable. */
  -webkit-app-region: drag;
}
.line-tab-pin-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.line-tab-pin-rail.has-tabs { display: flex; }
.line-tab-pin-rail .line-tab {
  --line-tab-accent: #ffffff;
  --line-tab-accent-muted: #ffffff;
  height: 24px;
  min-height: 24px;
  max-width: 150px;
  padding: 0 4px 0 8px;
  border-radius: 5px;
  -webkit-app-region: no-drag;
}
.line-drafts-bank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font: 600 10px var(--sans);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.line-drafts-bank:hover,
.line-drafts-bank:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
.line-drafts-bank-count {
  min-width: 14px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font: 9px var(--mono);
  text-align: center;
}
.line-drafts-bank {
  border-color: rgba(230, 185, 74, 0.28);
  color: rgba(255, 238, 190, 0.92);
}
/* The title strip is always black, so these labels need more light than the line strip below.
   ponytail: written for both themes at once — the strip never follows the light theme. */
.line-tab-pin-rail .line-tab:not(.active):not(:hover):not(:focus-within):not(:focus-visible) .line-tab-label,
body.dark .line-tab-pin-rail .line-tab:not(.active):not(:hover):not(:focus-within):not(:focus-visible) .line-tab-label {
  color: rgba(255, 255, 255, 0.78);
}

/* Pinned tabs own the available middle lane. Their flex bounds end before the mode picker,
   so native drag hit-testing never overlaps the Read and Code controls. */
#electron-title-bar:has(.line-tab-pin-rail.has-tabs) .etb-drag-region { display: none; }

/* @sas claim: Desktop title-bar mode slot puts the Read/Code picker in the upper-right chrome after the wordmark is removed. | terms: etb-mode-slot, line-mode-toggle, read mode, code mode, electron-title-bar, upper-right mode picker | id: titlebar:mode-slot | timestamp: 2026-08-05T00:00:00Z | live: true */
.etb-mode-slot {
  position: static;
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  padding-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  pointer-events: auto;
  -webkit-app-region: no-drag;
  z-index: 2;
}

/* === SECTION: stack-identity-chip === */
/* Painted only when this window's checkout is not the primary at origin/main (app.js reads
   electronAPI.stackIdentity). Frameless windows have no OS title bar, so this is the only
   place a stale stack can announce itself while you are looking at the screen. */
.etb-stack-chip {
  display: inline-block;
  /* Wide enough for the full "N behind · worktree · branch · :port" line; the ellipsis below
     is the safety net for an unusually long branch, not the normal case. */
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 17px;
  padding: 3px 7px 0;
  border-radius: 9px;
  border: 1px solid rgba(255, 180, 84, 0.42);
  background: rgba(255, 180, 84, 0.12);
  color: #ffb454;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: auto;
}

.etb-drag-region {
  order: 1;
  flex: 1;
  height: 100%;
  -webkit-app-region: drag;
}

.etb-controls {
  order: 3;
  display: flex;
  align-items: center;
  -webkit-app-region: no-drag;
}

.etb-btn {
  width: 44px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink);
  opacity: 0.45;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s, background 0.12s;
}
.etb-btn:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.etb-btn.etb-close:hover { background: rgba(200, 50, 50, 0.18); opacity: 1; }

body.electron-mode {
  display: flex;
  flex-direction: column;
}
body.electron-mode #app-shell {
  flex: 1 1 0;
  height: calc(100vh - 32px);
  min-height: 0;
}
/* Custom-controls build now shows the strip too; the mac dots live in it (right
   edge), so the header no longer hosts window controls or acts as the drag region.
   App-shell falls back to the base electron-mode height (100vh - 32px strip). */
body.electron-mode.custom-controls .etb-controls { display: none; }
#electron-title-bar .win-dots { -webkit-app-region: no-drag; margin-left: 0; padding-left: 0; padding-right: 0; }

/* Regular line-icon window buttons — shown only on custom-controls builds, top-left of the strip. */
.win-dots { display: none; align-items: center; gap: 0; }
body.custom-controls .win-dots { display: flex; }
.win-dot {
  width: 44px; height: 32px; padding: 0; border-radius: 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink); opacity: 0.5;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.12s, background 0.12s;
}
.win-dot:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.win-dot-close:hover { background: rgba(200, 50, 50, 0.18); opacity: 1; }

/* === SECTION: local-workspace === */
/* Owner: local-workspace — Electron titlebar, connection modal, workspace health, file explorer, tier picker. */
/* ── Local workspace ────────────────────────────────────── */

/* Connection modal */
.lcm-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 28px 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}
.lcm-header {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 18px;
}
.lcm-path-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px 12px;
  background: rgba(28,26,22,0.04);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
body.dark .lcm-path-row { background: rgba(212,207,197,0.05); }
.lcm-path-text {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lcm-tier-section { margin-bottom: 18px; }
.lcm-tier-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.lcm-tier-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.lcm-tier-pill {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lcm-tier-pill:hover { color: var(--ink); border-color: var(--ink-dim); }
.lcm-tier-pill.active { color: var(--pass-3); border-color: var(--pass-3); background: rgba(79,168,150,0.08); }
.lcm-notice {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 10px 12px;
  border-left: 2px solid var(--rule);
}
.lcm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lcm-connect-btn { color: var(--pass-3); border-color: var(--pass-3); }
.lcm-connect-btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* Permission badge */
.perm-badge {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.perm-badge:hover { border-color: var(--ink-dim); color: var(--ink); }
.perm-badge.rwx { color: #c4832a; border-color: #c4832a; }
.perm-badge.rwx:hover { color: #d4922e; border-color: #d4922e; }

/* Tier picker (inline, shown below badge on click) */
.lcv-tier-picker {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.lcv-tier-picker button {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 3px 10px;
  color: var(--ink-dim);
  cursor: pointer;
  text-align: left;
}
.lcv-tier-picker button:hover { border-color: var(--rule); color: var(--ink); }
.lcv-tier-picker button.active { border-color: var(--rule); color: var(--ink); }
.lcv-tier-picker button.rwx { color: #c4832a; }
.lcv-tier-picker button.rwx:hover, .lcv-tier-picker button.rwx.active { border-color: #c4832a; }

/* Update banner */
#update-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  z-index: 9999;
  transform: translateY(100%);
  animation: bannerSlideUp 0.2s ease forwards;
}
@keyframes bannerSlideUp {
  to { transform: translateY(0); }
}
.update-banner-msg {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.update-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
}
.update-banner-reload {
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.update-banner-reload:hover { text-decoration: underline; }
.update-banner-sep { color: var(--rule); }
.update-banner-dismiss {
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.update-banner-dismiss:hover { color: var(--ink); }

/* Local view */
.lcv-folder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  flex-wrap: wrap;
}
.lcv-folder-path {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  word-break: break-all;
}
.lcv-disconnect-btn { font-size: 10px; }

/* === SECTION: code-view-read-root === */
/* Names which copy of the project the file tree below is showing. */
.lcv-read-root {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
}
.lcv-read-root-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lcv-read-root-select {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  background: rgba(28,26,22,0.04);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3px 6px;
  max-width: 260px;
}
body.dark .lcv-read-root-select { background: rgba(212,207,197,0.04); }
.lcv-read-root-note {
  font-size: 10px;
  color: var(--ink-dim);
  opacity: 0.8;
}
/* === END SECTION: code-view-read-root === */

/* === SECTION: code-view-reading-pane === */
/* Holds the borrowed #ide-editor node so a clicked file is read inside this view. */
.lcv-editor-pane {
  display: flex;
  flex-direction: column;
  height: 420px;
  min-height: 0;
  margin-bottom: 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.lcv-editor-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
  background: rgba(28,26,22,0.03);
}
body.dark .lcv-editor-bar { background: rgba(212,207,197,0.03); }
.lcv-editor-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lcv-editor-close {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
}
.lcv-editor-close:hover { color: var(--ink); }
.lcv-editor-host {
  flex: 1;
  min-height: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.lcv-editor-host > #ide-editor {
  display: block !important;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}
/* === END SECTION: code-view-reading-pane === */

/* Workspace health strip (15a) */
.lcv-health-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.lcv-health-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  padding: 3px 8px;
  background: rgba(28,26,22,0.04);
  border: 1px solid var(--rule);
  border-radius: 3px;
  letter-spacing: 0.04em;
}
body.dark .lcv-health-chip { background: rgba(212,207,197,0.04); }
.lcv-health-chip.git { color: var(--pass-3); border-color: rgba(79,168,150,0.3); }
.lcv-health-chip.warn { color: #c4832a; border-color: rgba(196,131,42,0.4); }
.lcv-health-chip.dim { opacity: 0.6; }
.lcv-health-chip.snapshot { color: var(--pass-2); border-color: rgba(58,184,142,0.3); }

/* Scope strip */
.lcv-scope-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.lss-tier {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  background: transparent;
  white-space: nowrap;
}
.lss-tier.rwx { color: #c4832a; border-color: rgba(196,131,42,0.4); }
.lss-tier.rw  { color: var(--pass-3); border-color: rgba(79,168,150,0.3); }
.lss-sep { font-family: var(--mono); font-size: 9px; color: var(--ink-dim); opacity: 0.4; }
.lss-paths {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: border-color 0.12s, color 0.12s;
  flex: 1;
  min-width: 60px;
}
.lss-paths:hover { border-color: var(--rule); color: var(--ink); }
.lss-paths-input {
  font-family: var(--mono);
  font-size: 9px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 5px;
  outline: none;
  flex: 1;
  min-width: 100px;
}
.lss-lock {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  opacity: 0.5;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: opacity 0.12s, border-color 0.12s;
  position: relative;
}
.lss-lock:hover { opacity: 1; border-color: var(--rule); }
.lcv-codex-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.settings-codex-strip {
  margin-top: 12px;
  padding: 10px 0 0;
  border-bottom: 0;
}
.lcv-codex-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
.lcv-codex-strip .lcv-health-chip {
  white-space: nowrap;
}
.lcv-codex-mark {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--pass-3);
  border: 1px solid rgba(79,168,150,0.3);
  border-radius: 3px;
  padding: 2px 5px;
}
.lcv-codex-name {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.lcv-codex-btn {
  font-size: 10px;
  padding: 4px 9px;
  white-space: nowrap;
}
.lcv-codex-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  flex-shrink: 0;
}
.lcv-codex-strip > .lcv-codex-actions:last-child {
  grid-column: 1 / -1;
}
.lcv-codex-btn--native {
  opacity: 0.72;
}
.lcv-native-worker-runs {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.lcv-native-worker-run {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--rule) 76%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
}
.lcv-native-worker-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--pass-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass-3) 12%, transparent);
}
.lcv-native-worker-run[data-state="running"] .lcv-native-worker-dot,
.lcv-native-worker-run[data-state="starting"] .lcv-native-worker-dot {
  animation: lane-pulse 1.2s ease-in-out infinite;
}
.lcv-native-worker-run[data-state="failed"] .lcv-native-worker-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent);
}
.lcv-native-worker-run[data-state="waiting"] .lcv-native-worker-dot {
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent);
}
.lcv-native-worker-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--ink);
}
.lcv-native-worker-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.lss-protected-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 8px 10px;
  z-index: 300;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.lss-protected-popover-title {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.lss-protected-popover-item {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  padding: 1px 0;
  opacity: 0.7;
}

/* Legend */
.lcv-legend {
  display: flex;
  gap: 14px;
  padding: 10px 0 14px;
  margin-bottom: 4px;
}
.lcv-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* Ground marker (5px circle) */
.lcv-ground-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink-dim);
  flex-shrink: 0;
  transition: background 0.2s;
}
.lcv-ground-marker.in-ground {
  background: rgba(60,140,90,0.75);
  border-color: rgba(60,140,90,0.75);
}
body.dark .lcv-ground-marker.in-ground {
  background: rgba(85,175,120,0.75);
  border-color: rgba(85,175,120,0.75);
}
.lcv-ground-marker.placeholder {
  opacity: 0;
  border: none;
}
.lcv-ground-marker.embedding {
  animation: context-pulse 1.4s ease-in-out infinite;
}

/* File tree rows */
.lcv-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  cursor: default;
  border-radius: 3px;
  transition: background 0.12s;
}
.lcv-file-row:hover { background: rgba(28,26,22,0.04); }
body.dark .lcv-file-row:hover { background: rgba(212,207,197,0.04); }
.lcv-file-row.dir .lcv-dir-name { color: var(--ink); font-weight: 500; }
.lcv-file-row.file .lcv-file-name { color: var(--ink-dim); }
/* A file row opens the file — say so with the cursor. */
.lcv-file-row.file { cursor: pointer; }
.lcv-file-row.file:hover .lcv-file-name { color: var(--ink); }
.lcv-file-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink-dim);
  opacity: 0.6;
}
.lcv-file-size {
  margin-left: auto;
  color: var(--ink-dim);
  opacity: 0.5;
  font-size: 9px;
}
.lcv-loading, .lcv-empty-tree {
  padding: 20px 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-align: center;
}

/* Ground marker — pending state (pulsing while promote in flight) */
.lcv-ground-marker.pending {
  animation: context-pulse 1.4s ease-in-out infinite;
  border-color: rgba(140, 110, 60, 0.7);
}
body.dark .lcv-ground-marker.pending {
  border-color: rgba(200, 165, 80, 0.7);
}

/* File rows — clickable marker affordance */
.lcv-file-row.file .lcv-ground-marker:not(.in-ground):not(.pending):not(.placeholder) {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.lcv-file-row.file:hover .lcv-ground-marker:not(.in-ground):not(.pending) {
  opacity: 1;
}

/* Promote confirmation sheet */
.pcs-card {
  background: var(--paper);
  border: 1px solid rgba(28,26,22,0.12);
  border-radius: 6px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 420px;
  font-family: var(--sans);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
body.dark .pcs-card {
  border-color: rgba(212,207,197,0.1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.pcs-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.pcs-filename {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 14px;
  word-break: break-all;
}
.pcs-body {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 22px;
}
.pcs-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.pcs-confirm-btn {
  background: rgba(60,140,90,0.12);
  border-color: rgba(60,140,90,0.4);
}
.pcs-confirm-btn:hover { background: rgba(60,140,90,0.2); }
body.dark .pcs-confirm-btn { background: rgba(85,175,120,0.12); border-color: rgba(85,175,120,0.35); }
body.dark .pcs-confirm-btn:hover { background: rgba(85,175,120,0.22); }

/* Promote failure toast */
.promote-toast {
  position: fixed;
  bottom: var(--chat-status-bottom, 80px);
  left: var(--chat-status-left, 54px);
  transform: none;
  z-index: 9200;
  width: min(460px, var(--chat-status-width, 700px));
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  white-space: normal;
  box-shadow: 0 10px 28px rgba(20, 16, 12, 0.14);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: msg-enter 0.2s ease;
  line-height: 1.4;
  text-align: left;
}
body.dark .promote-toast {
  border-color: var(--rule);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.promote-toast .pt-retry { cursor: pointer; text-decoration: underline; opacity: 0.74; white-space: nowrap; }
.promote-toast .pt-retry:hover { opacity: 1; }
.promote-toast .pt-close { cursor: pointer; opacity: 0.45; margin-left: auto; }
.promote-toast .pt-close:hover { opacity: 0.8; }

/* === SECTION: scheduled-tasks === */
/* Owner: scheduled-tasks — tasks view panel, task form, task list items, task actions. */
/* ── Scheduled Tasks view ──────────────────────────────────────────────────── */
#tasks-view { padding: 20px 18px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; }
.tasks-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tasks-title { font-family: var(--sans); font-size: 15px; color: var(--ink); font-weight: 500; }
.tasks-new-btn { font-size: 12px; padding: 4px 10px; opacity: 0.7; }
.tasks-new-btn:hover { opacity: 1; }
.tasks-empty { font-size: 13px; color: var(--ink); opacity: 0.45; padding: 24px 0; text-align: center; font-style: italic; }

.tasks-form { background: var(--surface, rgba(28,26,22,0.04)); border: 1px solid var(--border, rgba(28,26,22,0.1)); border-radius: 6px; padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
body.dark .tasks-form { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.tasks-form-title { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); opacity: 0.7; margin-bottom: 4px; }
.tasks-label { font-size: 11px; color: var(--ink); opacity: 0.55; font-family: var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.tasks-input, .tasks-select, .tasks-textarea { width: 100%; box-sizing: border-box; background: var(--paper); border: 1px solid var(--border, rgba(28,26,22,0.12)); border-radius: 4px; padding: 7px 10px; font-size: 13px; color: var(--ink); font-family: var(--sans); outline: none; }
body.dark .tasks-input, body.dark .tasks-select, body.dark .tasks-textarea { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.tasks-input:focus, .tasks-select:focus, .tasks-textarea:focus { border-color: var(--accent, rgba(28,26,22,0.4)); }
.tasks-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.tasks-form-row { display: flex; gap: 12px; }
.tasks-form-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tasks-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); opacity: 0.7; cursor: pointer; }
.tasks-checkbox-row input { cursor: pointer; }
.tasks-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.tasks-save-btn { font-size: 12px; padding: 5px 14px; }
.tasks-cancel-btn { font-size: 12px; padding: 5px 10px; opacity: 0.5; }
.tasks-cancel-btn:hover { opacity: 0.9; }

.task-count { font-size: 11px; color: var(--ink); opacity: 0.35; margin-left: auto; }
.task-rules-card:hover { background: color-mix(in srgb, var(--pass-2) 14%, transparent) !important; }
.task-rules-card-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red, #c0392b);
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 4px;
}

.task-rules-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.task-rules-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--ink) 35%, transparent);
}
.task-rules-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.task-rules-title {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.task-rules-x {
  background: transparent;
  border: none;
  color: var(--ink);
  opacity: 0.5;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.task-rules-x:hover { opacity: 1; }
.task-rules-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}
.task-rules-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
}
.task-rules-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.task-rules-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.task-rules-btn.accept {
  border-color: color-mix(in srgb, var(--accent, #5a9cff) 50%, transparent);
  color: var(--accent, #5a9cff);
}
.task-rules-btn.accept:hover { background: color-mix(in srgb, var(--accent, #5a9cff) 14%, transparent); }
.task-rules-btn.danger {
  border-color: color-mix(in srgb, var(--red, #c0392b) 50%, transparent);
  color: var(--red, #c0392b);
}
.task-rules-btn.danger:hover { background: color-mix(in srgb, var(--red, #c0392b) 14%, transparent); }
.task-rules-suggestion {
  margin-top: 20px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent, #5a9cff) 40%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #5a9cff) 6%, transparent);
}
.task-rules-sug-title {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #5a9cff);
  margin-bottom: 4px;
}
.task-rules-sug-reason {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  opacity: 0.7;
  margin-bottom: 8px;
  font-style: italic;
}
.task-rules-sug-body {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.task-rules-sug-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* === SECTION: lightbox === */
/* Owner: lightbox — full-screen image/media lightbox overlay. */
/* ── Lightbox viewer ─────────────────────────────────────── */
#gi-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10500;
  flex-direction: column;
}
#gi-lightbox.open { display: flex; }
#gi-lb-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
#gi-lb-controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(10, 10, 10, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
#gi-lb-controls button {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--mono);
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
#gi-lb-controls button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
#gi-lb-zoom-pct {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  min-width: 42px;
  text-align: center;
}
#gi-lb-close {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 99999;
  pointer-events: auto;
}
#gi-lightbox.is-model3d-full-view #gi-lb-controls {
  justify-content: flex-end;
  min-height: 48px;
  padding: 0 14px;
  background: #0d100e;
}
#gi-lightbox.is-model3d-full-view #gi-lb-zoom-out,
#gi-lightbox.is-model3d-full-view #gi-lb-zoom-pct,
#gi-lightbox.is-model3d-full-view #gi-lb-zoom-in,
#gi-lightbox.is-model3d-full-view #gi-lb-reset {
  display: none;
}
#gi-lightbox.is-model3d-full-view #gi-lb-close {
  position: static;
  min-height: 34px;
  padding-inline: 14px;
  color: #f0eee7;
  border-color: rgba(224, 221, 211, 0.24);
  border-radius: 8px;
  font: 600 var(--text-sm)/1 var(--sans);
}
#gi-lightbox.is-model3d-full-view #gi-lb-stage {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  cursor: default;
}
#gi-lightbox.is-model3d-full-view #gi-lb-inner {
  width: 100%;
  height: 100%;
  transform: none !important;
}
#gi-lightbox.is-model3d-full-view #gi-lb-inner > .visual-presenter-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#gi-lightbox.is-model3d-full-view .visual-presenter-head { display: none !important; }
#gi-lightbox.is-model3d-full-view .visual-presenter-surface {
  border-radius: 0 !important;
  background: #111512 !important;
}
#gi-lb-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  user-select: none;
}
#gi-lb-stage.dragging { cursor: grabbing; }
#gi-lb-inner {
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#gi-lb-inner img {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  pointer-events: none;
  -webkit-user-drag: none;
}
#gi-lb-inner svg {
  max-width: 88vw;
  max-height: 82vh;
  display: block;
}
#gi-lb-inner > div {
  max-width: 88vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* expand button on visual containers */
.visual-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  padding: 4px 8px 4px 0;
  transition: color 0.15s;
  vertical-align: middle;
  opacity: 0.7;
}
.visual-expand-btn:hover { color: var(--ink); opacity: 1; }
/* click-to-zoom cursor on images */
.generated-img { cursor: zoom-in; }
.browser-screenshot-card img { cursor: zoom-in; }
/* diamond marker — hidden on task rows, shown on .ctx-task-current only */
.ctx-task-current-marker {
  display: none;
  color: var(--task-color, #3aad7c);
  font-size: 7px;
  opacity: 0.75;
  flex-shrink: 0;
  margin-right: 3px;
}
/* panel-open icon on task rows — appears on hover, opens panel without focus swap */
.ctx-task-panel-open {
  display: none;
  background: none;
  border: none;
  padding: 0 2px;
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
  color: var(--task-color, #3aad7c);
  opacity: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.12s ease;
}
.ctx-task-panel-open:hover { opacity: 1 !important; }
@keyframes ctxProcessActivePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #e0b348 28%, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, #e0b348 0%, transparent); transform: scale(1.08); }
}
@keyframes ctxProcessOrbit {
  from { transform: rotate(0deg) translateX(-50%); }
  to { transform: rotate(360deg) translateX(-50%); }
}
@keyframes ctxProcessWaitingBreath {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.18); }
}
@keyframes ctxProcessSpin {
  to { transform: rotate(360deg); }
}
/* Legacy Branch Detail drawer is intentionally suppressed.
   Rich task inspection and merge review now live in #task-panel. */
.task-detail-drawer { display: none !important; }
.task-merge-route {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.task-merge-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, #6ba56b 18%, transparent);
}
.task-merge-key {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
}
.task-merge-value {
  white-space: pre-line;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.task-detail-text {
  font-size: 12px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.task-detail-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.task-detail-stat {
  font-family: var(--mono);
  font-size: 10px;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 999px;
  padding: 5px 8px;
}
.input-zone {
  /* Bottom padding is what pins the substrip's height above the window edge —
     the zone is bottom-anchored, so shrinking it drops the whole composer block.
     At 0, the desktop offset below owns the final move toward the edge. */
  padding: 8px 0 0 0 !important;
  max-width: min(760px, calc(100% - 108px)) !important;
}
@media (min-width: 769px) {
  /* Seat the complete desktop composer closer to the window edge as one unit.
     Keep the focused textarea out of a transformed compositor layer: Chromium
     can leave its separately painted caret stale or invisible while the input
     resizes or the surrounding panel geometry changes. */
  #work-left > .input-zone {
    top: 16px;
  }
}
#work-row .input-row {
  gap: 8px !important;
  border: 1px solid var(--rule) !important;
  border-radius: 24px !important;
  --composer-surface: var(--paper-dark);
  background: var(--paper-dark) !important;
  padding: 10px 14px 10px !important;
  box-shadow: none !important;
}
#work-row .input-row:focus-within {
  border-color: var(--ink-soft) !important;
  box-shadow: none !important;
}

/* Chat frame width */
.msg-row,
.msg-row.coding-event.local-event {
  max-width: min(740px, calc(100% - 108px)) !important;
}
.input-zone {
  max-width: min(740px, calc(100% - 108px)) !important;
}
#work-row .input-row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Align chat and inbox lanes */
#work-row {
  --chat-frame-width: 740px;
  --chat-frame-gutter: 54px;
  --chat-text-inset: 15px;
}
.msg-row,
.msg-row.coding-event.local-event {
  margin-left: auto !important;
  margin-right: var(--chat-frame-gutter) !important;
  max-width: min(var(--chat-frame-width), calc(100% - 108px)) !important;
}
.input-zone {
  margin-left: auto !important;
  margin-right: var(--chat-frame-gutter) !important;
  width: min(var(--chat-frame-width), calc(100% - 108px)) !important;
  max-width: min(var(--chat-frame-width), calc(100% - 108px)) !important;
}
#work-row:has(#context-panel.active) .input-zone {
  margin-left: auto !important;
  margin-right: calc(var(--cp-width) + var(--chat-frame-gutter)) !important;
  width: min(var(--chat-frame-width), calc(100% - var(--cp-width) - 108px)) !important;
  max-width: min(var(--chat-frame-width), calc(100% - var(--cp-width) - 108px)) !important;
}

/* Typography readability patch removed — owned by "chat message presentation" block. */

/* Terminal-like composer — CODE MODE ONLY. Terminal MONO font on the input,
   placeholder and pickers; typed input uses the assistant response color.
   Scoped under #input-controls so the picker font beats the
   @media(min-width:701px) var(--sans) override (which carries an ID). */
/* Code-mode chat typography tokens: shared by assistant, user, composer, and line name. */
body[data-line-mode="code"] {
  --codex-chat-font-family: "OpenAI Sans", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Heebo", Arial, sans-serif;
  --codex-chat-font: calc(var(--gi-chat-font, 15px) + 1px);
  --codex-chat-line: 1.62;
  --codex-chat-weight: 350;
  --codex-composer-font: var(--gi-composer-font, 14px);
  --codex-composer-line: 1.62;
  --codex-composer-weight: 350;
}

body[data-line-mode="code"] :is(.float-line-name, .phone-context-line) {
  font-family: var(--codex-chat-font-family) !important;
  font-size: var(--codex-chat-font) !important;
  line-height: var(--codex-chat-line) !important;
  font-weight: var(--codex-chat-weight) !important;
  letter-spacing: 0 !important;
}
body[data-line-mode="code"] textarea#input {
  font-family: var(--codex-chat-font-family) !important;
  font-size: var(--codex-composer-font, 13.5px) !important;
  line-height: var(--codex-composer-line, 1.62) !important;
  font-weight: var(--codex-composer-weight, 350) !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  font-synthesis-weight: none;
}
body[data-line-mode="code"] textarea#input::placeholder {
  font-family: var(--codex-chat-font-family) !important;
  font-size: var(--codex-composer-font, 13.5px) !important;
  font-weight: var(--codex-composer-weight, 350) !important;
  letter-spacing: 0 !important;
}
body[data-line-mode="code"] :is(#input-controls, .input-underbar) .cycle-btn {
  font-family: var(--mono) !important;
}
body[data-line-mode="code"] .composer-substrip .cycle-btn {
  font-family: var(--codex-chat-font-family) !important;
  font-size: 12px !important;
  font-weight: 350 !important;
  letter-spacing: 0 !important;
}

/* Transcript terminal feel — CODE MODE ONLY. User turns keep their right-side
   bubble but render in the terminal monospace font. Assistant prose and rich
   blocks untouched. The non-matching #__gi-mono-force__ in the inner :is() only
   raises specificity so this beats the frozen var(--sans) rule (specificity
   (2,1,1)) for user messages — it never matches an element. */
:is(#messages.line-code, body[data-line-mode="code"] #messages) .msg-row.user {
  align-items: flex-end !important;
  margin-left: auto !important;
  width: 100% !important;
}
:is(#messages.line-code, body[data-line-mode="code"] #messages) .msg-row.user :is(.msg-body, #__gi-mono-force__) {
  font-family: var(--codex-chat-font-family) !important;
  font-size: var(--codex-chat-font) !important;
  line-height: var(--codex-chat-line) !important;
  font-weight: var(--codex-chat-weight) !important;
  letter-spacing: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  width: fit-content !important;
  max-width: 72% !important;
  margin-left: auto !important;
  text-align: left !important;
  color: var(--ink-heavy) !important;
  box-shadow: none !important;
  font-synthesis-weight: none;
}

/* Read/depth mode (non-code): user messages stay right-aligned, original bubble. */
body:not([data-line-mode="code"]) #messages .msg-row.user {
  align-items: flex-end !important;
  margin-left: auto !important;
  width: fit-content !important;
}
body:not([data-line-mode="code"]) #messages .msg-row.user .msg-body {
  margin-left: auto !important;
  text-align: left !important;
}

/* === SECTION: terminal-panel === */
/* Owner: native-ide-integration — terminal + Monaco editor left panel, same slot as task-panel. */
/* @sas claim: Terminal panel slides in from the left as a left-panel sibling to task-panel. Three-row bar: tp-mode-bar (36px), tp-lane-bar (32px), tp-context-strip (24px). | terms: terminal-panel, tp-mode-bar, tp-lane-bar, tp-context-strip, tp-actions, desk-tab, active | id: native-ide-integration-4044:terminal-panel-css | modified_by: terminal-panel-revision | timestamp: 2026-05-14T00:00:00Z | live: true */
#terminal-panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.22s ease;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  z-index: 5;
  border-radius: 0 12px 12px 0;
}
#terminal-panel.active {
  width: var(--tp-width, 360px);
}
#terminal-panel-bar {
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  border-radius: 0 12px 0 0;
}
#terminal-panel.active #terminal-panel-bar { display: flex; }

/* Row 1 — mode tabs + close */
#tp-mode-bar {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px 0 12px;
  gap: 6px;
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 0 12px 0 0;
}

/* Row 2 — lane tabs + action buttons */
#tp-lane-bar {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px 0 10px;
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
#lane-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#lane-tabs::-webkit-scrollbar { display: none; }
#tp-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.07);
}

/* Row 3 — context strip (shell + cwd) */
#tp-context-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 12px;
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  overflow: hidden;
}
/* Editor strip (shown in editor mode instead of context strip) */
#tp-editor-strip {
  display: none;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 12px;
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  overflow: hidden;
}
#terminal-panel.tp-mode-editor #tp-context-strip { display: none; }
#terminal-panel.tp-mode-editor #tp-editor-strip { display: flex; }

.tp-shell {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
  padding-right: 6px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tp-cwd {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.40);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: plaintext;
}
.tp-editor-label {
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(255,255,255,0.22);
  flex-shrink: 0;
}
#desk-editor-filename {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.38);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#desk-editor-save-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 10px;
  font-family: var(--sans);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.12s;
}
#desk-editor-save-btn:hover { background: rgba(255,255,255,0.08); }

/* Shared tab styles */
.desk-tab {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.desk-tab:hover { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.06); }
.desk-tab.desk-tab-active,
.desk-tab.active {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.90);
}
/* @sas claim: Unread dot — marks a desk tab whose pane updated in the background (agent opened a file/diff) without stealing the active tab; cleared on switchTab. | terms: desk-tab-unread, markUnread | id: native-ide-integration-4044:desk-tab-unread-css | timestamp: 2026-06-01T00:00:00Z | live: true */
.desk-tab-unread::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d8a657;
}
/* Quiet empty-state shown in the Card pane when no task is bound. */
.tp-card-empty {
  padding: 16px 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.32);
}

/* Lane tabs */
.lane-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  color: rgba(255,255,255,0.42);
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  border: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.lane-tab:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); }
.lane-tab.active {
  background: rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.90);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.lane-label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90px;
}
.lane-add-btn { font-size: 15px; padding: 2px 8px; opacity: 0.55; flex-shrink: 0; }
.lane-add-btn:hover { opacity: 1; }

/* Lane '+' menu — shell / claude TUI / codex TUI (real TUI lanes, 2026-07-03) */
.lane-add-menu {
  z-index: 400;
  min-width: 140px;
  padding: 4px;
  border-radius: 8px;
  background: #171512;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 8px 24px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lane-add-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.lane-add-menu-item:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); }

/* Lane status dots */
.lane-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}
.lane-dot[data-status="running"] { background: #d4784a; animation: lane-pulse 1.2s ease-in-out infinite; }
.lane-dot[data-status="done"]    { background: #5a9a6a; }
.lane-dot[data-status="failed"]  { background: #c04848; }
.lane-dot[data-status="idle"]    { background: rgba(255,255,255,0.20); }
.lane-tab.active .lane-dot[data-status="running"] { background: #e08050; }
.lane-tab.active .lane-dot[data-status="done"]    { background: #6bab72; }
.lane-tab.active .lane-dot[data-status="failed"]  { background: #d05050; }
@keyframes lane-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* Lane badge dots */
.lane-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,255,255,0.2);
}
.lane-badge-dot[data-status="running"] { background: #d4784a; animation: lane-pulse 1.2s ease-in-out infinite; }
.lane-badge-dot[data-status="done"]    { background: #5a9a6a; }
.lane-badge-dot[data-status="failed"]  { background: #c04848; }

/* Action buttons (clear + kill) */
.tp-action-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.tp-action-btn:hover { color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.06); }
.tp-action-btn--codex {
  width: 30px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}
.tp-action-btn--codex span { transform: translateY(0.5px); }
.tp-action-btn--codex:hover {
  color: rgba(255,255,255,0.88);
  background: rgba(96,130,180,0.14);
}
.tp-action-btn--kill { color: rgba(212,80,60,0.50); }
.tp-action-btn--kill:hover { color: rgba(212,80,60,0.85); background: rgba(212,80,60,0.10); }

/* Close button */
#desk-close-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.40);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
#desk-close-btn:hover { color: rgba(255,255,255,0.80); background: rgba(255,255,255,0.06); }
#terminal-panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 8px;
  gap: 0;
  background: transparent;
  border-radius: 0 0 12px 0;
}
#ide-terminal {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
#ide-editor {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Resize handle */
#terminal-panel-resize-handle {
  width: 4px;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  cursor: col-resize;
  background: transparent;
  border-right: none;
  display: none;
  z-index: 6;
}
#terminal-panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.10);
  border-radius: 1px;
  transition: background 0.15s;
}
#terminal-panel-resize-handle:hover::after { background: rgba(120,148,220,0.55); }
#terminal-panel-resize-handle.dragging::after { background: rgba(120,148,220,0.80); }
#work-row:has(#terminal-panel.active) #terminal-panel-resize-handle {
  display: flex;
  left: var(--tp-width, 360px);
}
#work-row:has(#terminal-panel-resize-handle.dragging) #terminal-panel { transition: none; }

/* Push chat column right when terminal panel is open */
#work-row:has(#terminal-panel.active) .messages,
#work-row:has(#terminal-panel.active) .input-zone {
  margin-left: var(--tp-width, 360px);
  transition: margin-left 0.22s ease;
}
#work-row:has(#terminal-panel-resize-handle.dragging) .messages,
#work-row:has(#terminal-panel-resize-handle.dragging) .input-zone { transition: none; }
#work-row:has(#terminal-panel.active) .brain-margin { display: none !important; }

/* Keep the composer in the chat lane when a left task/terminal panel is open.
   The global inbox alignment above uses margin-left:auto!important, so this
   late override must also be important or the inbox slides under the panel. */
#work-row:has(#task-panel.active) .input-zone,
#work-row:has(#terminal-panel.active) .input-zone {
  margin-left: calc(var(--tp-width, 320px) + var(--chat-frame-gutter, 54px)) !important;
  margin-right: var(--chat-frame-gutter, 54px) !important;
  width: min(var(--chat-frame-width), calc(100% - var(--tp-width, 320px) - 108px)) !important;
  max-width: min(var(--chat-frame-width), calc(100% - var(--tp-width, 320px) - 108px)) !important;
}

#work-row:has(#context-panel.active):has(#task-panel.active) .input-zone,
#work-row:has(#context-panel.active):has(#terminal-panel.active) .input-zone {
  margin-right: calc(var(--cp-width) + var(--chat-frame-gutter, 54px)) !important;
  width: min(var(--chat-frame-width), calc(100% - var(--tp-width, 320px) - var(--cp-width) - 108px)) !important;
  max-width: min(var(--chat-frame-width), calc(100% - var(--tp-width, 320px) - var(--cp-width) - 108px)) !important;
}

/* Card content tab inside terminal panel */
#tp-card-content {
  flex: 1;
  overflow-y: auto;
  display: none;
  padding: 12px 14px;
  min-height: 0;
}
#tp-card-content.active { display: block; }
/* Card tab — always part of the per-task menu (Card · Terminal · Editor), clickable even with no task bound */
#desk-tab-card { display: inline-flex; }

/* ── HTML preview panel ─────────────────────────────────────────────────── */
.preview-btn {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  background: transparent;
  border: 1px solid var(--ink-dim);
  border-radius: 4px;
  color: var(--ink-soft);
  cursor: pointer;
}
.preview-btn:hover { border-color: var(--ink); color: var(--ink); }

.rail-preview-chip {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  background: transparent;
  border: 1px solid var(--ink-dim);
  border-radius: 4px;
  color: var(--ink-soft);
  cursor: pointer;
}
.rail-preview-chip:hover { border-color: var(--ink); color: var(--ink); }
.rail-preview-chip-artifact { margin-top: 6px; }

.saved-artifact-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.saved-artifact-chip {
  border:1px solid var(--ink-dim); border-radius:999px; background:transparent; color:var(--ink-soft);
  padding:4px 10px; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:11px var(--mono); cursor:pointer;
}
.saved-artifact-chip:hover { border-color:var(--ink); color:var(--ink); }
.saved-artifact-chip-stale { opacity:.55; text-decoration:line-through; }

/* === SECTION: turn-change-set-card === */
.turn-change-set-card {
  width: min(520px, 100%);
  margin-top: 16px;
  padding: 13px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--ink) 4%);
  color: var(--ink);
  font-family: var(--sans);
}
.turn-change-set-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.turn-change-set-title {
  color: var(--ink-heavy);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.35;
}
.turn-change-set-summary {
  margin-top: 2px;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
}
.turn-change-set-add { color: #3fb950; }
.turn-change-set-del { color: #f0644d; }
.turn-change-set-files {
  display: grid;
  gap: 3px;
  margin-top: 10px;
}
.turn-change-set-file {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 23px;
  width: 100%;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-family: var(--sans);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.turn-change-set-file:hover,
.turn-change-set-file:focus-visible {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  outline: none;
}
.turn-change-set-state {
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.turn-change-set-state--added,
.turn-change-set-state--untracked { color: #3fb950; }
.turn-change-set-state--deleted { color: #f0644d; }
.turn-change-set-path {
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.turn-change-set-file-stats {
  display: inline-flex;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.turn-change-set-more {
  padding-left: 62px;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-size: 10px;
}
.turn-change-set-review {
  margin-top: 12px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 590;
  cursor: pointer;
}
.turn-change-set-review:hover,
.turn-change-set-review:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}

#preview-browser-bar button:hover,
#preview-open-browser:hover { color: var(--ink); }
#rail-wv-url:focus { outline: none; border-color: color-mix(in srgb, var(--ink) 40%, transparent); }

/* ── Chat typography — consolidated (designer + explorer audit, session 242) ── */
/* @sas claim: unified chat message body typography across all three surfaces (assistant prose, streaming, user message). Single block, wins by cascade. Replaces four layered patches earlier in this file. | terms: msg-body, msg-row, font-codex, ink-heavy, ink, weight 390, weight 400, 18px, 1.78, paragraph-rhythm, heading-weight-hierarchy | id: chat-typography-consolidated-242 | timestamp: 2026-05-17T00:00:00Z | live: true */

/* ---- structural base (mode-independent) ---- */
.msg-body {
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--ink-heavy);
}
.msg-row.pres .msg-body,
#streaming-msg .msg-body { color: var(--ink-heavy); }

/* Dark chat prose stays neutral white even when the surrounding UI uses a tinted palette.
   The whole ink ramp is pinned — not just --ink-heavy — because chat rules also paint with
   --ink/--ink-mid/--ink-soft/etc.
   The cream regression is dead at the source: the dark ink ramp in the "Desktop slick polish"
   block below is neutral white, and no cream literal survives in this file. This pin is the
   belt, not the fix. Do NOT reintroduce a warm/cream ink base (#fbf7ee, #fffdf7,
   rgba(251,247,238,…)) — a pin only reaches #messages, so every chat surface OUTSIDE the
   transcript (composer textarea, input underbar, input controls) goes cream again and the
   "regression" is back. That is why it kept coming back: cream was the default, not the bug. */
body.dark #messages {
  --ink-heavy: #ffffff;
  --ink: #f4f4f4;
  --ink-mid: rgba(255, 255, 255, 0.98);
  --ink-soft: rgba(255, 255, 255, 0.96);
  --ink-dim: rgba(255, 255, 255, 0.90);
  --ink-ghost: rgba(255, 255, 255, 0.78);
  --ink-faint: rgba(255, 255, 255, 0.62);
}

/* ---- DEPTH voice = default (journal: Hebrew-first, airy) ---- */
.msg-body,
.msg-row.pres .msg-body,
.msg-row.user .msg-body,
#streaming-msg .msg-body {
  font-family: 'Heebo', system-ui, sans-serif;
  font-size: var(--gi-chat-font, 15px);
  line-height: 1.9;
  letter-spacing: 0;
  font-weight: var(--gi-chat-weight, 400);
  font-synthesis-weight: none;
}

/* ---- CODE voice (codex: Hebrew-first prose, technical code) ---- */
#messages.line-code .msg-body,
#messages.line-code .msg-row.pres .msg-body,
#messages.line-code .msg-row.user .msg-body,
#messages.line-code #streaming-msg .msg-body {
  font-family: 'Heebo', system-ui, sans-serif;
  font-size: var(--gi-chat-font, 15px);
  line-height: 1.84;
  letter-spacing: 0;
  font-weight: var(--gi-chat-weight, 500);
}

/* ---- user bubble (inherits the active voice's font) ---- */
.msg-body,
.msg-body :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, caption),
#input {
  text-align: start;
}
/* Plain user messages can contain multiple languages separated by newlines. */
.msg-row.user .msg-body,
#input {
  unicode-bidi: plaintext;
}
.msg-body a {
  unicode-bidi: isolate;
}

.msg-row.user .msg-body {
  color: var(--ink-heavy);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: 8px;
  padding: 7px 12px;
}
.msg-row.user .msg-body.msg-body--meta-only {
  display: none;
}
body.dark .msg-row.user .msg-body {
  background: rgba(255, 255, 255, 0.04);
}
.user-msg-addition {
  display: inline-flex;
  align-items: center;
  max-width: min(240px, 100%);
  margin: 0 8px 0 0;
  padding: 2px 6px 2px 5px;
  gap: 6px;
  border: 1px solid color-mix(in srgb, #8ED3FF 26%, transparent);
  border-radius: 8px;
  color: #8ED3FF;
  background: rgba(142, 211, 255, 0.12);
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 650;
  line-height: 1.35;
  vertical-align: baseline;
  white-space: nowrap;
}
.user-msg-addition svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.user-msg-addition-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.light .user-msg-addition {
  border-color: color-mix(in srgb, #1F6C9F 18%, #E1F3FE);
  color: #1F6C9F;
  background: #E1F3FE;
}

/* Gestalt proximity: with 1.9 leading, 0.85em paragraph gaps were barely wider
   than the line gap — paragraphs didn't read as chunks. 1.1em restores grouping. */
.msg-body p { margin: 0 0 1.1em; text-wrap: pretty; }
.msg-body li { text-wrap: pretty; }
.msg-body p:last-child { margin-bottom: 0; }
/* Bold lead-ins ("The decision:") open a new block — give them air above. */
.msg-body p:not(:first-child):has(> strong:first-child) { margin-top: 1.2em; }

.msg-body ul,
.msg-body ol {
  margin-block: 0.5em 1em;
  margin-inline: 1.4em 0;
  padding-inline: 0.2em 0;
}
.msg-body li { margin: 0.4em 0 0.55em; }
.msg-body li::marker { color: var(--ink-dim); }
.msg-body strong { color: var(--ink-heavy); font-weight: 600; }

/* Code mode: steadier Hebrew prose rhythm */
#messages.line-code .msg-body p { margin: 0 0 1.16em; }
#messages.line-code .msg-body li { margin: 0.5em 0; line-height: 1.86; }

.msg-body h1,
.msg-body h2,
.msg-body h3,
.msg-body h4 {
  font-family: inherit;
  line-height: 1.25;
  letter-spacing: 0.004em;
  color: var(--ink-heavy);
  text-wrap: balance;
}
.msg-body h1 { font-size: 1.5em; font-weight: 700; margin: 1.5em 0 0.6em; }
.msg-body h2 { font-size: 1.45em; font-weight: 700; margin: 1.62em 0 0.54em; }
.msg-body h3 { font-size: 1.18em; font-weight: 640; margin: 1.28em 0 0.42em; }
.msg-body h4 { font-size: 1em; font-weight: 520; color: var(--ink-heavy); margin: 1.1em 0 0.35em; }
.msg-body h1:first-child,
.msg-body h2:first-child,
.msg-body h3:first-child,
.msg-body h4:first-child { margin-top: 0; }

.msg-body pre {
  font-family: var(--code);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 7px;
  border: 1px solid var(--rule);
  overflow-x: auto;
  margin: 1em 0 1.1em;
  /* Character fidelity: no ligature fusion (=> stays two glyphs), 4-col tabs,
     and a hard LTR base so Hebrew comments/strings can't flip code layout. */
  font-variant-ligatures: none;
  tab-size: 4;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
.msg-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
/* Code-block header bar: language label + wrap + copy (GitHub/Claude-Code style) */
.msg-body pre.has-header {
  padding: 0;
  overflow: visible; /* was hidden — sticky header needs an unclipped pre */
}
.msg-body pre.has-header > code {
  display: block;
  padding: 12px 16px;
  overflow-x: auto;
  border-radius: 0 0 7px 7px; /* pre no longer clips — round the bottom corners here */
}
.code-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px 5px 14px;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)); /* opaque: code must not show through when stuck */
  border-bottom: 1px solid var(--rule);
  border-radius: 7px 7px 0 0;
  font-family: var(--code);
  position: sticky;
  top: 0;
  z-index: 2;
}
.code-lang {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  text-transform: lowercase;
  user-select: none;
  margin-right: auto;
}
.code-header .copy-btn,
.code-header .wrap-btn {
  position: static;
  opacity: 0.55;
  font-family: var(--code);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
}
.msg-body pre.has-header:hover .code-header .copy-btn,
.msg-body pre.has-header:hover .code-header .wrap-btn { opacity: 1; }
.code-header .copy-btn:hover, .code-header .wrap-btn:hover { color: var(--ink); }
.code-header .copy-btn.copied { color: var(--pass-3); opacity: 1; }
.code-header .wrap-btn.active { color: var(--accent); opacity: 1; }
/* Soft-wrap mode: long lines fold instead of horizontal scroll */
.msg-body pre.code-wrap > code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
/* Long blocks collapse behind a footer (> 28 lines) */
.msg-body pre.code-collapsed > code { max-height: 420px; overflow-y: hidden; }
.code-expand-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: none;
  border-top: 1px solid var(--rule);
  border-radius: 0 0 7px 7px;
  color: var(--ink-dim);
  font-family: var(--code);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
}
.code-expand-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }

.msg-body blockquote {
  margin: 1em 0;
  padding-block: 0.1em;
  padding-inline: 1.1em 0;
  border-inline-start: 2px solid var(--rule);
  color: var(--ink-soft);
  /* no italic: Heebo ships no italic face — synthesized slant degrades Hebrew */
}
.msg-body hr { border: none; border-top: 1px solid var(--rule); margin: 1.6em 0; }

/* Selection tint inside chat — OS-default blue is the loudest thing on a dark page */
.msg-body ::selection,
.msg-body::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---- inline code — soft, borderless (depth default) ---- */
#messages.line-code,
body[data-line-mode="code"] #messages {
  --chat-inline-code-fg: #a9afb8;
  --chat-inline-code-bg: #878d96;
}
body:not(.dark) #messages.line-code,
body:not(.dark)[data-line-mode="code"] #messages {
  --chat-inline-code-fg: #5f6670;
  --chat-inline-code-bg: #737b86;
}
.msg-body code:not(pre code) {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--code);
  font-size: 0.85em;
  color: var(--chat-inline-code-fg, color-mix(in srgb, var(--ink-dim) 82%, #9aa1aa 18%));
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: none;
  border-radius: 3px;
  padding: 0.06em 0.34em;
  font-variant-ligatures: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
#messages.line-code .msg-body code:not(pre code) {
  font-size: 0.84em;
  font-weight: 450;
  border-radius: 4px;
  padding: 0.08em 0.36em;
  background: color-mix(in srgb, var(--chat-inline-code-bg) 6%, transparent);
}
#streaming-body code:not(pre code) { transition: none !important; animation: none !important; }

.assistant-technical-refs {
  margin: 0.62em 0 0.78em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.assistant-technical-refs > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  cursor: pointer;
  list-style: none;
  color: var(--ink-soft);
  font-size: 0.92em;
}
.assistant-technical-refs > summary::-webkit-details-marker { display: none; }
.assistant-technical-refs > summary::before {
  content: ">";
  color: var(--ink-dim);
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.16s ease;
}
.assistant-technical-refs[open] > summary::before { transform: rotate(90deg); }
.assistant-technical-refs-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-technical-refs-hint {
  margin-left: auto;
  color: var(--ink-dim);
  font-size: 0.78em;
  text-transform: lowercase;
}
.assistant-technical-refs[open] .assistant-technical-refs-hint { display: none; }
.assistant-technical-refs-body {
  padding: 0.22em 0 0.72em 1.35em;
  color: var(--ink-soft);
}
.assistant-technical-refs-body code:not(pre code) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* @sas claim: Chat code blocks keep a visible semantic highlight palette after the consolidated typography cascade, especially in Code mode where unlabeled fences otherwise read as plain white ink. | terms: hljs, line-code, pre code, semantic token colors, chat code colors | id: chat-code-colors:semantic-palette | timestamp: 2026-06-09T00:00:00Z | live: true */
.msg-body pre code.hljs {
  color: color-mix(in oklab, var(--ink-heavy) 78%, #7db7ff 22%) !important;
}
.msg-body pre code.hljs .hljs-keyword,
.msg-body pre code.hljs .hljs-selector-tag,
.msg-body pre code.hljs .hljs-doctag {
  color: #ff9b5f;
}
.msg-body pre code.hljs .hljs-string,
.msg-body pre code.hljs .hljs-regexp,
.msg-body pre code.hljs .hljs-addition {
  color: #8fdc9a;
}
.msg-body pre code.hljs .hljs-attr,
.msg-body pre code.hljs .hljs-attribute,
.msg-body pre code.hljs .hljs-selector-class,
.msg-body pre code.hljs .hljs-selector-id {
  color: #7cc7ff;
}
.msg-body pre code.hljs .hljs-number,
.msg-body pre code.hljs .hljs-literal,
.msg-body pre code.hljs .hljs-symbol,
.msg-body pre code.hljs .hljs-bullet {
  color: #f4bd78;
}
.msg-body pre code.hljs .hljs-title,
.msg-body pre code.hljs .hljs-name,
.msg-body pre code.hljs .hljs-section {
  color: #ffd166;
}
.msg-body pre code.hljs .hljs-type,
.msg-body pre code.hljs .hljs-built_in,
.msg-body pre code.hljs .hljs-class {
  color: #5fd7d9;
}
.msg-body pre code.hljs .hljs-comment,
.msg-body pre code.hljs .hljs-quote {
  color: var(--ink-dim);
  font-style: italic;
}
.msg-body pre code.hljs .hljs-meta,
.msg-body pre code.hljs .hljs-variable,
.msg-body pre code.hljs .hljs-template-variable,
.msg-body pre code.hljs .hljs-params {
  color: #d7b7ff;
}
.msg-body pre code.hljs .hljs-deletion {
  color: #ff7b72;
}
#messages.line-code .msg-body pre code.hljs {
  color: color-mix(in oklab, var(--ink-heavy) 64%, #7cc7ff 36%) !important;
}
body.light .msg-body pre code.hljs {
  color: color-mix(in oklab, var(--ink-heavy) 86%, #1667b7 14%) !important;
}
body.light .msg-body pre code.hljs .hljs-keyword,
body.light .msg-body pre code.hljs .hljs-selector-tag,
body.light .msg-body pre code.hljs .hljs-doctag { color: #9f4f00; }
body.light .msg-body pre code.hljs .hljs-string,
body.light .msg-body pre code.hljs .hljs-regexp,
body.light .msg-body pre code.hljs .hljs-addition { color: #2f7a38; }
body.light .msg-body pre code.hljs .hljs-attr,
body.light .msg-body pre code.hljs .hljs-attribute,
body.light .msg-body pre code.hljs .hljs-selector-class,
body.light .msg-body pre code.hljs .hljs-selector-id { color: #1769aa; }
body.light .msg-body pre code.hljs .hljs-number,
body.light .msg-body pre code.hljs .hljs-literal,
body.light .msg-body pre code.hljs .hljs-symbol,
body.light .msg-body pre code.hljs .hljs-bullet { color: #935f00; }
body.light .msg-body pre code.hljs .hljs-title,
body.light .msg-body pre code.hljs .hljs-name,
body.light .msg-body pre code.hljs .hljs-section { color: #8a6200; }
body.light .msg-body pre code.hljs .hljs-type,
body.light .msg-body pre code.hljs .hljs-built_in,
body.light .msg-body pre code.hljs .hljs-class { color: #087184; }
body.light .msg-body pre code.hljs .hljs-meta,
body.light .msg-body pre code.hljs .hljs-variable,
body.light .msg-body pre code.hljs .hljs-template-variable,
body.light .msg-body pre code.hljs .hljs-params { color: #7a4db3; }
body.light .msg-body pre code.hljs .hljs-deletion { color: #b42318; }

/* @sas claim: Adds a modern Code-mode chat surface with denser scan rhythm, sharper code treatment, refined highlights, and a polished composer while keeping assistant prose unframed. | terms: line-code, msg-body, input-row, code blocks, inline code, modern chat surface | id: chat-code-modern:surface-polish | timestamp: 2026-06-09T00:00:00Z | live: true */
#work-row {
  --chat-code-accent: #4edc8b;
  --chat-code-accent-2: #7cc7ff;
  /* Theme-aware defaults; the fixed light-grey literals are dark-mode design and live below. */
  --chat-inline-tool-grey: color-mix(in srgb, var(--ink-dim) 68%, var(--ink-ghost) 32%);
  --chat-inline-tool-grey-live: color-mix(in srgb, var(--ink-soft) 52%, var(--ink-dim) 48%);
  --chat-inline-tool-glyph-grey: color-mix(in srgb, var(--ink-dim) 70%, var(--ink-ghost) 30%);
}
body.dark #work-row {
  --chat-inline-tool-grey: rgba(198, 204, 212, 0.95);
  --chat-inline-tool-grey-live: rgba(224, 228, 234, 0.98);
  --chat-inline-tool-glyph-grey: rgba(188, 194, 203, 0.92);
}
#messages.line-code .msg-row.pres .msg-body,
#messages.line-code #streaming-msg .msg-body {
  color: var(--ink-heavy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
#messages.line-code .msg-body,
#messages.line-code .msg-row.pres .msg-body,
#messages.line-code .msg-row.user .msg-body,
#messages.line-code #streaming-msg .msg-body {
  line-height: 1.84;
}
body.dark :is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) {
  color: #ffffff;
}
#messages.line-code .msg-body p { margin: 0 0 1.16em; }
#messages.line-code .msg-body code:not(pre code) {
  color: var(--chat-inline-code-fg);
  /* Faint tint only — mono font carries the signal; a filled pill per symbol is 30 bright rectangles a screen. */
  background: color-mix(in srgb, var(--chat-inline-code-bg) 6%, transparent);
  border: 0;
  border-radius: 5px;
}
#messages.line-code .msg-body ::selection {
  color: var(--ink-heavy);
  background: color-mix(in srgb, var(--chat-code-accent-2) 24%, transparent);
}
body.dark #messages.line-code .msg-body ::selection {
  color: #f8fafc;
  background: color-mix(in srgb, var(--chat-code-accent-2) 30%, transparent);
}
#messages.line-code .msg-body mark {
  background: color-mix(in srgb, #f2bd63 14%, transparent);
  border: 0;
  border-radius: 3px;
  padding: 0.02em 0.22em;
  box-shadow: none;
  color: color-mix(in srgb, var(--ink-heavy) 62%, #f2bd63 38%);
  text-decoration: none;
}
#messages.line-code .msg-body pre {
  background: color-mix(in srgb, var(--paper-dark) 88%, var(--chat-code-accent-2) 4%);
  border-color: color-mix(in srgb, var(--chat-code-accent-2) 18%, transparent);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 30px rgba(28,26,22,0.08);
}
body.dark #messages.line-code .msg-body pre {
  background: color-mix(in srgb, #06080a 76%, var(--chat-code-accent-2) 4%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 10px 30px rgba(0,0,0,0.18);
}
#messages.line-code .code-header {
  min-height: 32px;
  /* opaque over the near-black pre so the sticky header doesn't ghost code through it */
  background: color-mix(in srgb, var(--paper-dark, var(--paper)) 93%, var(--chat-code-accent-2) 7%);
  border-bottom-color: color-mix(in srgb, var(--chat-code-accent-2) 16%, transparent);
}
body.dark #messages.line-code .code-header {
  background: color-mix(in srgb, #06080a 93%, var(--chat-code-accent-2) 7%);
}
#messages.line-code .code-header .wrap-btn {
  color: color-mix(in srgb, var(--ink-dim) 74%, var(--chat-code-accent) 26%);
}
#messages.line-code .code-lang {
  color: color-mix(in srgb, var(--ink-dim) 78%, var(--chat-code-accent-2) 22%);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#messages.line-code .code-header .copy-btn {
  color: color-mix(in srgb, var(--ink-dim) 74%, var(--chat-code-accent) 26%);
}
body.dark #work-row .input-row {
  background: color-mix(in srgb, var(--inbox-bg, #111416) 76%, var(--frame-bg, #0b0d0f) 24%) !important;
  border-color: rgba(255,255,255,0.105) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
body.dark #work-row .input-row:focus-within {
  border-color: rgba(255, 255, 255,0.17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
}
body.light #work-row .input-row {
  --composer-surface: color-mix(in srgb, var(--paper) 92%, white 8%);
  background: color-mix(in srgb, var(--paper) 92%, white 8%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
body.light #work-row .input-row:focus-within {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--rule)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

/* ---- tool-activity state badge — quiet dot + grey text (both modes) ---- */
.event-state {
  background: none;
  padding: 0;
  margin-left: 6px;
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  font-family: var(--code);
  vertical-align: middle;
}
.event-state::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  background: var(--ink-dim);
}
.state-finished::before { background: rgba(85,175,120,0.95); }
.state-completed::before { background: rgba(85,175,120,0.95); }
.state-failed::before   { background: rgba(200,80,70,0.95); }
.state-blocked::before  { background: rgba(210,155,50,0.95); }

/* One contract in every voice: badge text stays quiet grey; the dot carries
   the status signal. (Was: code voice repainted the text green/red/amber,
   which made `completed` pop loud while neutral states like `ran 2 commands`
   stayed dim — three different treatments for the same class of row.) */

/* Code voice — Codex-style semantic color (Read stays calm/journal) */
#messages.line-code .diff-add { color: #3fb950; font-weight: 500; }   /* additions  */
#messages.line-code .diff-del { color: #f0644d; font-weight: 500; }   /* deletions  */
#messages.line-code .msg-body code.file-chip {
  color: var(--chat-inline-code-fg);
  background: color-mix(in srgb, var(--chat-inline-code-bg) 12%, transparent);
}
/* Directive structure — neutral heading hierarchy and emphasis in Code mode. */
#messages.line-code .msg-body :is(h1, h2, h3, h4) { color: var(--ink-heavy); }
#messages.line-code .msg-body p.step-heading,
#messages.line-code .msg-body h3.step-heading { color: var(--ink-heavy); }
#messages.line-code .msg-body strong,
#messages.line-code .msg-body em {
  color: inherit;
}
#messages.line-code .msg-body strong {
  font-weight: 540;
}

@media (max-width: 600px) {
  .msg-body,
  .msg-row.pres .msg-body,
  .msg-row.user .msg-body,
  #streaming-msg .msg-body {
    font-size: 19px;
    line-height: 1.9;
  }
  #messages.line-code .msg-body,
  #messages.line-code .msg-row.pres .msg-body,
  #messages.line-code .msg-row.user .msg-body,
  #messages.line-code #streaming-msg .msg-body {
    font-size: 19px;
    line-height: 1.82;
  }
}

/* Code-mode transcript typography: match the Codex chat message rhythm. */
:is(#messages.line-code, body[data-line-mode="code"] #messages) {
  --codex-chat-font-family: "OpenAI Sans", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Heebo", Arial, sans-serif;
  --codex-chat-font: calc(var(--gi-chat-font, 15px) + 1px);
  --codex-chat-line: 1.62;
  --codex-chat-weight: 350;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) {
  font-family: var(--codex-chat-font-family) !important;
  font-size: var(--codex-chat-font) !important;
  line-height: var(--codex-chat-line) !important;
  font-weight: var(--codex-chat-weight) !important;
  letter-spacing: 0 !important;
  color: var(--ink-heavy) !important;
  font-synthesis-weight: none;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) :where(p, li, blockquote, td, th, summary, details) {
  font-size: 1em !important;
  line-height: inherit !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) p {
  margin: 0 0 0.78em;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) p:last-child {
  margin-bottom: 0;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) :where(ul, ol) {
  margin-block: 0.46em 0.82em !important;
  margin-inline: 1.35em 0 !important;
  padding-inline: 0.2em 0 !important;
  list-style: revert !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) ul > li {
  padding-inline: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: 1em !important;
  line-height: inherit !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) ul > li::before {
  content: none !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) :where(h1, h2, h3, h4) {
  font-family: inherit !important;
  line-height: 1.38 !important;
  font-weight: 580 !important;
  letter-spacing: 0 !important;
  margin: 1.18em 0 0.42em !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) :where(h1, h2) {
  font-size: 1.08em !important;
  color: color-mix(in srgb, var(--ink-heavy) 66%, #f2bd63 34%) !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) :where(h3, h4) {
  font-size: 1em !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) :where(h1, h2, h3, h4):first-child {
  margin-top: 0 !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) code:not(pre code) {
  font-family: var(--code) !important;
  font-size: 0.92em !important;
  line-height: 1.16 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--chat-inline-code-fg) !important;
  background: color-mix(in srgb, var(--chat-inline-code-bg) 13%, transparent) !important;
  border-color: transparent !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 0.03em 0.28em !important;
}

#messages:not(.line-code) .msg-body code:not(pre code),
body:not([data-line-mode="code"]) #streaming-body code:not(pre code) {
  font-size: 0.92em !important;
  color: color-mix(in srgb, var(--ink-dim) 82%, #9aa1aa 18%) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) pre,
:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) pre code,
:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) pre code.hljs {
  font-family: var(--code) !important;
  font-size: var(--codex-chat-font) !important;
  line-height: var(--codex-chat-line) !important;
  letter-spacing: 0 !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :where(
  .tool-activity-summary,
  .tool-activity-item,
  .tool-activity-receipt,
  .transcript-event-card,
  .transcript-event-label,
  .transcript-event-text,
  .coding-event-card,
  .coding-event-header,
  .coding-event-header code,
  .coding-event-body
) {
  font-size: var(--codex-chat-font) !important;
  line-height: var(--codex-chat-line) !important;
  letter-spacing: 0 !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :where(
  .tool-activity-summary,
  .tool-activity-item,
  .tool-activity-receipt,
  .transcript-event-card,
  .transcript-event-text,
  .coding-event-card,
  .coding-event-body
) {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :where(.coding-event-header, .coding-event-header code) {
  font-family: var(--code) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Code-mode chat hierarchy: assistant prose at full ink; compact tool/status notation stays gray.
   --ink-heavy resolves through the body.dark #messages ramp pin (neutral white) in dark mode and
   the base :root ramp (near-black) in bright mode — never hardcode white here. */
:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.msg-body, #streaming-body) {
  color: var(--ink-heavy) !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(
  .tool-activity-summary,
  .tool-activity-item,
  .tool-activity-receipt,
  .transcript-event-card,
  .transcript-event-label,
  .transcript-event-text,
  .coding-event-card,
  .coding-event-header,
  .coding-event-body
),
:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(
  .tool-activity-summary,
  .tool-activity-item,
  .tool-activity-receipt,
  .transcript-event-card,
  .coding-event-card
) :is(code, .tool-activity-label, .tool-activity-file-action, .tool-activity-file-name, .tool-activity-stat, .event-state) {
  color: var(--chat-inline-tool-grey, rgba(138, 143, 150, 0.82)) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Final active-tooling override: brighten active tool text; glyph still carries row state. */
#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt, .tool-activity-receipt.is-active-tooling) :is(.tool-activity-label, .event-state) {
  background: linear-gradient(90deg,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 0%,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 28%,
    var(--chat-inline-tool-shine, rgba(255, 255, 255, 0.98)) 50%,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 72%,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 100%
  ) !important;
  background-size: 240% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: labelShimmer 1.9s linear infinite !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.13) !important;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt, .tool-activity-receipt.is-active-tooling) .tool-activity-glyph {
  color: var(--chat-inline-tool-glyph-grey, color-mix(in srgb, var(--ink-dim) 70%, #8f969f 30%)) !important;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) :is(.tool-activity-label, .event-state),
.tool-activity-receipt--file-edit.is-active-tooling :is(.tool-activity-label, .event-state) {
  background: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling),
.tool-activity-receipt--file-edit.is-active-tooling {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--chat-inline-tool-grey, var(--file-edit-muted)) !important;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-file-action,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-file-action {
  color: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-file-name,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-file-name {
  color: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-stat--add,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-stat--add {
  color: inherit;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-stat--del,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-stat--del {
  color: inherit;
}

/* Live streaming tool notation shines while active, then falls back to quiet grey. */
#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt, .tool-activity-receipt.is-active-tooling) :is(
  .tool-activity-label:not(.tool-activity-file-label),
  .tool-activity-file-action,
  .tool-activity-file-name,
  .tool-activity-stat,
  .event-state
) {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 0%,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 28%,
    var(--chat-inline-tool-shine, rgba(255, 255, 255, 0.98)) 50%,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 72%,
    var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) 100%
  ) !important;
  background-size: 240% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: labelShimmer 1.9s linear infinite !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.13) !important;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt--file-edit, .tool-activity-receipt--file-edit.is-active-tooling) .tool-activity-file-label,
.tool-activity-receipt--file-edit.is-active-tooling .tool-activity-file-label {
  background: none !important;
  background-image: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

#streaming-msg .tool-activity-receipt .tool-activity-glyph {
  color: var(--chat-inline-tool-glyph-grey, color-mix(in srgb, var(--ink-dim) 70%, #8f969f 30%)) !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.tool-activity-summary, .tool-activity-item, .tool-activity-receipt),
#streaming-msg :is(.tool-activity-summary, .tool-activity-item, .tool-activity-receipt) {
  align-items: center !important;
  font-size: calc(var(--codex-chat-font) - 1px) !important;
  line-height: 1.35 !important;
  color: rgba(118, 123, 130, 0.78) !important;
}

:is(#messages.line-code, body[data-line-mode="code"] #messages) :is(.tool-activity-summary, .tool-activity-item, .tool-activity-receipt) :is(
  .tool-activity-label,
  .tool-activity-file-action,
  .tool-activity-file-name,
  .tool-activity-stat,
  .event-state
),
#streaming-msg :is(.tool-activity-summary, .tool-activity-item, .tool-activity-receipt) :is(
  .tool-activity-label,
  .tool-activity-file-action,
  .tool-activity-file-name,
  .tool-activity-stat,
  .event-state
) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.tool-activity-receipt > .event-state {
  font: inherit !important;
  letter-spacing: inherit !important;
}

/* Clean inline coding notation: semantic icon + one quiet human action label. */
.assistant-transcript-event-row {
  margin: 18px 0;
}

:is(#messages, #streaming-msg) .tool-activity-receipt {
  gap: 10px;
  min-height: 22px;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

:is(#messages, #streaming-msg) .tool-activity-receipt .tool-activity-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  color: inherit;
}

:is(#messages, #streaming-msg) .tool-activity-receipt .tool-activity-glyph::before,
:is(#messages, #streaming-msg) .tool-activity-receipt .tool-activity-glyph::after {
  content: none !important;
  animation: none !important;
}

:is(#messages, #streaming-msg) .tool-activity-receipt .tool-activity-glyph svg {
  display: block;
  width: 18px;
  height: 18px;
}

#streaming-msg .tool-activity-receipt--file-edit .tool-activity-file-label {
  display: inline-flex !important;
  align-items: center !important;
}

#streaming-msg .tool-activity-receipt--file-edit .event-state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
}

/* @sas-section
id: style:active-tool-notation-sweep
claim: The newest live receipt carries one quiet sweep across the complete notation line while completed receipts remain still.
terms: active tool notation, tool receipt, full-line sweep, reduced motion, toolNotationSweep
*/
#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt, .tool-activity-receipt.is-active-tooling) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--chat-inline-tool-grey-live, rgba(224, 228, 236, 0.96)) !important;
  opacity: 1;
}

#streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt, .tool-activity-receipt.is-active-tooling)::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 22%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
  transform: translateX(-140%) skewX(-16deg);
  animation: toolNotationSweep 3.1s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes toolNotationSweep {
  0%, 12% { transform: translateX(-140%) skewX(-16deg); opacity: 0; }
  18% { opacity: 1; }
  52% { transform: translateX(520%) skewX(-16deg); opacity: 1; }
  58%, 100% { transform: translateX(520%) skewX(-16deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #streaming-msg :is(.streaming-transcript-event-row.is-active-tooling .tool-activity-receipt, .tool-activity-receipt.is-active-tooling)::after {
    animation: none;
    opacity: 0;
  }

  #streaming-msg .tool-activity-receipt :is(
    .tool-activity-label,
    .tool-activity-file-action,
    .tool-activity-file-name,
    .tool-activity-stat,
    .event-state
  ) {
    animation: none !important;
  }
}

/* Phone portrait — beat the global .input-zone !important rules above (13831/13837).
   Same specificity, so this must come LAST in source order to win the cascade. */
@media (max-width: 700px) {
  #context-panel,
  #context-panel.active { display: none !important; }
  .input-zone,
  #work-row:has(#context-panel.active) .input-zone,
  #work-row:has(#context-panel:not(.active)) .input-zone {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 10px 18px !important;
    box-sizing: border-box;
  }
  .msg-row,
  .msg-row.coding-event.local-event,
  #work-row:has(#context-panel.active) .msg-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  #work-row .input-row {
    border-radius: 22px !important;
    padding: 10px 12px 9px !important;
  }
  #work-row .input-underbar {
    flex-wrap: wrap;
    gap: 7px;
  }
  #work-row #composer-attach-btn {
    position: static;
    transform: none;
  }
  #work-row #composer-attach-btn:active { transform: scale(0.94); }
  #work-row .composer-tool-group {
    flex-wrap: wrap;
  }
  #work-row .composer-tool-group-right {
  position: relative;
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  /* The right group owns its own full-width row here, so right:100% would park
     the HUD off-screen — anchor it to the free left side of that same row. */
  #work-row .voice-hud {
    right: auto;
    left: 0;
    padding-left: 6px;
    background: none;
  }
}

/* Desktop slick polish: crisper chrome, structured CP, calmer reading lane. */
body.dark,
body.dark.palette-warm {
  --paper: #08090a;
  --paper-dark: #101214;
  --paper-worn: #171a1d;
  --charcoal: #0c0e10;
  --ink: #ffffff;
  --ink-heavy: #ffffff;
  --ink-mid: rgba(255, 255, 255, 0.98);
  --ink-soft: rgba(255, 255, 255, 0.96);
  --ink-dim: rgba(255, 255, 255, 0.90);
  --ink-ghost: rgba(255, 255, 255, 0.78);
  --ink-faint: rgba(255, 255, 255, 0.62);
  --rule: rgba(255, 255, 255, 0.22);
  --chrome-bg: #070809;
  --frame-bg: #0b0d0f;
  --header-bg: color-mix(in srgb, var(--frame-bg) 94%, var(--ink) 6%);
  --cp-bg: #111416;
  --inbox-bg: var(--cp-bg);
  --composer-bg: color-mix(in srgb, var(--inbox-bg) 76%, var(--chat-bg) 24%);
  --frame-edge: rgba(255,255,255,0.06);
  --gi-surface: rgba(255, 255, 255, 0.045);
  --gi-surface-2: rgba(255, 255, 255, 0.07);
  --gi-surface-3: rgba(255, 255, 255, 0.105);
  --gi-hairline: rgba(255, 255, 255, 0.095);
  --gi-accent: #58c7a6;
  --gi-accent-warm: #d0a24b;
}

/* ── Claude Code template (Theme moon button → picker, option 2) ──
   SURFACES ONLY — warm charcoal backgrounds. No ink/accent/element colors are
   touched, so chips, the Read/Code toggle, attachments, and text keep their
   normal colors. --flat-panel-bg is the key one: in dark mode it is the
   hardcoded near-black #0b0d0f that paints every flat panel and the right
   Context Panel cards. Panels (#2d2a26) sit a clear step above the lane
   (#1f1d1a) so they read as warm-grey cards, not black. */
body.dark.theme-claude {
  --paper: #262320;
  --paper-dark: #1f1d1a;
  --paper-worn: #191714;
  --charcoal: #1c1a18;
  --chrome-bg: #191714;
  --frame-bg: #1f1d1a;
  --cp-bg: #1f1d1a;
  --inbox-bg: #2d2a26;
  --surface: #2d2a26;
  --surface-raised: #353129;
  --flat-panel-bg: #2d2a26;
  --frame-edge: rgba(255, 255, 255, 0.06);
}

/* ── Warm red template (Theme moon button → picker, option 3) ──
   Clear, muted reds lower glare without turning the workspace into a bright
   warning surface. Warm off-white ink keeps long reading sessions clear. */
body.dark.theme-warm-red {
  --scrollbar-thumb: rgba(237, 223, 218, 0.22);
  --scrollbar-thumb-hover: rgba(237, 223, 218, 0.48);
  --paper: #2b1615;
  --paper-dark: #21100f;
  --paper-worn: #170908;
  --charcoal: #1d0c0b;
  --ink: #eddfda;
  --ink-heavy: #fff4ee;
  --ink-mid: rgba(237, 223, 218, 0.88);
  --ink-soft: rgba(237, 223, 218, 0.72);
  --ink-dim: rgba(237, 223, 218, 0.68);
  --ink-ghost: rgba(237, 223, 218, 0.42);
  --ink-faint: rgba(237, 223, 218, 0.12);
  --rule: rgba(255, 234, 226, 0.18);
  --border: rgba(255, 234, 226, 0.13);
  --accent: #de7468;
  --chrome-bg: #180908;
  --frame-bg: #251211;
  --cp-bg: #311817;
  --inbox-bg: #3a1d1b;
  --surface: #311817;
  --surface-raised: #402220;
  --flat-panel-bg: #311817;
  --frame-edge: rgba(255, 230, 222, 0.07);
}

/* Attached Context Panel items keep the Original template's identity colors;
   Warm red changes the workspace around them, not their meaning. */
body.dark.theme-warm-red #context-panel-frame-items {
  --paper: #08090a;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.96);
  --rule: rgba(255, 255, 255, 0.22);
  --accent: #62a6ff;
}

body.dark.theme-warm-red #electron-title-bar {
  background: var(--chrome-bg);
}


@media (min-width: 701px) {
  body.dark #electron-title-bar {
    background: #060708;
    border-bottom-color: rgba(255, 255, 255, 0.075);
  }

  body.dark .shell > .project-bar {
    padding: 4px 16px 4px 4px;
    background: var(--chat-bg, var(--frame-bg));
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.dark .project-bar::after {
    display: none;
    left: calc(var(--sidebar) + 28px);
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(232, 226, 213, 0.18) 0%,
      rgba(208, 162, 75, 0.24) 22%,
      rgba(208, 162, 75, 0.13) 54%,
      transparent 92%
    );
    opacity: 0.62;
  }

  body.dark aside {
    background: var(--chrome-bg);
  border: 0 solid var(--rule, color-mix(in srgb, var(--ink) 12%, transparent));
    box-shadow: none;
  }

  body.dark aside:is(:hover,.pinned) {
    box-shadow: none;
  }

  body.dark .nav-item {
    height: 26px;
    margin: 0;
    width: 100%;
    border-radius: 6px;
    color: var(--ink-soft);
  }

  body.dark .nav-item svg,
  body.dark .nav-item i {
    color: currentColor;
    stroke: currentColor;
    opacity: 1;
  }

  body.dark .nav-item:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.07);
  }

  body.dark .nav-item.active,
  body.dark .nav-item.space-open {
    color: var(--ink-heavy);
    background: none;
    box-shadow: none;
  }

  body.dark .nav-item.active::before,
  body.dark .nav-item.space-open::before {
    content: none;
    display: none;
  }

  body.dark .nav-item:hover svg,
  body.dark .nav-item:hover i {
    color: var(--gi-accent);
    stroke: var(--gi-accent);
  }

  body.dark .nav-item.active svg,
  body.dark .nav-item.active i,
  body.dark .nav-item.space-open svg,
  body.dark .nav-item.space-open i {
    color: inherit;
    stroke: currentColor;
  }

  body.dark #main-content {
    border-top-left-radius: 0;
    background: var(--frame-bg);
    box-shadow: none;
  }

  body.dark #work-row::before {
    border-top-left-radius: 0;
  }

  /* frame is on #work-row::before — visible above side panels and chat */

  #work-row {
    --cp-width: 280px;
    --chat-frame-width: 740px;
    --chat-frame-gutter: 54px;
  }

  body.dark .messages {
    padding-top: 0;
    padding-bottom: 24px;
  }

  .msg-row,
  .msg-row.coding-event.local-event {
    max-width: min(var(--chat-frame-width), calc(100% - 108px)) !important;
  }

  /* Typography owned by "chat message presentation" block (modes). Desktop keeps only color + padding. */
  .msg-row.pres .msg-body,
  #streaming-msg .msg-body {
    color: var(--ink-heavy);
    padding: 2px 10px 6px 16px;
  }

  .msg-model,
  .context-reminder,
  .exchange-stats,
  .depth-note {
    opacity: 0.88;
  }

  body.dark .msg-row.user .msg-body {
    color: var(--ink-heavy);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.055));
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
  }

  body.dark .project-bar-name {
    color: var(--ink);
  }

  body.dark .line-tab {
    color: color-mix(in srgb, var(--ink) 82%, transparent);
    background: color-mix(in srgb, var(--ink) 5.5%, transparent);
    border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  }

  body.dark .line-tab:hover,
  body.dark .line-tab:focus-within,
  body.dark .line-tab:focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 11%, transparent);
    border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  }

  body.dark .line-tab.active {
    --line-tab-accent-muted: var(--ink);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.54);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 22px rgba(255, 255, 255, 0.18);
  }

  body.dark #input-controls .ic-icon-btn,
  body.dark #input-controls .cycle-btn,
  body.dark #input-controls .cycle-btn.level-1,
  body.dark #input-controls .cycle-btn.level-2,
  body.dark #input-controls .cycle-btn.level-3,
  body.dark #input-controls .cycle-btn.level-codex {
    color: var(--ink);
    opacity: 1;
  }

  body.dark #input-controls .ic-divider {
    background: rgba(255, 255, 255, 0.56);
    opacity: 1;
  }

  body.dark .input-disclaimer {
    color: rgba(255, 255, 255, 0.42);
  }

  body.dark #send-btn.send-empty {
    opacity: 0.82;
  }

  body.dark .input-row {
    background: color-mix(in srgb, var(--inbox-bg, rgba(8, 9, 10, 0.68)) 76%, var(--frame-bg, #0b0d0f) 24%) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    box-shadow: none !important;
  }

  body.dark .input-row:focus-within {
    border-color: rgba(255, 255, 255, 0.17) !important;
  }

  body.dark .input-row textarea,
  body.dark .input-row textarea::placeholder,
  body.dark .input-row .ib:not(.send),
  body.dark .input-row .input-icon-btn {
    color: var(--ink);
    opacity: 1;
  }

  /* @sas claim: Removes the broad dark bloom cast from the right context panel into the chat surface while preserving the panel edge hairline. | terms: body.dark #context-panel, context panel shadow, chat background bloom, right panel edge | id: 0:remove-background-shadow | timestamp: 2026-05-29T17:25:00Z | live: true */
  body.dark #context-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022)),
      #0d0f11;
    border-left: 1px solid rgba(255, 255, 255, 0.085);
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.035);
  }

  body.dark #context-panel-bar {
    padding: 10px 16px 8px;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.025);
  }

  #context-panel-bar-title {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--ink);
  }

  body.dark #ctx-panel-hint {
    padding: 0 16px 10px;
    color: var(--ink-dim);
  }

  body.dark #ctx-context-items {
    padding: 8px 10px 6px;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  body.dark #ctx-context-items .context-item,
  body.dark .context-item {
    background: rgba(255, 255, 255, 0.052);
    border-color: rgba(255, 255, 255, 0.075);
    color: var(--ink);
  }

  body.dark .context-item:hover {
    color: var(--ink-heavy);
    border-color: rgba(88, 199, 166, 0.28);
  }

  body.dark #ctx-done-region {
    border-top-color: rgba(255, 255, 255, 0.085);
    background: rgba(0, 0, 0, 0.10);
  }

  body.dark #ctx-done-search {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.048);
    border-bottom-color: rgba(255, 255, 255, 0.07);
    color: var(--ink);
  }

  body.dark .ctx-task-def,
  body.dark .ctx-task-meta-chip,
  body.dark .ctx-task-lane-chip {
    color: var(--ink-dim);
  }

  body.dark .ctx-done-header {
    color: rgba(255, 255, 255, 0.54);
  }

  body.dark .ctx-done-title,
  body.dark .ctx-done-check {
    color: rgba(255, 255, 255, 0.42);
  }

  body.dark .ctx-done-header:hover {
    color: rgba(255, 255, 255, 0.68);
  }

  body.dark .ctx-done-item:hover .ctx-done-title {
    color: rgba(255, 255, 255, 0.56);
  }

  body.dark .ctx-done-item:hover .ctx-done-check {
    color: rgba(255, 255, 255, 0.50);
  }

  body.dark .ctx-done-title {
    text-decoration-color: rgba(255, 255, 255, 0.24);
  }

  body.dark .ctx-done-list {
    margin: 7px 10px 6px;
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  body.dark #context-panel-resize-handle {
    width: 4px;
    background: transparent;
    border-left: 0;
    border-right: 0;
  }

  body.dark #context-panel-resize-handle::after {
    width: 1px;
    height: 46px;
    background: rgba(255, 255, 255, 0.14);
  }

  body.dark #context-panel-resize-handle:hover::after {
    background: rgba(88, 199, 166, 0.70);
  }

  body.dark .scroll-down-btn {
    background: rgba(16, 18, 20, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26);
  }
}

/* === SECTION: task-flow-professional-workbench === */
/* Final cascade guard for the visible task focus + composer surface. Keeps the task
   architecture intact while removing the serif/debug-console presentation from the
   moment-to-moment work area. */
@media (min-width: 701px) {
  #work-row {
    --task-workbench-width: min(var(--chat-frame-width, 700px), calc(100% - 108px));
  }

  .main-task-workbench {
    width: var(--task-workbench-width) !important;
    max-width: var(--task-workbench-width) !important;
    min-height: 58px;
    margin: 8px var(--chat-frame-gutter, 54px) 10px auto !important;
    padding: 10px 12px 10px 13px !important;
    grid-template-columns: 2px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    align-items: center !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.095) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.022)),
      #101315 !important;
    box-shadow: none !important;
  }

  #work-row:has(#context-panel.active) .main-task-workbench {
    width: min(var(--chat-frame-width, 700px), calc(100% - var(--cp-width) - 108px)) !important;
    max-width: min(var(--chat-frame-width, 700px), calc(100% - var(--cp-width) - 108px)) !important;
    margin-right: calc(var(--cp-width) + var(--chat-frame-gutter, 54px)) !important;
  }

  .main-task-workbench-rail {
    width: 2px !important;
    min-height: 38px;
    border-radius: 999px !important;
    opacity: 0.75 !important;
    background: color-mix(in srgb, var(--task-state-main, #69c3a3) 82%, transparent) !important;
  }

  .main-task-workbench-body {
    gap: 3px !important;
  }

  .main-task-workbench-top {
    gap: 7px !important;
  }

  .main-task-workbench-mode,
  .main-task-workbench-status {
    font-family: var(--sans) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .main-task-workbench-mode {
    color: color-mix(in srgb, var(--task-state-main, #69c3a3) 80%, white 20%) !important;
  }

  .main-task-workbench-status {
    color: rgba(255, 255, 255, 0.42) !important;
  }

  .main-task-workbench-title {
    font-family: var(--sans) !important;
    font-size: 14px !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  .main-task-workbench-next {
    font-family: var(--sans) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.58) !important;
  }

  .main-task-workbench-actions {
    gap: 4px !important;
  }

  .main-task-workbench-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    border: 1px solid transparent !important;
    color: rgba(255, 255, 255, 0.56) !important;
    background: transparent !important;
  }

  .main-task-workbench-btn:hover {
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.085) !important;
  }

  .main-task-workbench-btn[data-action="done"] {
    color: color-mix(in srgb, var(--task-state-ready, #75c985) 72%, rgba(255, 255, 255, 0.38)) !important;
  }

  .main-task-workbench-btn[data-action="cover"],
  .main-task-workbench-btn[data-action="exit"] {
    color: rgba(231, 142, 126, 0.70) !important;
  }

  #work-row .input-zone {
    padding: 8px 0 28px 0 !important;
  }

  #work-row .input-row {
    border-radius: 24px !important;
    border: 1px solid var(--rule) !important;
    --composer-surface: var(--inbox-bg, var(--paper-dark));
    background: var(--inbox-bg, var(--paper-dark)) !important;
    padding: 12px 14px 10px !important;
    gap: 8px !important;
    box-shadow: none !important;
  }

  #work-row .input-row:focus-within {
    border-color: var(--ink-soft) !important;
    box-shadow: none !important;
  }

  #work-row .input-ta-wrap {
    min-height: 44px !important;
    align-items: center !important;
    padding: 0 2px !important;
  }

  .input-ta-wrap textarea,
  .input-row textarea,
  textarea#input {
    font-family: var(--sans) !important;
    font-size: var(--gi-composer-font, 14px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
  }

  .input-ta-wrap textarea::placeholder,
  .input-row textarea::placeholder,
  textarea#input::placeholder {
    font-family: var(--sans) !important;
    font-size: var(--gi-composer-font, 14px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: var(--ink-dim) !important;
  }

  #input-controls {
    min-height: 0;
    gap: 3px !important;
    align-items: center !important;
    font-family: var(--mono) !important;
  }

  body.dark #input-controls .ic-icon-btn,
  body.dark #input-controls .cycle-btn,
  body.dark #input-controls .cycle-btn.level-1,
  body.dark #input-controls .cycle-btn.level-2,
  body.dark #input-controls .cycle-btn.level-3,
  body.dark #input-controls .cycle-btn.level-codex,
  body.dark .input-row .ib:not(.send),
  body.dark .input-row .input-icon-btn {
    color: rgba(255, 255, 255, 0.58) !important;
    opacity: 1 !important;
  }

  #input-controls .cycle-btn,
  .input-row .ib:not(.send) {
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
  }

  #input-controls .cycle-btn:hover,
  .input-row .ib:not(.send):hover,
  .input-row .ic-icon-btn:hover {
    color: rgba(255, 255, 255, 0.90) !important;
    background: rgba(255, 255, 255, 0.055) !important;
  }

  body.dark #input-controls .ic-divider {
    background: rgba(255, 255, 255, 0.20) !important;
  }

  .ib.send {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    background: #f1ece4 !important;
    color: #11100e !important;
    border-radius: 999px !important;
  }

  .ib.send.talk-mode-active {
    color: #0f6840 !important;
    background: #c5ead6 !important;
    box-shadow: 0 0 0 3px rgba(47, 158, 103, 0.34) !important;
  }

  .ib.send:hover:not(:disabled) {
    background: #fff1e9 !important;
    box-shadow: 0 0 0 2px rgba(231, 120, 95, 0.28) !important;
    transform: translateY(-1px) !important;
  }

  .ib.send.talk-mode:hover:not(:disabled) {
    color: #185f41 !important;
    background: #daf2e5 !important;
    box-shadow: 0 0 0 2px rgba(74, 173, 124, 0.22) !important;
  }

  .ib.send.talk-mode-active:hover:not(:disabled) {
    color: #0b633b !important;
    background: #bce3cc !important;
    box-shadow: 0 0 0 3px rgba(47, 158, 103, 0.40) !important;
  }

  .ib.send:active:not(:disabled) {
    background: #e7785f !important;
    color: #120d0b !important;
    transform: translateY(0) scale(0.96) !important;
  }

  .ib.send:disabled {
    background: #e4b996 !important;
    color: rgba(61, 35, 23, 0.60) !important;
    box-shadow: 0 0 0 1px rgba(231, 120, 95, 0.14), 0 0 16px rgba(231, 120, 95, 0.10) !important;
  }

  .ib.send.stop,
  body.dark .ib.send.stop {
    background: #fff !important;
    color: #11100e !important;
    animation: none !important;
  }

  .ib.send.stop:hover:not(:disabled) {
    background: #f5f2ed !important;
    box-shadow: 0 0 0 2px rgba(231, 120, 95, 0.32) !important;
  }

  .ib.send.stop:disabled {
    background: #fff !important;
    color: #11100e !important;
    opacity: 0.72 !important;
  }

  .input-disclaimer {
    padding-top: 8px !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.30) !important;
  }
}

body:not([data-line-mode="code"]) textarea#input {
  font-family: var(--codex-chat-font-family, "OpenAI Sans", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Heebo", Arial, sans-serif) !important;
  font-size: var(--gi-composer-font, 14px) !important;
  line-height: var(--codex-composer-line, 1.62) !important;
  letter-spacing: 0 !important;
  font-weight: var(--codex-composer-weight, 350) !important;
  font-synthesis-weight: none;
  color: var(--ink-heavy) !important;
}
body:not([data-line-mode="code"]) textarea#input::placeholder {
  font-family: var(--codex-chat-font-family, "OpenAI Sans", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Heebo", Arial, sans-serif) !important;
  font-size: var(--gi-composer-font, 14px) !important;
  font-weight: var(--codex-composer-weight, 350) !important;
  letter-spacing: 0 !important;
}

/* @sas claim: Keeps the inbox input frame neutral across Read and Code modes so line mode no longer tints the composer border. | terms: input-row, data-line-mode, neutral frame, composer border | id: input:line-mode-frame-neutral | timestamp: 2026-06-11T00:00:00Z | live: true */

/* === SECTION: task-flow-cp-professional === */
/* CP is a work switcher: task creation is primary, the headline bar is gone, and rows use product UI typography. */
#context-panel {
  background: var(--cp-bg, #111416) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.075) !important;
}

/* ── Surface templates (palette row) — drive chrome / lane / CP / frame-edge ── */
body.dark.palette-wood   { --chrome-bg:#1c120d; --frame-bg:#1c1c1b; --cp-bg:#292929; --inbox-bg:var(--cp-bg); --frame-edge:rgba(255,255,255,0.06); }
body.dark.palette-slate  { --chrome-bg:#15171a; --frame-bg:#1a1a1a; --cp-bg:#2a2c30; --inbox-bg:var(--cp-bg); --frame-edge:rgba(255,255,255,0.06); }
body.dark.palette-forest { --chrome-bg:#0e1812; --frame-bg:#1a1a1a; --cp-bg:#242c26; --inbox-bg:var(--cp-bg); --frame-edge:rgba(255,255,255,0.06); }
body.dark.palette-ink    { --chrome-bg:#121212; --frame-bg:#1a1a1a; --cp-bg:#262626; --inbox-bg:var(--cp-bg); --frame-edge:rgba(255,255,255,0.06); }
body.dark.palette-plum   { --chrome-bg:#1a1018; --frame-bg:#1a1a1a; --cp-bg:#2a2630; --inbox-bg:var(--cp-bg); --frame-edge:rgba(255,255,255,0.06); }
body.dark.palette-ocean  { --chrome-bg:#0c1418; --frame-bg:#1a1a1a; --cp-bg:#232c30; --inbox-bg:var(--cp-bg); --frame-edge:rgba(255,255,255,0.06); }
/* Bright templates (light mode) */
body.palette-paper { --paper:#f4f0e8; --paper-dark:#e8e2d4; --chrome-bg:#e8e2d4; --frame-bg:#f4f0e8; --cp-bg:#ece6d8; --inbox-bg:#ece6d8; --frame-edge:rgba(0,0,0,0.06); }
body.palette-snow  { --paper:#fbfcfe; --paper-dark:#e6ebf0; --chrome-bg:#e6ebf0; --frame-bg:#fbfcfe; --cp-bg:#d8dee6; --inbox-bg:var(--cp-bg); --frame-edge:rgba(0,0,0,0.06); }
body.palette-sand  { --paper:#f3ecdf; --paper-dark:#e2d6c0; --chrome-bg:#e2d6c0; --frame-bg:#f3ecdf; --cp-bg:#d2c4a8; --inbox-bg:var(--cp-bg); --frame-edge:rgba(0,0,0,0.06); }
body.palette-linen { --paper:#f4f0e8; --paper-dark:#e8e2d4; --chrome-bg:#e8e2d4; --frame-bg:#dad0bb; --cp-bg:#ddd6c3; --inbox-bg:#ddd6c3; --frame-edge:rgba(0,0,0,0.24); }

body:not(.dark) {
  --chat-bg: var(--frame-bg);
  --composer-bg: var(--inbox-bg, var(--paper-dark));
  --cp-bridge-bg: color-mix(in srgb, var(--composer-bg) 50%, var(--chat-bg) 50%);
}

body.dark {
  --chat-bg: var(--frame-bg);
  --composer-bg: color-mix(in srgb, var(--inbox-bg, var(--cp-bg, #111416)) 76%, var(--chat-bg) 24%);
  --cp-bridge-bg: color-mix(in srgb, var(--composer-bg) 50%, var(--chat-bg) 50%);
}

/* @sas claim: Light-mode override for Context Panel controls keeps +prompt and the Line Spine readable on cream panel backgrounds. | terms: ctx-add-new, Line Spine, light mode, cp-bg, ink | id: cp:light-mode-upper-text | timestamp: 2026-06-05T00:00:00.000Z | modified_by: context-panel-prompt | live: true */
body:not(.dark) #context-panel-frame #ctx-add-new,
body:not(.dark) #context-panel-frame #ctx-add-skill { color: color-mix(in srgb, var(--ink) 58%, transparent) !important; }
body:not(.dark) #context-panel-frame #ctx-add-new:hover,
body:not(.dark) #context-panel-frame #ctx-add-skill:hover { color: var(--ink) !important; }
body:not(.dark) #ctx-add-clip { color: color-mix(in srgb, var(--ink) 52%, transparent) !important; }
body:not(.dark) #ctx-add-clip:hover { color: var(--ink) !important; background: rgba(0, 0, 0, 0.05) !important; }
body:not(.dark) .context-panel-line-spine { color: var(--ink); background: transparent; }
body:not(.dark) .context-panel-line-spine .csp-title { color: color-mix(in srgb, var(--ink) 50%, transparent); }

.shell:has(#context-panel.active) > .project-bar::after {
  right: 0 !important;
}

#context-panel-bar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#context-panel-bar-title {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

#ctx-panel-hint,
.ctx-kind-dots,
.ctx-kind-dot {
  display: none !important;
}

#ctx-context-items {
  border-bottom: 0 !important;
}

#ctx-context-items:empty {
  display: none !important;
}

#ctx-add-clip {
  order: 3 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

#ctx-add-clip:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

/* @sas claim: Final chrome cleanup hard-kills the old anomaly frame at the last cascade point so cached or late dark-polish rules cannot revive gold rails, corner overlays, or #work-row pseudo frames. | terms: final chrome cleanup, #main-content::before, #main-content::after, #work-row::before, body::after, anomaly frame hard kill | id: 0:final-anomaly-frame-hard-kill | timestamp: 2026-05-30T22:31:00Z | live: true */
/* Final chrome cleanup: remove edge rails, visible resize grips, and obsolete anomaly-frame overlays. Custom scroll thumbs (#chat-thumb, #view-thumb) show only on overflow. */
#book-edge {
  display: none !important;
}

#main-content {
  border: 0 !important;
  border-top-left-radius: 0 !important;
  box-shadow: none !important;
}

#main-content::before,
#main-content::after,
#work-row::before,
body:not(.no-auth)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* @sas claim: Content frame is ONE stroked SVG path (.mc-frame, child of #main-content in index.html) — vertical left edge -> square right-angle corner (path L0.5 0.5, miter join) -> top line, a single 1px stroke. Uniform weight. A horizontal CSS mask fades the top line out to the right (opaque 0-28%, transparent by 68%); vertical + corner stay solid. Stroke is rgba(255,255,255,0.32) on dark, rgba(0,0,0,0.22) on light (body:not(.dark)) — self-contained, does not depend on --frame-edge. #main-content border-top-left-radius is 0 so the overflow:hidden clip is square too; ::before/::after killed so nothing double-paints. Overrides the final chrome hard-kill. | terms: #main-content, .mc-frame, #main-content::before, #main-content::after, single SVG stroked path, square right-angle corner, fade mask, theme-aware stroke, final cascade restore | id: 0:dim-longer-upper-line-frame-final | modified_by: square-top-left-corner | timestamp: 2026-06-03T00:00:00Z | live: true */
#main-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border: 0 !important;
  border-top-left-radius: 0 !important;
  overflow: hidden !important;
}
#work-row {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#main-content::before {
  content: none !important;
  display: none !important;
}
#main-content::after {
  content: none !important;
  display: none !important;
}
.mc-frame {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 62 !important;
  overflow: hidden !important;
  -webkit-mask: linear-gradient(to right, #000 0%, #000 28%, transparent 68%) !important;
          mask: linear-gradient(to right, #000 0%, #000 28%, transparent 68%) !important;
}
.mc-frame path {
  stroke: rgba(255,255,255,0.32) !important;
}
body:not(.dark) .mc-frame path {
  stroke: rgba(0,0,0,0.22) !important;
}
/* @sas claim: Header chat fade — a non-interactive flat scrim inside the chat exchange frame lets transcript text pass under the header without washing over nav, rail, or panel chrome. It stays theme-matched, shadow-free, and clear of all tab controls. | terms: header fade, chat-main-shell::before, chat exchange frame, transcript top fade | id: 0:header-chat-fade | timestamp: 2026-06-14T00:00:00Z | live: true */
#chat-main-shell::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 32px !important;
  background: linear-gradient(to bottom, var(--frame-bg) 0%, color-mix(in srgb, var(--frame-bg) 72%, transparent) 46%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
/* @sas-section
// id: style:header-fade-panel-stop
// claim: Header fade follows the chat exchange frame, matching transcript gutters and panel offsets instead of covering app chrome.
// terms: header fade, chat lane, exchange frame, WorkRail, right panel line, chat-main-shell::before, context-panel
*/
@media (min-width: 701px) {
  #chat-main-shell::before {
    left: auto !important;
    right: var(--chat-frame-gutter, 54px) !important;
    width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
  }

  #work-row:has(#context-panel.active) #chat-main-shell::before {
    right: calc(var(--cp-width, 280px) + var(--chat-frame-gutter, 54px)) !important;
    width: min(var(--chat-frame-width, 700px), calc(100% - var(--cp-width, 280px) - 108px)) !important;
  }

  #work-row:has(#task-panel.active) #chat-main-shell::before,
  #work-row:has(#terminal-panel.active) #chat-main-shell::before {
    left: calc(var(--tp-width, 320px) + var(--chat-frame-gutter, 54px)) !important;
    right: auto !important;
    width: min(var(--chat-frame-width, 700px), calc(100% - var(--tp-width, 320px) - 108px)) !important;
  }

  #work-row:has(#context-panel.active):has(#task-panel.active) #chat-main-shell::before,
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #chat-main-shell::before {
    left: calc(var(--tp-width, 320px) + var(--chat-frame-gutter, 54px)) !important;
    right: auto !important;
    width: min(var(--chat-frame-width, 700px), calc(100% - var(--tp-width, 320px) - var(--cp-width, 280px) - 108px)) !important;
  }

  #work-row:has(#right-side-panel.active) #chat-main-shell::before,
  #work-row:has(#right-panel.active) #chat-main-shell::before {
    left: 16px !important;
    right: auto !important;
    width: min(760px, calc(100% - 32px)) !important;
  }
}
/* @sas-section
// id: style:non-chat-surfaces-above-header-fade
// claim: Rail panels, side panels, composer chrome, and workbench controls sit above the chat-only header fade.
// terms: WorkRail, workspace changes, context panel, task panel, right panel, composer, chat-main-shell::before
*/
@media (min-width: 701px) {
  #work-rail,
  #task-panel,
  #skills-panel,
  #terminal-panel,
  #right-side-panel,
  #right-panel,
  #work-right-panel,
  #context-panel,
  .input-zone,
  .main-task-workbench {
    z-index: 450 !important;
  }

  #work-rail-resize-handle,
  #task-panel-resize-handle,
  #terminal-panel-resize-handle,
  #panel-resize-handle,
  #right-panel-resize-handle,
  #context-panel-resize-handle {
    z-index: 451 !important;
  }

  #context-panel {
    z-index: 470 !important;
  }

  #context-panel-resize-handle {
    z-index: 471 !important;
  }
}
/* @sas claim: Header bottom line - the single top frame line is drawn on the header's ::after and fades shortly after the active project controls. The .mc-frame SVG stays hidden for the top segment, so this header rule is the only horizontal chrome line. | terms: .project-bar::after, header bottom line, project controls, active project name, fading top frame line, nav edge stroke, mc-frame vertical-only | id: 0:header-line-left-extension | modified_by: project-line-fade | timestamp: 2026-06-03T00:00:00Z | live: true */
/* @sas-section
// id: style:chat-bg-flat-panels
// claim: The project header and Context Panel backing planes merge with the chat background while auxiliary work panels keep the flat panel surface.
// terms: chat background, project-bar, Context Panel plane, flat panel, attachment tray, WorkRail, task panel, terminal panel
*/
:root {
  --flat-panel-bg: #0b0d0f;
}

body:not(.dark) {
  --flat-panel-bg: color-mix(in srgb, var(--cp-bg, var(--chat-bg)) 92%, var(--ink) 4%);
}

.line-strip,
#work-rail,
#task-panel,
#skills-panel,
#terminal-panel,
#right-side-panel,
#right-panel,
#work-right-panel,
#panel-view-slot,
#context-panel-bar,
#right-side-panel .checklist-panel,
#right-side-panel .dict-panel,
.book-edge-panel {
  background: var(--flat-panel-bg) !important;
  box-shadow: none !important;
}

.shell > .project-bar,
#context-panel {
  background: var(--chat-bg, var(--frame-bg, var(--flat-panel-bg))) !important;
  box-shadow: none !important;
}

#context-panel-frame-title {
  color: color-mix(in srgb, #cfd8d2 48%, transparent) !important;
  opacity: 1;
}
body:not(.dark) #context-panel-frame-title {
  color: color-mix(in srgb, var(--ink) 50%, transparent) !important;
}

#context-panel-frame #ctx-add-skill,
#context-panel-frame #ctx-add-new {
  color: color-mix(in srgb, var(--ink) 64%, transparent) !important;
  opacity: 1;
}

.line-tab-scroll,
.line-tab-scroll:disabled {
  background: var(--flat-panel-bg) !important;
}

.line-strip.line-tabs-can-scroll-left .line-tab-scroll-left,
.line-strip.line-tabs-can-scroll-right .line-tab-scroll-right {
  background: color-mix(in srgb, var(--ink) 4.5%, var(--flat-panel-bg)) !important;
}

.line-tab-scroll:hover:not(:disabled),
.line-tab-scroll:focus-visible {
  background: color-mix(in srgb, var(--ink) 7.5%, var(--flat-panel-bg)) !important;
}

.shell > .project-bar::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(to right, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 128px, rgba(255,255,255,0.055) 190px, transparent 270px) !important;
  opacity: 1 !important;
  z-index: 401 !important;
  pointer-events: none !important;
}
body:not(.dark) .shell > .project-bar::after {
  background: linear-gradient(to right, rgba(0,0,0,0.22) 0, rgba(0,0,0,0.22) 128px, rgba(0,0,0,0.07) 190px, transparent 270px) !important;
}
/* @sas claim: Subtle panel edge — the nav bar carries a soft lit rim while the Context Panel reads as one continuous frameless rail: no boxed Spine/attachment frames, small-caps section labels and spacing do the separation. | terms: aside::after, #context-panel::before, continuous rail, frameless Context Panel, Line Spine section, attachments section, floating nav bar, mc-frame hidden, soft lit rim | id: 0:subtle-panel-edges | timestamp: 2026-08-05T00:00:00Z | live: true */
.mc-frame { display: none !important; }
aside::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 1px !important;
  height: 100% !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.12) 35%, rgba(255,255,255,0.085) 68%, rgba(255,255,255,0.03) 88%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 250 !important;
}
#context-panel::before {
  content: none !important;
  display: none !important;
}
#work-row::before,
body:not(.no-auth)::after {
  content: none !important;
  display: none !important;
}

#panel-resize-handle,
#right-panel-resize-handle,
#context-panel-resize-handle,
#task-panel-resize-handle,
#terminal-panel-resize-handle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#panel-resize-handle:hover,
#right-panel-resize-handle:hover,
#context-panel-resize-handle:hover,
#task-panel-resize-handle:hover,
#terminal-panel-resize-handle:hover {
  background: transparent !important;
}

#panel-resize-handle::after,
#right-panel-resize-handle::after,
#context-panel-resize-handle::after,
#task-panel-resize-handle::after,
#terminal-panel-resize-handle::after {
  display: none !important;
}

#panel-resize-handle .rh-grip,
#right-panel-resize-handle .rh-grip,
#context-panel-resize-handle .rh-grip {
  display: none !important;
}

#context-panel {
  border-left: 0 !important;
}
body:not(.dark) #context-panel {
  border-left: 0 !important;
}

.main-task-workbench {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

/* Persistent task artifacts: keep a quiet document-card surface in chat. */
.task-md-artifact-row {
  padding-left: 56px !important;
}

.task-md-artifact {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  background: color-mix(in srgb, var(--surface-1, #1f1d19) 86%, var(--ink) 4%) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

.task-md-artifact-head {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.task-md-artifact-icon,
.task-md-artifact-icon::after,
.task-md-artifact-dot,
.task-md-artifact-route {
  display: inline-flex !important;
}

.task-md-artifact-preview,
.task-md-artifact-actions,
.task-md-artifact-expanded .task-md-artifact-body {
  margin-left: 32px !important;
}

.task-md-artifact-actions button,
.task-md-artifact-actions .task-md-primary {
  appearance: none !important;
  -webkit-appearance: none !important;
  border-color: color-mix(in srgb, var(--ink) 14%, transparent) !important;
  background: transparent !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--ink) 72%, transparent) !important;
}

.task-md-artifact-actions button:hover,
.task-md-artifact-actions .task-md-primary:hover {
  border-color: color-mix(in srgb, var(--ink) 24%, transparent) !important;
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
  color: var(--ink) !important;
}

/* Retired focused-task strip: task focus stays active through the
   context-panel row and composer chip, without adding a bar above the inbox. */
.main-task-workbench {
  display: none !important;
}
@keyframes ctxProcessRunningPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #6b9fd4 35%, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, #6b9fd4 0%, transparent); transform: scale(1.12); }
}
@keyframes giResBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
/* transform/opacity only — both composite on the GPU. `filter: brightness()` used to
   ride along here, and filter is NOT compositable: it forced a style recalc plus a full
   repaint every frame for as long as the pulse ran. Because this animation is `infinite`
   and driven by the `gi-processing` body class, any stranded processing state turned it
   into a permanent whole-page repaint loop — measured at ~800 style invalidations/sec,
   two thirds of all rendering work. Keep this keyframe compositable. */
@keyframes giAttachPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.92;
  }
  50% {
    transform: translateY(-1px) scale(1.06);
    opacity: 1;
  }
}
.gi-task-menu { position: fixed; z-index: 1000; min-width: 174px; background: var(--paper, #14120f); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: 5px; font-family: var(--sans); font-size: 12.5px; }
.gi-task-menu .gtm-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: color-mix(in srgb, var(--ink) 84%, transparent); white-space: nowrap; }
.gi-task-menu .gtm-row:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.gi-task-menu .gtm-ico { width: 15px; display: inline-flex; align-items: center; justify-content: center; opacity: .85; flex-shrink: 0; }
.gi-task-menu .gtm-chev { margin-left: auto; opacity: .4; }
.gi-task-menu .gtm-sep { height: 1px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin: 4px 4px; }
.gi-task-menu .gtm-danger { color: color-mix(in srgb, var(--red, #c0392b) 85%, var(--ink)); }
.gi-task-menu .gtm-danger:hover { background: color-mix(in srgb, var(--red, #c0392b) 14%, transparent); color: var(--red, #c0392b); }

/* in-menu delete confirm (replaces the floating "click delete again" toast) */
.gi-task-menu .gtm-row.gtm-confirm { background: color-mix(in srgb, var(--red, #c0392b) 20%, transparent) !important; color: var(--red, #c0392b) !important; font-weight: 600; }
.gi-task-menu .gtm-row.gtm-confirm .gtm-ico { color: var(--red, #c0392b); opacity: 1; }

/* Context Panel line-context chip rail.
   Managed row of the active line's context items.
   armed = rides the next message (bright + ring); parked = covered (grey). Tap
   toggles, remove deletes, armed items breathe on send. */
#context-panel-frame { display: none; align-items: flex-start; gap: 6px; min-width: 0; max-width: 46vw; overflow-x: auto; overflow-y: hidden; padding: 0 6px; }
#context-panel-frame-items { grid-row: 2; justify-self: stretch; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 6px; width: 100%; min-width: 0; min-height: 0; }
#context-panel-frame-items:empty::before {
  content: "Nothing pinned yet — drop a file or +prompt to keep context the assistant sees every turn.";
  display: block;
  width: 100%;
  padding-top: 4px;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0;
  color: color-mix(in srgb, #cfd8d2 38%, transparent);
}
body:not(.dark) #context-panel-frame-items:empty::before {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}
#context-panel-frame::-webkit-scrollbar { height: 0; }
#context-panel-frame .tab-item { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; transition: opacity .14s ease, filter .14s ease; }
#context-panel-frame .tab-item.tab-img { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--rule, rgba(128,128,128,.3)); background: color-mix(in srgb, var(--ink) 8%, transparent); }
#context-panel-frame .tab-item.tab-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
#context-panel-frame .tab-item.tab-img video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; background: #111; }
#context-panel-frame .tab-item.tab-chip { gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 8%, transparent); border: 1px solid var(--rule, rgba(128,128,128,.3)); }
#context-panel-frame .tab-item.tab-chip .tab-ico { font-size: 11px; opacity: .86; }
#context-panel-frame .tab-item.tab-chip .tab-lbl { font-size: 11px; max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--accent, #3aad7c) 46%, var(--ink-soft)); }
#context-panel-frame .tab-item.tab-prompt { max-width: 194px; background: color-mix(in srgb, var(--accent, #3aad7c) 10%, transparent); }
#context-panel-frame .tab-item.tab-prompt .tab-ico { font-weight: 700; color: color-mix(in srgb, var(--accent, #3aad7c) 76%, var(--ink-soft)); }
#context-panel-frame .tab-item.tab-prompt .tab-lbl { max-width: 150px; color: color-mix(in srgb, var(--accent, #3aad7c) 62%, var(--ink)); }
#context-panel-frame .tab-item.tab-line-ref {
  max-width: 210px;
  background: color-mix(in srgb, var(--blue, #4f7cff) 11%, transparent);
}
#context-panel-frame .tab-item.tab-line-ref .tab-ico {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: color-mix(in srgb, var(--blue, #4f7cff) 78%, var(--ink-soft));
  border: 1px solid color-mix(in srgb, var(--blue, #4f7cff) 36%, transparent);
}
#context-panel-frame .tab-item.tab-line-ref .tab-lbl { max-width: 158px; color: color-mix(in srgb, var(--blue, #4f7cff) 56%, var(--ink-soft)); }
/* @sas claim: Active-skill chips in the Context Panel frame — gold-toned pills showing only a skill icon glyph and the skill name. The active-this-turn state (accent fill) is carried by the chip's own styling, not by a text badge. A skill has no chip until it fires — there is no "available"/frame-hint chip. | terms: skill chips, tab-skill, skill icon, active state, unpin | id: cp:skill-chip-css | live: true */
#context-panel-frame .tab-item.tab-skill {
  max-width: 210px;
  background: color-mix(in srgb, var(--gold, #c9a35a) 11%, transparent);
  border-color: color-mix(in srgb, var(--gold, #c9a35a) 32%, var(--rule, rgba(128,128,128,.3)));
}
/* Icon slot holds the puzzle glyph; the extra .tab-chip in the selector beats the generic
   accent-colored .tab-chip .tab-ico rule so the skill glyph stays gold. */
#context-panel-frame .tab-item.tab-skill.tab-chip .tab-ico {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--gold, #c9a35a) 82%, var(--ink-soft));
}
#context-panel-frame .tab-item.tab-skill.tab-chip .tab-ico svg { width: 13px; height: 13px; display: block; }
#context-panel-frame .tab-item.tab-skill .tab-lbl { max-width: 150px; color: color-mix(in srgb, var(--gold, #c9a35a) 60%, var(--ink)); }
#context-panel-frame .tab-item.tab-skill.active {
  border-color: color-mix(in srgb, var(--accent, #3aad7c) 62%, var(--rule, rgba(128,128,128,.3)));
  background: color-mix(in srgb, var(--accent, #3aad7c) 14%, var(--paper, #14120f));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #3aad7c) 18%, transparent);
}
#context-panel-frame .tab-item.tab-skill.active .tab-ico { color: color-mix(in srgb, var(--accent, #3aad7c) 84%, var(--ink)); }
/* A PICKUP chip — a skill the AI read out of the hidden Skill Index for one turn. Same gold family,
   but unfilled and dashed: held for the turn, not owned by the line. The difference has to be
   legible at rest, because the point is telling what merely rode the frame from what is switched on. */
#context-panel-frame .tab-item.tab-skill.tab-skill-turn {
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--gold, #c9a35a) 40%, var(--rule, rgba(128,128,128,.3)));
}
#context-panel-frame .tab-item.tab-skill.tab-skill-turn .tab-lbl { color: color-mix(in srgb, var(--gold, #c9a35a) 44%, var(--ink)); }
#context-panel-frame .tab-item.tab-skill.tab-skill-turn.tab-chip .tab-ico { color: color-mix(in srgb, var(--gold, #c9a35a) 58%, var(--ink-soft)); }
/* Skills group: +prompt attachments and skill chips separate into their own rows of the CP strip. */
#context-panel-frame-items > .cp-skill-group { flex-basis: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
#context-panel-frame-items > .cp-skill-group:not(:first-child) { margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--rule, rgba(128,128,128,.28)); }
/* @sas claim: Loaded tool-server chips in the Context Panel frame — the mirror of the skill chips, one row below and in a cool steel tone so a capability the AI can CALL reads apart from a skill it READS. Only a loaded server draws a chip; hinted and hidden draw nothing. | terms: tool chips, tab-tool, cp-tool-group, plug glyph, loaded | id: cp:tool-chip-css | live: true */
#context-panel-frame .tab-item.tab-tool {
  max-width: 210px;
  background: color-mix(in srgb, #6f9dc4 11%, transparent);
  border-color: color-mix(in srgb, #6f9dc4 32%, var(--rule, rgba(128,128,128,.3)));
}
#context-panel-frame .tab-item.tab-tool.tab-chip .tab-ico {
  width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, #6f9dc4 82%, var(--ink-soft));
}
#context-panel-frame .tab-item.tab-tool.tab-chip .tab-ico svg { width: 13px; height: 13px; display: block; }
#context-panel-frame .tab-item.tab-tool .tab-lbl { max-width: 150px; color: color-mix(in srgb, #6f9dc4 60%, var(--ink)); }
#context-panel-frame-items > .cp-tool-group { flex-basis: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
#context-panel-frame-items > .cp-tool-group:not(:first-child) { margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--rule, rgba(128,128,128,.28)); }
/* @sas claim: Injected operational ledger chips render in the context panel as warm read-only document pills with longer labels and without action affordances, distinguishing backend-ledger context from user-managed context items. | terms: context panel, tab-ledger, operational ledger, read-only chip | id: 6165:ledger-chip-css | timestamp: 2026-06-11T00:00:00.000Z | live: true */
#context-panel-frame .tab-item.tab-chip.tab-ledger {
  max-width: min(320px, 42vw);
  background: color-mix(in srgb, #d1b269 14%, var(--paper, #14120f));
  border-color: color-mix(in srgb, #d1b269 34%, var(--rule, rgba(128,128,128,.3)));
}
#context-panel-frame .tab-item.tab-chip.tab-ledger .tab-ico {
  color: color-mix(in srgb, #d1b269 72%, var(--ink-soft));
}
#context-panel-frame .tab-item.tab-chip.tab-ledger .tab-lbl {
  max-width: min(244px, 34vw);
}
#context-panel-frame .tab-item.armed { opacity: 1; filter: none; }
#context-panel-frame .tab-item.parked { opacity: .42; filter: grayscale(1); }
#context-panel-frame .tab-item.parked.tab-chip .tab-lbl { color: color-mix(in srgb, var(--ink) 46%, transparent); }
#context-panel-frame .tab-item.armed.tab-img { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent, #3aad7c) 70%, transparent); }
#context-panel-frame .tab-item.armed.tab-chip { border-color: color-mix(in srgb, var(--accent, #3aad7c) 60%, transparent); }
#context-panel-frame .tab-x { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rule, rgba(128,128,128,.4)) 86%, rgba(255,255,255,.18)); background: color-mix(in srgb, var(--paper, #14120f) 94%, rgba(0,0,0,.08)); color: var(--ink); font-size: 10px; line-height: 1; display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
#context-panel-frame .tab-item:hover .tab-x { display: flex; }
#context-panel-frame .tab-cover { position: absolute; top: -5px; left: -5px; width: 16px; height: 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rule, rgba(128,128,128,.4)) 86%, rgba(255,255,255,.18)); background: color-mix(in srgb, var(--paper, #14120f) 94%, rgba(0,0,0,.08)); color: var(--ink); font-size: 9px; line-height: 1; display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
#context-panel-frame .tab-item:hover .tab-cover { display: flex; }
#context-panel-frame .tab-item.parked .tab-cover { display: flex; color: color-mix(in srgb, var(--ink) 45%, transparent); }
/* SVG icons in the header chips (file/image glyph + eye/eye-off cover + × remove). */
#context-panel-frame .tab-item.tab-chip .tab-ico { color: color-mix(in srgb, var(--accent, #3aad7c) 75%, var(--ink-soft)); }
#context-panel-frame .tab-item.tab-chip .tab-ico svg { width: 13px; height: 13px; display: block; }
#context-panel-frame .tab-x svg { width: 10px; height: 10px; display: block; }
#context-panel-frame .tab-cover svg { width: 10px; height: 10px; display: block; }
#context-panel-frame .tab-x:hover { color: var(--red, #e5534b); border-color: color-mix(in srgb, var(--red, #e5534b) 60%, transparent); }
/* A pickup carries + and × together: keep sits just inside the dismiss control. The positive
   action keeps the accent hover while the dismiss control keeps the destructive red hover. */
#context-panel-frame .tab-skill-turn .tab-skill-load { right: 12px; }
#context-panel-frame .tab-skill-load:hover { color: var(--accent, #3aad7c); border-color: color-mix(in srgb, var(--accent, #3aad7c) 60%, transparent); }
#context-panel-frame .tab-cover:hover { color: var(--accent, #3aad7c); border-color: color-mix(in srgb, var(--accent, #3aad7c) 60%, transparent); }
/* Prompt AND skill chips keep inline cover/remove; a top-center pin (hover-revealed) promotes to all lines. */
#context-panel-frame .tab-pin { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 17px; height: 17px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rule, rgba(128,128,128,.4)) 86%, rgba(255,255,255,.18)); background: color-mix(in srgb, var(--paper, #14120f) 94%, rgba(0,0,0,.08)); color: var(--ink); line-height: 1; display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
#context-panel-frame .tab-item:hover .tab-pin { display: flex; }
#context-panel-frame .tab-pin svg { width: 11px; height: 11px; display: block; }
#context-panel-frame .tab-pin:hover { color: var(--accent, #3aad7c); border-color: color-mix(in srgb, var(--accent, #3aad7c) 60%, transparent); }
/* Pinned is hover-only like every other chip control — a badge sitting at rest overlapped the
   chip's own label and read as noise. The accent fill still separates pinned from unpinned the
   moment the pin is revealed, so the all-lines state is one hover away, never hidden. */
#context-panel-frame .tab-pin.is-pinned { color: var(--accent, #3aad7c); border-color: color-mix(in srgb, var(--accent, #3aad7c) 55%, transparent); background: color-mix(in srgb, var(--accent, #3aad7c) 16%, var(--paper, #14120f)); }
/* Bottom-center mirror of .tab-pin: promote this prompt into a real account skill (hover-revealed). */
#context-panel-frame .tab-skilladd { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 17px; height: 17px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rule, rgba(128,128,128,.4)) 86%, rgba(255,255,255,.18)); background: color-mix(in srgb, var(--paper, #14120f) 94%, rgba(0,0,0,.08)); color: var(--ink); line-height: 1; display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
#context-panel-frame .tab-item:hover .tab-skilladd { display: flex; }
#context-panel-frame .tab-skilladd svg { width: 11px; height: 11px; display: block; }
#context-panel-frame .tab-skilladd:hover { color: var(--accent, #3aad7c); border-color: color-mix(in srgb, var(--accent, #3aad7c) 60%, transparent); }
body.gi-processing #context-panel-frame .tab-item.armed {
  animation: giAttachPulse 1.65s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}
body.gi-processing #context-panel-frame .tab-item.armed:nth-child(2n) { animation-delay: .14s; }
body.gi-processing #context-panel-frame .tab-item.armed:nth-child(3n) { animation-delay: .28s; }
body.gi-processing #context-panel-frame .tab-item.armed:hover,
body.gi-processing #context-panel-frame .tab-item.armed:focus-within { animation: none; }
@media (prefers-reduced-motion: reduce) {
  body.gi-processing #context-panel-frame .tab-item.armed {
    animation: none;
    will-change: auto;
  }
}
/* Line context chip rail lives inside the context panel.
   Fill the panel width, wrap chips instead of horizontal scroll, sit at the bottom. */
#context-panel-frame-split-handle {
  position: relative;
  display: none;
  flex: 0 0 12px;
  min-height: 12px;
  cursor: row-resize;
  touch-action: none;
  outline: none;
  z-index: 12;
}
#context-panel.active #context-panel-frame-split-handle { display: block; }
#context-panel-frame-split-handle::before {
  content: none;
  display: none;
}
#context-panel-frame-split-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 4px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  opacity: 0;
  transition: opacity .14s ease, background .14s ease;
}
#context-panel-frame-split-handle:hover::after,
#context-panel-frame-split-handle:focus-visible::after,
#context-panel-frame-split-handle.dragging::after {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, #3aad7c) 70%, var(--ink-soft));
}
#context-panel-frame-split-handle.dragging::before {
  background: color-mix(in srgb, var(--accent, #3aad7c) 45%, transparent);
}
#context-panel #context-panel-frame {
  /* Persistent slot — always reserve the bottom region even when empty, so
     switching lines/rooms never collapses the space (overrides the JS that
     sets display:none when a context has no attachments). */
  display: grid !important;
  grid-template-rows: minmax(28px, auto) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 var(--cp-frame-height, 42%);
  align-self: stretch !important;
  justify-self: stretch !important;
  min-height: 88px;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 10px;
  margin: 0 7px 10px 10px;
  padding: 14px 16px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
}

/* In-chat context chips: an image renders as a thumbnail, a doc as a labeled chip.
   Both open the full view on click; the context panel carries the live/active copy. */
.msg-attach-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: flex-start; max-width: 100%; }
.msg-attach-row--outside { align-self: flex-end; justify-content: flex-end; margin: 0; }
.msg-attach-row--inline { margin-bottom: 8px; }
.msg-attach-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 260px; padding: 6px 11px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--rule, rgba(128,128,128,.26)); font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft, #bbb); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.msg-attach-chip:hover { border-color: color-mix(in srgb, var(--accent, #3aad7c) 50%, transparent); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.msg-attach-chip .msg-attach-ficon { display: inline-flex; flex-shrink: 0; color: color-mix(in srgb, var(--accent, #3aad7c) 80%, var(--ink-soft)); }
.msg-attach-chip .msg-attach-ficon svg { width: 15px; height: 15px; display: block; }
.msg-attach-chip .msg-attach-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-attach-chip--img { padding: 0; border: none; background: none; max-width: min(220px, 100%); }
.msg-attach-chip--img .msg-attach-thumb { display: block; max-width: min(200px, 100%); max-height: 150px; border-radius: 9px; border: 1px solid var(--rule, rgba(128,128,128,.28)); object-fit: cover; }
.msg-attach-chip--img:hover .msg-attach-thumb { border-color: color-mix(in srgb, var(--accent, #3aad7c) 55%, transparent); }
.msg-attach-chip--video { padding: 0; border: none; background: none; max-width: min(220px, 100%); }
.msg-attach-chip--video .msg-attach-thumb { display: block; max-width: min(200px, 100%); max-height: 150px; border-radius: 9px; border: 1px solid var(--rule, rgba(128,128,128,.28)); object-fit: cover; background: #111; }
.msg-attach-chip--video:hover .msg-attach-thumb { border-color: color-mix(in srgb, var(--accent, #3aad7c) 55%, transparent); }
.msg-attach-chip.is-covered { opacity: .45; }
.msg-attach-chip.is-covered:hover { opacity: .7; }
/* Hover toolbar — one tidy floating pill of icon buttons (full view, cover/uncover, remove). */
.msg-attach-tools { position: absolute; top: 5px; right: 5px; display: none; align-items: center; gap: 1px; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--paper, #14120f) 86%, transparent); border: 1px solid var(--rule, rgba(128,128,128,.32)); box-shadow: 0 3px 10px rgba(0,0,0,.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 3; }
/* On a doc chip the toolbar floats ABOVE so it never covers the filename; image chips keep
   the corner overlay (there's room over the thumbnail). */
.msg-attach-chip:not(.msg-attach-chip--img):not(.msg-attach-chip--video) .msg-attach-tools { top: auto; bottom: calc(100% + 5px); right: 0; }
.msg-attach-chip:hover .msg-attach-tools { display: inline-flex; }
.msg-attach-tools button { width: 23px; height: 23px; border: none; background: none; color: var(--ink-soft, #aaa); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; border-radius: 6px; transition: background .12s ease, color .12s ease; }
.msg-attach-tools button svg { width: 14px; height: 14px; display: block; }
.msg-attach-tools button:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
.msg-attach-tools button.msg-attach-x:hover { background: color-mix(in srgb, var(--red, #e5534b) 18%, transparent); color: var(--red, #e5534b); }

/* === SECTION: task-panel-redesign === */
/* @sas claim: Workspace-panel (Task/Terminal/Code) redesign — calm document layout. The panel's own mode bar is the single control (no floating strip). Title meta/lane chips become one quiet status line; PLAN is the hero with a progress count; reference named-sections (Context/Decisions/Constraints/Goal/Effort/Progress) collapse by default so the panel is never a wall of text; NEXT renders above PLAN (in renderTaskAnatomy); footer is one Complete + a quiet Open Terminal. All rules sit after the base tp-* styles so they override by source order. | terms: tp-anatomy, tp-title-block, tp-meta-chip, tp-mode-bar, desk-tab, tp-plan, tp-plan-count, tp-collapsible, tp-collapsed, tp-named-section, tp-footer, tp-complete-btn | id: task-panel-redesign:css | timestamp: 2026-06-06T00:00:00Z | live: true */

/* Mode bar — quiet soft tabs (Task / Terminal / Code) */
#tp-mode-bar { height: 40px; gap: 2px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.desk-tab { font-family: var(--sans); font-size: 12px; letter-spacing: 0.07em; padding: 5px 12px; border-radius: 6px; }

/* Anatomy rhythm + a touch more room */
.tp-anatomy { gap: 18px; padding: 16px 18px 40px; }

/* Title + one quiet status line (replaces stacked pill + chip rows) */
.tp-title-block { gap: 8px; }
.tp-title-text { font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.35; color: var(--ink); }
.tp-meta-row, .tp-lane-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.tp-meta-chip { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); background: none; padding: 0; letter-spacing: 0.01em; }
.tp-meta-chip + .tp-meta-chip::before { content: "·"; margin-right: 10px; color: var(--ink-dim); }

/* Section labels — quieter; bodies in serif prose */
.tp-section-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; }
.tp-section-body { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* PLAN — the hero, with a progress count */
.tp-plan { gap: 10px; }
.tp-plan > .tp-section-label { display: flex; align-items: baseline; justify-content: space-between; }
.tp-plan-count { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-dim); }
.tp-plan-text { font-family: var(--serif); font-size: 16px; line-height: 1.55; }

/* NEXT — single calm callout (rendered above plan by renderTaskAnatomy) */
.tp-ns-next { background: color-mix(in srgb, #e8a84a 7%, transparent); border-radius: 0 6px 6px 0; padding: 9px 12px; }
.tp-ns-next > .tp-section-body { font-family: var(--serif); font-size: 16px; color: var(--ink); }

/* Collapsible reference sections — chevron on the label, body hidden when collapsed */
.tp-collapsible > .tp-section-label { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.tp-collapsible > .tp-section-label::after { content: "⌄"; margin-left: auto; font-size: 11px; opacity: 0.6; transition: transform 0.15s ease; }
.tp-collapsible.tp-collapsed > .tp-section-label::after { transform: rotate(-90deg); }
.tp-collapsible.tp-collapsed > .tp-section-body { display: none; }

/* Footer — one primary Complete + a quiet Open Terminal */
.tp-footer { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.tp-complete-btn { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6ba56b; background: color-mix(in srgb, #6ba56b 14%, transparent); border: 1px solid color-mix(in srgb, #6ba56b 45%, transparent); border-radius: 6px; padding: 7px 16px; cursor: pointer; }
.tp-complete-btn:hover { background: color-mix(in srgb, #6ba56b 22%, transparent); }
.tp-terminal-btn { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 0; }
.tp-terminal-btn:hover { color: var(--ink); }

/* Done-when — quiet footnote */
.tp-done-when { gap: 4px; }
.tp-done-when-body { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--ink-dim); }

/* Add-todo — subtle inline affordance, not a boxed input */
.tp-add-todo-row { margin-top: 2px; }
.tp-add-todo-input { font-family: var(--sans); font-size: 14px; background: none; border: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); padding: 4px 0; width: 100%; }
.tp-add-todo-input::placeholder { color: var(--ink-dim); }
.tp-add-todo-input:focus { outline: none; border-bottom-color: var(--accent); }

/* Plan/todo list — plain text only. No frame, fill, accent color, or checkbox box. */
.tp-plan {
  gap: 8px;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.tp-plan > .tp-section-label {
  color: var(--ink-dim) !important;
}
.tp-plan-count {
  color: var(--ink-dim) !important;
}
.tp-plan-list {
  gap: 5px;
}
.tp-plan-item {
  display: block;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
}
.tp-plan-cb {
  display: none;
}
.tp-plan-cb--checked {
  background: transparent;
  border-color: transparent;
}
.tp-plan-cb--checked::after {
  display: none;
}
.tp-plan-text {
  color: var(--ink);
}
.tp-plan-item--done {
  opacity: 0.55;
}
.tp-plan-item--done .tp-plan-text {
  color: var(--ink);
  text-decoration: line-through;
}
.tp-plan-item--done .tp-plan-text::after {
  display: none;
}
/* === END SECTION: task-panel-redesign === */

/* === SECTION: work-rail === */
/* Owner: work-rail.js — left auto-tiling work rail (Files/Diff/Terminal/Plan/Background/Preview),
   launcher popover, tiling grid, hover-line overflow, maximize, stable nav rail.
   Bounded in-flow lane; full-view is the explicit large mode. */

/* ── launcher button (top header, beside #line-mode-toggle) ─────────────────── */
.work-rail-launcher {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 26px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--rule, color-mix(in srgb, var(--ink) 14%, transparent));
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.work-rail-launcher:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.work-rail-launcher[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.work-rail-launcher { display: none !important; }

/* ── launcher menu (popover, appended to body) ─────────────────────────────── */
.wr-menu {
  position: fixed;
  z-index: 1200;
  min-width: 220px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule, color-mix(in srgb, var(--ink) 14%, transparent));
  border-radius: 10px;
  box-shadow: 0 10px 34px color-mix(in srgb, #000 28%, transparent);
  font-family: var(--sans);
}
.wr-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.wr-menu-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.wr-mi-ic { display: inline-flex; color: var(--ink-soft); flex-shrink: 0; }
.wr-mi-label { flex: 1; }
.wr-mi-key { color: var(--ink-dim); font-size: 11px; letter-spacing: .02em; }

/* ── rail container (bounded left lane; full-view covers when requested) ───── */
#work-rail {
  --rail-standard-font: var(--sans);
  order: 1;
  flex: 0 0 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--frame-bg);
  border: 0 solid var(--rule, color-mix(in srgb, var(--ink) 12%, transparent));
  font-family: var(--rail-standard-font);
  transition: flex-basis .18s ease;
  z-index: 6;
}
#work-rail .wr-tile:not([data-surface="terminal"]):not([data-surface="diff"]):not([data-surface="preview"]),
#work-rail .wr-tile:not([data-surface="terminal"]):not([data-surface="diff"]):not([data-surface="preview"]) :where(*) {
  font-family: var(--rail-standard-font) !important;
}
#work-rail .wr-tile:not([data-surface="terminal"]):not([data-surface="diff"]):not([data-surface="preview"]) :is(code, pre, kbd, samp),
#work-rail .wr-tile:not([data-surface="terminal"]):not([data-surface="diff"]):not([data-surface="preview"]) :is(code, pre, kbd, samp) :where(*) {
  font-family: var(--code) !important;
}
#work-rail.has-tiles {
  flex-basis: var(--rail-width, 420px);
  border-width: 1px;
}
body.wr-resizing #work-rail { transition: none; }

#work-rail-resize-handle {
  order: 1;
  flex: 0 0 0;
  width: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 7;
  display: none;
}
#work-row:has(#work-rail.has-tiles) #work-rail-resize-handle { display: block; flex-basis: 3px; }
#work-rail-resize-handle:hover,
body.wr-resizing #work-rail-resize-handle {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* Keep the closed nav spine stable when WorkRail is open. */
.shell:has(#work-rail.has-tiles) { grid-template-columns: var(--sidebar-rail, 12px) 1fr; }
.shell:has(#work-rail.has-tiles):has(> aside:is(:hover,.pinned)) { grid-template-columns: var(--sidebar-open) 1fr; }

/* Maximize: one tile covers the work area while nav and header stay visible. */
/* Full view overlays chat, task rail, and other work-row elements; nav/header stay outside #work-row. */
#work-row.rail-max #work-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  flex-basis: auto !important;
  z-index: 700 !important;
}
#work-row.rail-max #work-rail-resize-handle { display: none !important; }

/* @sas claim: When the left WorkRail is open, keep the right task/context panel in its normal lane and only suppress decorative right-side chrome. | terms: work-rail, context-panel, task rail, right chrome | id: work-rail:keep-task-rail-visible | timestamp: 2026-06-10T00:00:00Z | live: true */
#work-row:has(#work-rail.has-tiles) #work-right-panel,
#work-row:has(#work-rail.has-tiles) #brain-frame {
  display: none !important;
}

/* ── tiles area (CSS grid sized by data-live) ──────────────────────────────── */
.wr-tiles {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 0;
  padding: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.wr-tiles[data-live="0"] { display: none; }
.wr-tiles[data-live="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.wr-tiles[data-live="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.wr-tiles[data-live="3"] .wr-tile:first-child { grid-column: 1 / -1; }
.wr-tiles[data-live="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* Several open rails: a small gutter plus one quiet hairline so each pane reads as its own. */
.wr-tiles[data-live="2"],
.wr-tiles[data-live="3"],
.wr-tiles[data-live="4"] {
  gap: var(--space-2);
  padding: var(--space-2);
}

/* ── a tile ────────────────────────────────────────────────────────────────── */
.wr-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.wr-tiles[data-live="2"] .wr-tile,
.wr-tiles[data-live="3"] .wr-tile,
.wr-tiles[data-live="4"] .wr-tile {
  background: var(--paper);
  border: 1px solid var(--rule, color-mix(in srgb, var(--ink) 12%, transparent));
  border-radius: 6px;
}
.wr-tile-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 8px 0 11px;
  border-bottom: 0;
  font-family: var(--sans);
}
.wr-tile-ic { display: inline-flex; color: var(--ink-soft); flex-shrink: 0; }
.wr-tile-title { flex: 1; font-size: 12px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Code Map tile bar: one compact switch replaces the title. The selected
   segment names the surface — no title plus tabs both saying the same thing. */
.wr-codemap-switch {
  display: inline-flex;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  height: 24px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.wr-codemap-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--ink-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.wr-codemap-chip:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.wr-codemap-chip[aria-current="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent, #62a6ff) 22%, transparent);
  cursor: default;
}
.wr-codemap-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #62a6ff) 70%, transparent);
  outline-offset: 1px;
  z-index: 1;
}
/* Chip already names the member — leftover page titles would say it twice. */
.wr-tile[data-surface="workmap"] .wr-cleanup-title { display: none; }
.wr-tile-actions { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; opacity:.34; transition:opacity .12s ease; }
.wr-tile:hover .wr-tile-actions,
.wr-tile:focus-within .wr-tile-actions { opacity:1; }
.wr-ic-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: none; border: none; border-radius: 5px;
  color: var(--ink-dim); cursor: pointer;
}
.wr-ic-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.wr-tile-body { flex: 1; min-height: 0; overflow: auto; }
.wr-tile[data-surface="terminal"] .wr-tile-body { overflow: hidden; }
.wr-tile[data-surface="plan"] .wr-tile-body { overflow: hidden; }
.wr-tile[data-view-surface="true"] .wr-tile-body { overflow: hidden; }
.wr-plan-title-line {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  letter-spacing: 0;
}
.wr-plan-head-kind {
  color: color-mix(in srgb, var(--ink) 44%, transparent);
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
}
.wr-plan-head-dot {
  color: color-mix(in srgb, var(--ink) 28%, transparent);
  font-size: 11px;
}
.wr-plan-head-name {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 84%, transparent);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-plan-head-state {
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

/* placeholder (Phase 1) */
.wr-placeholder {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--ink-dim); font-family: var(--sans);
}
.wr-ph-icon { color: var(--ink-ghost); }
.wr-ph-label { font-size: 13px; color: var(--ink-soft); }
.wr-ph-note { font-size: 11px; }
/* === SECTION: worktrees-cleanup-console === */
.wr-cleanup-surface { display: flex; min-height: 0; height: 100%; background: color-mix(in srgb, var(--paper) 94%, #000 6%); }
.wr-cleanup-host { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: clamp(14px, 2vw, 24px); }
.wr-cleanup { display: flex; flex-direction: column; gap: 16px; width: min(100%, 1180px); margin: 0 auto; }
.wr-cleanup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* Work Map: the map is the tile's main view; cleanup collapses into a footer below it. */
.wr-map { border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 8px; max-height: 60vh; padding: 12px; }
.wr-map-legend { font-family: var(--sans); font-size: 11px; color: var(--ink-dim); padding: 6px 2px 2px; }
.wr-cleanup-more { border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding-top: 12px; }
.wr-cleanup-more > summary { cursor: pointer; font-family: var(--sans); font-size: 12px; color: var(--ink-dim); user-select: none; }
.wr-cleanup-more[open] > summary { margin-bottom: 14px; }
.wr-cleanup-more > *:not(summary) { margin-bottom: 14px; }
.wr-cleanup-heading { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.wr-cleanup-title {
  color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 680; letter-spacing: -0.015em;
}
.wr-cleanup-subtitle { color: var(--ink-dim); font-family: var(--sans); font-size: 12px; line-height: 1.45; }
.wr-worktree-policy {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%); overflow: hidden;
}
.wr-worktree-policy-item {
  display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 13px 15px;
}
.wr-worktree-policy-item + .wr-worktree-policy-item { border-left: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.wr-worktree-policy-label {
  color: var(--ink-dim); font-family: var(--sans); font-size: 10.5px; font-weight: 620;
}
.wr-worktree-policy-value {
  min-width: 0; overflow: hidden; color: var(--ink); font-family: var(--sans); font-size: 12px;
  line-height: 1.4; text-overflow: ellipsis; white-space: nowrap;
}
code.wr-worktree-policy-value { font-family: var(--mono); font-size: 11px; }
.wr-worktree-inventory { display: flex; flex-direction: column; gap: 18px; padding-top: 2px; }
.wr-worktree-section { min-width: 0; }
.wr-worktree-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px;
  color: var(--ink-dim); font-family: var(--sans); font-size: 11px; font-weight: 680;
}
.wr-worktree-rows {
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 97%, var(--ink) 3%);
}
.wr-worktree-row { min-width: 0; padding: 12px 14px; }
.wr-worktree-row + .wr-worktree-row { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.wr-worktree-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.wr-worktree-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; }
.wr-worktree-identity { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.wr-worktree-identity strong {
  overflow: hidden; color: var(--ink); font-family: var(--mono); font-size: 11.5px; font-weight: 650;
  text-overflow: ellipsis; white-space: nowrap;
}
.wr-worktree-identity > span {
  overflow: hidden; color: var(--ink-dim); font-family: var(--mono); font-size: 10px;
  text-overflow: ellipsis; white-space: nowrap;
}
.wr-worktree-badges { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.wr-worktree-badge {
  padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-dim); font-family: var(--sans); font-size: 9.5px; font-variant-numeric: tabular-nums;
}
.wr-worktree-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wr-worktree-action {
  min-height: 29px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 7px; background: transparent; color: var(--ink-soft); font-family: var(--sans);
  font-size: 10.5px; font-weight: 620; cursor: pointer;
}
.wr-worktree-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink);
}
.wr-worktree-action:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 78%, transparent); outline-offset: 2px; }
.wr-worktree-action:disabled { opacity: .42; cursor: not-allowed; }
.wr-worktree-action.is-danger:not(:disabled) { color: #ff8977; }
.wr-worktree-action.is-danger:not(:disabled):hover { border-color: rgba(255, 113, 91, .42); background: rgba(255, 113, 91, .08); }
.wr-worktree-note {
  margin-top: 7px; color: var(--ink-dim); font-family: var(--sans); font-size: 10px; line-height: 1.45;
}
.wr-worktree-detail {
  display: flex; flex-direction: column; gap: 2px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-dim); font-family: var(--sans); font-size: 10.5px; line-height: 1.45;
}
.wr-worktree-detail.is-ready span:last-child { color: #55b86d; }
.wr-worktree-detail.is-error { color: #ff8977; }
.wr-worktree-section.is-recovery .wr-worktree-rows { border-color: color-mix(in srgb, #55b86d 28%, transparent); }
.wr-cleanup-btn {
  height: 32px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 8px; background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink-soft);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.wr-cleanup-btn:hover:not(:disabled) { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 24%, transparent); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.wr-cleanup-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 78%, transparent); outline-offset: 2px; }
.wr-cleanup-btn:disabled { opacity: 0.55; cursor: default; }
.wr-cleanup-btn-primary { color: color-mix(in srgb, var(--ink) 92%, var(--accent) 8%); border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.wr-cleanup-btn-primary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 21%, transparent); }
.wr-cleanup-btn-danger[data-armed="1"] { color: #ff715b; }
.wr-cleanup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wr-cleanup-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wr-cleanup-metric {
  min-width: 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}
.wr-cleanup-metric-value {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font-family: var(--sans); font-size: 18px; font-weight: 690; letter-spacing: -0.02em;
}
.wr-cleanup-metric[data-tone="total"] .wr-cleanup-metric-value { color: color-mix(in srgb, var(--ink) 82%, var(--accent) 18%); }
.wr-cleanup-metric[data-tone="ready"] .wr-cleanup-metric-value { color: #3fb950; }
.wr-cleanup-metric[data-tone="stale"] .wr-cleanup-metric-value { color: #ffb454; }
.wr-cleanup-metric-label {
  display: block; margin-top: 4px; color: var(--ink-dim); font-family: var(--sans); font-size: 10.5px;
}
.wr-cleanup-scan {
  min-width: 0; padding: clamp(16px, 2vw, 22px); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--ink) 7%);
  border-radius: 14px; background: color-mix(in srgb, var(--paper) 92%, var(--accent) 8%);
}
.wr-cleanup-scan-main { display: flex; align-items: flex-start; gap: 12px; }
.wr-cleanup-scan-orb {
  position: relative; display: block; flex: 0 0 auto; width: 34px; height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.wr-cleanup-scan-orb::after {
  content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.wr-cleanup-scan[data-state="scan"] .wr-cleanup-scan-orb,
.wr-cleanup-scan[data-state="retire"] .wr-cleanup-scan-orb,
.wr-cleanup-scan[data-state="prune"] .wr-cleanup-scan-orb { border-top-color: var(--accent); animation: wr-cleanup-orbit 1.1s linear infinite; }
.wr-cleanup-scan[data-state="complete"] .wr-cleanup-scan-orb { border-color: color-mix(in srgb, #3fb950 42%, transparent); background: color-mix(in srgb, #3fb950 10%, transparent); }
.wr-cleanup-scan[data-state="complete"] .wr-cleanup-scan-orb::after { background: #3fb950; box-shadow: 0 0 0 4px color-mix(in srgb, #3fb950 12%, transparent); }
.wr-cleanup-scan-copy { min-width: 0; padding-top: 1px; }
.wr-cleanup-scan-title { color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 670; line-height: 1.35; }
.wr-cleanup-scan-note { max-width: 68ch; margin-top: 3px; color: var(--ink-dim); font-family: var(--sans); font-size: 11.5px; line-height: 1.5; }
.wr-cleanup-progress { position: relative; height: 3px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.wr-cleanup-progress span { position: absolute; inset: 0 auto 0 -34%; width: 34%; border-radius: inherit; background: var(--accent); animation: wr-cleanup-progress 1.25s ease-in-out infinite; }
.wr-cleanup-assurances { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--ink-dim); font-family: var(--sans); font-size: 10.5px; }
.wr-cleanup-assurances span { display: inline-flex; align-items: center; gap: 6px; }
.wr-cleanup-assurances span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 68%, var(--ink) 32%); }
@keyframes wr-cleanup-orbit { to { transform: rotate(360deg); } }
@keyframes wr-cleanup-progress { 0% { transform: translateX(0); } 100% { transform: translateX(395%); } }
@media (prefers-reduced-motion: reduce) {
  .wr-cleanup-scan-orb, .wr-cleanup-progress span { animation: none !important; }
  .wr-cleanup-progress span { left: 0; width: 100%; opacity: 0.45; }
}
.wr-cleanup-group {
  min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 12px; background: color-mix(in srgb, var(--paper) 90%, var(--ink) 2%);
}
.wr-cleanup-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
  color: var(--ink); font-family: var(--sans); font-size: 11.5px; font-weight: 670;
}
.wr-cleanup-list {
  display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; padding-right: 2px;
}
.wr-cleanup-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.wr-cleanup-row-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font-family: var(--mono); font-size: 11px;
}
.wr-cleanup-row-why {
  flex: 0 0 auto; padding: 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-dim); font-family: var(--mono); font-size: 10px;
}
.wr-cleanup-row-why[data-why="dirty or busy"],
.wr-cleanup-row-why[data-why="unmerged work"],
.wr-cleanup-row-why[data-why="missing"] { color: #ffb454; background: rgba(255, 180, 84, 0.12); }
.wr-cleanup-row-why[data-why="locked"] { color: #62a6ff; background: rgba(98, 166, 255, 0.12); }
.wr-cleanup-group[data-tone="ready"] .wr-cleanup-group-head span:last-child { color: #3fb950; }
.wr-cleanup-state {
  padding: 10px 0; color: var(--ink-dim); font-family: var(--mono); font-size: 11px;
  line-height: 1.4; text-align: center;
}
.wr-cleanup-error {
  padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 7px;
  color: #ff715b; font-family: var(--mono); font-size: 11px; line-height: 1.35;
}
.wr-cleanup-note {
  padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 7px;
  color: var(--ink-soft); font-family: var(--mono); font-size: 11px; line-height: 1.35;
}
/* Amber carries the state on the frame only; the words stay in ink so both themes read them. */
.wr-cleanup-alert {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 15px;
  border: 1px solid rgba(255, 180, 84, 0.5); border-radius: 12px; background: rgba(255, 180, 84, 0.08);
  color: var(--ink); font-family: var(--sans); font-size: 12px; line-height: 1.45;
}
.wr-cleanup-alert-title { font-size: 12.5px; font-weight: 680; }
.wr-cleanup-alert ul { display: flex; flex-direction: column; gap: 5px; margin: 0; padding-left: 18px; }
.wr-cleanup-alert code { color: var(--ink-soft); font-family: var(--mono); font-size: 10.5px; overflow-wrap: anywhere; }
.wr-cleanup-alert-next { color: var(--ink-soft); }
@media (max-width: 900px) {
  .wr-cleanup-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-worktree-policy { grid-template-columns: 1fr; }
  .wr-worktree-policy-item + .wr-worktree-policy-item { border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-left: 0; }
}
@media (max-width: 440px) {
  .wr-cleanup-host { padding: 12px; }
  .wr-cleanup-metrics { grid-template-columns: 1fr; }
  .wr-cleanup-head { align-items: center; }
  .wr-cleanup-subtitle { display: none; }
  .wr-cleanup-actions { align-items: stretch; flex-direction: column; }
  .wr-cleanup-actions .wr-cleanup-btn { width: 100%; }
  .wr-worktree-main { flex-direction: column; gap: 7px; }
  .wr-worktree-badges { justify-content: flex-start; }
  .wr-worktree-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-worktree-action { width: 100%; }
}
/* === END SECTION: worktrees-cleanup-console === */
.wr-view-surface,
.wr-view-host,
.wr-files-surface,
.wr-files-host {
  height: 100%;
  min-height: 0;
  display: flex;
  flex: 1;
  width: 100%;
}
.wr-view-host > .view-panel,
.wr-view-host > .side-panel-slot,
.wr-files-host > #local-view {
  box-sizing: border-box;
  position: relative;
  inset: auto;
  max-width: none;
  margin: 0;
  visibility: visible;
  pointer-events: auto;
  overflow: auto;
  contain: none;
}
.wr-view-host > .bookmark-tray,
.wr-view-host > .checklist-panel,
.wr-view-host > .dict-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--paper);
}
.wr-view-host .bookmark-tray-list {
  flex: 1;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}
.wr-view-host .checklist-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.wr-view-host .dict-results {
  min-height: 0;
}
.wr-view-host #local-connected-state,
.wr-files-host #local-connected-state {
  min-height: 0;
}#local-view[data-local-view-mode="rail"] #local-view-toolbar,
#local-view[data-local-view-mode="rail"] #local-health-strip,
#local-view[data-local-view-mode="rail"] #lcv-scope-strip,
#local-view[data-local-view-mode="rail"] #local-codex-strip,
#local-view[data-local-view-mode="rail"] #local-header-connect-btn {
  display: none !important;
}
#local-view[data-local-view-mode="rail"] #local-connected-state {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#local-view[data-local-view-mode="rail"] #local-empty-state {
  padding-top: 20px;
  padding-bottom: 20px;
}
#local-view[data-local-view-mode="rail"] #local-folders-list {
  margin-bottom: 8px;
}
#local-view[data-local-view-mode="rail"] .lcv-folder-row {
  padding-top: 0;
  padding-bottom: 6px;
}
#local-view[data-local-view-mode="rail"] .lcv-legend {
  padding-top: 0;
}
.wr-terminal-surface {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #050607;
}
.wr-terminal-lane-bar {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 4px 8px 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  background: color-mix(in srgb, #050607 92%, var(--ink) 8%);
  overflow: hidden;
}
.wr-terminal-lane-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.wr-terminal-lane-tabs::-webkit-scrollbar { display: none; }
.wr-lane-tab {
  max-width: 148px;
}
.wr-terminal-host {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}
.wr-terminal-host .xterm {
  height: calc(100% - 2px);
}
.wr-terminal-host .xterm-viewport {
  background: transparent !important;
}
.wr-plan-surface {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.wr-plan-host {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: transparent;
}
.wr-plan-host .tp-anatomy {
  min-height: 100%;
  box-sizing: border-box;
}

.line-plan-tabs {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.line-plan-tabbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--surface);
}
.line-plan-tab {
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
}
.line-plan-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.line-plan-tab.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
.line-plan-tab-panel {
  min-height: 0;
  flex: 1;
  box-sizing: border-box;
  padding: 16px 14px 22px;
}
.line-plan-tab-panel[hidden] {
  display: none !important;
}
.line-plan-tab-doc {
  color: color-mix(in srgb, var(--ink) 84%, transparent);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
}
.line-plan-tab-body {
  font-size: 13.5px;
  line-height: 1.5;
}
.line-plan-tab-body :is(h1, h2, h3, h4) {
  margin: 14px 0 6px;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}
.line-plan-tab-body :is(h1, h2, h3, h4):first-child {
  margin-top: 0;
}
.line-plan-tab-body h1 {
  font-size: 20px;
}
.line-plan-tab-body h2 {
  font-size: 15px;
}
.line-plan-tab-body h3,
.line-plan-tab-body h4 {
  font-size: 14px;
}
.line-plan-tab-body p {
  margin: 0 0 9px;
}
.line-plan-tab-body :is(ul, ol) {
  margin: 0 0 10px;
  padding-left: 18px;
}
.line-plan-tab-body li {
  margin: 0 0 5px;
}
/* Every Plan task has a visible checkbox; checked tasks retain a green confirmation mark. */
.line-plan-tab-body input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin: 0 5px 0 0;
  vertical-align: -2px;
  position: relative;
  border: 1.5px solid color-mix(in srgb, var(--ink) 38%, transparent);
  border-radius: 3px;
  background: transparent;
  cursor: default;
}
.line-plan-tab-body input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  line-height: 13px;
  font-size: 13px;
  text-align: center;
  color: #4cae7d;
}
body:not(.dark) .line-plan-tab-body input[type="checkbox"]:checked::after {
  color: #2f8f57;
}

.wr-diff-surface,
.wr-preview-surface {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.wr-diff-editor-host,
.wr-preview-host {
  flex: 1;
  min-height: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.wr-diff-editor-host > #ide-editor {
  display: block !important;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.wr-diff-empty,
.wr-preview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  text-align: center;
}
.wr-diff-empty-title {
  color: var(--ink-soft);
  font-size: 13px;
}
.wr-diff-empty-note {
  font-size: 11px;
  max-width: 34ch;
  line-height: 1.45;
}
.wr-diff-empty-icon {
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
}
.wr-diff-empty[data-state="loading"] .wr-diff-empty-icon {
  animation: wr-diff-reading 1.1s ease-in-out infinite alternate;
}
@keyframes wr-diff-reading {
  from { opacity: .35; }
  to { opacity: .8; }
}
.wr-local-diff {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
}
.wr-local-diff-head {
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.wr-local-diff-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.wr-local-diff-title-group {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.wr-local-diff-heading {
  color: var(--ink-heavy);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.3;
}
.wr-local-diff-limit-note {
  margin-top: 8px;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  font-size: 10px;
  line-height: 1.4;
}
.wr-local-diff-meta,
.wr-local-diff-file-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  font-family: var(--mono);
  font-size: 10px;
}
.wr-local-diff-close,
.wr-local-diff-nav {
  flex: none;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 5px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-family: var(--sans);
  font-size: 10px;
  cursor: pointer;
}
.wr-local-diff-close:hover,
.wr-local-diff-nav:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
  color: var(--ink);
}
.wr-local-diff-nav:disabled {
  cursor: default;
  opacity: .36;
}
.wr-local-diff-add {
  color: #3fb950;
}
.wr-local-diff-del {
  color: #f0644d;
}
body.dark .wr-local-diff-add {
  color: #3fb950;
}
body.dark .wr-local-diff-del {
  color: #f0644d;
}
.wr-local-diff-files {
  display: grid;
  gap: 0;
  max-height: 150px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 95%, var(--ink) 5%);
}
.wr-local-diff-file,
.wr-local-diff-empty {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 0;
  background: transparent;
  font-size: 11px;
}
.wr-local-diff-file:last-child,
.wr-local-diff-empty:last-child {
  border-bottom: 0;
}
.wr-local-diff-file {
  width: 100%;
  color: inherit;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}
.wr-local-diff-file:hover,
.wr-local-diff-file.is-active,
.wr-local-diff-file:focus-visible {
  background: color-mix(in srgb, var(--surface) 88%, var(--ink) 12%);
  outline: none;
}
.wr-local-diff-empty {
  grid-template-columns: 1fr;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.wr-local-diff-state {
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wr-local-diff-state--added,
.wr-local-diff-state--untracked {
  color: #3fb950;
}
.wr-local-diff-state--deleted {
  color: #f0644d;
}
.wr-local-diff-path {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-local-diff-detail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 92%, #000 8%);
  overflow: hidden;
}
.wr-local-diff-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-family: var(--mono);
  font-size: 10px;
}
.wr-local-diff-detail-head > span:first-child {
  flex: 1 1 180px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-local-diff-detail-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.wr-local-diff-position {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wr-local-diff-hunks {
  min-height: 0;
  overflow: auto;
  padding: 8px 0;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
}
.wr-local-diff-line {
  display: grid;
  grid-template-columns: 42px 42px minmax(0, 1fr);
  min-width: max-content;
  padding: 0 10px 0 0;
}
.wr-local-diff-line--add {
  background: rgba(63, 185, 80, 0.10);
}
.wr-local-diff-line--del {
  background: rgba(240, 100, 77, 0.11);
}
.wr-local-diff-line--meta,
.wr-local-diff-line--note {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.wr-local-diff-ln {
  color: color-mix(in srgb, var(--ink) 36%, transparent);
  text-align: right;
  user-select: none;
}
.wr-local-diff-code {
  padding-left: 10px;
  white-space: pre;
}
.wr-local-diff-hunk {
  min-width: max-content;
  margin: 8px 0 4px;
  padding: 3px 10px;
  color: color-mix(in srgb, var(--ink) 64%, transparent);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  white-space: pre;
}
.wr-local-diff-no-patch {
  margin: 10px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
}
.wr-preview-host > #preview-panel {
  display: flex !important;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  background: var(--paper);
}
.wr-preview-host #preview-panel-bar {
  border-bottom: 1px solid var(--rule, color-mix(in srgb, var(--ink) 10%, transparent)) !important;
}
.wr-preview-host #preview-iframe {
  flex: 1;
  min-height: 0;
}

.wr-terminal-fallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 22px;
  color: var(--ink-soft);
  font-family: var(--sans);
  text-align: center;
  line-height: 1.45;
}
.wr-terminal-fallback-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
.wr-terminal-fallback-body,
.wr-terminal-fallback-next {
  max-width: 360px;
  font-size: 12px;
}
.wr-terminal-fallback-next {
  color: var(--ink-dim);
}

/* ── lines dock (collapsed overflow tiles) ─────────────────────────────────── */

.wr-lines {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule, color-mix(in srgb, var(--ink) 10%, transparent));
}
.wr-line {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 11px;
  background: none;
  border: none;
  border-top: 1px solid var(--rule, color-mix(in srgb, var(--ink) 7%, transparent));
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.wr-lines .wr-line:first-child { border-top: none; }
.wr-line:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.wr-line-ic { display: inline-flex; color: var(--ink-soft); flex-shrink: 0; }
/* === END SECTION: work-rail === */

/* Side-panel QA polish: one shared control cluster, quiet docked surfaces. */
#right-side-panel.active #sp-panel-actions {
  display: flex !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 80 !important;
}

#right-side-panel.panel-fullscreen.active {
  flex: 1 1 100% !important;
  width: auto !important;
  max-width: none !important;
  background: var(--paper) !important;
}

#work-row:has(#right-side-panel.panel-fullscreen.active) #panel-resize-handle,
#work-row:has(#right-side-panel.panel-fullscreen.active) #work-left,
#work-row:has(#right-side-panel.panel-fullscreen.active) #work-right-panel,
#work-row:has(#right-side-panel.panel-fullscreen.active) #brain-frame {
  display: none !important;
}

#right-side-panel .side-panel-slot,
#right-side-panel .checklist-panel,
#right-side-panel .dict-panel,
#right-side-panel .bookmark-tray,
#right-side-panel #doc-viewer,
#right-side-panel #preview-panel {
  background: var(--paper) !important;
}

#right-side-panel.active .tasks-header,
#right-side-panel.active .lib-toolbar,
#right-side-panel.active .lines-action-bar,
#right-side-panel.active .checklist-tabs,
#right-side-panel.active .checklist-add-row,
#right-side-panel.active .dict-search-row,
#right-side-panel.active .bookmark-tray-header,
#right-side-panel.active .doc-viewer-header,
#right-side-panel.active #preview-panel-bar,
#right-side-panel.active .fixit-panel-header,
#right-side-panel.active .notes-toolbar,
#right-side-panel.active .pulse-header,
#right-side-panel.active .sv-header {
  padding-right: 64px !important;
}

#right-side-panel #panel-bar,
#right-side-panel .bookmark-tray-header,
#right-side-panel .dict-search-row,
#right-side-panel .checklist-tabs,
#right-side-panel .checklist-add-row,
#right-side-panel #preview-panel-bar,
#right-side-panel .doc-viewer-header,
#right-side-panel .doc-viewer-nav,
#right-side-panel #doc-editor-toolbar {
  border-bottom: 0 !important;
}

#right-side-panel #doc-editor-toolbar .tt-group + .tt-group {
  border-left: 0 !important;
}

#right-side-panel.panel-view-mode #panel-view-slot > .view-panel {
  padding-top: 42px !important;
}

@media (max-width: 900px) {
  #right-side-panel.panel-fullscreen.active {
    width: 100vw !important;
  }
}

/* @sas claim: Codex-style center transcript aligns assistant/event rows to the existing input-box lane while keeping row utility chrome available only on intent. terms: center transcript, input box alignment, assistant chrome, remark gutter, message actions, context reminder, event rows, quiet reading flow id: chat-flow:quiet-center-transcript timestamp: 2026-06-14T00:00:00Z live: true */
@media (min-width: 701px) {
  #messages .line-chat > .depth-trace,
  #messages .line-chat > .msg-row:not(.user),
  #messages .msg-row.pres,
  #messages .msg-row.msg-row--assistant,
  #messages #streaming-msg,
  #messages .msg-row.coding-event,
  #messages .msg-row.coding-event.local-event {
    width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    max-width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    margin-left: auto !important;
    margin-right: var(--chat-frame-gutter, 54px) !important;
  }

  #work-row:has(#task-panel.active) #messages .line-chat > .depth-trace,
  #work-row:has(#task-panel.active) #messages .line-chat > .msg-row:not(.user),
  #work-row:has(#task-panel.active) #messages .msg-row.pres,
  #work-row:has(#task-panel.active) #messages .msg-row.msg-row--assistant,
  #work-row:has(#task-panel.active) #messages #streaming-msg,
  #work-row:has(#task-panel.active) #messages .msg-row.coding-event,
  #work-row:has(#task-panel.active) #messages .msg-row.coding-event.local-event,
  #work-row:has(#terminal-panel.active) #messages .line-chat > .depth-trace,
  #work-row:has(#terminal-panel.active) #messages .line-chat > .msg-row:not(.user),
  #work-row:has(#terminal-panel.active) #messages .msg-row.pres,
  #work-row:has(#terminal-panel.active) #messages .msg-row.msg-row--assistant,
  #work-row:has(#terminal-panel.active) #messages #streaming-msg,
  #work-row:has(#terminal-panel.active) #messages .msg-row.coding-event,
  #work-row:has(#terminal-panel.active) #messages .msg-row.coding-event.local-event {
    width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    max-width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    margin-left: var(--chat-frame-gutter, 54px) !important;
    margin-right: auto !important;
  }

  #work-row:has(#context-panel.active) #messages .line-chat > .depth-trace,
  #work-row:has(#context-panel.active) #messages .line-chat > .msg-row:not(.user),
  #work-row:has(#context-panel.active) #messages .msg-row.pres,
  #work-row:has(#context-panel.active) #messages .msg-row.msg-row--assistant,
  #work-row:has(#context-panel.active) #messages #streaming-msg,
  #work-row:has(#context-panel.active) #messages .msg-row.coding-event,
  #work-row:has(#context-panel.active) #messages .msg-row.coding-event.local-event {
    width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    max-width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    margin-left: auto !important;
    margin-right: var(--chat-frame-gutter, 54px) !important;
  }

  #work-row:has(#context-panel.active):has(#task-panel.active) #messages .line-chat > .depth-trace,
  #work-row:has(#context-panel.active):has(#task-panel.active) #messages .line-chat > .msg-row:not(.user),
  #work-row:has(#context-panel.active):has(#task-panel.active) #messages .msg-row.pres,
  #work-row:has(#context-panel.active):has(#task-panel.active) #messages .msg-row.msg-row--assistant,
  #work-row:has(#context-panel.active):has(#task-panel.active) #messages #streaming-msg,
  #work-row:has(#context-panel.active):has(#task-panel.active) #messages .msg-row.coding-event,
  #work-row:has(#context-panel.active):has(#task-panel.active) #messages .msg-row.coding-event.local-event,
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #messages .line-chat > .depth-trace,
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #messages .line-chat > .msg-row:not(.user),
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #messages .msg-row.pres,
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #messages .msg-row.msg-row--assistant,
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #messages #streaming-msg,
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #messages .msg-row.coding-event,
  #work-row:has(#context-panel.active):has(#terminal-panel.active) #messages .msg-row.coding-event.local-event {
    width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    max-width: min(var(--chat-frame-width, 700px), calc(100% - 108px)) !important;
    margin-left: var(--chat-frame-gutter, 54px) !important;
    margin-right: auto !important;
  }

  #messages .line-chat > .msg-row:not(.user),
  #messages .msg-row.pres,
  #messages .msg-row.msg-row--assistant,
  #messages #streaming-msg {
    padding-bottom: 22px !important;
  }

  #messages .msg-row.coding-event,
  #messages .msg-row.coding-event.local-event {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }

  #messages .msg-row .journal-inline,
  #messages .msg-row .journal-inline-phase,
  #messages .msg-row .depth-trace {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  #messages .line-chat > .msg-row:not(.user) > .msg-body,
  #messages .msg-row.pres .msg-body,
  #messages .msg-row.msg-row--assistant .msg-body,
  #messages #streaming-msg .msg-body {
    box-sizing: border-box;
    padding: 0 var(--chat-text-inset, 15px) !important;
  }

  #messages .msg-transcript-events,
  #messages .streaming-transcript-events {
    gap: 8px;
    margin-bottom: 12px;
  }

  #messages .transcript-event-row {
    --transcript-event-max: min(620px, 100%);
  }

  #messages .msg-row.pres > .remark-zone {
    left: -46px;
    width: 34px;
    opacity: 0;
    transition: opacity 0.16s ease;
  }

  #messages .msg-row.pres:hover > .remark-zone,
  #messages .msg-row.pres:focus-within > .remark-zone {
    opacity: 1;
  }

  #messages .msg-row.pres:hover .remark-plus {
    opacity: 0.12;
  }

  #messages .remark-zone:hover .remark-plus,
  #messages .remark-zone:focus-visible .remark-plus {
    opacity: 0.72;
  }

  #messages .remark-zone::after {
    content: none !important;
    display: none !important;
  }

  #messages .msg-row.pres .msg-actions {
    opacity: 1;
    transition: opacity 0.16s ease;
  }

  #messages .msg-row.pres .msg-actions > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
  }

  #messages .msg-row.pres .msg-actions > .msg-voice-btn.speaking,
  #messages .msg-row.pres .msg-actions > .msg-voice-btn.paused,
  #messages .msg-row.pres .msg-actions > .msg-voice-btn.generating {
    opacity: 0.58;
    pointer-events: auto;
  }

  #messages .msg-row.pres .msg-menu-wrap {
    opacity: 0;
    transition: opacity 0.16s ease;
  }

  #messages .msg-row.pres:hover .msg-actions > *,
  #messages .msg-row.pres:focus-within .msg-actions > *,
  #messages .msg-row.pres:hover .msg-menu-wrap,
  #messages .msg-row.pres:focus-within .msg-menu-wrap {
    opacity: 0.72;
    pointer-events: auto;
  }

  #messages .msg-row.pres .context-reminder {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, max-height 0.16s ease, margin-top 0.16s ease;
  }

  #messages .msg-row.pres:hover .context-reminder,
  #messages .msg-row.pres:focus-within .context-reminder {
    max-height: 52px;
    margin-top: 6px;
    opacity: 0.54;
    pointer-events: auto;
  }

  #messages .msg-row.pres .msg-model {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.16s ease, max-height 0.16s ease, margin-top 0.16s ease;
  }

  #messages .msg-row.pres:hover .msg-model,
  #messages .msg-row.pres:focus-within .msg-model {
    max-height: 18px;
    margin-top: 2px;
    opacity: 0.26;
  }
}

#messages .msg-row.pres.background-work-continues .msg-actions > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

#messages .msg-row.pres.background-work-continues .msg-actions > .msg-voice-btn {
  opacity: 0.58 !important;
  pointer-events: auto !important;
}

#messages .msg-row.pres.background-work-continues > .remark-zone,
#messages .msg-row.pres.background-work-continues .msg-menu-wrap {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Memory health uses .line-tab-health-dot; runtime activity uses .line-tab-status-dot. */

.chat-status-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper-dark) 90%, var(--ink) 4%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.chat-status-note--health {
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--paper-dark) 92%, var(--ink) 8%);
}
.chat-status-note:hover {
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
  background: color-mix(in srgb, var(--paper-dark) 89%, var(--ink) 11%);
}
.chat-status-note__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  flex: 0 0 auto;
}
.chat-status-note__body {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.chat-status-note__title {
  color: var(--ink);
  font-weight: 600;
}
.chat-status-note__detail {
  color: var(--ink-dim);
}
.chat-status-note__dismiss {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.chat-status-note__dismiss:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}


/* Context Panel line shell: structural origin marker above line-scoped attachments. */
#context-panel.cp-preboot #ctx-context-items,
#context-panel.cp-preboot #context-panel-line-shell,
#context-panel.cp-preboot #ctx-context-clip,
#context-panel.cp-preboot #context-panel-frame-split-handle,
#context-panel.cp-preboot #context-panel-frame {
  visibility: hidden;
  pointer-events: none;
}

#context-panel-line-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 132px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 8px 7px 0 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

.context-panel-line-spine {
  width: 100%;
  margin: 0 0 8px;
  padding: 0 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #cfd8d2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  text-align: left;
  font-family: var(--sans);
}

.context-panel-line-spine .csp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 8px;
}

.context-panel-line-spine .csp-title {
  min-width: 0;
  color: color-mix(in srgb, #cfd8d2 48%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.context-panel-line-spine .csp-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.context-panel-line-spine .csp-head-search-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  opacity: 0.45;
}

.context-panel-line-spine .csp-head-search-btn:hover,
.context-panel-line-spine .csp-head-search-btn.is-open {
  opacity: 1;
}

.context-panel-line-spine .csp-head-add-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #cfd8d2 45%, transparent);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  padding: 0 1px;
  transition: color 120ms ease;
}

.context-panel-line-spine .csp-head-add-btn:hover {
  color: #eef5ef;
}

.context-panel-line-spine .csp-head-add-btn:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

body:not(.dark) .context-panel-line-spine .csp-head-add-btn {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-head-add-btn:hover {
  color: var(--ink);
}

.context-panel-line-spine .csp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 18px;
  color: color-mix(in srgb, #cfd8d2 82%, transparent);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0;
}

.context-panel-line-spine .csp-foot {
  margin-top: auto;
  padding-top: 12px;
  flex: 0 0 auto;
}

.context-panel-line-spine .csp-foot-add {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #cfd8d2 40%, transparent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 0;
  transition: color 120ms ease;
}

.context-panel-line-spine .csp-foot-add:hover {
  color: #eef5ef;
}

.context-panel-line-spine .csp-foot-add:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

body:not(.dark) .context-panel-line-spine .csp-foot-add {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-foot-add:hover {
  color: var(--ink);
}

.context-panel-line-spine .csp-body :is(h1, h2, h3) {
  margin: 8px 0 6px;
  color: #d8e0db;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
}

.context-panel-line-spine .csp-plan-heading {
  display: none;
}

.context-panel-line-spine .csp-plan-heading-label {
  min-width: 0;
}

.context-panel-line-spine .csp-plan-search-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #cfd8d2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.58;
  padding: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.context-panel-line-spine .csp-plan-search-btn:hover,
.context-panel-line-spine .csp-plan-search-btn.is-open {
  color: #eef5ef;
  opacity: 1;
}

.context-panel-line-spine .csp-plan-search-btn:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.context-panel-line-spine .csp-plan-search {
  display: none;
  margin: 0 0 7px;
}

.context-panel-line-spine .csp-plan-search.open {
  display: block;
}

.context-panel-line-spine .csp-plan-search-input {
  appearance: none;
  border: 0;
  background: transparent;
  color: #eef5ef;
  font: inherit;
  letter-spacing: 0;
  line-height: inherit;
  outline: 0;
  padding: 0;
  width: 100%;
}

.context-panel-line-spine .csp-plan-search-input::placeholder {
  color: color-mix(in srgb, #cfd8d2 48%, transparent);
}

.context-panel-line-spine .csp-plan-search-results {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.context-panel-line-spine .csp-plan-search-result {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  font: inherit;
  letter-spacing: 0;
  line-height: inherit;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.context-panel-line-spine .csp-plan-search-result:hover .csp-plan-search-title {
  color: #eef5ef;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.context-panel-line-spine .csp-plan-search-result:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.context-panel-line-spine .csp-plan-search-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-panel-line-spine .csp-plan-search-source {
  color: color-mix(in srgb, #cfd8d2 58%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  white-space: nowrap;
}

.context-panel-line-spine .csp-plan-search-preview {
  color: color-mix(in srgb, #cfd8d2 62%, transparent);
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-panel-line-spine .csp-plan-search-empty {
  color: color-mix(in srgb, #cfd8d2 62%, transparent);
}

.context-panel-line-spine .csp-plan-groups {
  display: grid;
  gap: 10px;
  margin: 8px 0 10px;
  padding-left: 14px;
  position: relative;
}

.context-panel-line-spine .csp-plan-groups::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  bottom: 7px;
  width: 1px;
  background: linear-gradient(to bottom, color-mix(in srgb, #cfd8d2 18%, transparent) 70%, transparent 100%);
}

/* Empty spine: the same vertical spine line as the plans-on state, fading out at the bottom. */
.context-panel-line-spine.csp-spine-empty .csp-body::after {
  content: "";
  display: block;
  width: 1px;
  height: 84px;
  margin: 10px 0 0 4px;
  background: linear-gradient(to bottom, color-mix(in srgb, #cfd8d2 18%, transparent), transparent);
}

body:not(.dark) .context-panel-line-spine.csp-spine-empty .csp-body::after {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 12%, transparent), transparent);
}

.context-panel-line-spine .csp-plan-group {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.context-panel-line-spine .csp-plan-group-label {
  color: color-mix(in srgb, #cfd8d2 50%, transparent);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.context-panel-line-spine .csp-plan-list {
  display: grid;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-panel-line-spine .csp-plan-empty {
  color: color-mix(in srgb, #cfd8d2 44%, transparent);
  font-size: 10.5px;
  list-style: none;
  padding: 1px 0;
}

.context-panel-line-spine .csp-done-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.context-panel-line-spine .csp-done-toggle-line {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, #cfd8d2 14%, transparent);
}

.context-panel-line-spine .csp-done-toggle-label {
  color: color-mix(in srgb, #cfd8d2 38%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 120ms ease;
}

.context-panel-line-spine .csp-done-toggle:hover .csp-done-toggle-label {
  color: color-mix(in srgb, #cfd8d2 65%, transparent);
}

.context-panel-line-spine .csp-done-toggle:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

body:not(.dark) .context-panel-line-spine .csp-done-toggle-line {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-done-toggle-label {
  color: color-mix(in srgb, var(--ink) 36%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-done-toggle:hover .csp-done-toggle-label {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.context-panel-line-spine .csp-body :is(p, ul, ol) {
  margin: 0 0 7px;
}

.context-panel-line-spine .csp-body :is(ul, ol) {
  padding-left: 0;
}

.context-panel-line-spine .csp-body li {
  margin: 2px 0;
}

.context-panel-line-spine .csp-plan-item {
  list-style: none;
  position: relative;
}

/* Stack dims by depth (top brightest), but every Plan MD title is the SAME font size. */
.context-panel-line-spine .csp-plan-list .csp-plan-item {
  opacity: max(0.5, calc(1 - var(--csp-plan-depth, 0) * 0.08));
  transition: opacity 140ms ease;
}

.context-panel-line-spine .csp-plan-list .csp-plan-link {
  font-size: 12.5px;
}

.context-panel-line-spine .csp-plan-item.is-prompted {
  opacity: 1;
}

.context-panel-line-spine .csp-plan-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid color-mix(in srgb, #cfd8d2 34%, transparent);
  border-radius: 999px;
  background: var(--cp-bg, #111416);
  transform: translateY(-50%);
  z-index: 1;
}

.context-panel-line-spine .csp-plan-item.is-prompted::before {
  left: -13px;
  width: 7px;
  height: 7px;
  border-color: color-mix(in srgb, #e1f3fe 74%, transparent);
  background: #e1f3fe;
}

.context-panel-line-spine .csp-plan-item.is-done::before {
  border-color: color-mix(in srgb, #edf3ec 46%, transparent);
  background: color-mix(in srgb, #edf3ec 22%, var(--cp-bg, #111416));
}

.context-panel-line-spine .csp-plan-row {
  display: grid;
  /* Trailing 12px column is reserved whether or not this row has a ring, so every ring lands
     on the same right edge and the hover controls don't shift between rows. */
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  padding: 1px 0;
  border-radius: 6px;
  position: relative;
}

.context-panel-line-spine .csp-plan-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.context-panel-line-spine .csp-plan-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  padding: 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: break-word;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* Progress ring: the Plan MD's own `- [ ]` / `- [x]` checklist as a 12px donut in the row's
   trailing column, so it sits on the panel's right edge past the hover controls. Rows whose
   Plan MD has no checklist carry no ring at all. */
.context-panel-line-spine .csp-plan-ring {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  line-height: 0;
  cursor: pointer;
}

.context-panel-line-spine .csp-plan-ring:disabled {
  cursor: default;
}

.context-panel-line-spine .csp-plan-ring-track {
  stroke: color-mix(in srgb, #cfd8d2 20%, transparent);
}

.context-panel-line-spine .csp-plan-ring-arc {
  stroke: color-mix(in srgb, #e1f3fe 62%, transparent);
}

.context-panel-line-spine .csp-plan-row.is-prompted .csp-plan-ring-arc {
  stroke: #e1f3fe;
}

.context-panel-line-spine .csp-plan-ring.is-complete .csp-plan-ring-arc {
  stroke: color-mix(in srgb, #edf3ec 78%, transparent);
}

.context-panel-line-spine .csp-plan-row.is-done .csp-plan-ring-track,
.context-panel-line-spine .csp-plan-row.is-done .csp-plan-ring-arc {
  stroke: color-mix(in srgb, #cfd8d2 32%, transparent);
}

.context-panel-line-spine .csp-plan-ring:hover:not(:disabled) .csp-plan-ring-track {
  stroke: color-mix(in srgb, #cfd8d2 42%, transparent);
}

.context-panel-line-spine .csp-plan-ring:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
  border-radius: 50%;
}

.context-panel-line-spine .csp-plan-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Active row keeps the base inline layout: name on the left, control icons inline on
   the right. No "in prompt" text — the filled spine dot marks the active plan. */
/* Active row: no left framing line, no inset box — the filled spine dot and the
   brighter/bolder title are the only active signals. */
.context-panel-line-spine .csp-plan-row.is-prompted {
  padding: 1px 0;
}

.context-panel-line-spine .csp-plan-row.is-prompted .csp-plan-link {
  color: #f4faff;
}

.context-panel-line-spine .csp-plan-row.is-prompted .csp-plan-title::before {
  content: none;
}

.context-panel-line-spine .csp-plan-row.is-done .csp-plan-link {
  color: color-mix(in srgb, #cfd8d2 46%, transparent);
}

.context-panel-line-spine .csp-plan-row.is-done .csp-plan-title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, #cfd8d2 40%, transparent);
}

.context-panel-line-spine .csp-plan-link:hover {
  color: #eef5ef;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.context-panel-line-spine .csp-plan-link:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.context-panel-line-spine .csp-plan-done {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #cfd8d2 58%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.context-panel-line-spine .csp-plan-state,
.context-panel-line-spine .csp-plan-done-state {
  color: #cfd8d2;
  font-weight: 600;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  line-height: inherit;
  white-space: nowrap;
}

.context-panel-line-spine .csp-plan-done-state {
  color: color-mix(in srgb, #edf3ec 78%, transparent);
  background: color-mix(in srgb, #edf3ec 10%, transparent);
  border-color: color-mix(in srgb, #edf3ec 14%, transparent);
}

.context-panel-line-spine .csp-plan-bodyless {
  color: color-mix(in srgb, #cfd8d2 46%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  line-height: inherit;
  padding: 1px 5px;
  border: 1px dashed color-mix(in srgb, #cfd8d2 22%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

/* Title-only entries with no saved Plan MD body: open/focus/fork can't act, so make the
   row read as inert rather than offering a click that only toasts a failure. */
.context-panel-line-spine .csp-plan-item.is-bodyless .csp-plan-link {
  color: color-mix(in srgb, #cfd8d2 44%, transparent);
  cursor: default;
}

.context-panel-line-spine .csp-plan-item.is-bodyless .csp-plan-link:hover {
  color: color-mix(in srgb, #cfd8d2 44%, transparent);
  text-decoration: none;
}

.context-panel-line-spine .csp-plan-state[hidden],
.context-panel-line-spine .csp-plan-bodyless[hidden],
.context-panel-line-spine .csp-plan-done-state[hidden],
.context-panel-line-spine .csp-plan-done[hidden] {
  display: none !important;
}

.context-panel-line-spine .csp-plan-row:hover .csp-plan-done,
.context-panel-line-spine .csp-plan-row:focus-within .csp-plan-done {
  opacity: 0.68;
}

.context-panel-line-spine .csp-plan-done:hover {
  color: #eef5ef;
  opacity: 1;
}

.context-panel-line-spine .csp-plan-done:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.context-panel-line-spine .csp-plan-remove,
.context-panel-line-spine .csp-plan-spawn {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #cfd8d2 50%, transparent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  opacity: 0;
  padding: 0;
  transition: opacity 120ms ease, color 120ms ease;
  vertical-align: text-bottom;
}

.context-panel-line-spine .csp-plan-remove[hidden],
.context-panel-line-spine .csp-plan-spawn[hidden] {
  display: none !important;
}

.context-panel-line-spine .csp-plan-row:hover .csp-plan-remove,
.context-panel-line-spine .csp-plan-row:focus-within .csp-plan-remove,
.context-panel-line-spine .csp-plan-row:hover .csp-plan-spawn,
.context-panel-line-spine .csp-plan-row:focus-within .csp-plan-spawn {
  opacity: 0.7;
}

.context-panel-line-spine .csp-plan-remove:hover,
.context-panel-line-spine .csp-plan-spawn:hover {
  color: #eef5ef;
  opacity: 1;
}

.context-panel-line-spine .csp-plan-remove:focus-visible,
.context-panel-line-spine .csp-plan-spawn:focus-visible {
  opacity: 1;
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

body:not(.dark) .context-panel-line-spine .csp-body,
body:not(.dark) .context-panel-line-spine .csp-plan-search-result {
  color: color-mix(in srgb, var(--ink) 76%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-body :is(h1, h2, h3),
body:not(.dark) .context-panel-line-spine .csp-plan-row.is-prompted .csp-plan-link {
  color: color-mix(in srgb, var(--ink) 90%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-plan-groups::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 12%, transparent) 70%, transparent 100%);
}

body:not(.dark) .context-panel-line-spine .csp-plan-item::before {
  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
  background: var(--cp-bg, #f7f6f3);
}

body:not(.dark) .context-panel-line-spine .csp-plan-item.is-prompted::before {
  border-color: #1f6c9f;
  background: #e1f3fe;
}

body:not(.dark) .context-panel-line-spine .csp-plan-item.is-done::before {
  border-color: #346538;
  background: #edf3ec;
}

body:not(.dark) .context-panel-line-spine .csp-plan-row.is-done .csp-plan-link {
  color: color-mix(in srgb, var(--ink) 44%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-plan-row.is-done .csp-plan-title {
  text-decoration-color: color-mix(in srgb, var(--ink) 34%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-plan-group-label,
body:not(.dark) .context-panel-line-spine .csp-plan-empty,
body:not(.dark) .context-panel-line-spine .csp-plan-search-source,
body:not(.dark) .context-panel-line-spine .csp-plan-search-preview {
  color: color-mix(in srgb, var(--ink) 46%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-plan-state {
  color: color-mix(in srgb, #1f6c9f 78%, transparent);
}

body:not(.dark) .context-panel-line-spine .csp-plan-done-state {
  color: #346538;
  background: #edf3ec;
  border-color: color-mix(in srgb, #346538 16%, transparent);
}


#context-panel:has(#context-panel-frame-split-handle.dragging) #context-panel-line-shell,
#context-panel:has(#context-panel-frame-split-handle.dragging) #context-panel-frame {
  transition: none;
}

@keyframes contextPanelProcessSpin {
  to { transform: rotate(360deg); }
}

/* === SECTION: skills-rail === */
/* Owner: skills-rail — searchable skill library, activation controls, details, and create flow. */
.skills-rail {
  display:flex; flex-direction:column; gap:10px; height:100%; min-height:0;
  container:skills-rail / inline-size;
  caret-color:var(--accent, #e07b4f);
}
.skills-rail-search {
  width:100%; min-height:36px; box-sizing:border-box; padding:8px 11px;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink, inherit);
  border:1px solid var(--hairline, rgba(127,127,127,0.22)); border-radius:9px;
  font:inherit; font-size:13px; outline:none;
  transition:border-color .12s ease, background .12s ease;
}
.skills-rail-search::placeholder { color:color-mix(in srgb, var(--ink) 56%, transparent); opacity:1; }
.skills-rail-search:hover { border-color:var(--hairline-strong, rgba(127,127,127,0.4)); }
.skills-rail-search:focus-visible {
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  border-color:color-mix(in srgb, var(--accent, #e07b4f) 68%, transparent);
  outline:2px solid color-mix(in srgb, var(--accent, #e07b4f) 34%, transparent); outline-offset:2px;
}
.skills-rail-head {
  display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:7px;
  padding:2px 2px 10px; border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.skills-rail-head .skills-rail-search { min-width:0; }
.skills-rail-seltoggle {
  min-height:36px; font:inherit; font-size:12px; font-weight:600; padding:7px 11px; cursor:pointer;
  color:color-mix(in srgb, var(--ink) 82%, transparent); background:transparent;
  border:1px solid transparent; border-radius:8px;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.skills-rail-seltoggle[aria-pressed="true"] {
  color:var(--accent, #e07b4f);
  background:color-mix(in srgb, var(--accent, #e07b4f) 12%, transparent);
  border-color:color-mix(in srgb, var(--accent, #e07b4f) 28%, transparent);
}
/* New is the raised entry action; Select stays quiet, and only red Remove is destructive. */
.skills-rail-new {
  min-height:36px; font:inherit; font-size:12px; font-weight:650; padding:7px 12px; cursor:pointer;
  color:var(--ink, inherit); background:color-mix(in srgb, var(--accent, #e07b4f) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--accent, #e07b4f) 28%, transparent); border-radius:8px;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.skills-rail-new:hover { background:color-mix(in srgb, var(--accent, #e07b4f) 20%, transparent); }
.skills-rail-seltoggle:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.skills-rail-new:focus-visible,
.skills-rail-seltoggle:focus-visible {
  outline:2px solid color-mix(in srgb, var(--accent, #e07b4f) 60%, transparent); outline-offset:2px;
}
.skills-rail-new-form {
  display:flex; flex-direction:column; gap:10px; padding:12px;
  border:1px solid var(--hairline, rgba(127,127,127,0.22)); border-radius:12px;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
}
.skills-rail-new-form[hidden] { display:none; }
.skills-rail-new-form input,
.skills-rail-new-form textarea,
.skills-rail-new-form select {
  width:100%; box-sizing:border-box; padding:9px 10px;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink, inherit);
  border:1px solid var(--hairline, rgba(127,127,127,0.22)); border-radius:9px;
  font:inherit; font-size:13px; outline:none;
}
.skills-rail-new-form textarea { resize:vertical; min-height:92px; line-height:1.45; }
.skills-rail-new-form :is(input, textarea)::placeholder {
  color:color-mix(in srgb, var(--ink) 54%, transparent); opacity:1;
}
.skills-rail-new-form :is(input, textarea, select):focus-visible {
  border-color:color-mix(in srgb, var(--accent, #e07b4f) 60%, transparent);
  outline:2px solid color-mix(in srgb, var(--accent, #e07b4f) 28%, transparent); outline-offset:2px;
}
.skills-rail-new-manual-fields { display:flex; flex-direction:column; gap:8px; }
.skills-rail-new-manual-fields[hidden] { display:none; }
.skills-rail-new-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.skills-rail-new-row label {
  display:flex; flex:1 1 120px; flex-direction:column; gap:4px; min-width:0;
  color:color-mix(in srgb, var(--ink) 68%, transparent); font-size:11px; font-weight:600;
}
.skills-rail-new-row select { flex:1; min-width:0; }
.skills-rail-new-msg { flex:1; min-width:0; font-size:12px; color:#c0392b; }
.skills-rail-new-cancel,
.skills-rail-new-manual,
.skills-rail-ask-send,
.skills-rail-new-save {
  flex:0 0 auto; min-height:36px; font:inherit; font-size:12px; padding:7px 12px; cursor:pointer;
  border-radius:8px; border:1px solid var(--hairline, rgba(127,127,127,0.22));
  color:var(--ink, inherit); background:var(--surface, rgba(127,127,127,0.06));
  transition:background .12s ease, border-color .12s ease;
}
.skills-rail-ask-send,
.skills-rail-new-save {
  font-weight:600; color:#fff;
  background:color-mix(in srgb, var(--accent, #4a7dff) 78%, #000);
  border-color:color-mix(in srgb, var(--accent, #4a7dff) 78%, #000);
}
.skills-rail-new-form button:hover { border-color:var(--hairline-strong, rgba(127,127,127,0.4)); }
.skills-rail-new-form button:focus-visible {
  outline:2px solid color-mix(in srgb, var(--accent, #e07b4f) 60%, transparent); outline-offset:2px;
}
.skills-rail-new-cancel { margin-left:auto; }
.skills-rail-new-save:disabled { opacity:0.5; cursor:default; }
.skills-rail-selbar {
  display:flex; align-items:center; gap:8px; padding:8px 2px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.skills-rail-selbar[hidden] { display:none; }
.skills-rail-selcount { flex:1; min-width:0; font-size:12px; color:color-mix(in srgb, var(--ink) 64%, transparent); }
/* Destructive, so it carries the same red the row × wears when armed — not the accent
   fill, which on this surface means "the durable, reversible save". */
.skills-rail-seldel {
  flex:0 0 auto; min-height:32px; font:inherit; font-size:12px; font-weight:600; padding:6px 12px; cursor:pointer;
  color:#c0392b; background:transparent; border-radius:8px;
  border:1px solid color-mix(in srgb, #c0392b 40%, transparent);
}
.skills-rail-seldel:disabled { opacity:0.35; cursor:default; }
.skills-rail-seldel.armed { color:#fff; background:#c0392b; border-color:#c0392b; }
.skills-rail-seldel:focus-visible { outline:2px solid color-mix(in srgb, #c0392b 60%, transparent); outline-offset:2px; }
.skills-rail-check {
  position:absolute; z-index:1; left:7px; top:15px;
  margin:0; cursor:pointer; accent-color:#c0392b;
}
.skills-rail-list {
  display:flex; flex-direction:column; gap:0; overflow-y:auto; flex:1; min-height:0;
  padding:0 2px 14px; scroll-padding-block:8px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
.skills-rail-list::-webkit-scrollbar { width:8px; }
.skills-rail-list::-webkit-scrollbar-track { background:transparent; }
.skills-rail-list::-webkit-scrollbar-thumb {
  border:2px solid transparent; border-radius:8px; background-clip:padding-box;
  background-color:color-mix(in srgb, var(--ink) 22%, transparent);
}
.skills-rail-status {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skills-rail-item {
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 34px;
  grid-template-rows:auto auto; column-gap:4px; row-gap:2px; align-items:stretch;
  border:0; border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius:0; background:transparent;
  transition:background .12s ease;
}
.skills-rail-item.is-just-moved {
  background:color-mix(in srgb, #2f855a 12%, transparent);
}
.skills-rail-moved-note {
  grid-column:1; grid-row:3; padding:1px 6px 8px 5px;
  color:#2f855a; font-size:10.5px; font-weight:650; line-height:1.2;
}
/* The row tint answers the BODY — the part that opens details. The state control keeps
   its own hover so the selected segment remains the click target. */
.skills-rail-item:has(.skills-rail-main:hover),
.skills-rail-item:has(.skills-rail-main:focus-visible) { background:var(--surface-hover, rgba(127,127,127,0.1)); }
.skills-rail-main {
  display:flex; align-items:center; gap:7px;
  grid-column:1; grid-row:1; min-width:0; min-height:34px; text-align:left; padding:9px 5px 5px;
  cursor:pointer; border-radius:7px; outline:none;
}
.skills-rail-main::after {
  content:""; flex:0 0 auto; width:6px; height:6px; margin:0 3px 0 1px;
  border-right:1.5px solid color-mix(in srgb, var(--ink) 48%, transparent);
  border-bottom:1.5px solid color-mix(in srgb, var(--ink) 48%, transparent);
  transform:rotate(-45deg); transition:transform .12s ease, border-color .12s ease;
}
.skills-rail-item[data-detail="open"] .skills-rail-main::after { transform:rotate(45deg) translate(-1px, -1px); }
.skills-rail-main:focus-visible {
  outline:2px solid color-mix(in srgb, var(--accent, #e07b4f) 55%, transparent); outline-offset:-2px;
}
#skills-view[data-rail-select="on"] .skills-rail-main { padding-left:30px; }
/* Skill details expand under their own row; the state control and × are untouched by it. */
.skills-rail-item[data-detail="open"] {
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  border-bottom-color:transparent;
}
.skills-rail-detail {
  display:flex; flex-direction:column; gap:10px; margin:0 0 5px; padding:10px 12px 14px;
  border:0; border-bottom:1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius:0;
  background:color-mix(in srgb, var(--ink) 4%, transparent);
}
.skills-rail-detail-desc { font-size:12.5px; line-height:1.5; color:color-mix(in srgb, var(--ink) 86%, transparent); }
.skills-rail-detail-meta {
  display:grid; grid-template-columns:minmax(76px, auto) 1fr; gap:4px 12px; margin:0; font-size:11.5px; line-height:1.4;
}
.skills-rail-detail-meta dt { color:color-mix(in srgb, var(--ink) 56%, transparent); }
.skills-rail-detail-meta dd { margin:0; color:color-mix(in srgb, var(--ink) 90%, transparent); overflow-wrap:anywhere; }
.skills-rail-detail-label {
  font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 56%, transparent); font-weight:650;
}
.skills-rail-detail-avoid { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.skills-rail-detail-avoid code {
  font-size:11px; padding:1px 6px; border-radius:6px;
  border:1px solid var(--hairline, rgba(127,127,127,0.22));
  background:var(--surface-hover, rgba(127,127,127,0.1));
}
.skills-rail-detail-body {
  margin:0; padding:8px 10px; max-height:260px; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  font-size:11.5px; line-height:1.5; color:var(--ink, inherit);
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  border:1px solid var(--hairline, rgba(127,127,127,0.22)); border-radius:9px;
}
/* Trust-tier install review + diff-on-update inside the rail detail. Install and
   update only ever run from their explicit confirm buttons inside a review block. */
.skills-rail-install { display:flex; flex-direction:column; gap:8px; }
.skills-rail-install-note { font-size:11.5px; color:color-mix(in srgb, var(--ink) 74%, transparent); line-height:1.45; }
.skills-rail-install-open {
  align-self:flex-start; font:inherit; font-size:11.5px; padding:4px 10px; cursor:pointer;
  color:var(--ink, inherit); border:1px solid var(--hairline-strong, rgba(127,127,127,0.34));
  border-radius:7px; background:var(--surface-hover, rgba(127,127,127,0.08));
}
.skills-rail-install-review {
  display:flex; flex-direction:column; gap:7px; padding:9px 10px;
  border:1px solid var(--hairline-strong, rgba(127,127,127,0.3)); border-radius:8px;
  background:var(--surface, rgba(127,127,127,0.05));
}
.skills-rail-install-fact { font-size:11.5px; line-height:1.5; opacity:0.85; overflow-wrap:anywhere; }
.skills-rail-install-fact code { font-size:11px; }
.skills-rail-install-warn {
  font-size:11.5px; line-height:1.45; padding:5px 8px; border-radius:6px;
  color:color-mix(in srgb, var(--ink) 88%, #c78720);
  background:color-mix(in srgb, #c78720 15%, transparent);
  border:1px solid color-mix(in srgb, #c78720 30%, transparent);
}
.skills-rail-install-files {
  margin:0; padding:6px 10px 6px 24px; max-height:140px; overflow-y:auto;
  font-size:11px; line-height:1.6;
  background:var(--surface, rgba(127,127,127,0.06));
  border:1px solid var(--hairline, rgba(127,127,127,0.22)); border-radius:7px;
}
.skills-rail-install-files li { overflow-wrap:anywhere; }
.skills-rail-install-files li.is-script { color:color-mix(in srgb, var(--ink) 78%, #c78720); font-weight:600; }
.skills-rail-install-actions { display:flex; justify-content:flex-end; gap:8px; }
.skills-rail-install-actions button {
  font:inherit; font-size:11.5px; padding:4px 10px; border-radius:7px; cursor:pointer;
  border:1px solid var(--hairline-strong, rgba(127,127,127,0.34));
  background:var(--surface-hover, rgba(127,127,127,0.08)); color:var(--ink, inherit);
}
.skills-rail-install-actions .skills-rail-install-confirm {
  border-color:color-mix(in srgb, var(--accent, #e07b4f) 55%, transparent);
  background:color-mix(in srgb, var(--accent, #e07b4f) 14%, transparent);
}
.skills-rail-install-actions button:disabled { opacity:0.55; cursor:default; }
.skills-rail-diff {
  max-height:220px; overflow-y:auto; padding:7px 9px; border-radius:7px;
  font-family:var(--mono, ui-monospace, monospace); font-size:11px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
  background:var(--surface, rgba(127,127,127,0.06));
  border:1px solid var(--hairline, rgba(127,127,127,0.22));
}
.skills-rail-diff .is-add { color:color-mix(in srgb, var(--ink) 82%, #2f855a); background:color-mix(in srgb, #2f855a 14%, transparent); }
.skills-rail-diff .is-del { color:color-mix(in srgb, var(--ink) 82%, #c0392b); background:color-mix(in srgb, #c0392b 13%, transparent); }
.skills-rail-diff-skip { opacity:0.45; }
.skills-rail-activation-scopes {
  grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px; align-self:center; padding:1px 5px 10px;
}
.skills-rail-activation-picker {
  display:flex; flex-direction:column; gap:5px; min-width:0; padding:0;
  border:0; background:transparent;
}
.skills-rail-activation-label {
  padding-left:1px; font-size:10.5px; line-height:1; font-weight:650; letter-spacing:.055em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 58%, transparent);
}
.skills-rail-scope-buttons,
.skills-rail-state-buttons {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; min-width:0; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius:8px;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
}
.skills-rail-scope-buttons .skill-state-seg,
.skills-rail-state-buttons .skill-state-seg {
  min-width:0; min-height:30px; padding:6px 3px;
  border:0; border-right:1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius:0;
  font-size:10.5px; font-weight:550; white-space:nowrap;
}
.skills-rail-scope-buttons .skill-state-seg:last-child,
.skills-rail-state-buttons .skill-state-seg:last-child {
  border-right:0;
}
.skills-rail-scope-buttons .skill-state-seg:focus-visible,
.skills-rail-state-buttons .skill-state-seg:focus-visible {
  position:relative; z-index:1;
  outline:2px solid var(--accent, #e07b4f); outline-offset:-2px;
}
.skills-rail-scope-buttons .skill-state-seg.is-on {
  background:color-mix(in srgb, var(--accent, #e07b4f) 24%, transparent);
}
.skills-rail-state-buttons .skill-state-seg[data-set-state="hidden"].is-on {
  background:color-mix(in srgb, var(--ink) 16%, transparent);
}
.skills-rail-state-buttons .skill-state-seg[data-set-state="hinted"].is-on {
  background:color-mix(in srgb, #c78720 30%, transparent);
}
.skills-rail-state-buttons .skill-state-seg[data-set-state="loaded"].is-on {
  background:color-mix(in srgb, #2f855a 32%, transparent);
}
/* A rung the user is not standing on still says something. The dot sits beside the label it
   belongs to — a corner pip floats free of the word and reads as a stray mark — and wears the
   same three colours the State control uses, Hidden included: a rung deliberately switched OFF
   holds a setting as real as an on one, and drawing nothing there would hide the very entry
   that is overruling the wider rungs. A rung holding no setting of its own gets no dot at all,
   so Account/Project/Line reads as a map of where this skill was actually set. */
.skills-rail-scope-buttons .skill-state-seg {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
}
.skills-rail-rung-dot {
  flex:0 0 auto; width:5px; height:5px; border-radius:50%;
}
.skills-rail-scope-buttons .skill-state-seg[data-rung-state="hidden"] .skills-rail-rung-dot {
  background:color-mix(in srgb, var(--ink) 52%, transparent);
}
.skills-rail-scope-buttons .skill-state-seg[data-rung-state="hinted"] .skills-rail-rung-dot {
  background:#c78720;
}
.skills-rail-scope-buttons .skill-state-seg[data-rung-state="loaded"] .skills-rail-rung-dot {
  background:#2f855a;
}
/* The State control always shows what APPLIES at the selected rung, and that is often borrowed
   from a wider one. A borrowed state must not wear the same solid fill a set one does, or the
   row claims a setting the rung does not hold: it is outlined instead, and its label says who
   it came from. */
.skills-rail-state-buttons[data-inherited="true"] .skill-state-seg.is-on {
  background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
  opacity:.8;
}
/* One trailing gutter on every row keeps the Account / Project / Line matrix aligned.
   Index rows hold their × here; file rows keep
   the reserve empty. min-width (not a fixed basis) lets the armed "remove?" grow. */
.skills-rail-gutter {
  grid-column:2; grid-row:1 / 3; min-width:34px; display:flex; align-items:flex-start; justify-content:flex-end;
  padding-top:6px;
}
.skills-rail-divider {
  display:flex; align-items:center; gap:8px; min-height:22px; margin:9px 5px 2px; flex:0 0 auto;
  color:color-mix(in srgb, var(--ink) 54%, transparent);
  font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
}
.skills-rail-divider::after {
  content:""; height:1px; flex:1;
  background:color-mix(in srgb, var(--ink) 11%, transparent);
}
.skills-rail-name { flex:1; min-width:0; font-size:13.5px; font-weight:650; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skills-rail-origin {
  flex:0 1 42%; min-width:0; font-size:10.5px; line-height:1.2;
  color:color-mix(in srgb, var(--ink) 58%, transparent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.skills-rail-del {
  flex:0 0 auto; width:32px; min-height:32px; cursor:pointer; font-size:16px; line-height:1;
  background:transparent; border:0;
  color:var(--ink, inherit); opacity:.26; border-radius:7px;
  transition:opacity .12s ease, color .12s ease, background .12s ease;
}
.skills-rail-item:hover .skills-rail-del { opacity:0.58; }
.skills-rail-del:hover { opacity:1; color:#c0392b; background:color-mix(in srgb, #c0392b 10%, transparent); }
.skills-rail-del:focus-visible {
  opacity:1; outline:2px solid color-mix(in srgb, #c0392b 60%, transparent); outline-offset:1px;
}
.skills-rail-del.armed {
  opacity:1; width:auto; padding:0 8px; font-size:11.5px; font-weight:600;
  color:#fff; background:#c0392b; border-radius:7px;
}
.skills-rail-del.armed:hover { color:#fff; }
.skills-rail-empty {
  padding:28px 10px; font-size:12.5px; text-align:center;
  color:color-mix(in srgb, var(--ink) 56%, transparent);
}
.skills-rail-form-actions { display:flex; align-items:center; gap:8px; }
.skills-rail-form-status { flex:1; font-size:11.5px; color:color-mix(in srgb, var(--ink) 64%, transparent); }
.skills-rail-form-field {
  display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px;
  color:color-mix(in srgb, var(--ink) 84%, transparent);
}
.skills-rail-form-field select {
  font:inherit; font-size:12px; padding:4px 6px; color:var(--ink, inherit);
  background:var(--surface, rgba(127,127,127,0.06)); border:1px solid var(--hairline, rgba(127,127,127,0.22));
  border-radius:7px; outline:none; max-width:60%;
}
/* AI draft card in the rail: preview + real Save, above the account-skill list. */
.skills-rail-draft {
  display:flex; flex-direction:column; gap:7px; padding:12px;
  border:1px dashed var(--hairline-strong, rgba(127,127,127,0.4)); border-radius:12px;
  background:color-mix(in srgb, var(--accent, #e07b4f) 5%, transparent);
}
.skills-rail-draft-kicker { font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:color-mix(in srgb, var(--ink) 58%, transparent); }
.skills-rail-draft-name { font-size:13px; font-weight:600; }
.skills-rail-draft-desc { font-size:12px; color:color-mix(in srgb, var(--ink) 78%, transparent); }
.skills-rail-draft-meta { font-size:11.5px; color:color-mix(in srgb, var(--ink) 62%, transparent); }
.skills-rail-draft-body {
  margin:0; padding:6px 8px; max-height:120px; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  font-size:11.5px; line-height:1.45; color:var(--ink, inherit);
  background:var(--surface, rgba(127,127,127,0.06)); border:1px solid var(--hairline, rgba(127,127,127,0.22)); border-radius:7px;
}
.skills-rail-draft-actions { display:flex; flex-direction:column; gap:8px; }
.skills-rail-draft-dismiss, .skills-rail-draft-save {
  cursor:pointer; padding:6px 12px; font:inherit; font-size:12px; border-radius:7px;
  border:1px solid var(--hairline, rgba(127,127,127,0.28)); background:transparent; color:var(--ink, inherit);
}
.skills-rail-draft-save { background:var(--surface-hover, rgba(127,127,127,0.12)); font-weight:600; }
.skills-rail-draft-save:disabled { opacity:0.5; cursor:default; }
.skills-rail-draft-dismiss:hover, .skills-rail-draft-save:hover { background:var(--surface-hover, rgba(127,127,127,0.16)); }

@container skills-rail (max-width: 430px) {
  .skills-rail-head { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .skills-rail-head .skills-rail-search { grid-column:1 / -1; }
  .skills-rail-new,
  .skills-rail-seltoggle { width:100%; }
  .skills-rail-activation-scopes { grid-template-columns:1fr; gap:8px; }
  .skills-rail-main { align-items:flex-start; flex-wrap:wrap; }
  .skills-rail-origin { flex-basis:calc(100% - 18px); max-width:none; order:2; }
  .skills-rail-main::after { margin-left:auto; }
  .skills-rail-new-form > .skills-rail-new-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .skills-rail-new-form > .skills-rail-new-row .skills-rail-ask-send { grid-column:1 / -1; }
  .skills-rail-new-form > .skills-rail-new-row .skills-rail-new-cancel { margin-left:0; }
}

@media (hover:none) {
  .skills-rail-del { opacity:.6; }
}

@media (prefers-reduced-motion: reduce) {
  .skills-rail *,
  .skills-rail *::before,
  .skills-rail *::after { transition-duration:0.001ms !important; }
}

/* Dark templates only: brighter composer. (Spine/Context Panel boxes dropped — frameless rail.) */
body.dark #work-row .input-row {
  background: color-mix(in srgb, var(--ink) 5%, color-mix(in srgb, var(--inbox-bg, #111416) 76%, var(--frame-bg, #0b0d0f) 24%)) !important;
  --composer-surface: color-mix(in srgb, var(--ink) 5%, color-mix(in srgb, var(--inbox-bg, #111416) 76%, var(--frame-bg, #0b0d0f) 24%));
}

/* === SECTION: chat-error-alert === */
/* Owner: chat-error-alert — compact inline request failures, recovery actions, and technical detail disclosure. */
.msg-row.error {
  background: transparent !important;
  padding-bottom: 14px !important;
}

#messages .msg-row.error > .msg-error-card {
  box-sizing: border-box;
  width: fit-content !important;
  min-width: 0;
  max-width: min(480px, 100%) !important;
  padding: 9px 11px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);
  color: var(--ink);
  box-shadow: none;
  overflow-wrap: anywhere;
}

.msg-row--transient-error {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.msg-row--transient-error.is-dismissing {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

#messages .msg-row.error > .msg-error-card--transient {
  position: relative;
  padding-right: 38px !important;
}

.msg-error-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.msg-error-title::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red, #b85c55);
}

.msg-error-detail {
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.msg-error-detail-disclosure {
  margin-top: 5px;
}

.msg-error-detail-control {
  width: fit-content;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.4;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 36%, transparent);
  text-underline-offset: 2px;
}

.msg-error-detail-control::-webkit-details-marker {
  display: none;
}

.msg-error-detail-control::before {
  content: '›';
  display: inline-block;
  margin-right: 4px;
  text-decoration: none;
  transform: rotate(0deg);
  transition: transform 0.14s ease;
}

.msg-error-detail-disclosure[open] > .msg-error-detail-control::before {
  transform: rotate(90deg);
}

.msg-error-detail-control:focus-visible,
.msg-error-card button:focus-visible {
  outline: 2px solid var(--ink-soft);
  outline-offset: 2px;
}

.msg-error-technical-detail {
  max-height: 136px;
  margin-top: 5px;
  padding: 6px 7px;
  overflow: auto;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.msg-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
}

.msg-error-actions .retry-btn,
.msg-error-actions .bugfix-entry-chip {
  min-height: 25px;
  margin: 0;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.msg-error-dismiss {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
}

.msg-error-dismiss:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}

@media (max-width: 600px) {
  #messages .msg-row.error > .msg-error-card {
    max-width: 100% !important;
  }
}
/* === END SECTION: chat-error-alert === */

/* === SECTION: skill-suggestions === */
/* GI proposes; the user owns the click. The composer suggestion chip is a PROPOSAL surface —
   dashed border + "not loaded" state keep it visually and semantically distinct from loaded
   context chips. The Skills-rail Suggested section uses the same dashed grammar. */
.composer-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: min(460px, 78%);
  min-height: 30px; /* same seat height as the composer chip row */
  margin: 0 auto 0 0; /* left seat — opposite the steer chip, so the two never read as one family */
  box-sizing: border-box;
  padding: 0 8px 0 10px;
  border: 1px dashed color-mix(in srgb, #a48ae7 30%, var(--rule) 55%);
  border-bottom-color: color-mix(in srgb, #a48ae7 18%, var(--rule) 40%);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 95%, #a48ae7 5%);
  color: color-mix(in srgb, #a48ae7 52%, var(--ink) 48%);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  position: relative;
  z-index: 3;
  transition: background 120ms ease, border-color 120ms ease;
}
.composer-suggest-chip[hidden] { display: none !important; }
.composer-suggest-chip-kicker,
.composer-suggest-chip-state {
  color: color-mix(in srgb, currentColor 48%, transparent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.composer-suggest-chip-open {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 4px 2px;
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-suggest-chip-open:hover .composer-suggest-chip-title { text-decoration: underline; }
.composer-suggest-chip-dismiss {
  border: 0;
  background: none;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font: inherit;
  font-size: 10px;
  padding: 4px 2px;
  cursor: pointer;
}
.composer-suggest-chip-dismiss:hover { color: inherit; text-decoration: underline; }
.composer-suggest-chip-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: color-mix(in srgb, currentColor 55%, transparent);
  padding: 4px;
  cursor: pointer;
}
.composer-suggest-chip-hide:hover { color: inherit; }
body.dark .composer-suggest-chip {
  border-color: rgba(164, 138, 231, 0.28);
  border-bottom-color: rgba(164, 138, 231, 0.16);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 93%, #a48ae7 5%);
  color: rgba(203, 186, 245, 0.72);
}

/* Skills-rail Suggested section — same dashed proposal grammar as the chip */
.skills-section-suggested .skills-section-title {
  color: color-mix(in srgb, #a48ae7 45%, var(--ink) 55%);
}
.skill-item.skill-suggested-item {
  border-style: dashed;
  border-color: color-mix(in srgb, #a48ae7 26%, var(--rule) 55%);
  background: color-mix(in srgb, var(--inbox-bg, var(--paper-dark)) 96%, #a48ae7 4%);
}
.skill-suggested-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed color-mix(in srgb, #a48ae7 40%, var(--rule) 40%);
  border-radius: 8px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, #a48ae7 55%, var(--ink) 45%);
}
.skill-suggested-item .skill-item-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.dark .skill-item.skill-suggested-item {
  border-color: rgba(164, 138, 231, 0.24);
  background: color-mix(in srgb, var(--inbox-bg, #111416) 95%, #a48ae7 4%);
}
body.dark .skill-suggested-badge {
  border-color: rgba(164, 138, 231, 0.34);
  color: rgba(203, 186, 245, 0.75);
}

/* Mounted Skills rail: Suggested starters under the account rows, same dashed proposal grammar */
.skills-rail-suggested-note {
  padding: 0 5px 8px; font-size: 11.5px; line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.skills-rail-item.skills-rail-suggested {
  border-bottom: 1px dashed color-mix(in srgb, #a48ae7 30%, var(--rule) 50%);
}
.skills-rail-suggested .skills-rail-origin { color: color-mix(in srgb, #a48ae7 50%, var(--ink) 50%); }
.skills-rail-suggested-actions {
  grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; padding: 1px 5px 10px;
}
.skills-rail-suggest-add,
.skills-rail-suggest-dismiss {
  font: inherit; font-size: 11.5px; padding: 4px 10px; cursor: pointer; border-radius: 7px;
  color: var(--ink, inherit); border: 1px solid var(--hairline-strong, rgba(127,127,127,0.34));
  background: var(--surface-hover, rgba(127,127,127,0.08));
}
.skills-rail-suggest-add { border-style: dashed; border-color: color-mix(in srgb, #a48ae7 45%, var(--rule) 40%); }
.skills-rail-suggest-add:disabled,
.skills-rail-suggest-dismiss:disabled { opacity: 0.55; cursor: default; }
.skills-rail-suggest-add:focus-visible,
.skills-rail-suggest-dismiss:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #e07b4f) 55%, transparent); outline-offset: 1px;
}

/* === SECTION: pdf-editor === */
#pdf-view { max-width: none; background: var(--chat-bg, var(--frame-bg)); }
#pdf-view .pdf-doc-name { font-family: var(--sans); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pdf-view .pdf-doc-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
#pdf-viewer-container { background: transparent; }
#pdf-view .pdf-empty { color: var(--ink-dim); font-family: var(--mono); font-size: 12px; line-height: 1.6; max-width: 440px; margin: 0 auto; }
#pdf-view #pdf-toolbar .t-btn.active { background: var(--accent, #3a6df0); color: #fff; border-color: var(--accent, #3a6df0); }
#pdf-tabs .pdf-tab { display: flex; align-items: center; gap: 6px; max-width: 200px; padding: 4px 6px 4px 10px; border: 1px solid var(--rule, rgba(127,127,127,0.3)); border-radius: 6px; cursor: pointer; background: transparent; }
#pdf-tabs .pdf-tab.active { border-color: var(--accent, #3a6df0); background: color-mix(in srgb, var(--accent, #3a6df0) 14%, transparent); }
#pdf-tabs .pdf-tab-name { font-family: var(--sans); font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pdf-tabs .pdf-tab-x { background: none; border: none; color: var(--ink-dim); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .7; }
#pdf-tabs .pdf-tab-x:hover { opacity: 1; }

/* === SECTION: worktree-map === */
/* Read-only 2D worktree relationship map overlay (opened by worktree_tool op map). */
.wt-map-overlay { display: none; position: fixed; inset: 0; z-index: 9000; background: color-mix(in srgb, #000 40%, transparent); align-items: center; justify-content: center; }
.wt-map-overlay.active { display: flex; }
.wt-map-sheet { background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 8px; width: min(92vw, 880px); box-shadow: 0 8px 32px color-mix(in srgb, #000 20%, transparent); display: flex; flex-direction: column; max-height: 86vh; }
.wt-map-header { display: flex; align-items: center; gap: 14px; padding: 14px 20px 10px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.wt-map-title { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.wt-map-legend { display: flex; gap: 12px; margin-left: auto; }
.wt-map-key { font-family: var(--sans); font-size: 11px; color: var(--ink-dim); padding-left: 14px; position: relative; }
.wt-map-key::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 2px; }
.wt-map-key-main::before { background: var(--accent, #3a6df0); }
.wt-map-key-clean::before { background: #3d9a5f; }
.wt-map-key-locked::before { background: #c8912a; }
.wt-map-key-alert::before { background: #c0453a; }
.wt-map-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink); opacity: .4; line-height: 1; padding: 0 2px; }
.wt-map-close:hover { opacity: .8; }
.wt-map-body { overflow: auto; padding: 12px 20px 20px; }
.wt-map-body svg { display: block; }
.wt-map-node rect { fill: color-mix(in srgb, var(--ink) 4%, var(--paper)); stroke-width: 1.4; rx: 6; }
.wt-map-node-main rect { stroke: var(--accent, #3a6df0); }
.wt-map-node-clean rect { stroke: #3d9a5f; }
.wt-map-node-locked rect { stroke: #c8912a; }
.wt-map-node-alert rect { stroke: #c0453a; }
.wt-map-node-detached rect { stroke-dasharray: 4 3; }
.wt-map-node-collide rect { stroke: #d1651f; stroke-width: 2.2; }
.wt-map-node-stale rect { stroke: color-mix(in srgb, var(--ink) 28%, transparent); }
.wt-map-collide { stroke: #d1651f; stroke-width: 1.6; fill: none; stroke-dasharray: 3 2; }
.wt-map-branch { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--ink); }
.wt-map-path { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-dim); }
.wt-map-badge { font-family: var(--sans); font-size: 10px; fill: var(--ink-dim); }
.wt-map-group-label { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--ink-dim); letter-spacing: .04em; text-transform: uppercase; }
.wt-map-edge { stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: 1.2; fill: none; }

/* === SECTION: context-panel-bottom-controls === */
/* Keep the three Context Panel actions in one bottom row beside the context ring. */
#context-panel .ctx-add-actions {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 8;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
#context-panel-frame .ctx-add-actions #ctx-add-new,
#context-panel-frame .ctx-add-actions #ctx-add-skill {
  height: 28px;
  min-height: 28px;
  align-self: center;
}
#context-panel .ctx-add-actions .cp-attach-btn {
  margin: 0;
  align-self: center;
  justify-content: center;
}
/* === END SECTION: context-panel-bottom-controls === */

/* === SECTION: vault-recovery-readiness === */
/* Keep partial vault contents out of sight while the durable log rebuilds the cache. */
#vault-recovery-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: var(--paper, #0d0f10);
  color: var(--ink, #e8e4dc);
}
.vault-recovery-card { width: min(420px, calc(100vw - 48px)); text-align: center; }
.vault-recovery-pulse {
  width: 10px;
  height: 10px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent, #8e9c78);
  animation: vault-recovery-pulse 1.4s ease-in-out infinite;
}
.vault-recovery-title { font: 500 17px/1.3 var(--sans); letter-spacing: .01em; }
.vault-recovery-detail { margin-top: 10px; font: 12px/1.6 var(--mono); color: var(--ink-dim, #8a8580); }
#vault-recovery-overlay.is-degraded .vault-recovery-pulse { background: #b76a58; animation: none; }
@keyframes vault-recovery-pulse { 50% { opacity: .3; transform: scale(.72); } }
/* === END SECTION: vault-recovery-readiness === */

/* === SECTION: conversation-cards === */
/* Saved cross-line and provider conversations share one conversation surface on the initiating line. */
.msg-row.conversation-card {
  width: min(760px, 100%);
  max-width: min(760px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  align-items: stretch;
  box-sizing: border-box;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, #718096 26%, var(--rule) 64%);
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #718096 10%, transparent),
      color-mix(in srgb, var(--paper) 68%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent),
    0 12px 34px color-mix(in srgb, #000 10%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
body.dark .msg-row.conversation-card {
  color: #e7e9ed;
  border-color: #3b4252;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #718096 10%, transparent),
      rgba(21, 24, 32, .9));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #718096 18%, transparent),
    0 14px 38px color-mix(in srgb, #000 28%, transparent);
}
.msg-row.conversation-card .msg-body {
  width: 100%;
}
.msg-row.conversation-card:not(.is-expanded) .msg-body {
  max-height: 8.8rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 calc(100% - 34px), transparent 100%);
}
.conversation-card-toggle {
  margin-top: 8px;
  padding: 6px 0 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 600 12px/1.35 var(--sans);
  cursor: pointer;
}
.conversation-card-toggle:hover { color: var(--ink-heavy); }
.conversation-card-toggle:focus-visible {
  color: var(--ink-heavy);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (max-width: 700px) {
  #chat-main-shell .msg-row.conversation-card {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    padding: 13px 14px;
    margin-bottom: 18px;
  }
  .msg-row.conversation-card:not(.is-expanded) .msg-body { max-height: 7.6rem; }
}
/* === END SECTION: conversation-cards === */

/* === SECTION: card-context-bar === */
#work-row.line-layout-pending { visibility: hidden; }
#work-row.line-layout-settling #context-panel,
#work-row.line-layout-settling #work-left,
#work-row.line-layout-settling .messages,
#work-row.line-layout-settling .input-zone,
#work-row.line-layout-settling .artifact-shelf { transition: none !important; }
.card-context-bar { display: none; }
@media (min-width: 701px) {
  /* Only the resting width changes. Hover/focus releases the override so the user's
     saved width and the existing Line Spine / Context split return unchanged. */
  #work-row.has-card-context-bar:not(:has(#context-panel:hover, #context-panel:focus-within, #context-panel-resize-handle:hover, #context-panel-resize-handle.dragging)) {
    --cp-width: var(--sidebar-rail, 23px) !important;
  }
  #work-row.has-card-context-bar #context-panel:not(:hover):not(:focus-within) > :not(.card-context-bar) {
    visibility: hidden;
  }
  #work-row.has-card-context-bar .card-context-bar {
    display: flex;
  }
  #work-row.has-card-context-bar #context-panel:is(:hover, :focus-within) .card-context-bar {
    opacity: 0;
    pointer-events: none;
  }
  .card-context-bar {
    position: absolute;
    inset: 0;
    background: var(--chrome-bg);
    overflow: hidden;
    cursor: default;
  }
  .card-context-bar::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.12) 35%, rgba(255,255,255,0.085) 68%, rgba(255,255,255,0.03) 88%, transparent 100%);
    pointer-events: none;
  }
  .card-context-icon {
    position: absolute;
    top: 16px;
    left: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 32px;
    color: var(--ink-dim);
  }
  .card-context-icon svg { width: 16px; height: 16px; }
  body.dark .card-context-icon { height: 26px; color: var(--ink-soft); }
  .card-context-icon-context {
    top: 66.6667%;
    transform: translateY(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #work-row.has-card-context-bar #context-panel { transition: none; }
}
/* === END SECTION: card-context-bar === */

/* === SECTION: floating-stone === */
/* A quiet 3D stone hovers in the lower-right of the Context Panel, behind every control. */
#context-panel {
  isolation: isolate;
}

.floating-stone {
  --floating-stone-ground: var(--chat-bg, var(--frame-bg, var(--flat-panel-bg)));
  --floating-stone-lit: color-mix(in srgb, var(--ink) 34%, var(--floating-stone-ground));
  --floating-stone-shade: color-mix(in srgb, #000 42%, var(--floating-stone-ground));
  --floating-stone-shadow: color-mix(in srgb, #000 50%, transparent);
  position: absolute;
  right: clamp(22px, 2.4vw, 40px);
  bottom: clamp(64px, 9vh, 104px);
  z-index: -1;
  width: clamp(150px, 13vw, 190px);
  aspect-ratio: 4 / 3;
  pointer-events: none;
}

/* Three slow sways of different lengths keep the stone always drifting without a visible beat.
   They move only translate/rotate/transform on this plain box (never on the <svg>, which Chromium
   will not hand off), so the compositor slides the painted stone instead of redrawing it.
   Each keyframe fifth is cut into 1/12 s steps (1 s -> 12, 1.5 s -> 18, 3 s -> 36), so every sway
   changes on one shared beat and the stone costs 12 screen refreshes a second instead of 60. */
.floating-stone-rock {
  position: absolute;
  inset: 0 0 auto 0;
  animation:
    floating-stone-rise 5s steps(12) infinite alternate,
    floating-stone-tilt 7.5s steps(18) infinite alternate,
    floating-stone-drift 15s steps(36) infinite alternate;
  will-change: transform;
}

.floating-stone-rock svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.floating-stone-faces path {
  fill: color-mix(in srgb, var(--floating-stone-lit) var(--t), var(--floating-stone-shade));
  stroke: color-mix(in srgb, var(--floating-stone-lit) var(--t), var(--floating-stone-shade));
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.floating-stone-shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -18%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--floating-stone-shadow), transparent);
  animation:
    floating-stone-shadow 5s steps(12) infinite alternate,
    floating-stone-drift 15s steps(36) infinite alternate;
  will-change: transform, opacity;
}

/* Stops sit on a sine curve, so the stepped sways still ease gently in and out. */
@keyframes floating-stone-rise {
  0% { translate: 0 0; }
  20% { translate: 0 -0.57px; }
  40% { translate: 0 -2.07px; }
  60% { translate: 0 -3.93px; }
  80% { translate: 0 -5.43px; }
  100% { translate: 0 -6px; }
}

@keyframes floating-stone-tilt {
  0% { rotate: -1deg; }
  20% { rotate: -0.81deg; }
  40% { rotate: -0.31deg; }
  60% { rotate: 0.31deg; }
  80% { rotate: 0.81deg; }
  100% { rotate: 1deg; }
}

@keyframes floating-stone-drift {
  0% { transform: translateX(-2.5px); }
  20% { transform: translateX(-2.02px); }
  40% { transform: translateX(-0.77px); }
  60% { transform: translateX(0.77px); }
  80% { transform: translateX(2.02px); }
  100% { transform: translateX(2.5px); }
}

@keyframes floating-stone-shadow {
  0% { scale: 1 1; opacity: 0.9; }
  20% { scale: 0.986 1; opacity: 0.873; }
  40% { scale: 0.948 1; opacity: 0.803; }
  60% { scale: 0.902 1; opacity: 0.717; }
  80% { scale: 0.864 1; opacity: 0.647; }
  100% { scale: 0.85 1; opacity: 0.62; }
}

body:not(.dark) .floating-stone {
  --floating-stone-lit: color-mix(in srgb, #fff 35%, var(--floating-stone-ground));
  --floating-stone-shade: color-mix(in srgb, var(--ink) 38%, var(--floating-stone-ground));
  --floating-stone-shadow: color-mix(in srgb, var(--ink) 26%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .floating-stone-rock,
  .floating-stone-shadow { animation: none; }
}

@media (max-width: 1100px) {
  .floating-stone { display: none; }
}
/* === END SECTION: floating-stone === */

/* === SECTION: routines-rail === */
#routines-view {
  overflow-y: auto !important;
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
  scrollbar-width: thin;
}

#routines-view::-webkit-scrollbar,
#routines-view .routines-list::-webkit-scrollbar {
  width: 8px;
}

#routines-view::-webkit-scrollbar-thumb,
#routines-view .routines-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

#routines-view ::selection {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--ink);
}

.routines-dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 8px 4px 16px;
  color: var(--ink);
  font-family: var(--sans);
}

.routines-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 6px 18px;
  animation: routines-rail-reveal 260ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes routines-rail-reveal {
  from { opacity: .72; clip-path: inset(0 0 18% 0); }
  to { opacity: 1; clip-path: inset(0); }
}

.routines-header h2 {
  margin: 0 0 7px;
  color: var(--ink-heavy, var(--ink));
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.routines-header p {
  max-width: 38ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.routines-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 9px 6px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.routines-summary strong {
  color: var(--ink);
  font-weight: 600;
}

.routines-summary .is-due,
.routines-summary .is-due strong {
  color: var(--accent);
}

.routines-summary-next {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-status {
  margin: 12px 6px 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
}

.routine-status.is-error {
  border-color: color-mix(in srgb, var(--danger, #d26a5f) 42%, transparent);
  color: var(--danger, #d26a5f);
}

.routine-status.is-success {
  border-color: color-mix(in srgb, var(--pass-3, #7f9f72) 36%, transparent);
}

.routine-form {
  display: grid;
  gap: 13px;
  margin: 14px 6px 4px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
}

.routine-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.routine-form-head h3,
.routine-row h3,
.routines-empty h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
}

.routine-form-head h3 {
  font-size: 14px;
  letter-spacing: -.01em;
}

.routine-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 600;
}

.routine-field > span {
  line-height: 1;
}

.routine-field input,
.routine-field textarea,
.routine-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 8px;
  outline: none;
  background: var(--paper);
  color: var(--ink);
  font: 400 12px/1.45 var(--sans);
  caret-color: var(--accent);
  transition: border-color 140ms ease, background 140ms ease;
}

.routine-field input,
.routine-field select {
  min-height: 35px;
  padding: 7px 9px;
}

.routine-field textarea {
  min-height: 104px;
  padding: 9px;
  resize: vertical;
}

.routine-field input::placeholder,
.routine-field textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

.routine-field input:focus,
.routine-field textarea:focus,
.routine-field select:focus {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  background: color-mix(in srgb, var(--paper) 96%, var(--accent));
}

.routine-form-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .7fr);
  gap: 10px;
}

.routine-form-note,
.routines-footnote {
  margin: 0;
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.5;
}

.routine-form-actions,
.routine-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.routine-form-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.routine-button,
.routine-icon-button {
  border: 1px solid transparent;
  outline: none;
  font-family: var(--sans);
  cursor: pointer;
  transition: color 130ms ease, background 130ms ease, border-color 130ms ease, transform 130ms ease;
}

.routine-button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.routine-button-primary {
  border-color: color-mix(in srgb, var(--ink) 72%, transparent);
  background: var(--ink-heavy, var(--ink));
  color: var(--paper);
}

.routine-button-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--ink-heavy, var(--ink)) 88%, var(--accent));
}

.routine-button-quiet {
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  background: transparent;
  color: var(--ink-soft);
}

.routine-button-quiet:hover:not(:disabled),
.routine-icon-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}

.routine-button:disabled,
.routine-icon-button:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
}

.routine-button:focus-visible,
.routine-icon-button:focus-visible,
.routine-field input:focus-visible,
.routine-field textarea:focus-visible,
.routine-field select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, white);
  outline-offset: 2px;
}

.routine-icon-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-dim);
}

.routine-icon-button-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger, #d26a5f) 35%, transparent);
  color: var(--danger, #d26a5f);
}

.routines-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 4px 6px 0;
}

.routine-row {
  display: grid;
  gap: 10px;
  padding: 17px 0 16px;
  border-bottom: 1px solid var(--rule);
}

.routine-row-head,
.routine-row-title-wrap {
  display: flex;
  align-items: center;
}

.routine-row-head {
  justify-content: space-between;
  gap: 12px;
}

.routine-row-title-wrap {
  min-width: 0;
  gap: 9px;
}

.routine-row h3 {
  overflow: hidden;
  font-size: 13px;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-state-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pass-3, #7f9f72);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--pass-3, #7f9f72) 30%, transparent);
}

.routine-row.is-due .routine-state-dot {
  background: var(--accent);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);
}

.routine-row.is-paused .routine-state-dot {
  background: var(--ink-dim);
  box-shadow: none;
}

.routine-state-label {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.routine-row.is-due .routine-state-label {
  color: var(--accent);
  font-weight: 600;
}

.routine-prompt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.routine-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--ink-dim);
  font-size: 9px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.routine-meta span {
  position: relative;
}

.routine-meta span + span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -7px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

.routine-attention-note {
  margin: 0;
  padding: 9px 10px;
  border-left: 2px solid var(--rule);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

.routine-attention-note strong {
  color: var(--ink);
  font-weight: 600;
}

.routine-row-actions .routine-icon-button:first-of-type {
  margin-left: auto;
}

.routines-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  min-height: 260px;
  align-content: center;
  padding: 28px 8px;
  color: var(--ink-dim);
}

.routines-empty svg {
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

.routines-empty h3 {
  font-size: 15px;
}

.routines-empty p {
  max-width: 34ch;
  margin: -5px 0 2px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.routines-footnote {
  margin-top: auto;
  padding: 18px 6px 2px;
  border-top: 1px solid var(--rule);
}

body:not(.dark) .routine-button-primary {
  color: var(--paper);
}

body:not(.dark) .routine-form {
  background: color-mix(in srgb, var(--paper) 96%, var(--ink));
}

@media (max-width: 460px) {
  .routines-header { gap: 12px; }
  .routines-summary { gap: 9px; }
  .routines-summary-next { display: none; }
  .routine-form-pair { grid-template-columns: 1fr; }
  .routine-row-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .routines-header { animation: none; }
  .routine-button,
  .routine-icon-button { transition: none; }
}
/* === END SECTION: routines-rail === */

/* === SECTION: ai-browser === */
/* Owner: AI browser — Settings trust copy, lifecycle status, reset, and Preview distinction. */
.settings-ai-browser-card,
.settings-ai-browser-danger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.settings-ai-browser-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
.settings-ai-browser-heading span + span {
  color: var(--ink-soft);
  font-weight: 500;
}
.settings-ai-browser-card p,
.settings-ai-browser-danger > div {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
}
.settings-ai-browser-primary {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--rule));
}
.settings-ai-browser-card .t-btn:disabled,
.settings-ai-browser-danger .t-btn:disabled {
  cursor: wait;
  opacity: .45;
}
.settings-ai-browser-status {
  min-height: 18px;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.45;
}
.settings-ai-browser-status[data-state="success"] { color: var(--pass-2, #3ab88e); }
.settings-ai-browser-status[data-state="error"] { color: var(--danger, #c84f4f); }
.settings-ai-browser-danger .t-btn {
  color: var(--danger, #c84f4f);
  border-color: color-mix(in srgb, var(--danger, #c84f4f) 45%, var(--rule));
}
.settings-ai-browser-danger .t-btn[hidden] { display: none; }
.preview-browser-session-label {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 10px;
  white-space: nowrap;
}
/* === END SECTION: ai-browser === */
/* === SECTION: line-branch === */
.composer-branch-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-ghost);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.composer-branch-btn[hidden] { display: none; }
.composer-branch-btn:not([hidden]) ~ .input-ta-wrap { margin-right: 28px; }
.composer-branch-btn:hover:not(:disabled) { color: var(--ink-heavy); border-color: var(--ink-ghost); }
.composer-branch-btn:disabled { color: color-mix(in srgb, var(--ink) 22%, transparent); cursor: default; }
.composer-branch-btn[aria-busy="true"] { cursor: progress; }
.composer-branch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.line-branch-origin, .line-branch-notice {
  color: var(--text-muted, #888);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
}
.line-branch-origin button, .line-branch-notice button {
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.msg-branch-btn { display: none; }
.line-branch-origin button:focus-visible, .line-branch-notice button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* === SECTION: make-it-customer === */
/* The customer bridge sets this before the sheet loads. Desktop GI has no such class. */
html.gi-customer .nav-coding { display: none !important; }
html.gi-customer .line-mode-toggle { display: none !important; }
html.gi-customer #composer-line-mode { display: none !important; }
html.gi-customer #project-switcher-btn { display: none !important; }
html.gi-customer #project-switcher-menu { display: none !important; }
html.gi-customer #computer-access-cycle { display: none !important; }
html.gi-customer #power-cycle { display: none !important; }
html.gi-customer #fast-mode-toggle { display: none !important; }
html.gi-customer aside .nav-item[data-view="settings"] { display: none !important; }
html.gi-customer aside .nav-item[data-view="skills"] { display: none !important; }
html.gi-customer #ctx-add-skill { display: none !important; }
/* A customer connects ChatGPT or Claude through their helper; the server's own sign-ins stay hidden. */
html.gi-customer #code-view .conn-card:not(:has(#conn-codex-status, #conn-claude-sub-status)) { display: none !important; }
html.gi-customer #code-view .conn-zone-label { display: none !important; }
html.gi-customer #conn-codex-manage,
html.gi-customer #conn-codex-add,
html.gi-customer #conn-codex-account-select,
html.gi-customer #conn-claude-sub-manage,
html.gi-customer #conn-claude-sub-signin { display: none !important; }
html.gi-customer #scope-signal { display: none !important; }
html.gi-customer aside .nav-item[data-view="plugins"] { display: none !important; }
html.gi-customer #fixitbtn { display: none !important; }
html.gi-customer .model3d-full-view-tools [data-task="print"],
html.gi-customer .model3d-full-view-sculpt-tool,
html.gi-customer .model3d-clay-action,
html.gi-customer .model3d-prepare-action { display: none !important; }
html.gi-customer #composer-command-cluster > :not(#composer-sum-btn):not(#composer-teach-btn):not(#composer-clear-keep):not(#composer-clear-btn):not(#composer-grill-btn) { display: none !important; }