/* Computer — design system.
   Concept: Linear's workshop with Perplexity's answer page. A flat, hairline-ruled shell with dense
   lists and small type (Linear); one turquoise accent, a big centred ask box and question-as-title
   threads with source chips (Perplexity). Amber only when work is in progress. Hanken Grotesk for the
   interface, Newsreader for headlines, JetBrains Mono for code and terminal output. */

@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  --bg: #fbfbfa;                       /* paper */
  --side: #f4f4f2;
  --field-a: transparent; --field-b: transparent; --field-c: transparent;
  --glass: #ffffff;                    /* surfaces are flat; the names are kept so every view inherits the look */
  --glass-strong: #ffffff;
  --glass-solid: #ffffff;
  --hi: transparent;
  --line: rgba(24, 24, 20, .09);
  --line-2: rgba(24, 24, 20, .16);
  --ink: #1c1d1f;
  --ink-2: #4a4d54;
  --muted: #777b85;
  --accent: #0a8296;                   /* turquoise */
  --accent-ink: #ffffff;
  --accent-soft: rgba(10, 130, 150, .10);
  --busy: #a87400;
  --busy-dot: #d99a00;
  --ok: #16804f;
  --bad: #c2412d;
  --hover: rgba(24, 24, 20, .045);
  --press: rgba(24, 24, 20, .08);
  --screen: #0e1013;
  --screen-ink: #c9d2de;
  --shadow-1: 0 1px 1px rgba(24, 24, 20, .04);
  --shadow-2: 0 1px 2px rgba(24, 24, 20, .05), 0 6px 16px -6px rgba(24, 24, 20, .10);
  --shadow-3: 0 2px 4px rgba(24, 24, 20, .05), 0 18px 44px -14px rgba(24, 24, 20, .22);
  --blur: none;
  --r-xl: 14px; --r-l: 12px; --r-m: 9px; --r-s: 7px; --r-xs: 5px;
  --ui: "Hanken Grotesk", ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --read: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-xs: 12px; --t-s: 13px; --t-m: 14px; --t-l: 16px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 44px;
  --dur-1: 100ms; --dur-2: 160ms; --dur-3: 260ms;
  --out: cubic-bezier(.2, .8, .2, 1);
  --in: cubic-bezier(.4, 0, 1, 1);
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-other: #9aa3b2;
  --cm-kw: #6d3fd8; --cm-str: #0d7a46; --cm-num: #a35a00; --cm-def: #2350d6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --bg: #0e0f11; --side: #0b0c0e;
    --glass: #131417; --glass-strong: #17181c; --glass-solid: #131417; --hi: rgba(255, 255, 255, .03);
    --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13);
    --ink: #ececef; --ink-2: #b3b6bd; --muted: #7f838d; --accent: #2cc3d6; --accent-ink: #031a1f; --accent-soft: rgba(44, 195, 214, .13);
    --busy: #f0b429; --busy-dot: #f0b429; --ok: #4cc38a; --bad: #ff7a66; --hover: rgba(255, 255, 255, .045); --press: rgba(255, 255, 255, .08);
    --screen: #08090b;
    --shadow-1: 0 1px 1px rgba(0, 0, 0, .3); --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .5);
    --shadow-3: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px -16px rgba(0, 0, 0, .7);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-other: #5d6676;
    --cm-kw: #c4a7ff; --cm-str: #7ee2a8; --cm-num: #f0b429; --cm-def: #8fb0ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0f11; --side: #0b0c0e;
  --glass: #131417; --glass-strong: #17181c; --glass-solid: #131417; --hi: rgba(255, 255, 255, .03);
  --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13);
  --ink: #ececef; --ink-2: #b3b6bd; --muted: #7f838d; --accent: #2cc3d6; --accent-ink: #031a1f; --accent-soft: rgba(44, 195, 214, .13);
  --busy: #f0b429; --busy-dot: #f0b429; --ok: #4cc38a; --bad: #ff7a66; --hover: rgba(255, 255, 255, .045); --press: rgba(255, 255, 255, .08);
  --screen: #08090b;
  --shadow-1: 0 1px 1px rgba(0, 0, 0, .3); --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .5);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px -16px rgba(0, 0, 0, .7);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-other: #5d6676;
  --cm-kw: #c4a7ff; --cm-str: #7ee2a8; --cm-num: #f0b429; --cm-def: #8fb0ff;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(60vw 50vh at 8% -6%, var(--field-a), transparent 70%),
    radial-gradient(48vw 44vh at 104% 108%, var(--field-b), transparent 70%),
    radial-gradient(40vw 40vh at 70% 20%, var(--field-c), transparent 70%);
  background-attachment: fixed;
  color: var(--ink); font: 400 var(--t-m)/1.55 var(--ui); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }

/* glass surface */
.glass {
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi), var(--shadow-2);
}
.glass-strong {
  background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi), var(--shadow-2);
}

/* ---------------------------------------------------------------- shell */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: 100vh; height: 100dvh; padding: 10px; gap: 10px; }
.sidebar { display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-xl); padding: 12px 10px 10px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; font-weight: 650; font-size: 16px; letter-spacing: -.015em; }
.mark { width: 26px; height: 26px; border-radius: 8px; background: #172030; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.2); position: relative; flex: none; }
.mark::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
body.busy .mark::after { background: var(--busy-dot); box-shadow: 0 0 10px var(--busy-dot); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
.new-btn { display: flex; align-items: center; gap: 9px; margin: 0 2px 12px; padding: 9px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--glass-strong); font-weight: 560; box-shadow: var(--shadow-1); transition: border-color var(--dur-2) var(--out), transform var(--dur-1) var(--out); }
.new-btn:hover { border-color: var(--line-2); }
.new-btn:active { transform: scale(.985); }
.new-btn kbd { margin-left: auto; }
kbd { font: 500 11px var(--ui); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-label { font-size: var(--t-xs); color: var(--muted); padding: 14px 10px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-s); color: var(--ink-2); font-size: 14.5px; transition: background var(--dur-2) var(--out), color var(--dur-2) var(--out); position: relative; }
.nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-1), inset 0 1px 0 var(--hi); }
.nav a .count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav a .count.live { color: var(--busy); }
.recent { flex: 1; min-height: 0; overflow-y: auto; margin-top: 2px; scrollbar-width: thin; }
.recent a { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--r-s); color: var(--ink-2); font-size: 14px; }
.recent a:hover { background: var(--hover); text-decoration: none; }
.recent a[aria-current="page"] { background: var(--hover); color: var(--ink); }
.side-foot { display: flex; align-items: center; gap: 4px; padding: 10px 4px 0; border-top: 1px solid var(--line); margin-top: 6px; }
.engine-pill { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--r-s); font-size: 13px; color: var(--ink-2); border: 0; background: none; text-align: left; }
.engine-pill:hover { background: var(--hover); }
main { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; position: relative; }

.icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--r-s); color: var(--ink-2); transition: background var(--dur-2) var(--out), color var(--dur-2) var(--out); flex: none; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { background: var(--press); }

/* status lights */
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.led.running, .led.queued { background: var(--busy-dot); box-shadow: 0 0 8px var(--busy-dot); animation: breathe 1.4s ease-in-out infinite; }
.led.waiting { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: breathe 1s ease-in-out infinite; }
.led.done, .led.on { background: var(--ok); }
.led.error { background: var(--bad); }
.led.stopped { background: var(--muted); }

