/* tether · quiet controls, readable activity, explicit decisions. */
:root {
  color-scheme: light;
  --color-paper: #f4f5f2;
  --color-paper-2: #ffffff;
  --color-paper-3: #e9ede9;
  --color-ink: #202823;
  --color-ink-2: #566159;
  --color-ink-3: #606b63;
  --color-line: #d8ded8;
  --color-control: #829087;
  --color-accent: #286354;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #e3eee8;
  --color-action: #273b31;
  --color-action-hover: #192c22;
  --color-action-ink: #ffffff;
  --color-warn: #80500b;
  --color-warn-soft: #fff3dc;
  --color-warn-line: #b48c46;
  --color-danger: #a52f38;
  --color-danger-soft: #ffefee;
  --color-danger-line: #be767b;
  --color-ok: #256342;
  --color-ok-soft: #e4f1e7;
  --color-focus: #286354;
  --color-disabled: #e3e7e2;
  --color-disabled-ink: #67726a;
  --color-toast: #26352d;
  --color-toast-ink: #f7faf6;
  --color-fingerprint: #e7eee8;
  --color-fingerprint-ink: #192b20;
  --color-fingerprint-line: #7d9283;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-title: 1.5rem;
  --leading: 1.6;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-card: 16px;
  --radius-bubble: 14px;
  --tap: 44px;
  --bar-h: 88px;
  --tabs-h: 60px;
  --content-max: 768px;
  --gutter: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-space: calc(var(--tabs-h) + var(--safe-bottom));
  /* Motion: tween tokens only. Fast for color; base for menus; medium for toasts. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-medium: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-composer: 10;
  --z-bar: 20;
  --z-tabs: 30;
  --z-toast: 40;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-paper: #141916;
    --color-paper-2: #1d2520;
    --color-paper-3: #2b362f;
    --color-ink: #edf2ec;
    --color-ink-2: #b6c2b8;
    --color-ink-3: #a0aea3;
    --color-line: #3c4a40;
    --color-control: #7d9182;
    --color-accent: #a0d7be;
    --color-accent-ink: #14291d;
    --color-accent-soft: #293f32;
    --color-action: #cedfd0;
    --color-action-hover: #e5efe4;
    --color-action-ink: #18281e;
    --color-warn: #f2cc88;
    --color-warn-soft: #352b1c;
    --color-warn-line: #967442;
    --color-danger: #ffb2b7;
    --color-danger-soft: #3d252a;
    --color-danger-line: #aa6972;
    --color-ok: #a2d6af;
    --color-ok-soft: #273d2d;
    --color-focus: #a0d7be;
    --color-disabled: #303c33;
    --color-disabled-ink: #a1afa5;
    --color-toast: #dce7db;
    --color-toast-ink: #19271e;
    --color-fingerprint: #24392c;
    --color-fingerprint-ink: #f2f7ed;
    --color-fingerprint-line: #92aa98;
  }
}

/* Base: wrap the content instead of concealing overflow. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block: calc(var(--bar-h) + var(--safe-top) + 16px) calc(var(--nav-space) + 24px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--color-paper); color: var(--color-ink);
  font: var(--text-base)/var(--leading) var(--font-body);
  overflow-wrap: anywhere;
}
h1, h2, h3 { margin: 0; min-width: 0; font-weight: 650; line-height: 1.35; }
h1 { font-size: var(--text-title); letter-spacing: -0.025em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  transition: outline-color var(--motion-fast) var(--ease-out);
}
img { max-width: 100%; height: auto; }
pre, code { font-family: var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.row > * { min-width: 0; max-width: 100%; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }

/* Shell: row two gives the entire connection reason room. */
.bar {
  position: sticky; top: 0; z-index: var(--z-bar); flex: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4); align-items: center;
  min-height: calc(var(--bar-h) + var(--safe-top));
  padding-block: calc(var(--safe-top) + var(--space-2)) var(--space-2);
  padding-left: max(var(--gutter), var(--safe-left), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), var(--safe-right), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  border-bottom: 1px solid var(--color-line); background: var(--color-paper-2);
}
.brand { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--color-ink); font-size: 20px; font-weight: 700; letter-spacing: -0.045em; text-decoration: none; }
.status { grid-column: 1 / -1; margin: 0; color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.5; white-space: normal; overflow-wrap: anywhere; transition: color var(--motion-fast) var(--ease-out); }
.status:empty { display: none; }
.status::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: var(--space-2);
  border: 1px solid currentColor; border-radius: 50%; vertical-align: 1px;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.status[data-state="online"]::before { border-color: var(--color-ok); background: var(--color-ok); }
