/* cx-next local web. Values come from tokens.css (cx design tokens); layout follows neko SPEC §1–§4. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 1rem/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-selection); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-button-sm); }
.icon { flex: none; display: block; }
.secondary { color: var(--color-text-secondary); }
.text-link { color: var(--color-accent); font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */

/* Phone: one pane; the bottom bar shows on root screens only. Desktop: rail | master | detail. */
.app { height: 100dvh; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.master, .detail { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.master > * { flex: 1; min-height: 0; }
.app.has-detail > .master { visibility: hidden; }
.app:not(.has-detail) > .detail { display: none; }
.app.has-detail > .nav { display: none; }
.detail { position: relative; background: var(--color-bg); }
.nav {
  grid-area: 2 / 1; display: flex; justify-content: space-around; height: var(--layout-tab-bar-height);
  padding-bottom: env(safe-area-inset-bottom); border-top: var(--layout-hairline) solid var(--color-hairline); background: var(--color-bg);
}
.nav-item {
  flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--color-text-secondary);
}
.nav-icon { position: relative; display: grid; place-items: center; width: 56px; height: 28px; border-radius: var(--radius-full); transition: background var(--duration-fast) var(--easing-standard); }
.nav-item[aria-current='true'] { color: var(--color-text); }
.nav-item[aria-current='true'] .nav-icon { background: var(--color-fill); }
.nav-badge {
  position: absolute; top: -2px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full);
  background: var(--color-attention); color: var(--color-text-on-accent); font-variant-numeric: tabular-nums; line-height: 16px; text-align: center;
}

@media (min-width: 1024px) {
  .app { grid-template-columns: 72px var(--layout-desktop-list-pane, 380px) 1fr; grid-template-rows: 1fr; }
  .app.full { grid-template-columns: 72px 0 1fr; }
  .nav {
    grid-area: 1 / 1; flex-direction: column; justify-content: flex-start; gap: var(--space-8); height: auto;
    padding: var(--space-16) 0; border-top: 0; border-right: var(--layout-hairline) solid var(--color-hairline); background: var(--color-surface);
    display: flex !important;
  }
  .nav-item { flex: none; max-width: none; height: 56px; }
  .master { grid-area: 1 / 2; visibility: visible !important; border-right: var(--layout-hairline) solid var(--color-hairline); }
  .app.full > .master { display: none; }
  .detail { grid-area: 1 / 3; display: flex !important; }
  .session-header .back { display: none; }
  .app.full .page-header .back { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { color: var(--color-text); }
}

.pick {
  margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  color: var(--color-text-tertiary); text-align: center;
}
.pick .icon { margin-bottom: var(--space-8); opacity: .7; }

/* ---------- Sessions list ---------- */

.list-pane {
  --session-row-height: 72px;
  display: flex; flex-direction: column; background: var(--color-bg); position: relative;
}
@media (min-width: 1024px) { .list-pane { --session-row-height: 60px; } }

.list-header {
  padding: var(--space-16) var(--layout-gutter) var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-12);
  max-width: var(--layout-max-content-width); width: 100%; margin: 0 auto;
}
@media (min-width: 1024px) { .list-header { padding: var(--space-16) var(--space-12) var(--space-12); } }
.list-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding: 0 var(--space-4); }
.list-title-row h1 { margin: 0; }
@media (max-width: 1023px) { .list-title-row h1 { font: 700 1.875rem/1.2 var(--font-sans); letter-spacing: -0.021em; } }
.list-status {
  display: flex; align-items: center; gap: var(--space-6); color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dot { width: var(--layout-dot); height: var(--layout-dot); border-radius: 50%; background: var(--color-text-tertiary); flex: none; }
.dot[data-state='online'] { background: var(--color-success); }
.dot[data-state='offline'] { background: var(--color-text-disabled); }

.search {
  display: flex; align-items: center; gap: var(--space-8);
  height: var(--layout-search-height); padding: 0 var(--space-12);
  background: var(--color-fill); border-radius: var(--radius-search); color: var(--color-text-secondary);
}
.search:focus-within { outline: 2px solid var(--color-focus); outline-offset: 0; }
.search-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--color-text);
  font-size: max(16px, 1rem);
}
.search-input::placeholder { color: var(--color-text-secondary); }
.search-input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; }

