/* CoAgent - Claude Code's own look, copied rather than reinvented.
   Ground ladder, not borders, separates regions. Two ledgers, both
   countable: the accent is painted in exactly two places (the send button
   fill and the focus ring), and exactly three `border` declarations are
   allowed (the 2px left rule on a reasoning body/blockquote, the divider
   under a code-block header, and the row rule in a data table). A third
   accent or a fourth border is a bug. */

:root {
  color-scheme: light;

  /* Ground ladder: rail darkest, sidebar/topbar mid, thread lightest.
     Adjacent regions differ by one step. Ambiguous boundary? Add space. */
  --ground-deep:    #EDECE8;
  --ground:         #F5F4F0;
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F5F4F0;

  /* Ink on --surface: text 16.4:1, muted 5.7:1, faint 4.6:1. */
  --text:        #1A1A18;
  --text-strong: #0D0D0C;
  --muted:       #6B6A65;
  --faint:       #83817B;

  /* Claude's own orange. The single hue in the product. */
  --accent:        #D97757;
  --accent-ink:    #FFFCF7;
  --accent-strong: color-mix(in oklab, var(--accent) 88%, #000);
  --accent-weak:   color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line:   color-mix(in oklab, var(--accent) 78%, var(--text));
  --focus-ring:    color-mix(in srgb, var(--accent) 45%, transparent);

  /* The user's own turn: a quiet plate, never the accent, never a gradient. */
  --bubble-mine:      #F0EFEA;
  --bubble-mine-text: var(--text);

  /* Status shows as a dot or as text. Never as a fill. */
  --success: #3F6B45;
  --warning: #8A5F1C;
  --danger:  #A4402E;

  --hairline:        color-mix(in srgb, var(--text) 10%, transparent);
  --hairline-strong: color-mix(in srgb, var(--text) 18%, transparent);

  /* Only menus and modals float. Nothing in the document body casts a shadow. */
  --shadow-float: none;
  --shadow-pop:   0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.14);
  --shadow-veil:  none;
  --scrim:        rgba(20,20,18,.34);

  /* Latin faces lead so ASCII never falls through to a CJK face's Latin. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
          Consolas, "Liberation Mono", monospace;

  /* Only the metadata tier is tokenised: it is the only tier Chinese moves. */
  --fs-meta: 12px;
  --lh-meta: 1.4;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-bubble: 10px;
  --radius-pill: 999px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px;

  --rail-w: 56px;
  --sidebar-w: 272px;
  --topbar-h: 52px;
  /* Two measures, because prose and plates want different widths. --measure
     keeps Claude's paragraphs at a readable line length. --thread-measure is
     the column the conversation sits in, and your own turn may use all of it.
     .thread and .composer both read --thread-measure so their edges cannot
     drift apart again. */
  --measure: 768px;
  --thread-measure: 1040px;
  --settings-measure: 680px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --t-fast: 120ms;
  --t-move: 180ms;

  /* Compatibility aliases: old names, new values, so the swap lands without
     touching a selector. Each dies when its selectors are migrated. */
  --content:             var(--surface);
  --content-translucent: var(--surface);
  --raised:              var(--surface-raised);
  --inset:               var(--surface-sunken);
  --inset-2:             var(--ground-deep);
  --vibrancy:            var(--ground);
  --vibrancy-strong:     var(--ground);
  --desktop:             var(--ground-deep);
  --code-bg:             var(--surface-sunken);
  --accent-deep:         var(--accent);
  --accent-text:         var(--accent-ink);
  --bubble-other:        transparent;
  --bubble-other-text:   var(--text);
  --danger-weak:  color-mix(in srgb, var(--danger) 10%, transparent);
  --warning-weak: color-mix(in srgb, var(--warning) 10%, transparent);
  --success-weak: color-mix(in srgb, var(--success) 10%, transparent);
  --shadow-window:       var(--shadow-pop);
  --shadow-btn:          none;
}

/* 12px Simplified Chinese at 1x is at the edge of legible, so the metadata
   tier grows. Needs document.documentElement.lang to be written. */
:root:lang(zh), :root[lang^="zh"] { --fs-meta: 12.5px; --lh-meta: 1.5; }

:root[data-theme="system"] { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Read off a screenshot of the Claude Code desktop app: neutral greys,
       not the warm ones the light theme leans on. */
    --ground-deep:    #171717;
    --ground:         #1C1C1C;
    --surface:        #212121;
    --surface-raised: #2A2A2A;
    --surface-sunken: #1A1A1A;

    --text:        #E3E3E3;
    --text-strong: #FFFFFF;
    --muted:       #9C9C9C;
    --faint:       #767676;

    --accent:        #D97757;
    --accent-ink:    #1A1512;
    --accent-strong: color-mix(in oklab, var(--accent) 86%, #FFF);
    --accent-weak:   color-mix(in srgb, var(--accent) 16%, transparent);
    --accent-line:   color-mix(in oklab, var(--accent) 85%, var(--text));
    --focus-ring:    color-mix(in srgb, var(--accent) 55%, transparent);

    --bubble-mine:      #2C2C2C;
    --bubble-mine-text: var(--text);

    --success: #7FA97F;
    --warning: #C89B54;
    --danger:  #E08272;

    --hairline:        rgba(255,255,255,.09);
    --hairline-strong: rgba(255,255,255,.16);
    --code-bg:         #2A2A2A;
    --inset-2:         #303030;

    /* The inset highlight sells the lift here; a drop shadow alone does not
       read on this ground. Nothing else sets an inset shadow. */
    --shadow-float: none;
    --shadow-pop:   0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.52);
    --shadow-veil:  none;
    --scrim:        rgba(8,8,7,.58);

    --content-translucent: var(--surface);
    --shadow-btn: none;
  }
}

:root[data-theme="dark"] {
color-scheme: dark;

  --ground-deep:    #171717;
  --ground:         #1C1C1C;
  --surface:        #212121;
  --surface-raised: #2A2A2A;
  --surface-sunken: #1A1A1A;

  --text:        #E3E3E3;
  --text-strong: #FFFFFF;
  --muted:       #9C9C9C;
  --faint:       #767676;

  --accent:        #D97757;
  --accent-ink:    #1A1512;
  --accent-strong: color-mix(in oklab, var(--accent) 86%, #FFF);
  --accent-weak:   color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line:   color-mix(in oklab, var(--accent) 85%, var(--text));
  --focus-ring:    color-mix(in srgb, var(--accent) 55%, transparent);

  --bubble-mine:      #2C2C2C;
  --bubble-mine-text: var(--text);

  --success: #7FA97F;
  --warning: #C89B54;
  --danger:  #E08272;

  --hairline:        rgba(255,255,255,.09);
  --hairline-strong: rgba(255,255,255,.16);
  --code-bg:         #2A2A2A;
  --inset-2:         #303030;

  /* The inset highlight sells the lift here; a drop shadow alone does not
     read on this ground. Nothing else sets an inset shadow. */
  --shadow-float: none;
  --shadow-pop:   0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.52);
  --shadow-veil:  none;
  --scrim:        rgba(8,8,7,.58);

  --content-translucent: var(--surface);
  --shadow-btn: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
p { margin: 0 0 .7em; }
a { color: var(--accent); text-decoration: none; }

.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.mono { font-family: var(--mono); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

::selection { background: var(--accent-weak); }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- controls ---------- */

.btn {
  appearance: none;
  border: .5px solid var(--hairline-strong);
  background: var(--raised);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: default;
  box-shadow: var(--shadow-btn);
  transition: background .1s ease, filter .1s ease;
  white-space: nowrap;
}
.btn:hover { background: color-mix(in srgb, var(--raised) 92%, var(--text) 8%); }
.btn:active { filter: brightness(.94); }
.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white) 0%, var(--accent-deep) 100%);
  border-color: transparent;
  color: var(--accent-text);
}
.btn.primary:hover { background: var(--accent-strong); }
.btn.subtle {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--accent);
}
.btn.subtle:hover { background: var(--accent-weak); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-weak); }
.btn.subtle.danger { border-color: transparent; }
.btn.block { display: block; width: 100%; text-align: center; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.is-on { background: var(--accent-weak); color: var(--accent); border-color: transparent; box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--focus-ring); }

.icon-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  width: 30px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: var(--inset-2); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.input {
  width: 100%;
  border: .5px solid var(--hairline-strong);
  background: var(--content);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  box-shadow: inset 0 .5px 2px rgba(0, 0, 0, .05);
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--focus-ring); }
textarea.input { resize: vertical; }
.input.mono { font-family: var(--mono); font-size: 12px; }
.input.search { border-radius: 8px; background: var(--inset); border-color: transparent; }
.input.search:focus { background: var(--content); border-color: var(--accent); }

.ghost-select {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: default;
  max-width: 180px;
}
.ghost-select:hover { background: var(--inset-2); color: var(--text); }
.ghost-select.compact { max-width: 92px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--inset);
  color: var(--muted);
}
.badge.live { color: var(--accent); background: var(--accent-weak); }
.badge.live::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.badge.ok { color: var(--success); background: var(--success-weak); }
.badge.warn { color: var(--warning); background: var(--warning-weak); }
.subtle-badge { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }

@keyframes pulse { 50% { opacity: .35; } }

.switch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.switch input { accent-color: var(--accent); }

.link-btn {
  border: none; background: none; color: var(--accent);
  font: inherit; font-size: 13px; cursor: default; padding: 6px;
}
.link-btn:hover { text-decoration: underline; }

/* ---------- app frame ---------- */

.app { display: flex; height: 100%; }

.rail {
  width: var(--rail-w);
  flex: none;
  background: var(--vibrancy);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-right: .5px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 10px;
  gap: 9px;
}
.rail-list { display: flex; flex-direction: column; gap: 9px; flex: 1; overflow-y: auto; }
.rail-item {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: none;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: default;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), inset 0 .5px 0 rgba(255, 255, 255, .3);
  opacity: .8;
  transition: opacity .12s ease, transform .12s ease;
  position: relative;
}
.rail-item:hover { opacity: 1; transform: translateY(-1px); }
.rail-item.is-active { opacity: 1; }
.rail-item.is-active::after {
  content: '';
  position: absolute;
  left: -11px;
  width: 3.5px;
  height: 22px;
  border-radius: 99px;
  background: var(--accent);
}
.rail-item.static { cursor: default; opacity: 1; }
.rail-add {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px dashed var(--hairline-strong);
  color: var(--muted);
  font-size: 18px;
  cursor: default;
}
.rail-add:hover { color: var(--accent); border-color: var(--accent); }

.frame { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: .5px solid var(--hairline);
  background: var(--vibrancy-strong);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ws-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* min-width: 0, or the widest unbreakable thing inside (a long line in a
   <pre>, a 1280 px frame) sets the page's width and pushes controls off screen. */
.shell { flex: 1; display: flex; min-height: 0; min-width: 0; }

/* ---------- sidebar ---------- */

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  border-right: .5px solid var(--hairline);
  background: var(--vibrancy);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* segmented control */
.tabs {
  display: flex;
  margin: 10px 10px 0;
  padding: 2px;
  gap: 2px;
  background: var(--inset-2);
  border-radius: 8px;
}
.tab {
  flex: 1;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 2px;
  border-radius: 6.5px;
  cursor: default;
  transition: color .12s ease;
}
.tab:hover { color: var(--text); }
.tab.is-active {
  color: var(--text-strong);
  background: var(--raised);
  box-shadow: 0 .5px 2.5px rgba(0, 0, 0, .18);
}

.sidebar-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  min-height: 0;
}
.sidebar-panel .search { flex: none; }