/* ---------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--glass-strong); font-weight: 560; font-size: 14px; color: var(--ink); white-space: nowrap; transition: background var(--dur-2) var(--out), border-color var(--dur-2) var(--out), transform var(--dur-1) var(--out), opacity var(--dur-2); }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { opacity: .9; }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.field { width: 100%; min-height: 38px; padding: 8px 11px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--glass-strong); outline: none; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field { resize: vertical; min-height: 90px; line-height: 1.5; }
textarea.code { font: 13px/1.55 var(--mono); min-height: 280px; }
select.field { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
label.lbl { display: block; font-size: 13.5px; font-weight: 560; margin: 0 0 6px; color: var(--ink); }
.help { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.form { display: grid; gap: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; cursor: pointer; transition: background var(--dur-2) var(--out); }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--dur-2) var(--out); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-m); background: var(--hover); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: var(--r-s); font-size: 13.5px; color: var(--ink-2); font-weight: 520; transition: background var(--dur-2) var(--out), color var(--dur-2); white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-1); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
button.chip:hover { border-color: var(--line-2); color: var(--ink); background: var(--hover); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 560; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge.err { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.badge.busy { background: color-mix(in srgb, var(--busy-dot) 16%, transparent); color: var(--busy); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.engine-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }

/* ---------------------------------------------------------------- page scaffolding */
.page { flex: 1; overflow-y: auto; padding: 34px clamp(18px, 4vw, 56px) 80px; scrollbar-gutter: stable; }
.page-inner { max-width: 1040px; margin: 0 auto; }
.page-inner.narrow { max-width: 760px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--t-2xl); font-weight: 620; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); max-width: 62ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }
.panel { border-radius: var(--r-l); padding: 18px 20px; margin-bottom: 14px; }
.panel h2 { font-size: var(--t-l); font-weight: 620; margin: 0 0 4px; letter-spacing: -.01em; }
.panel > p.sub { margin: 0 0 14px; color: var(--muted); font-size: var(--t-s); }
.list-row { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.list-row .title { font-weight: 560; }
.list-row .desc { color: var(--ink-2); font-size: var(--t-s); }
.list-row .meta { color: var(--muted); font-size: var(--t-xs); }
.empty { text-align: center; color: var(--muted); padding: 34px 16px; }
.empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.mobile-only { display: none !important; }
.topbar { display: none; }

/* ---------------------------------------------------------------- home / Linear workspace */
.home { flex: 1; overflow-y: auto; padding: 0 clamp(16px, 3vw, 40px) 60px; scrollbar-gutter: stable; }
.hero { max-width: 780px; margin: 0 auto; padding: 9vh 0 34px; }
.hero h1 { font-size: var(--t-3xl); font-weight: 560; letter-spacing: -.035em; line-height: 1.06; margin: 0 0 22px; }
.composer { border-radius: var(--r-l); padding: 14px 14px 10px 18px; transition: box-shadow var(--dur-3) var(--out), border-color var(--dur-2); view-transition-name: composer; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 4px var(--accent-soft), var(--shadow-3); }
.composer textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; min-height: 56px; max-height: 280px; font-size: 17px; line-height: 1.5; padding: 2px 0; }
.composer textarea::placeholder { color: var(--muted); }
.composer-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.composer-bar .spacer { flex: 1; }
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-list:not(:empty) { margin-bottom: 8px; }
.attach-list span { font-size: 13px; background: var(--hover); border-radius: 6px; padding: 3px 8px; }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 13px; color: var(--ink-2); transition: background var(--dur-2), border-color var(--dur-2); }
.menu-btn:hover { background: var(--hover); border-color: var(--line-2); color: var(--ink); }
.send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-1) var(--out), opacity var(--dur-2); flex: none; }
.send:active { transform: scale(.94); }
.send:disabled { opacity: .25; cursor: default; }
.send.stop { background: var(--bad); color: #fff; }
.send .icon { width: 18px; height: 18px; stroke-width: 2; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.suggest .chip { max-width: 100%; }

.menu { position: absolute; z-index: 40; min-width: 240px; border-radius: var(--r-m); padding: 5px; animation: pop var(--dur-2) var(--out); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--r-s); text-align: left; font-size: 14px; }
.menu button:hover, .menu button:focus-visible { background: var(--hover); outline: none; }
.menu button[aria-checked="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: auto; }
.menu button:disabled { opacity: .5; cursor: default; }
.menu .menu-sub { font-size: 12.5px; color: var(--muted); display: block; line-height: 1.35; margin-top: 1px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.ws { max-width: 1240px; margin: 0 auto; }
.ws-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.ws-head h2 { font-size: var(--t-xl); font-weight: 620; letter-spacing: -.02em; margin: 0 8px 0 0; display: flex; align-items: center; gap: 10px; }
.ws-head .tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.col { border-radius: var(--r-l); padding: 10px; min-height: 120px; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; font-size: 13.5px; font-weight: 600; }
.col-head .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.state-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.state-dot.started { border-right-color: transparent; }
.state-dot.completed { background: currentColor; }
.issue { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--glass-strong); border-radius: var(--r-m); padding: 10px 12px; margin-bottom: 8px; transition: border-color var(--dur-2) var(--out), transform var(--dur-1) var(--out), box-shadow var(--dur-2) var(--out); box-shadow: var(--shadow-1); color: var(--ink); }
.issue:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.issue:active { transform: scale(.995); }
.issue .top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.issue .id { font-family: var(--mono); font-size: 11.5px; }
.issue .t { font-weight: 540; line-height: 1.35; }
.issue .bottom { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.label-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.label-chip i { width: 7px; height: 7px; border-radius: 50%; }
.avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--hover); font-size: 10px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.prio { display: inline-flex; gap: 1.5px; align-items: flex-end; height: 11px; }
.prio i { width: 3px; background: var(--line-2); border-radius: 1px; }
.prio i:nth-child(1) { height: 5px; } .prio i:nth-child(2) { height: 8px; } .prio i:nth-child(3) { height: 11px; }
.prio.on1 i:nth-child(-n+3), .prio.on2 i:nth-child(-n+3) { background: var(--ink-2); }
.prio.on3 i:nth-child(-n+2) { background: var(--ink-2); }
.prio.on4 i:nth-child(1) { background: var(--ink-2); }
.prio.urgent { width: 13px; height: 13px; border-radius: 3px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 800; justify-content: center; align-items: center; display: inline-flex; }
.computer-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 560; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.assign-btn { opacity: 0; transition: opacity var(--dur-2); margin-left: auto; }
.issue:hover .assign-btn, .issue:focus-within .assign-btn { opacity: 1; }
.list-view .issue { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.list-view .issue .t { flex: 1; }

.drawer-bg { position: fixed; inset: 0; z-index: 30; background: rgba(10, 14, 20, .18); animation: fade var(--dur-2) var(--out); }
.drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(560px, calc(100vw - 20px)); z-index: 31; border-radius: var(--r-xl); display: flex; flex-direction: column; animation: slide var(--dur-3) var(--out); background: var(--glass-strong); }
.drawer.closing { animation: slide-out var(--dur-2) var(--in) forwards; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes slide-out { to { transform: translateX(24px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 20px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px 30px; }
.drawer-body h2 { font-size: var(--t-xl); font-weight: 620; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 12px; }
.props { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: var(--t-s); margin: 0 0 18px; }
.props dt { color: var(--muted); }
.props dd { margin: 0; display: flex; align-items: center; gap: 7px; }
.comment { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.comment .who { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.comment .who time { color: var(--muted); font-weight: 400; }

.connect { max-width: 780px; margin: 0 auto; border-radius: var(--r-l); padding: 22px 24px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.connect h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.02em; font-weight: 620; }
.connect p { margin: 0; color: var(--ink-2); max-width: 64ch; }
.connect ol { margin: 0; padding-left: 1.2em; color: var(--ink-2); }
.connect ol li { margin: 4px 0; }

/* ---------------------------------------------------------------- task view */
.task-view { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(440px, 1.1fr); gap: 10px; flex: 1; min-height: 0; }
.task-view.no-pane { grid-template-columns: 1fr; }
.task-view.no-pane .pane { display: none; }
.thread-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: var(--r-xl); overflow: hidden; }
.task-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--line); min-height: 58px; }
.task-head h2 { font-size: 16px; font-weight: 620; margin: 0; letter-spacing: -.012em; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.task-head .actions { margin-left: auto; display: flex; gap: 2px; }
.thread { flex: 1; overflow-y: auto; padding: 22px 22px 32px; scrollbar-gutter: stable; }
.thread-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.msg-user { align-self: flex-end; background: var(--glass-strong); border: 1px solid var(--line); padding: 10px 15px; border-radius: 16px 16px 5px 16px; max-width: 86%; white-space: pre-wrap; box-shadow: var(--shadow-1); }
.msg-user .att { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 4px; }
.work { position: relative; padding-left: 18px; display: flex; flex-direction: column; gap: 1px; }
.work::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--line-2); border-radius: 1px; }
.work.live::before { background: linear-gradient(var(--busy-dot), var(--line-2)); }
.plan { border-radius: var(--r-m); padding: 10px 14px; margin: 2px 0 8px; background: var(--glass-strong); border: 1px solid var(--line); }
.plan-title { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.plan ul { margin: 0; padding: 0; }
.plan li { list-style: none; display: flex; gap: 10px; align-items: flex-start; padding: 3px 0; font-size: 14.5px; }
.plan .box { width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid var(--muted); flex: none; margin-top: 3px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-3) var(--out), border-color var(--dur-3); }
.plan li.in_progress .box { border-color: var(--busy-dot); border-top-color: transparent; animation: spin .9s linear infinite; }
.plan li.done .box { background: var(--ok); border-color: var(--ok); }
.plan li.done .box::after { content: ""; width: 6px; height: 3px; border: solid #fff; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg) translate(1px, -1px); }
.plan li.done span { color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
.step { display: flex; flex-direction: column; animation: enter var(--dur-2) var(--out); }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
.step-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; margin-left: -8px; border-radius: var(--r-s); font-size: 14.5px; color: var(--ink-2); border: 0; background: transparent; text-align: left; width: calc(100% + 8px); transition: background var(--dur-2); }
.step-row:hover { background: var(--hover); }
.step-row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.step-row .chev { opacity: 0; transition: opacity var(--dur-2), transform var(--dur-2) var(--out); }
.step-row:hover .chev { opacity: .6; }
.step-row[aria-expanded="true"] .chev { transform: rotate(90deg); opacity: .6; }
.step.failed .step-row { color: var(--bad); }
.step-detail { margin: 2px 0 8px 26px; font: 12.5px/1.55 var(--mono); background: var(--hover); border-radius: var(--r-s); padding: 10px 12px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; color: var(--ink-2); }
.shot-thumb { margin: 4px 0 6px 26px; width: 200px; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.spinner { width: 14px; height: 14px; border: 1.8px solid var(--busy-dot); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; margin: 2px; }
.note { font-size: 14.5px; color: var(--ink-2); padding: 3px 0; }
.note p { margin: .25em 0; }
.thinking-row { font-size: 14px; color: var(--muted); padding: 4px 0; display: flex; gap: 10px; align-items: center; }
.subagent { border: 1px solid var(--line); border-radius: var(--r-m); margin: 6px 0 8px; padding: 6px 12px 8px; background: color-mix(in srgb, var(--glass-strong) 60%, transparent); animation: enter var(--dur-2) var(--out); }
.sub-head { font-size: 13px; color: var(--ink-2); padding: 3px 0 2px; display: flex; gap: 8px; align-items: center; font-weight: 560; }
.sub-head .engine-badge { margin-left: auto; font-weight: 400; }
.subs-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.subs-par .subagent { margin: 0; }
.approval { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); border-radius: var(--r-m); padding: 12px 14px; margin: 6px 0; animation: enter var(--dur-2) var(--out); }
.approval p { margin: 0 0 8px; font-size: 14.5px; }
.approval code { font: 12.5px/1.5 var(--mono); display: block; white-space: pre-wrap; background: var(--glass-strong); padding: 8px 10px; border-radius: var(--r-xs); margin-bottom: 10px; max-height: 160px; overflow: auto; }
.approval .row { flex-wrap: wrap; }
.answer { font: 400 var(--t-l)/1.62 var(--read); font-optical-sizing: auto; letter-spacing: 0; color: var(--ink); }
.answer h1, .answer h2, .answer h3 { font-family: var(--ui); letter-spacing: -.018em; line-height: 1.25; margin: 1.25em 0 .4em; font-weight: 640; }
.answer h1 { font-size: 22px; } .answer h2 { font-size: 19px; } .answer h3 { font-size: 16.5px; }
.answer > :first-child { margin-top: 0; }
.answer p { margin: .65em 0; }
.answer ul, .answer ol { padding-left: 1.25em; }
.answer li { margin: .2em 0; }
.answer code { font: 13.5px var(--mono); background: var(--hover); padding: 1px 5px; border-radius: 4px; }
.answer pre { background: var(--hover); padding: 12px 14px; border-radius: var(--r-s); overflow-x: auto; }
.answer pre code { background: none; padding: 0; }
.answer table { border-collapse: collapse; width: 100%; font: 400 14px/1.45 var(--ui); margin: .9em 0; display: block; overflow-x: auto; }
.answer th, .answer td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.answer th { font-weight: 620; }
.answer blockquote { margin: .7em 0; padding-left: 14px; border-left: 2px solid var(--line-2); color: var(--ink-2); }
.answer a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
.answer-meta { font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.error-box { background: color-mix(in srgb, var(--bad) 9%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); border-radius: var(--r-m); padding: 11px 14px; font-size: 14.5px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { display: inline-flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--glass-strong); border-radius: var(--r-m); padding: 8px 12px; font-size: 14px; max-width: 280px; box-shadow: var(--shadow-1); transition: border-color var(--dur-2); }
.file-chip:hover { border-color: var(--accent); }
.file-chip .ext { font: 600 10.5px var(--ui); background: var(--accent-soft); color: var(--accent); border-radius: 5px; padding: 3px 6px; text-transform: uppercase; letter-spacing: .02em; }
.source-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-2); max-width: 240px; }
.source-chip:hover { text-decoration: none; border-color: var(--line-2); color: var(--ink); }
.source-chip .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.thread-composer { padding: 10px 18px 16px; }
.thread-composer .composer { max-width: 720px; margin: 0 auto; padding: 10px 10px 8px 16px; }
.thread-composer textarea { min-height: 26px; font-size: 15.5px; }

/* the computer pane */
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.screen-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--screen); border-radius: var(--r-xl); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow-3); color: var(--screen-ink); }
.screen-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.screen-title { font-size: 13px; font-weight: 600; color: #e6ebf2; }
.screen-frame .led { background: #343c4a; }
.screen-frame .led.on { background: #7c9bff; box-shadow: 0 0 8px #7c9bff; }
.screen-frame .led.running { background: #f0b429; box-shadow: 0 0 10px #f0b429; }
.tabs { display: flex; gap: 2px; margin-left: auto; }
.tab { border: 0; background: transparent; color: #8792a3; padding: 5px 10px; border-radius: 7px; font-size: 13px; transition: color var(--dur-2), background var(--dur-2); }
.tab:hover { color: #e6ebf2; }
.tab[aria-selected="true"] { background: rgba(255,255,255,.09); color: #fff; }
.screen-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.urlbar { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,.06); font-size: 12.5px; color: #aab4c3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewport { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px 14px; }
.viewport img { max-width: 100%; max-height: 100%; border-radius: 9px; box-shadow: 0 8px 40px rgba(0,0,0,.45); }
.idle { text-align: center; color: #6f7a8b; font-size: 14px; max-width: 36ch; line-height: 1.5; }
.idle .glyph { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 12px; border: 1.5px solid #2c3442; position: relative; }
.idle .glyph::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 7px; height: 7px; border-radius: 50%; background: #3a4250; }
.scrub { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; font-size: 12px; color: #8792a3; font-variant-numeric: tabular-nums; }
.scrub input { flex: 1; accent-color: #7c9bff; }
.live-btn { border: 1px solid #333c4a; background: transparent; color: #aab4c3; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.live-btn[aria-pressed="true"] { border-color: #7c9bff; color: #fff; }
.terminal-log { flex: 1; overflow: auto; margin: 0; padding: 14px 16px; font: 12.5px/1.55 var(--mono); color: #c9d2de; white-space: pre-wrap; word-break: break-word; }
.pane-files { flex: 1; overflow: auto; padding: 8px; }
.pane-files button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #c9d2de; text-align: left; font-size: 13.5px; }
.pane-files button:hover { background: rgba(255,255,255,.06); }
.pane-files .sz { margin-left: auto; color: #6f7a8b; font-size: 12px; }
.preview { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.preview-bar { display: flex; gap: 8px; align-items: center; padding: 8px 14px; font-size: 12.5px; color: #aab4c3; }
.preview-bar a { color: #aab4c3; margin-left: auto; }
.preview iframe { flex: 1; border: 0; background: #fff; margin: 0 14px 14px; border-radius: 9px; }
.preview .doc { flex: 1; overflow: auto; background: var(--glass-solid); color: var(--ink); margin: 0 14px 14px; border-radius: 9px; padding: 22px 26px; }
.preview img.full { max-width: calc(100% - 28px); margin: 0 14px; border-radius: 9px; }

/* ---------------------------------------------------------------- code workspace */
.code-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.project-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lanes { display: grid; gap: 8px; }
.lane { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--glass-strong); box-shadow: var(--shadow-1); color: var(--ink); transition: border-color var(--dur-2); }
.lane:hover { border-color: var(--line-2); text-decoration: none; }
.lane .title { font-weight: 580; }
.lane .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.lane .files { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.file-tag { font: 11.5px var(--mono); padding: 1px 6px; border-radius: 5px; background: var(--hover); color: var(--ink-2); }
.file-tag.overlap { background: color-mix(in srgb, var(--busy-dot) 20%, transparent); color: var(--busy); }
.overlap-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--busy-dot) 45%, transparent); background: color-mix(in srgb, var(--busy-dot) 10%, transparent); margin-bottom: 12px; font-size: 14px; }
.lane-view { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 10px; flex: 1; min-height: 0; }
.lane-main { display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-xl); overflow: hidden; }
.lane-main .head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lane-body { flex: 1; min-height: 0; display: flex; }
.diff-files { width: 240px; border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; flex: none; }
.diff-files button { display: flex; gap: 8px; align-items: center; width: 100%; border: 0; background: transparent; padding: 6px 8px; border-radius: var(--r-xs); font: 12.5px var(--mono); text-align: left; color: var(--ink-2); }
.diff-files button:hover, .diff-files button[aria-current="true"] { background: var(--hover); color: var(--ink); }
.diff-files .n { margin-left: auto; font: 11px var(--ui); white-space: nowrap; }
.add { color: var(--ok); } .del { color: var(--bad); }
.diff { flex: 1; overflow: auto; font: 12.5px/1.6 var(--mono); }
.diff .file { border-bottom: 1px solid var(--line); }
.diff .fname { position: sticky; top: 0; padding: 8px 14px; background: var(--glass-solid); font-weight: 600; border-bottom: 1px solid var(--line); z-index: 1; }
.diff .ln { display: grid; grid-template-columns: 48px 48px 1fr; white-space: pre; }
.diff .ln span:nth-child(-n+2) { color: var(--muted); text-align: right; padding-right: 10px; user-select: none; opacity: .7; }
.diff .ln.a { background: color-mix(in srgb, var(--ok) 11%, transparent); }
.diff .ln.d { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.diff .ln.h { color: var(--muted); background: var(--hover); }
.tree { width: 240px; border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; flex: none; font-size: 13px; }
.tree button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 3px 8px; border-radius: 5px; font: 12.5px var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree button:hover, .tree button[aria-current="true"] { background: var(--hover); color: var(--ink); }
.editor-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.editor-wrap .bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); font: 12.5px var(--mono); }
.editor-wrap .CodeMirror { flex: 1; height: auto; font: 13px/1.55 var(--mono); background: transparent; color: var(--ink); }
.editor-wrap .CodeMirror-gutters { background: transparent; border-right: 1px solid var(--line); }
.editor-wrap .CodeMirror-linenumber { color: var(--muted); }
.editor-wrap .CodeMirror-cursor { border-left-color: var(--ink); }
.editor-wrap .CodeMirror-selected, .editor-wrap .CodeMirror-focused .CodeMirror-selected { background: var(--accent-soft); }
.editor-wrap .CodeMirror-matchingbracket { color: var(--ok) !important; text-decoration: underline; }
.editor-wrap .cm-s-default .cm-keyword { color: var(--cm-kw); }
.editor-wrap .cm-s-default .cm-string, .editor-wrap .cm-s-default .cm-string-2 { color: var(--cm-str); }
.editor-wrap .cm-s-default .cm-comment { color: var(--muted); font-style: italic; }
.editor-wrap .cm-s-default .cm-number, .editor-wrap .cm-s-default .cm-atom { color: var(--cm-num); }
.editor-wrap .cm-s-default .cm-def, .editor-wrap .cm-s-default .cm-builtin, .editor-wrap .cm-s-default .cm-tag { color: var(--cm-def); }
.editor-wrap .cm-s-default .cm-variable, .editor-wrap .cm-s-default .cm-variable-2, .editor-wrap .cm-s-default .cm-variable-3,
.editor-wrap .cm-s-default .cm-property, .editor-wrap .cm-s-default .cm-operator, .editor-wrap .cm-s-default .cm-type { color: var(--ink); }
.editor-wrap .cm-s-default .cm-attribute, .editor-wrap .cm-s-default .cm-meta, .editor-wrap .cm-s-default .cm-qualifier { color: var(--cm-num); }
.editor-wrap .cm-s-default .cm-header { color: var(--cm-def); font-weight: 600; }
.xterm-wrap { flex: 1; min-width: 0; background: var(--screen); padding: 8px 10px; }

/* ---------------------------------------------------------------- integrations, agents, skills, memory */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .field { max-width: 320px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.card { border-radius: var(--r-l); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); background: var(--glass-strong); box-shadow: var(--shadow-1); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.card:hover { border-color: var(--line-2); }
.card .head { display: flex; align-items: center; gap: 10px; }
.card .name { font-weight: 600; letter-spacing: -.008em; }
.card .desc { font-size: 13.5px; color: var(--ink-2); flex: 1; line-height: 1.45; }
.card .foot { display: flex; align-items: center; gap: 8px; }
.mono-tile { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; color: var(--ink); background: var(--hover); border: 1px solid var(--line); }
.cat-head { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 22px 0 10px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { border-radius: var(--r-l); padding: 14px 16px; }
.stat .v { font-size: var(--t-2xl); font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .k { font-size: 13px; color: var(--muted); margin-top: 4px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; font-weight: 560; color: var(--muted); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr:last-child td { border-bottom: 0; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tip { position: absolute; pointer-events: none; z-index: 5; border-radius: var(--r-s); padding: 8px 10px; font-size: 12.5px; min-width: 160px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.tip .row { justify-content: space-between; gap: 14px; }
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; }
.settings-nav a { padding: 7px 10px; border-radius: var(--r-s); color: var(--ink-2); font-size: 14px; }
.settings-nav a:hover { background: var(--hover); text-decoration: none; }
.settings-nav a[aria-current="true"] { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-1); }
.secret { display: flex; gap: 6px; }
.secret .field { font-family: var(--mono); font-size: 13px; }
.code-block { font: 12.5px/1.55 var(--mono); background: var(--hover); border-radius: var(--r-s); padding: 10px 12px; white-space: pre-wrap; word-break: break-all; }

/* ---------------------------------------------------------------- overlays */
.modal-bg { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 14, 20, .32); animation: fade var(--dur-2) var(--out); }
.modal { width: min(640px, 100%); max-height: 88vh; overflow: auto; border-radius: var(--r-xl); padding: 22px 24px; background: var(--glass-strong); animation: rise var(--dur-3) var(--out); }
.modal.wide { width: min(860px, 100%); }
.modal h3 { margin: 0 0 4px; font-size: var(--t-xl); letter-spacing: -.02em; font-weight: 620; }
.modal p.sub { margin: 0 0 18px; color: var(--ink-2); font-size: var(--t-s); }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* ---------------------------------------------------------------- login */
.login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login .box { width: min(400px, 100%); border-radius: var(--r-xl); padding: 28px; }
.login h1 { font-size: var(--t-2xl); font-weight: 620; letter-spacing: -.025em; margin: 18px 0 6px; }
.login p { color: var(--ink-2); margin: 0 0 20px; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .task-view { grid-template-columns: 1fr; }
  .task-view .pane { display: none; }
  .task-view.pane-only .pane { display: flex; }
  .task-view.pane-only .thread-col { display: none; }
  .lane-view { grid-template-columns: 1fr; }
  .lane-view .thread-col { display: none; }
  .lane-view.show-thread .thread-col { display: flex; }
  .lane-view.show-thread .lane-main { display: none; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; padding: 0; gap: 0; }
  main { border-radius: 0; }
  .sidebar { position: fixed; inset: 8px auto 8px 8px; width: min(300px, 84vw); z-index: 45; transform: translateX(-110%); transition: transform var(--dur-3) var(--out); background: var(--glass-strong); }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10,14,20,.3); z-index: 44; }
  .mobile-only { display: inline-flex !important; }
  .topbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
  .hero { padding-top: 3vh; }
  .hero h1 { font-size: 30px; }
  .settings { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .form-2 { grid-template-columns: 1fr; }
  .thread-col, .screen-frame { border-radius: 0; }
  .task-head { padding-left: 10px; }
  .diff-files, .tree { display: none; }
  .page { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ================================================================ Linear × Perplexity pass
   Flattens the old glass surfaces and resets the shell, controls and key views. Later rules win. */
body { background: var(--bg); background-image: none; font-size: var(--t-m); line-height: 1.5; letter-spacing: -.006em; }
.glass, .glass-strong { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.app { grid-template-columns: 248px minmax(0, 1fr); padding: 0; gap: 0; }
.sidebar { border-radius: 0; border: 0; border-right: 1px solid var(--line); background: var(--side); padding: 10px 8px 8px; }
main { border-radius: 0; background: var(--bg); }
.brand { padding: 2px 8px 10px; font-size: 14px; font-weight: 620; gap: 9px; }
.mark { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); box-shadow: none; }
.mark::after { right: 4px; bottom: 4px; width: 5px; height: 5px; }
.new-btn { margin: 0 0 10px; padding: 6px 10px; font-size: 13.5px; border-radius: var(--r-s); background: var(--glass); box-shadow: var(--shadow-1); gap: 8px; }
.new-btn:hover { background: var(--glass-strong); border-color: var(--line-2); }
.nav a { padding: 5px 9px; font-size: 13.5px; gap: 9px; border-radius: var(--r-s); }
.nav a .icon { width: 16px; height: 16px; }
.nav a[aria-current="page"] { background: var(--press); box-shadow: none; font-weight: 560; }
.nav-label { padding: 12px 9px 4px; font-size: 11.5px; text-transform: none; letter-spacing: .01em; }
.recent a { padding: 4px 9px; font-size: 13px; border-radius: var(--r-s); }
.side-foot { padding-top: 8px; }
.engine-pill { font-size: 12.5px; }
.icon-btn { width: 30px; height: 30px; border-radius: var(--r-s); }
kbd { font-size: 10.5px; border-radius: 4px; padding: 0 4px; background: var(--hover); }

/* controls: compact, Linear-like. Primary uses the accent. */
.btn { min-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 520; border-radius: var(--r-s); background: var(--glass); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.btn:hover { background: var(--glass-strong); border-color: var(--muted); }
.btn.primary, .btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: none; }
.btn.primary:hover, .btn.accent:hover { opacity: 1; filter: brightness(1.08); border-color: var(--accent); }
.btn.ghost { box-shadow: none; }
.btn.sm { min-height: 26px; padding: 0 9px; font-size: 12.5px; }
.field { min-height: 32px; padding: 5px 10px; border-radius: var(--r-s); background: var(--glass); font-size: 13.5px; }
.field:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
label.lbl { font-size: 12.5px; font-weight: 560; margin-bottom: 5px; }
.help { font-size: 12.5px; }
.seg { padding: 2px; border-radius: var(--r-s); }
.seg button { padding: 3px 10px; font-size: 12.5px; border-radius: 5px; }
.seg button[aria-pressed="true"] { background: var(--glass-strong); box-shadow: 0 0 0 1px var(--line-2); }
.chip, .badge, .engine-badge { font-size: 12px; }
.badge { padding: 1px 7px; }
.led { width: 7px; height: 7px; }
.switch { width: 34px; height: 20px; } .switch span::before { width: 14px; height: 14px; } .switch input:checked + span::before { transform: translateX(14px); }

/* pages */
.page { padding: 28px clamp(18px, 4vw, 48px) 80px; }
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.028em; }
.page-head p { font-size: 13.5px; color: var(--muted); }
.panel { border-radius: var(--r-l); padding: 16px 18px; margin-bottom: 12px; background: var(--glass); box-shadow: none; }
.panel h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -.008em; }
.panel > p.sub { font-size: 13px; }
.list-row { padding: 9px 2px; gap: 12px; }
.list-row .title { font-size: 13.5px; font-weight: 540; }
.list-row .desc { font-size: 12.5px; color: var(--muted); }
.pbar { height: 4px; border-radius: 999px; background: var(--hover); margin: 8px 0 4px; overflow: hidden; max-width: 320px; }
.pbar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .4s var(--out); }

/* home: Perplexity's centred ask box */
.hero { max-width: 760px; padding: 13vh 0 28px; text-align: center; }
.hero h1 { font: 400 var(--t-3xl)/1.1 var(--read); letter-spacing: -.025em; margin: 0 0 26px; }
.composer { border-radius: 20px; background: var(--glass); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); padding: 14px 14px 10px 18px; text-align: left; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-2); }
.composer textarea { font-size: 16.5px; min-height: 52px; }
.menu-btn { height: 28px; font-size: 12.5px; }
.send { width: 32px; height: 32px; background: var(--accent); color: var(--accent-ink); }
.send:disabled { opacity: .3; }
.send .icon { width: 16px; height: 16px; }
.suggest { justify-content: center; margin-top: 16px; gap: 8px; }
.suggest .chip { padding: 6px 12px; font-size: 12.5px; background: var(--glass); border-color: var(--line); box-shadow: var(--shadow-1); }
.home { padding: 0 clamp(16px, 3vw, 40px) 60px; }
.connect { border-radius: var(--r-l); padding: 18px 20px; box-shadow: none; background: var(--glass); }
.connect h2 { font-size: 16px; }

/* Linear workspace: flat columns, dense cards */
.ws-head h2 { font-size: 16px; }
.board { gap: 10px; }
.col { border-radius: var(--r-l); background: var(--side); border: 1px solid var(--line); padding: 8px; }
.col-head { font-size: 12.5px; padding: 2px 4px 8px; }
.issue { border-radius: var(--r-m); padding: 9px 11px; background: var(--glass); box-shadow: var(--shadow-1); }
.issue:hover { box-shadow: var(--shadow-1); border-color: var(--line-2); background: var(--glass-strong); }
.issue .t { font-size: 13.5px; font-weight: 520; }
.drawer { top: 0; right: 0; bottom: 0; border-radius: 0; border-left: 1px solid var(--line); box-shadow: var(--shadow-3); background: var(--glass); }

/* task page: question as title, flat answer column, framed computer pane */
.task-view { gap: 0; }
.thread-col { border-radius: 0; background: var(--bg); border: 0; border-right: 1px solid var(--line); }
.task-head { min-height: 48px; padding: 8px 12px 8px 20px; }
.task-head h2 { font-size: 14px; font-weight: 580; }
.thread-inner { max-width: 700px; gap: 16px; }
.msg-user { align-self: stretch; max-width: 100%; background: none; border: 0; box-shadow: none; padding: 6px 0 0; border-radius: 0; font: 400 28px/1.22 var(--read); letter-spacing: -.02em; }
.msg-user.long { font: 400 15px/1.6 var(--ui); letter-spacing: -.004em; white-space: pre-wrap; color: var(--ink-2); padding: 4px 0 0; }
.msg-user .att { font: 400 13px var(--ui); }
.answer { font: 400 15.5px/1.68 var(--ui); letter-spacing: -.004em; }
.answer h1, .answer h2, .answer h3 { font-family: var(--read); font-weight: 500; letter-spacing: -.015em; }
.answer h1 { font-size: 26px; } .answer h2 { font-size: 22px; } .answer h3 { font-size: 18px; }
.answer a { color: var(--accent); }
.chips-row { gap: 6px; }
.source-chip { border-radius: var(--r-m); padding: 6px 10px; background: var(--glass); max-width: 200px; }
.source-chip .n { color: var(--accent); font-weight: 600; }
.file-chip { border-radius: var(--r-m); box-shadow: none; background: var(--glass); }
.plan, .subagent { background: var(--glass); border-radius: var(--r-m); }
.thread-composer { padding: 8px 18px 16px; }
.thread-composer .composer { border-radius: 16px; max-width: 700px; }
.pane { padding: 10px; background: var(--side); }
.screen-frame { border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--line-2); }
.lane-view { gap: 0; }
.lane-main { border-radius: 0; }
.lane { border-radius: var(--r-m); box-shadow: none; padding: 10px 12px; }

/* menus, toasts, modals */
.menu { border-radius: var(--r-m); background: var(--glass-strong); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); min-width: 260px; }
.menu button { padding: 6px 9px; font-size: 13.5px; border-radius: var(--r-xs); }
.menu button[aria-checked="true"]::after { background: var(--accent); }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .hero { padding-top: 8vh; }
  .hero h1 { font-size: 34px; }
  .msg-user { font-size: 23px; }
}


/* ================================================================ notifications, error cards, pre-flight, model selector */
.notes { position: fixed; top: 14px; right: 14px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(400px, calc(100vw - 28px)); pointer-events: none; }
.note-card, .err-card, .pf-row { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--glass-strong); padding: 11px 10px 11px 12px; font-size: 13.5px; }
.note-card { pointer-events: auto; box-shadow: var(--shadow-3); animation: note-in var(--dur-3) var(--out); border-left-width: 3px; }
.note-card.out { opacity: 0; transform: translateX(14px); transition: opacity .16s, transform .16s; }
@keyframes note-in { from { opacity: 0; transform: translateX(18px); } }
.note-card.ok { border-left-color: var(--ok); } .note-card.info { border-left-color: var(--accent); }
.note-card.warn { border-left-color: var(--busy-dot); } .note-card.err { border-left-color: var(--bad); }
.n-ico { flex: none; margin-top: 1px; color: var(--muted); display: inline-flex; }
.ok > .n-ico { color: var(--ok); } .info > .n-ico { color: var(--accent); } .warn > .n-ico { color: var(--busy); } .err > .n-ico, .err-card > .n-ico { color: var(--bad); }
.n-body { flex: 1; min-width: 0; }
.n-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.n-count { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--muted); }
.n-detail { color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.n-hint { color: var(--muted); margin-top: 4px; font-size: 13px; }
.n-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.n-x { width: 26px; height: 26px; flex: none; margin: -3px 0 0 0; }
.n-raw { margin-top: 8px; font-size: 12.5px; }
.n-raw summary { cursor: pointer; color: var(--muted); }
.n-raw pre { margin: 6px 0; padding: 8px 10px; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--hover); border-radius: var(--r-s); font: 12px/1.5 var(--mono); color: var(--ink-2); }
.err-card { border-color: color-mix(in srgb, var(--bad) 40%, var(--line-2)); background: color-mix(in srgb, var(--bad) 6%, var(--glass)); padding: 13px 14px; margin: 4px 0; }
.err-card .n-title { font-size: 14.5px; }
.mcp-err { margin-top: 8px; } .mcp-err .err-card { padding: 9px 12px; }

.pf { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.pf[hidden] { display: none; }
.pf-row { padding: 8px 6px 8px 10px; font-size: 13px; }
.pf-row.warn { border-color: color-mix(in srgb, var(--busy-dot) 45%, var(--line-2)); background: color-mix(in srgb, var(--busy-dot) 7%, var(--glass)); }
.pf-row.error { border-color: color-mix(in srgb, var(--bad) 45%, var(--line-2)); background: color-mix(in srgb, var(--bad) 7%, var(--glass)); }
.pf-row.warn .n-ico { color: var(--busy); } .pf-row.error .n-ico { color: var(--bad); } .pf-row.info .n-ico { color: var(--accent); }
.pf-row .n-title { font-size: 13px; } .pf-row .n-actions { margin-top: 6px; }
.pf-more { font-size: 12px; color: var(--muted); padding-left: 4px; }

.cap { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--hover); color: var(--ink-2); font-size: 11.5px; font-weight: 520; vertical-align: middle; margin-left: 4px; }
.cap .icon { width: 13px; height: 13px; }
.cap.off { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.warn-text { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; font-size: 12.5px; color: var(--busy); }

.mp { position: fixed; z-index: 70; max-height: min(520px, 72vh); display: flex; flex-direction: column; border-radius: var(--r-l); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); overflow: hidden; animation: pop var(--dur-2) var(--out); }
.mp-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.mp-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ink); }
.mp-list { overflow-y: auto; padding: 4px 6px 6px; flex: 1; }
.mp-group { display: flex; gap: 6px; align-items: center; padding: 10px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.mp-err { display: inline-flex; gap: 4px; align-items: center; color: var(--bad); text-transform: none; font-weight: 500; letter-spacing: 0; }
.mp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; background: transparent; border-radius: var(--r-s); text-align: left; font-size: 13.5px; }
.mp-row.active { background: var(--hover); }
.mp-row.dim .mp-name { color: var(--muted); }
.mp-ico { color: var(--muted); display: inline-flex; flex: none; }
.mp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-name { font-weight: 540; }
.mp-sub { font-size: 12px; color: var(--muted); }
.mp-meta { display: inline-flex; align-items: center; flex: none; }
.mp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.mp-empty { padding: 10px 10px; font-size: 13px; color: var(--muted); }
.mp-foot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.mp-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }

.mgroup { margin-top: 12px; } .mgroup + .mgroup { border-top: 1px solid var(--line); padding-top: 12px; }
.mg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.mrow .title { display: flex; align-items: center; gap: 2px; }
.sw-row { align-items: flex-start; gap: 12px; font-size: 14px; }
.sw-row .switch { margin-top: 2px; } .sw-label { font-weight: 540; }
.sticky-save { position: sticky; bottom: 0; padding: 12px 0 14px; background: linear-gradient(to top, var(--bg) 70%, transparent); }

.why { display: flex; gap: 7px; align-items: flex-start; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.why .icon { margin-top: 2px; }
.why.unavailable { color: var(--bad); } .why.off { color: var(--ink-2); }
code.fix { font: 12px var(--mono); background: var(--hover); padding: 1px 6px; border-radius: 5px; color: var(--ink); user-select: all; }
.tool-row.unavailable .mono-tile { color: var(--bad); }
.mcp-row.error .mono-tile { color: var(--bad); }

/* ================================================================ logo, boot, global top bar */
.logo { display: inline-block; flex: none; overflow: visible; color: var(--ink); vertical-align: middle; }
.logo .lg-dot, .logo .lg-trail { fill: var(--accent); transform: translate(21.5px, 21.5px); }
.logo .lg-trail { opacity: 0; }
.logo.spin .lg-dot, body.busy .logo.lg-brand .lg-dot, body.loading .logo.lg-brand .lg-dot { animation: lg-orbit 1.5s infinite; }
.logo.spin .lg-trail, body.busy .logo.lg-brand .lg-trail, body.loading .logo.lg-brand .lg-trail { animation: lg-orbit 1.5s -.12s infinite; opacity: .32; }
/* the dot travels clockwise, corner to corner: top-left, top-right, bottom-right, bottom-left */
@keyframes lg-orbit {
  0%, 100% { transform: translate(10.5px, 10.5px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  25% { transform: translate(21.5px, 10.5px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  50% { transform: translate(21.5px, 21.5px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  75% { transform: translate(10.5px, 21.5px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
}
.loader { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13.5px; }
.boot { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); color: var(--ink); font-weight: 600; letter-spacing: -.01em; transition: opacity .32s var(--out); }
.boot.done { opacity: 0; pointer-events: none; }
.boot .logo { animation: boot-in .5s var(--out) both; }
.boot span { opacity: .7; font-size: 15px; animation: boot-in .6s .12s var(--out) both; }
@keyframes boot-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.login-logo { display: block; margin-bottom: 14px; }

.app { grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: view-in .28s var(--out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.gtop { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 30; min-width: 0; }
.gbrand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; letter-spacing: -.015em; color: var(--ink); flex: none; width: 204px; }
.gbrand:hover { text-decoration: none; }
.crumbs { display: flex; align-items: center; gap: 2px; font-size: 13.5px; color: var(--muted); min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--muted); padding: 3px 6px; border-radius: 6px; } .crumbs a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.crumbs span { color: var(--ink); font-weight: 560; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.crumb-sep { display: inline-flex; color: var(--muted); opacity: .6; }
.gsearch { flex: 1 1 280px; max-width: 520px; margin: 0 auto; height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--glass); color: var(--muted); font-size: 13.5px; text-align: left; transition: border-color var(--dur-2), background var(--dur-2); }
.gsearch:hover { border-color: var(--muted); background: var(--glass-strong); }
.gsearch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gright { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.gtop .gsearch + .gright { margin-left: 0; }
.gbtn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 520; transition: background var(--dur-2) var(--out), color var(--dur-2); }
.gbtn:hover, .gbtn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.gbtn.model { border: 1px solid var(--line-2); max-width: 230px; background: var(--glass); }
.gbtn .led { width: 7px; height: 7px; }
.avatar-btn { width: 32px; padding: 0; justify-content: center; border-radius: 50%; background: var(--hover); }
.gcount { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; font-style: normal; }
.gcount.alert { background: var(--busy-dot); color: #1a1100; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }

.sidebar { grid-row: 2; padding: 12px 8px 8px; }
main { grid-row: 2; }
.new-btn { margin-bottom: 12px; }
.side-foot { padding: 8px 4px 0; }
.side-link { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: var(--r-s); color: var(--muted); font-size: 13px; } .side-link:hover { background: var(--hover); color: var(--ink); text-decoration: none; }

/* popovers */
.pop { position: fixed; z-index: 70; overflow: auto; border-radius: var(--r-l); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); animation: pop var(--dur-2) var(--out); }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pop-head a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); } .pop-head a:hover { color: var(--ink); text-decoration: none; }
.pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px; }
.pg-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-s); color: var(--ink); min-width: 0; }
.pg-item:hover { background: var(--hover); text-decoration: none; }
.pg-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--hover); border: 1px solid var(--line); color: var(--ink-2); flex: none; }
.pg-item.warn .pg-ico { color: var(--bad); }
.pg-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pg-name { font-weight: 560; font-size: 13.5px; } .pg-sub { font-size: 12px; color: var(--muted); }
.pg-meta { font-size: 12px; color: var(--muted); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .pg-item.warn .pg-meta { color: var(--bad); }
.pop-sec { padding: 10px 14px 4px; } .pop-lbl { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pop-links { display: flex; flex-direction: column; padding: 6px; border-top: 1px solid var(--line); margin-top: 8px; }
.pop-links a, .pop-links button { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 0; background: transparent; border-radius: var(--r-s); font-size: 13.5px; color: var(--ink); text-align: left; } .pop-links a:hover, .pop-links button:hover { background: var(--hover); text-decoration: none; }
.act-sec { padding: 6px 6px 2px; } .act-title { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 3px; }
.act-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-s); color: var(--ink); font-size: 13.5px; } .act-row:hover { background: var(--hover); text-decoration: none; }
.act-row .muted { font-size: 12px; margin-left: auto; white-space: nowrap; } .act-row.attn { background: color-mix(in srgb, var(--busy-dot) 10%, transparent); }
.pop-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 14px; color: var(--muted); font-size: 13.5px; }

/* command palette */
.pal-bg { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 12px 0; background: rgba(8, 10, 14, .42); animation: fade var(--dur-2) var(--out); }
.pal { width: min(660px, 100%); max-height: 70vh; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--line-2); box-shadow: var(--shadow-3); overflow: hidden; animation: rise var(--dur-3) var(--out); }
.pal-in { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pal-in input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }
.pal-list { overflow-y: auto; padding: 6px; }
.pal-group { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.pal-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--r-s); text-align: left; color: var(--ink); }
.pal-row.active { background: var(--press); }
.pal-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--hover); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; }
.pal-main { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pal-name { font-weight: 540; font-size: 14px; } .pal-sub { font-size: 12px; color: var(--muted); }
.pal-empty { padding: 22px; text-align: center; color: var(--muted); }

/* Manage hub */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; align-items: start; }
.mcard { margin: 0 !important; display: flex; flex-direction: column; }
.mcard header { display: flex; align-items: center; gap: 10px; } .mcard header h2 { margin: 0; flex: 1; font-size: 14.5px; }
.mcard .mbody { margin-top: 12px; flex: 1; } .mcard footer { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; font-size: 13.5px; color: var(--ink-2); } .kv b { font-weight: 560; color: var(--ink); min-width: 0; display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dotted::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--muted); vertical-align: 1px; }
.dotted.ok::before { background: var(--ok); } .dotted.bad::before { background: var(--bad); } .dotted.warn::before { background: var(--busy-dot); } .dotted.off::before { background: var(--line-2); }
.spark { display: block; margin-top: 10px; } .spark rect { fill: var(--line-2); } .spark rect.now { fill: var(--accent); }