.segment {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px;
  height: var(--layout-button-small-height); background: var(--color-fill); border-radius: var(--radius-segment);
}
.segment-item {
  border-radius: var(--radius-segment-thumb); color: var(--color-text-secondary);
  transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.segment-item[aria-checked='true'] { background: var(--color-thumb); color: var(--color-text); box-shadow: var(--elevation-thumb); }

.list-scroller { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.list-canvas { position: relative; max-width: var(--layout-max-content-width); margin: 0 auto; }
.session-row {
  position: absolute; left: 0; right: 0; top: 0; height: var(--session-row-height);
  display: flex; align-items: center; gap: var(--space-12);
  padding: 0 var(--layout-gutter) 0 calc(var(--layout-gutter) + 2px);
  contain: layout paint;
}
.session-row::after {
  content: ''; position: absolute; left: calc(var(--layout-gutter) + 34px); right: var(--layout-gutter); bottom: 0;
  height: var(--layout-hairline); background: var(--color-hairline);
}
@media (min-width: 1024px) {
  .session-row { margin: 0 var(--space-8); padding: 0 var(--space-12); border-radius: var(--radius-button-sm); left: 0; right: 0; }
  .session-row::after { left: 44px; right: var(--space-12); }
  .session-row.selected::after, .session-row:hover::after { background: transparent; }
}
.session-row.selected { background: var(--color-fill); }
@media (hover: hover) and (pointer: fine) {
  .session-row:hover:not(.selected) { background: color-mix(in srgb, var(--color-fill) 60%, transparent); }
}
.session-row:active { background: var(--color-fill); }
.session-row:focus-visible { outline-offset: -2px; }

.row-glyph {
  width: var(--layout-status-glyph); height: var(--layout-status-glyph); flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-hairline-strong); align-self: flex-start; margin-top: calc((var(--session-row-height) - 44px) / 2 + 3px);
}
.row-glyph[data-state='running'] { border-color: var(--color-activity); border-right-color: transparent; }
.row-glyph[data-state='waiting'] { background: var(--color-attention); border-color: var(--color-attention); }
.row-glyph[data-state='failed'] { border-color: var(--color-danger); }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-line1 { display: flex; align-items: baseline; gap: var(--space-8); min-width: 0; }
.row-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-age { flex: none; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.row-line2 { color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-backend { color: var(--color-text-secondary); }

.updates-pill {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); top: 168px;
  height: 28px; padding: 0 var(--space-12); border-radius: var(--radius-full);
  background: var(--color-raised); box-shadow: var(--elevation-float); color: var(--color-text);
}
.empty { padding: var(--space-48) var(--layout-gutter); text-align: center; max-width: var(--layout-empty-max-width); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Session pane ---------- */

.session-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.session-header {
  flex: none; height: var(--layout-bar-height); display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-8); position: relative; z-index: 1; background: var(--color-bg);
}
.session-header.scrolled { box-shadow: 0 var(--layout-hairline) 0 var(--color-hairline); }
.session-heading {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  max-width: var(--layout-max-content-width); margin: 0 auto; padding: 0 var(--space-12);
}
@media (min-width: 1024px) { .session-heading { padding: 0 var(--layout-gutter); } }
.session-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-subtitle { color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button {
  width: var(--layout-tap-web); height: var(--layout-tap-web); display: grid; place-items: center;
  border-radius: var(--radius-full); color: var(--color-text); flex: none;
}
.icon-button:active { background: var(--color-fill); }

.timeline-area { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.timeline-scroller { flex: 1; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; outline: none; }
.timeline-column {
  max-width: var(--layout-max-content-width); margin: 0 auto; padding: 0 var(--layout-gutter) var(--layout-bottom-fade);
}
.timeline-canvas { position: relative; }
.timeline-top { padding-top: var(--space-16); }

.block { position: absolute; left: 0; right: 0; top: 0; contain: layout style; }
/* Rhythm (SPEC §2): after your message 24, between agent items 16, same-kind rows 8. */
.block[data-kind='prompt'] { padding: var(--space-16) 0 var(--space-8); }
.block[data-kind='reply'] { padding: var(--space-8) 0; }
.block[data-kind='work'] { padding: var(--space-4) 0; }
.block[data-kind='marker'] { padding: var(--space-16) 0; }
.block[data-kind='notice'] { padding: var(--space-4) 0; }

.time-sep { text-align: center; color: var(--color-text-tertiary); padding: var(--space-12) 0 var(--space-8); font-variant-numeric: tabular-nums; }
.time-sep span { color: var(--color-text-secondary); }

.prompt-row { display: flex; justify-content: flex-end; }
.bubble {
  max-width: 85%; background: var(--color-bubble); border-radius: var(--radius-bubble);
  padding: var(--space-12) var(--space-16); overflow-wrap: anywhere; position: relative;
}
.bubble.clamped .bubble-text { max-height: calc(1.5em * 8); overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.bubble-more { display: block; margin-top: var(--space-4); }

.reply { overflow-wrap: anywhere; }

/* Rich document */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose .code-block, .prose .table-block { margin: 0 0 var(--space-12); }
.prose h1, .prose h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; margin: var(--space-24) 0 var(--space-8); text-wrap: balance; }
.prose h3 { font-size: 1.125rem; line-height: 1.3333; font-weight: 600; margin: var(--space-20) 0 var(--space-8); }
.prose h4, .prose h5, .prose h6 { font-size: 1rem; line-height: 1.375; font-weight: 600; margin: var(--space-16) 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li { margin: var(--space-2) 0; }
.prose li > p { margin: 0; }
.prose blockquote { border-left: 3px solid var(--color-hairline-strong); padding-left: var(--space-12); color: var(--color-text-secondary); }
.prose hr { border: 0; height: var(--layout-hairline); background: var(--color-hairline); margin: var(--space-20) 0; }
.prose a { color: var(--color-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.prose code { font: 400 0.875em/1 var(--font-mono); background: var(--color-inline-code-bg); border-radius: var(--radius-inline); padding: .12em .35em; }
.prose strong { font-weight: 600; }
.code-block { background: var(--color-code-bg); border-radius: var(--radius-block); border: var(--layout-hairline) solid var(--color-hairline); overflow: hidden; }
.code-lang { padding: var(--space-6) var(--space-12) 0; color: var(--color-text-tertiary); }
.code-block pre { margin: 0; padding: var(--space-8) var(--space-12) var(--space-12); overflow-x: auto; }
.code-block code, .work-pre { font: 400 0.8125rem/1.5385 var(--font-mono); background: none; padding: 0; tab-size: 4; }
.table-block { overflow-x: auto; border-radius: var(--radius-block); box-shadow: var(--elevation-card); }
.table-block table { border-collapse: collapse; width: 100%; font-size: .875rem; line-height: 1.4286; }
.table-block th { background: var(--color-surface); font-size: .8125rem; font-weight: 600; text-align: left; }
.table-block th, .table-block td { padding: var(--space-8) var(--space-12); border-bottom: var(--layout-hairline) solid var(--color-hairline); vertical-align: top; }
.table-block tr:last-child td { border-bottom: 0; }

/* Work group, reasoning, markers */
.work-head, .work-item-head {
  display: flex; align-items: center; gap: var(--space-8); width: 100%; min-height: 32px;
  color: var(--color-text-secondary); text-align: left; border-radius: var(--radius-button-sm);
}
.work-head { min-height: var(--layout-tap-web); margin: calc(-1 * var(--space-6)) 0; }
.work-summary, .work-item-summary { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-item-summary { font: 400 0.75rem/1.5 var(--font-mono); }
.chevron { color: var(--color-text-tertiary); transition: transform var(--duration-fast) var(--easing-standard); }
.work-head[aria-expanded='true'] .chevron { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .work-head:hover, .work-item-head:hover { color: var(--color-text); }
}
.work-flag { flex: none; font-variant-numeric: tabular-nums; }
.work-flag.failed { color: var(--color-danger); }
.work-flag.running { color: var(--color-activity); }
.work-items { margin: var(--space-8) 0 var(--space-4) 7px; padding-left: var(--space-16); border-left: var(--layout-hairline) solid var(--color-hairline-strong); display: flex; flex-direction: column; gap: var(--space-4); }
.work-part { margin: var(--space-4) 0 var(--space-8); }
.work-part-label { color: var(--color-text-tertiary); margin-bottom: var(--space-4); text-transform: none; }
.work-pre {
  margin: 0; padding: var(--space-8) var(--space-12); background: var(--color-code-bg); border-radius: var(--radius-block);
  border: var(--layout-hairline) solid var(--color-hairline); max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.thought { color: var(--color-text-secondary); padding: var(--space-2) 0 var(--space-4); }

.marker { display: flex; align-items: center; gap: var(--space-12); color: var(--color-text-tertiary); }
.marker::before, .marker::after { content: ''; flex: 1; height: var(--layout-hairline); background: var(--color-hairline-strong); }
.notice { color: var(--color-text-tertiary); }

.older { display: grid; place-items: center; min-height: 40px; color: var(--color-text-tertiary); }
.session-start { text-align: center; color: var(--color-text-tertiary); padding-bottom: var(--space-8); font-variant-numeric: tabular-nums; }
.empty-session { text-align: center; color: var(--color-text-tertiary); padding: var(--space-48) 0; }
.arc {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-activity); border-right-color: transparent;
  animation: spin var(--duration-spinner-cycle) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.jump {
  position: absolute; z-index: 2; bottom: var(--space-12);
  right: max(var(--layout-gutter), calc((100% - var(--layout-max-content-width)) / 2 + var(--layout-gutter)));
  width: var(--layout-jump-button); height: var(--layout-jump-button); border-radius: 50%;
  display: grid; place-items: center; background: var(--color-raised); box-shadow: var(--elevation-float); color: var(--color-text);
}
.jump:active { transform: scale(.97); }

/* Skeletons */
.skeleton-lines { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-4) 0; }
.skeleton-line, .skeleton-bubble {
  height: 12px; border-radius: var(--radius-inline);
  background: linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 100%) 0 0 / 200% 100%;
  animation: shimmer var(--duration-shimmer) linear infinite;
}
.skeleton-line:nth-child(2) { width: 86%; }
.skeleton-line:nth-child(3) { width: 64%; }
.skeleton-bubble { height: 44px; width: 60%; margin-left: auto; border-radius: var(--radius-bubble); margin-bottom: var(--space-24); }
.timeline-loading { padding: var(--space-16) 0; animation: appear 0s var(--duration-busy-delay) backwards; }
.bubble .skeleton-line { width: 220px; max-width: 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes appear { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .arc { animation: none; opacity: .6; }
}

/* ---------- Controls ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); white-space: nowrap;
  height: var(--layout-button-height); padding: 0 var(--space-20); border-radius: var(--radius-button); font: 600 1rem/1.25 var(--font-sans);
  transition: background var(--duration-fast) var(--easing-standard), transform var(--duration-press-in) var(--easing-standard);
}
.button.medium { height: var(--layout-button-medium-height); padding: 0 var(--space-16); font-size: .9375rem; }
.button.small { height: var(--layout-button-small-height); padding: 0 var(--space-12); font-size: .875rem; border-radius: var(--radius-button-sm); }
.button.primary { background: var(--color-primary); color: var(--color-on-primary); }
.button.secondary { background: var(--color-fill); color: var(--color-text); }
.button.tertiary { color: var(--color-text-secondary); }
.button:active:not(:disabled) { transform: scale(.97); }
.button:disabled { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .button.primary:hover:not(:disabled) { background: var(--color-primary-hover); }
  .button.secondary:hover:not(:disabled) { background: var(--color-hairline-strong); }
  .icon-button:hover { background: var(--color-fill); }
}
.icon-button.small { width: 32px; height: 32px; }
.field {
  width: 100%; height: var(--layout-field-height); padding: 0 var(--space-12); border-radius: var(--radius-control);
  border: 1px solid var(--color-hairline-strong); background: var(--color-raised); color: var(--color-text); font-size: max(16px, 1rem);
}
.field:focus { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.chip {
  height: var(--layout-chip-height); padding: 0 var(--space-12); border-radius: var(--radius-full);
  border: 1px solid var(--color-hairline-strong); color: var(--color-text-secondary);
}
.chip[aria-pressed='true'] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.segment.compact { height: 28px; display: inline-grid; }
.segment.compact .segment-item { padding: 0 var(--space-8); }
.switch { width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--color-hairline-strong); position: relative; transition: background var(--duration-fast) var(--easing-standard); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-thumb); box-shadow: var(--elevation-thumb); transition: transform var(--duration-fast) var(--easing-standard); }
.switch[aria-checked='true'] { background: var(--color-success); }
.switch[aria-checked='true'] .switch-thumb { transform: translateX(18px); }

/* ---------- Session header actions ---------- */

.session-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.mark-read { gap: var(--space-4); }
.with-count { position: relative; }
.count-badge {
  position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full);
  background: var(--color-fill); color: var(--color-text-secondary); line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
}
.unread-divider { display: flex; align-items: center; gap: var(--space-8); color: var(--color-accent); padding: var(--space-8) 0 var(--space-16); }
.unread-divider::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--color-accent) 40%, transparent); }

/* ---------- Timeline bottom: streaming text and request cards ---------- */

.timeline-bottom { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-8); }
.timeline-bottom:empty { display: none; }
.streams:empty, .cards:empty { display: none; }
.streams, .cards { display: flex; flex-direction: column; gap: var(--space-16); }
.stream-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.request-card {
  background: var(--color-raised); border-radius: var(--radius-card); box-shadow: var(--elevation-card);
  padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12);
  animation: appear var(--duration-base) var(--easing-enter);
}
.request-head { display: flex; align-items: flex-start; gap: var(--space-8); color: var(--color-attention); }
.request-head .icon { margin-top: 2px; }
.request-title { color: var(--color-text); overflow-wrap: anywhere; }
.request-command {
  margin: 0; padding: var(--space-8) var(--space-12); background: var(--color-code-bg); border-radius: var(--radius-block);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; font: 400 .8125rem/1.5385 var(--font-mono);
}
.request-meta { color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.request-reason { margin: 0; color: var(--color-text-secondary); }
.request-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.request-error { color: var(--color-danger); }
.question { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.question legend { padding: 0 0 var(--space-6); }
.choice {
  display: flex; align-items: flex-start; gap: var(--space-8); text-align: left; padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-control); border: 1px solid var(--color-hairline-strong); min-height: var(--layout-tap-web);
}
.choice[aria-checked='true'] { border-color: var(--color-primary); background: var(--color-fill); }
.choice-mark { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--color-control-border); display: grid; place-items: center; }
.choice[role='checkbox'] .choice-mark { border-radius: 5px; }
.choice[aria-checked='true'] .choice-mark { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.choice-text { display: flex; flex-direction: column; gap: 2px; }
.choice-desc { color: var(--color-text-tertiary); }
.ask-answer { display: flex; }

/* ---------- Dock: tray, live line, composer ---------- */

.dock {
  flex: none; position: relative; z-index: 1; padding: 0 var(--layout-gutter) calc(var(--space-12) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-8);
  max-width: calc(var(--layout-max-content-width) + 2 * var(--layout-gutter)); width: 100%; margin: 0 auto;
}
.dock::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--space-24); pointer-events: none;
  background: linear-gradient(transparent, var(--color-bg));
}
.live-line { display: flex; align-items: center; gap: var(--space-8); min-height: 24px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.live-step { color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-step.attention { color: var(--color-attention); }
.live-unknown { color: var(--color-text-tertiary); }
.live-line .icon { color: var(--color-attention); }
.arc.small { width: 14px; height: 14px; }
.tray { display: flex; flex-direction: column; gap: 2px; }
.tray-row {
  display: flex; align-items: center; gap: var(--space-8); min-height: 40px; padding: 0 var(--space-4) 0 var(--space-12);
  background: var(--color-surface); border-radius: var(--radius-control);
}
.tray-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-label { flex: none; color: var(--color-text-tertiary); }
.tray-actions { flex: none; display: flex; }
.tray-more { align-self: flex-start; padding: var(--space-4) var(--space-12); }

.composer {
  position: relative; background: var(--color-raised); border-radius: var(--radius-composer); box-shadow: var(--elevation-float);
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.composer-row { display: flex; align-items: flex-end; gap: var(--space-4); }
.composer-input {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: none; color: var(--color-text);
  padding: 10px var(--space-4); font-size: max(16px, 1rem); line-height: 1.5; max-height: 30vh;
}
.composer-input::placeholder { color: var(--color-text-tertiary); }
.composer-input[aria-disabled='true'] { color: var(--color-text-tertiary); }
.attach { color: var(--color-text-secondary); }
.send-button {
  flex: none; width: 40px; height: 40px; margin: 2px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary); color: var(--color-on-primary);
  transition: background var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard);
}
.send-button[aria-disabled='true'] { background: var(--color-fill); color: var(--color-text-disabled); cursor: default; }
.send-button.stop { background: var(--color-text); }
.composer-foot { display: flex; align-items: center; gap: var(--space-8); min-height: 28px; padding: 0 var(--space-6) 0 44px; }
.model-pill {
  display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 var(--space-8); border-radius: var(--radius-full);
  background: var(--color-fill); color: var(--color-text-secondary);
}
.model-pill .icon { color: var(--color-warning); }
.mode-toggle { display: inline-flex; background: var(--color-fill); border-radius: var(--radius-full); padding: 2px; }
.mode { height: 22px; padding: 0 var(--space-8); border-radius: var(--radius-full); color: var(--color-text-secondary); }
.mode[aria-checked='true'] { background: var(--color-thumb); color: var(--color-text); box-shadow: var(--elevation-thumb); }
.composer-status { margin-left: auto; color: var(--color-text-tertiary); }
.composer-notice { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-8) 0; color: var(--color-text-tertiary); }
.thumbs { display: flex; gap: var(--space-8); padding: var(--space-6) var(--space-6) var(--space-4); overflow-x: auto; }
.thumb { position: relative; flex: none; width: var(--layout-thumb-composer); height: var(--layout-thumb-composer); border-radius: var(--radius-block); overflow: hidden; background: var(--color-fill); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[data-state='uploading'] img { opacity: .5; }
.thumb[data-state='error'] { outline: 2px solid var(--color-danger); outline-offset: -2px; }
.thumb .arc { position: absolute; inset: 0; margin: auto; }
.thumb-error { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; background: var(--color-danger); color: var(--color-on-danger); text-align: center; }
.thumb-remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #000000A0; color: #fff; }
.settings-strip {
  position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-8)); padding: var(--space-12) var(--space-16);
  background: var(--color-raised); border-radius: var(--radius-card); box-shadow: var(--elevation-overlay);
  display: flex; flex-direction: column; gap: var(--space-12); animation: appear var(--duration-fast) var(--easing-enter);
}
.strip-row { display: flex; align-items: center; gap: var(--space-12); }
.strip-label { width: 48px; flex: none; color: var(--color-text-tertiary); }
.strip-hint { color: var(--color-text-tertiary); }