.status[data-state="offline"] { color: var(--color-warn); }
.status[data-state="offline"]::before { border-color: currentColor; background: currentColor; }
.node-switch {
  justify-self: end; display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: var(--tap); min-height: var(--tap); max-width: 100%;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control);
  border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink);
  font-size: var(--text-sm); font-weight: 600; cursor: pointer; touch-action: manipulation;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.node-switch .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-switch::after {
  content: ""; flex: none; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-fast) var(--ease-out);
}
.node-switch[aria-expanded="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.node-switch[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.node-menu { position: relative; flex: none; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) max(var(--gutter), var(--safe-right)) var(--space-4) max(var(--gutter), var(--safe-left)); border-bottom: 1px solid var(--color-line); background: var(--color-paper-2); }
.node-menu:not([hidden]) { animation: rise-in var(--motion-base) var(--ease-out); }
.node-menu .list { margin: 0; border: 0; }
.node-menu .node {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3);
  width: 100%; min-height: 64px; padding: var(--space-3); border: 0; border-radius: var(--radius);
  text-align: left; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.node-menu .node[aria-current="true"] { background: var(--color-accent-soft); }
.node-menu .title { font-weight: 600; overflow-wrap: anywhere; }
.node-menu .meta { grid-column: 1 / -1; color: var(--color-ink-2); font-size: var(--text-xs); }
main#view { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) max(var(--gutter), var(--safe-right)) calc(var(--nav-space) + var(--space-5)) max(var(--gutter), var(--safe-left)); }
main#view:focus { outline: none; }
.head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.head > .btn { flex: none; }
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-tabs);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: var(--nav-space); padding-bottom: var(--safe-bottom);
  padding-left: max(var(--safe-left), calc((100% - var(--content-max)) / 2));
  padding-right: max(var(--safe-right), calc((100% - var(--content-max)) / 2));
  border-top: 1px solid var(--color-line); background: var(--color-paper-2);
}
.tabs a {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: var(--tabs-h); padding: var(--space-2) var(--space-1);
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; touch-action: manipulation;
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.tabs a::before {
  content: ""; position: absolute; top: 0; left: calc(50% - 12px); width: 24px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-out);
}
.tabs a[aria-current="page"] { color: var(--color-accent); font-weight: 700; background: var(--color-accent-soft); }
.tabs a[aria-current="page"]::before { transform: scaleX(1); }

/* Small buttons retain a 44px touch target. */
.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2);
  min-width: var(--tap); min-height: var(--tap); max-width: 100%; padding: 10px var(--space-4);
  border: 1px solid var(--color-control); border-radius: var(--radius);
  background: var(--color-paper-2); color: var(--color-ink);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
