/* Dev Hub, "Focus" layout: chat and live preview on two panels, chat list in a drawer (or pinned), Ctrl K search.
   Phone: one view at a time with a tab bar at the bottom. */
:root {
  --bg: #F5F6F8;
  --panel: #FFFFFF;
  --sunken: #F0F2F5;
  --line: #E3E6EB;
  --line-strong: #D5DAE1;
  --text: #15171C;
  --muted: #5B616E;
  --faint: #8A909C;
  --accent: #0F7B5F;
  --accent-hover: #0A5C47;
  --accent-soft: #E8F3EF;
  --ok: #1F9D55;
  --warn: #C2620A;
  --warn-text: #8A4A0B;
  --warn-soft: #FFF8EE;
  --warn-line: #F1D3A8;
  --warn-track: #F3E1C6;
  --ink: #15171C;
  --on-ink: #FFFFFF;
  --shadow: 0 1px 2px rgb(20 22 28 / .05), 0 8px 24px rgb(20 22 28 / .04);
  --shadow-pop: 0 20px 60px rgb(20 22 28 / .25);
  --radius: 14px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  /* Session status: always icon + word + colour, never colour alone. */
  --working: #2E5BDB;
  --working-text: #2347B0;
  --working-soft: #EAF0FD;
  --needs: #B54708;
  --needs-text: #93370D;
  --needs-soft: #FEF3E6;
  --needs-line: #F7D3A6;
  --ready: #157F4B;
  --ready-soft: #E8F6EE;
  --failed: #B42318;
  --failed-soft: #FDECEA;
  --failed-line: #F4B9B2;
  --idle: #8A93A3;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1115;
    --panel: #171A20;
    --sunken: #1E2128;
    --line: #262A33;
    --line-strong: #2E323B;
    --text: #E6E8EC;
    --muted: #A8AEB8;
    --faint: #7C828E;
    --accent: #3CCB9A;
    --accent-hover: #7FE0BD;
    --accent-soft: #173A30;
    --warn-text: #F2B66B;
    --warn-soft: #241A0E;
    --warn-line: #5A3B17;
    --warn-track: #3A2A15;
    --ink: #E6E8EC;
    --on-ink: #0F1115;
    --shadow: 0 1px 2px rgb(0 0 0 / .3);
    --shadow-pop: 0 20px 60px rgb(0 0 0 / .6);
    --working: #7EA2F5;
    --working-text: #A9C0F8;
    --working-soft: #18223A;
    --needs: #F2A15B;
    --needs-text: #F6C38E;
    --needs-soft: #2A1C0E;
    --needs-line: #5A3B17;
    --ready: #5BD08F;
    --ready-soft: #13291D;
    --failed: #F08A80;
    --failed-soft: #2E1614;
    --failed-line: #5C2520;
    --idle: #6E7582;
  }
}

* { box-sizing: border-box; }

/* Pinned to the window: 100dvh went stale when Chrome resized the page (e.g. an info bar), leaving a blank strip. */
body {
  margin: 0;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  font: 14px/1.45 var(--font);
  background: var(--bg);
  color: var(--text);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.icon { display: inline-grid; place-items: center; flex: none; }

/* ---------- top bar ---------- */
.topbar {
  flex: none;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; color: var(--accent); text-decoration: none; padding: 6px; border-radius: 8px; }
.logo-text { color: var(--text); font-weight: 700; font-size: 15px; }
.crumb { height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-weight: 700; font-size: 15px; white-space: nowrap; }
.crumb:hover { background: var(--sunken); }
.crumb-sep { color: var(--line-strong); }
.chat-title {
  min-width: 0;
  max-width: 460px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sunken);
}
.chat-title:hover { border-color: var(--line-strong); }
.chat-title .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title .count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.spacer { flex: 1; }

.search-button {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
}
.search-button:hover { border-color: var(--line-strong); color: var(--text); }
kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; font: 11px var(--mono); color: var(--muted); }