/* ---------- Toast ---------- */

.toast-host { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10; max-width: min(440px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-control);
  background: var(--color-inverse); color: var(--color-on-inverse); box-shadow: var(--elevation-float); animation: appear var(--duration-base) var(--easing-enter);
}
.toast[role='alert'] { background: var(--color-danger-fill); color: var(--color-on-danger); }
.toast-action { color: var(--color-inverse-accent); flex: none; }

/* ---------- Pages: Catch up, Accounts, Outputs ---------- */

.section-label { margin: var(--space-24) 0 var(--space-8); padding: 0 var(--space-4); color: var(--color-text-secondary); }
.catchup-body { max-width: var(--layout-max-content-width); margin: 0 auto; padding: 0 var(--layout-gutter) var(--space-48); display: flex; flex-direction: column; }
@media (min-width: 1024px) { .catchup-body { padding: 0 var(--space-12) var(--space-48); } }
.catchup-request { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-12); }
.catchup-source { align-self: flex-start; color: var(--color-text-secondary); padding: 0 var(--space-4); }
.catchup-source:hover { color: var(--color-text); }
.catchup-row { display: flex; align-items: center; gap: var(--space-4); border-bottom: var(--layout-hairline) solid var(--color-hairline); }
.catchup-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: var(--space-12) var(--space-4); }
.catchup-open .row-line1 { display: flex; gap: var(--space-8); align-items: baseline; }
.new-pill { flex: none; height: 20px; padding: 0 var(--space-8); border-radius: var(--radius-full); background: var(--color-attention-soft); color: var(--color-attention); font-weight: 600; line-height: 20px; }
.catchup-outputs { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-4); }
.output-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-8); border-radius: var(--radius-full); background: var(--color-fill); color: var(--color-text-secondary); }