.list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.list-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.list-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.list-item.is-active { background: var(--accent); }
.list-item.is-active .name,
.list-item.is-active .sub { color: #fff; }
.list-item.is-active .file-icon { color: rgba(255, 255, 255, .8); }
.list-item .row { display: flex; align-items: center; gap: 6px; }
.list-item .name {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.list-item .sub {
  font-size: 11px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.file-icon { color: var(--faint); font-family: var(--mono); flex: none; }

.file-actions { display: flex; gap: 6px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 2px; font-size: 12px; }
.crumb {
  border: none; background: none; color: var(--muted);
  font: inherit; font-size: 11.5px;
  padding: 2px 5px; cursor: default; border-radius: 4px;
}
.crumb:hover { color: var(--accent); background: var(--accent-weak); }

/* ---------- main views ---------- */

.main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--content);
}
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

.view-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px max(20px, calc(50% - 430px));
  border-bottom: .5px solid var(--hairline);
  background: var(--content);
}
/* Views that are not a centred reading column keep the flat inset. */
#filesView .view-head, #settingsView .view-head, #documentView .view-head,
#fileView .view-head { padding-left: 20px; padding-right: 20px; }
.view-title h1 { font-size: 14px; }
.view-title { min-width: 0; }
.view-actions { display: flex; align-items: center; gap: 6px; flex: none; }

/* ---------- chat ---------- */

.thread {
  flex: 1;
  overflow-y: auto;
  padding: 20px max(20px, calc(50% - 430px)) 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-anchor: none;
}

.msg { display: flex; gap: 10px; }
.avatar {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--faint);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-top: 3px;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .35), 0 .5px 1.5px rgba(0, 0, 0, .15);
}
.msg-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.msg-author { font-size: 11px; font-weight: 600; color: var(--muted); }
.msg.assistant .msg-author { color: var(--accent); }

.msg-content {
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: break-word;
  max-width: 68ch;
}
.msg.assistant .msg-content { max-width: 72ch; }

/* bubbles: mine = blue on the right, others = gray on the left */
.msg.user .msg-content {
  background: var(--bubble-other);
  color: var(--bubble-other-text);
  border-radius: 18px;
  padding: 8px 14px;
  align-self: flex-start;
  max-width: min(560px, 100%);
}
.msg.user.mine { flex-direction: row-reverse; }
.msg.user.mine .avatar { display: none; }
.msg.user.mine .msg-author { display: none; }
.msg.user.mine .msg-content {
  background: var(--bubble-mine);
  color: var(--bubble-mine-text);
  align-self: flex-end;
}
.msg.user.mine .msg-content .md a { color: #fff; text-decoration: underline; }
.msg.user.mine .msg-content code { background: rgba(255, 255, 255, .22); }

/* markdown */
.md p { margin: 0 0 .6em; }
.md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { margin: .8em 0 .4em; font-size: 1.05em; }
.md h1:first-child, .md h2:first-child, .md h3:first-child { margin-top: 0; }
.md ul, .md ol { margin: .3em 0 .7em; padding-left: 1.4em; }
.md li { margin: .15em 0; }
.md code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--inset);
  border-radius: 4px;
  padding: .1em .38em;
}
.md pre {
  background: var(--code-bg);
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  padding: 11px 14px;
  overflow-x: auto;
  margin: .5em 0 .8em;
}
.md pre code { background: none; padding: 0; font-size: 12px; line-height: 1.55; }
.md table { border-collapse: collapse; margin: .5em 0 .8em; font-size: .93em; display: block; overflow-x: auto; }
.md th, .md td { border: .5px solid var(--hairline-strong); padding: 5px 11px; text-align: left; }
.md th { background: var(--inset); color: var(--text-strong); }
.md blockquote {
  margin: .5em 0; padding: 2px 14px;
  border-left: 3px solid var(--hairline-strong);
  color: var(--muted);
}
.md img { max-width: 100%; border-radius: var(--radius-sm); }
.md hr { border: none; border-top: .5px solid var(--hairline); margin: 1em 0; }

.reasoning {
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--inset);
  font-size: 12.5px;
  max-width: 680px;
}
.reasoning summary {
  cursor: default;
  padding: 5px 12px;
  color: var(--faint);
  font-size: 11.5px;
  user-select: none;
  list-style: none;
}
.reasoning summary::-webkit-details-marker { display: none; }
.reasoning-body {
  padding: 4px 12px 10px;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
  border-top: .5px solid var(--hairline);
  font-size: 12px;
  line-height: 1.6;
}

.tool-card {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--inset);
  padding: 6px 12px;
  font-size: 12px;
  overflow: hidden;
  max-width: 680px;
}
.tool-card.running { border-color: var(--accent); background: var(--accent-weak); }
.tool-card.running .tool-name::after {
  content: '…';
  animation: pulse 1.2s ease-in-out infinite;
}
.tool-card.failed { border-color: transparent; background: var(--danger-weak); }
.tool-card.failed .tool-name { color: var(--danger); }
.tool-name { font-family: var(--mono); font-weight: 600; color: var(--text); flex: none; font-size: 11.5px; }
.tool-detail {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.notice-card {
  border: .5px dashed var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 12px;
  max-width: 680px;
}

.ask-card {
  border: .5px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--shadow-pop);
  padding: 14px 16px;
  max-width: 640px;
}
.ask-card h3 { font-size: 13px; margin-bottom: 6px; }
.ask-card pre {
  background: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  overflow-x: auto;
  font-size: 12px;
  font-family: var(--mono);
}
.ask-card .risk { color: var(--warning); font-size: 12px; }
.ask-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ask-actions .input { flex: 1; min-width: 140px; width: auto; }

.jump-latest {
  position: absolute;
  right: 26px;
  bottom: calc(var(--composer-h, 96px) + 14px);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: .5px solid var(--hairline);
  background: var(--raised);
  color: var(--text);
  cursor: default;
  box-shadow: var(--shadow-pop);
  z-index: 5;
}
.jump-latest:hover { background: var(--inset); }

.task-panel {
  flex: none;
  margin: 0 max(20px, calc(50% - 430px)) 8px;
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--inset);
  padding: 8px 14px;
  max-height: 140px;
  overflow-y: auto;
}
.task-title { font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.task-list { margin: 0; padding: 0; list-style: none; }
.task-list li { display: flex; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.task-list .status {
  font-size: 11px; font-weight: 500;
  color: var(--faint); flex: none; min-width: 58px;
}
.task-list li.done .status { color: var(--success); }
.task-list li.in_progress .status { color: var(--accent); }
.task-list li.done .label { color: var(--faint); text-decoration: line-through; }

/* composer */
.composer { flex: none; padding: 0 max(20px, calc(50% - 430px)) 14px; }
.queued-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 2px;
  font-size: 12px;
  align-items: center;
}
.queued-chip {
  display: inline-flex; gap: 6px; align-items: baseline;
  background: var(--warning-weak);
  color: var(--warning);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 11.5px;
}
.composer-box {
  border: .5px solid var(--hairline-strong);
  border-radius: 16px;
  background: var(--content);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--focus-ring); }
.composer-input {
  display: block;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 11px 14px 4px;
  resize: none;
  max-height: 220px;
  outline: none;
}
.composer-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 7px;
  flex-wrap: wrap;
}
.usage { font-size: 11px; color: var(--faint); }
.send { border-radius: 99px; padding: 4px 16px; }

/* ---------- documents ---------- */

.editor-split { flex: 1; display: flex; min-height: 0; }
.editor { position: relative; flex: 1; min-width: 0; background: var(--content); }
.editor-input, .editor-mirror {
  position: absolute;
  inset: 0;
  padding: 20px max(22px, calc(50% - 430px));
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
}
.editor-input {
  border: none;
  background: transparent;
  color: var(--text);
  resize: none;
  outline: none;
  z-index: 2;
}
.editor-mirror { color: transparent; z-index: 1; pointer-events: none; }
.remote-caret {
  border-left: 2px solid var(--caret-color, var(--accent));
  margin-left: -1px;
  position: relative;
}
.remote-caret::after {
  content: attr(data-name);
  position: absolute;
  top: -1.35em;
  left: -2px;
  background: var(--caret-color, var(--accent));
  color: #fff;
  font-family: var(--font);
  font-size: 9.5px;
  padding: 0 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.editor-preview {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 26px;
  border-left: .5px solid var(--hairline);
  background: var(--content);
  font-size: 13.5px;
}

.version-panel {
  width: 290px;
  flex: none;
  border-left: .5px solid var(--hairline);
  background: var(--vibrancy);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.version-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: .5px solid var(--hairline);
}
.version-head h2 { font-size: 12.5px; }
.version-panel .list { padding: 8px; }
.version-preview {
  background: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 300px;
  overflow: auto;
  font-size: 11.5px;
  font-family: var(--mono);
  white-space: pre-wrap;
}

.presence-strip { display: flex; align-items: center; }
.presence-chip {
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--content);
  margin-left: -6px;
  box-shadow: 0 .5px 1.5px rgba(0, 0, 0, .2);
}
.presence-chip:first-child { margin-left: 0; }
.presence-chip.inline { width: 20px; height: 20px; border: none; margin: 0 2px 0 0; vertical-align: middle; }

/* ---------- file preview ---------- */

.file-preview {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--inset);
}
.file-preview img { max-width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-window); }
.pdf-frame { width: 100%; height: 100%; border: none; border-radius: var(--radius-sm); }
.file-text {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--content);
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 16px 20px;
  margin: 0;
}

.card {
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--content);
  box-shadow: 0 .5px 2px rgba(0, 0, 0, .05);
  padding: 16px;
  margin: 12px 0;
}
.card h3 { font-size: 13px; margin-bottom: 6px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.danger-card { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { min-width: 160px; flex: 1; }
.inline-form .btn { flex: none; margin-bottom: 8px; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 6px 0 12px;
}
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  padding: 6px 10px;
  border-bottom: .5px solid var(--hairline-strong);
}
.data-table td { padding: 8px 10px; border-bottom: .5px solid var(--hairline); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }

.field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.field > span { font-size: 12px; color: var(--muted); }

.tool-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-picker.scroll { max-height: 300px; overflow-y: auto; }
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: .5px solid var(--hairline-strong);
  background: var(--content);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 12px;
  user-select: none;
}
.tool-chip.is-set { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
.tool-chip input { accent-color: var(--accent); }

/* ---------- onboarding ---------- */

.onboarding { align-items: center; justify-content: center; display: flex; background: transparent; }
.onboarding-card { width: min(660px, 92%); text-align: center; }
.onboarding-card > h1 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 6px; }
.onboarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
  text-align: left;
}
.choice-card {
  border: .5px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--content-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-pop);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.choice-card h2 { font-size: 14px; }

/* ---------- empty / auth / invite ---------- */

.empty-view { align-items: center; justify-content: center; display: flex; }
.empty-card { text-align: center; }
.empty-card h1 { font-size: 30px; letter-spacing: -.02em; margin-bottom: 8px; }

.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--desktop) fixed;
  z-index: 30;
  overflow-y: auto;
  padding: 24px;
}
.auth-card {
  width: min(380px, 100%);
  background: var(--content-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border: .5px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-window);
  padding: 30px 30px 24px;
  text-align: center;
}
.auth-card .field { text-align: left; }
.auth-brand { font-size: 24px; letter-spacing: -.02em; margin-bottom: 2px; }
.auth-card .btn.block { margin-top: 14px; }
.notice {
  background: var(--accent-weak);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  padding: 8px 12px;
  margin: 10px 0;
}
.error { color: var(--danger); font-size: 12.5px; }

.invite-workspace {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  text-align: left;
}
.invite-workspace h2 { font-size: 16px; }

/* ---------- modal & toast ---------- */

/* Drop target. It sits above everything and takes no pointer events of its
   own: the window handles the drop, and an overlay that swallowed the event
   would leave the page with a permanent blue rectangle. */
.drop-overlay {
  position: fixed;
  inset: 12px;
  z-index: 60;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 24px;
}
.modal {
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--content-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border: .5px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-window);
  padding: 20px 22px;
}
.modal h2 { font-size: 14px; margin-bottom: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.toast-host {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  align-items: center;
  /* The host spans the width so a toast can centre in it, but it must not
     swallow clicks on the header underneath. */
  width: max-content;
  max-width: calc(100% - 32px);
  pointer-events: none;
}
.toast-host > * { pointer-events: auto; }
.toast {
  background: var(--content-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  color: var(--text);
  border: .5px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 9px 16px;
  font-size: 12.5px;
  animation: slide-in .2s ease;
  max-width: 340px;
}
.toast.error { color: var(--danger); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-10px); } }