/* skeletons */
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--hover) 25%, var(--press) 37%, var(--hover) 63%); background-size: 400% 100%; animation: shimmer 1.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skeleton { flex: 1; min-height: 0; overflow: hidden; animation: fade .2s var(--out); }
.sk-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.sk-card { border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--glass); animation: sk-in .4s var(--out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.sk-card.tall { min-height: 150px; } .sk-card .row { display: flex; align-items: center; gap: 12px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.sk-center { display: flex; justify-content: center; }
.sk-thread { max-width: 700px; margin: 0 auto; padding: 30px 22px; display: flex; flex-direction: column; gap: 18px; }
.sk-lines { display: flex; flex-direction: column; gap: 11px; }
.sk-docs { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; } .sk-tree { border-right: 1px solid var(--line); padding-top: 10px; }
.sk-doc { padding: 40px clamp(20px, 6vw, 80px); display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
@keyframes sk-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 52px minmax(0, 1fr); }
  .gbrand { width: auto; } .gbrand span, .crumbs, .gb-label, .gbtn.model span { display: none; } .gbtn.model { padding: 0 8px; }
  .gsearch { flex: 1; } .gsearch kbd { display: none; }
  .sidebar { position: fixed; inset: 52px auto 0 0; width: min(300px, 84vw); z-index: 45; transform: translateX(-110%); transition: transform var(--dur-3) var(--out); background: var(--side); border-right: 1px solid var(--line); }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  .pg-grid { grid-template-columns: 1fr; }
  .sk-docs { grid-template-columns: 1fr; } .sk-tree { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo.spin .lg-dot, body.busy .logo.lg-brand .lg-dot, body.loading .logo.lg-brand .lg-dot, .logo.spin .lg-trail, body.busy .logo.lg-brand .lg-trail, body.loading .logo.lg-brand .lg-trail { animation: none; }
  .sk, .view, .gcount.alert { animation: none; }
}


/* ================================================================ dashboard widgets (Home) */
.hero { padding-top: 8vh; }
.widgets { max-width: 1240px; margin: 4px auto 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.wcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--glass); padding: 14px 16px 12px; min-height: 168px; animation: sk-in .45s var(--out) both; animation-delay: calc(var(--i, 0) * 55ms); transition: border-color var(--dur-2); }
.wcard:hover { border-color: var(--line-2); }
.wcard header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wcard h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); flex: 1; letter-spacing: -.003em; }
.wcard .wbody { flex: 1; min-width: 0; }
.wcard footer { margin-top: 8px; font-size: 12.5px; } .wcard footer a { color: var(--muted); } .wcard footer a:hover { color: var(--ink); }
.w-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; color: var(--ink); min-width: 0; border-top: 1px solid var(--line); }
.w-row:first-child { border-top: 0; } .w-row:hover { text-decoration: none; } .w-row:hover .ellipsis { text-decoration: underline; text-underline-offset: 2px; }
.w-row .muted { margin-left: auto; font-size: 12px; white-space: nowrap; }
.w-empty { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13.5px; padding: 10px 0; }
.w-big { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; } .w-sub { font-size: 12.5px; color: var(--muted); }
.w-stats { display: flex; gap: 22px; margin-bottom: 4px; }
.wcard.attn { border-color: color-mix(in srgb, var(--busy-dot) 45%, var(--line)); }
.wcard.attn h3 { color: var(--busy); }
.w-row.run .logo { width: 16px; height: 16px; }
@media (max-width: 860px) { .hero { padding-top: 3vh; } }