.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-header {
  flex: none; height: var(--layout-bar-height); display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-8); max-width: calc(var(--layout-max-content-width) + 2 * var(--layout-gutter)); width: 100%; margin: 0 auto;
}
.page-header h1 { margin: 0; padding: 0 var(--space-12); }
.page-header .session-heading { padding: 0 var(--space-12); }
.page-header .session-heading h1 { padding: 0; }
.page-scroller { flex: 1; overflow-y: auto; }
.page-column { max-width: var(--layout-max-content-width); margin: 0 auto; padding: 0 var(--layout-gutter) var(--space-48); }
.group { background: var(--color-raised); border-radius: var(--radius-card); box-shadow: var(--elevation-card); overflow: hidden; }
.account-row, .output-row {
  width: 100%; display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); min-height: var(--layout-row-min-height); text-align: left;
}
.account-row + .account-row, .output-row + .output-row { border-top: var(--layout-hairline) solid var(--color-hairline); }
.account-text, .output-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-current { color: var(--color-success); }
.account-switching { color: var(--color-text-tertiary); }
.account-confirm { display: flex; gap: var(--space-4); }
.meter { height: 6px; border-radius: var(--radius-full); background: var(--color-fill); overflow: hidden; margin-top: var(--space-6); max-width: 280px; }
.meter-fill { height: 100%; border-radius: inherit; background: var(--color-text-secondary); }
.meter-fill[data-level='mid'] { background: var(--color-warning); }
.meter-fill[data-level='high'] { background: var(--color-danger); }
.output-icon { color: var(--color-text-secondary); }
.output-row > .icon:last-child { color: var(--color-text-tertiary); }
@media (hover: hover) and (pointer: fine) { .output-row:hover { background: var(--color-surface); } }