/* ---------- responsive ---------- */

.sidebar-toggle { display: none; }

@media (max-width: 900px) {
  .sidebar-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    transform: translateX(-110%);
    transition: transform .18s ease;
    box-shadow: var(--shadow-window);
  }
  .sidebar.is-open { transform: none; }
  .onboarding-grid { grid-template-columns: 1fr; }
  .version-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; box-shadow: var(--shadow-window); }
  .thread, .composer { padding-left: 14px; padding-right: 14px; }
  .task-panel { margin-left: 14px; margin-right: 14px; }
  .topbar-right .ghost-select { display: none; }
}

/* ---------- diffstat & appearance settings ---------- */

.diffstat {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}
.diffstat .add { color: var(--success); }
.diffstat .del { color: var(--danger); }

.swatch-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 2px 0; }
.swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: .5px solid var(--hairline-strong);
  cursor: default;
  padding: 0;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .3);
}
.swatch.is-active { box-shadow: 0 0 0 2px var(--content), 0 0 0 4px var(--accent); }
.swatch.is-default {
  background:
    linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%),
    var(--inset);
}
.swatch-custom {
  width: 30px; height: 26px;
  padding: 0;
  border: .5px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--content);
}

.bubble-preview {
  background: var(--inset);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
}
.preview-bubble {
  background: var(--bubble-mine);
  color: var(--bubble-mine-text);
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 13.5px;
  max-width: 80%;
}

.tabs.inline-seg { margin: 2px 0 0; max-width: 220px; }

/* ---------- mascot widget ---------- */

.cam-root {
  position: fixed;
  width: var(--cam-base, 200px);
  z-index: 25;
  user-select: none;
  touch-action: none;
  /* The figure occupies the right 64%; the rest of this box is only room for
     the bubble to open into. It has no paint, but it still sat over the page
     at z-index 25 and swallowed clicks meant for what was underneath, so the
     frame takes no pointer events and the parts you can touch opt back in. */
  pointer-events: none;
}
.cam-left { transform: scaleX(-1); }
.cam-body {
  position: relative;
  /* Sized to the figure rather than the whole frame, so the press squish
     scales about the portrait's own centre and the drag target is the art. */
  width: 64%;
  margin-left: auto;
  pointer-events: auto;
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.cam-body.cam-press { transform: scaleY(.88) scaleX(1.05); }
.cam-char { position: relative; width: 100%; cursor: grab; }
.cam-char svg { display: block; width: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .2)); }
.cam-running .cam-figure { animation: cam-bob 1.3s ease-in-out infinite; }
@keyframes cam-bob { 50% { transform: translateY(-4px); } }
.cam-eye { transform-origin: center; animation: cam-blink 4.6s infinite; }
@keyframes cam-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95%, 97% { transform: scaleY(.08); }
}

.cam-bubble {
  position: absolute;
  /* These read against .cam-body, which is now the figure rather than the
     whole frame. -65% and 165% of it put the bubble's right edge exactly on
     the frame's right edge, so nothing spills off screen when the widget is
     docked in the right corner; that is the same span it had before.
     80% instead of 86% brings the bubble down far enough that its tail
     reaches the top of the head. */
  left: -65%;
  bottom: 80%;
  width: 165%;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transform-origin: 55% 100%;
  transition: opacity .18s ease, transform .24s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  z-index: 2;
}
.cam-open .cam-bubble { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.cam-bubble svg { display: block; width: 100%; }
.cam-text {
  position: absolute;
  left: 44.25%;
  top: 36%;
  width: 66%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #536ba9;
  line-height: 1.18;
  pointer-events: none;
}
.cam-left .cam-text { transform: translate(-50%, -50%) scaleX(-1); }
.cam-a { font-size: calc(var(--cam-base, 200px) * 66 / 1026); font-weight: 600; }
.cam-a.cam-wrap { font-size: calc(var(--cam-base, 200px) * 60 / 1026); word-break: break-word; }
.cam-b { font-size: calc(var(--cam-base, 200px) * 88 / 1026); font-weight: 800; color: #2c3f86; }
.cam-c { font-size: calc(var(--cam-base, 200px) * 52 / 1026); color: #9fb0d9; margin-top: 2%; }

.cam-menu-btn {
  position: absolute;
  top: 2%;
  right: 0;
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(120, 130, 160, .5);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: default;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 3;
  pointer-events: auto;   /* .cam-root takes none */
}
/* .cam-root takes no pointer events, and an ancestor of a hovered child does
   still match :hover; the sibling rule is there so the button does not depend
   on that, and the last two keep it up once the pointer is on the button. */
.cam-root:hover .cam-menu-btn,
.cam-body:hover ~ .cam-menu-btn,
.cam-menu-btn:hover,
.cam-menu-btn:focus-visible { opacity: 1; }
.cam-left .cam-menu-btn { transform: scaleX(-1); }
.cam-menu {
  position: absolute;
  bottom: 102%;
  right: 0;
  width: 190px;
  background: var(--raised);
  border: .5px solid var(--hairline-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 10px 12px;
  z-index: 4;
  color: var(--text);
  font-size: 12px;
  pointer-events: auto;   /* .cam-root takes none */
}
.cam-left .cam-menu { transform: scaleX(-1); right: auto; left: 0; }
.cam-menu-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; white-space: nowrap; }
.cam-menu-row input[type=range] { flex: 1; accent-color: var(--accent); }
.cam-menu .btn-like {
  display: block; width: 100%;
  border: none; background: var(--inset-2); color: var(--danger);
  border-radius: 6px; padding: 5px 8px; font: inherit; cursor: default;
}
.cam-menu .btn-like:hover { background: var(--danger-weak); }

.cam-img {
  display: block;
  width: 100%;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .2));
}

.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-title-row h2 { margin: 0; }
.latency-badge { margin-left: 6px; vertical-align: middle; }

/* ---------- file manager ---------- */
.fb-head { gap: 12px; }
.fb-nav { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.fb-nav .icon-btn { font-size: 16px; }
.fb-nav .icon-btn:disabled { opacity: .35; }
.fb-crumbs { display: flex; align-items: center; gap: 2px; margin-left: 6px; flex-wrap: wrap; min-width: 0; }
.crumb-sep { color: var(--faint); padding: 0 2px; }
.fb-search { width: 160px; }
.fb-body { flex: 1; overflow: auto; padding: 14px 18px; outline: none; position: relative; }
.fb-body.is-dragover { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-weak); }
.fb-grid.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.fb-grid.is-list { display: flex; flex-direction: column; gap: 1px; }
.fb-item { border-radius: var(--radius-sm); padding: 8px 6px; cursor: default; user-select: none; text-align: center; }
.fb-item:hover { background: var(--inset); }
.fb-item.is-selected { background: var(--accent-weak); box-shadow: inset 0 0 0 1.5px var(--accent); }
.fb-icon { width: 56px; height: 56px; margin: 0 auto 4px; }
.fb-icon svg { width: 100%; height: 100%; }
.fb-name { font-size: 12px; line-height: 1.3; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fb-meta { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
.fb-grid.is-list .fb-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 4px 8px; }
.fb-grid.is-list .fb-icon { width: 24px; height: 24px; margin: 0; }
.fb-grid.is-list .fb-name { -webkit-line-clamp: 1; font-size: 13px; }
.fb-empty { text-align: center; margin-top: 60px; }
.fb-status { padding: 4px 18px; border-top: .5px solid var(--hairline); }
.fb-menu {
  position: fixed; z-index: 60; min-width: 160px;
  background: var(--raised); border: .5px solid var(--hairline-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 4px;
}
.fb-menu-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font: inherit; font-size: 13px; color: var(--text); padding: 6px 10px;
  border-radius: var(--radius-sm); cursor: default;
}
.fb-menu-item:hover { background: var(--accent); color: var(--accent-text); }
.fb-menu-item.danger { color: var(--danger); }
.fb-menu-item.danger:hover { background: var(--danger); color: #fff; }

/* ---------- polish pass: brand, sidebar groups, chips, portraits, code, composer ---------- */

.brand-mark {
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 38%, transparent));
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.rail-logo { width: 30px; height: 30px; margin-bottom: 4px; }
.rail-logo svg { width: 100%; height: 100%; display: block; }

/* sidebar */
.input.search {
  padding-left: 27px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23898990' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5'/%3E%3Cpath d='M12.5 12.5 16.5 16.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 13px;
}
.list-group {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
  padding: 10px 10px 3px;
}
.list-group:first-child { padding-top: 2px; }
.list-item.conv { gap: 2px; }
.list-item .when { font-size: 10.5px; color: var(--faint); flex: none; }
.list-item.is-active .when { color: rgba(255, 255, 255, .75); }
.list-item .sub { color: var(--muted); }
.list-item.is-active { box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 40%, transparent); }

/* chat header */
.view-title { display: flex; flex-direction: column; gap: 3px; }
.view-title h1 {
  font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 4px; margin: 0 -4px;
}
.meta-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 500; line-height: 1.5;
  color: var(--muted);
  background: var(--inset);
  border: .5px solid var(--hairline);
  border-radius: 99px;
  padding: 1px 8px;
  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip.accent { color: var(--accent); background: var(--accent-weak); border-color: transparent; }
@keyframes title-flash { from { background: var(--accent-weak); } to { background: transparent; } }
.title-flash { animation: title-flash 1.8s ease-out; border-radius: 6px; }

/* messages */
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Only messages that ARRIVE animate. Rendering stored history is not an
   entrance - animating it replayed the whole thread on every open. */
.msg.is-new { animation: msg-in .24s var(--ease-out) both; }
.msg.assistant .avatar { width: 30px; height: 30px; margin-top: 1px; }
.avatar.has-portrait {
  background: var(--accent-weak);
  overflow: hidden;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 3px rgba(0, 0, 0, .15);
}
.avatar.has-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.typing { display: inline-flex; gap: 4px; padding: 9px 2px 6px; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--faint);
  animation: typing 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.code-block {
  margin: .5em 0 .8em;
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 5px 3px 12px;
  border-bottom: .5px solid var(--hairline);
  font-size: 10.5px; color: var(--faint);
  font-family: var(--mono);
}
.code-copy {
  appearance: none; border: none; background: transparent;
  color: var(--muted);
  font: inherit; font-family: var(--font); font-size: 11px;
  padding: 2px 8px; border-radius: 5px; cursor: default;
}
.code-copy:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.code-block pre { margin: 0; border: none; border-radius: 0; background: transparent; }
.msg.user.mine .code-block { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .18); }
.msg.user.mine .code-head { color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .18); }
.msg.user.mine .code-copy { color: rgba(255, 255, 255, .85); }

.reasoning summary::before { content: '▸'; color: var(--accent); display: inline-block;
  transition: transform 160ms var(--ease-out); margin-right: 5px; }