/* ================================================================ reasoning dropdown */
.thought { margin: 2px 0; }
.thought-head { display: flex; align-items: center; gap: 9px; width: calc(100% + 8px); margin-left: -8px; padding: 5px 8px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); font-size: 14px; text-align: left; transition: background var(--dur-2), color var(--dur-2); }
.thought-head:hover { background: var(--hover); color: var(--ink-2); }
.thought-head .lbl { font-weight: 520; }
.thought-meta { font-size: 12px; opacity: .75; }
.thought-head .chev { margin-left: auto; opacity: 0; transition: transform var(--dur-2) var(--out), opacity var(--dur-2); }
.thought-head:hover .chev, .thought.open .chev { opacity: .6; }
.thought.open .chev { transform: rotate(90deg); }
.thought-body { margin: 4px 0 8px 3px; padding: 4px 0 4px 16px; border-left: 2px solid var(--line-2); color: var(--ink-2); font-size: 14px; line-height: 1.6; max-height: 420px; overflow: auto; animation: reveal .28s var(--out); }
.thought-body p { margin: .4em 0; } .thought-body > :first-child { margin-top: 0; }
.thought-foot { margin-top: 8px; font: 11.5px var(--mono); color: var(--muted); }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }
.thinking-row { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 10px; padding: 4px 0; }