.viewer-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.viewer-tools { display: flex; gap: var(--space-8); align-items: center; margin-left: auto; }
.viewer-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.viewer-image-wrap { flex: 1; display: grid; place-items: center; padding: var(--space-16); }
.viewer-image { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; cursor: zoom-in; border-radius: var(--radius-block); }
.viewer-image.zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.viewer-text { margin: 0; padding: var(--space-16) var(--layout-gutter); font: 400 .8125rem/1.5385 var(--font-mono); tab-size: 4; }
.viewer-text.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.prose.reading { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.6; padding-top: var(--space-16); }

/* ---------- Devices and pairing ---------- */

.pairing-start { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: 0 var(--space-4); }
.request-card.pairing { align-items: stretch; }
.qr-wrap { align-self: center; padding: var(--space-12); background: #fff; border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.qr { display: block; width: min(240px, 60vw); height: auto; image-rendering: pixelated; }
.fingerprint {
  font: 600 1rem/1.5 var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  padding: var(--space-12) var(--space-16); border-radius: var(--radius-block); background: var(--color-surface);
  color: var(--color-text); text-align: center; overflow-wrap: anywhere;
}
.inline-command {
  display: inline-block; margin-top: var(--space-6); padding: var(--space-4) var(--space-8); border-radius: var(--radius-inline);
  background: var(--color-inline-code-bg); color: var(--color-text); font: 400 .8125rem/1.5 var(--font-mono);
}
.notice-row {
  display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-16); padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-secondary);
}
.empty-inline { padding: var(--space-8) var(--space-4); }
.button.danger { background: var(--color-danger-fill); color: var(--color-on-danger); }
.account-text .dot { display: inline-block; vertical-align: middle; }