.reasoning[open] summary::before { content: '▸'; transform: rotate(90deg); }
.tool-card { padding-left: 10px; align-items: center; }
.tool-card::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); flex: none;
}
.tool-card.running::before { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.tool-card.failed::before { background: var(--danger); }

/* composer */
.composer-box {
  border-radius: 18px;
  border-color: transparent;
  box-shadow: 0 0 0 .5px var(--hairline-strong), 0 2px 12px rgba(0, 0, 0, .06);
}
.composer-box:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--accent), 0 6px 22px color-mix(in srgb, var(--accent) 18%, transparent);
}
.composer-input { padding: 12px 16px 6px; font-size: 14px; }
.composer-controls { padding: 4px 8px 8px 10px; gap: 6px; }
.ghost-select.pill {
  background: var(--inset);
  border-radius: 99px;
  padding: 3px 22px 3px 10px;
  font-size: 11.5px;
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23898990' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 11px;
}
.ghost-select.pill:hover { background-color: var(--inset-2); }
.switch { gap: 6px; }
.switch input {
  appearance: none; margin: 0;
  width: 26px; height: 15px; border-radius: 99px;
  background: var(--inset-2);
  position: relative;
  transition: background .15s ease;
  cursor: default;
}
.switch input::after {
  content: ''; position: absolute; top: 1.5px; left: 1.5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 .5px 2px rgba(0, 0, 0, .3);
  transition: transform .15s ease;
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(11px); }
.btn.send {
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn.send svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* empty view */
.empty-card { max-width: 540px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.quick-card {
  appearance: none;
  border: .5px solid var(--hairline);
  background: var(--content-translucent);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: inherit; color: var(--text);
  cursor: default;
  box-shadow: 0 .5px 2px rgba(0, 0, 0, .05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.quick-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-pop);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.quick-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-weak); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.quick-icon svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.quick-label { font-size: 12.5px; font-weight: 500; }

.auth-card { padding-top: 26px; }
.auth-mark { margin-bottom: 6px; }

@media (max-width: 700px) { .quick-grid { grid-template-columns: 1fr; } }

.thread-empty { margin: auto; text-align: center; color: var(--faint); font-size: 13px; max-width: 360px; }

/* ==========================================================================
   Live activity, tool state, disclosures
   ========================================================================== */

/* --- what the run is doing right now -------------------------------------
   An indeterminate wait has to keep moving or it reads as a hang, so the
   glyph spins on its own clock and the label shimmers. Both are `linear`:
   constant motion, no start or end to ease. */

.activity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 12.5px;
  min-height: 24px;
}

.activity-glyph {
  width: 13px; height: 13px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--activity-color, var(--accent)) 300deg,
    var(--activity-color, var(--accent)) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
  mask: radial-gradient(circle, transparent 54%, #000 56%);
  animation: activity-spin 720ms linear infinite;
}
@keyframes activity-spin { to { transform: rotate(360deg); } }

.activity-label {
  font-weight: 500;
  color: var(--activity-color, var(--accent));
  background: linear-gradient(90deg,
    var(--activity-color, var(--accent)) 0%,
    color-mix(in srgb, var(--activity-color, var(--accent)) 35%, var(--content)) 45%,
    var(--activity-color, var(--accent)) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: activity-shimmer 1.9s linear infinite;
}
@keyframes activity-shimmer { to { background-position: -220% 0; } }

.activity-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.activity[data-phase="retrying"] { --activity-color: var(--warning); }
.activity[data-phase="calling"] { --activity-color: var(--accent); }
.activity[data-phase="writing"] { --activity-color: var(--muted); }

/* --- tool cards ---------------------------------------------------------- */

.tool-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.tool-card > .tool-name,
.tool-card > .tool-time,
.tool-card > .diffstat { flex: none; }
.tool-card > .tool-args { flex: 0 1 auto; }
.tool-card > .tool-detail { flex: 1 1 auto; }
.tool-card > .tool-time { margin-left: auto; }
.tool-card::before { align-self: center; transition: background-color 160ms var(--ease-out); }
.tool-args {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-time {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

/* A running card carries a slow sheen so a slow tool never looks frozen.
   transform only - no layout, no paint. */
.tool-card.running {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-weak);
}
.tool-card.running::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: tool-sweep 1.5s linear infinite;
  pointer-events: none;
}
@keyframes tool-sweep { to { transform: translateX(100%); } }
.tool-card.running .tool-name::after { content: none; }

.notice-card.retry {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--warning);
  border-style: solid;
}

/* --- disclosure ----------------------------------------------------------
   The accordion is the one sanctioned place to animate a size: there is no
   transform equivalent for "reveal the natural height of this content". */

.disclosure {
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--content);
  box-shadow: 0 .5px 2px rgba(0, 0, 0, .05);
  margin: 10px 0;
  overflow: hidden;
}
.disclosure-head {
  appearance: none;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: default;
  text-align: left;
  flex-wrap: wrap;
  row-gap: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .disclosure-head:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
}
.disclosure-chevron {
  width: 14px; height: 14px;
  flex: none;
  color: var(--faint);
  transform: rotate(0deg);
  transition: transform 200ms var(--ease-out);
}
.disclosure-chevron svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.disclosure.is-open .disclosure-chevron { transform: rotate(90deg); }
.disclosure-title {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; flex: 1 1 140px;
  overflow: hidden;
}
.disclosure-title > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disclosure-title strong { font-size: 13px; font-weight: 600; }
.disclosure-badge {
  font-size: 10.5px;
  color: var(--muted);
  background: var(--inset);
  border-radius: 99px;
  padding: 1px 8px;
  flex: none;
}
.disclosure-aside {
  margin: 0;
  flex: 0 0 auto;
  margin-left: auto;
  gap: 6px;
}
.disclosure:not(.is-open) .disclosure-aside { display: none; }

.disclosure-region {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease-out);
}
.disclosure.is-open .disclosure-region { grid-template-rows: 1fr; }
.disclosure-inner { overflow: hidden; min-height: 0; padding: 0 14px; }
.disclosure.is-open .disclosure-inner { padding-bottom: 12px; }
.disclosure-inner .data-table { margin-top: 4px; }
.disclosure-inner .search { margin: 6px 0 2px; }

/* --- import picker -------------------------------------------------------- */

.picker-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.picker-bar .search { flex: 1; min-width: 0; }
.tool-chip.is-added { opacity: .5; }
.tool-chip { transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out); }

/* --- press feedback: the interface should feel like it heard you ---------- */

.btn, .icon-btn, .tab, .quick-card, .list-item, .fb-item, .settings-link, .rail-item {
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .icon-btn:active, .quick-card:active, .settings-link:active {
  transform: scale(0.97);
}
.btn, .icon-btn, .quick-card, .settings-link {
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.btn.send:active { transform: scale(0.93); }

/* --- reduced motion ------------------------------------------------------
   Fewer and gentler, not zero: the spinner still turns (it is the only
   signal that work is in flight) but everything decorative stops moving. */


/* ==========================================================================
   Colour discipline: one accent, quiet surfaces
   ========================================================================== */

/* Curated sets. Picking a whole set is the safe path; the single-colour
   pickers below it are the escape hatch. */
.theme-sets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.theme-set {
  appearance: none;
  border: .5px solid var(--hairline);
  background: var(--content);
  border-radius: var(--radius);
  padding: 6px 6px 7px;
  font: inherit;
  color: var(--text);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out),
              border-color 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .theme-set:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
}
.theme-set:active { transform: scale(0.97); }
.theme-set.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.theme-set-strip {
  height: 34px;
  border-radius: 7px;
  position: relative;
  border: .5px solid var(--hairline);
}
.theme-set-dot {
  position: absolute;
  left: 7px; bottom: 7px;
  width: 13px; height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75);
}
.theme-set-name { font-size: 11.5px; text-align: center; color: var(--muted); }

/* The running tool card no longer floods the thread with accent: a dot and a
   sheen carry the state, the surface stays neutral. */
.tool-card.running {
  background: var(--inset);
  border-color: var(--hairline-strong);
}
.tool-card.running::after {
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--text) 7%, transparent) 50%, transparent 100%);
}

/* The mascot bubble used to be a hardcoded navy, which clashed with every
   accent but blue and was unreadable in dark mode. */
.cam-bubble { color: color-mix(in srgb, var(--accent) 72%, #000 28%); }
.cam-b { color: color-mix(in srgb, var(--accent) 78%, #000 22%); }
.cam-c { color: var(--faint); }
:root { --cam-bubble-fill: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cam-bubble-fill: #26262b;
  }
  :root:not([data-theme="light"]) .cam-bubble { color: color-mix(in srgb, var(--accent) 70%, #fff 30%); }
  :root:not([data-theme="light"]) .cam-b { color: color-mix(in srgb, var(--accent) 55%, #fff 45%); }
}
:root[data-theme="dark"] { --cam-bubble-fill: #26262b; }
:root[data-theme="dark"] .cam-bubble { color: color-mix(in srgb, var(--accent) 70%, #fff 30%); }
:root[data-theme="dark"] .cam-b { color: color-mix(in srgb, var(--accent) 55%, #fff 45%); }

/* ==========================================================================
   New conversation page
   ========================================================================== */

.new-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px max(20px, calc(50% - 430px)) 8px;
}
.new-inner > h1 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
.new-inner > .muted { margin-bottom: 20px; }

.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

@keyframes agent-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.agent-card {
  appearance: none;
  text-align: left;
  border: .5px solid var(--hairline);
  background: var(--content);
  border-radius: var(--radius-lg);
  padding: 13px 14px 12px;
  font: inherit;
  color: var(--text);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 .5px 2px rgba(0, 0, 0, .05);
  animation: agent-in 260ms var(--ease-out) both;
  animation-delay: var(--stagger, 0ms);
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out),
              border-color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .agent-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
    border-color: color-mix(in srgb, var(--agent-accent, var(--accent)) 45%, transparent);
  }
}
.agent-card:active { transform: scale(0.985); }
.agent-card.is-active {
  border-color: var(--agent-accent, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-accent, var(--accent)) 20%, transparent);
}

.agent-card-top { display: flex; align-items: center; gap: 7px; }
.agent-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--agent-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-accent, var(--accent)) 16%, transparent);
}
.agent-name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.agent-tag {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  border: .5px solid var(--hairline-strong);
  border-radius: 99px;
  padding: 0 6px;
  margin-left: auto;
}
.agent-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agent-meta { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }


/* The pet steps aside for anything it would otherwise cover. */
.cam-root {
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
body[data-view="settings"] .cam-root,
body.modal-open .cam-root,
body.browser-open .cam-root,
body:has(#chatView:not([hidden]) .ask-card) .cam-root {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}
/* Its figure, bubble and menu opt back into pointer events (see .cam-body), so
   a faded pet still caught taps meant for what it covered, Allow included. */
body[data-view="settings"] .cam-root *,
body.modal-open .cam-root *,
body.browser-open .cam-root *,
body:has(#chatView:not([hidden]) .ask-card) .cam-root * {
  pointer-events: none;
}

/* ==========================================================================
   Command palette
   No entrance animation on purpose: it is opened by keyboard many times a
   day, and motion on a repeated keyboard action is felt only as delay.
   ========================================================================== */

.palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  z-index: 60;
}
.palette {
  width: min(560px, 100%);
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  background: var(--content-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border: .5px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}
.palette-input {
  border: none;
  border-bottom: .5px solid var(--hairline);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 14px 18px;
  outline: none;
  flex: none;
}
.palette-input::placeholder { color: var(--faint); }
.palette-list { overflow-y: auto; padding: 6px; flex: 1; min-height: 0; }
.palette-group {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 10px 3px;
}
.palette-item {
  appearance: none;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: default;
}
.palette-item.is-active { background: var(--accent); color: var(--accent-text); }
.palette-item.is-active .palette-hint { color: rgba(255, 255, 255, .8); }
.palette-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13.5px;
}
.palette-hint {
  font-size: 11px;
  color: var(--faint);
  flex: none;
  max-width: 45%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette-empty { text-align: center; padding: 26px 0; }
.palette-foot {
  flex: none;
  display: flex;
  gap: 14px;
  padding: 7px 14px;
  border-top: .5px solid var(--hairline);
  font-size: 10.5px;
  color: var(--faint);
}
kbd {
  font-family: var(--mono);
  font-size: 10px;
  border: .5px solid var(--hairline-strong);
  border-bottom-width: 1.5px;
  border-radius: 4px;
  padding: 0 4px;
  margin-right: 2px;
  background: var(--inset);
  color: var(--muted);
}

/* --- expandable tool output ---------------------------------------------
   Accordion: the one sanctioned size animation, since there is no transform
   that reveals a natural height. */

.tool-shell {
  border: .5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--inset);
  max-width: 680px;
  overflow: hidden;
}
.tool-shell .tool-card {
  border: none;
  background: transparent;
  border-radius: 0;
  max-width: none;
}
.tool-shell .tool-card.has-body { cursor: default; }
.tool-shell .tool-card.has-body::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px);
  align-self: center;
  transition: transform 180ms var(--ease-out);
  flex: none;
}
.tool-shell.is-open .tool-card.has-body::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
@media (hover: hover) and (pointer: fine) {
  .tool-shell .tool-card.has-body:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
}

.tool-region {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms var(--ease-out);
}
.tool-shell.is-open .tool-region { grid-template-rows: 1fr; }
.tool-body {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow-y: auto;
  padding: 0 12px;
}
.tool-shell.is-open .tool-body {
  padding: 9px 12px 11px;
  border-top: .5px solid var(--hairline);
}

/* --- offline banner ------------------------------------------------------ */

.offline-strip {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--content-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: .5px solid var(--hairline-strong);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  color: var(--warning);
}
.offline-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warning);
  animation: offline-pulse 1.4s linear infinite;
}
@keyframes offline-pulse { 50% { opacity: .25; } }

/* ==========================================================================
   Reduced motion, in one place
   Fewer and gentler, not zero: the signals that something is happening stay
   (a slower spinner, a dimmed sheen), everything decorative stops.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* entrances and decoration: off */
  .msg.is-new,
  .agent-card,
  .title-flash,
  .toast { animation: none; }
  .agent-card:hover,
  .quick-card:hover,
  .theme-set:hover { transform: none; }
  .btn:active, .icon-btn:active, .quick-card:active,
  .settings-link:active, .agent-card:active, .theme-set:active { transform: none; }

  /* endless indicators: kept, but slowed and de-animated where possible */
  .activity-glyph { animation-duration: 2s; }
  .activity-label {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--activity-color, var(--accent));
  }
  .tool-card.running::after { animation: none; transform: none; opacity: .4; }
  .tool-card.running .tool-name::after { animation: none; }
  .typing span { animation: none; opacity: .6; }
  .offline-dot { animation: none; }
  .cam-eye { animation: none; }
  /* the portrait's bob is switched off next to where it is defined, because
     the rule that sets it comes later in this file than this block */

  /* size and position transitions */
  .disclosure-region, .disclosure-chevron,
  .tool-region, .tool-shell .tool-card.has-body::after,
  .reasoning summary::before,
  .cam-root { transition: none; }
  .sidebar { transition: none; }

  /* press feedback becomes a colour change rather than a scale */
  .btn:active { filter: brightness(.92); }
}