/* ================================================================ motion */
/* Thread items reveal once, in order, instead of replaying on every update. */
.step, .subagent, .approval { animation: none; }
.fresh { animation: rise-in .46s var(--out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
.answer.fresh { animation: answer-in .7s var(--out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes answer-in { from { opacity: 0; filter: blur(7px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); } }
.answer.fresh > * { animation: rise-in .6s var(--out) both; }
.answer.fresh > :nth-child(1) { animation-delay: .05s; } .answer.fresh > :nth-child(2) { animation-delay: .13s; } .answer.fresh > :nth-child(3) { animation-delay: .21s; }
.answer.fresh > :nth-child(4) { animation-delay: .29s; } .answer.fresh > :nth-child(5) { animation-delay: .37s; } .answer.fresh > :nth-child(n+6) { animation-delay: .45s; }
.chips-row.fresh .source-chip, .chips-row.fresh .file-chip { animation: rise-in .4s var(--out) both; }
.chips-row.fresh > :nth-child(2) { animation-delay: .06s; } .chips-row.fresh > :nth-child(3) { animation-delay: .12s; } .chips-row.fresh > :nth-child(4) { animation-delay: .18s; } .chips-row.fresh > :nth-child(n+5) { animation-delay: .24s; }
.work.live::before { background: linear-gradient(180deg, var(--line-2) 0%, var(--accent) 35%, var(--line-2) 70%); background-size: 100% 300%; animation: flow 1.8s linear infinite; }
@keyframes flow { to { background-position: 0 -300%; } }
.plan li.in_progress span { background: linear-gradient(90deg, var(--ink) 40%, var(--muted) 50%, var(--ink) 60%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
.card, .issue, .lane, .wcard, .file-chip, .source-chip { transition: border-color var(--dur-2) var(--out), transform var(--dur-2) var(--out), box-shadow var(--dur-2) var(--out), background var(--dur-2); }
.card:hover, .lane:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.source-chip:hover, .file-chip:hover { transform: translateY(-1px); }
.btn:active, .gbtn:active { transform: scale(.97); }
.grid .card { animation: sk-in .42s var(--out) both; }
.grid .card:nth-child(1) { animation-delay: 35ms; } .grid .card:nth-child(2) { animation-delay: 70ms; } .grid .card:nth-child(3) { animation-delay: 105ms; } .grid .card:nth-child(4) { animation-delay: 140ms; } .grid .card:nth-child(5) { animation-delay: 175ms; } .grid .card:nth-child(6) { animation-delay: 210ms; } .grid .card:nth-child(7) { animation-delay: 245ms; } .grid .card:nth-child(8) { animation-delay: 280ms; } .grid .card:nth-child(9) { animation-delay: 315ms; } .grid .card:nth-child(10) { animation-delay: 350ms; } .grid .card:nth-child(11) { animation-delay: 385ms; } .grid .card:nth-child(12) { animation-delay: 420ms; } 
.composer { transition: box-shadow var(--dur-3) var(--out), border-color var(--dur-2), transform var(--dur-3) var(--out); }
.hero h1 { animation: rise-in .6s var(--out) both; }
.hero .composer { animation: rise-in .6s .08s var(--out) both; } .hero .suggest { animation: rise-in .6s .16s var(--out) both; }
.pop, .menu, .mp { transform-origin: top; }
@media (prefers-reduced-motion: reduce) {
  .fresh, .answer.fresh, .answer.fresh > *, .chips-row.fresh > *, .grid .card, .hero h1, .hero .composer, .hero .suggest, .wcard, .work.live::before, .plan li.in_progress span { animation: none !important; }
  .plan li.in_progress span { color: inherit; background: none; }
}

.sk-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 12px; }
.sk-issue { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }
.skeleton:has(.sk-board), .skeleton:has(> div > .sk-card:only-child) { flex: none; }

/* ================================================================ Docs */
.linkish { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; } .linkish:hover { text-decoration: underline; }
/* home */
.docs-home { max-width: 1040px; }
.sec-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; } .sec-head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.askdocs { padding: 14px 16px; }
.ask-in { display: flex; align-items: center; gap: 12px; } .ask-in > .icon { color: var(--accent); }
.ask-in input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); min-width: 0; }
.ask-out { display: flex; flex-direction: column; } .ask-out:empty { display: none; }
.ask-turn { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; animation: rise-in .4s var(--out) both; }
.ask-q { font: 400 21px/1.3 var(--read); letter-spacing: -.015em; margin-bottom: 10px; }
.ai-answer { font-size: 15.5px; }
.cite { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px; border: 0; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font: 600 11px var(--ui); vertical-align: 1px; cursor: pointer; }
.cite:hover { background: var(--accent); color: var(--accent-ink); }
.srcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 14px; }
.src-card { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--glass); color: var(--ink); min-width: 0; transition: border-color var(--dur-2), transform var(--dur-2) var(--out), background var(--dur-2); }
.src-card:hover { text-decoration: none; border-color: var(--line-2); transform: translateY(-1px); } .src-card.flash { background: var(--accent-soft); border-color: var(--accent); }
.src-card .n { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font: 600 11.5px var(--ui); flex: none; }
.src-main { display: flex; flex-direction: column; min-width: 0; } .src-title { font-size: 13.5px; font-weight: 560; } .src-sub { font-size: 12px; color: var(--muted); }
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.space-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--glass); color: var(--ink); text-align: left; transition: border-color var(--dur-2), transform var(--dur-2) var(--out), box-shadow var(--dur-2); }
.space-card:hover { text-decoration: none; border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.space-card.add { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); gap: 8px; min-height: 82px; background: transparent; }
.sp-ico { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: var(--hover); border: 1px solid var(--line); flex: none; } .sp-ico.sm { width: 24px; height: 24px; font-size: 14px; border-radius: 7px; }
.sp-main { display: flex; flex-direction: column; min-width: 0; } .sp-name { font-weight: 600; } .sp-desc { font-size: 12.5px; color: var(--muted); } .sp-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.doc-list { padding: 4px 6px; } .doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--line); color: var(--ink); } .doc-row:first-child { border-top: 0; } .doc-row:hover { text-decoration: none; background: var(--hover); border-radius: var(--r-s); }
.doc-ico { font-size: 18px; width: 26px; text-align: center; flex: none; } .doc-title-row { display: block; font-weight: 560; } .doc-sum { display: block; font-size: 12.5px; color: var(--muted); } .doc-meta { font-size: 12px; white-space: nowrap; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--glass); text-align: left; color: var(--ink); transition: border-color var(--dur-2), transform var(--dur-2) var(--out); }
.tpl:hover { border-color: var(--accent); transform: translateY(-1px); } .tpl-ico { font-size: 22px; } .tpl-name { font-weight: 600; font-size: 13.5px; } .tpl-desc { font-size: 12px; color: var(--muted); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px; border: 1.5px dashed var(--line-2); border-radius: var(--r-l); color: var(--muted); cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2); } .drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.emoji-pop { position: fixed; z-index: 80; padding: 10px; } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: 8px; } .emoji-grid button { border: 0; background: transparent; font-size: 19px; padding: 5px; border-radius: 7px; } .emoji-grid button:hover { background: var(--hover); }