/* ---------- Gate pages (sign in, pair, activate) ---------- */

.gate { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-24) var(--layout-gutter); }
.gate-card {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-16); text-align: left;
}
.gate-card h1 { margin: 0; }
.gate-card p { margin: 0; }
.gate-mark {
  width: 52px; height: 52px; border-radius: var(--radius-card); display: grid; place-items: center;
  background: var(--color-inverse); color: var(--color-on-inverse);
}
.gate-action { align-self: stretch; text-decoration: none; }
.gate-form { display: flex; flex-direction: column; gap: var(--space-12); }
.gate-form input {
  height: var(--layout-field-height); padding: 0 var(--space-12); border-radius: var(--radius-control);
  border: 1px solid var(--color-hairline-strong); background: var(--color-raised); color: var(--color-text);
  font: 600 1.25rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.gate-form button {
  height: var(--layout-button-height); border-radius: var(--radius-button); background: var(--color-primary); color: var(--color-on-primary);
  font: 600 1rem/1.25 var(--font-sans);
}
.gate-form p { color: var(--color-text-secondary); font-size: .9375rem; }

.invite-link-row { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-12); border-top: var(--layout-hairline) solid var(--color-hairline); }
.invite-link-row p { margin: 0; }
.invite-link-field { display: flex; gap: var(--space-8); align-items: center; }
.invite-link { flex: 1; min-width: 0; height: var(--layout-button-small-height); font-size: .75rem; }

.notify-bar { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-secondary); }
.notify-bar .icon { color: var(--color-attention); }
.notify-text { flex: 1; min-width: 0; }

.code-labeled { display: flex; flex-direction: column; gap: var(--space-4); }
.code-owner { color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; }