.activity[data-phase="stopping"] { --activity-color: var(--warning); }
.notice-card.truncated {
  border-style: solid;
  border-color: color-mix(in srgb, var(--warning) 50%, transparent);
  color: var(--warning);
}

/* A run that has gone quiet for a while: keep it obviously alive, and warmer
   so a long wait reads as "still working", never as frozen. */
.activity.is-stalled { --activity-color: var(--warning); }
.activity.is-stalled .activity-glyph { animation-duration: 1100ms; }

/* --- per-model quota dialog + grouped model policy ----------------------- */
.quota-list { max-height: 340px; overflow-y: auto; margin: 8px 0; }
.quota-row {
  display: grid;
  grid-template-columns: 1fr 92px auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  border-bottom: .5px solid var(--hairline);
}
.quota-row:last-child { border-bottom: none; }
.quota-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quota-spent { white-space: nowrap; }
.quota-reset { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.policy-groups { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.policy-groups .disclosure { margin: 0; }

/* --- collapsible, resizable sidebar -------------------------------------- */
.sidebar { position: relative; transition: width .16s ease; }
.sidebar-resize {
  position: absolute;
  top: 0; right: -3px; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
}
.sidebar-resize:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
body.is-resizing { cursor: col-resize; user-select: none; }
body.sidebar-collapsed .sidebar { width: 0; min-width: 0; overflow: hidden; border-right: none; }
body.sidebar-collapsed .sidebar-resize { display: none; }
.sidebar-toggle { display: inline-flex; }
.rail-add svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.subtle-link { align-self: flex-start; font-size: 11.5px; color: var(--muted); }
.subtle-link:hover { color: var(--accent); }

/* ============================================================================
   CLAUDE CODE — component layer.

   Kyle asked for the Claude Code app's look copied rather than reinvented, so
   this layer follows its actual conventions instead of a system of my own:

     * hairline borders do the separating. The previous layer banned borders
       and separated with tinted grounds; that is what made every edge read
       as mushy. A card here has a 1px line and a white fill.
     * one hue, #D97757, and it is spent on the send button, the focus ring
       and the active-row marker. Nothing else is coloured.
     * flat. No element in the document body casts a shadow; only menus,
       modals and toasts float.
     * dense. 13.5px UI, 15px prose, 6-10px radii.

   Everything above this line is older and is overridden here.
   ============================================================================ */

/* --- 0. strip the old chrome ---------------------------------------------- */
.rail, .sidebar, .topbar, .view-head, .tool-card, .notice-card, .choice-card,
.chip, .tool-chip, .badge, .version-panel, .fb-status, .code-block, .toast,
.tool-shell, .settings-nav, .data-table, .data-table th, .data-table td,
.quota-row, .list-item, .fb-menu, .sidebar-resize, .tabs, .tab, .activity,
.msg-content, .task-panel, .quick-icon {
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.subtle-badge, .task-title, .list-group, .data-table th, .code-lang {
  text-transform: none;
  letter-spacing: 0;
}
body { background: var(--surface); }

/* --- 1. type -------------------------------------------------------------- */
h1, h2, h3 { letter-spacing: -0.01em; font-weight: 600; }
.small, .muted.small { font-size: var(--fs-meta); line-height: var(--lh-meta); }

/* --- 2. frame ------------------------------------------------------------- */
.rail {
  width: var(--rail-w); background: var(--ground); padding: 10px 0; gap: 6px;
  border-right: 1px solid var(--hairline);
}
.rail-logo { opacity: .55; }
.rail-item { width: 30px; height: 30px; border-radius: var(--radius-sm); opacity: .6; }
.rail-item:hover { opacity: .9; transform: none; }
.rail-item.is-active { opacity: 1; }
.rail-item.is-active::after {
  left: -10px; width: 2px; height: 16px; border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.rail-add {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px dashed var(--hairline-strong); color: var(--faint); background: transparent;
}
.rail-add:hover { background: var(--surface-sunken); color: var(--text); }

.topbar {
  height: var(--topbar-h); background: var(--surface); padding: 0 var(--s4);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.ws-name { font-size: 13.5px; font-weight: 600; }
.ws-role, .badge.subtle-badge {
  background: none; color: var(--faint); padding: 0;
  font-size: var(--fs-meta); font-weight: 400;
}
.ws-role::before { content: '· '; }

.sidebar {
  width: var(--sidebar-w); background: var(--ground);
  border-right: 1px solid var(--hairline);
}
.sidebar-panel { padding: var(--s2) var(--s2) var(--s4); gap: var(--s2); }

/* --- 3. tabs: a quiet segmented control ----------------------------------- */
.tabs {
  background: none; padding: 0; margin: var(--s3) var(--s2) var(--s1);
  gap: var(--s4); border-bottom: 1px solid var(--hairline);
}
.tab {
  flex: none; padding: 6px 0 8px; border-radius: 0; background: none;
  font-size: 13px; font-weight: 500; color: var(--faint);
  transition: color var(--t-fast) var(--ease-out);
}
.tab:hover { color: var(--text); background: none; }
.tab.is-active {
  color: var(--text); background: none;
  box-shadow: inset 0 -2px 0 var(--text);
}

/* --- 4. buttons: a line and a fill, like every control in the app --------- */
.btn {
  height: 30px; padding: 0 12px; border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--hairline-strong);
  font-size: 13px; font-weight: 500;
}
.btn:hover { background: var(--surface-sunken); }
.btn:active { background: var(--surface-sunken); filter: none; }
.btn.primary {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
.btn.primary:hover { background: var(--text-strong); border-color: var(--text-strong); }
.btn.subtle, .link-btn {
  background: none; border: none; color: var(--muted); font-size: 13px;
  padding: 0 6px; height: 28px;
}
.btn.subtle:hover, .link-btn:hover { background: var(--surface-sunken); color: var(--text); }
.btn.danger, .btn.subtle.danger { color: var(--muted); background: none; border-color: transparent; }
.btn.danger:hover, .btn.subtle.danger:hover { color: var(--danger); background: var(--surface-sunken); }
.btn.block { width: 100%; }
#newConversationBtn {
  height: 32px; justify-content: center; gap: 6px;
  background: var(--surface-raised); border: 1px solid var(--hairline-strong);
  color: var(--text); font-weight: 500;
}
#newConversationBtn:hover { background: var(--surface-sunken); }
.icon-btn { width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--muted); border: none; }
.icon-btn:hover { background: var(--surface-sunken); color: var(--text); }
.icon-btn svg { width: 15px; height: 15px; stroke-width: 1.5; }

/* --- 5. inputs ------------------------------------------------------------ */
.input, textarea.input {
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); font-size: 13px; box-shadow: none;
}
.input { height: 32px; padding: 0 10px; }
textarea.input { height: auto; padding: 8px 10px; }
.input.search { height: 30px; background: var(--surface-raised); }
.input::placeholder { color: var(--faint); }
.input:focus, textarea.input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--focus-ring); outline-offset: -1px;
}
.ghost-select, .ghost-select.pill {
  background: none; border: none; color: var(--muted); font-size: 12.5px;
  padding: 3px 6px; border-radius: var(--radius-sm);
}
.ghost-select:hover, .ghost-select.pill:hover { background: var(--surface-sunken); color: var(--text); }