.account-pill {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font: 12px var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.account-pill.high { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.meter-mini { width: 44px; height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.account-pill.high .meter-mini { background: var(--warn-track); }
.meter-mini span { display: block; height: 100%; background: var(--ok); }
.account-pill.high .meter-mini span { background: var(--warn); }

.square {
  width: 40px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}
.square.small { width: 34px; height: 34px; }
.square:hover { border-color: var(--line-strong); }
.square[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.primary { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 600; }
.primary:hover { opacity: .9; }
.block { width: 100%; }
.ghost { height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); }
.ghost:hover { background: var(--sunken); }

/* ---------- layout ---------- */
.layout { position: relative; flex: 1; min-height: 0; display: flex; gap: 0; padding: 12px; }
.pane { min-width: 0; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.chat-pane { flex: 0 0 var(--split, 45%); }
body.no-preview .chat-pane, body.home-view .chat-pane { flex: 1; }
body.no-preview .preview-pane, body.home-view .preview-pane, body.no-preview .splitter, body.home-view .splitter { display: none; }
.preview-pane { flex: 1; }
iframe { flex: 1; width: 100%; border: 0; background: var(--panel); }

/* ---------- chat list: a drawer, or pinned as a column ---------- */
.history {
  position: absolute;
  z-index: 20;
  top: 12px;
  left: 12px;
  bottom: 12px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  transform: translateX(calc(-100% - 24px));
  visibility: hidden;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s .2s;
}
body.history-open .history { transform: none; visibility: visible; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.scrim { position: absolute; inset: 0; z-index: 10; border: 0; background: rgb(21 23 28 / .32); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.history-open .scrim { opacity: 1; pointer-events: auto; }

body.history-pinned .history { position: static; flex: 0 0 290px; transform: none; visibility: visible; box-shadow: var(--shadow); transition: none; }
body.history-pinned .scrim { display: none; }
body.history-pinned #history-close { display: none; }

.history-head { display: flex; align-items: center; gap: 6px; }
.history-head b { flex: 1; font-size: 16px; }
.search-field input, .palette-input input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); outline: none; }
.search-field input:focus { border-color: var(--accent); }
.history-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; }
.history-group { margin: 10px 4px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.history-item { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.history-item:hover { background: var(--sunken); }
.history-item[aria-current="true"] { background: var(--accent-soft); }
.history-item .title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item[aria-current="true"] .title { font-weight: 600; }
.history-item .title { display: flex; align-items: center; gap: 0; }
.history-item .title .title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.history-item.unread .title-text { font-weight: 700; }
.unread-badge { flex: none; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.history-item .meta { display: block; font-size: 12px; color: var(--muted); }
.history-empty { padding: 20px 8px; color: var(--muted); }

/* ---------- preview ---------- */
.preview-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.status-dot { width: 9px; height: 9px; margin: 0 4px; border-radius: 50%; background: var(--faint); flex: none; }
.status-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgb(31 157 85 / .15); }
.route { flex: 1; min-width: 0; display: flex; align-items: center; height: 34px; border-radius: 8px; background: var(--sunken); font: 12.5px var(--mono); overflow: hidden; border: 1px solid transparent; }
.route:focus-within { border-color: var(--accent); background: var(--panel); }
.route-base { flex: 0 1 auto; min-width: 0; padding-left: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route input { flex: 1 0 80px; min-width: 80px; height: 32px; padding: 0 8px 0 1px; border: 0; background: transparent; outline: none; }
.preview-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--muted); background: var(--panel); }
.preview-empty b { color: var(--text); font-size: 17px; }

/* ---------- home ---------- */
.home { flex: 1; overflow-y: auto; }
.home-inner { max-width: 980px; margin: 0 auto; padding: 32px 28px 48px; }
.home h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.home h2 { margin: 40px 0 0; font-size: 20px; }
.home p { margin: 6px 0 0; }
.projects, .accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 18px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; }
button.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.card h3 .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .state { font-size: 13px; color: var(--muted); }
.card .last { padding: 9px 11px; border-radius: 8px; background: var(--sunken); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.new { border-style: dashed; justify-content: center; }
.account.active { border-color: var(--accent); }
.account .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.badge { justify-self: start; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.ok { background: var(--ok); }
.usage { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.limit { display: grid; gap: 4px; }
.limit + .limit { margin-top: 6px; }
.resets { font-size: 12px; color: var(--faint); }
.stat { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.stat b { color: var(--text); font-weight: 600; font-family: var(--mono); font-size: 12px; }
.meter { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--ok); }
.meter span.high { background: var(--warn); }
.add-account { grid-column: 1 / -1; font-size: 13px; }
.add-account-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.add-account-row input { flex: 1 1 220px; min-width: 0; }
.add-account .button { display: inline-block; padding: 7px 12px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; }

.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.card .name-row { display: flex; align-items: center; gap: 8px; }
.card .empty-note { font-size: 13px; color: var(--faint); }

.connect-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.connect-form .field input { width: 100%; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.device-code { display: flex; flex-direction: column; gap: 6px; }
.device-code { align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--sunken); }
.device-code b { font: 600 32px var(--mono); letter-spacing: .1em; }
.link-button { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Projects screen tabs ---------- */
.home-tabs { display: flex; gap: 4px; margin-bottom: 24px; padding: 4px; border-radius: 12px; background: var(--sunken); width: fit-content; max-width: 100%; overflow-x: auto; }
.home-tabs button { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 500; white-space: nowrap; }
.home-tabs button[aria-selected="true"] { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.home-panel h1 { margin: 0; font-size: 28px; letter-spacing: -.01em; }

/* ---------- connectors ---------- */
.connectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.connector { gap: 14px; }
.connector-head { display: flex; gap: 12px; align-items: flex-start; }
.connector-head h3 { margin: 2px 0 2px; font-size: 16px; }
.connector-head p { margin: 0; font-size: 13px; }
.mark { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--on-ink); }
.mark-azure-devops { background: #0B63C5; color: #FFFFFF; }
.account-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.account-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.account-row .who { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.account-row .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.account-row .who small { color: var(--muted); font-size: 12px; }
.row-actions { display: flex; gap: 6px; }
.small-button { height: 30px; padding: 0 10px; font-size: 13px; }
.danger { color: #B42318; }
.dot.warn { background: var(--warn); }
.account .state.warn { color: var(--needs-text); }
.connector > .ghost, .connector > .primary { align-self: flex-start; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.note { padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-text); font-size: 13px; }
.sheet-body { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.sheet-body p { margin: 0; }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head h2 { margin: 0; font-size: 20px; }

/* ---------- new project sheet ---------- */
.sheet.wide { width: min(640px, calc(100% - 24px)); }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sunken); overflow-x: auto; }
.segmented button { flex: 1; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); white-space: nowrap; }
.segmented button[aria-selected="true"] { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.field select { height: 42px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); }
.repo-area { max-height: min(340px, 45vh); overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.repo-area > p { margin: 0; padding: 16px; }
.repo-list { list-style: none; margin: 0; padding: 4px; }
.repo-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.repo { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.repo:hover { background: var(--sunken); }
.repo[aria-pressed="true"] { background: var(--accent-soft); }
.repo-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked { font-size: 13px; color: var(--accent); font-weight: 600; }
.sheet { width: min(520px, calc(100% - 24px)); padding: 0; border: 0; border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow-pop); }
.sheet::backdrop { background: rgb(21 23 28 / .32); }
.sheet form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.sheet h2 { margin: 0; font-size: 20px; }
.sheet p { margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-weight: 600; }
.field input { height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); outline: none; }
.field input:focus { border-color: var(--accent); }
.form-status { min-height: 1.4em; color: var(--muted); }
.form-status.error { color: #B42318; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }
.primary:disabled { opacity: .6; cursor: progress; }

/* ---------- Ctrl K palette ---------- */
.palette { position: fixed; inset: 0; z-index: 50; }
.palette-scrim { position: absolute; inset: 0; border: 0; background: rgb(21 23 28 / .28); cursor: default; }
.palette-box { position: absolute; top: 12vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100% - 24px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.palette-input { display: block; padding: 10px; border-bottom: 1px solid var(--line); }
.palette-input input { height: 44px; font-size: 16px; background: var(--panel); border-color: transparent; }
.palette-list { overflow-y: auto; padding: 6px; }
.palette-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.palette-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.palette-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .hint { color: var(--muted); font-size: 12px; white-space: nowrap; }
.palette-item[aria-selected="true"] { background: var(--accent-soft); }
.palette-empty { padding: 18px 10px; color: var(--muted); }

/* ---------- phone tabs ---------- */
.tabs { display: none; }

@media (max-width: 860px) {
  .logo-text, .search-label, .crumb-sep, .chat-title .count, #toggle-preview, .account-pill .email { display: none; }
  .crumb { padding: 0 6px; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
  .chat-title { flex: 1; max-width: none; }
  .search-button { width: 40px; padding: 0; justify-content: center; }
  .search-button kbd { display: none; }
}

@media (max-width: 760px) {
  .topbar { height: auto; min-height: 56px; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .account-pill { padding: 0 10px; }
  .layout { padding: 0; gap: 0; }
  .pane { border-radius: 0; box-shadow: none; }
  .chat-pane, .preview-pane { flex: 1 !important; display: none !important; }
  body[data-tab="chat"] .chat-pane, body[data-tab="home"] .chat-pane { display: flex !important; }
  body[data-tab="preview"] .preview-pane { display: flex !important; }
  .history, body.history-pinned .history { position: absolute; inset: 0; width: auto; border-radius: 0; box-shadow: none; }
  body.history-pinned:not(.history-open) .history { transform: translateX(-100%); visibility: hidden; }
  #history-pin { display: none; }
  body.history-pinned #history-close { display: inline-grid; }
  .home-inner { padding: 22px 16px 32px; }
  .palette-box { top: 8px; max-height: calc(100% - 16px); }

  .tabs {
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--line);
  }
  .tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
  .tabs button[aria-current="true"] { color: var(--accent); font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .history, .scrim { transition: none !important; }
}

/* ---------- the hub's own chat ---------- */
.chat-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.segmented.compact { padding: 3px; border-radius: 10px; }
.segmented.compact button { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
.text-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.text-link:hover { color: var(--accent); }
.chat-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.transcript-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.transcript-inner { max-width: 820px; margin: 0 auto; padding: 24px 24px 12px; display: flex; flex-direction: column; gap: 14px; }
#chat-transcript { display: flex; flex-direction: column; gap: 14px; }
.chat-empty { padding: 40px 0 10px; }
.chat-empty h2 { margin: 0 0 4px; font-size: 22px; }

.msg.user { align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg.user .bubble { padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--on-ink); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msg-note { font-size: 12px; color: var(--muted); }
.msg.claude { line-height: 1.6; overflow-wrap: anywhere; }
.msg.live { opacity: .92; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 10px; white-space: pre-wrap; }
.prose h3, .prose h4, .prose h5, .prose h6 { margin: 18px 0 8px; line-height: 1.3; }
.prose h3 { font-size: 19px; } .prose h4 { font-size: 16px; } .prose h5, .prose h6 { font-size: 14px; }
.prose ul, .prose ol { margin: 0 0 10px; padding-left: 22px; }
.prose li { margin: 3px 0; }
.prose code { padding: 1px 6px; border-radius: 5px; background: var(--sunken); font: 12.5px var(--mono); }
.prose blockquote { margin: 0 0 10px; padding: 4px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); white-space: pre-wrap; }
.code-block { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 4px 12px; background: var(--sunken); font: 12px var(--mono); color: var(--muted); }
.code-copy { height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; }
.code-copy:hover { background: var(--panel); color: var(--text); }
.code-block pre { margin: 0; padding: 12px; overflow-x: auto; font: 12.5px/1.55 var(--mono); }
.code-block pre code { padding: 0; background: none; }
.table-wrap { margin: 0 0 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 13px; }
.prose th, .prose td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--sunken); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }

.steps { border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.steps > summary { padding: 8px 12px; cursor: pointer; color: var(--muted); font-weight: 500; list-style-position: inside; }
.steps[open] > summary { border-bottom: 1px solid var(--line); }
.step-list { display: flex; flex-direction: column; padding: 4px; }
.step > summary { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; list-style: none; min-width: 0; }
.step > summary::-webkit-details-marker { display: none; }
.step > summary:hover { background: var(--sunken); }
.step-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); transform: translateY(-1px); }
.step-dot.running { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.step-dot.failed { background: #B42318; }
.step-verb { flex: none; font-weight: 600; }
.step-detail { min-width: 0; color: var(--muted); font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-io { margin: 4px 8px 8px; padding: 10px; max-height: 280px; overflow: auto; border-radius: 8px; background: var(--sunken); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.step-io.error { color: #B42318; }
.working { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.working.waiting { color: var(--needs-text); font-weight: 600; }
.question-hint { margin: 0; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.chat-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FEF3F2; color: #B42318; font-size: 13px; }

.approval { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--warn-line); border-radius: 12px; background: var(--warn-soft); }
.approval h4 { margin: 0; font-size: 15px; }
.approval p { margin: 0; }
.approval .step-io { margin: 0; background: var(--panel); }
/* Background work still running after the answer: information, not a question. */
.approval.background-work { border-color: var(--line); background: var(--panel); }
.approval.background-work h4 { font-size: 14px; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* A key Claude asked for (keycard.js) and Files ▸ Keys (keyspanel.js): a locked field, the value is never shown. */
.key-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.key-name { font: 12.5px var(--mono); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); overflow-wrap: anywhere; }
.secret-field { display: flex; gap: 6px; }
.secret-field input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); font: 13px var(--mono); }
.secret-field .small-button { height: 38px; }
.key-where code { font: 12px var(--mono); overflow-wrap: anywhere; }
.key-error { color: var(--failed); font-size: 13px; }
.keys-path { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-weight: 600; }
.keys-row { font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
.keys-row .file-icon { width: 14px; display: inline-flex; }
.keys-view { flex: 1; min-height: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; overflow-y: auto; }
.keys-view h4 { margin: 8px 0 0; font-size: 14px; }
.keys-view p { margin: 0; }
.key-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.key-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.key-row .key-name { border: 0; background: transparent; padding: 0; font-weight: 500; }
.key-dots { font: 12.5px var(--mono); color: var(--faint); letter-spacing: .08em; }
.key-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.key-edit, .key-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.key-edit .secret-field { min-width: 220px; flex: 1; }
.key-add .key-new-name { flex: 1 1 200px; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); font: 13px var(--mono); }
.key-add .secret-field { flex: 2 1 260px; }
.key-add .primary { height: 38px; }
.danger.small-button { border-color: var(--failed-line); background: var(--failed-soft); }
.question { display: flex; flex-direction: column; gap: 8px; }
.question-text { font-weight: 600; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.choice { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); text-align: left; }
.choice span { font-size: 12px; color: var(--muted); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.question input { height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); }

.composer { flex: none; max-width: 820px; width: 100%; margin: 0 auto; padding: 8px 18px 16px; }
.composer textarea { width: 100%; min-height: 48px; max-height: 240px; padding: 14px 18px 4px; border: 0; border-radius: 0; background: transparent; resize: none; outline: none; font-size: 15px; line-height: 1.5; display: block; }
.composer-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px 10px; }
.composer:focus-within textarea, .composer:focus-within .composer-bar { border-color: var(--accent); }
.composer select { height: 32px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 13px; max-width: 46%; }
.composer .primary, .composer .ghost { height: 36px; }

.terminal-view { flex: 1; min-height: 0; padding: 8px; background: var(--panel); }
.terminal-host { width: 100%; height: 100%; }

/* ---------- preview: the app (the browser shared with Claude) or the canvas ---------- */
.app-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.browser-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--sunken); outline: none; }
.browser-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.browser-stage img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left top; cursor: default; user-select: none; -webkit-user-drag: none; }
.preview-stage { position: relative; flex: 1; min-height: 0; display: flex; background: #FFFFFF; }
.preview-note { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.claude-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.claude-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.claude-toggle.busy { border-color: var(--accent); color: var(--accent); }
.claude-toggle.busy .claude-dot { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.claude-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* Talk mode: the Talk button, and the bar under the app with what you said and what Claude is saying. */
.talk-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.talk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.talk-toggle[aria-pressed="true"] { background: var(--needs-soft); border-color: transparent; color: var(--needs-text); }
.talk-toggle[aria-pressed="true"] .talk-dot, .talk-bar .talk-dot { background: var(--needs); }
.talk-bar { flex: none; display: grid; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.talk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.talk-head b { font-size: 13px; }
.talk-hint { font-size: 12px; color: var(--faint); }
.talk-buttons { margin-left: auto; display: flex; gap: 6px; }
.talk-end { background: var(--needs); border-color: var(--needs); color: var(--on-ink); }
.talk-bar[data-state="listening"] .talk-dot { animation: pulse 1.2s ease-in-out infinite; }
.talk-bar[data-state="speaking"] .talk-dot { background: var(--accent); animation: pulse .6s ease-in-out infinite; }
.talk-bar[data-state="thinking"] .talk-dot { background: var(--working); }
.talk-bar[data-state="muted"] .talk-dot { background: var(--faint); }
.talk-caption { margin: 0; font-size: 13px; line-height: 1.45; padding: 7px 10px; border-radius: 10px; max-width: 92%; overflow-wrap: anywhere; }
.talk-caption.you { justify-self: end; background: var(--sunken); }
.talk-caption.claude { justify-self: start; background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .talk-bar .talk-dot { animation: none !important; } }

@media (max-width: 760px) {
  .transcript-inner { padding: 16px 14px 8px; }
  .composer { padding: 6px 8px 8px; }
  .msg.user { max-width: 92%; }
}

/* ---------- Files and Changes ---------- */
.files-view { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(220px, 30%) 1fr; }
.changes-view { grid-template-columns: minmax(300px, 42%) 1fr; }
.file-tree, .changes-side { min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); padding: 6px 4px; }
.file-row { width: 100%; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 13px; }
.file-row:hover { background: var(--sunken); }
.file-row.current { background: var(--accent-soft); font-weight: 600; }
.file-icon { width: 12px; flex: none; color: var(--muted); font-size: 11px; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unsaved-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--warn); flex: none; }
.file-editor, .changes-diff { min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.file-editor .file-head, .changes-diff .file-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.file-path { flex: 1; min-width: 0; font: 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-status.error { color: #B42318; }
.file-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.file-text { flex: 1; width: 100%; padding: 12px 14px; border: 0; resize: none; outline: none; background: var(--panel); font: 12.5px/1.6 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
.file-message { padding: 24px; }
.only-phone { display: none; }

.changes-side { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.changes-side h4 { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.git-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.git-bar select, .git-bar input { height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); font-size: 13px; max-width: 100%; }
.git-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; overflow-wrap: anywhere; }
.git-note.error { background: #FEF3F2; color: #B42318; }
.change-list, .commit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.change-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 13px; }
.change-row:hover { background: var(--sunken); }
.change-row.current { background: var(--accent-soft); }
.change-label { flex: none; min-width: 64px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--warn-text); }
.change-label.new, .change-label.added { color: var(--ok); }
.change-label.deleted { color: #B42318; }
.change-path { flex: 1; min-width: 0; font: 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commit-box { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.commit-message { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; background: var(--panel); }
.commit-list li { display: flex; flex-direction: column; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.diff { flex: 1; margin: 0; padding: 10px 0; overflow: auto; font: 12.5px/1.55 var(--mono); }
.diff-line { display: block; padding: 0 14px; white-space: pre; }
.diff-line.add { background: #E6F4EC; color: #12663A; }
.diff-line.del { background: #FEF3F2; color: #B42318; }
.diff-line.hunk { color: #1D4ED8; background: var(--sunken); }
@media (prefers-color-scheme: dark) {
  .diff-line.add { background: #12301F; color: #7FE0A6; }
  .diff-line.del { background: #3A1515; color: #F5A3A3; }
}

@media (max-width: 760px) {
  .files-view { grid-template-columns: 1fr; }
  .files-view.showing-file > :first-child { display: none; }
  .files-view:not(.showing-file) > :last-child { display: none; }
  .file-tree, .changes-side { border-right: 0; }
  .only-phone { display: inline-flex; align-self: flex-start; margin: 8px 12px 0; }
}


/* ---------- tool rail, resize handle, preview toolbar ---------- */
.tool-rail { flex: none; width: 64px; margin-right: 10px; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
body.home-view .tool-rail { display: none; }
.tool-rail button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 7px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); }
.tool-rail button:hover { background: var(--sunken); color: var(--text); }
.tool-rail button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.rail-label { font-size: 11px; font-weight: 600; }

.splitter { flex: none; width: 12px; position: relative; cursor: col-resize; touch-action: none; outline: none; }
.splitter::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--line-strong); transition: background .15s, height .15s; }
.splitter:hover::after, .splitter:focus-visible::after, body.resizing .splitter::after { height: 72px; background: var(--accent); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe, body.resizing .browser-stage, body.resizing .terminal-view { pointer-events: none; }

.preview-toolbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.preview-toolbar .segmented { flex: none; }
.preview-tools { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.preview-tools[hidden] { display: none !important; }

/* ---------- polish ---------- */
.prose table { overflow-wrap: normal; word-break: normal; }
.prose th { white-space: nowrap; }
.prose td { min-width: 90px; }
.prose td:first-child, .prose th:first-child { min-width: 64px; }
.msg.claude { font-size: 14.5px; }
.prose h3 { padding-top: 6px; }
.steps { background: var(--sunken); border-color: transparent; }
.steps > summary { list-style: none; display: flex; align-items: center; gap: 8px; }
.steps > summary::-webkit-details-marker { display: none; }
.steps > summary::before { content: "›"; display: inline-block; width: 10px; color: var(--faint); font-size: 16px; transition: transform .15s; }
.steps[open] > summary::before { transform: rotate(90deg); }
.steps[open] { background: var(--panel); border-color: var(--line); }
.composer select { border-radius: 999px; padding: 0 10px; background: var(--sunken); border-color: transparent; color: var(--muted); }
.composer select:hover { color: var(--text); }
.composer textarea::placeholder { color: var(--faint); }
.chat-empty h2 { font-size: 24px; letter-spacing: -.01em; }

@media (max-width: 760px) {
  .layout { flex-direction: column; padding: 0; }
  .tool-rail { width: auto; margin: 0; flex-direction: row; justify-content: space-around; padding: 4px 6px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
  body[data-tab="preview"] .tool-rail { display: none; }
  .tool-rail button { flex: 1; flex-direction: row; justify-content: center; gap: 6px; padding: 8px 0; }
  .splitter { display: none !important; }
  .preview-toolbar { flex-wrap: wrap; }
}

/* ---------- sessions: status dots, tabs, Now board, pop-ups, settings ---------- */
.status-chip-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--idle); vertical-align: middle; }
.status-chip-dot.working { background: transparent; border: 2px solid var(--working); border-right-color: transparent; animation: spin 1s linear infinite; }
.status-chip-dot.needs { background: var(--needs); box-shadow: 0 0 0 3px var(--needs-soft); }
.status-chip-dot.ready { background: var(--ready); }
.status-chip-dot.failed { background: var(--failed); border-radius: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

.new-chat-top { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border-radius: 999px; font-weight: 600; }
body.home-view .new-chat-top { display: none; }

#rail-sessions { position: relative; }
.rail-badge { position: absolute; top: 4px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--needs); color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.rail-divider { height: 1px; margin: 4px 8px; background: var(--line); }

.session-tabs { flex: none; display: flex; align-items: stretch; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); background: var(--sunken); overflow-x: auto; scrollbar-width: none; }
.session-tabs::-webkit-scrollbar { display: none; }
.session-tab { flex: 0 1 220px; min-width: 120px; display: flex; align-items: center; border-radius: 9px 9px 0 0; color: var(--muted); }
.session-tab:hover { background: var(--panel); color: var(--text); }
.session-tab.current { background: var(--panel); color: var(--text); box-shadow: 0 -1px 0 var(--line) inset, 1px 0 0 var(--line), -1px 0 0 var(--line); }
.session-tab-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 10px; border: 0; background: transparent; text-align: left; }
.session-tab-project { flex: none; font-size: 12px; font-weight: 600; }
.session-tab-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.session-tab.current .session-tab-title { color: var(--text); }
.session-tab-close { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--faint); opacity: 0; }
.session-tab:hover .session-tab-close, .session-tab.current .session-tab-close, .session-tab-close:focus-visible { opacity: 1; }
.session-tab-close:hover { background: var(--sunken); color: var(--text); }
.session-tab-new { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px 9px 0 0; background: transparent; color: var(--muted); }
.session-tab-new:hover { background: var(--panel); color: var(--text); }

.history-group.status-group { display: flex; align-items: center; gap: 6px; }
.history-group.status-group.needs-you { color: var(--needs-text); }
.history-group.status-group.working { color: var(--working-text); }
.history-group.status-group.ready { color: var(--ready); }
.history-group.status-group.error { color: var(--failed); }
.history-item .title .status-chip-dot { margin-right: 7px; }
.history-item.needs-you { background: var(--needs-soft); }

.home-inner:has(#panel-now:not([hidden])) { max-width: 1240px; }
.now-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.now-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.now-column h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.now-column h2 .count { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--sunken); font-size: 12px; letter-spacing: 0; }
.now-column.idle { margin-top: 28px; }
.now-column.idle .now-card { flex-direction: row; align-items: baseline; gap: 12px; padding: 10px 14px; }
.now-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; transition: border-color .15s, transform .15s; }
.now-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.now-card.needs-you { border-color: var(--needs-line); background: linear-gradient(var(--needs-soft), var(--panel) 70%); }
.now-card.working { border-left: 3px solid var(--working); }
.now-card.ready { border-left: 3px solid var(--ready); }
.now-card.error { border-left: 3px solid var(--failed); }
.now-card-head { display: flex; align-items: center; gap: 8px; }
.now-card-title { font-size: 14.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.now-quiet { display: grid; justify-items: start; gap: 8px; padding: 28px; border: 1px dashed var(--line-strong); border-radius: 14px; }
.now-quiet b { font-size: 17px; }
.skip-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--failed-soft); color: var(--failed); font-size: 11px; font-weight: 700; }

.mini-approval { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--needs-line); border-radius: 10px; background: var(--needs-soft); cursor: default; }
.mini-approval b { color: var(--needs-text); font-size: 13px; }
.mini-approval .mini-summary { display: block; padding: 6px 8px; border-radius: 6px; background: var(--panel); font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 4.4em; overflow: hidden; }
.mini-approval .card-actions { justify-content: flex-start; }
.mini-approval.compact .primary, .mini-approval.compact .ghost { height: 32px; padding: 0 12px; font-size: 13px; }
.mini-approval.answered { opacity: .5; pointer-events: none; }

.toasts { position: fixed; z-index: 60; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-pop); border: 1px solid var(--line); pointer-events: auto; animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
.toast-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.toast-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.toast .small-button { height: 30px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

select.danger-mode { background: var(--failed-soft) !important; color: var(--failed) !important; font-weight: 700; border-color: var(--failed-line) !important; }

.settings { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.settings-section { padding: 4px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.settings-section h2 { margin: 14px 0 2px; font-size: 16px; }
.setting-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-link { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.setting-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.setting-row select { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); }
.switch { flex: none; position: relative; width: 42px; height: 24px; border: 0; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

.repo-picker { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left; }
.repo-picker .change-row { display: flex; justify-content: space-between; gap: 12px; }

@media (max-width: 760px) {
  .session-tabs { display: none; }
  .toasts { bottom: 76px; }
  .new-chat-top .label { display: none; }
  .new-chat-top { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .status-chip-dot.working { animation: none; border-right-color: var(--working); }
  .toast { animation: none; }
}

/* ---------- activity log ---------- */
.home-inner:has(#panel-activity:not([hidden])) { max-width: 1240px; }
.activity { display: flex; flex-direction: column; gap: 14px; }
.activity-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.activity-tools select, .activity-tools input { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); }
.activity-tools input { flex: 1; min-width: 200px; }
.activity-tools [aria-pressed="true"] { background: var(--failed-soft); color: var(--failed); border-color: var(--failed-line); }
.activity-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.activity-stat { display: flex; flex-direction: column; min-width: 104px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.activity-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.activity-stat span { font-size: 12px; color: var(--muted); }
.activity-stat.bad b { color: var(--failed); }
.activity-failing { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 4px; }
.chip { height: 28px; padding: 0 10px; border: 1px solid var(--failed-line); border-radius: 999px; background: var(--failed-soft); color: var(--failed); font-size: 12.5px; font-weight: 600; }
.activity-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.activity-row { display: grid; grid-template-columns: 84px 120px 150px 1fr auto; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.activity-row:first-child { border-top: 0; }
.activity-row time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.activity-project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 600; }
.activity-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.activity-row.bad { background: var(--failed-soft); }
.activity-row.bad .activity-label { color: var(--failed); }
.activity-row.good .activity-label { color: var(--ready); }
.activity-row.ask .activity-label { color: var(--needs-text); }
.activity-row .small-button { height: 28px; }
@media (max-width: 760px) {
  .activity-row { grid-template-columns: 1fr auto; grid-template-areas: "label time" "text text" "project open"; row-gap: 2px; }
  .activity-row time { grid-area: time; }
  .activity-label { grid-area: label; }
  .activity-text { grid-area: text; white-space: normal; }
  .activity-project { grid-area: project; }
}

/* ---------- skills menu, skill chip, Skip permissions switch ---------- */
.composer { position: relative; }
.skill-menu { position: absolute; z-index: 30; left: 18px; right: 18px; bottom: calc(100% + 8px); max-height: min(420px, 55vh); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-pop); }
.skill-head { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -6px -6px 4px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
.skill-query { font-family: var(--mono); color: var(--accent); }
.skill-keys { margin-left: auto; }
.skill-group { padding: 8px 8px 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.skill-row { display: grid; grid-template-columns: minmax(140px, max-content) 1fr auto; align-items: baseline; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.skill-row b { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.skill-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.skill-row code { font-size: 11.5px; color: var(--faint); }
.skill-row:hover { background: var(--sunken); }
.skill-row[aria-selected="true"] { background: var(--accent-soft); }
.skill-row[aria-selected="true"] span { color: var(--text); }
.skill-empty { margin: 0; padding: 14px; color: var(--muted); }
.composer-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.composer-chips:not([hidden]) + label + textarea { border-top: 0; border-radius: 0; }
.composer:focus-within .composer-chips { border-color: var(--accent); }
.skill-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #EEF0FF; color: #3E3BB0; font: 600 12.5px var(--mono); }
.skill-chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.skill-chip button:hover { background: rgb(62 59 176 / .12); }
@media (prefers-color-scheme: dark) { .skill-chip { background: #23234A; color: #B9B7FF; } }
.skills-button, .skip-switch { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: 13px; }
.skills-button span { font-family: var(--mono); color: #3E3BB0; font-weight: 700; }
.skills-button:hover, .skip-switch:hover { color: var(--text); }
.skip-switch .track { position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.skip-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.skip-switch[aria-checked="true"] { background: var(--failed-soft); border-color: var(--failed-line); color: var(--failed); font-weight: 700; }
.skip-switch[aria-checked="true"] .track { background: var(--failed); }
.skip-switch[aria-checked="true"] .track::after { transform: translateX(11px); }
.composer.skipping textarea, .composer.skipping .composer-bar, .composer.skipping .composer-chips { border-color: var(--failed-line) !important; }
#chat-mode:disabled { opacity: .45; }
@media (max-width: 760px) {
  .skill-row { grid-template-columns: 1fr; gap: 2px; }
  .skill-keys { display: none; }
}

/* ---------- design canvas ---------- */
.canvas-view { position: relative; flex: 1; min-height: 0; display: flex; }
.canvas-viewport { position: relative; flex: 1; overflow: hidden; cursor: grab; touch-action: none; background-color: var(--sunken); background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); }
.canvas-viewport.panning { cursor: grabbing; }
.canvas-viewport.commenting { cursor: crosshair; }
.canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.canvas-board { position: absolute; }
.canvas-board iframe { display: block; border: 0; border-radius: 6px; background: #FFFFFF; box-shadow: 0 4px 24px rgb(16 24 40 / .10); }
.board-label { position: absolute; left: 0; bottom: 100%; display: flex; align-items: center; gap: 10px; padding-bottom: 8px; white-space: nowrap; color: var(--muted); transform-origin: 0 100%; }
.board-label b { font-size: 16px; color: var(--text); }
.board-updated { display: none; padding: 2px 8px; border-radius: 999px; background: var(--working-soft); color: var(--working-text); font-size: 12px; font-weight: 600; }
.canvas-board.just-updated .board-updated { display: inline; animation: fade-out 8s forwards; }
@keyframes fade-out { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.board-shield { position: absolute; inset: 0; }
.canvas-board.focused iframe { outline: 3px solid var(--accent); outline-offset: 4px; }
.canvas-board.focused .board-shield { pointer-events: none; }
.canvas-viewport.commenting .board-shield { cursor: crosshair; }
.board-missing { display: grid; place-items: center; width: 100%; height: 100%; border: 2px dashed var(--line-strong); border-radius: 6px; color: var(--muted); font-size: 18px; }
.canvas-note { position: absolute; white-space: pre-wrap; }
.canvas-note.title { font-size: 56px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--text); }
.canvas-note.sticky { width: 420px; padding: 18px; border-radius: 6px; background: #FFF4C2; color: #3D3300; font-size: 18px; line-height: 1.45; box-shadow: 0 2px 10px rgb(0 0 0 / .08); }
.canvas-minimap { position: absolute; right: 12px; bottom: 12px; width: 180px; height: 120px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); cursor: pointer; overflow: hidden; }
.canvas-minimap span { position: absolute; }
.mini-board { background: var(--line-strong); border-radius: 1px; }
.mini-view { border: 1.5px solid var(--accent); border-radius: 2px; }
.canvas-comment { position: absolute; z-index: 5; width: 280px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-pop); }
.canvas-comment textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); resize: vertical; }
.canvas-tools .canvas-title { font-weight: 600; font-size: 13px; }
.canvas-tools .canvas-zoom { min-width: 44px; text-align: center; font: 12px var(--mono); color: var(--muted); }
.canvas-tools select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 13px; }
.canvas-tools [aria-pressed="true"] { background: #EEF0FF; color: #3E3BB0; border-color: transparent; }
.canvas-empty button { justify-self: center; margin-top: 8px; }

/* Full canvas: the canvas takes the window; the chat panel floats in a dock over its bottom-left corner. */
body.canvas-full .tool-rail, body.canvas-full .history, body.canvas-full .splitter, body.canvas-full .session-tabs { display: none !important; }
body.canvas-full .preview-pane { flex: 1; }
body.canvas-full .chat-pane { position: fixed; z-index: 45; left: 20px; bottom: 20px; width: min(420px, calc(100vw - 40px)); height: min(56vh, 560px); flex: none; box-shadow: var(--shadow-pop); border: 1px solid var(--line); }
body.canvas-full .chat-pane .composer { padding: 6px 10px 10px; }
body.canvas-full .chat-pane .transcript-inner { padding: 14px; }
@media (max-width: 760px) {
  body.canvas-full .chat-pane { left: 8px; right: 8px; width: auto; height: 45vh; bottom: 72px; }
}

/* ---------- skills library ---------- */
.home-inner:has(#panel-skills:not([hidden])) { max-width: 1240px; }
.skills { display: flex; flex-direction: column; gap: 12px; }
.skills-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.skills-tools select, .skills-tools input { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); }
.skills-tools input { flex: 1; min-width: 200px; }
.skills-filters { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chip-filter { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 13px; }
.chip-filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: transparent; font-weight: 600; }
.chip-filter.warn { background: var(--needs-soft); color: var(--needs-text); border-color: var(--needs-line); }
.chip-filter.warn[aria-pressed="true"] { background: var(--needs); color: #FFFFFF; }
.skills-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 14px; align-items: start; }
.skill-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; max-height: 70vh; overflow-y: auto; }
.skill-item { display: grid; grid-template-columns: minmax(130px, 1.1fr) 2fr 70px 46px 70px; gap: 10px; align-items: center; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; font-size: 13px; }
.skill-item:first-child { border-top: 0; }
.skill-item:hover { background: var(--sunken); }
.skill-item.current { background: var(--accent-soft); }
.skill-item.struggling { background: var(--needs-soft); }
.skill-item b { font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.skill-source, .skill-well { font-size: 12px; color: var(--muted); }
.skill-uses { font-variant-numeric: tabular-nums; }
.skill-detail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.skill-detail p { margin: 0; }
.skill-detail-head { display: flex; align-items: center; gap: 8px; }
.skill-detail-head b { font-family: var(--mono); font-size: 15px; }
.skill-detail-head .muted { margin-left: auto; }
.badge.warn { padding: 2px 8px; border-radius: 999px; background: var(--needs-soft); color: var(--needs-text); font-size: 12px; font-weight: 600; }
.skill-problems { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--needs-line); border-radius: 10px; background: var(--needs-soft); font-size: 13px; }
.skill-problems code { font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.skill-file { max-height: 46vh; overflow: auto; margin: 0; padding: 12px; border-radius: 10px; background: var(--sunken); font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; }
.skill-detail .card-actions { justify-content: flex-start; }
@media (max-width: 900px) {
  .skills-layout { grid-template-columns: 1fr; }
  .skill-item { grid-template-columns: 1fr auto; }
  .skill-desc, .skill-source, .skill-well { display: none; }
}

/* ---------- attachments ---------- */
.composer-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 0; }
.composer-chips:not([hidden]) + .composer-attachments { border-radius: 0; border-top: 0; }
.composer-attachments:not([hidden]) + label + textarea, .composer-chips:not([hidden]) ~ textarea { border-top: 0; border-radius: 0; }
.composer:focus-within .composer-attachments { border-color: var(--accent); }
.composer.skipping .composer-attachments { border-color: var(--failed-line) !important; }
.attachment { display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 4px 4px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); }
.attachment img, .attachment-icon { flex: none; width: 36px; height: 36px; border-radius: 7px; object-fit: cover; }
.attachment-icon { display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); font: 700 10px var(--mono); color: var(--muted); }
.attachment-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.attachment-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.attachment-text span { font-size: 11.5px; color: var(--muted); }
.attachment.uploading { opacity: .7; }
.attachment.error { border-color: var(--failed-line); background: var(--failed-soft); }
.attachment.error .attachment-text span { color: var(--failed); }
.attachment button { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.attachment button:hover { background: var(--line); color: var(--text); }
.attach-button { padding: 0 10px; }
.chat-main { position: relative; }
.chat-main.dropping::after { content: "Drop files to attach them"; position: absolute; inset: 10px; z-index: 40; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 88%, transparent); color: var(--accent); font-size: 17px; font-weight: 600; pointer-events: none; }
.msg-images { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 6px; }
.msg-images img { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; }
.msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.msg-file { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 12px; color: var(--muted); }
.msg-file b { color: var(--text); font-weight: 600; }

/* canvas: Play, coloured notes, pages, present */
.board-play { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--accent); color: #FFFFFF; font-size: 12px; font-weight: 700; cursor: pointer; }
.canvas-board.focused .board-play { background: var(--ink); color: var(--on-ink); }
.board-label { pointer-events: auto; }
.canvas-note.sticky.fill-green { background: #D9F2E3; color: #0E3B22; }
.canvas-note.sticky.fill-blue { background: #DCE8FF; color: #12285C; }
.canvas-note.sticky.fill-pink { background: #FFDDEB; color: #5C1232; }
.canvas-note.sticky.fill-purple { background: #E9DEFF; color: #2E1660; }
.canvas-note.sticky.fill-orange { background: #FFE4CC; color: #5A2A00; }
.canvas-note.sticky.fill-grey { background: #ECEEF2; color: #2A2F3A; }
.canvas-pages { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--sunken); overflow-x: auto; max-width: 45%; }
.canvas-pages button { flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; white-space: nowrap; }
.canvas-pages button[aria-selected="true"] { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.canvas-view { flex-direction: column; }
.present-bar { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---------- voice ---------- */
.voice-group { display: inline-flex; gap: 2px; }
.mic-button { padding: 0 10px; border-radius: 999px 0 0 999px; }
.mic-lang { padding: 0 9px; border-radius: 0 999px 999px 0; font-weight: 700; min-width: 34px; justify-content: center; }
.mic-button[aria-pressed="true"] { background: var(--failed); color: #FFFFFF; animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px var(--failed-soft); } }
@media (prefers-reduced-motion: reduce) { .mic-button[aria-pressed="true"] { animation: none; } }

/* ---------- message box, design "A · Calm": one card, + menu, mode pill, mic and send ---------- */
.composer-card { border: 1px solid var(--line-strong); border-radius: 22px; background: var(--panel); box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 8px 24px rgb(16 24 40 / .06); transition: border-color .15s, box-shadow .15s; }
.composer:focus-within .composer-card { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 8px 24px rgb(16 24 40 / .06); }
.composer.skipping .composer-card { border-color: var(--failed-line); box-shadow: 0 0 0 4px var(--failed-soft); }
.menu-anchor { position: relative; display: inline-flex; }
.round-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); }
.round-button:hover, .round-button[aria-expanded="true"] { background: var(--sunken); color: var(--text); }
.mic-button { border-color: transparent; }
.mic-button[aria-pressed="true"] { background: var(--failed); border-color: var(--failed); color: #FFFFFF; animation: mic-pulse 1.4s ease-in-out infinite; }
.mode-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: 260px; padding: 0 10px 0 12px; border: 1px solid transparent; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.mode-pill span { overflow: hidden; text-overflow: ellipsis; }
.mode-pill.auto { background: var(--accent-soft); color: var(--accent); }
.mode-pill.skipping { background: var(--failed-soft); color: var(--failed); border-color: var(--failed-line); }
.mode-pill:hover { filter: brightness(.97); }
.send-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
.send-button:disabled { background: var(--line-strong); cursor: default; }
.send-button.adding { background: var(--accent); }
.stop-button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); font-size: 13px; font-weight: 600; }
.stop-button:hover { background: var(--sunken); }
.send-hint { font-size: 12px; color: var(--faint); margin-right: 4px; }
.pop-menu { position: absolute; z-index: 35; left: 0; bottom: calc(100% + 8px); min-width: 250px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-size: 13.5px; text-align: left; white-space: nowrap; }
.pop-item:hover, .pop-item:focus-visible { background: var(--sunken); outline: none; }
.pop-item:disabled { opacity: 0.45; cursor: default; background: transparent; }
.chat-notice { padding: 0 2px 6px; }
.pop-icon { display: inline-grid; color: var(--muted); }
.pop-hint { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--faint); }
.pop-check { display: inline-grid; width: 16px; color: var(--accent); visibility: hidden; }
.pop-item[aria-checked="true"] { font-weight: 600; }
.pop-item[aria-checked="true"] .pop-check { visibility: visible; }
.pop-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pop-divider { height: 1px; margin: 4px 6px; background: var(--line); }
/* Skip permissions lives in the mode menu as a red switch row. */
.pop-menu .skip-switch { height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--failed); font-weight: 600; font-size: 13.5px; }
.pop-menu .skip-switch .pop-icon { color: var(--failed); }
.pop-menu .skip-switch .track { margin-left: auto; }
.pop-menu .skip-switch:hover { background: var(--failed-soft); }
.composer-bar > .skip-switch { display: none; }
@media (max-width: 760px) {
  .send-hint { display: none; }
  .mode-pill { max-width: 160px; }
  .pop-menu { min-width: 230px; }
}

/* ---------- task list (above the message box) ---------- */
.tasks { flex: none; width: 100%; max-width: 820px; margin: 0 auto; padding: 0 18px; box-sizing: border-box; }
.tasks-head { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: var(--panel); text-align: left; font-size: 13px; }
.tasks-head[aria-expanded="false"] { border-radius: 12px; }
.tasks-head .icon { margin-left: auto; transition: transform .15s; }
.tasks-head[aria-expanded="false"] .icon { transform: rotate(180deg); }
.tasks-bar { flex: none; width: 90px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tasks-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.tasks-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--working-text); }
.tasks-list { list-style: none; margin: 0; padding: 6px 8px; max-height: 190px; overflow-y: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--panel); }
.task { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: 13.5px; }
.task-mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: #FFFFFF; }
.task.completed .task-mark { background: var(--ready); border-color: var(--ready); }
.task.completed .task-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.task.in_progress .task-mark { border-color: var(--working); border-right-color: transparent; }
.task.in_progress.live .task-mark { animation: spin 1s linear infinite; }
.task.in_progress .task-text { color: var(--working-text); font-weight: 600; }
body.canvas-full .tasks { padding: 0 10px; }
@media (prefers-reduced-motion: reduce) { .task.in_progress.live .task-mark { animation: none; } }

.tasks-waiting { padding: 2px 8px; border-radius: 999px; background: var(--needs-soft); color: var(--needs-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.task.paused .task-mark { border-color: var(--needs); border-style: dashed; }
.task.paused .task-text { color: var(--needs-text); }
/* "Keep going": the engine carries on by itself while tasks are open. Sits between the head and the list. */
.tasks-keep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border: 1px solid var(--line); border-top: 0; background: var(--panel); }
.tasks-keep:last-child { border-radius: 0 0 12px 12px; }
.tasks-head:has(+ .tasks-keep) { border-radius: 12px 12px 0 0; }
.tasks-keep-switch { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunken); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tasks-keep-knob { width: 26px; height: 16px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; }
.tasks-keep-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.tasks-keep-switch.on { color: var(--working-text); border-color: transparent; background: var(--accent-soft); }
.tasks-keep-switch.on .tasks-keep-knob { background: var(--accent); }
.tasks-keep-switch.on .tasks-keep-knob::after { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .tasks-keep-knob, .tasks-keep-knob::after { transition: none; } }

/* ---------- "Claude is waiting for your answer" ---------- */
.asks { flex: none; width: 100%; max-width: 820px; margin: 0 auto 8px; padding: 0 18px; box-sizing: border-box; }
.asks > * { box-sizing: border-box; }
.asks-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px; border: 1px solid var(--needs-line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--needs-soft); color: var(--needs-text); }
.asks > .asks-list { margin: 0; padding: 4px 14px 12px 34px; border: 1px solid var(--needs-line); border-top: 0; border-radius: 0 0 14px 14px; background: var(--needs-soft); }
.asks-list li { margin: 3px 0; color: var(--needs-text); }
.asks-list button { padding: 2px 0; border: 0; background: transparent; color: var(--text); font-size: 13.5px; text-align: left; line-height: 1.45; cursor: pointer; }
.asks-list button:hover { text-decoration: underline; text-decoration-color: var(--needs); }
.asks-card .asks-list { margin: 0; padding-left: 18px; font-size: 13px; }

/* canvas: toolbar groups, the List layout, the comment sheet, phones */
.canvas-tools { flex-wrap: wrap; row-gap: 6px; }
.canvas-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.canvas-zoom-group { display: inline-flex; align-items: center; }
.canvas-tools .canvas-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px; background: var(--sunken); }
.canvas-list-title { margin: 0 0 14px; font-size: 20px; line-height: 1.25; }
.canvas-list-items { display: flex; flex-direction: column; gap: 22px; }
.canvas-list-card { display: flex; flex-direction: column; gap: 8px; }
.canvas-list-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.canvas-list-head b { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-list-count { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--panel); color: var(--muted); font: 11px var(--mono); }
.canvas-list-card.just-updated .board-updated { display: inline; animation: fade-out 8s forwards; }
.canvas-list-frame { position: relative; overflow: hidden; border-radius: 8px; background: #FFFFFF; box-shadow: 0 4px 18px rgb(16 24 40 / .10); }
.canvas-list-frame iframe { display: block; border: 0; transform-origin: 0 0; pointer-events: none; }
.canvas-list-frame .board-shield { cursor: pointer; }
.canvas-list.commenting .board-shield { cursor: crosshair; }
.canvas-list-notes { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.canvas-list-notes .canvas-note.sticky { position: static; width: auto; font-size: 15px; }
.canvas-comment.sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; z-index: 7; }

@media (max-width: 760px) {
  .preview-toolbar:has(.canvas-tools:not([hidden])) { flex-wrap: wrap; }
  .canvas-tools { flex-basis: 100%; }
  .canvas-pages { max-width: 100%; }
  .canvas-actions { margin-left: 0; width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .canvas-actions > * { flex: none; }
  .canvas-tools .canvas-title { display: none; } /* the list shows the canvas's title as its heading */
  .canvas-full-label { display: none; }
  .canvas-zoom-group { display: none; }
  .canvas-minimap { display: none; }
  .canvas-list { padding: 12px; }
  .present-bar { bottom: 12px; max-width: calc(100% - 24px); }
  .present-bar span { overflow: hidden; text-overflow: ellipsis; }
}

/* tasks: finished ones folded into one row */
.tasks-list { max-height: 156px; }
.tasks-fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tasks-fold:hover { color: var(--text); }
.task.folded .task-mark { background: var(--ready); border-color: var(--ready); }

/* canvas pages: tabs wrap onto more lines (never a sideways scroll); long names are shortened, full name on hover */
.canvas-pages { flex-wrap: wrap; overflow-x: visible; max-width: 62%; }
.canvas-pages button { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .canvas-pages { max-width: 100%; width: 100%; }
  .canvas-pages button { flex: 1 1 auto; max-width: calc(50% - 2px); }
  .canvas-actions { flex-wrap: wrap; overflow-x: visible; }
}

/* canvas: the page picker (more than three pages): ‹ name 2/7 ▾ ›, the name opens the list of pages */
.canvas-pager { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 46%; }
.canvas-page-step { flex: none; width: 30px; padding: 0; font-size: 16px; }
.canvas-page-step:disabled { opacity: .35; cursor: default; }
.canvas-page-current { display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.canvas-page-current .canvas-page-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-page-of { flex: none; font: 11px var(--mono); color: var(--faint); font-weight: 400; }
.canvas-page-current[aria-expanded="true"] { border-color: var(--accent); }
.canvas-page-menu { position: absolute; top: calc(100% + 6px); left: 30px; z-index: 20; width: max-content; min-width: 260px; max-width: min(420px, 80vw); max-height: 60vh; overflow-y: auto;
  display: grid; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-pop); }
.canvas-page-menu button { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.canvas-page-menu button:hover, .canvas-page-menu button:focus-visible { background: var(--sunken); }
.canvas-page-menu button[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.canvas-page-num { font: 11px var(--mono); color: var(--faint); }
.canvas-page-menu .canvas-page-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-page-count { font: 11px var(--mono); color: var(--faint); }
@media (max-width: 760px) {
  .canvas-pager { max-width: 100%; width: 100%; }
  .canvas-page-current { flex: 1; }
  .canvas-page-menu { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
}

/* the context meter in the composer: how much of the chat Claude re-reads each step; from 100k it offers to compact */
.context-meter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--faint); font: 11.5px var(--mono); white-space: nowrap; cursor: pointer; }
.context-meter:disabled { cursor: default; }
.context-meter:not(:disabled):hover { border-color: var(--line); background: var(--sunken); }
.context-bar { width: 34px; height: 5px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.context-bar span { display: block; height: 100%; background: var(--faint); }
.context-meter[data-level="mid"] { color: var(--muted); }
.context-meter[data-level="mid"] .context-bar span { background: var(--working); }
.context-meter[data-level="high"] { color: var(--needs-text); }
.context-meter[data-level="high"] .context-bar span { background: var(--needs); }
@media (max-width: 760px) { .context-bar { display: none; } }

/* loading: grey lines in the shape of a chat while it loads, so the panel is never blank */
.chat-loading { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 16px; }
.chat-loading-label { font-size: 12.5px; color: var(--faint); }
.skel { display: block; height: 12px; width: 78%; border-radius: 6px; background: linear-gradient(90deg, var(--sunken) 0%, var(--line) 50%, var(--sunken) 100%); background-size: 200% 100%; }
.skel-short { width: 46%; }
.skel-mid { width: 62%; }
.skel-me { align-self: flex-end; width: 38%; height: 30px; border-radius: 12px; }
.skel-steps { width: 100%; height: 40px; border-radius: 10px; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: skel-shine 1.4s ease-in-out infinite; } }
@keyframes skel-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.chat-earlier { display: block; margin: 4px auto 14px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--accent); font-size: 12.5px; cursor: pointer; }
.chat-earlier:hover { border-color: var(--accent); }
.chat-earlier:disabled { color: var(--faint); cursor: default; }
.history-skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 4px; }
.history-skel .skel { height: 10px; }

/* the active bar: the chat's title leads, its project is a faint prefix that gives way first */
.session-tab { flex: 0 1 240px; min-width: 96px; }
.session-tab-project { flex: 0 3 auto; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 500; color: var(--faint); }
.session-tab-project::after { content: " ·"; }
.session-tab-title { flex: 1 1 auto; font-weight: 500; }
.session-tab.needs-you:not(.current) .session-tab-title { color: var(--needs-text); }
.session-tab-close { opacity: .6; }
.session-tab-keys { flex: none; align-self: center; margin-left: auto; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; font: 10.5px var(--mono); color: var(--faint); white-space: nowrap; }
@media (max-width: 760px) {
  .session-tabs { display: flex !important; padding: 6px 8px; gap: 6px; -webkit-overflow-scrolling: touch; }
  .session-tab { flex: none; min-width: 0; max-width: 220px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); }
  .session-tab.current { box-shadow: none; border-color: var(--accent); }
  .session-tab-open { height: 32px; }
  .session-tab-new { height: 32px; border-radius: 9px; }
  .session-tab-keys { display: none; }
}

/* how many chats need you: on the chat title (opens the chat list) and the phone's Chats tab */
.needs-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--needs); color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.tabs button { position: relative; }
.tabs button .needs-badge { position: absolute; top: 4px; left: calc(50% + 6px); }

/* the preview toolbar, calmer: the address names the project; Claude's view and Talk are icon + short word, and
   only the icon when the panel is narrow */
.preview-toolbar { container-type: inline-size; }
.route-base { font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--muted); padding-right: 4px; }
.claude-dot { display: none; }
.claude-toggle.busy .claude-dot { display: block; }
.claude-toggle.busy .claude-eye { display: none; }
.claude-eye, .talk-mic { display: inline-grid; place-items: center; }
.talk-dot { display: none; }
.talk-toggle[aria-pressed="true"] .talk-dot { display: block; }
.talk-toggle[aria-pressed="true"] .talk-mic { display: none; }
@container (max-width: 620px) {
  .talk-label { display: none; }
  .claude-toggle, .talk-toggle { padding-inline: 8px; }
}
@container (max-width: 520px) {
  #claude-view-label { display: none; }
}
.history-fold { display: flex; align-items: center; gap: 6px; width: calc(100% - 8px); padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--faint); }
.history-fold svg { transform: rotate(-90deg); transition: transform .15s; }
.history-fold[aria-expanded="true"] svg { transform: none; }
.session-tab-project { flex: 0 1 auto; min-width: 4ch; }
.session-tab-title { flex: 1 1 0; min-width: 6ch; }
/* Claude Code's own notes in a chat (a background agent finished, the chat was compacted): one quiet line */
.chat-notice { align-self: center; margin: 6px auto; padding: 3px 12px; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: 12px; text-align: center; max-width: 90%; }

/* ---------- overview: zoom out to your chats as cards (overview.js) ---------- */
.session-tab-overview { margin-right: 2px; }
.overview {
  position: absolute; z-index: 30; inset: 12px; overflow-y: auto; padding: 18px 22px 28px;
  border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow);
  opacity: 0; transform: scale(1.04); transform-origin: 30% 20%; transition: opacity .18s ease, transform .18s ease;
}
.overview.shown { opacity: 1; transform: none; }
body.overview-open #toasts { display: none; }
body.overview-open .chat-pane, body.overview-open .split-pane { transform: scale(.97); transition: transform .18s ease; }
.overview-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.overview-head b { font-size: 16px; }
.overview-group h2 { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.overview-group h2 .count { font-weight: 500; color: var(--faint); }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.overview-card {
  display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); cursor: pointer; outline: none; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.overview-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.overview-card:focus-visible, .overview-card:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.overview-card.open { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }
.overview-card.is-needs-you { border-color: var(--needs-line); background: linear-gradient(var(--needs-soft), var(--panel) 70%); }
.overview-card.is-working { background: linear-gradient(var(--working-soft), var(--panel) 70%); }
.overview-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.overview-card-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-tag { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: 11px; }
.overview-tag.big { background: var(--warn-soft); color: var(--warn-text); }
.overview-card-title { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.overview-card-line { flex: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.overview-card-line.ask { color: var(--needs-text); }
.overview-card-actions { display: flex; justify-content: flex-end; min-height: 30px; }
.overview-card-actions .ghost { height: 30px; font-size: 13px; opacity: 0; }
.overview-card:hover .ghost, .overview-card:focus .ghost, .overview-card:focus-within .ghost { opacity: 1; }

/* ---------- split: a second chat next to the open one (splitpane.js) ---------- */
.split-pane { flex: 1 1 0; margin-left: 12px; }
body.split-on .chat-pane { flex: 1 1 0; }
body.split-on .preview-pane { flex: 0 0 30%; }
body.split-on .splitter { visibility: hidden; }
body.home-view .split-pane { display: none; }
.split-head { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); background: var(--sunken); font-size: 13px; }
.split-head b { flex: none; }
.split-head > .muted, .split-head .ghost { flex: none; white-space: nowrap; }
@media (max-width: 1500px) { .split-head > .muted { display: none; } }
.split-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-head .ghost { height: 30px; font-size: 13px; }
.split-scroll { flex: 1; min-height: 0; }
.split-scroll .transcript-inner { padding: 14px 16px; }
.split-extras { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.split-extras:empty { display: none; }
.split-composer { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 8px 12px 12px; padding: 8px 8px 8px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); }
.split-input { flex: 1; min-height: 24px; max-height: 160px; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) {
  .split-pane, .overview-card-actions .ghost { display: none !important; }
  .overview { inset: 0; border-radius: 0; padding: 14px; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-head .muted { display: none; }
  .overview-card { min-height: 0; }
}

/* ---------- a very long chat: continue in a new one (handover.js) ---------- */
.handover { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 820px; margin: 0 auto 8px; padding: 10px 14px; box-sizing: border-box; border: 1px solid var(--warn-line); border-radius: 14px; background: var(--warn-soft); }
.handover-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.handover-text b { color: var(--warn-text); }
.handover-actions { flex: none; display: flex; gap: 6px; }
@media (max-width: 760px) { .handover { flex-direction: column; align-items: stretch; margin: 0 8px 8px; width: auto; } }
.task.needs-you .task-text { color: var(--warn-text); font-weight: 600; }

/* Images a chat shows in its answer (screenshots, charts). */
.md-image { display: block; margin: 8px 0; max-width: 100%; }
.md-image img { display: block; max-width: min(100%, 720px); max-height: 480px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: #fff; cursor: zoom-in; }

/* Home > Tasks: the task board page (board.html) in a frame, wider than the other Home tabs. */
.home-inner:has(#panel-tasks:not([hidden])) { max-width: none; padding-bottom: 12px; }
.home-tasks .tasks-frame { display: block; width: 100%; height: calc(100vh - 170px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.home-tasks .tasks-full { display: inline-block; margin-top: 6px; }
.tab-count { font: 600 10px var(--mono); background: var(--warn); color: #fff; border-radius: 9px; padding: 1px 6px; margin-left: 4px; }

/* Home > Needs you (board 7): one list, oldest first, of everything waiting on you. */
.inbox-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.inbox-item { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--needs); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; }
.inbox-item.kind-approve, .inbox-item.kind-key { border-left-color: var(--working); }
.inbox-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.inbox-kind { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: var(--needs-soft); color: var(--needs-text); }
.inbox-kind.kind-approve, .inbox-kind.kind-key { background: var(--working-soft); color: var(--working-text); }
.inbox-question { font-size: 15px; overflow-wrap: anywhere; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inbox-empty { padding: 32px 0; text-align: center; }
.inbox-error { color: var(--needs-text); background: var(--needs-soft); padding: 8px 12px; border-radius: 8px; }

/* Home > Portfolio (board 7): tiles by mode, with a mode switch and a lock on each. */
.pf-stats { margin: 12px 0; }
.pf-group { margin-bottom: 22px; }
.pf-group h2 { font-size: 16px; margin: 16px 0 8px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pf-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; align-content: start; }
.pf-parked .pf-tile { opacity: .82; }
.pf-tile.locked { border-color: var(--warn-line); }
.pf-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.pf-dot.red { background: #d93a3a; box-shadow: 0 0 0 3px rgba(217, 58, 58, .18); }
.pf-dot.amber { background: #e59a1a; box-shadow: 0 0 0 3px rgba(229, 154, 26, .18); }
.pf-dot.green { background: #2e9e5b; }
.pf-dot.grey { background: var(--line-strong); }
.pf-tile.watch-red { border-color: #d93a3a; }
.pf-watch { list-style: none; margin: 0; padding: 6px 8px; border-radius: 8px; display: grid; gap: 2px; font-size: 13px; font-weight: 600; }
.pf-watch.red { background: rgba(217, 58, 58, .1); color: #b32626; }
.pf-watch.amber { background: var(--warn-soft); color: var(--warn-text); }
.pf-head { display: flex; align-items: center; gap: 6px; }
.pf-name { font-weight: 700; font-size: 15px; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-name:hover { color: var(--accent); }
.pf-badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--muted); }
.pf-lock { display: inline-flex; align-items: center; gap: 3px; opacity: .55; font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.pf-lock:hover { opacity: 1; }
.pf-lock.on { opacity: 1; background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); font-weight: 600; }
.pf-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.pf-facts .tone-muted { color: var(--muted); }
.pf-facts .tone-ok { color: var(--ok); font-weight: 600; }
.pf-facts .tone-working { color: var(--working-text); }
.pf-facts .tone-needs { color: var(--needs-text); font-weight: 600; }
.pf-facts .tone-amber { color: var(--warn-text); background: var(--warn-soft); border-radius: 6px; padding: 1px 6px; justify-self: start; }
.pf-modes { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.pf-modes button { flex: 1; border: 0; background: none; padding: 5px 0; font-size: 12px; color: var(--muted); cursor: pointer; }
.pf-modes button + button { border-left: 1px solid var(--line); }
.pf-modes button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* ---------- The 4 tabs and Home (Manager design hub-home A) ---------- */
.main-tabs { display: flex; gap: 2px; margin-right: 6px; }
.main-tabs button { height: 34px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 500; font-size: 13.5px; white-space: nowrap; display: inline-flex; align-items: center; }
.main-tabs button:hover { background: var(--sunken); }
.main-tabs button[aria-current="true"] { background: #eef4f0; color: #14532f; font-weight: 600; }
.main-tabs .tab-count { background: #c0352b; }
body[data-tab="home"] #project-button, body[data-tab="home"] .crumb-sep, body[data-tab="home"] #chat-title, body[data-tab="home"] #new-chat-top { display: none; }
.settings-tabs { margin-bottom: 20px; }
.home-inner:has(.home-wide:not([hidden])) { max-width: none; padding: 0; height: 100%; }
.home-inner:has(.home-wide:not([hidden])) > .settings-tabs { display: none; }
.home-wide { height: 100%; }
.homeview { height: 100%; }

.hv { --hv-blue: #3b6fe0; --hv-green: #22985c; --hv-amber: #e0951f; --hv-red: #d6463a; --hv-grey: #b9c0bb;
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; min-height: 100%; font-size: 13px; }
.hv.hv-project { grid-template-columns: 220px minmax(0, 1fr); }
.hv-rail { background: var(--panel); border-right: 1px solid var(--line); padding: 16px 10px; overflow-y: auto; }
.hv-pj { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.hv-pj:hover { background: var(--sunken); }
.hv-pj.sel { background: #eef4f0; color: #14532f; font-weight: 600; }
.hv-pj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-rh { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: var(--faint); margin: 14px 8px 6px; }
.hv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-blue { background: var(--hv-blue, #3b6fe0); } .dot-green { background: var(--hv-green, #22985c); } .dot-amber { background: var(--hv-amber, #e0951f); }
.dot-red { background: var(--hv-red, #d6463a); } .dot-grey { background: var(--hv-grey, #b9c0bb); }
.hv-n { background: #c0352b; color: #fff; border-radius: 99px; font: 700 10.5px var(--font); padding: 1px 6px; }
.hv-ext { font: 600 10px var(--mono); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 4px; margin-left: 4px; }
.hv-lock { font-size: 11px; }
.hv-main { padding: 18px 24px 32px; min-width: 0; }
.hv-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hv-head h1 { font-size: 24px; margin: 0 0 2px; }
.hv-head > div:first-child { flex: 1; min-width: 240px; }
.hv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hv-chip { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 5px 11px; font: 500 12.5px var(--font); color: var(--text); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.hv-chip.on { background: #18201b; color: #fff; border-color: #18201b; }
.hv-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: var(--faint); margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; }
.hv-need-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 16px; }
.hv-need { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hv-red, #d6463a); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hv-need.hands { border-left-color: var(--hv-amber, #e0951f); background: #fffaf1; }
.hv-need.hands .hv-need-p { color: #a8650a; }
.hv-need-p { font-size: 10.5px; font-weight: 700; color: var(--faint); letter-spacing: .03em; }
.hv-need-q { font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hv-need-b { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.hv-need-b button { font: 600 12px var(--font); padding: 5px 10px; border-radius: 8px; border: 0; background: #eef0ef; color: var(--text); cursor: pointer; }
.hv-need-b button.hv-y { background: #1f7a4d; color: #fff; }
.hv-need.wide { margin-bottom: 8px; }
.hv-need.hv-ticket { border-left-color: #2f6fb3; }
.hv-need-t { font-weight: 700; overflow-wrap: anywhere; }
.hv-need.hv-ticket .hv-need-q { font-weight: 400; white-space: pre-line; font-size: 13px; }
.hv-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.hv-thumbs img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.hv-reason { flex: 1 1 100%; font: 13px var(--font); padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; background: var(--panel); color: var(--text); }
.hv-need-b button.hv-r { background: #b3392f; color: #fff; }
.hv-need-b button:disabled { opacity: .5; cursor: default; }
.hv-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.hv-card h3 { margin: 0 0 10px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hv-table-card { padding: 0; overflow-x: auto; }
.hv-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
.hv-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.hv-table td { padding: 11px 12px; border-bottom: 1px solid #f1f3f2; vertical-align: top; }
.hv-row { cursor: pointer; }
.hv-row:hover td { background: #fafbfa; }
.hv-row:last-child td { border-bottom: 0; }
.hv-name { width: 21%; } .hv-live { width: 13%; } .hv-now { width: 28%; } .hv-last { width: 19%; } .hv-next { width: 19%; }
.hv-table td { overflow-wrap: anywhere; }
.hv-name-top { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.hv-now .hv-link { display: block; text-align: left; font-weight: 600; }
.hv-step { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-prog { height: 5px; background: #e8ebe9; border-radius: 3px; overflow: hidden; margin-top: 5px; }
.hv-prog i { display: block; height: 100%; background: var(--hv-blue, #3b6fe0); border-radius: 3px; }
.hv-clip { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; }
.hv-empty { text-align: center; padding: 22px !important; }
.hv-link { border: 0; background: none; padding: 0; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.hv-link:hover { color: #1f7a4d; text-decoration: underline; }
.hv-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.hv-pill.tone-g { background: #e5f3eb; color: #1f7a4d; } .hv-pill.tone-r { background: #fcebe9; color: #c0352b; }
.hv-pill.tone-a { background: #fcf1de; color: #a8650a; } .hv-pill.tone-b { background: #e8eefc; color: #2f5fd0; }
.hv-pill.tone-m { background: #eef0ef; color: #59615c; }
.hv b.tone-g, .hv .tone-g { color: #1f7a4d; } .hv b.tone-r { color: #c0352b; } .hv .tone-a, .hv b.tone-a { color: #a8650a; } .hv b.tone-b { color: #2f5fd0; }
.hv-side { padding: 18px 18px 32px 0; min-width: 0; }
.hv-feed { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.hv-feed li { display: grid; grid-template-columns: 40px 18px 1fr; gap: 6px; padding: 6px 0; border-bottom: 1px solid #f1f3f2; align-items: start; font-size: 12.5px; }
.hv-feed li.click { cursor: pointer; }
.hv-feed li.click:hover { background: #fafbfa; }
.hv-t { font: 400 11px var(--mono); color: var(--faint); padding-top: 1px; }
.hv-ic { font-weight: 700; text-align: center; }
.hv-ic.tone-g { color: #1f7a4d; } .hv-ic.tone-r { color: #c0352b; } .hv-ic.tone-b { color: #2f5fd0; } .hv-ic.tone-m { color: var(--faint); }
.hv-feed-x { min-width: 0; overflow-wrap: anywhere; }
.hv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hv-tile { background: #f6f7f6; border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; }
.hv-tile b { font-size: 20px; }
.hv-open { margin-left: auto; }
/* Project page */
.hv-ph { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hv-av { width: 46px; height: 46px; border-radius: 12px; background: #2f5fd0; color: #fff; font-weight: 700; font-size: 20px; display: grid; place-items: center; flex: none; }
.dot-bg-green { background: #1f7a4d; } .dot-bg-amber { background: #c27a12; } .dot-bg-red { background: #c0352b; } .dot-bg-grey { background: #7c857f; }
.hv-ph h1 { margin: 0; font-size: 24px; display: flex; align-items: center; gap: 8px; }
.hv-ph-t { flex: 1; min-width: 220px; }
.hv-ph-sub a { color: inherit; }
.hv-mode { margin-left: auto; display: flex; background: #e9ecea; border-radius: 9px; padding: 3px; flex-wrap: wrap; }
.hv-mode button { padding: 5px 11px; border-radius: 7px; border: 0; background: transparent; font: 500 13px var(--font); color: var(--text); cursor: pointer; }
.hv-mode button.on { background: #fff; font-weight: 600; color: #14532f; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.hv-mode button.on.lock { color: #a8650a; }
.hv-mode button:disabled { cursor: default; opacity: .7; }
.hv-note { margin: 8px 0 0; }
.hv-ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0; overflow-x: auto; }
.hv-ptabs button { padding: 8px 12px; color: var(--muted); font: 500 13px var(--font); border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.hv-ptabs button.on { color: var(--text); font-weight: 600; border-bottom-color: #1f7a4d; }
.hv-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.hv-stepi { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.hv-stepi.pending { color: var(--muted); }
.hv-ck { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; flex: none; background: #c9cfcb; }
.hv-stepi.completed .hv-ck { background: var(--hv-green, #22985c); }
.hv-stepi.in_progress .hv-ck { background: var(--hv-blue, #3b6fe0); }
.hv-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hv-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hv-shot { display: block; height: 110px; border-radius: 9px; border: 1px solid var(--line); overflow: hidden; background: #f4f5f4; }
.hv-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hv-ready { display: flex; gap: 8px; align-items: center; width: 100%; padding: 7px 0; border: 0; border-bottom: 1px solid #f1f3f2; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.hv-ready .hv-clip { flex: 1; }
.hv-health { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hv-h { background: #f6f7f6; border-radius: 10px; padding: 9px 11px; color: inherit; text-decoration: none; min-width: 0; }
.hv-h b { display: block; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.hv-card-needs { border-color: #f0d2ce; }
.hv-dec { display: grid; grid-template-columns: max-content 1fr auto auto; gap: 6px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid #f1f3f2; line-height: 1.4; align-items: start; }
.hv-x { border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
.hv-dec-add { display: flex; gap: 6px; margin-top: 10px; }
.hv-dec-in { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; background: var(--panel); color: var(--text); }
.hv-chatrow { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid #f1f3f2; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.hv-chatrow .hv-clip { flex: 1; }
.hv-frame { display: block; width: 100%; height: calc(100vh - 250px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.hv-files { height: calc(100vh - 250px); min-height: 420px; display: flex !important; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.hv .inbox-error { margin: 0 0 10px; }

/* 1280 px: the Today column narrows; tablets: Today goes under the table; phones: the rail becomes a row of chips. */
@media (max-width: 1360px) { .hv { grid-template-columns: 200px minmax(0, 1fr) 260px; } .hv.hv-project { grid-template-columns: 200px minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .hv { grid-template-columns: 190px minmax(0, 1fr); }
  .hv-side { grid-column: 2; padding: 0 24px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .hv-cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .main-tabs button { padding: 0 8px; }
  .hv, .hv.hv-project { grid-template-columns: 1fr; }
  .hv-rail { border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px; }
  .hv-rail .hv-pj { width: auto; flex: none; }
  .hv-rail .hv-rh { margin: 0 4px 0 10px; align-self: center; }
  .hv-side { grid-column: 1; grid-template-columns: 1fr; padding: 0 14px 24px; }
  .hv-main { padding: 14px; }
  .hv-health { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) { .main-tabs { display: none; } }
@media (prefers-color-scheme: dark) {
  .main-tabs button[aria-current="true"], .hv-pj.sel { background: #1d2a22; color: #b8e2c8; }
  .hv-tile, .hv-h { background: var(--sunken); }
  .hv-need.hands { background: #2a2217; }
  .hv-row:hover td, .hv-feed li.click:hover { background: var(--sunken); }
  .hv-mode { background: var(--sunken); } .hv-mode button.on { background: var(--panel); color: #b8e2c8; }
}
/* When each canvas page last changed (newest page first). */
.canvas-pages .canvas-page-when { margin-left: 6px; font: 11px var(--mono); color: var(--faint); font-weight: 400; }
.tasks-waiting.quiet { background: var(--sunken); color: var(--muted); font-weight: 500; }
/* Active is full: pick the app that makes room. */
.instead-dialog { border: 1px solid var(--line); border-radius: 12px; padding: 18px; max-width: 360px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.instead-dialog::backdrop { background: rgb(0 0 0 / 0.3); }
.instead-dialog h3 { margin: 0 0 6px; font-size: 16px; }
.instead-dialog p { margin: 0 0 12px; font-size: 13px; }
.instead-list { display: grid; gap: 6px; margin-bottom: 12px; }
.instead-list button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 8px 10px; text-align: left; }

/* Invited people (docs/guests.md): only their own workspace; the owner's board, home inbox, accounts, connectors and
   activity are hidden (the hub refuses them too). */
body.is-guest [data-main-tab="home"], body.is-guest [data-main-tab="board"], body.is-guest #account-pill,
body.is-guest #tab-connectors, body.is-guest #tab-accounts, body.is-guest #tab-activity { display: none !important; }

/* ---------- The chat, the T3 Code way (timeline.js, rows.js, livemd.js, chatfollow.js) ---------- */
.tl-working { display: flex; align-items: center; gap: 4px; height: 28px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tl-time { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; flex: none; }
.tl-time.strong { color: var(--muted); font-size: inherit; }
.tl-step > summary, .tl-group > summary, .tl-live > summary, .tl-fold > summary, .tl-file > summary {
  display: flex; align-items: center; gap: 8px; min-height: 26px; list-style: none; cursor: pointer; min-width: 0; color: var(--muted); font-size: 14px; border-radius: 6px;
}
:is(.tl-step, .tl-group, .tl-live, .tl-fold, .tl-file) > summary::-webkit-details-marker { display: none; }
:is(.tl-step, .tl-group, .tl-live, .tl-file) > summary:hover { color: var(--text); }
.tl-chevron { display: inline-flex; flex: none; color: var(--faint); transition: transform 200ms ease; }
details[open] > summary > .tl-chevron { transform: rotate(90deg); }
.tl-icon { display: inline-flex; flex: none; color: var(--faint); }
.tl-icon.live { color: var(--working); }
.tl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-fail { display: inline-flex; color: #B42318; flex: none; }
.tl-fail-count { flex: none; font-size: 12px; color: #B42318; }
.tl-step.failed > summary .tl-label { color: #B42318; }
.tl-body { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 8px 22px; }
.tl-steps { display: flex; flex-direction: column; gap: 2px; }
.tl-step-note { margin: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.tl-step-note.mono { font-family: var(--mono); font-size: 12px; }
.tl-cmd { margin: 0; padding: 8px 10px; max-height: 200px; overflow: auto; border-radius: 8px; background: var(--sunken); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
/* A command's output: a dark terminal box in both themes (T3's palette), at most 320px, opening at its end. */
.tl-output { margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto; overscroll-behavior: contain; border-radius: 8px; background: #15171C; color: #D7DAE0; font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-output.error { box-shadow: inset 3px 0 #D92D20; }
.tl-output-cut { color: #8A909C; }
.tl-diff { margin: 0; padding: 8px 10px; max-height: 320px; overflow: auto; overscroll-behavior: contain; border-radius: 8px; background: var(--sunken); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-diff .add, .tl-files .add { color: #1D7A4D; }
.tl-diff .del, .tl-files .del { color: #B42318; }
.tl-diff .add { background: rgb(29 122 77 / .08); }
.tl-diff .del { background: rgb(180 35 24 / .07); }
.tl-diff-gap { color: var(--faint); text-align: center; }
/* The live row: the current step with a soft shine passing over it, and Claude's latest thought above. */
.tl-live > summary { color: var(--text); }
.tl-live > summary .tl-label { font-weight: 500; }
.tl-shine {
  background-image: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--faint) 50%, var(--text) 60%, var(--text) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tl-shine 2.2s steps(30) infinite;
}
.tl-thinking .tl-shine { background-image: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--line-strong) 50%, var(--muted) 60%, var(--muted) 100%); }
@keyframes tl-shine { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.tl-thought { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px 22px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.tl-thought > span:last-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tl-thinking { display: flex; align-items: center; gap: 8px; margin-left: 22px; font-size: 14px; }
/* Helper agents: a card each, with a status dot. */
.tl-agent { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.tl-agent-avatar { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); color: var(--muted); display: grid; place-items: center; }
.tl-agent-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--panel); background: var(--working); }
.tl-agent.done .tl-agent-dot { background: var(--ok); }
.tl-agent.failed .tl-agent-dot { background: #D92D20; }
.tl-agent-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-agent-text b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-agent-text span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-agent-status { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-agent.running .tl-agent-status { color: var(--working-text); }
/* "Worked for 2m 14s ▸": the finished answer's steps, folded. */
.tl-fold > summary { height: 28px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 13.5px; }
.tl-fold > summary:hover { color: var(--text); }
.tl-fold > .tl-body { gap: 14px; padding: 12px 0 4px; }
/* "Changed files" under the answer. */
.tl-files { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.tl-files-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; background: var(--sunken); font-size: 13px; }
.tl-file { border-top: 1px solid var(--line); }
.tl-file > summary { padding: 6px 14px; font: 12.5px var(--mono); border-radius: 0; }
.tl-file-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.tl-file-counts { flex: none; font-variant-numeric: tabular-nums; }
.tl-file > .tl-body { padding: 0 14px 10px; }
/* "Scroll to end": sticks to the bottom of the chat while you read above. */
.scroll-end-dock { position: sticky; bottom: 12px; height: 0; display: flex; align-items: flex-start; justify-content: center; z-index: 5; pointer-events: none; }
.scroll-end { pointer-events: auto; transform: translateY(-100%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow); color: var(--text); font: 500 12.5px var(--font); cursor: pointer; }
.scroll-end:hover { border-color: var(--line-strong); }
.scroll-end[hidden] { display: none; }
/* A new block of streaming text fades in; finished blocks never redraw. */
.md-in { animation: md-in 600ms ease-out; }
@keyframes md-in { from { opacity: 0; } }
.md-block > :last-child { margin-bottom: 0; }
.md-block + .md-block { margin-top: 10px; }
@media (prefers-color-scheme: dark) {
  .tl-diff .add, .tl-files .add { color: #6FCF97; }
  .tl-diff .del, .tl-files .del, .tl-fail, .tl-fail-count, .tl-step.failed > summary .tl-label { color: #F28B82; }
}
@media (prefers-reduced-motion: reduce) {
  .md-in, .tl-shine { animation: none; }
  .tl-chevron { transition: none; }
}

/* Messages queued with ⌘↵: dashed bubbles at the end of the chat (T3's queued runs). */
.chat-queue { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chat-queue-count { margin: 0; font-size: 12px; color: var(--muted); }
.chat-queued { max-width: 80%; display: flex; flex-direction: column; gap: 4px; padding: 9px 14px; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.chat-queued.editing { border-color: var(--accent); }
.chat-queued-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-queued-actions { display: flex; gap: 12px; justify-content: flex-end; font-size: 12px; }
.chat-queued-actions .link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.chat-queued-actions .link:hover { text-decoration: underline; }
.tl-agent.stopped .tl-agent-dot { background: var(--faint); }
.tl-step.stopped > summary .tl-label { color: var(--faint); }

/* ---------- Claude's browser: page size, Take control, Claude's cursor, the page's dialogs, the mini player ---------- */
.claude-tools { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.claude-tools:not([data-ready]) { display: none; }
.device-pick select { height: 30px; max-width: 112px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: 500 12.5px var(--font); }
.control-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.control-hand { display: inline-grid; place-items: center; }
.control-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-ink, #fff); }
.control-toggle.waiting { animation: pulse 1.2s ease-in-out infinite; }
@container (max-width: 760px) {
  #browser-control-label { display: none; }
  .device-pick select { max-width: 92px; }
}
.browser-stage.held { box-shadow: inset 0 0 0 2px var(--accent); }
.browser-stage[data-device]:not([data-device="fit"]) img { object-position: center; }
.browser-held { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 24px); padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--on-ink, #fff); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: var(--shadow); }

/* Claude's cursor: it glides to where Claude points; a ring when it clicks */
.agent-cursor { position: absolute; left: 0; top: 0; z-index: 2; color: var(--accent); pointer-events: none; transition: transform .16s ease-out; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.agent-cursor.jump { transition: none; }
.agent-cursor svg { display: block; margin: -3px 0 0 -3px; }
.agent-name { position: absolute; left: 16px; top: 16px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-ink, #fff); font: 600 11px var(--font); white-space: nowrap; }
.agent-ping { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.agent-cursor.press .agent-ping { animation: agent-ping .7s ease-out; }
@keyframes agent-ping { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(1.8); } }

/* the page's own dialogs and file pickers, answered here */
.browser-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; display: grid; gap: 8px; width: min(360px, calc(100% - 32px)); padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); font-size: 13.5px; }
.browser-card p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.browser-card input { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; }
.browser-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* the mini player (miniplayer.js) */
.mini-player { position: fixed; right: 18px; bottom: 112px; z-index: 40; width: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.mini-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; min-width: 0; }
.mini-head .claude-dot { display: block; flex: none; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.mini-head b { flex: none; }
.mini-host { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-head .square.small { width: 28px; height: 28px; border-color: transparent; background: transparent; }
.mini-player img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: var(--sunken); cursor: pointer; }
.mini-pip-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .mini-player { right: 10px; bottom: 150px; width: 56vw; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-cursor { transition: none; }
  .agent-cursor.press .agent-ping, .control-toggle.waiting, .mini-head .claude-dot { animation: none; }
}

/* ---------- the Mac app (desktop.js): no title bar; its window buttons sit over the top bar's left end, and dragging
   the bar moves the window ---------- */
.in-mac-app .topbar { padding-left: 84px; -webkit-app-region: drag; }
.in-mac-app .topbar :is(button, a, input, select, label, summary, [role="button"], [role="switch"], [tabindex]) { -webkit-app-region: no-drag; }

/* ---------- a reply's real changes, with Undo (rows.js replyRow; engine checkpoints.mjs) ---------- */
.tl-reply { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.tl-reply-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: var(--sunken); font-size: 13px; }
.tl-reply-head .tl-icon { color: var(--muted); }
.tl-reply .add, .tl-reply .del { font: 12px var(--mono); }
.tl-reply .add { color: #1D7A4D; }
.tl-reply .del { color: #B42318; }
.tl-reply-actions { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.tl-reply-actions .small-button { height: 26px; padding: 0 9px; font-size: 12.5px; }
.tl-reply-actions .danger-text { color: #B42318; border-color: rgb(180 35 24 / .35); }
.tl-reply-note { margin: 0; padding: 6px 12px 0; font-size: 12.5px; }
.tl-reply-files > summary { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.tl-reply.undone .tl-reply-head b { color: var(--muted); }
.tl-diff .hunk { color: var(--faint); }
.tl-diff-box { padding: 6px 12px 10px; font-size: 12.5px; }

/* ---------- Claude's view, part 2: Pick, Record, Claude's tabs ---------- */
.tool-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tool-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pick-icon { display: inline-grid; place-items: center; }
.record-dot { width: 9px; height: 9px; border-radius: 50%; background: #B42318; flex: none; }
#browser-record[aria-pressed="true"] .record-dot { animation: pulse 1.2s ease-in-out infinite; }
@container (max-width: 980px) { .tool-label { display: none; } #browser-record[aria-pressed="true"] .tool-label { display: inline; } }
.browser-stage.picking img { cursor: crosshair; }
.browser-tabs { flex: none; display: flex; gap: 4px; padding: 6px 8px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--panel); scrollbar-width: none; }
.app-view:has(#browser-stage[hidden]) .browser-tabs { display: none; }
.browser-tab { flex: 0 1 200px; min-width: 90px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); overflow: hidden; }
.browser-tab[aria-current="true"] { background: var(--panel); border-color: var(--accent); }
.browser-tab-pick { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--text); font: 500 12px var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.browser-tab-close { flex: none; width: 24px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.browser-tab-close:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { #browser-record[aria-pressed="true"] .record-dot { animation: none; } }
.pick-box { position: absolute; z-index: 2; border: 2px solid var(--accent); border-radius: 3px; background: rgb(15 123 95 / .12); pointer-events: none; transition: left .06s, top .06s, width .06s, height .06s; }
.pick-box-label { position: absolute; left: -2px; bottom: 100%; margin-bottom: 3px; padding: 1px 7px; border-radius: 6px; background: var(--accent); color: var(--on-ink, #fff); font: 600 11px var(--mono); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pick-box { transition: none; } }
/* The address keeps room to be read: with Claude's tools showing, the bar wraps onto a second line instead of squeezing it. */
#preview-form { flex-wrap: wrap; row-gap: 6px; }
#preview-form .route { flex: 1 1 160px; min-width: 140px; }