.btn.primary { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-ink); }
.btn.danger { background: var(--color-danger-soft); border-color: var(--color-danger-line); color: var(--color-danger); }
.btn.small { min-height: var(--tap); padding: 10px var(--space-3); font-size: var(--text-xs); }
.btn:active:not(:disabled):not([data-state]) { background: var(--color-paper-3); transform: scale(0.98); }
.btn.primary:active:not(:disabled):not([data-state]) { background: var(--color-action-hover); }
.btn.danger:active:not(:disabled):not([data-state]) { border-color: var(--color-danger); background: var(--color-danger-soft); }
.btn[data-state="error"] { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger-line); }
.btn[data-state="success"] { background: var(--color-ok-soft); color: var(--color-ok); border-color: var(--color-ok); }
.btn[data-state="error"]::after { content: "!"; }
.btn[data-state="success"]::after { content: "✓"; }
.btn:disabled { cursor: not-allowed; background: var(--color-disabled); color: var(--color-disabled-ink); border-color: var(--color-line); }
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"]::after { content: "…"; }
label { display: block; margin: var(--space-5) 0 var(--space-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
input, textarea { width: 100%; min-width: 0; max-width: 100%; padding: var(--space-3); border: 1px solid var(--color-control); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); font-size: 1rem; line-height: 1.5; }
input { min-height: 48px; }
textarea { display: block; min-height: 112px; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
input::placeholder, textarea::placeholder { color: var(--color-ink-3); opacity: 1; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--color-danger); }
.hint { margin: var(--space-2) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; }
.form-error { margin: var(--space-2) 0 0; color: var(--color-danger); font-size: var(--text-sm); line-height: 1.6; }
.form-error:not(:empty) { padding: var(--space-3); border: 1px solid var(--color-danger-line); border-radius: var(--radius); background: var(--color-danger-soft); }
#view > form > .row.mt-4 { margin-top: var(--space-5); }
#view > form > .row > .primary { flex: 1; }
#pair-link { min-height: 112px; }
#tether-shell-scan { width: 100%; min-height: 48px; margin: 0 0 var(--space-3); }
/* The native scan button is inserted inside the label/textarea sequence. */
form:has(#tether-shell-scan) > .row > .btn.primary:not(:disabled):not([data-state]) { color: var(--color-ink); background: var(--color-paper-2); border-color: var(--color-control); }

/* Verification: all characters remain visible, selectable and unaltered. */
.fingerprint { margin: var(--space-5) 0 0; padding: var(--space-4); border: 1px solid var(--color-fingerprint-line); border-radius: var(--radius-card); background: var(--color-fingerprint); color: var(--color-fingerprint-ink); font-size: var(--text-sm); font-weight: 600; }
#fingerprint, .fingerprint .mono { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; font-variant-ligatures: none; font-variant-numeric: tabular-nums slashed-zero; line-height: 1.8; letter-spacing: 0.06em; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; user-select: text; -webkit-user-select: text; }
.fingerprint + .hint { margin-top: var(--space-3); color: var(--color-warn); font-size: var(--text-sm); }
#key-note { margin-top: var(--space-5); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-paper-2); }
#key-note[data-storage="exportable"] { border-color: var(--color-warn-line); background: var(--color-warn-soft); color: var(--color-warn); }
#view:has(> .fingerprint) > .row { margin-top: var(--space-5); }
#view:has(> .fingerprint) > .row > .primary { flex: 1; }

/* Lists: one surface, title first, status second, metadata last. */
.list { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--color-line); }
.list > li + li { border-top: 1px solid var(--color-line); }
#conv-list { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper-2); }
.conv { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-3); min-height: 88px; padding: var(--space-4); color: inherit; text-decoration: none; }
#conv-list > li:first-child .conv { border-radius: var(--radius-card) var(--radius-card) 0 0; }
#conv-list > li:last-child .conv { border-radius: 0 0 var(--radius-card) var(--radius-card); }
#conv-list > li:only-child .conv { border-radius: var(--radius-card); }
.conv .title { min-width: 0; font-size: var(--text-base); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.conv .meta { grid-column: 1 / -1; min-width: 0; color: var(--color-ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: 5px; align-self: start; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.6; white-space: nowrap; }
.badge.live { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.badge.live::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.badge.bad { background: var(--color-danger-soft); color: var(--color-danger); }
.badge.count { flex: none; align-self: center; min-width: 22px; justify-content: center; padding: 1px 6px; background: var(--color-danger); color: var(--color-paper-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.empty { padding: var(--space-6) var(--space-4); color: var(--color-ink-2); font-size: var(--text-sm); text-align: center; }

/* Conversation: document-like assistant text and inset user messages. */
#view:has(> .composer) { display: flex; flex-direction: column; }
#view:has(> .composer) > #thread { flex: 1; }
.thread { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); min-width: 0; }
.bubble { min-width: 0; max-width: 100%; padding: var(--space-4); border-radius: var(--radius-bubble); line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; max-width: 92%; background: var(--color-paper-3); border-bottom-right-radius: var(--radius-sm); }
.bubble.assistant { padding: var(--space-2) 0; background: transparent; }
.bubble.tool, .bubble.progress { padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); color: var(--color-ink-2); background: var(--color-paper-2); font-size: var(--text-sm); line-height: 1.65; white-space: pre-wrap; }
.bubble .who { display: block; margin-bottom: var(--space-2); color: var(--color-ink-3); font-size: var(--text-xs); line-height: 1.5; font-variant-numeric: tabular-nums; }
.bubble.progress { margin-top: var(--space-4); background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-control); }
.bubble.live-text { padding: var(--space-4); border: 1px solid var(--color-control); background: var(--color-paper-2); color: var(--color-ink); }
.composer { position: sticky; bottom: var(--nav-space); z-index: var(--z-composer); flex: none; margin-top: var(--space-5); padding: var(--space-3); border: 1px solid var(--color-control); border-radius: var(--radius-card); background: var(--color-paper-2); }
.composer label { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--color-ink-2); }
.composer textarea { min-height: 76px; max-height: 32vh; max-height: 32dvh; }
.composer .row { justify-content: flex-end; margin-top: var(--space-3); }
.composer .btn { min-width: 80px; }
.composer .primary { min-width: 112px; }
.queue { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper-2); }
.queue h2 { font-size: var(--text-sm); }
.queue ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.queue li { padding: var(--space-3) 0; }
.queue li + li { border-top: 1px solid var(--color-line); }
.queue li::marker { color: var(--color-ink-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.queue .text { margin: 0 0 var(--space-2); color: var(--color-ink); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.queue .row { justify-content: flex-end; }

/* Attention keeps every decision and its payload visible. */
.attention { display: flex; flex-direction: column; flex: none; gap: var(--space-3); width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left)); }
.card { padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper-2); }
.card.approval, .card.warn { border-color: var(--color-warn-line); background: var(--color-warn-soft); }
.card.bad { border-color: var(--color-danger-line); background: var(--color-danger-soft); }
.card .kind { margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-ink-2); }
.card.approval .kind, .card.warn .kind { color: var(--color-warn); }
.card.bad .kind { color: var(--color-danger); }
.card .body { margin: var(--space-2) 0 var(--space-4); color: var(--color-ink); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.card .row { gap: var(--space-2); }
.card .row .btn { flex: 1 1 auto; }

/* Tools: separate purposes and place a boundary before destructive controls. */
#view > h1 + section { margin-top: var(--space-5); }
#view > section:not(.queue) { padding-block: var(--space-5); border-top: 1px solid var(--color-line); }
#view > section:not(.queue) + section { margin-top: 0; }
#view > section:not(.queue) > .row:has(.btn.danger) { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
#view > section:not(.queue) > .row > .btn.danger { width: 100%; justify-content: flex-start; }
#key-storage { margin-block: var(--space-3); }
pre.out { margin: var(--space-3) 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.7; }
.found { padding: var(--space-3) 0; }
.toast { position: fixed; left: max(var(--gutter), var(--safe-left)); right: max(var(--gutter), var(--safe-right)); bottom: calc(var(--nav-space) + var(--space-3)); z-index: var(--z-toast); max-width: 560px; margin: 0 auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-control); border-radius: var(--radius); background: var(--color-toast); color: var(--color-toast-ink); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; pointer-events: none; }
.toast:not([hidden]) { animation: toast-in var(--motion-medium) var(--ease-out); }
.toast[data-kind="error"] { border-color: var(--color-danger-line); background: var(--color-danger-soft); color: var(--color-danger); }
body:has(.composer) .toast { top: calc(var(--bar-h) + var(--safe-top) + var(--space-3)); bottom: auto; }
body:has(> #tabs[hidden]) { --nav-space: var(--safe-bottom); }

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not([data-state]):hover, .node-switch:hover, .node-menu .node:hover, .conv:hover { background: var(--color-paper-3); }
  .btn:not(:disabled):not([data-state]):hover { transform: translateY(-1px); }
  .btn.primary:not(:disabled):not([data-state]):hover { background: var(--color-action-hover); }
  .btn.danger:not(:disabled):not([data-state]):hover { background: var(--color-danger-soft); border-color: var(--color-danger); }
  .tabs a:hover { color: var(--color-accent); }
  input:hover, textarea:hover { border-color: var(--color-ink-2); }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .conv { padding: var(--space-3); gap: var(--space-2); }
  .card .row .btn { flex-basis: calc(50% - var(--space-2)); }
}
@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .bubble.user { max-width: 82%; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=full]) *, :root:not([data-motion=full]) *::before, :root:not([data-motion=full]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Review: compact shell, one conversation scroller and local confirmations. */
:root { --bar-h:60px; --tabs-h:66px; --nav-space:calc(var(--tabs-h) + var(--safe-bottom) + 20px); --glass-face:#f6f8f5; --glass-edge:#ffffff; --glass-low:#e3e9e1; --glass-active:#dde8df; }
@media (prefers-color-scheme: dark) { :root { --glass-face:#242d27; --glass-edge:#647469; --glass-low:#19211c; --glass-active:#3b4d40; } }
:root[data-theme="claude"] {
  --color-paper:#faf9f5; --color-paper-2:#ffffff; --color-paper-3:#f0eee6;
  --color-ink:#262624; --color-ink-2:#5e5d56; --color-ink-3:#6e6c64;
  --color-line:#dfddd3; --color-control:#99958a;
  --color-accent:#995137; --color-accent-ink:#ffffff; --color-accent-soft:#f5e8df;
  --color-action:#a9573a; --color-action-hover:#8d462f; --color-action-ink:#ffffff;
  --color-focus:#995137; --color-disabled:#e9e6dd; --color-disabled-ink:#746f65;
  --color-toast:#302c28; --color-toast-ink:#faf9f5;
  --color-fingerprint:#f1ece1; --color-fingerprint-ink:#342c25; --color-fingerprint-line:#9a8874;
  --glass-face:#faf9f5; --glass-edge:#ffffff; --glass-low:#ebe6da; --glass-active:#eee0d3;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="claude"] {
    --color-paper:#262624; --color-paper-2:#30302e; --color-paper-3:#3c3b37;
    --color-ink:#f5f3eb; --color-ink-2:#c4c0b5; --color-ink-3:#b5afa2;
    --color-line:#4c4942; --color-control:#938a7c;
    --color-accent:#e9ac8c; --color-accent-ink:#2a1e17; --color-accent-soft:#48352a;
    --color-action:#e9ad8c; --color-action-hover:#f1c2a8; --color-action-ink:#2c1e16;
    --color-focus:#e9ac8c; --color-disabled:#46413a; --color-disabled-ink:#bfb5a8;
    --color-toast:#eee8db; --color-toast-ink:#29241e;
    --color-fingerprint:#40392c; --color-fingerprint-ink:#f5f0e3; --color-fingerprint-line:#aa967a;
    --glass-face:#33322e; --glass-edge:#777063; --glass-low:#24231f; --glass-active:#514438;
  }
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.bar { grid-template-columns:auto auto minmax(0,1fr) 44px; gap:6px; padding-block:calc(var(--safe-top) + 6px) 6px; }
.brand { grid-column:1; grid-row:1; font-size:19px; }
.status { grid-column:2; grid-row:1; font-size:11px; white-space:nowrap; }
.status::before { width:6px; height:6px; margin-right:4px; vertical-align:1px; }
.status[data-state="offline"] { grid-column:1/-1; grid-row:2; white-space:normal; }
.node-switch { grid-column:3; grid-row:1; border-color:transparent; background:transparent; padding:6px; gap:5px; font-size:12px; }
.theme-switch { grid-column:4; grid-row:1; padding:0; border-color:transparent; background:transparent; color:var(--color-ink-2); }
.btn { justify-content:center; text-align:center; }
#view > section:not(.queue) > .row > .btn.danger { justify-content:center; }
.btn.icon-button,.composer .btn.icon-button { position:relative; flex:none; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; }
.icon-button[data-state]::after { position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; background:inherit; }
.ui-icon { position:relative; display:inline-block; flex:none; width:20px; height:20px; vertical-align:-4px; color:inherit; }
.icon-arrow::before { content:""; position:absolute; height:13px; left:9px; top:4px; border-left:1.8px solid; }
.icon-arrow::after { content:""; position:absolute; width:8px; height:8px; left:5.5px; top:4px; border-top:1.8px solid; border-left:1.8px solid; transform:rotate(45deg); }
.icon-close::before,.icon-close::after { content:""; position:absolute; width:13px; left:3.5px; top:9px; border-top:1.6px solid; transform:rotate(45deg); }
.icon-close::after { transform:rotate(-45deg); }
.icon-plus::before { content:""; position:absolute; width:14px; left:3px; top:9px; border-top:1.7px solid; }
.icon-plus::after { content:""; position:absolute; height:14px; left:9px; top:3px; border-left:1.7px solid; }
.icon-chat::before { content:""; position:absolute; inset:2px 1px 4px; border:1.6px solid; border-radius:5px; }
.icon-chat::after { content:""; position:absolute; width:5px; height:5px; left:5px; bottom:1px; border-left:1.5px solid; transform:skewY(-35deg); }
.icon-sliders { background:linear-gradient(currentColor,currentColor) center 5px/17px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center 14px/17px 1.5px no-repeat; }
.icon-sliders::before,.icon-sliders::after { content:""; position:absolute; width:5px; height:6px; border:1.5px solid; border-radius:2px; background:var(--glass-face); top:2.7px; left:5px; }
.icon-sliders::after { top:11.8px; left:11px; }
.icon-theme::before { content:""; position:absolute; inset:2px; border:1.5px solid; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%); transform:rotate(-35deg); }
.icon-folder::before { content:""; position:absolute; inset:5px 1px 2px; border:1.5px solid; border-radius:3px; }
.icon-folder::after { content:""; position:absolute; width:8px; height:4px; top:2px; left:1px; border:1.5px solid; border-bottom:0; border-radius:3px 3px 0 0; }
.icon-chevron::after { content:""; position:absolute; width:6px; height:6px; left:6px; top:6px; border-right:1.5px solid; border-top:1.5px solid; transform:rotate(45deg); }
.icon-tool::before { content:""; position:absolute; width:7px; height:7px; top:2px; left:9px; border:1.5px solid; border-radius:2px; transform:rotate(-45deg); }
.icon-tool::after { content:""; position:absolute; height:11px; top:7px; left:7px; border-left:2px solid; transform:rotate(45deg); }
.icon-thought::before { content:""; position:absolute; inset:3px; border:1.5px dotted; border-radius:50%; }
.icon-thought::after { content:""; position:absolute; width:4px; height:4px; left:8px; top:8px; background:currentColor; border-radius:50%; }
.tabs { left:12px; right:12px; bottom:calc(var(--safe-bottom) + 10px); width:auto; max-width:calc(var(--content-max) - 24px); height:var(--tabs-h); min-height:var(--tabs-h); padding:5px; border:1px solid var(--color-line); border-radius:36px; background:linear-gradient(155deg,var(--glass-edge),var(--glass-face) 30%,var(--glass-low)); box-shadow:inset 0 1px 0 var(--glass-edge),0 3px 10px #0000000a; gap:4px; }
.tabs a { display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:54px; padding:4px 6px; border-radius:30px; font-size:11px; line-height:1.3; }
.tabs a::before { content:none; }
.tabs a[aria-current="page"] { background:var(--glass-active); box-shadow:inset 0 1px 0 var(--glass-edge); color:var(--color-accent); }
.tabs a:active { transform:scale(.98); }
body:has(#view > .composer) { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
body:has(#view > .composer) > .attention { flex-shrink:1; max-height:32dvh; overflow-y:auto; }
body:has(#view > .composer) > .node-menu { max-height:35dvh; overflow-y:auto; }
main#view:has(> .composer) { min-height:0; overflow:hidden; padding-top:12px; padding-bottom:var(--nav-space); gap:0; }
#view:has(> .composer) > .head { flex:none; }
#view:has(> .composer) .head h1 { font-size:18px; }
#view:has(> .composer) > .hint.mono { flex:none; margin:0 0 6px; font-size:11px; }
.conversation-scroll { display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:8px; scrollbar-width:thin; }
.conversation-scroll .thread { flex:none; gap:16px; margin-top:12px; }
.bubble { padding:10px 12px; line-height:1.65; font-size:15px; }
.bubble.assistant { padding:2px 0; }
.bubble .who { display:none; }
.bubble.tool,.bubble.progress { padding:5px 0; border:0; background:transparent; font-size:12px; line-height:1.7; }
.bubble.tool > .ui-icon,.bubble.progress > .ui-icon { width:20px; margin-right:5px; }
.bubble.progress { flex:none; margin-top:10px; margin-bottom:12px; }
.composer { position:relative; bottom:auto; z-index:auto; margin-top:8px; padding:8px; border-color:var(--color-line); border-radius:18px; }
.composer > label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.composer textarea { height:58px; min-height:48px; max-height:100px; padding:7px; border:0; background:transparent; resize:none; }
.composer .row { margin-top:2px; flex-wrap:nowrap; gap:6px; }
.composer .btn { min-width:44px; min-height:44px; padding:7px 12px; font-size:13px; }
.composer .model-picker { margin-right:auto; }
.model-picker { display:inline-flex; min-width:0; max-width:60%; }
.model-picker .btn { border:0; background:transparent; padding:8px; color:var(--color-ink-2); font-size:13px; }
select { font:inherit; min-height:44px; max-width:100%; padding:8px 30px 8px 12px; border:1px solid var(--color-line); border-radius:10px; background:var(--color-paper-2); color:var(--color-ink); }
.model-picker select { width:100%; border:0; background:transparent; font-size:13px; }
.queue { flex:none; margin-top:auto; padding:8px 10px 0; border:1px solid var(--color-line); border-radius:14px; }
.queue h2 { margin:0; font-size:11px; color:var(--color-ink-2); }
.queue ol { list-style:none; padding:0; margin:0; }
.queue li { display:flex; align-items:center; min-height:44px; padding:0; gap:4px; }
.queue .text { flex:1; min-width:0; margin:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue .row { flex:none; flex-wrap:nowrap; gap:0; }
.queue .btn { border:0; background:transparent; color:var(--color-ink-2); }
.status-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 0; margin:0 0 8px; }
.status-summary dt { color:var(--color-ink-2); font-size:12px; }
.status-summary dd { margin:2px 0 0; font-size:15px; font-weight:600; }
.path-control { display:flex; align-items:center; gap:6px; }
.path-control input { min-width:0; flex:1; cursor:pointer; }
.path-control .btn { border-color:var(--color-line); }
.open-directory > .row > .btn { width:100%; }
.local-dialog { width:calc(100% - 32px); max-width:370px; max-height:calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom)); padding:24px; margin:auto; border:1px solid var(--color-line); border-radius:24px; background:var(--color-paper-2); color:var(--color-ink); overflow-y:auto; }
.local-dialog[open] { animation:dialog-in var(--motion-base) var(--ease-out); }
.local-dialog::backdrop { background:#0c181257; animation:dialog-backdrop var(--motion-fast) var(--ease-out); }
.local-dialog[data-closing] { animation:dialog-out var(--motion-fast) var(--ease-out) forwards; }
.local-dialog .hint { margin:12px 0 20px; font-size:14px; line-height:1.7; }
.dialog-actions { display:flex; gap:8px; margin-top:20px; }
.dialog-actions .btn { flex:1; min-height:48px; }
.directory-dialog { padding:20px; }
.directory-heading { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--color-line); }
.directory-heading .btn { flex:none; }
.directory-path { margin:0; min-width:0; font-size:11px; }
.directory-list { list-style:none; padding:0; margin:8px 0; max-height:40dvh; overflow-y:auto; }
.directory-item { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:8px 6px; border:0; border-radius:8px; background:transparent; color:var(--color-ink); font:inherit; text-align:left; cursor:pointer; }
.directory-item span:nth-child(2) { flex:1; }
.directory-item:hover { background:var(--color-paper-3); }
.new-chat-form #ws { width:100%; }
.new-chat-form .workspace-path { font-size:12px; margin:8px 0 24px; min-height:20px; }
.new-prompt { border:1px solid var(--color-control); border-radius:18px; padding:10px; background:var(--color-paper-2); }
.new-prompt #prompt { min-height:170px; border:0; padding:8px; background:transparent; resize:vertical; }
.new-prompt-actions { justify-content:space-between; flex-wrap:nowrap; margin-top:8px; gap:8px; }
.new-prompt-actions .btn.primary { flex:none; min-height:44px; font-size:14px; padding:8px 12px; gap:8px; }
@keyframes dialog-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes dialog-out { to { opacity:0; transform:translateY(6px) scale(.98); } }
@keyframes dialog-backdrop { from { background:#0c181200; } }
@media (max-height:650px) { .composer textarea { height:48px; } #view:has(>.composer) > .hint.mono { display:none; } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion=full]) *,:root:not([data-motion=full]) *::before,:root:not([data-motion=full]) *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }

/* The node selector floats within the sticky header's own stacking context. */
.bar > .node-menu {
  position:absolute; z-index:1; top:calc(100% + 6px);
  right:max(var(--gutter), var(--safe-right), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  width:min(304px, calc(100% - var(--gutter) * 2)); max-width:none;
  max-height:min(420px, calc(100dvh - var(--safe-top) - var(--nav-space) - 90px));
  margin:0; padding:8px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--color-line); border-radius:18px;
  background:var(--color-paper-2); box-shadow:0 4px 12px #0000000d;
  transform-origin:calc(100% - 50px) top;
}
.bar > .node-menu:not([hidden]) { animation:node-menu-in var(--motion-base) var(--ease-out) both; }
.bar > .node-menu.is-closing { pointer-events:none; animation:node-menu-out var(--motion-fast) var(--ease-out) both; }
.node-menu .node { position:relative; min-height:60px; padding:10px 36px 10px 12px; border-radius:11px; transition:transform var(--motion-fast) var(--ease-out); }
.node-menu .node[aria-current="true"]::after { content:""; position:absolute; right:16px; top:24px; width:9px; height:5px; border-left:1.8px solid var(--color-accent); border-bottom:1.8px solid var(--color-accent); transform:rotate(-45deg); }
.node-menu .node:active { transform:scale(.98); }
.node-menu > .row { margin-top:8px; padding-top:8px; border-top:1px solid var(--color-line); }
.node-menu > .row > .btn { width:100%; min-height:44px; border-color:transparent; background:var(--color-paper-3); }
.node-switch.is-switching .name { animation:node-choice-in var(--motion-base) var(--ease-out); }
#conv-list > li.is-arriving { animation:conversation-in var(--motion-fast) var(--ease-out) both; }
#conv-list > li.is-arriving:nth-child(2) { animation-delay:30ms; }
#conv-list > li.is-arriving:nth-child(3) { animation-delay:60ms; }
#conv-list > li.is-arriving:nth-child(4) { animation-delay:90ms; }
#conv-list .conv { transition:transform var(--motion-fast) var(--ease-out); }
#conv-list .conv:active { transform:scale(.98); }
@media (hover:hover) {
  #conv-list .conv:hover:not(:active) { transform:translateX(2px); }
  .node-menu .node:hover { background:var(--color-accent-soft); }
}
@keyframes node-menu-in { from { opacity:0; transform:translateY(-8px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes node-menu-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-5px) scale(.98); } }
@keyframes node-choice-in { from { opacity:.25; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes conversation-in { from { opacity:.35; transform:translateY(7px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  :root:not([data-motion=full]) :is(.bar > .node-menu, .node-switch .name, #conv-list > li.is-arriving, #conv-list .conv, .node-menu .node) { animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
  :root:not([data-motion=full]) :is(#conv-list .conv:hover:not(:active), #conv-list .conv:active, .node-menu .node:active) { transform:none; }
}

/* Full motion: finite transitions and reveals, all controlled by one switch. */
.motion-settings .motion-setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; }
.motion-setting-label { font-size:15px; font-weight:600; margin:0; }
.motion-setting-row .hint { margin:4px 0 0; font-size:12px; }
.motion-settings > .hint { margin:12px 0 0; font-size:12px; }
.motion-toggle { display:grid; place-items:center; flex:none; width:60px; height:48px; padding:0; border:0; background:transparent; color:var(--color-accent); cursor:pointer; touch-action:manipulation; }
.motion-toggle:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; border-radius:12px; }
.switch-track { position:relative; display:block; width:52px; height:30px; background:var(--color-paper-3); border:1px solid var(--color-control); border-radius:18px; transition:background-color var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out); }
.switch-thumb { position:absolute; inset:3px auto auto 3px; width:22px; height:22px; border-radius:50%; background:var(--color-ink-2); transition:transform var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out); }
.motion-toggle[aria-checked=true] .switch-track { background:var(--color-action); border-color:var(--color-action); }
.motion-toggle[aria-checked=true] .switch-thumb { background:var(--color-action-ink); transform:translateX(22px); }
:root[data-motion=full] .motion-enter { animation:surface-arrive var(--motion-medium) var(--ease-out) both; }
:root[data-motion=full] #view > section.motion-enter:nth-of-type(2) { animation-delay:30ms; }
:root[data-motion=full] #view > section.motion-enter:nth-of-type(3) { animation-delay:60ms; }
:root[data-motion=full] #view > section.motion-enter:nth-of-type(n+4) { animation-delay:90ms; }
:root[data-motion=full] .motion-item { animation:item-arrive var(--motion-base) var(--ease-out) both; }
:root[data-motion=full] #thread .motion-item:nth-last-child(2) { animation-delay:30ms; }
:root[data-motion=full] #thread .motion-item:last-child { animation-delay:60ms; }
:root[data-motion=full] .motion-reorder-up { animation:queue-up var(--motion-base) var(--ease-out); }
:root[data-motion=full] .motion-reorder-down { animation:queue-down var(--motion-base) var(--ease-out); }
:root[data-motion=full] .motion-feedback { animation:feedback-in var(--motion-base) var(--ease-out); }
:root[data-motion=full] .motion-status::before { animation:status-in var(--motion-base) var(--ease-out); }
:root[data-motion=full] #conv-list > li.is-arriving { animation-duration:var(--motion-base); }
:root[data-motion=full] .composer { animation-duration:var(--motion-base); }
.tabs { isolation:isolate; }
.tabs::after { content:""; position:absolute; z-index:0; top:5px; left:5px; bottom:5px; width:calc((100% - 18px) / 3); border-radius:30px; background:var(--glass-active); box-shadow:inset 0 1px 0 var(--glass-edge); pointer-events:none; transition:transform var(--motion-medium) var(--ease-out),background-color var(--motion-base) var(--ease-out); }
.tabs[data-active-tab=new]::after { transform:translateX(calc(100% + 4px)); }
.tabs[data-active-tab=tools]::after { transform:translateX(calc(200% + 8px)); }
.tabs a { z-index:1; transition:transform var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out); }
.tabs a[aria-current=page] { background:transparent; box-shadow:none; }
:root[data-motion=full] .tabs a[aria-current=page] > .ui-icon { animation:tab-icon-in var(--motion-base) var(--ease-out); }
.theme-switch .ui-icon { transition:transform var(--motion-medium) var(--ease-out); }
:root[data-theme=claude] .theme-switch .ui-icon { transform:rotate(180deg); }
.bar,.tabs,.composer,.new-prompt,.card,.bubble.user,.local-dialog { transition:background-color var(--motion-base) var(--ease-out),border-color var(--motion-fast) var(--ease-out); }
input,textarea,select { transition:border-color var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out); }
.composer:focus-within,.new-prompt:focus-within { border-color:var(--color-focus); }
.btn,.node-switch,.directory-item,.motion-toggle { transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out); }
.directory-item:active,.motion-toggle:active { transform:scale(.98); }
:root[data-motion=full] .btn[data-state=loading]::after { animation:feedback-in var(--motion-fast) var(--ease-out); }
:root[data-motion=full] .btn[data-state=success]::after { animation:feedback-in var(--motion-base) var(--ease-out); }
:root[data-motion=full] .btn[data-state=error]::after { animation:feedback-in var(--motion-base) var(--ease-out); }
:root[data-motion=full] .form-error:not(:empty) { animation:item-arrive var(--motion-fast) var(--ease-out); }
:root[data-motion=full] .model-picker select { animation:item-arrive var(--motion-base) var(--ease-out); }
:root[data-motion=full] .found { animation:item-arrive var(--motion-base) var(--ease-out); }
:root[data-motion=full] .directory-item { animation:item-arrive var(--motion-base) var(--ease-out); }
:root[data-motion=full] .local-dialog[open] { animation-duration:var(--motion-medium); }
:root[data-motion=full] .local-dialog[data-closing] { animation-duration:var(--motion-fast); }
.local-dialog::backdrop { animation:motion-backdrop var(--motion-fast) var(--ease-out); }
.local-dialog[data-closing]::backdrop { animation:motion-backdrop-out var(--motion-fast) var(--ease-out) forwards; }
.toast.motion-toast-in:not([hidden]) { animation:toast-in var(--motion-medium) var(--ease-out); }
.toast.is-leaving:not([hidden]) { pointer-events:none; animation:toast-out var(--motion-fast) var(--ease-out) forwards; }
@keyframes surface-arrive { from { opacity:.35; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes item-arrive { from { opacity:.3; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes queue-up { from { opacity:.5; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes queue-down { from { opacity:.5; transform:translateY(-14px); } to { opacity:1; transform:none; } }
@keyframes feedback-in { from { opacity:.4; transform:scale(.92); } to { opacity:1; transform:none; } }
@keyframes status-in { from { opacity:.3; transform:scale(.6); } to { opacity:1; transform:none; } }
@keyframes tab-icon-in { from { transform:translateY(3px) scale(.9); } to { transform:none; } }
@keyframes toast-out { to { opacity:0; transform:translateY(6px); } }
@keyframes motion-backdrop { from { opacity:0; } to { opacity:1; } }
@keyframes motion-backdrop-out { to { opacity:0; } }
/* The user's choice takes precedence over the system default. */
:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after,:root[data-motion=reduce] *::backdrop { animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; }
:root[data-motion=reduce] :is(.btn,.node-switch,.node,.conv,.directory-item,.motion-toggle):hover,:root[data-motion=reduce] :is(.btn,.node-switch,.node,.conv,.directory-item,.motion-toggle):active,:root[data-motion=reduce] .tabs a:active { transform:none !important; }
@media (prefers-reduced-motion:reduce) {
  :root:not([data-motion=full]) *,:root:not([data-motion=full]) *::before,:root:not([data-motion=full]) *::after,:root:not([data-motion=full]) *::backdrop { animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; }
}

/* Reserve the document scrollbar so long tools pages keep the same center. */
html { scrollbar-gutter:stable; }
.workspace-trigger { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:12px 14px; border:1px solid var(--color-control); border-radius:12px; background:var(--color-paper-2); color:var(--color-ink); font:inherit; font-size:15px; text-align:left; cursor:pointer; touch-action:manipulation; transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out); }
.workspace-value { flex:1; min-width:0; overflow-wrap:anywhere; }
.workspace-trigger > .icon-folder { color:var(--color-ink-2); }
.workspace-trigger > .icon-chevron { transform:rotate(90deg); transition:transform var(--motion-fast) var(--ease-out); }
.workspace-trigger[aria-expanded=true] { border-color:var(--color-focus); }
.workspace-trigger[aria-expanded=true] > .icon-chevron { transform:rotate(-90deg); }
.workspace-trigger:focus-visible,.workspace-option:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.workspace-trigger:active { transform:scale(.99); }
.workspace-dialog { padding:18px; width:min(370px,calc(100% - 32px)); overflow:hidden; }
.workspace-dialog[open] { display:flex; flex-direction:column; }
.workspace-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex:none; padding:0 0 12px 4px; }
.workspace-dialog-head h2 { font-size:18px; }
.workspace-dialog-head .hint { margin:4px 0 0; font-size:12px; }
.workspace-dialog-head .btn { border:0; background:transparent; }
.workspace-choices { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px; scrollbar-width:thin; }
.workspace-option { display:flex; align-items:center; gap:10px; width:100%; min-height:64px; padding:11px 10px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--color-ink); font:inherit; text-align:left; cursor:pointer; touch-action:manipulation; transition:background-color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out); }
.workspace-option + .workspace-option { margin-top:4px; }
.workspace-option[aria-selected=true] { background:var(--color-accent-soft); border-color:var(--color-line); }
.workspace-option-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.workspace-option-name { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.workspace-option-path { font-family:var(--font-mono); font-size:11px; color:var(--color-ink-2); line-height:1.5; overflow-wrap:anywhere; }
.workspace-check { flex:none; width:14px; height:14px; }
.workspace-option[aria-selected=true] .workspace-check::after { content:""; display:block; width:9px; height:5px; margin-top:2px; border-left:1.8px solid var(--color-accent); border-bottom:1.8px solid var(--color-accent); transform:rotate(-45deg); }
.workspace-browse { flex:none; width:100%; margin-top:12px; background:var(--color-paper-3); border-color:transparent; }
.workspace-load-state { margin:8px 4px !important; font-size:12px !important; }
@media (hover:hover) { .workspace-trigger:hover,.workspace-option:hover { background:var(--color-paper-3); } }
/* The highlight travels; icon and label geometry stay fixed. */
.tabs a,.tabs a[aria-current=page] { font-weight:600; }
.tabs a { transition:color var(--motion-fast) var(--ease-out),opacity var(--motion-fast) var(--ease-out); }
.tabs a:active { transform:none; opacity:.7; }
:root[data-motion=full] .tabs a[aria-current=page] > .ui-icon { animation:tab-icon-fade var(--motion-fast) var(--ease-out); }
@keyframes tab-icon-fade { from { opacity:.55; } to { opacity:1; } }
:root[data-motion=reduce] .workspace-trigger:active { transform:none; }