/* page view */
.doc-view { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr) 340px; }
.doc-view.side-closed, .doc-view.no-side { grid-template-columns: 264px minmax(0, 1fr) 0; } .doc-view.side-closed .doc-side, .doc-view.no-side .doc-side { display: none; }
.doc-tree { border-right: 1px solid var(--line); background: var(--side); display: flex; flex-direction: column; min-height: 0; }
.tree-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 4px; } .space-switch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 7px; border: 0; border-radius: var(--r-s); background: transparent; font-weight: 600; font-size: 14px; color: var(--ink); text-align: left; } .space-switch:hover { background: var(--hover); }
.tree-search { display: flex; align-items: center; gap: 8px; margin: 4px 10px 8px; padding: 0 10px; height: 30px; border: 1px solid var(--line); border-radius: var(--r-s); color: var(--muted); background: var(--glass); } .tree-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--ink); min-width: 0; }
.tree-list { flex: 1; overflow-y: auto; padding: 0 6px 10px; scrollbar-width: thin; }
.tn-row { display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px calc(4px + var(--d) * 14px); border-radius: var(--r-s); position: relative; } .tn-row:hover, .tn-row.drop { background: var(--hover); } .tn-row.active { background: var(--press); } .tn-row.drop { outline: 1.5px dashed var(--accent); }
.tn-chev { width: 20px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); border-radius: 5px; flex: none; transition: transform var(--dur-2) var(--out); } .tn-chev.none { visibility: hidden; } .tn-chev.open { transform: rotate(90deg); } .tn-chev:hover { background: var(--press); }
.tn-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 3px 2px; color: var(--ink-2); font-size: 13.5px; } .tn-row.active .tn-link { color: var(--ink); font-weight: 560; } .tn-link:hover { text-decoration: none; }
.tn-ico { flex: none; font-size: 14px; } .tn-draft { width: 6px; height: 6px; border-radius: 50%; background: var(--busy-dot); flex: none; }
.tn-acts { display: none; gap: 1px; } .tn-row:hover .tn-acts { display: flex; } .tn-acts button { width: 22px; height: 22px; border: 0; background: transparent; border-radius: 5px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; } .tn-acts button:hover { background: var(--press); color: var(--ink); }
.tree-foot { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; } .tree-foot a, .tree-foot button { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); border: 0; background: none; font: inherit; } .tree-foot a:hover, .tree-foot button:hover { color: var(--ink); text-decoration: none; }
.doc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.doc-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); min-height: 48px; } .doc-crumbs { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; } .doc-crumbs a { color: var(--muted); padding: 3px 6px; border-radius: 6px; } .doc-crumbs a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.doc-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .save-state { font-size: 12.5px; color: var(--muted); min-width: 92px; text-align: right; } .save-state.dirty { color: var(--busy); }
.doc-scroll { flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.doc-page { max-width: 820px; margin: 0 auto; padding: 38px clamp(18px, 4vw, 48px) 120px; }
.doc-head { display: flex; align-items: flex-start; gap: 10px; }
.doc-icon { width: 46px; height: 46px; border-radius: 12px; border: 1px solid transparent; background: transparent; font-size: 30px; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; } .doc-icon:hover { background: var(--hover); border-color: var(--line); } .doc-icon .ghost { color: var(--muted); opacity: 0; } .doc-icon:hover .ghost { opacity: 1; } .doc-icon.static { cursor: default; }
.doc-title { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none; overflow: hidden; font: 400 38px/1.15 var(--read); letter-spacing: -.025em; color: var(--ink); padding: 4px 0; } .doc-title::placeholder { color: var(--muted); opacity: .5; } .doc-title.static { margin: 0; font-weight: 400; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 16px 56px; font-size: 12.5px; color: var(--muted); } .doc-meta .icon { vertical-align: -2px; } .tag { color: var(--accent); }
.doc-summary { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px 0; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: var(--accent-soft); border-radius: var(--r-m); font-size: 14px; color: var(--ink-2); } .doc-summary[hidden] { display: none; } .sum-ico { color: var(--accent); margin-top: 1px; }
.doc-empty { text-align: center; padding: 60px 0; color: var(--muted); }
/* rendered content */
.doc-prose { font: 400 16.5px/1.72 var(--ui); color: var(--ink); letter-spacing: -.004em; }
.doc-prose h1, .doc-prose h2, .doc-prose h3, .doc-prose h4 { font-family: var(--read); font-weight: 500; letter-spacing: -.02em; line-height: 1.22; margin: 1.6em 0 .45em; position: relative; scroll-margin-top: 20px; } .doc-prose h1 { font-size: 30px; } .doc-prose h2 { font-size: 24px; } .doc-prose h3 { font-size: 19px; font-family: var(--ui); font-weight: 620; } .doc-prose h4 { font-size: 16px; font-family: var(--ui); font-weight: 620; }
.doc-prose > :first-child { margin-top: 0; } .doc-prose p { margin: .7em 0; } .doc-prose ul, .doc-prose ol { padding-left: 1.4em; margin: .6em 0; } .doc-prose li { margin: .25em 0; } .doc-prose li > ul, .doc-prose li > ol { margin: .2em 0; }
.doc-prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; } .doc-prose a.wl { text-decoration: none; background: var(--accent-soft); border-radius: 5px; padding: 0 5px; } .doc-prose a.wl.missing { color: var(--busy); background: color-mix(in srgb, var(--busy-dot) 14%, transparent); }
.doc-prose .anchor { position: absolute; left: -1.1em; opacity: 0; color: var(--muted); text-decoration: none; font-family: var(--ui); font-size: .7em; padding-right: .3em; } .doc-prose h1:hover .anchor, .doc-prose h2:hover .anchor, .doc-prose h3:hover .anchor, .doc-prose h4:hover .anchor { opacity: 1; }
.doc-prose code { font: 13.5px var(--mono); background: var(--hover); padding: 1px 6px; border-radius: 5px; } .code-block { position: relative; margin: 1em 0; } .code-block pre { margin: 0; padding: 14px 16px; background: var(--hover); border-radius: var(--r-m); overflow-x: auto; border: 1px solid var(--line); } .code-block pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
.code-lang { position: absolute; top: 7px; left: 12px; font: 11px var(--mono); color: var(--muted); } .code-block pre { padding-top: 26px; } .code-block:not(:has(.code-lang)) pre { padding-top: 14px; }
.code-copy { position: absolute; top: 6px; right: 8px; border: 0; background: var(--press); border-radius: 6px; font-size: 11.5px; padding: 2px 8px; color: var(--ink-2); opacity: 0; transition: opacity var(--dur-2); } .code-block:hover .code-copy { opacity: 1; }
.table-wrap { overflow-x: auto; margin: 1em 0; } .doc-prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; } .doc-prose th, .doc-prose td { border: 1px solid var(--line-2); padding: 7px 12px; vertical-align: top; } .doc-prose th { background: var(--hover); font-weight: 620; text-align: left; }
.doc-prose blockquote { margin: 1em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--line-2); color: var(--ink-2); } .doc-prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 2em 0; } .doc-prose img { max-width: 100%; border-radius: var(--r-m); }
.callout { margin: 1em 0; padding: 12px 16px; border-radius: var(--r-m); border: 1px solid var(--line); border-left-width: 4px; background: var(--hover); } .callout-title { font-weight: 620; margin-bottom: 4px; } .callout p:first-child { margin-top: 0; } .callout p:last-child { margin-bottom: 0; }
.callout.info { border-left-color: var(--accent); background: var(--accent-soft); } .callout.tip { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); } .callout.warn { border-left-color: var(--busy-dot); background: color-mix(in srgb, var(--busy-dot) 10%, transparent); } .callout.bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.task { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; } .task input { margin-top: .42em; accent-color: var(--accent); width: 16px; height: 16px; } .doc-prose li.task-item { list-style: none; margin-left: -1.3em; } .task input:checked + span { color: var(--muted); text-decoration: line-through; }
.doc-foot { margin-top: 56px; display: flex; flex-direction: column; gap: 22px; } .foot-sec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); display: flex; gap: 6px; align-items: center; } .foot-list { display: flex; flex-wrap: wrap; gap: 8px; } .foot-list a { padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--glass); color: var(--ink); font-size: 13.5px; } .foot-list a:hover { text-decoration: none; border-color: var(--line-2); } .foot-sec:empty { display: none; }
/* editor */
.doc-body.editing { margin: 0 -8px; } .ed-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1px; padding: 4px 5px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--glass-strong); overflow-x: auto; scrollbar-width: none; }
.ed-toolbar button { flex: none; min-width: 27px; height: 28px; padding: 0 6px; border: 0; background: transparent; border-radius: 6px; color: var(--ink-2); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } .ed-toolbar button:hover { background: var(--hover); color: var(--ink); } .ed-toolbar .sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; } .ed-toolbar .ai-btn { color: var(--accent); font-weight: 560; gap: 5px; }
.ed-host .CodeMirror { height: auto; min-height: 46vh; background: transparent; color: var(--ink); font: 400 16px/1.7 var(--ui); padding: 4px 8px; } .ed-host .CodeMirror-lines { padding: 6px 0 80px; } .ed-host .CodeMirror pre.CodeMirror-line { padding: 0 4px; } .ed-host .CodeMirror-cursor { border-left: 1.6px solid var(--accent); } .ed-host .CodeMirror-selected, .ed-host .CodeMirror-focused .CodeMirror-selected { background: var(--accent-soft); } .ed-host .CodeMirror-placeholder { color: var(--muted) !important; }
.ed-host .CodeMirror .cm-header { font-weight: 640; color: var(--ink); } .ed-host .CodeMirror .cm-header-1 { font: 500 28px var(--read); } .ed-host .CodeMirror .cm-header-2 { font: 500 22px var(--read); } .ed-host .CodeMirror .cm-header-3 { font-size: 18px; } .ed-host .CodeMirror .cm-strong { font-weight: 700; color: var(--ink); } .ed-host .CodeMirror .cm-em { font-style: italic; color: var(--ink); } .ed-host .CodeMirror .cm-strikethrough { text-decoration: line-through; } .ed-host .CodeMirror .cm-link, .ed-host .CodeMirror .cm-url { color: var(--accent); } .ed-host .CodeMirror .cm-quote { color: var(--ink-2); font-style: italic; } .ed-host .CodeMirror .cm-comment, .ed-host .CodeMirror .cm-formatting, .ed-host .CodeMirror .cm-formatting-header { color: var(--muted); } .ed-host .CodeMirror .cm-variable-2, .ed-host .CodeMirror .cm-variable-3, .ed-host .CodeMirror .cm-atom, .ed-host .CodeMirror .cm-string, .ed-host .CodeMirror .cm-keyword { color: var(--ink); } .ed-host .CodeMirror .cm-comment { font-family: var(--mono); font-size: 14px; }
.ai-out .anchor, .bub-body .anchor { display: none; }
.slash-menu, .sel-bar { position: fixed; z-index: 85; } .slash-menu { width: 280px; max-height: 330px; overflow-y: auto; padding: 5px; } .slash-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: transparent; border-radius: var(--r-s); text-align: left; font-size: 13.5px; color: var(--ink); } .slash-menu button.active { background: var(--press); }
.sl-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--hover); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink-2); flex: none; } .slash-menu button:has(.icon) .sl-ico { color: var(--accent); } .sl-main { display: flex; flex-direction: column; } .sl-main .muted { font-size: 11.5px; }
.sel-bar { display: flex; gap: 1px; padding: 4px; } .sel-bar button { border: 0; background: transparent; border-radius: 6px; padding: 5px 9px; font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .sel-bar button:hover { background: var(--hover); color: var(--ink); } .sel-bar button:last-child { color: var(--accent); }
.ai-sheet { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); max-height: min(62vh, 520px); display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-l); box-shadow: var(--shadow-3); z-index: 40; animation: rise var(--dur-3) var(--out); }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; } .ai-head .icon { color: var(--accent); }
.ai-ask { padding: 12px 14px 4px; } .ai-ask textarea { width: 100%; resize: none; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--glass); padding: 9px 11px; font: inherit; color: var(--ink); outline: none; margin-bottom: 8px; } .ai-ask textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ai-ask[hidden] { display: none; }
.ai-out { padding: 12px 16px; overflow-y: auto; flex: 1; min-height: 0; font-size: 14.5px; } .ai-out:empty { display: none; } .ai-foot { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); } .ai-foot[hidden] { display: none; }
.gen-bar { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--glass-strong); box-shadow: var(--shadow-3); z-index: 41; font-size: 13.5px; animation: rise var(--dur-3) var(--out); }
/* side panel */
.doc-side { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.side-tabs { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); } .side-tabs [role=tab] { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 520; position: relative; } .side-tabs [role=tab]:hover { background: var(--hover); color: var(--ink); } .side-tabs [aria-selected=true] { background: var(--press); color: var(--ink); } .side-tabs .side-x { margin-left: auto; width: 26px; height: 26px; }
.gcount.inl { position: static; margin-left: 2px; }
.side-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } .pad { padding: 12px 14px; }
.outline { list-style: none; margin: 0; padding: 8px 8px 20px; } .outline li { padding-left: calc(var(--l) * 14px); } .outline button { width: 100%; text-align: left; border: 0; background: transparent; padding: 5px 8px; border-radius: 6px; color: var(--ink-2); font-size: 13.5px; } .outline button:hover { background: var(--hover); color: var(--ink); } .outline li[style*="--l:0"] button { font-weight: 600; color: var(--ink); }
.chat { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .chat-empty { margin: auto; text-align: center; color: var(--muted); font-size: 13.5px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bubble.user { align-self: flex-end; max-width: 88%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--accent-soft); font-size: 14px; white-space: pre-wrap; } .bubble.assistant { font-size: 14px; } .bubble .doc-prose, .bub-body .doc-prose { font-size: 14px; } .bub-body .doc-prose p { margin: .5em 0; } .bub-body .code-block pre { font-size: 12.5px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; } .quick .chip { font-size: 12px; }
.chat-in { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--line); } .chat-in textarea { flex: 1; resize: none; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--glass); padding: 8px 11px; font: 14px/1.45 var(--ui); color: var(--ink); outline: none; max-height: 140px; } .chat-in textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .chat-in .send { width: 32px; height: 32px; }
.cm-list { flex: 1; padding: 0 10px; } .cm { padding: 10px 4px; border-top: 1px solid var(--line); font-size: 13.5px; } .cm.resolved { opacity: .55; } .cm-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; } .cm-head strong { font-weight: 600; } .cm-body { margin-top: 4px; white-space: pre-wrap; } .cm blockquote, blockquote.mini { margin: 6px 0; padding-left: 10px; border-left: 2px solid var(--line-2); color: var(--muted); font-size: 12.5px; }
.cm-in { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-top: 1px solid var(--line); } .cm-in textarea { border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--glass); padding: 8px 11px; font: 13.5px/1.45 var(--ui); color: var(--ink); resize: none; outline: none; } .cm-in .btn { align-self: flex-end; }
.hist { padding: 6px; } .hist-row { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 8px; border: 0; background: transparent; border-radius: var(--r-s); text-align: left; color: var(--ink); } .hist-row:hover { background: var(--hover); } .hist-t { display: block; font-size: 13.5px; font-weight: 540; } .hist-s { display: block; font-size: 12px; }
.diff-box { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m); font: 12.5px/1.55 var(--mono); } .dl { display: grid; grid-template-columns: 22px 1fr; white-space: pre-wrap; word-break: break-word; } .dl > span:first-child { text-align: center; color: var(--muted); } .dl.a { background: color-mix(in srgb, var(--ok) 13%, transparent); } .dl.d { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.tk-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 14px; } .tk-row:first-child { border-top: 0; } .tk-row input { margin-top: 4px; accent-color: var(--accent); }
@media (max-width: 1180px) { .doc-view { grid-template-columns: 240px minmax(0, 1fr) 0; } .doc-side { position: fixed; top: 52px; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 46; box-shadow: var(--shadow-3); } .doc-view.side-closed .doc-side { display: none; } }
@media (max-width: 860px) { .doc-view { grid-template-columns: 1fr; } .doc-tree { display: none; } .doc-title { font-size: 30px; } .doc-meta { margin-left: 0; } }
@media print { .gtop, .sidebar, .doc-tree, .doc-side, .doc-top, .doc-foot, .doc-summary, .notes, .ai-sheet { display: none !important; } .app { display: block; } .doc-scroll { overflow: visible; } .doc-page { max-width: none; padding: 0; } main, .view, .doc-view, .doc-main { display: block !important; height: auto !important; } body { background: #fff; } }

.side-tabs [role=tab] { white-space: nowrap; padding: 0 8px; } .side-tabs [role=tab][aria-selected=false] span { display: none; } .side-tabs [role=tab][aria-selected=false] { padding: 0 9px; }