/* --- 6. sidebar rows: flat text, one line each ---------------------------- */
.list { gap: 1px; }
.list-item {
  padding: 7px 9px; border-radius: var(--radius-sm); gap: 2px;
  background: none;
}
.list-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.list-item.is-active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.list-item .row { align-items: baseline; gap: 8px; }
.list-item .name {
  font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The old design filled the active row with the accent, so its text was
   white. The row is a tint now, so that white is invisible. */
.list-item.is-active .name { color: var(--text-strong); }
.list-item.is-active .sub { color: var(--muted); }
.list-item.is-active .when { color: var(--muted); }
.list-item.is-active .file-icon { color: var(--muted); }
.list-item .sub {
  font-size: 12px; color: var(--faint); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-item .when {
  font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums;
  margin-left: auto; flex: none;
}
.list-item .dot { background: var(--accent); }
.list-group {
  font-size: 11.5px; font-weight: 500; color: var(--faint);
  padding: var(--s4) 9px 4px; background: transparent;
}

/* --- 7. main area, chat header ------------------------------------------- */
.main { background: var(--surface); }
.view-head {
  height: 48px; background: var(--surface);
  /* Same measure as .thread and .composer, so the title and the Rename and
     Delete buttons stay on the column edges the messages use. */
  padding: 0 max(20px, calc(50% - var(--thread-measure) / 2));
  border-bottom: 1px solid var(--hairline);
}
.view-title h1 { font-size: 14px; font-weight: 600; line-height: 1.4; }
.meta-chips { gap: 0; }
.chip, .chip.accent {
  background: none; color: var(--faint); padding: 0; border-radius: 0;
  font-size: var(--fs-meta); font-weight: 400; max-width: 220px;
}
.chip + .chip::before { content: '·'; margin: 0 6px; color: var(--faint); }

/* --- 8. the thread: your turn is a plate, Claude's is plain prose --------- */
.thread {
  padding: var(--s6) max(20px, calc(50% - var(--thread-measure) / 2)) var(--s2);
  gap: 24px;
  line-break: strict; overflow-wrap: break-word;
}
/* Your own plate already fills this column, so the only way to widen the
   bubble is to widen the column. Claude's side keeps the narrower prose
   measure instead, since a paragraph set 1040px wide is hard to track back to
   the next line, in Chinese as much as in English. Capping .msg-body rather
   than .msg-content holds the reasoning block and the tool cards to the same
   edge as the prose. */
.msg.assistant .msg-body { max-width: var(--measure); }
.msg { gap: 10px; }
.msg-body { gap: 5px; }
/* Initials are white, and JS may paint the chip a member's own colour, so
   the fallback ground has to stay dark enough to carry them. */
.avatar { width: 22px; height: 22px; background: var(--faint); box-shadow: none; }
.msg.assistant .avatar { width: 22px; height: 22px; }
.avatar.has-portrait { box-shadow: none; }
.msg-author, .msg.assistant .msg-author { display: none; }
.msg-content { font-size: 15px; line-height: 1.7; color: var(--text); max-width: none; }
.msg.assistant .msg-content { max-width: none; }
.msg.user .msg-content {
  background: var(--bubble-mine); color: var(--bubble-mine-text);
  border-radius: var(--radius-lg); padding: 9px 13px;
  /* Full measure. A long paste in an 80% column is a tall thin ribbon,
     and fit-content still shrinks a short line to its own length. */
  max-width: 100%; width: fit-content;
  font-size: 15px; line-height: 1.65;
}
.msg.user.mine .msg-content { background: var(--bubble-mine); }
.msg.user .msg-content .md a,
.msg.user.mine .msg-content .md a { color: var(--accent-line); }
.msg.user .msg-content code,
.msg.user.mine .msg-content code { background: color-mix(in srgb, var(--text) 7%, transparent); }
/* Your own turn is a light plate now, so the code block inside it stops
   being a dark inlay with white chrome. */
.msg.user.mine .code-block {
  background: var(--surface-raised); border: 1px solid var(--hairline);
}
.msg.user.mine .code-head { color: var(--faint); border-color: var(--hairline); }
.msg.user.mine .code-copy { color: var(--muted); }

/* --- 9. reasoning: a disclosure, not a card ------------------------------ */
.reasoning { background: none; border: none; border-radius: 0; max-width: none; }
.reasoning summary { padding: 0; color: var(--faint); font-size: var(--fs-meta); }
.reasoning summary:hover { color: var(--text); }
.reasoning-body {
  background: none; padding: 6px 0 6px 12px; margin-top: 6px;
  border-top: none; border-left: 2px solid var(--hairline-strong);
  font-size: 13.5px; line-height: 1.7; color: var(--muted);
}

/* --- 10. tool card: a bordered strip, the way Claude Code shows a call ---- */
.tool-shell, .tool-card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); max-width: none;
}
.tool-card { padding: 7px 10px; gap: 8px; min-height: 22px; }
.tool-card.running, .tool-card.failed { background: var(--surface-raised); }
.tool-card::before { width: 5px; height: 5px; background: var(--muted); }
.tool-card.running::before { background: var(--accent); }
.tool-card.failed::before { background: var(--danger); }
.tool-card:not(.running):not(.failed)::before { background: var(--success); }
.tool-name { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); }
.tool-card.failed .tool-name { color: var(--danger); }
.tool-args, .tool-detail, .tool-time {
  font-size: 12px; color: var(--faint); font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.tool-body {
  background: none; margin-top: 8px; padding: 8px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 12px; line-height: 1.6; color: var(--muted); max-height: 320px;
}
.notice-card { background: none; padding: 4px 0; color: var(--muted); font-size: 13px; }

/* --- 11. activity line ---------------------------------------------------- */
.activity { background: none; padding: 0; min-height: 24px; gap: 8px; }
.activity-glyph {
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  mask: none; -webkit-mask: none; animation: none;
}
.activity-label {
  font-size: 13px; color: var(--faint); font-weight: 400;
  background: none; -webkit-text-fill-color: currentColor; animation: none;
}
.activity-time { font-size: var(--fs-meta); color: var(--faint); font-variant-numeric: tabular-nums; }
.activity.is-stalled { --activity-color: var(--muted); }

/* --- 12. composer: one bordered box, flat on the ground ------------------ */
.composer { padding: 0 max(20px, calc(50% - var(--thread-measure) / 2)) var(--s4); position: relative; }
.composer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -24px; height: 24px;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}
.composer-box {
  background: var(--surface-raised); border-radius: var(--radius-lg);
  border: 1px solid var(--hairline-strong); box-shadow: none;
}
.composer-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.composer-input { font-size: 14px; line-height: 1.6; padding: 11px 12px 0; max-height: 200px; }
.composer-controls { height: 38px; padding: 0 8px 0 10px; gap: 6px; }
.composer-controls .ghost-select { font-size: 12px; max-width: 130px; }
.usage { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.switch input:checked { background: var(--accent); }
.btn.send {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; border: none; box-shadow: none;
}
.btn.send:hover { background: var(--accent-strong); }
.btn.send:disabled { background: var(--surface-sunken); color: var(--faint); }

.card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--s4); margin: var(--s4) 0;
  box-shadow: none;
}
.card h3 { font-size: 13.5px; font-weight: 600; margin-bottom: var(--s2); }
.field > span { font-size: 12.5px; color: var(--muted); }
.data-table th {
  font-size: 11.5px; font-weight: 500; color: var(--faint);
  padding: 0 0 8px; background: none;
}
.data-table td { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: none; }
.tool-chip {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  color: var(--muted); font-size: 11.5px; border-radius: var(--radius-sm); padding: 2px 7px;
}
.tool-chip.is-set { background: var(--surface-sunken); border-color: var(--hairline-strong); color: var(--text); }
.disclosure {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); margin-bottom: var(--s2);
}

/* --- 14. markdown --------------------------------------------------------- */
.md p { margin: 0 0 12px; }
.md h1 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; }
.md h2 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
.md h3 { font-size: 14.5px; font-weight: 600; margin: 18px 0 6px; }
.md ul, .md ol { padding-left: 20px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--faint); }
.md a { color: var(--accent-line); text-decoration: underline;
        text-underline-offset: 2px; text-decoration-color: var(--hairline-strong); }
.md blockquote {
  border-left: 2px solid var(--hairline-strong); padding: 0 0 0 12px;
  color: var(--muted); background: none;
}
.md hr { border: none; border-top: 1px solid var(--hairline); width: 100%; margin: var(--s5) 0; }
.md code { background: var(--surface-sunken); border-radius: 4px; padding: 1px 5px; font-size: .88em; }
.md pre { background: none; border: none; padding: 12px 14px; border-radius: 0; }
.md table { border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.md th, .md td { border: none; border-bottom: 1px solid var(--hairline); padding: 7px 11px; }
.md tr:last-child td { border-bottom: none; }
.md th { background: var(--surface-sunken); font-size: 12px; color: var(--muted); font-weight: 500; }
.code-block {
  background: var(--surface-sunken); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.code-head {
  height: 30px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--faint);
}
.code-copy { color: var(--muted); font-size: 11.5px; }
.code-copy:hover { background: var(--surface-raised); color: var(--text); }
.katex { color: var(--text); font-size: 1.02em; }
.katex-display { margin: 16px 0; overflow-x: auto; overflow-y: hidden; }

/* --- 15. modal, toast, scrollbars ---------------------------------------- */
.modal-backdrop { background: var(--scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); padding: var(--s5);
  width: min(440px, calc(100% - 48px)); box-shadow: var(--shadow-pop);
}
.modal h2 { font-size: 15px; font-weight: 600; margin-bottom: var(--s3); }
.modal-actions { margin-top: var(--s5); gap: var(--s2); }
.toast {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 10px 14px; font-size: 13px;
  color: var(--text); box-shadow: var(--shadow-pop); max-width: 360px;
}
.toast.error { color: var(--text); }
.toast.error::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger); display: inline-block; margin-right: 8px; vertical-align: middle; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 26%, transparent); }

/* --- 16. odds and ends --------------------------------------------------- */
.auth-screen { background: var(--ground); }
.auth-card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
}
.empty-card h1 { font-size: 22px; font-weight: 600; }
.quick-card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: none;
}
.quick-card:hover { transform: none; background: var(--surface-sunken); }
.quick-icon { background: var(--surface-sunken); color: var(--muted); }
.ask-card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: none; padding: var(--s4);
}
.task-panel {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.task-title { font-size: 11.5px; color: var(--faint); }
.thread-empty { color: var(--faint); font-size: 13px; }
.jump-latest {
  background: var(--surface-raised); border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-pop); color: var(--text);
}
.presence-chip { border-color: var(--ground); }
.file-preview { background: var(--surface-sunken); }
.fb-item.is-selected { background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: none; }
.fb-menu {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-pop);
}
.fb-menu-item:hover { background: var(--surface-sunken); color: var(--text); }
.fb-menu-item.danger:hover { background: var(--surface-sunken); color: var(--danger); }

/* --- 15b. the connection block -------------------------------------------
   Every action was a same-weight text button on one cramped line, so the
   one that mattered (re-enter the key) read the same as "delete". The row
   now separates what a connection *is* from what you can do to it, and the
   destructive one is pushed to the far end. */
.disclosure {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: none;
  margin: var(--s3) 0;
}
.disclosure-head { padding: 12px 14px; gap: var(--s2); }
.disclosure-title strong { font-size: 14px; }
.disclosure-badge {
  font-size: 11.5px; background: var(--surface-sunken);
  color: var(--muted); border-radius: var(--radius-sm); padding: 2px 7px;
}
.disclosure-aside { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* The delete sits apart from the things you do every day. */
.disclosure-aside .btn.danger,
.disclosure-aside .btn.subtle.danger { margin-left: var(--s2); }
.disclosure-aside .btn { height: 28px; padding: 0 10px; font-size: 12.5px; }
.disclosure-aside .btn.primary { font-weight: 600; }
/* The endpoint line under the heading is reference, not prose. */
.disclosure .card > p.muted.small:first-child {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  margin: 0 0 var(--s3);
}
/* A connection that cannot be used says so where the eye already is. */
.notice-card.warn {
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--hairline));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-raised));
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin: 0 0 var(--s4);
}
.notice-card.warn strong { font-size: 13.5px; }
.notice-card.warn p { margin: 4px 0 0; }

/* The message avatar draws from the same portraits, in a 22px circle. The
   source is square and so is the chip, so object-position has no slack to
   take up and the framing has to come from a zoom. This one puts the top of
   the headband at the rim and keeps the chin, which the previous 1.5x
   anchored near the top did not: it cut the crop off at the mouth. Frame the
   whole head rather than the face, because at 22px the five are told apart by
   hair colour and almost nothing else. */
.avatar.has-portrait img {
  object-fit: cover;
  transform: scale(1.3);
  transform-origin: 50% 30%;
}

/* Archived threads are reachable, or archiving is just a slower delete. */
.archived-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 9px 4px; margin: 0;
  font-size: 12px; color: var(--faint); cursor: pointer;
}
.archived-toggle input { margin: 0; accent-color: var(--accent); }
.archived-toggle:hover { color: var(--text); }

/* --- 16a. the workspace switcher replaces the icon rail ------------------ */
/* The rail is gone from the markup; .rail-item survives because the invite
   card still draws one as a workspace mark. */
.rail { display: none; }
.ws-switch {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 3px 6px; margin-left: -6px; border-radius: var(--radius-sm);
  color: var(--text); font: inherit;
}
.ws-switch:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.ws-switch[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 9%, transparent); }
.ws-caret {
  width: 9px; height: 6px; flex: none; opacity: .5;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ws-menu {
  position: absolute; top: calc(var(--topbar-h) - 6px); left: 12px; z-index: 40;
  min-width: 240px; max-height: 60vh; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 4px; display: flex; flex-direction: column; gap: 1px;
}
.ws-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); text-align: left; font: inherit;
  color: var(--text);
}
.ws-menu-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.ws-menu-mark {
  width: 22px; height: 22px; flex: none; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10.5px; font-weight: 600;
}
.ws-menu-mark.is-add {
  background: none; color: var(--faint);
  border: 1px dashed var(--hairline-strong); font-size: 14px; font-weight: 400;
}
/* The private space is round; shared ones stay square. */
.ws-menu-mark.is-personal { border-radius: 50%; }
.ws-menu-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ws-menu-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-menu-item.is-active .ws-menu-name { font-weight: 600; }
.ws-menu-tick { color: var(--accent); font-size: 12px; flex: none; }
.ws-menu-add { color: var(--muted); font-size: 13px; }

/* --- 16b. a tool that produced a picture shows it ------------------------ */
.tool-media {
  margin: 0;
  padding: 8px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-sunken);
  /* A batch of four wraps rather than forcing the card to scroll. */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.tool-media img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  border-radius: var(--radius-sm);
}
.tool-media:has(img + img) img { max-height: 180px; }
.tool-media-broken,
.tool-media.is-broken {
  font-size: var(--fs-meta);
  color: var(--faint);
}
.tool-media.is-broken { padding: 10px 12px; background: none; }

/* --- 17. the desk widget -------------------------------------------------- */
.cam-b { color: var(--text-strong); font-weight: 600; }
.cam-c { color: var(--faint); }
.cam-a { color: var(--muted); }
:root { --cam-bubble-fill: var(--surface-raised); }
:root[data-theme="dark"] { --cam-bubble-fill: var(--surface-raised); }
.cam-menu {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-pop);
}
/* The portraits are opaque squares with their own painted ground, not the
   transparent cut-outs the first set were. drop-shadow traces the alpha, so
   on these it draws a rectangle: the border Kyle objected to. Crop instead.

   A circle is the obvious crop and the wrong one. Measured against the five
   files, an inscribed circle discards about 10% of the drawn detail where
   this radius discards 3.6%, and what it takes is the outer frills of the
   maid headband, the ornaments beside each ear and the collar bow: the parts
   that give each character an outline. The hair clip carrying the model's
   mark survives either shape, so it does not decide this. Three of the five
   also have a disc painted into the ground already, and a hard circular crop
   sitting inside a soft painted one reads as a mistake. */
.cam-img {
  border-radius: 26%;
  filter: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- right-click menu on the conversation rows ----------------------------
   The menu markup is shared with the file grid, so it keeps the .fb-menu
   classes. What is new: a divider that fences the destructive item off from
   the rest, and a keyboard focus state, since arrow keys walk this menu and
   the default outline reads as a stray rectangle inside a small popover. */
.ctx-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--hairline);
}
.fb-menu-item:focus-visible {
  outline: none;
  background: var(--surface-sunken);
  color: var(--text);
}
.fb-menu-item.danger:focus-visible {
  background: var(--surface-sunken);
  color: var(--danger);
}

/* Every portrait carries a pale ground, so on a dark page the widget is the
   brightest thing on screen. Take the top off it rather than ringing it:
   a light ring around an already bright tile only adds to the glare. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cam-img {
    filter: brightness(.9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] .cam-img {
  filter: brightness(.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
/* The bob and the blink above drive groups inside the SVG art, which a flat
   portrait does not have, so a running turn stopped moving the widget when
   the portraits landed. Bob the picture instead, in percent so the travel
   scales with --cam-base rather than staying 4px at every size. */
.cam-running .cam-img { animation: cam-bob-img 1.3s ease-in-out infinite; }
@keyframes cam-bob-img { 50% { transform: translateY(-3.5%); } }
@media (prefers-reduced-motion: reduce) {
  .cam-running .cam-img { animation: none; }
}

/* ---------------------------------------------------------------------
   Per-message actions: copy, fork, retry, and the version switcher.

   The row sits under the message and is invisible until the message is
   hovered or something inside it takes focus - :focus-within is what makes
   the keyboard path work without a second, always-visible copy of the row.
   No border and no accent fill here: the two ledgers at the top of this
   file are closed, so these read as ground and ink only.
   --------------------------------------------------------------------- */

.msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  opacity: 0;
  transition: opacity .12s var(--ease-out);
}
.msg:hover .msg-actions,
.msg:focus-within .msg-actions { opacity: 1; }
/* Your own turn hangs on the right, so its row does too. */
.msg.user.mine .msg-actions { justify-content: flex-end; }

.msg-action,
.turn-version-step {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--faint);
  width: 26px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.turn-version-step svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg-action:hover,
.turn-version-step:hover:not(:disabled) {
  background: var(--inset-2);
  color: var(--text);
}
.msg-action:focus-visible,
.turn-version-step:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px var(--focus-ring);
}
/* The copy button confirms in place as well as in the toast, because the
   toast is at the other end of the window from the thumb that pressed it. */
.msg-action.is-done { color: var(--success); }
.turn-version-step:disabled { opacity: .3; pointer-events: none; }

.turn-versions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 4px;
}
.turn-version-count {
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 2px;
}

/* Somebody else retried or switched the answer that was on screen. The row
   stays until the next render, so nobody is left wondering why the text
   they were reading is different text. */
.turn-notice {
  align-self: center;
  max-width: var(--measure, 68ch);
  margin: 2px auto 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* A touch screen has no hover, so there the row is simply always there. */
@media (hover: none) {
  .msg-actions { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-actions { transition: none; }
}


/* ==========================================================================
   Claude Code pass (2026-09-06). Geometry and greys read off a screenshot
   of the desktop app; see docs/UI-REFERENCE.md for what was measured and
   what was estimated. Three columns and no global top bar: the sidebar's
   first row and the main pane's header row are the title bar.
   ========================================================================== */

:root { --sidebar-w: 300px; --taskbar-w: 380px; --topbar-h: 48px; }

.frame { flex-direction: row; }
.shell { flex: 1; position: relative; }

/* --- sidebar --------------------------------------------------------------- */

.sidebar {
  background: var(--ground);
  border-right: 1px solid var(--hairline);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sidebar-top {
  height: var(--topbar-h);
  flex: none;
  display: flex; align-items: center; gap: 2px;
  padding: 0 8px;
}
.sidebar-toggle { display: inline-flex; }
.side-nav { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 0 8px 6px; }
.nav-row {
  appearance: none; border: none; background: transparent;
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 30px; padding: 0 8px;
  border-radius: 6px;
  color: var(--text); font: inherit; font-size: 13.5px; text-align: left;
  cursor: default;
  box-shadow: none;
}
.nav-row svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--muted);
}
.nav-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.nav-row.is-active { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text-strong); }
.nav-row.is-active svg, .nav-row.primary svg { color: var(--text); }
.nav-row.primary { color: var(--text-strong); }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-panel { padding: 0 8px; gap: 2px; position: relative; }
.side-section {
  display: flex; align-items: center; gap: 2px;
  padding: 10px 2px 2px 8px;
  flex: none;
}
.side-section .ws-switch {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  margin-left: -6px; padding: 2px 6px;
}
.side-section .ws-switch:hover { color: var(--text); }
.side-section-title { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.side-section .icon-btn { width: 24px; height: 22px; color: var(--faint); }
.side-section .icon-btn svg { width: 14px; height: 14px; }
.side-section .icon-btn:hover { color: var(--text); }
.ws-role { display: none; }
.ws-menu { top: auto; left: 8px; right: 8px; margin-top: 2px; }
.sidebar-panel .input.search { flex: none; height: 28px; font-size: 13px; margin: 2px 0 4px; }
.archived-toggle { padding: 0 8px; }

.list-group {
  font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none;
  color: var(--faint); padding: 8px 8px 2px;
}
.list-item.conv {
  flex-direction: row; align-items: center; gap: 8px;
  height: 30px; padding: 0 8px; border-radius: 6px;
}
.list-item.conv::before {
  content: ''; width: 7px; height: 7px; flex: none; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--faint);
}
.list-item.conv .row { flex: 1; min-width: 0; gap: 8px; }
.list-item.conv .name { font-size: 13.5px; font-weight: 400; color: var(--text); }
.list-item.conv .sub, .list-item.conv .when { display: none; }
.list-item.conv .dot { width: 6px; height: 6px; background: var(--text); }
.list-item.conv:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.list-item.conv.is-active { background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: none; }
.list-item.conv.is-active .name { color: var(--text-strong); }
.list-item.conv.is-active::before { background: var(--accent); border-color: var(--accent); }

.sidebar-foot {
  margin-top: auto; flex: none; position: relative;
  display: flex; align-items: center; gap: 4px;
  padding: 8px; border-top: 1px solid var(--hairline);
}
.user-row {
  appearance: none; border: none; background: none;
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; padding: 4px 6px; border-radius: 6px;
  font: inherit; color: var(--text); cursor: default;
}
.user-row:hover, .user-row[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 6%, transparent); }
.user-avatar {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--hairline-strong);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-name { font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .presence-strip { flex: none; }
.user-menu {
  position: absolute; left: 8px; bottom: calc(100% - 2px); z-index: 40;
  min-width: 220px;
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 4px; display: flex; flex-direction: column; gap: 1px;
}
.menu-item {
  appearance: none; border: none; background: none;
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border-radius: var(--radius-sm);
  text-align: left; font: inherit; font-size: 13px; color: var(--text); cursor: default;
}
.menu-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.menu-item.danger { color: var(--danger); }
.menu-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 10px; font-size: 12.5px; color: var(--muted);
}
.menu-field .ghost-select { max-width: none; font-size: 12.5px; color: var(--text); }

/* --- main pane ------------------------------------------------------------- */

.main { background: var(--surface); }
.view-head {
  height: var(--topbar-h); padding: 0 16px 0 20px;
  border-bottom: none; background: var(--surface);
}
#chatView .view-head { padding: 0 16px 0 20px; }
.view-title { flex-direction: row; align-items: center; gap: 8px; }
.view-title h1 { font-size: 14px; font-weight: 500; padding: 0; margin: 0; }
.title-icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ws-pill {
  font-size: 11.5px; color: var(--muted);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 5px; padding: 1px 7px; white-space: nowrap;
}
.ws-pill:empty { display: none; }
#conversationMeta { display: none; }
.view-actions .icon-btn { width: 28px; height: 26px; }

.thread { padding: 20px max(24px, calc(50% - 430px)) 12px; gap: 14px; }
.composer { padding: 0 max(24px, calc(50% - 430px)) 14px; }

.msg .avatar { display: none; }
.msg-author { display: none; }
.msg.user:not(.mine) .msg-author { display: block; font-size: 12px; margin-bottom: -2px; }
.msg-content, .msg.assistant .msg-content { font-size: 14.5px; line-height: 1.65; max-width: none; }
.msg.user.mine { flex-direction: row; }
.msg.user.mine .msg-content {
  background: var(--bubble-mine); border-radius: 10px;
  padding: 10px 14px; max-width: 100%; align-self: stretch;
}
.md h1, .md h2, .md h3 { color: var(--text-strong); font-weight: 700; font-size: 1.04em; margin: 1em 0 .45em; }
.md pre { background: var(--code-bg); border: none; border-radius: 8px; padding: 12px 16px; }
.code-block { position: relative; background: var(--code-bg); border: none; border-radius: 8px; }
.code-block pre { padding: 12px 40px 12px 16px; }
.code-head {
  position: absolute; top: 6px; right: 6px;
  padding: 0; border: none; background: transparent;
}
.code-lang { display: none; }
.code-copy {
  font-size: 11px; padding: 3px 7px; border-radius: 5px;
  color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent);
}
.tool-card { border: none; background: var(--surface-raised); border-radius: 8px; max-width: none; padding: 7px 12px 7px 10px; }
.reasoning { border: none; background: var(--surface-raised); max-width: none; }
.notice-card { max-width: none; }

/* --- composer -------------------------------------------------------------- */

.composer-box {
  display: flex; align-items: flex-end;
  border: 1px solid var(--hairline-strong); border-radius: 10px;
  background: var(--surface); box-shadow: none;
}
.composer-box:focus-within {
  border-color: color-mix(in srgb, var(--text) 32%, transparent);
  box-shadow: none;
}
.composer-input { padding: 12px 14px; font-size: 14px; min-height: 44px; line-height: 1.45; }
.send-key {
  appearance: none; border: none; background: transparent;
  width: 30px; height: 30px; margin: 7px 7px 7px 0; flex: none;
  border-radius: 6px; color: var(--muted); cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
}
.send-key svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.send-key:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.composer-controls { padding: 7px 2px 0; gap: 14px; min-height: 30px; flex-wrap: wrap; }
.composer-controls .ghost-select.pill {
  background-color: transparent; padding: 2px 16px 2px 2px;
  font-size: 12.5px; color: var(--muted); border-radius: 4px;
  background-position: right 3px center;
}
.composer-controls .ghost-select.pill:hover { background-color: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.composer-controls .switch { font-size: 12.5px; color: var(--muted); }
.usage { font-size: 12px; color: var(--faint); }
.queued-strip { padding: 6px 0; }

/* --- background tasks column --------------------------------------------- */

.taskbar {
  width: var(--taskbar-w); flex: none;
  border-left: 1px solid var(--hairline);
  background: var(--ground);
  display: flex; flex-direction: column; min-height: 0;
}
.taskbar-head {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 16px;
}
.taskbar-head h2 { font-size: 14px; font-weight: 600; flex: 1; }
.taskbar-body {
  flex: 1; overflow-y: auto;
  padding: 2px 12px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.taskbar-label { font-size: 12.5px; color: var(--muted); padding: 2px 4px 0; }
.task-card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 10px 12px; margin: 0; max-height: none;
  display: flex; flex-direction: column; gap: 4px;
}
.task-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-card-head strong { font-size: 13.5px; font-weight: 600; color: var(--text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-card .btn.subtle { color: var(--muted); padding: 2px 8px; font-size: 12px; flex: none; }
.task-card .btn.subtle:hover { color: var(--danger); background: var(--danger-weak); }
.task-card .badge.live { align-self: flex-start; }
.task-title { font-size: 13.5px; font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; margin: 0 0 2px; }
.task-list li { font-size: 13px; padding: 3px 0; }
.task-list .status { min-width: 52px; }
@media (max-width: 1180px) {
  .taskbar { position: absolute; right: 0; top: 0; bottom: 0; z-index: 15; box-shadow: var(--shadow-window); }
}

/* --- shared browser ----------------------------------------------------- */

/* A floating glass window over the conversation, not a column beside it: the
   thread keeps its width, and the window moves and resizes. Script places it
   (left/top/width/height); these are the fallbacks before it does. */
.browser-pane {
  position: fixed; z-index: 30;
  left: calc(100vw - 784px); top: 64px; width: 760px; height: 533px;
  min-width: 360px; min-height: 260px;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 28px 70px rgba(0, 0, 0, .30),
    0 4px 14px rgba(0, 0, 0, .14);
  transform-origin: top right;
  transition:
    opacity 180ms var(--ease-out), transform 240ms var(--ease-out), filter 240ms var(--ease-out),
    left 240ms var(--ease-out), top 240ms var(--ease-out),
    width 240ms var(--ease-out), height 240ms var(--ease-out);
}
/* Arriving and leaving take the same path: a slight scale and blur, so the
   glass reads as a material settling in rather than a plain fade. */
.browser-pane.is-away { opacity: 0; transform: scale(.96) translateY(-6px); filter: blur(6px); }
/* Moving and resizing follow the pointer 1:1, with nothing easing behind it. */
.browser-pane.is-moving { transition: none; user-select: none; -webkit-user-select: none; }
body.browser-expanded .browser-pane {
  left: 16px !important; top: 16px !important;
  width: calc(100vw - 32px) !important; height: calc(100vh - 32px) !important;
}
.browser-head {
  height: 44px; flex: none;
  display: flex; align-items: center; gap: 2px;
  padding: 0 8px;
  cursor: grab; touch-action: none;
}
.browser-pane.is-moving .browser-head { cursor: grabbing; }
.browser-head button, .browser-head input, .browser-head select { cursor: pointer; }
.browser-head .browser-url { cursor: text; }
body.browser-expanded .browser-head { cursor: default; }
/* The address bar is centred and capped, so the title bar keeps room to grab
   on either side; the grip guarantees a handle even in a narrow window. */
.browser-url-form { flex: 0 1 560px; min-width: 0; margin: 0 auto; padding: 0 6px; }
.browser-grip {
  flex: none; width: 14px; height: 24px; margin-right: 4px;
  background: radial-gradient(circle, var(--faint) 1.2px, transparent 1.6px) 0 0 / 7px 6px;
  opacity: .7;
}
.browser-head:hover .browser-grip { opacity: 1; }
body.browser-expanded .browser-grip { visibility: hidden; }
.browser-url {
  width: 100%; height: 28px; border-radius: 7px;
  border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-sunken) 70%, transparent);
  color: var(--text); padding: 0 10px; font-size: 12.5px;
}
.browser-url:focus { outline: none; border-color: var(--accent-line); }
.browser-tabs { max-width: 150px; font-size: 12px; }
.browser-driving {
  display: flex; align-items: center; gap: 8px; flex: none;
  margin: 0 10px 8px; padding: 6px 8px 6px 10px; border-radius: 8px;
  background: var(--accent-weak); color: var(--text); font-size: 12.5px;
}
.browser-driving span:nth-child(2) { flex: 1; }
.browser-challenge {
  flex: none; margin: 0 10px 8px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--accent-line); background: var(--accent-weak);
  color: var(--text-strong); font-size: 12.5px;
}
.browser-download {
  display: flex; align-items: center; gap: 8px; flex: none;
  margin: 0 10px 8px; padding: 4px 4px 4px 10px; border-radius: 8px;
  border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-sunken) 80%, transparent);
  color: var(--text); font-size: 12.5px;
}
.browser-download[hidden] { display: none; }
.browser-download-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.browser-download .btn.subtle { flex: none; padding: 3px 10px; font-size: 12px; }
.browser-download .icon-btn { flex: none; width: 26px; height: 26px; }
.browser-driving-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: browser-pulse 1.4s ease-in-out infinite;
}
@keyframes browser-pulse { 50% { opacity: 0.35; } }
.browser-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0 10px 10px; outline: none;
}
.browser-frame {
  /* min-width 0: as a flex item an image would otherwise refuse to shrink
     below its natural 1280 px and push the whole shell wider than the window. */
  display: block; width: 100%; height: auto; min-width: 0;
  max-height: 100%; aspect-ratio: 1280 / 800; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--hairline); background: #fff;
  user-select: none; -webkit-user-select: none;
}
.browser-stage:focus-within .browser-frame { border-color: var(--accent-line); }
/* Keystrokes (and IME composition, for Chinese) land in this invisible field. */
.browser-keys {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; border: 0; padding: 0; resize: none; pointer-events: none;
}
.browser-empty { position: absolute; top: 40%; left: 0; right: 0; text-align: center; padding: 0 24px; }
.browser-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; touch-action: none;
  background:
    linear-gradient(135deg, transparent 55%, var(--faint) 55%, var(--faint) 62%, transparent 62%,
                    transparent 72%, var(--faint) 72%, var(--faint) 79%, transparent 79%);
  opacity: .6;
}
.browser-resize:hover { opacity: 1; }
body.browser-expanded .browser-resize { display: none; }
@media (max-width: 700px) {
  /* A phone has no room to float a window: it fills the screen instead. */
  .browser-pane {
    left: 8px !important; top: 8px !important;
    width: calc(100vw - 16px) !important; height: calc(100dvh - 16px) !important;
    min-width: 0;
  }
  .browser-head { cursor: default; }
  .browser-grip, .browser-resize { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .browser-pane { transition: opacity 150ms linear; }
  .browser-pane.is-away { transform: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .browser-pane { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .browser-pane { background: var(--surface); border-color: var(--hairline-strong); }
}

/* timed checks in the tasks column */
.schedule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.schedule-item { display: flex; flex-direction: column; gap: 2px; }
.schedule-item + .schedule-item { border-top: 1px solid var(--hairline); padding-top: 10px; }
.schedule-item strong { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.schedule-item.is-paused strong { color: var(--muted); }
.schedule-error { color: var(--danger); overflow-wrap: anywhere; }
.schedule-actions { display: flex; gap: 4px; margin-top: 4px; }
.schedule-actions .btn.subtle { padding: 2px 8px; font-size: 12px; color: var(--muted); }
.schedule-actions .btn.subtle.danger:hover { color: var(--danger); background: var(--danger-weak); }

/* --- approval card --------------------------------------------------------- */

.ask-card {
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 10px; box-shadow: none; padding: 16px 18px; max-width: none;
}
.ask-card h3 { font-size: 14.5px; font-weight: 600; color: var(--text-strong); margin-bottom: 8px; }
.ask-card > p { color: var(--muted); font-size: 13.5px; }
/* What is being approved wraps: a timed check's prompt is one long line, and a
   person on a phone has to read all of it before saying yes. */
.ask-card pre {
  background: var(--code-bg); border-radius: 8px; padding: 12px 14px; font-size: 12.5px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ask-actions { margin-top: 14px; }
.ask-actions.approval { justify-content: space-between; }
.ask-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.ask-actions .btn.reject { background: transparent; border-color: transparent; color: var(--text); box-shadow: none; }
.ask-actions .btn.reject:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.ask-actions .btn.approve { background: var(--text-strong); color: var(--surface); border-color: transparent; }
.ask-actions .btn.approve:hover { background: var(--text-strong); filter: brightness(.92); }
kbd.key {
  font: inherit; font-size: 11px; line-height: 16px; min-width: 18px;
  text-align: center; padding: 0 5px;
  color: var(--muted); border: 1px solid var(--hairline-strong); border-radius: 4px;
  background: transparent;
}
.btn.approve kbd.key { color: var(--surface); border-color: color-mix(in srgb, var(--surface) 40%, transparent); }

/* The thread takes focus so keys can scroll it; a ring around the whole
   transcript after a click is not what that focus is for. */
.thread:focus, .thread:focus-visible { outline: none; }

/* The mascot is placed by hand and remembered, so it is not moved when the
   column opens; the column paints over it instead. A pet behind a panel is
   fine, a pet on top of the plan is not. */
.taskbar { position: relative; z-index: 26; }

/* --- a sub-agent working, inside the card that spawned it --------------- */

.subagent-panel {
  border-top: .5px solid var(--hairline);
  margin-top: 6px;
  padding: 8px 2px 2px;
  display: flex; flex-direction: column; gap: 6px;
}
.subagent-head { display: flex; align-items: center; gap: 8px; }
.subagent-title { font-size: 12px; font-weight: 600; color: var(--text-strong); }
.subagent-open {
  margin-left: auto; font-size: 11.5px; color: var(--accent);
  border-bottom: .5px solid transparent;
}
.subagent-open:hover { border-bottom-color: currentColor; }
.subagent-steps { display: flex; flex-direction: column; gap: 3px; }
.subagent-step {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11.5px; min-width: 0;
}
.subagent-step-name { font-family: var(--mono); color: var(--text); flex: none; }
.subagent-step-detail {
  color: var(--faint); font-family: var(--mono); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subagent-step.failed .subagent-step-name { color: var(--danger); }
.subagent-panel.is-done .subagent-steps { color: var(--muted); }

/* --- avatar --------------------------------------------------------------- */

.avatar-field { display: flex; align-items: center; gap: 14px; }
.avatar-preview {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  color: #fff; font-size: 18px; font-weight: 600;
}
.avatar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Every round node that can hold a face crops it the same way. */
.avatar-preview img, .presence-chip img, .user-avatar img, .avatar.has-portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.presence-chip.has-portrait, .user-avatar.has-portrait { overflow: hidden; padding: 0; }

.user-cell { display: flex; align-items: center; gap: 9px; }
.user-cell .presence-chip.inline { flex: none; }