:root {
  color-scheme: light;
  --icon-delete: #9c0c23;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --link: #2f6fc4;
  --bg: #fafaf9;
  --rail-bg: #f3f3f1;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-3: #e8e8e5;

  --ink: #000000;
  --ink-strong: #000000;
  --ink-muted: #4d4d4d;
  --ink-faint: #696966;

  --line: #e7e7e4;
  --line-strong: #d5d5d1;
  --line-fill: #e0e0dc;

  --accent: #2563eb;
  --chat-writing: #eab308;
  --accent-ink: #1d4ed8;
  --accent-soft: #eaf1fd;
  --on-accent: #ffffff;

  --danger: #9c0c23;
  --danger-strong: #8a0c1e;
  --danger-strong-hover: #6d0817;
  --danger-soft: #fbeaec;
  --meter-near: #a06a10;
  --meter-low: #16a34a;
  --meter-mid: #ea580c;
  --meter-high: #dc2626;
  --positive: #1f5c46;
  --positive-soft: #e7f0ec;

  --md-bold: #1a63c4;

  --bubble-mine: #000000;
  --bubble-mine-ink: #ffffff;
  --bubble-reply: #eeeeeb;
  --bubble-reply-ink: #000000;
  --bubble-reply-inset: #ffffff;

  --brand: #6d28a8;

  --nav-ink: #000000;
  --nav-memory: #2563eb;
  --nav-usage: #7c3aed;
  --nav-artifacts: #2563eb;
  --nav-documents: #0f766e;
  --nav-ecosystem: #c2410c;
  --nav-health: #1d4ed8;
  --nav-profile: #b8860b;
  --nav-more: var(--nav-ink);
  --tone-violet: #7c3aed;

  --avatar-face: #2a2c30;
  --avatar-ink: #ffffff;
  --avatar-edge: transparent;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 32px -20px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 24px 56px -28px rgba(0, 0, 0, 0.32);

  --menu-r: 14px;
  --menu-item-r: 9px;
  --menu-pad: 0.3125rem;
  --menu-row-pad: 0.4375rem var(--s-3);
  --menu-gap: 1px;
  --menu-shadow:
    0 0 0 1px var(--line),
    0 4px 10px -6px rgba(0, 0, 0, 0.16),
    0 20px 44px -22px rgba(0, 0, 0, 0.3);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --icon-delete: #b3142b;
  --link: #9cc4f5;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --bg: #000000;
  --rail-bg: #0c0c0c;
  --surface: #262626;
  --surface-2: #1f1f1f;
  --surface-3: #333333;

  --ink: #ffffff;
  --ink-strong: #ffffff;
  --ink-muted: #b9b9b9;
  --ink-faint: #8f8f8f;

  --line: #2e2e2e;
  --line-strong: #424242;
  --line-fill: #333333;

  --accent: #60a5fa;
  --chat-writing: #facc15;
  --accent-ink: #93c5fd;
  --accent-soft: #15202f;
  --on-accent: #0b1220;

  --danger: #ff6076;
  --danger-strong: #8f1c2f;
  --danger-strong-hover: #a52338;
  --danger-soft: #2a1216;
  --meter-near: #e0a63c;
  --meter-low: #22c55e;
  --meter-mid: #f97316;
  --meter-high: #ef4444;
  --positive: #6fbf9c;
  --positive-soft: #121f1a;

  --bubble-mine: #ffffff;
  --bubble-mine-ink: #0d0d0d;
  --bubble-reply: #262626;
  --bubble-reply-ink: #ffffff;
  --bubble-reply-inset: #333333;

  --md-bold: #6cb2ff;

  --brand: #b98cf5;

  --nav-ink: #ffffff;
  --nav-memory: #60a5fa;
  --nav-usage: #a78bfa;
  --nav-artifacts: #60a5fa;
  --nav-documents: #2dd4bf;
  --nav-ecosystem: #fb923c;
  --nav-health: #93c5fd;
  --nav-profile: #fbbf24;
  --nav-more: var(--nav-ink);
  --tone-violet: #a78bfa;

  --avatar-face: #ffffff;
  --avatar-ink: #17181a;
  --avatar-edge: rgba(255, 255, 255, 0.24);

  --shadow-sm: none;
  --shadow-md: 0 0 0 1px var(--line);
  --shadow-lg: 0 24px 56px -28px #000000, 0 0 0 1px var(--line);

  --menu-shadow:
    0 0 0 1px var(--line),
    0 4px 12px -6px #000000,
    0 24px 48px -24px #000000;
}

:root[data-theme='dark'] .btn-danger,
:root[data-theme='dark'] .notice[data-tone='error'],
:root[data-theme='dark'] .notice[data-tone='positive'],
:root[data-theme='dark'] .auth-switch button,
:root[data-theme='dark'] .danger-zone .card-title .icon,
:root[data-theme='dark'] .recover .eyebrow,
:root[data-theme='dark'] .recover-days,
:root[data-theme='dark'] .row-action:hover {
  color: #ffffff;
}

:root[data-theme='light'] .btn-danger,
:root[data-theme='light'] .notice[data-tone='error'],
:root[data-theme='light'] .notice[data-tone='positive'],
:root[data-theme='light'] .auth-switch button,
:root[data-theme='light'] .danger-zone .card-title .icon,
:root[data-theme='light'] .recover .eyebrow,
:root[data-theme='light'] .recover-days,
:root[data-theme='light'] .row-action:hover {
  color: #000000;
}

@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/fonts/GeneralSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
  src: url('/fonts/GeneralSans-VariableItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --font-sans: 'General Sans', 'Inter', sans-serif;
  --font-mono: 'General Sans', 'Inter', sans-serif;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.625rem;
  --s-4: 0.875rem;
  --s-5: 1rem;
  --s-6: 1.25rem;
  --s-7: 1.4375rem;
  --s-8: 1.625rem;
  --s-9: 1.8125rem;
  --s-10: 2rem;
  --s-12: 2.5rem;
  --s-16: 3.25rem;

  --measure: 62rem;
  --measure-prose: 66ch;
  --gutter: clamp(1rem, 3.2vw, 2rem);
  --gap: clamp(1rem, 1.8vw, 1.5rem);
  --section-gap: clamp(3rem, 5vw, 4.5rem);
  --pane-gap: clamp(3.25rem, 5.5vw, 5rem);
  --measure-app: 46rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-card: 16px;
  --r-pill: 999px;

  --rail-w: 16.25rem;
  --chat-measure: 48rem;
  --r-chat: 20px;
  --r-composer: 26px;

  --app-measure: 48rem;
  --app-gutter: clamp(1rem, 3.2vw, 2rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 300ms;
  --dur-fast: 150ms;

  --header-h: 52px;
}

body:is([data-page='assistant'], [data-page='documents'], [data-page='artifacts'],
  [data-page='ecosystem'], [data-page='search'], [data-page='settings']) {
  font-feature-settings: 'cv11';
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);

  scrollbar-gutter: stable;

  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 610;
  letter-spacing: -0.011em;
  line-height: 1.3;
  color: var(--ink-strong);
}

p { margin: 0; }

[hidden] { display: none !important; }

img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

[data-quiet-focus]:focus-visible { outline: none; }

::selection { background: #b3d7ff; color: #0d0d0d; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  padding-bottom: var(--s-16);
  animation: page-in 200ms var(--ease-out) both;
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

:root[data-view-transitions='on'] .page { animation: none; }

@view-transition { navigation: auto; }

.nav-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav-progress.is-running { opacity: 1; }

.nav-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--ink);
}
.nav-progress.is-running .nav-progress-fill {
  animation: nav-progress 900ms var(--ease-out) forwards;
}

@keyframes nav-progress {
  from { width: 0; }
  to { width: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-progress { transition: none; }
  .nav-progress.is-running .nav-progress-fill { animation: none; width: 100%; }
}

:root[data-navigating] .page {
  animation: none;
  opacity: 0.62;
  transition: opacity 180ms var(--ease);
}

::view-transition-old(root) { animation: 90ms var(--ease) both vt-fade-out; }
::view-transition-new(root) { animation: 220ms var(--ease-out) both vt-fade-in; }

@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

:root[data-shell='pending'][data-rail='open'] body::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  background: var(--rail-bg);
  pointer-events: none;
  z-index: 0;
}
:root[data-shell='pending'][data-rail='open'] #main { margin-left: var(--rail-w); }

:root[data-shell='pending'][data-rail='closed'] body::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-mini-w);
  background: var(--rail-bg);
  pointer-events: none;
  z-index: 0;
}
:root[data-shell='pending'][data-rail='closed'] #main { margin-left: var(--rail-mini-w); }

@media (max-width: 940px) {
  :root[data-shell='pending'] body::before { display: none; }
  :root[data-shell='pending'] #main { margin-left: 0; }
}

:root[data-shell='app'] body::before { display: none; }
:root[data-shell='app'] #main { margin-left: 0; }

.page-head {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 0;
}
.page-head .eyebrow { margin-bottom: var(--s-3); }
.page-head .lede { margin-top: var(--s-4); }
.page-head .btn-row { margin-top: var(--s-8); }

.page-head-compact {
  padding-top: var(--s-10);
  padding-bottom: var(--s-6);
}
.page-head-compact .page-title { font-size: 1.5rem; }
.page-head-compact .lede { margin-top: var(--s-3); max-width: 58ch; font-size: 0.9375rem; }

.section { margin-top: var(--section-gap); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: 0;
  margin-bottom: var(--s-6);
}
.section-head > div { min-width: 0; }
.section-head p { margin-top: var(--s-2); }
.section-meta { color: var(--ink-muted); font-size: 0.875rem; }

.grid { display: grid; gap: var(--gap); align-items: start; }

.btn-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.prose { max-width: var(--measure-prose); }

.page-title {
  font-size: 1.75rem;
  font-weight: 610;
  line-height: 1.25;
  letter-spacing: -0.022em;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 610;
  line-height: 1.35;
  letter-spacing: -0.014em;
}

.lede {
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: 60ch;
  line-height: 1.55;
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: 0.875rem; line-height: 1.5; }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  flex: none;
  line-height: 1;
  color: var(--ink);
}

.icon-svg { display: block; flex: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-header[data-scrolled='true'] { border-bottom-color: var(--line); }

.header-inner {
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--s-4);
  height: calc(var(--header-h) - 1px);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.25rem 0.375rem;
  margin-left: -0.375rem;
  border-radius: var(--r-md);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.brand:hover { background: var(--surface-3); }

.brand-logo {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  display: inline-block;
  transform: translateY(0.055em);
}
:root[data-theme='dark'] .brand,
:root[data-theme='dark'] .brand-name { color: #ffffff; }
:root[data-theme='light'] .brand,
:root[data-theme='light'] .brand-name { color: #000000; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.header-actions:empty { display: none; }

.site-header-slim .header-inner { justify-content: space-between; gap: var(--s-4); }

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--s-12);
  padding-block: var(--s-6);
}
.footer-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  align-items: center;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 0.8125rem;
}
.footer-links { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.footer-links a { transition: color var(--dur-fast) var(--ease); }
.footer-links a:hover { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.375rem;
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 570;
  letter-spacing: normal;
  line-height: 1;
  cursor: pointer;
  background: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn .icon { color: inherit; font-size: 0.9em; }
.btn .icon-mx { width: 1.3em; height: 1.3em; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: #ffffff; }
.btn-primary:hover:not(:disabled) { background: #333333; }
:root[data-theme='dark'] .btn-primary { background: #ffffff; color: #0d0d0d; }
:root[data-theme='dark'] .btn-primary:hover:not(:disabled) { background: #d7d7d7; }

.btn-ghost { border-color: transparent; color: var(--ink); background: var(--surface-3); }
.btn-ghost:hover:not(:disabled) { background: var(--line-strong); }

.btn-quiet { color: var(--ink); }
.btn-quiet:hover:not(:disabled) { color: var(--ink); background: var(--surface-3); }

.btn-danger { color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }

.btn-danger-solid { background: var(--danger-strong); color: #ffffff; }
.btn-danger-solid:hover:not(:disabled) { background: var(--danger-strong-hover); }

.hold-confirm {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}
.hold-confirm::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.26);
  clip-path: inset(0 calc((1 - var(--hold, 0)) * 100%) 0 0);
  pointer-events: none;
}

.btn-sm { height: 2rem; padding-inline: 0.75rem; font-size: 0.8125rem; }

.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-6);
}
.card > * + * { margin-top: var(--s-5); }

.card-title {
  font-size: 1rem;
  font-weight: 610;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-title + p { margin-top: var(--s-2); }

.panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.panel-row {
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line-fill);
}
.panel-row:first-child { border-top: none; }
.kv dt {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.kv dd {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .kv dt { margin-top: var(--s-4); }
  .kv dt:first-child { margin-top: 0; }
}

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.5rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 570;
  line-height: 1;
  color: var(--ink-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.badge .icon { font-size: 0.85em; color: var(--ink); }

.trust {
  padding: var(--s-6);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.trust > div { min-width: 0; }
.trust h3 { font-size: 1rem; font-weight: 610; }
.trust p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-top: var(--s-2);
  max-width: 60ch;
}
.trust .tags { margin-top: var(--s-5); }

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field + .field { margin-top: var(--s-5); }

.field label {
  font-size: 0.9375rem;
  font-weight: 570;
  color: var(--ink);
  line-height: 1.4;
}
.field-hint { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.4; }

.input, .textarea, .select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0 0.9375rem;
  height: 2.75rem;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea { height: auto; min-height: 6.5rem; padding: 0.8125rem 0.9375rem; resize: vertical; line-height: 1.45; }
.select {
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  accent-color: var(--ink);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ink-muted);
  box-shadow: none;
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--surface-3);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
  padding-top: 0;
}
.form-actions-bare { border-top: none; padding-top: 0; margin-top: var(--s-4); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.consent:hover { border-color: var(--ink-faint); }
.consent:focus-within { border-color: var(--accent); }
.consent input[type='checkbox'] {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-copy {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  min-width: 0;
}
.consent-copy a { text-decoration: underline; text-underline-offset: 2px; color: var(--accent-ink); }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: var(--s-4);
}
.notice .icon { margin-top: 0.2rem; color: var(--ink); }
.notice[data-tone] .icon { color: inherit; }
.notice[data-tone='error'] { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
.notice[data-tone='positive'] { border-color: transparent; background: var(--positive-soft); color: var(--positive); }

.record {
  padding-block: var(--s-6);
  border-top: 1px solid var(--line-fill);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: start;
  animation: page-in 320ms var(--ease-out) both;
}
.record:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 680px) {
  .record { grid-template-columns: minmax(0, 1fr); }
}

.progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: var(--s-3); }
.progress i {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--ink-faint);
  border-radius: 2px;
  animation: slide 1.4s var(--ease) infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--r-sm);
  height: 0.8rem;
}
.skeleton + .skeleton { margin-top: var(--s-3); }
.skeleton-w40 { width: 40%; }
.skeleton-w55 { width: 55%; }
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

body[data-page='assistant'] .site-header,
body[data-page='assistant'] .site-footer { display: none; }
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.assistant-layout,
.app-layout {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.assistant-layout,
.app-layout {
  transition: grid-template-columns var(--rail-move, 260ms) var(--ease-out);
}
.assistant-layout > .rail,
.app-layout > .rail {
  transition:
    opacity 180ms var(--ease-out) 100ms,
    transform 220ms var(--ease-out) 60ms;
}
.assistant-layout[data-rail='closed'],
.app-layout[data-rail='closed'] { grid-template-columns: var(--rail-mini-w) minmax(0, 1fr); }
.assistant-layout[data-rail='closed'] .rail,
.app-layout[data-rail='closed'] .rail {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-0.75rem);
  transition:
    opacity 120ms var(--ease) 0s,
    transform 200ms var(--ease-out) 0s;
  padding-inline: 0;
  border-right-color: transparent;
}
.assistant-layout[data-rail='closed'] .rail-mini,
.app-layout[data-rail='closed'] .rail-mini { animation: rail-mini-in 220ms var(--ease-out) 90ms both; }
@keyframes rail-mini-in {
  from { opacity: 0; transform: translateX(-0.375rem); }
  to { opacity: 1; transform: none; }
}
.assistant-layout:not([data-rail-ready]),
.app-layout:not([data-rail-ready]),
.assistant-layout:not([data-rail-ready]) .rail,
.app-layout:not([data-rail-ready]) .rail { transition: none; }
.assistant-layout:not([data-rail-ready]) .rail-mini,
.app-layout:not([data-rail-ready]) .rail-mini { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .assistant-layout,
  .app-layout,
  .assistant-layout .rail,
  .app-layout .rail { transition: none; }
  .assistant-layout[data-rail='closed'] .rail,
  .app-layout[data-rail='closed'] .rail { transform: none; }
  .assistant-layout[data-rail='closed'] .rail-mini,
  .app-layout[data-rail='closed'] .rail-mini { animation: none; }
}

.assistant-layout > .rail,
.app-layout > .rail,
.assistant-layout > .rail-mini,
.app-layout > .rail-mini { grid-column: 1; grid-row: 1; }

@media (min-width: 941px) {
  :root { --rail-w: var(--rail-w-user, 16.25rem); }
}

:root { --rail-mini-w: 3.5rem; }

.rail-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-w);
  z-index: 22;
  width: 10px;
  transform: translateX(-5px);
  cursor: col-resize;
  touch-action: none;
  background: none;
  border: none;
  padding: 0;
}
.rail-grip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.rail-grip:hover::after,
.rail-grip:focus-visible::after { opacity: 1; }
.rail-grip:focus-visible { outline: none; }
.assistant-layout[data-resizing] .rail-grip::after,
.app-layout[data-resizing] .rail-grip::after { opacity: 1; }
.assistant-layout[data-resizing],
.app-layout[data-resizing] {
  user-select: none;
  cursor: col-resize;
}

.assistant-layout[data-rail='closed'] .rail-grip,
.app-layout[data-rail='closed'] .rail-grip { display: none; }

.rail {
  --rail-row-h: 2.5rem;
  --rail-row-pad: 0.625rem;
  --rail-row-gap: 0.625rem;
  --rail-glyph: 1.125rem;

  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: var(--s-3) var(--s-3) var(--s-3);
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  transition: opacity var(--dur-fast) var(--ease);
}

.rail-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-1);
  height: 3.25rem;
  padding-left: 0.625rem;
  margin-bottom: var(--s-1);
}
.rail-head > #rail-palette { margin-left: auto; }
.rail-brand .brand-name {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.rail-brand { gap: 0.4375rem; }

.rail-brand,
.rail-brand:hover,
.rail-brand:focus,
.rail-brand:focus-visible,
.rail-brand:active { background: none; }

.rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail-icon:hover { opacity: 1; background: var(--surface-3); }
.rail-icon .icon { color: inherit; }

#rail-palette,
#rail-close {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9375rem;
  color: var(--ink);
  opacity: 1;
}
#rail-palette .icon-mx,
#rail-close .icon-mx { width: 1.125rem; height: 1.125rem; min-width: 0; color: inherit; }

.rail-mini {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-height: 0;
  padding: var(--s-3) 0;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
}
.assistant-layout[data-rail='closed'] .rail-mini,
.app-layout[data-rail='closed'] .rail-mini { display: flex; }

.rail-mini-top,
.rail-mini-record {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  flex: none;
}
.rail-mini-top {
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  width: 1.75rem;
}
.rail-mini-record {
  margin-top: auto;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  width: 1.75rem;
}
.rail-mini-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding-top: var(--s-3);
}

.rail-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.rail-mini-icon:hover,
.rail-mini-icon:focus-visible { opacity: 1; background: var(--surface-3); }
.rail-mini-icon[aria-current='page'] {
  opacity: 1;
  color: var(--ink-strong);
  background: var(--surface-3);
}
.rail-mini-icon .icon { color: inherit; }

#rail-close .icon,
#rail-toggle .icon,
#rail-mini-toggle .icon,
#new-conversation .icon,
#new-conversation-top .icon,
#rail-mini-new .icon {
  color: var(--nav-ink);
  opacity: 1;
}
#rail-mini-toggle,
#rail-mini-new { opacity: 1; }
.rail-mini-icon .icon-mx { width: 1.125rem; height: 1.125rem; }

.rail-mini-icon[data-key] {
  opacity: 1;
  color: var(--nav-ink);
}
.rail-mini-icon:active .rail-mark { transform: scale(0.88); }
.rail-mini-icon .rail-mark { transition: transform 120ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .rail-mini-icon:active .rail-mark { transform: none; }
}

.rail-mini-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.rail-mini-account:hover .rail-avatar,
.rail-mini-account[aria-expanded='true'] .rail-avatar {
  box-shadow: 0 0 0 2px var(--surface-3);
}
.account-menu.account-menu-loose {
  position: fixed;
  left: var(--menu-x, 0);
  bottom: var(--menu-y, 0);
  right: auto;
  top: auto;
  width: 16.25rem;
  min-width: 0;
  z-index: 60;
  max-width: calc(100vw - var(--s-4, 0.75rem) * 2);
}

.rail-new {
  display: flex;
  align-items: center;
  gap: var(--rail-row-gap);
  width: 100%;
  height: var(--rail-row-h);
  padding-inline: var(--rail-row-pad);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--nav-ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.rail-new:hover { background: var(--surface-3); }
.rail-new .icon { color: var(--nav-ink); }
.rail-new .icon-mx { width: var(--rail-glyph); height: var(--rail-glyph); }
.chat-bar-new .icon-mx { width: 1.0625rem; height: 1.0625rem; }

.conversation-list {
  flex: 1 1 auto;
  min-height: min(13rem, 34vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-inline: calc(var(--s-1) * -1);
  padding-inline: var(--s-1);
  padding-bottom: var(--s-2);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.conversation-list:hover,
.conversation-list.is-scrolling { scrollbar-color: var(--line-strong) transparent; }
.conversation-list::-webkit-scrollbar { width: 8px; }
.conversation-list::-webkit-scrollbar-track { background: transparent; }
.conversation-list::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background-clip: content-box;
}
.conversation-list:hover::-webkit-scrollbar-thumb,
.conversation-list.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  background-clip: content-box;
}

.rail-group,
.rail-empty,
.conversation-item { flex: none; }

.rail-group {
  padding: var(--s-4) 0.625rem var(--s-2);
  font-size: 0.75rem;
  font-weight: 570;
  color: var(--ink-faint);
  opacity: 0.5;
  white-space: nowrap;
}
.rail-group:first-child { padding-top: var(--s-2); }

.rail-empty {
  padding: var(--s-5) 0.625rem;
  color: var(--ink-faint);
  opacity: 0.6;
  line-height: 1.5;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--rail-row-h);
  padding-inline: var(--rail-row-pad);
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  opacity: 1;
  font-size: 0.9375rem;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.conversation-item > .truncate { min-width: 0; flex: 1; }
.chat-mark-writing {
  width: 0.75rem;
  height: 0.75rem;
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-top-color: var(--ink-muted);
  animation: chat-mark-spin 0.8s linear infinite;
}
.chat-mark-unread { background: #3b82f6; }
@keyframes chat-mark-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .chat-mark-writing { animation-duration: 2.4s; }
}
.conversation-item:hover { background: var(--surface-3); }
.conversation-item[aria-current='true'] {
  background: var(--surface-3);
  font-weight: 570;
}

.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  flex: none;
  opacity: 0;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--icon-delete);
  font-size: 0.875rem;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.row-action .icon-mx { width: 1.125rem; height: 1.125rem; min-width: 0; }

.row-action .icon { color: inherit; }

.chat-delete,
:root[data-theme='light'] .chat-delete:hover,
:root[data-theme='dark'] .chat-delete:hover { color: var(--danger); }

.rail-record {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
}
.rail-record::before {
  content: '';
  position: absolute;
  left: calc(var(--s-3) * -1);
  right: calc(var(--s-3) * -1);
  bottom: 0;
  border-top: 1px solid var(--line-fill);
}

.tab-slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--r-md);
  background: var(--surface-3);
  transition:
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
    width 280ms cubic-bezier(0.32, 0.72, 0, 1),
    height 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.tab-slide.is-still { transition: none; }

.has-slide { position: relative; }
.has-slide > *:not(.tab-slide) { position: relative; z-index: 1; }

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

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rail-nav-link {
  display: flex;
  align-items: center;
  gap: var(--rail-row-gap);
  height: var(--rail-row-h);
  padding-inline: var(--rail-row-pad);
  border-radius: var(--r-md);
  color: var(--ink);
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.rail-nav-link span {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 1;
}
.rail-nav-link:hover { background: var(--surface-3); }
.rail-nav-link .icon-svg { width: var(--rail-glyph); height: var(--rail-glyph); flex: none; }

.icon-mx { width: 1em; height: 1em; }
.icon-mx.fa-spin { animation: icon-spin 0.9s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .icon-mx.fa-spin { animation-duration: 2.4s; }
}

.rail-nav-link .rail-mark,
.rail-mini-icon .rail-mark {
  width: var(--rail-glyph, 1.125rem);
  height: var(--rail-glyph, 1.125rem);
  min-width: 0;
  flex: none;
}

.rail-nav-link .rail-mark { transition: transform 120ms var(--ease); }
.rail-nav-link:active .rail-mark { transform: scale(0.88); }

@media (prefers-reduced-motion: reduce) {
  .rail-nav-link:active .rail-mark { transform: none; }
}

.rail-nav-link .icon,
.rail-nav-link .icon-svg,
.rail-nav-link .rail-mark { opacity: 1; color: var(--nav-ink); }
.rail-nav-link span { color: var(--nav-ink); }

.rail-nav-link[aria-current='page'] {
  background: var(--surface-3);
}
.rail-nav.has-slide .rail-nav-link[aria-current='page'] { background: none; }

@media (max-height: 620px) {
  .conversation-list { min-height: 0; }
  .rail { overflow-y: auto; overscroll-behavior: contain; }
}

.rail-account-wrap {
  position: relative;
  flex: none;
  min-width: 0;
}
.rail-account-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-top: var(--s-3);
  min-width: 0;
}
.rail-account-row::before {
  content: '';
  position: absolute;
  left: calc(var(--s-3) * -1);
  right: calc(var(--s-3) * -1);
  top: calc(var(--s-2) * -1);
  border-top: 1px solid var(--line-fill);
}

.rail-account {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--s-2) 0.5rem;
  border: 0;
  background: none;
  border-radius: var(--r-md);
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.rail-account:hover { background: var(--surface-3); }
.rail-account[aria-current='page'] { background: var(--surface-3); }
.rail-account > .icon { font-size: 0.8125rem; flex: none; }

[data-avatar] {
  --avatar-image: none;
  --avatar-edge: var(--line);
}
[data-avatar='saturn'] { --avatar-image: url('../img/avatars/saturn.jpg'); }
[data-avatar='disk'] { --avatar-image: url('../img/avatars/disk.jpg'); }
[data-avatar='rings'] { --avatar-image: url('../img/avatars/rings.jpg'); }
[data-avatar='airglow'] { --avatar-image: url('../img/avatars/airglow.jpg'); }
[data-avatar='veil-ink'] { --avatar-image: url('../img/avatars/veil-ink.jpg'); }
[data-avatar='nightside'] { --avatar-image: url('../img/avatars/nightside.jpg'); }

.rail-avatar {
  --avatar-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--avatar-image, none) center / cover no-repeat, var(--avatar-face);
  color: var(--avatar-ink);
  box-shadow: inset 0 0 0 1px var(--avatar-edge);
  font-size: 0.75rem;
  font-weight: 610;
  line-height: 1;
}

.rail-account-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.rail-account-line {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.rail-account-handle { color: var(--ink-muted); font-size: 0.75rem; }
.rail-account-handle[hidden] { display: none; }

.rail-account[aria-expanded='true'] { background: var(--surface-3); }
.account-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - var(--s-2));
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 0.3125rem;
  gap: 0.0625rem;
  background: var(--surface);
  border: 0;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(11, 23, 48, 0.06), 0 18px 44px -14px rgba(11, 23, 48, 0.22);
  transform-origin: bottom left;
  animation: menu-in 210ms var(--ease-out) both;
}
.account-menu::after { content: none; }
:root[data-theme='dark'] :is(#account-menu, #account-help-menu) {
  background: #000000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 44px -14px rgba(0, 0, 0, 0.6);
}
:root[data-theme='dark'] :is(#account-menu, #account-help-menu) .account-menu-item:hover,
:root[data-theme='dark'] :is(#account-menu, #account-help-menu) .account-menu-item:focus-visible,
:root[data-theme='dark'] :is(#account-menu, #account-help-menu) .account-menu-item[aria-current='page'],
:root[data-theme='dark'] #account-menu .account-menu-more[aria-expanded='true'] { background: #1a1a1a; }
.account-menu[hidden] { display: none; }
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border: 0;
  background: none;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.account-menu-item > span:not([class]),
.account-menu-item > span.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-item:hover,
.account-menu-item:focus-visible { background: var(--surface-3); }
.account-menu-item:focus-visible { outline: none; }
.account-menu-item:active { background: var(--surface-4, var(--surface-3)); }
.account-menu-item .icon {
  font-size: 0.875rem;
  color: var(--nav-ink);
  opacity: 1;
  flex: none;
  width: 1.125rem;
  text-align: center;
}
.account-menu-item .icon-mx { width: 1.125rem; height: 1.125rem; }
:is(.rail-icon, #rail-close, #rail-toggle, .rail-new, .rail-nav-link, .rail-mini-icon, .account-menu-item) .icon-mx [stroke] { stroke-width: 1.8; }
[data-key='memory'] .rail-mark { scale: 1.111; }
:is(#rail-close, .rail-nav-link, .rail-mini-icon)[data-key='memory'] .rail-mark [stroke] { stroke-width: 1.62; }
.account-menu-item[aria-current='page'] { background: var(--surface-3); }
.account-menu-item > span:not(.rail-avatar):not(.account-menu-forget) { min-width: 0; }

.account-menu-rule {
  height: 1px;
  margin: 0.25rem -0.3125rem;
  background: var(--line-fill);
}
.account-menu-item .icon-mx.account-menu-chevron {
  width: 0.875rem;
  height: 0.875rem;
  margin-left: auto;
  color: var(--ink);
}
.account-menu-more[aria-expanded='true'] { background: var(--surface-3); }
.account-menu.account-submenu {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 70;
  width: 15rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  transform-origin: left bottom;
  animation: submenu-in 160ms var(--ease-out) both;
}
@keyframes submenu-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .account-menu.account-submenu { animation: none; }
}
.account-menu-account { padding-block: 0.3125rem; }
.account-menu-avatar {
  --avatar-size: 1.375rem;
  font-size: 0.5625rem;
}
.account-menu-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}
.account-menu-name { font-weight: 610; font-size: 0.8125rem; }
.account-menu-email { font-size: 0.625rem; opacity: 0.55; }
.account-menu-account[aria-checked='true'] { cursor: default; }
.account-menu-out .icon { color: var(--nav-ink); opacity: 1; }

.rail-scrim { display: none; }

.chat {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chat-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 3.25rem;
  padding-inline: var(--s-3);
  border-bottom: 1px solid transparent;
  background: var(--bg);
}
.chat-bar-lead { display: flex; align-items: center; gap: var(--s-1); flex: none; }

.assistant-layout[data-rail='open'] .chat-bar-lead,
.app-layout[data-rail='open'] .chat-bar-lead { display: none; }
@media (min-width: 941px) {
  .assistant-layout[data-rail='closed'] .chat-bar-toggle,
  .app-layout[data-rail='closed'] .chat-bar-toggle,
  .assistant-layout[data-rail='closed'] .chat-bar-new,
  .app-layout[data-rail='closed'] .chat-bar-new { display: none; }
}

.chat-bar-title {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 570;
  color: var(--ink);
  opacity: 0.75;
}
.chat-bar-end { display: flex; align-items: center; gap: var(--s-1); flex: none; margin-left: auto; }
.chat-bar-project {
  flex: 0 1 auto;
  max-width: 40%;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 570;
  color: var(--ink-muted);
  text-decoration: none;
}
.chat-bar-project:not([hidden]) + .chat-bar-title::before { content: '/'; margin-right: var(--s-2); color: var(--ink-faint); }

.project-pick { display: flex; flex-direction: column; gap: 0.125rem; max-height: 50vh; overflow-y: auto; }
.project-pick-row {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}
.project-pick-row[aria-current='true']::after { content: '✓'; margin-left: auto; padding-left: var(--s-3); }
.project-pick-new { color: var(--ink-muted); }
.chat-more-toggle .icon-mx { width: 1.25rem; height: 1.25rem; }
.chat-more-menu {
  top: calc(100% + 0.25rem);
  bottom: auto;
  left: auto;
  right: 0;
  width: auto;
  min-width: 11rem;
  transform-origin: top right;
}
.chat-more-danger,
.chat-more-danger .icon { color: var(--danger); }

.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding: var(--s-10) var(--gap) var(--s-6);
}

.chat[data-empty='true'] { padding-bottom: 0; }
.chat[data-empty='true'] .chat-bar { border-bottom-color: transparent; }

.message,
.composer {
  width: min(var(--chat-measure), 100%);
  margin-inline: auto;
}

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

.message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: message-in 260ms var(--ease-out) both;
}

.message-stamp {
  width: min(var(--chat-measure), 100%);
  margin-inline: auto;
  margin-bottom: calc(var(--s-3) - var(--s-10));
  text-align: center;
  font-size: 0.75rem;
  font-weight: 570;
  color: var(--ink-faint);
  opacity: 0.7;
  animation: message-in 260ms var(--ease-out) both;
}

.message-role {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink-faint);
  opacity: 0.6;
  margin-bottom: var(--s-3);
}

.message-body { font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; min-width: 0; }

.reply-cut {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-fill);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.message-assistant .message-body {
  width: fit-content;
  max-width: 100%;
  background: var(--bubble-reply);
  color: var(--bubble-reply-ink);
  border-radius: var(--r-chat);
  padding: var(--s-3) var(--s-5);
  border-bottom-left-radius: var(--s-2);
}

.message-assistant .message-body,
.message-assistant .message-body .md-h,
.message-assistant .message-body .md-list,
.message-assistant .message-body em {
  color: var(--ink);
}
.message-assistant .message-body strong {
  color: var(--md-bold);
  font-weight: 610;
}
.message-assistant .message-body ol.md-list li::before { color: var(--ink-faint); }

.message-assistant .message-body code,
.message-assistant .message-body .md-pre,
.message-assistant .message-body .md-pre code { color: var(--ink); }
.message-assistant .message-body code,
.message-assistant .message-body .md-pre,
.message-assistant .message-body .code-block { background: var(--bubble-reply-inset); }
.message-assistant .message-body .code-block .md-pre { background: none; }

.message-body > * + * { margin-top: var(--s-5); }
.message-body .md-h {
  font-size: 1.0625rem;
  font-weight: 610;
  line-height: 1.35;
  margin-top: var(--s-8);
}
.message-body h4.md-h { font-size: 1.0625rem; }
.message-body h5.md-h,
.message-body h6.md-h {
  font-size: 0.875rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  margin-top: var(--s-6);
}
.message-body .md-h + * { margin-top: var(--s-3); }
.message-body > .md-h:first-child { margin-top: 0; }

.message-body .md-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-left: var(--s-6);
}
.message-body .md-list li { position: relative; }
.message-body ul.md-list { list-style: disc; }
.message-body ul.md-list li::marker { color: var(--ink-faint); }
.message-body ol.md-list {
  counter-reset: md-item;
  padding-left: max(var(--s-6), calc(var(--md-digits, 1) * 0.6em + 1em));
}
.message-body ol.md-list li { counter-increment: md-item; }
.message-body ol.md-list li::before {
  content: counter(md-item) '.';
  position: absolute;
  right: calc(100% + 0.4em);
  white-space: nowrap;
  text-align: right;
  color: var(--ink-faint);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

.message-body .md-quote {
  padding-left: var(--s-5);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-muted);
}
.message-body .md-rule { border: none; border-top: 1px solid var(--line); margin-block: var(--s-6); }

.message-body .md-list .md-list {
  margin-top: var(--s-2);
  gap: var(--s-1);
}
.message-body .md-list .md-list > li { color: var(--ink-muted); }
.message-body ul.md-list ul.md-list { list-style: circle; }

.message-body .md-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}
.message-body .md-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.message-body .md-table th,
.message-body .md-table td {
  padding: var(--s-2) var(--s-4);
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  border-bottom: 1px solid var(--line-fill);
}
.message-body .md-table th {
  font-weight: 610;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom-color: var(--line);
}
.message-body .md-table tbody tr:last-child td { border-bottom: none; }
.message-body .md-table td:first-child { color: var(--ink); }
.message-body .md-table .md-mid { text-align: center; }
.message-body .md-table .md-end { text-align: right; font-variant-numeric: tabular-nums; }
.message-body .md-table th:first-child,
.message-body .md-table td:first-child { padding-left: 0; }
.message-body .md-table th:last-child,
.message-body .md-table td:last-child { padding-right: 0; }
.message-body .md-table th[aria-sort] { padding-top: 0; padding-bottom: 0; }
.message-body .md-table-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.message-body .md-table-copy .icon-mx { width: 0.8125rem; height: 0.8125rem; }
.md-math-block {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  margin: var(--s-2) 0;
  text-align: center;
}
.md-math-block .katex-display { margin: 0; }

:root {
  --chart-1: #2563eb;
  --chart-2: #0f766e;
  --chart-3: #c2410c;
  --chart-4: #7c3aed;
}
:root[data-theme='dark'] {
  --chart-1: #60a5fa;
  --chart-2: #2dd4bf;
  --chart-3: #fb923c;
  --chart-4: #a78bfa;
}
.chart { margin: var(--s-4) 0; padding: 0; }
.message-body .grid-table td { min-width: 11rem; max-width: 22rem; }
.grid-answer { display: block; color: var(--ink); }
.grid-quote {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.grid-quote-none { color: var(--ink-faint); }
.grid-none { color: var(--ink-faint); font-size: 0.875rem; }
.grid-split {
  display: inline-block;
  margin-bottom: 0.25rem;
  padding: 0 0.375rem;
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 610;
  line-height: 1.5;
}
.grid-view + .grid-view { margin-top: 0.5rem; }
.grid-who { font-weight: 610; color: var(--ink); }

.timeline { margin: var(--s-4) 0; padding: 0; }
.timeline-rows { list-style: none; margin: 0; padding: 0; }
.timeline-date {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.timeline-label { color: var(--ink); line-height: 1.45; }
.timeline-detail { color: var(--ink-muted); font-size: 0.875rem; line-height: 1.45; }
.chart-s0 { --chart-ink: var(--chart-1); }
.chart-s1 { --chart-ink: var(--chart-2); }
.chart-s2 { --chart-ink: var(--chart-3); }
.chart-s3 { --chart-ink: var(--chart-4); }
.chart-title {
  font-size: 0.875rem;
  font-weight: 610;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.chart-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.chart-label { color: var(--ink-muted); overflow-wrap: anywhere; line-height: 1.35; }
.chart-track { height: 10px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.chart-value { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 0.8125rem; text-align: right; white-space: nowrap; }
.chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: 0.8125rem; color: var(--ink-muted); }
.chart-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.chart-missing { color: var(--ink-faint); font-size: 0.875rem; }
.diagram { margin: var(--s-5) 0; padding: var(--s-8) var(--s-5); border-radius: 20px; background: #f7f7f5; overflow-x: auto; }
:root[data-theme='dark'] .diagram { background: #0b0b0b; }
.diagram-stage svg { display: block; max-width: 100%; height: auto; }
.diagram-waiting .chart-missing { margin: 0; }
.diagram-source { margin: var(--s-2) 0 0; font-size: 0.8125rem; white-space: pre-wrap; color: var(--ink-muted); }

.message-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.message-body .md-pre {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow-x: auto;
}
.message-body .md-pre code {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
}
.message-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

.message-body a.md-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  margin-inline: 0.15em;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-muted);
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.message-body a.md-cite svg {
  width: 0.68em;
  height: 0.68em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-body a.md-cite:hover,
.message-body a.md-cite:focus-visible {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  background: var(--surface);
}

.message-actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-3);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.message-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.75rem;
  padding-inline: 0.5rem;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.message-action .icon { font-size: 0.75rem; color: inherit; }

mark.fact {
  padding: 0 0.0625rem;
  border-radius: 2px;
  background: none;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
}
mark.fact-backed { text-decoration-color: var(--positive); background: color-mix(in srgb, var(--positive) 9%, transparent); }
mark.fact-disputed { text-decoration-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
mark.fact-unverified { text-decoration-color: var(--meter-near); text-decoration-style: dashed; }
.fact-report { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.fact-summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  list-style: none;
  cursor: pointer;
}
.fact-summary::-webkit-details-marker { display: none; }
.fact-summary-mark, .fact-summary-chevron { width: 0.9375rem; height: 0.9375rem; flex: none; color: inherit; }
.fact-summary-chevron { margin-left: auto; transition: transform var(--dur-fast) var(--ease); }
.fact-list { margin: 0; padding: 0; list-style: none; }
.fact-item p { margin: 0; }
.fact-item.is-backed .fact-item-status { color: var(--positive); }
.fact-item.is-disputed .fact-item-status { color: var(--danger); }
.fact-item.is-unverified .fact-item-status { color: var(--meter-near); }
.fact-item-source {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.25rem;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opinion { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.opinion-offer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-2);
  row-gap: 0.125rem;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-strong);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.opinion-offer-mark { width: 1rem; height: 1rem; color: inherit; }
.opinion-offer-note { color: var(--ink-faint); font-size: 0.75rem; }
.branch-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-inline-start: var(--s-1);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.branch-count { min-width: 3.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.branch-step {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.branch-step .icon { width: 0.875rem; height: 0.875rem; color: inherit; }

.chat-empty {
  margin-inline: auto;
  width: min(var(--chat-measure), 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  animation: message-in 260ms var(--ease-out) both;
}

.chat-empty h2 {
  font-weight: 500;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.chat-empty p {
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 46ch;
  opacity: 0.6;
}

.newchat-greeting {
  margin: 0;
  font-weight: 500;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  font-size: clamp(1.875rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  transition: opacity 0.32s var(--ease-out), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s var(--ease-out);
}
@keyframes send-launch {
  from { opacity: 0; transform: translateY(36px) scale(0.94); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

.jump-latest {
  align-self: center;
  flex: none;
  margin-top: -2.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  color: var(--ink);
  cursor: pointer;
  animation: toast-in 220ms var(--ease-out) both;
}

.chat > nav.chat-outline {
  position: absolute;
  top: calc(3.25rem + var(--s-4));
  right: var(--s-3);
  bottom: calc(var(--dock-h, 7.5rem) + var(--s-4));
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.chat > nav.chat-outline[hidden] { display: none; }
.chat-outline-list {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  padding: 0.5rem 0.625rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  pointer-events: auto;
}
.chat-outline-list::-webkit-scrollbar { display: none; }
.chat-outline-item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  height: 0.875rem;
  padding: 0;
  border: none;
  border-radius: 0.625rem;
  background: none;
  color: var(--line-strong);
  color: color-mix(in srgb, var(--ink) 28%, var(--bg));
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-outline-item::after {
  content: '';
  flex: none;
  width: 0.875rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background-color var(--dur-fast) var(--ease);
}
.chat-outline-label {
  display: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.chat-outline[data-open='true'] .chat-outline-item::after { display: none; }
@keyframes outline-in {
  from { opacity: 0; transform: translateX(6px) scale(0.97); }
}

.composer-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.composer-inner {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  border: 2px solid transparent;
  background: var(--composer-fill, var(--surface));
  border-radius: var(--r-composer);
  padding: 0.3125rem;
  position: relative;
  box-shadow: none;
  transition: border-color var(--dur) var(--ease-out);
}

.composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  resize: none;
  max-height: 200px;
  min-height: 2.25rem;
  padding: 0.4375rem 0.5rem;
  line-height: 1.5;
  font-size: 1rem;
}
.composer textarea:focus { outline: none; }

.composer-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.composer-field textarea { flex: 1 1 auto; min-width: 0; }

.composer-hint {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1.5;
}
.composer-hint-line {
  position: absolute;
  top: 0.4375rem;
  left: 0.5rem;
  right: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes hint-in {
  from { transform: translateY(105%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes hint-out {
  from { transform: none; opacity: 1; }
  to { transform: translateY(-105%); opacity: 0; }
}

.composer-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font-size: 1.125rem;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.composer-attach .icon { color: inherit; }
.composer-file .icon { font-size: 0.75rem; color: var(--ink); }
.composer-file[data-kind='image'] .icon { color: var(--tone-violet); }
.composer-file[data-kind='pdf'] .icon { color: var(--danger); }
.composer-file[data-kind='xlsx'] .icon { color: var(--nav-health); }
.composer-file[data-kind='pptx'] .icon { color: var(--nav-profile); }
.composer-file-name { min-width: 0; }
.composer-file-size { flex: none; color: var(--ink-faint); font-size: 0.6875rem; }

.composer-file-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-faint);
  font-size: 0.625rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.composer-thumb {
  position: relative;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  animation: message-in 200ms var(--ease-out) both;
}
.composer-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.composer-thumb-drop {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 0.5625rem;
  cursor: pointer;
}
.composer-thumb-drop .icon { color: inherit; }

.drop-veil-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.375rem;
  border-radius: var(--r-pill);
  background: #000000;
  color: #ffffff;
}
.drop-veil-mark .icon-mx { width: 1.125rem; height: 1.125rem; min-width: 0; color: inherit; }

.drop-veil-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 560;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.drop-veil-note {
  margin: 0;
  max-width: 26rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.message-files {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.message-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  max-width: 16rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.message-file .icon { font-size: 0.6875rem; }
button.message-file-saved {
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.message-image {
  display: block;
  margin: 0;
  overflow: hidden;
  width: 9rem;
  height: 9rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  line-height: 0;
}
.message-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.composer-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

.composer-chip-cost {
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.composer-model {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: none;
  background: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--ink);
  opacity: 0.7;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.composer-model .icon { font-size: 0.8125rem; }

.composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: #000000;
  color: #ffffff;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.composer-send .icon { color: inherit; }
.composer-send .icon-mx {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  color: inherit;
}
.composer-send:disabled .icon-mx { color: var(--ink-faint); }
.composer-stop { background: var(--surface-3); color: var(--ink); }

.suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: none;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease-out);
}
.suggestion:hover { background: var(--surface-2); border-color: var(--line-strong); transform: translateY(-1px); }
.suggestion:active { transform: none; }
@media (max-width: 620px) {
  .suggestion:nth-child(n + 3) { display: none; }
}

@media (max-width: 940px) {
  .assistant-layout,
  .assistant-layout[data-rail='closed'],
  .app-layout,
  .app-layout[data-rail='closed'] { grid-template-columns: minmax(0, 1fr); }
  .assistant-layout[data-rail='closed'] .rail-mini,
  .app-layout[data-rail='closed'] .rail-mini { display: none; }
  .rail {
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(21rem, 88vw);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
  }
  .assistant-layout[data-rail='closed'] .rail,
  .app-layout[data-rail='closed'] .rail {
    transform: translateX(-100%);
    padding-inline: var(--s-3);
  }
  .rail-grip { display: none !important; }

  .assistant-layout[data-rail='open'] .chat-bar-lead,
  .app-layout[data-rail='open'] .chat-bar-lead { display: flex; }

  .assistant-layout[data-rail='open'] .rail-scrim,
  .app-layout[data-rail='open'] .rail-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 15;
    border: none;
    padding: 0;
    cursor: default;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: fade-in 200ms var(--ease-out) both;
  }
}

body[data-shell='app'] {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--keyboard-inset, 0px));
  height: calc(100dvh - var(--keyboard-inset, 0px));
  overflow: hidden;
}

body[data-shell='app'] .site-header,
body[data-shell='app'] .site-footer { display: none; }

.app-layout {
  flex: 1;
  min-height: 0;
  animation: fade-in 320ms var(--ease-out) both;
}

.app-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.app-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-scroll .container {
  max-width: none;
  padding-inline: var(--app-gutter);
}

.app-scroll form.card,
.app-scroll .pane > form { max-width: 62rem; }

.app-scroll > .page:not(.page-flush) { padding-bottom: var(--s-12); }
.app-scroll .section { margin-top: clamp(2.25rem, 3.4vw, 3.5rem); }
.app-scroll .page-head { padding-top: clamp(1.5rem, 2.6vw, 2.5rem); }
.app-scroll .page-head-compact { padding-top: clamp(1.5rem, 2.6vw, 2.5rem); }

.app-bar { background: var(--bg); }
@media (min-width: 941px) {
  .app-bar { display: none; }
}

.caret::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1.05em;
  border-radius: 1px;
  background: var(--ink);
  margin-left: 2px;
  vertical-align: -0.18em;
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.thinking {
  display: flex;
  align-items: center;
  gap: 0.3em;
  height: 1.1em;
  line-height: 1;
  color: var(--ink-muted);
  user-select: none;
  -webkit-user-select: none;
}

.thinking-blob {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin-left: -0.2em;
  overflow: visible;
  color: var(--ink);
}

@keyframes thinking-split-a {
  0%, 3% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  27% { transform: translate(0, -5.4px) scale(0.78); }
  33% { transform: translate(0, -5.4px) scale(0.78); animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1); }
  48%, 53% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  77% { transform: translate(-5.4px, 0) scale(0.78); }
  83% { transform: translate(-5.4px, 0) scale(0.78); animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1); }
  98%, 100% { transform: translate(0, 0) scale(1); }
}
@keyframes thinking-split-b {
  0%, 3% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  27% { transform: translate(0, 5.4px) scale(0.78); }
  33% { transform: translate(0, 5.4px) scale(0.78); animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1); }
  48%, 53% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  77% { transform: translate(5.4px, 0) scale(0.78); }
  83% { transform: translate(5.4px, 0) scale(0.78); animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1); }
  98%, 100% { transform: translate(0, 0) scale(1); }
}

html:has(body[data-page='login']) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body[data-page='login'] {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body[data-page='login'] .site-footer,
body[data-page='login'] #app-header { display: none; }

.auth-wrap {
  --auth-h: 2.75rem;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: block;
  padding: 0;
  animation: none;
  background: var(--bg);
}

.auth-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding:
    max(0.75rem, env(safe-area-inset-top))
    clamp(1.25rem, 3vw, 2.5rem)
    max(0.75rem, env(safe-area-inset-bottom));
}

.auth-panel {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

.auth-note {
  display: flex;
  gap: 0.625rem;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
  text-wrap: pretty;
}
.auth-note .icon-mx { flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem; }
.auth-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }

.auth-badge {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: 0.875rem;
  background: var(--surface-2);
  color: var(--ink);
}
.auth-badge .icon-mx { width: 1.5rem; height: 1.5rem; }

.auth-card h1 {
  font-size: 1.5rem;
  font-weight: 610;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.auth-sub {
  margin-top: var(--s-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-faint);
  text-wrap: pretty;
}

.auth-identity {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--s-5);
  padding: 0.4375rem 0.5rem 0.4375rem 0.4375rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  color: var(--ink);
}
.auth-identity button {
  flex: none;
  padding: 0.3125rem 0.75rem;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.auth-identity button:hover { background: var(--surface-3); }

.auth-card > .notice { margin: var(--s-5) 0 0; }

.auth-form { margin-top: var(--s-6); }
.auth-form .field + .field { margin-top: var(--s-4); }

.auth-form .input,
.auth-form .btn-block {
  height: var(--auth-h);
  border-radius: 0.625rem;
  font-size: 0.9375rem;
}

.auth-form .strength { margin-top: var(--s-1); }
.code-digit.is-leaving {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: code-digit-out 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes code-digit-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes code-digit-out {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translateY(-6px) scale(0.98); filter: blur(3px); }
}
@keyframes code-wrong {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}
.code-cell.is-filled { background: var(--surface-2); }
.code-note { margin-top: var(--s-1); }
@keyframes code-caret { 50% { opacity: 0; } }

.auth-form .consent {
  margin-top: var(--s-5);
  padding: 0;
  border: none;
  background: none;
}

.auth-form .btn-block {
  margin-top: var(--s-5);
  font-weight: 570;
  letter-spacing: -0.005em;
}

.auth-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: var(--s-5);
  font-size: 0.875rem;
  color: var(--ink-faint);
}
.auth-switch button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-weight: 570;
  font-size: inherit;
  padding: 0;
}
.auth-foot nav { display: flex; gap: var(--s-5); }
.auth-foot a { color: inherit; text-decoration: none; }

@media (min-width: 600px) {
  .auth-card h1 { font-size: 2.125rem; letter-spacing: -0.03em; }
  .auth-sub { margin-top: var(--s-3); font-size: 1.0625rem; }
  .auth-form { margin-top: var(--s-10); }
  .auth-form .field + .field { margin-top: var(--s-6); }
  .auth-form .btn-block { margin-top: var(--s-7); }
  .auth-switch { margin-top: var(--s-7); font-size: 0.9375rem; }
}

@media (max-height: 820px) {
  .auth-note { margin-top: var(--s-5); padding-top: var(--s-4); }
}

.settings-scrim {
  position: fixed;
  inset: 0;
  z-index: 170;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(var(--s-4), 3vh, var(--s-8));
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in 140ms var(--ease-out) both;
}
:root[data-theme='dark'] .settings-scrim { background: rgba(0, 0, 0, 0.64); }
.settings-scrim[hidden] { display: none; }

body.has-settings-open { overflow: hidden; }

.settings-modal {
  position: relative;
  width: min(47rem, 100%);
  height: min(38rem, 100%);
  display: grid;
  grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: dialog-in 180ms var(--ease-out) both;
}
.settings-modal:focus,
.settings-modal:focus-visible { outline: none; }

.settings-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: var(--r-md);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.settings-close:hover { color: var(--ink-strong); }
.settings-close:active { transform: scale(0.94); }

.settings-modal-nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-5) var(--s-3) var(--s-4);
  gap: var(--s-3);
  background: none;
  border-right: 0;
}
.settings-modal-nav-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
}
.settings-modal-title {
  padding-left: var(--s-2);
  font-size: 1.375rem;
  font-weight: 610;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.settings-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.settings-search .icon {
  position: absolute;
  left: 0.625rem;
  font-size: 0.8125rem;
  color: var(--ink);
  pointer-events: none;
}
.settings-search-input {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.625rem 0.4rem 2rem;
  border: 1px solid var(--line-fill);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
}
.settings-search-input::placeholder { color: var(--ink-muted); opacity: 0.6; }
.settings-search-input::-webkit-search-cancel-button { display: none; }

.settings-modal {
  --set-rail: #f3f3f1;
  --set-rail-line: rgba(0, 0, 0, 0.04);
  --set-rail-hover: rgba(0, 0, 0, 0.04);
  --set-rail-on: #ffffff;
  --set-rail-on-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
:root[data-theme='dark'] .settings-modal {
  --set-rail: #0c0c0c;
  --set-rail-line: rgba(255, 255, 255, 0.05);
  --set-rail-hover: rgba(255, 255, 255, 0.05);
  --set-rail-on: #262626;
  --set-rail-on-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  background: var(--set-rail);
}

.settings-nav-list {
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--set-rail);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--set-rail-line);
}
.settings-nav-list::-webkit-scrollbar { display: none; }
.settings-nav-list .tab-slide {
  background: var(--set-rail-on);
  box-shadow: var(--set-rail-on-shadow);
}
.settings-nav-list li[hidden] { display: none; }
.settings-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.625rem;
  border: 0;
  background: none;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.settings-nav-item:active { transform: scale(0.98); transition-duration: 40ms; }
.settings-nav-item .icon-mx {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 0;
  color: var(--nav-ink);
}
.settings-nav-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-nav-item:hover { color: var(--ink); background: var(--set-rail-hover); }
.settings-nav-item.is-current {
  background: var(--set-rail-on);
  font-weight: 570;
  color: var(--ink-strong);
}
.settings-nav-list.has-slide .settings-nav-item.is-current { background: none; }
.settings-nav-list:not(:has(li:not([hidden]))) { display: none; }
.settings-nav-empty {
  padding: var(--s-2) var(--s-2) 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  opacity: 0.7;
}

.settings-modal-main {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-6) clamp(var(--s-5), 3vw, var(--s-8)) var(--s-10);
}
.settings-modal-body { min-width: 0; max-width: 42rem; margin: 0 auto; }
.settings-modal-body > .settings-group[hidden] { display: none; }

.settings-modal .settings-group-head {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.settings-modal .settings-group-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.settings-modal .settings-group-head:has(p) { margin-bottom: var(--s-4); }

.settings-modal .panel {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.settings-modal .settings-group > .panel + .panel { margin-top: 0; }
.settings-modal .panel + .panel > .setting-row:first-child { border-top: 1px solid var(--line-fill); }
.settings-modal .setting-row { padding: var(--s-4) var(--s-2); }
.settings-modal .panel-row { padding: var(--s-4) var(--s-2); }
.settings-modal .trust { margin-top: var(--s-6); }

.settings-modal .usage-block,
.settings-modal .usage-trend {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.pz { display: flex; flex-direction: column; gap: var(--s-8); }
.pz-block { min-width: 0; }
.pz-head {
  padding: 0 var(--s-2) var(--s-2);
  font-size: 0.75rem;
  font-weight: 610;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-fill);
}
.pz-lede {
  padding: var(--s-3) var(--s-2) var(--s-2);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
  opacity: 0.75;
  max-width: 56ch;
}
.pz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  padding: var(--s-4) var(--s-2);
}
.pz-row + .pz-row { border-top: 1px solid var(--line-fill); }
.pz-copy { min-width: 0; flex: 1 1 auto; }
.pz-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 570;
  color: var(--ink-strong);
}
.pz-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
  opacity: 0.7;
  max-width: 46ch;
}
.pz-row > .btn,
.pz-row > .pz-select { flex: none; }
.pz-select { min-width: 12rem; max-width: 15rem; }

.pz-seg {
  flex: none;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-fill);
}
.pz-seg-btn {
  min-width: 4.75rem;
  padding: 0.375rem 0.875rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pz-seg-btn:hover { color: var(--ink-strong); }
.pz-seg-btn[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
:root[data-theme='dark'] .pz-seg { background: #1f1f1f; }
:root[data-theme='dark'] .pz-seg-btn[aria-pressed='true'] {
  background: #333333;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

.pz-styles { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
.pz-style {
  padding: 0.4375rem 0.9375rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  box-shadow: inset 0 0 0 1px var(--line-fill);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pz-style:hover { color: var(--ink-strong); background: var(--surface-2); }
.pz-style[aria-pressed='true'] {
  background: var(--ink-strong);
  color: var(--surface);
  box-shadow: none;
}
.pz-style-hint { min-height: 1.25rem; margin: var(--s-3) var(--s-2) 0; }
.pz-custom { margin: var(--s-3) var(--s-2) 0; }

@media (max-width: 560px) {
  .pz-row { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .pz-seg { display: grid; }
  .pz-seg-btn { min-width: 0; }
  .pz-select { min-width: 0; max-width: none; width: 100%; }
  .pz-row > .btn { align-self: flex-start; }
}

@media (max-width: 820px) {
  .settings-scrim { padding: 0; grid-template-rows: minmax(0, 1fr); background: var(--surface); animation: none; }
  :root[data-theme='dark'] .settings-scrim { background: #0c0c0c; }
  .settings-modal {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-modal-nav {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--s-3) var(--s-4);
  }
  .settings-nav-list {
    flex-direction: row;
    gap: var(--s-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  .settings-nav-item { white-space: nowrap; border-radius: var(--r-pill); }
  .settings-nav-list .tab-slide { border-radius: var(--r-pill); }
  .settings-modal-nav-head { padding-right: 2rem; }
  .settings-modal-main { padding: var(--s-5) var(--s-4) var(--s-10); }

  .settings-nav-list {
    gap: var(--s-1);
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
    scroll-padding-inline: var(--s-4);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
  }
  .settings-nav-list {
    flex: none;
    margin-inline: 0;
    padding: 0.25rem;
    scroll-padding-inline: 0.25rem;
    border-radius: var(--r-pill);
  }
  .settings-nav-list::-webkit-scrollbar { display: none; }
  .settings-nav-list li { scroll-snap-align: start; }
  .settings-nav-item { padding: 0.5rem 0.8125rem; min-height: 2.25rem; }

  .settings-modal-nav { gap: var(--s-2); padding-bottom: var(--s-2); }
  .settings-modal-nav-head { gap: var(--s-2); }
}

.settings-modal { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
.settings-modal-nav {
  padding: var(--s-5) var(--s-3) var(--s-4);
  background: var(--set-rail);
  border-right: 1px solid var(--line-fill);
}
.settings-nav-list {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.settings-close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  color: var(--ink);
}
.settings-close .icon-mx { width: 1.375rem; height: 1.375rem; }
.settings-close:hover { background: var(--surface-2); }

.settings-modal .settings-group-head { padding-right: 2.75rem; margin-bottom: var(--s-5); }
.settings-modal .settings-group-title {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 var(--s-2);
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.settings-modal .settings-group-head > p,
.settings-modal .settings-group-line > .profile-saved { padding-inline: var(--s-2); }
.settings-modal .settings-group-head > p { margin-top: var(--s-1); }

.settings-modal .profile-hero {
  border: 0;
  border-radius: 0;
  background: none;
  margin-bottom: var(--s-8);
}
.settings-modal .profile-hero-main { gap: var(--s-5); padding: var(--s-2) var(--s-2) 0; }
.settings-modal .profile-avatar {
  --avatar-size: 4.75rem;
  box-shadow: inset 0 0 0 1px var(--avatar-edge);
}
.settings-modal .profile-name { font-size: 1.5rem; }
.settings-modal .profile-hero-text { gap: 0.125rem; }
.settings-modal .profile-hero-edit {
  margin-top: var(--s-3);
  background: var(--surface-2);
}
.settings-modal .profile-hero-edit:hover:not(:disabled) { background: var(--surface-3); }
.settings-modal .profile-tints {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 0;
  border-radius: var(--r-lg);
}
.settings-modal .profile-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  column-count: auto;
}
.settings-modal .profile-groups > * { margin-bottom: 0; }
.settings-modal .profile-block {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.settings-modal .profile-block-head { padding: 0 var(--s-4) var(--s-2); }
.settings-modal .profile-block-title {
  font-size: 0.9375rem;
  font-weight: 610;
  color: var(--ink-strong);
}
.settings-modal .profile-block-title .icon { display: none; }
.settings-modal .profile-block-note { margin-top: 0.125rem; }
.settings-modal .profile-group { border-top: 0; }
.settings-modal .profile-group.is-editing { border-radius: var(--r-lg); }
.settings-modal .profile-row {
  padding: var(--s-4);
  border-radius: var(--r-pill);
}
.settings-modal .profile-row.is-stacked { border-radius: var(--r-lg); }
.settings-modal .profile-row-label { width: 9rem; }
.settings-modal .profile-row + .profile-row::before {
  left: var(--s-4);
  right: var(--s-4);
  background: var(--line-fill);
  transition: opacity var(--dur-fast) var(--ease);
}
.settings-modal .profile-row:hover::before,
.settings-modal .profile-row:hover + .profile-row::before,
.settings-modal .profile-row:focus-visible::before,
.settings-modal .profile-row:focus-visible + .profile-row::before { opacity: 0; }
.settings-modal .profile-row:focus-visible { border-radius: inherit; }

.settings-modal .danger-zone {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.settings-modal .danger-zone > * + * { margin-top: var(--s-6); }
.settings-modal .danger-choice {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  max-width: none;
}
.settings-modal .danger-option {
  gap: var(--s-4);
  padding: var(--s-4);
  border: 0;
  border-radius: var(--r-lg);
  background: none;
}
.settings-modal .danger-option:hover { background: var(--surface-2); }
.settings-modal .danger-option:has(input:checked) { background: var(--surface-2); }
.settings-modal .danger-option input { margin-top: 0.25rem; }
.settings-modal .danger-option-text { gap: 0.125rem; }
.settings-modal .danger-confirm {
  max-width: none;
  gap: var(--s-5);
  margin-top: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.danger-confirm-title { margin: 0; font-size: 0.9375rem; font-weight: 610; color: var(--ink-strong); }
.danger-confirm-note {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink-muted) 65%, transparent);
}
.danger-fields {
  display: grid;
  gap: var(--s-4);
  max-width: 24rem;
}
.danger-fields > .field[hidden] { display: none; }
.settings-modal .danger-fields .field { margin: 0; gap: var(--s-2); }
.settings-modal .danger-fields .field + .field { margin-top: 0; }
.danger-fields label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); }
.settings-modal .danger-confirm .notice { margin: 0; }
.danger-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.settings-modal .usage-block,
.settings-modal .usage-trend {
  background: none;
  border: 0;
  border-top: 1px solid var(--line-fill);
  border-radius: 0;
}
.settings-modal .usage-limits,
.settings-modal .usage-trend,
.settings-modal .usage-by-model { padding-inline: var(--s-2); }

.settings-back { display: none; }

@media (max-width: 820px) {
  .settings-modal { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .settings-modal-nav {
    gap: var(--s-4);
    overflow-y: auto;
    border: 0;
    background: var(--surface);
  }
  .settings-modal[data-view='group'] .settings-modal-nav { display: none; }
  .settings-modal:not([data-view='group']) .settings-modal-main { display: none; }
  .settings-modal .settings-modal-title { font-size: 1.75rem; padding-left: var(--s-1); padding-right: 2.75rem; }
  .settings-modal-nav-head { gap: var(--s-4); padding-right: 0; }
  .settings-nav-list {
    flex: none;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    border-radius: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .settings-nav-list .tab-slide { display: none; }
  .settings-nav-list li + li .settings-nav-item { border-top: 1px solid var(--line-fill); }
  .settings-nav-item,
  .settings-nav-item.is-current {
    min-height: 3.25rem;
    padding: 0.75rem var(--s-1);
    border-radius: 0;
    background: none;
    font-size: 1rem;
    font-weight: 500;
    white-space: normal;
  }
  .settings-nav-item::after {
    content: '';
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.25rem 0 auto;
    border-right: 1.5px solid var(--ink-faint);
    border-bottom: 1.5px solid var(--ink-faint);
    transform: rotate(-45deg);
  }
  .settings-nav-item:hover { background: none; }
  .settings-back {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0 0 var(--s-4) calc(var(--s-2) * -1);
    padding: 0.375rem 0.5rem 0.375rem 0.25rem;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 570;
    color: var(--ink);
    cursor: pointer;
  }
  .settings-back .icon-mx { width: 1.25rem; height: 1.25rem; }
  .settings-modal .settings-group-head { padding-right: 0; }
}

.settings-group { scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
.settings-group > .panel + .panel { margin-top: var(--s-3); }
.settings-group-head {
  padding-bottom: 0;
  margin-bottom: var(--s-4);
}
.settings-group-title { font-size: 1.125rem; font-weight: 610; }
.settings-group-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}
.settings-group-head p { margin-top: var(--s-2); }

.setting-row {
  display: grid;
  grid-template-columns: minmax(min(100%, 16rem), 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--s-4) var(--s-8);
  padding: var(--s-5) var(--s-6);
}
.setting-row + .setting-row { border-top: 1px solid var(--line-fill); }
.setting-copy { min-width: 0; }
.setting-label { font-size: 0.9375rem; font-weight: 570; color: var(--ink); }
.setting-note {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink-muted) 65%, transparent);
  max-width: 54ch;
}
.setting-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  min-width: 0;
  flex-wrap: wrap;
}
.setting-value { font-size: 0.9375rem; min-width: 0; }

@media (max-width: 640px) {
  .setting-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-2);
  }
  .setting-control {
    justify-content: flex-start;
    width: 100%;
    gap: var(--s-2);
  }
  .setting-value { font-size: 0.9375rem; }
  .setting-control > .select,
  .setting-control > .btn:only-child,
  .setting-control > .btn-row,
  .setting-control > .device-list,
  .setting-control-form,
  .setting-control-form .field,
  .setting-control-form .btn { width: 100%; max-width: none; }
  .setting-control > .btn-row > .btn { flex: 1 1 auto; justify-content: center; }
  .settings-modal .setting-row { padding: var(--s-4) var(--s-1); }
}

.usage-by-model { padding: var(--s-5) var(--s-5) var(--s-4); }
.usage-models { margin-top: var(--s-3); }

.usage-model-list { list-style: none; margin: 0; padding: 0; }
.usage-model {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) 2.75rem minmax(7.5rem, auto);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-fill, var(--line));
}
.usage-model:first-child { border-top: 0; }
.usage-model-id {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.usage-model-glyph {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--ink);
}
.usage-model-name {
  font-size: 0.875rem;
  font-weight: 570;
  color: var(--ink-strong);
}
.usage-model-share {
  font-size: 0.875rem;
  font-weight: 570;
  color: var(--ink-strong);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.usage-model-meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 700px) {
  .usage-model {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-3);
  }
  .usage-model .usage-meter { grid-column: 1 / -1; grid-row: 2; }
  .usage-model-meta { grid-column: 1 / -1; grid-row: 3; text-align: left; }
}
.usage-empty {
  font-size: 0.875rem;
  color: var(--ink-muted);
  opacity: 0.65;
}

.setting-row-stack { grid-template-columns: minmax(0, 1fr); }
.setting-control-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--s-4);
  width: 100%;
  max-width: 24rem;
}
.setting-control-form .notice { margin: 0; }
@media (min-width: 641px) {
  .setting-row-stack > .setting-control-form { max-width: none; }
  .setting-row-stack > .setting-control-form > .form-actions,
  .setting-row-stack > .setting-reveal > summary { align-self: flex-end; }
  .setting-row-stack > .setting-control-form > .field,
  .setting-row-stack > .setting-control-form > .notice { align-self: flex-end; width: 100%; max-width: 24rem; }
}

.danger-zone {
  border: 1px solid var(--danger);
  border-radius: var(--r-card);
  background: var(--bg);
  padding: var(--s-8);
  max-width: 56rem;
}
.danger-zone > * + * { margin-top: var(--s-5); }
.danger-zone .card-title .icon { color: var(--danger); }
.danger-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-3);
  max-width: 44rem;
}
.danger-option {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.danger-option:hover { border-color: var(--ink-faint); }
.danger-option:has(input:checked) { border-color: var(--danger); }
.danger-option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.danger-option input { margin: 0.2rem 0 0; accent-color: var(--danger-strong); flex: none; }
.danger-option-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.danger-option-title { font-weight: 610; font-size: 0.9375rem; color: var(--ink); }

.danger-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 20rem;
}
.danger-confirm > p { margin: 0; }
.recover-note a { text-decoration: underline; text-underline-offset: 2px; }

.toast-region {
  position: fixed;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  z-index: 90;
  pointer-events: none;
  width: min(400px, calc(100vw - 2rem));
}
.toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  color: #1d1d1f;
  border: 0;
  border-radius: 1.125rem;
  padding: 0.375rem 1rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: -0.012em;
  max-width: 100%;
  text-align: left;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  animation: toast-rise 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.toast:not(:has(> .icon)) { padding-left: 1rem; }
:root[data-theme='dark'] .toast {
  background: rgba(44, 44, 46, 0.78);
  color: #f5f5f7;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.toast .icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
  font-size: 1.25rem;
}
.toast .icon-mx [stroke] { stroke-width: 1.75; }
.toast-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.toast-action {
  flex-shrink: 0;
  align-self: center;
  margin: 0 -0.375rem 0 0.25rem;
  padding: 0.1875rem 0.5625rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.toast-action:hover { background: rgba(0, 0, 0, 0.1); }
:root[data-theme='dark'] .toast-action { background: rgba(255, 255, 255, 0.12); }
:root[data-theme='dark'] .toast-action:hover { background: rgba(255, 255, 255, 0.18); }
.toast-tagged .toast-tag {
  flex-shrink: 0;
  padding: 0 0.4375rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.01em;
}
:root[data-theme='dark'] .toast-tagged .toast-tag { background: var(--line-strong); }
.toast[data-leaving='true'] { animation: toast-fall 240ms var(--ease) forwards; }
@keyframes toast-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-fall {
  to { opacity: 0; transform: translateY(4px) scale(0.96); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

.setup-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.55rem var(--gutter);
  text-align: center;
}
.setup-banner .icon { color: inherit; }
.setup-banner code {
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--bg) 18%, transparent);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

.reveal,
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 570;
  line-height: 1.5;
  color: var(--ink-faint);
  opacity: 0.85;
  white-space: nowrap;
}

.overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  z-index: 120;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(1rem, 12vh, 8rem) var(--s-4) var(--s-6);
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in 140ms var(--ease-out) both;
}
:root[data-theme='dark'] .overlay { background: rgba(0, 0, 0, 0.62); }
#shortcuts-overlay { z-index: 180; }

body[data-overlay='open'] { overflow: hidden; }

.dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--s-5);
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in 140ms var(--ease-out) both;
}
:root[data-theme='dark'] .dialog-scrim { background: rgba(0, 0, 0, 0.64); }
.dialog-scrim[data-leaving='true'] { animation: fade-out 150ms var(--ease) forwards; }

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.dialog {
  width: min(28rem, 100%);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: dialog-in 180ms var(--ease-out) both;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.dialog-wide {
  width: min(34rem, 100%);
  max-height: min(88vh, 52rem);
  display: flex;
  flex-direction: column;
}

.dialog-wide > .dialog-title,
.dialog-wide > .dialog-actions { flex: none; }
.dialog-wide > .dialog-main {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--s-2);
  margin-right: calc(var(--s-2) * -1);
}

.dialog-title { font-size: 1.0625rem; font-weight: 610; line-height: 1.35; }
.dialog-body {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.dialog-field { margin-top: var(--s-5); }

.dialog-problem {
  margin-top: var(--s-4);
  font-size: 0.8125rem;
  color: var(--danger);
}

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

@media (max-width: 420px) {
  .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .dialog-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dialog, .dialog-scrim { animation: none; }
}

.dialog-pin { width: min(23rem, 100%); padding: var(--s-8) var(--s-6) var(--s-6); text-align: center; }
.dialog-pin > .dialog-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dialog-pin .dialog-actions { justify-content: center; margin-top: var(--s-5); }
.dialog-pin .dialog-actions .btn { flex: 1; justify-content: center; }

.pin-pad { display: flex; flex-direction: column; align-items: center; }
.pin-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
.pin-badge .icon { width: 1.375rem; height: 1.375rem; }
.pin-title { margin-top: var(--s-4); font-size: 1.125rem; font-weight: 610; line-height: 1.3; }
.pin-sub { margin-top: var(--s-2); max-width: 18rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted); }

.pin-cells { position: relative; display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--s-6); cursor: text; }
.pin-cell {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 3.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.pin-cell.is-filled { background: var(--surface); }
.pin-cell.is-filled::after { content: ''; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ink); }
.pin-cell.is-current { border-color: var(--ink); background: var(--surface); }
.pin-cells.is-wrong .pin-cell { border-color: var(--danger); }
.pin-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  opacity: 0;
  cursor: text;
}
.pin-pad[data-busy='true'] .pin-cells { opacity: 0.55; }

.pin-error { min-height: 1.25rem; margin-top: var(--s-3); font-size: 0.8125rem; line-height: 1.4; color: var(--danger); }
.pin-fine { margin-top: var(--s-1); font-size: 0.75rem; line-height: 1.45; color: var(--ink-faint); }

@media (max-width: 420px) {
  .pin-cells { gap: 0.375rem; }
  .pin-cell { width: 2.5rem; height: 3rem; }
  .dialog-pin .dialog-actions { flex-direction: column-reverse; }
  .dialog-pin .dialog-actions .btn { flex: none; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--s-6);
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in 140ms var(--ease-out) both;
}
:root[data-theme='dark'] .lightbox { background: rgba(0, 0, 0, 0.9); }
.lightbox[data-leaving='true'] { animation: fade-out 150ms var(--ease) forwards; }

.lightbox-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
}

.lightbox-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}

.lightbox-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

@media (max-width: 640px) {
  .lightbox { padding: var(--s-3); }
  .lightbox-image { max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}

.palette {
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  max-height: min(60vh, 32rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: palette-in 180ms var(--ease-out) both;
}

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

@keyframes menu-in {
  0%   { opacity: 0; transform: translateY(5px) scale(0.955); }
  58%  { opacity: 1; transform: translateY(0) scale(1.012); }
  100% { opacity: 1; transform: none; }
}

@keyframes menu-row-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.account-menu-item,
.save-menu-row {
  animation: menu-row-in 190ms var(--ease-out) backwards;
}
.account-menu-item:nth-child(n + 2),
.save-menu-row:nth-child(n + 2) { animation-delay: 14ms; }
.account-menu-item:nth-child(n + 3),
.save-menu-row:nth-child(n + 3) { animation-delay: 28ms; }
.account-menu-item:nth-child(n + 4),
.save-menu-row:nth-child(n + 4) { animation-delay: 42ms; }
.account-menu-item:nth-child(n + 5),
.save-menu-row:nth-child(n + 5) { animation-delay: 54ms; }
.account-menu-item:nth-child(n + 6),
.save-menu-row:nth-child(n + 6) { animation-delay: 64ms; }
.account-menu-item:nth-child(n + 7),
.save-menu-row:nth-child(n + 7) { animation-delay: 72ms; }

.account-menu::after { animation: fade-in 160ms var(--ease-out) 60ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .account-menu,
.account-menu::after,
.account-menu-item,
.save-menu,
.save-menu-row { animation: none; }
}

.palette-field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.palette-field .icon { font-size: 0.875rem; color: var(--ink); }
.palette-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 1rem;
  color: var(--ink);
}
.palette-field input:focus { outline: none; }

.palette-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-2) var(--s-2) var(--s-3);
}

.palette-group {
  padding: var(--s-3) var(--s-3) var(--s-1);
  font-size: 0.6875rem;
  font-weight: 570;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.45;
}

.palette-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: none;
  border-radius: var(--r-md);
  background: none;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.palette-row[aria-selected='true'] { background: var(--surface-3); }
.palette-row .icon { width: 1rem; font-size: 0.8125rem; color: var(--ink); }
.palette-row[aria-selected='true'] .icon { opacity: 1; }

.palette-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.palette-row-label { font-size: 0.9375rem; color: var(--ink); }
.palette-row-note { font-size: 0.75rem; color: var(--ink-faint); }

.palette-empty { padding: var(--s-6) var(--s-3); text-align: center; opacity: 0.6; }

.palette-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.6875rem;
  color: var(--ink-faint);
  opacity: 0.7;
}
.palette-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (max-width: 620px) {
  .overlay { padding-top: var(--s-6); }
  .palette-foot { display: none; }
  .palette { max-height: calc(100dvh - 8rem); }
  .palette-row { min-height: 2.75rem; }
}

.sheet {
  width: min(480px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5) var(--s-6) var(--s-6);
  animation: palette-in 180ms var(--ease-out) both;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.sheet-head h2 { font-size: 1.0625rem; font-weight: 610; }

.text-sheet-scrim { z-index: 180; padding-top: clamp(1rem, 8vh, 5rem); }
.text-sheet {
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  max-height: min(80vh, 48rem);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.text-sheet .sheet-head { margin-bottom: var(--s-3); }
.text-sheet .sheet-head h2 { min-width: 0; }
.text-sheet-do { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.text-sheet-say { color: var(--ink-muted); font-size: 0.875rem; }
.text-sheet-say:empty { display: none; }
.text-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--s-4);
  overflow: auto;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.text-sheet-body:empty { display: none; }
.text-sheet-body:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 2px; }

.shortcut-list { display: flex; flex-direction: column; }
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.shortcut-row:first-child { border-top: none; }
.shortcut-row span { color: var(--ink); opacity: 0.85; }

.composer-model .icon-mx { width: 1.125rem; height: 1.125rem; }

.slash-menu {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  max-height: 15rem;
  overflow-y: auto;
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.slash-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--menu-row-pad);
  border: none;
  border-radius: var(--menu-item-r);
  background: none;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: background var(--dur-fast) var(--ease);
}
.slash-name { font-size: 0.875rem; font-weight: 570; color: var(--ink); white-space: nowrap; }
.slash-arg {
  font-size: 0.75rem;
  color: var(--ink-faint);
  opacity: 0.55;
  white-space: nowrap;
}
.slash-hint {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  opacity: 0.55;
  text-align: right;
}

.memory-offer {
  display: grid;
  gap: 0.25rem;
  max-width: 28rem;
  margin-top: var(--s-4);
  padding: 0.875rem 1rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  animation: message-in 240ms var(--ease-out) both;
}

.memory-offer-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.125rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.memory-offer .icon-mx { flex: none; width: 0.9375rem; height: 0.9375rem; color: #000000; }
:root[data-theme='dark'] .memory-offer .icon-mx { color: #ffffff; }

.memory-offer-said {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 570;
  line-height: 1.45;
  color: var(--ink-strong);
}
.memory-offer-note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.memory-offer-do {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.memory-offer-do .btn-sm { height: 1.875rem; padding-inline: 0.875rem; border-radius: var(--r-pill); }

.memory-offer-until {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.memory-offer-until .memory-offer-date {
  width: auto;
  height: 1.875rem;
  padding: 0 0.5rem;
  border-color: var(--line);
  border-radius: 8px;
  background: transparent;
  font-size: 0.75rem;
  color: var(--ink);
}

.memory-ended {
  margin: 0 0 var(--s-2);
  animation: none;
}

.memory-offer[data-settled='true'] {
  padding: 0.25rem 0;
  background: none;
  border-color: transparent;
}
.memory-offer-settled {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.selection-capture {
  position: fixed;
  z-index: 90;
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.75rem;
  font-weight: 570;
  color: var(--ink);
  cursor: pointer;
  animation: toast-in 140ms var(--ease-out) both;
}
.composer-quote > .icon-mx,
.message-quote > .icon-mx {
  flex: none;
  width: 1rem;
  height: 1rem;
  min-width: 0;
  rotate: 180deg;
  color: var(--ink);
}
.composer-quote-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.composer-quote-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--r-pill);
  color: var(--ink-faint);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.composer-queued > .icon-mx {
  flex: none;
  width: 1rem;
  height: 1rem;
  min-width: 0;
  color: var(--ink-muted);
}
.composer-queued-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.composer-quote-clear .icon-mx { width: 1rem; height: 1rem; min-width: 0; }

.message-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  max-width: 68%;
  margin-bottom: 0.375rem;
  color: var(--ink-muted);
}
.message-quote-text {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.memory-import-head {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 570;
  color: var(--ink-muted);
}

.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.field-link {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  opacity: 0.7;
}
.field-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.input-affix .input::-webkit-credentials-auto-fill-button,
.input-affix .input::-webkit-strong-password-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  margin: 0;
  width: 0;
}
.strength-track {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.offline-status { opacity: 0.55; }

.profile-hero {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--s-5);
}
.profile-hero-main {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
}
.profile-hero-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}
.profile-avatar {
  --avatar-size: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--avatar-image, none) center / cover no-repeat, var(--avatar-face);
  color: var(--avatar-ink);
  font-size: 1.375rem;
  font-weight: 610;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 0 0 1px var(--avatar-edge),
    0 0 0 3px var(--surface),
    0 0 0 4px var(--line-fill);
}

.profile-avatar-wrap {
  position: relative;
  flex: none;
  display: inline-flex;
}
.profile-tint-toggle {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.75rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.profile-tint-toggle:hover {
  transform: scale(1.06);
  color: var(--ink);
  border-color: var(--ink);
}
.profile-tint-toggle[aria-expanded='true'] {
  color: var(--ink);
  border-color: var(--ink);
}
.profile-tint-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile-tints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.profile-tints-note {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.profile-tint-sets {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.profile-tint-set {
  padding: 0.3125rem 0.875rem;
  border: none;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.profile-tint-set:hover { color: var(--ink); }
.profile-tint-set[aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.profile-tint-set:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.profile-tint-row {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.profile-tint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: var(--avatar-image, none) center / cover no-repeat, var(--avatar-face);
  color: var(--avatar-ink);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 610;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--avatar-edge), 0 0 0 2px var(--surface-2);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.profile-tint:hover { transform: scale(1.12); }
.profile-tint[aria-checked='true'] {
  box-shadow:
    inset 0 0 0 1px var(--avatar-edge),
    0 0 0 2px var(--surface-2),
    0 0 0 4px var(--ink);
}
.profile-tint:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.profile-name {
  font-size: 1.375rem;
  font-weight: 610;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.profile-handle {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.is-blank { color: var(--ink-faint); font-weight: 500; }

.profile-hero-edit { margin-top: var(--s-3); }

.profile-hero-editor {
  width: 100%;
  padding: var(--s-6);
  background: var(--surface-2);
  text-align: left;
}

.profile-groups {
  column-width: 21rem;
  column-count: 2;
  column-gap: var(--s-5);
}
.profile-groups > * {
  break-inside: avoid;
  margin-bottom: var(--s-5);
}
.profile-groups > :last-child { margin-bottom: 0; }

.profile-groups:has(.profile-group.is-editing) {
  column-count: 1;
}

.profile-block {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.profile-block-head {
  padding: var(--s-4) var(--s-5) var(--s-3);
}
.profile-block-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.9375rem;
  font-weight: 610;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.profile-block-title .icon {
  flex: none;
  width: 1rem;
  color: var(--ink);
  font-size: 0.8125rem;
  text-align: center;
}
.profile-block-title .icon-mx {
  width: 1.125rem;
  height: 1.125rem;
  font-size: inherit;
}

.profile-block-note {
  margin-top: var(--s-1);
  max-width: 56ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.profile-group { border-top: 1px solid var(--line); }
.profile-group.is-editing { padding: var(--s-5); background: var(--surface-2); }

.profile-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-6);
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.profile-row + .profile-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--s-6);
  right: 0;
  height: 1px;
  background: var(--line);
}
.profile-row:hover { background: var(--surface-2); }
.profile-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.profile-row-label {
  flex: none;
  width: 11rem;
  max-width: 45%;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.profile-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  color: var(--ink);
}
.profile-value.is-blank {
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease);
}
.profile-row:hover .profile-value.is-blank,
.profile-row:focus-visible .profile-value.is-blank { color: var(--ink); }

.profile-row-chevron {
  flex: none;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  opacity: 0.6;
}
.profile-row:hover .profile-row-chevron { opacity: 1; }

.profile-row.is-stacked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: var(--s-2) var(--s-3);
}
.profile-row.is-stacked .profile-row-label { grid-area: 1 / 1; }
.profile-row.is-stacked .profile-row-label {
  width: auto;
  max-width: none;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.profile-row.is-stacked .profile-value {
  grid-area: 2 / 1;
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.profile-row.is-stacked .profile-row-chevron {
  grid-area: 1 / 2 / -1 / -1;
  align-self: center;
}

.profile-saved {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-faint);
  opacity: 0.8;
}
.profile-saved[hidden] { display: none; }

.profile-editor { margin-top: 0; }

@media (max-width: 640px) {
  .profile-hero-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5);
  }
  .profile-hero-text { align-items: center; }
  .profile-avatar { --avatar-size: 4.5rem; font-size: 1.5rem; }
  .profile-name { font-size: 1.5rem; }

  .profile-tints { padding-inline: var(--s-5); justify-content: center; }
  .profile-tints-note { flex-basis: 100%; text-align: center; }
  .profile-tint-row { justify-content: center; }

  .profile-block-head { padding: var(--s-5) var(--s-5) var(--s-4); }
  .profile-hero-editor,
  .profile-group.is-editing { padding: var(--s-5); }

  .profile-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--s-1) var(--s-3);
    padding-inline: var(--s-5);
  }
  .profile-row + .profile-row::before { left: var(--s-5); }
  .profile-row-label {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    font-size: 0.8125rem;
  }
  .profile-value {
    grid-area: 2 / 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .profile-row-chevron {
    grid-area: 1 / 2 / -1 / -1;
    align-self: center;
  }
}

.field-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink);
}

.section-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.save-menu {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  min-width: 10rem;
  padding: var(--menu-pad);
  gap: var(--menu-gap);
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--menu-r);
  background: var(--surface);
  box-shadow: var(--menu-shadow);
  transform-origin: bottom left;
  animation: menu-in 210ms var(--ease-out) both;
}
.save-menu-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--menu-row-pad);
  border: none;
  background: none;
  border-radius: var(--menu-item-r);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--ink);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.save-menu-row .icon { color: var(--nav-artifacts); font-size: 0.8125rem; width: 1rem; }

.artifact-preview {
  max-height: 32rem;
  overflow: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.artifact-preview h4,
.artifact-preview h5,
.artifact-preview h6 { margin: var(--s-4) 0 var(--s-2); font-weight: 610; }
.artifact-preview p { margin-bottom: var(--s-3); }
.artifact-preview ul,
.artifact-preview ol { margin: 0 0 var(--s-3) 1.25rem; }
.artifact-preview li { margin-bottom: 0.25rem; }
.artifact-preview blockquote {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-4);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-faint);
  font-style: italic;
}

.select-sm {
  height: 2rem;
  padding: 0 1.75rem 0 var(--s-3);
  font-size: 0.8125rem;
  border-radius: var(--r-md);
}

.chooser { display: contents; }

.chooser-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
}

.chooser-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  line-height: 1;
}
.chooser-trigger:hover { border-color: var(--ink-faint); }
.chooser-trigger[aria-expanded='true'] { border-color: var(--ink-muted); }
.chooser-trigger:disabled { cursor: not-allowed; }

.chooser-trigger { --chooser-edge: var(--line-strong); }
.chooser-trigger[data-quiet-focus]:focus { border-color: var(--chooser-edge); }
.chooser-trigger[data-quiet-focus]:focus:hover { border-color: var(--ink-faint); }
.chooser-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chooser-caret {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: -0.875rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 1px;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.chooser-trigger[aria-expanded='true'] .chooser-caret {
  transform: translateY(1px) rotate(225deg);
}

.chooser-menu {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.375rem;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--menu-shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: menu-in 210ms var(--ease-out) both;
}
.chooser-menu[hidden] { display: none; }
.chooser-menu:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .chooser-menu { animation: none; }
  .chooser-caret { transition: none; }
}

.chooser-option {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 570;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.chooser-option:hover,
.chooser-option.is-at { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.chooser-option:focus-visible { outline: none; }
.chooser-option:active { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.chooser-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chooser-option-check {
  flex: none;
  width: 0.375rem;
  height: 0.6875rem;
  margin: 0 0.25rem 0 auto;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.chooser-option[aria-selected='false'] .chooser-option-check { visibility: hidden; }

.chooser-option[aria-disabled='true'] {
  cursor: default;
  color: var(--ink-faint);
  opacity: 0.65;
}
.chooser-option[aria-disabled='true']:hover { background: none; }

.settings-modal .select-sm {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: auto;
  min-width: 8.5rem;
  height: 2rem;
  padding: 0 0.875rem 0 0.9375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--surface-2);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 570;
  line-height: 1;
  box-shadow: none;
}
.settings-modal select.select-sm {
  padding-right: 2rem;
  background-image: var(--select-chevron);
  background-position: right 0.875rem center;
  background-size: 0.625rem 0.375rem;
  background-repeat: no-repeat;
}
.settings-modal .select-sm:hover { border-color: var(--ink-faint); background-color: var(--surface-3); }
.settings-modal .select-sm:focus { border-color: var(--ink-muted); }
.settings-modal .chooser-trigger.select-sm[aria-expanded='true'] { border-color: var(--ink-muted); background-color: var(--surface-3); }
.settings-modal .select-sm:disabled { opacity: 0.55; background-color: var(--surface-2); }
.settings-modal .chooser-trigger.select-sm .chooser-caret {
  width: 0.375rem;
  height: 0.375rem;
  margin: 0;
  opacity: 0.55;
}
@media (hover: none) and (pointer: coarse) {
  .settings-modal .select-sm { height: 2.25rem; font-size: 1rem; }
}
@media (max-width: 640px) {
  .settings-modal .setting-control > .select-sm,
  .settings-modal .setting-control > .chooser > .select-sm { width: 100%; }
}

.pane { margin-top: var(--pane-gap); }

.page-body {
  padding-top: var(--s-10);
  padding-bottom: var(--s-16);
}
.page-body > .pane:first-child { margin-top: 0; }

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

html:has(body[data-page='onboarding']) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body[data-page='onboarding'] { height: 100%; overflow: hidden; }
.onboarding {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}
.onboarding-segment {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line-fill);
  overflow: hidden;
}
.onboarding-segment::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out), opacity 420ms var(--ease-out);
}

.onboarding-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(34rem, 100%);
  margin: 0 auto;
  padding: clamp(0.5rem, 3vh, 2rem) clamp(1rem, 4vw, 1.5rem);
  overflow: hidden;
}
.onboarding-aside a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.onboarding-tile .icon-mx { width: 24px; height: 24px; }

.onboarding-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
  overflow: hidden;
}
.onboarding-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}
.onboarding-list-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.onboarding-ask {
  min-height: 8rem;
  padding: var(--s-5);
  border-radius: var(--r-composer);
  background: var(--surface-2);
  font-size: 1rem;
  resize: none;
}

.onboarding-step-note {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 640px) {
  .onboarding-body { justify-content: safe center; overflow-y: auto; overscroll-behavior: contain; }
}

.protection-steps { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.protection-step {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr) auto;
  column-gap: var(--s-2);
  align-items: center;
  font-size: 0.875rem;
  color: var(--ink);
}
.protection-mark { width: 1.125rem; height: 1.125rem; color: var(--ink-faint); }
.protection-step[data-on='true'] .protection-mark { color: var(--positive); }
.protection-name { font-weight: 570; }
.protection-state { font-size: 0.8125rem; color: var(--ink-faint); }
.protection-step[data-on='true'] .protection-state { color: var(--positive); }
.protection-note { grid-column: 2 / -1; font-size: 0.8125rem; color: var(--ink-muted); }
.setting-reveal > summary { width: max-content; list-style: none; cursor: pointer; }
.setting-reveal > summary::-webkit-details-marker { display: none; }
.setting-reveal[open] > summary { margin-bottom: var(--s-3); }

.device-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.device-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.device-row[data-here='true'] {
  border-color: var(--line-fill);
  background: var(--surface-2);
}
.device-row:not([data-here='true']):hover { background: var(--surface-2); }

.device-mark { flex: none; font-size: 0.8125rem; opacity: 0.5; }
.device-mark.icon-mx { width: 1.0625rem; height: 1.0625rem; min-width: 0; }
.device-row[data-here='true'] .device-mark { opacity: 1; color: var(--accent); }

.device-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0.1rem; }
.device-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 570;
}
.device-when { font-size: 0.75rem; color: var(--ink-faint); }

.device-here {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 0.6875rem;
  font-weight: 610;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.device-out {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  font-size: 0.6875rem;
  font-weight: 610;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
}

.device-row[data-out='true'] .device-name { color: var(--ink-muted); }
.device-row[data-out='true'] .device-mark { color: var(--accent); opacity: 0.75; }

.device-forget,
.device-sign-out { flex: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.device-row:hover .device-forget,
.device-row:hover .device-sign-out,
.device-forget:focus-visible,
.device-sign-out:focus-visible { opacity: 1; }
.device-sign-out:hover { color: var(--accent); }
.upload-row .device-sign-out { opacity: 0.6; }
@media (hover: none) {
  .device-forget,
  .device-sign-out { opacity: 1; }
}

.device-empty {
  padding: var(--s-3);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.md-pre,
.md-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.message-body a { overflow-wrap: anywhere; }

.site-header .header-inner {
  padding-left: calc(var(--s-4) + env(safe-area-inset-left));
  padding-right: calc(var(--s-4) + env(safe-area-inset-right));
}
.container,
.footer-inner {
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}
.chat-bar,
.app-bar {
  padding-left: calc(var(--s-3) + env(safe-area-inset-left));
  padding-right: calc(var(--s-3) + env(safe-area-inset-right));
}
.rail { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }

@media (max-width: 700px) {
  .chat-empty h2 { font-size: clamp(1.375rem, 6vw, 1.75rem); }
}

@media (hover: none) and (pointer: coarse) {
  .rail-icon,
  .composer-model {
    min-width: 2.375rem;
    min-height: 2.375rem;
  }
  .rail-nav-link,
  .conversation-item { min-height: 2.75rem; }
  .conversation-item { gap: 0.125rem; }

  .account-menu-item { min-height: 2.25rem; }
  .btn-sm { min-height: 2.25rem; }

  .select-sm { height: 2.25rem; }

  a,
  button,
  .btn,
  [role='button'] { -webkit-tap-highlight-color: transparent; }
}

.btn,
.rail-icon,
.rail-new,
.rail-account,
.rail-nav-link,
.account-menu-item,
.conversation-item {
  -webkit-tap-highlight-color: transparent;
  transition-property: background, color, border-color, opacity, transform;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}

.btn:active:not(:disabled) { transform: scale(0.965); transition-duration: 40ms; }
.about-btn:active { transform: scale(0.965); transition-duration: 40ms; }

.rail-icon:active,
.rail-new:active,
.rail-account:active,
.rail-nav-link:active,
.account-menu-item:active,
.conversation-item:active {
  transform: scale(0.985);
  transition-duration: 40ms;
}

.no-anim,
.no-anim .icon,
.no-anim .icon-mx,
.no-anim .icon-svg {
  transition: none;
  will-change: auto;
}
.no-anim:hover,
.no-anim:active,
.no-anim:focus-visible,
.no-anim:hover .icon,
.no-anim:active .icon,
.no-anim:hover .icon-mx,
.no-anim:active .icon-mx,
.no-anim:hover .icon-svg,
.no-anim:active .icon-svg { transform: none; }

.is-rippling { overflow: hidden; }
.press-ripple {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.3;
  animation: press-spread 520ms var(--ease-out) forwards;
}
@keyframes press-spread {
  from { scale: 0; opacity: 0.3; }
  to { scale: 1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled),
  .about-btn:active,
  .rail-icon:active,
  .rail-new:active,
  .rail-account:active,
  .rail-nav-link:active,
  .account-menu-item:active,
  .conversation-item:active { transform: none; }
  .press-ripple { display: none; }
}

.record-page {
  --lg-line: 1px solid var(--line);
  --lg-detail: 21rem;
  --lg-r: 12px;

  --lg-bar-h: 3.5rem;
  --lg-head-h: 2rem;

  --lg-glass: color-mix(in srgb, var(--bg) 82%, transparent);
  --lg-blur: saturate(180%) blur(24px);

}

.record-page .page-body {
  max-width: none;
  padding-block: var(--s-5) var(--s-7);
}

@keyframes lg-settle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.usage-dash { display: grid; gap: var(--s-4); }

.usage-limits {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-5);
}
.usage-limit { display: grid; gap: var(--s-2); }
.usage-limit-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.usage-limit-name { margin: 0; font-size: 0.875rem; font-weight: 570; color: var(--ink); }
.usage-limit-count {
  font-size: 0.875rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.usage-limit-count { margin: 0; }
.usage-limit-count strong {
  margin-right: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 610;
  color: var(--ink-strong);
}
.usage-limit-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--ink-muted) 75%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
}
.credits-bar {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-fill);
  overflow: hidden;
}
.credits-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--ink-strong);
  transition: width 0.5s var(--ease);
}
.credits-bar[data-level='mid'] .credits-bar-fill { background: var(--meter-mid); }
.credits-bar[data-level='high'] .credits-bar-fill { background: var(--meter-high); }
@media (prefers-reduced-motion: reduce) {
  .credits-bar-fill { transition: none; }
}
.usage-limit-foot > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.credits-head { display: grid; gap: var(--s-1); }
.credits-figure {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
#usage-credits-figure {
  font-size: 2rem;
  font-weight: 610;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-strong);
}
.credits-unit { font-size: 0.875rem; color: var(--ink-muted); }
.credits-stat { margin: 0; font-size: 0.8125rem; color: var(--ink-faint); }
.credits-offers { display: grid; gap: var(--s-3); }
.credits-offers[hidden] { display: none; }
.credits-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.credits-offer-copy { min-width: 0; }
.credits-offer-title { margin: 0; font-size: 0.875rem; font-weight: 570; color: var(--ink-strong); }
.credits-offer-note { margin: 0.125rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); }
.credits-offer .btn { flex: none; }
.credits-note { margin: 0; padding-top: var(--s-1); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); }
.credits-note a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.usage-models-empty { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--ink-faint); }
.usage-limit[hidden] { display: none; }
@media (max-width: 560px) {
  .credits-offer { flex-direction: column; align-items: stretch; }
}

.usage-meter {
  display: flex;
  gap: 2.4px;
  height: 7px;
}
.usage-meter-cell {
  flex: 1 1 0;
  min-width: 0;
  background: var(--line-fill);
  opacity: 0.55;
}
.usage-meter.is-fitted { gap: var(--meter-gap); }
.usage-meter.is-fitted .usage-meter-cell { flex: 0 0 var(--meter-cell); }
.usage-meter-cell.is-lit { background: var(--ink-strong); opacity: 1; }
.usage-meter[data-level='low'] .usage-meter-cell.is-lit { background: var(--meter-low); }
.usage-meter[data-level='mid'] .usage-meter-cell.is-lit { background: var(--meter-mid); }
.usage-meter[data-level='high'] .usage-meter-cell.is-lit { background: var(--meter-high); }

.usage-trend { padding: var(--s-5) var(--s-5) var(--s-4); }
.usage-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.usage-trend-label {
  font-size: 0.6875rem;
  font-weight: 610;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.75;
}
.usage-trend-source {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.5;
}
.usage-trend-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-4);
}
.usage-trend-total { font-size: 0.875rem; color: var(--ink-muted); }
.usage-trend-total strong {
  margin-left: var(--s-2);
  font-size: 1.125rem;
  font-weight: 610;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums lining-nums;
}
.usage-range {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.usage-range-btn {
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.usage-range-btn:hover { color: var(--ink); }
.usage-range-btn.is-current {
  background: var(--surface);
  color: var(--ink-strong);
  font-weight: 570;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.usage-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.usage-chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  opacity: 0.55;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.usage-chart-body { position: relative; min-width: 0; }
.usage-chart-plot { height: 9.5rem; }
.usage-chart-svg { display: block; height: 100%; }
.usage-cell.is-empty { fill: var(--line-fill); opacity: 0.55; }
.usage-cell.is-lit { fill: var(--ink-strong); }

.usage-chart-hits {
  position: absolute;
  inset: 0 0 1.25rem;
  display: flex;
}
.usage-chart-hit {
  flex: 1 1 0;
  min-width: 0;
  cursor: default;
  border-radius: 3px;
}
.usage-chart-hit[data-on] { background: var(--surface-3); }
.usage-chart-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.usage-tip {
  position: absolute;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 3;
  min-width: 8rem;
  max-width: min(15rem, 100%);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.75rem;
  pointer-events: none;
}
.usage-tip[hidden] { display: none; }
.usage-tip-when { font-weight: 610; color: var(--ink-strong); margin-bottom: 2px; }
.usage-tip-total {
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums lining-nums;
}
.usage-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-width: 0;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.usage-tip-total + .usage-tip-row { margin-top: var(--s-2); }
.usage-tip-row + .usage-tip-row { margin-top: 2px; }
.usage-tip-count { flex: none; }

.usage-chart-foot {
  display: flex;
  height: 1.25rem;
  align-items: flex-end;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  opacity: 0.6;
}
.usage-chart-tick {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  overflow: visible;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .usage-range { margin-left: 0; }
  .usage-trend-bar { gap: var(--s-3); }
  .usage-chart-plot { height: 7.5rem; }
}

a,
button,
summary,
label,
input,
select,
textarea,
[role='button'],
[role='tab'],
[role='menuitem'],
[role='option'] {
  touch-action: manipulation;
}

.chat-scroll,
.conversation-list,
.rail,
.settings-modal-main,
.account-menu { overscroll-behavior: contain; }

.chat-scroll,
.conversation-list,
.settings-modal-main,
.md-pre,
.md-table-wrap { -webkit-overflow-scrolling: touch; }

.setting-note,
.setting-label,
.card-title { overflow-wrap: anywhere; }

@media (hover: none) and (pointer: coarse) {
  .brand:hover,
  .usage-chart-hit[data-on] { background: none; }

  .usage-range-btn { min-height: 2.25rem; }
}

@media (max-width: 820px) {
  .settings-modal-nav {
    padding-top: calc(var(--s-3) + env(safe-area-inset-top));
    padding-left: calc(var(--s-4) + env(safe-area-inset-left));
    padding-right: calc(var(--s-4) + env(safe-area-inset-right));
  }
  .settings-modal-main {
    padding-left: calc(var(--s-4) + env(safe-area-inset-left));
    padding-right: calc(var(--s-4) + env(safe-area-inset-right));
    padding-bottom: calc(var(--s-10) + env(safe-area-inset-bottom));
  }
  .settings-close {
    top: calc(var(--s-3) + env(safe-area-inset-top));
    right: calc(var(--s-3) + env(safe-area-inset-right));
    width: 2.5rem;
    height: 2.5rem;
  }
  .settings-modal-title { padding-right: 2.5rem; font-size: 1.125rem; }
  .settings-scrim,
  :root[data-theme='dark'] .settings-scrim {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .settings-modal,
  :root[data-theme='dark'] .settings-modal,
  .settings-modal-nav,
  .settings-modal-main { background: var(--bg); }
  .settings-modal { box-shadow: none; }
  .settings-modal[data-view='group'] .settings-modal-main { padding-top: calc(var(--s-5) + env(safe-area-inset-top)); }
}

.rail-mini {
  padding-top: calc(var(--s-3) + env(safe-area-inset-top));
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
}

@media (max-height: 460px) and (orientation: landscape) {
  .usage-chart-plot { height: 6rem; }
  .settings-modal { height: 100%; }
}

@media (hover: none) and (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  textarea,
  select,
  .input,
  .textarea,
  .select { font-size: 1rem; }
}

.code-lang {
  font-size: 0.6875rem;
  font-weight: 610;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.code-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 570;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.code-action[data-done='true'] span { display: inline-block; animation: done-pop 260ms var(--ease-out); }
@keyframes done-pop {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .code-action[data-done='true'] span { animation: none; }
}
.code-action .icon-mx { width: 0.875rem; height: 0.875rem; }

.code-block .md-pre code {
  display: block;
  min-width: 100%;
  width: max-content;
  line-height: 1.65;
}
.code-block .md-pre::-webkit-scrollbar-track { background: transparent; }
.code-block .md-pre::-webkit-scrollbar-thumb {
  background: var(--line-fill);
  border-radius: 999px;
}

.code-block ::selection { background: #b3d7ff; color: #0d0d0d; }

:root {
  --hl-com: #6a737d;
  --hl-str: #0a7d33;
  --hl-esc: #9a3412;
  --hl-num: #9a3412;
  --hl-lit: #0550ae;
  --hl-key: #cf222e;
  --hl-fn: #6639ba;
  --hl-type: #953800;
  --hl-prop: #0550ae;
  --hl-tag: #0a7d33;
  --hl-attr: #6639ba;
  --hl-op: #cf222e;
  --hl-punc: #57606a;
}

:root[data-theme='dark'] {
  --hl-com: #8b949e;
  --hl-str: #7ee787;
  --hl-esc: #ffa657;
  --hl-num: #f0883e;
  --hl-lit: #79c0ff;
  --hl-key: #ff7b72;
  --hl-fn: #d2a8ff;
  --hl-type: #ffd580;
  --hl-prop: #79c0ff;
  --hl-tag: #7ee787;
  --hl-attr: #d2a8ff;
  --hl-op: #ff7b72;
  --hl-punc: #8b949e;
}

.hl-com  { color: var(--hl-com); font-style: italic; }
.hl-str  { color: var(--hl-str); }
.hl-num  { color: var(--hl-num); }
.hl-lit  { color: var(--hl-lit); }
.hl-key  { color: var(--hl-key); }
.hl-fn   { color: var(--hl-fn); }
.hl-prop { color: var(--hl-prop); }
.hl-attr { color: var(--hl-attr); }
.hl-punc { color: var(--hl-punc); }

.message-action .icon-mx { width: 0.875rem; height: 0.875rem; }

.chat > *:not(.code-backdrop) { position: relative; z-index: 1; }

.chat > .chat-bar { z-index: 20; }

.md-image {
  margin: 0.75rem 0;
  max-width: min(420px, 100%);
  position: relative;
}
.md-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.md-image-save {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-size: 0.75rem;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease;
}
.md-image:hover .md-image-save,
.md-image-save:focus-visible { opacity: 1; }
.md-image-save:disabled { cursor: default; opacity: 0.6; }
.md-image-load {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.md-image-load:focus-visible { color: var(--ink); border-color: var(--ink-faint); }
@media (hover: none) {
  .md-image-save { opacity: 1; }
}

#chat { display: flex; flex-direction: column; min-height: 0; }

#chat { position: relative; }

#chat > div:empty:not(.chat-scroll):not(.drop-veil):not(.composer-dock) { display: none; }

.eco-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--s-5);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--line);
}
.eco-row.is-off { opacity: 0.5; }
.eco-row.is-waiting { display: block; min-height: 6.5rem; }

.eco-do {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.125rem;
  margin-top: 0.4375rem;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink-strong);
  color: var(--bg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.eco-do:disabled { opacity: 0.4; cursor: default; }
.eco-do:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.eco-do-quiet { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.eco-do-quiet:not(:disabled):hover { background: var(--surface-2); color: var(--ink-strong); }

.okeys-label {
  margin: 0;
  padding: 0 0 var(--s-3);
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink-muted);
}
.okeys {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.okey { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.okey-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-4);
}
.okey-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-strong);
}
.okey-mark .provider-logo { width: 1.125rem; height: 1.125rem; }
.okey-id { min-width: 0; }
.okey-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 610;
  line-height: 1.35;
  color: var(--ink-strong);
}
.okey-status { font-size: 0.75rem; font-weight: 570; color: var(--ink-faint); }
.okey-status.is-ok { color: var(--positive); }
.okey-status.is-bad { color: var(--danger); }
.okey-status.is-warn { color: var(--meter-near); }
.okey-detail {
  margin: 0.125rem 0 0;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.okey-side { display: flex; align-items: center; gap: var(--s-1); }
.okey-act {
  height: 2rem;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.okey-act:not(:disabled):hover { background: var(--surface-2); color: var(--ink-strong); }
.okey-act-danger:not(:disabled):hover { background: var(--danger-soft); color: var(--danger); }
.okey-act:disabled { opacity: 0.4; cursor: default; }
.okey-act:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.okey-add { margin-top: 0; }
.okey-body { margin-top: var(--s-3); padding-left: calc(2.25rem + var(--s-4)); }
.okey-problem {
  max-width: 34rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--meter-near);
}
.okey-problem.is-bad { color: var(--danger); }
.okey-problem + .okey-model { margin-top: var(--s-3); }
.okey-model { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.okey-model-label { font-size: 0.8125rem; color: var(--ink-muted); }
.okey-select { width: auto; min-width: 12rem; max-width: 100%; }
.okey-model + .okey-keys { margin-top: var(--s-2); }
.okey-keys { margin: 0; padding: 0; list-style: none; }
.okey-key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--s-4);
  padding: var(--s-2) 0;
}
.okey-key + .okey-key { border-top: 1px solid var(--line); }
.okey-key-id { min-width: 0; }
.okey-key-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
  margin: 0;
  font-size: 0.875rem;
  font-weight: 570;
  color: var(--ink-strong);
}
.okey-key .okey-problem { margin-top: var(--s-1); }
.okey-keys + .okey-form-note { margin-top: var(--s-3); }
.okey-keys ~ .okey-form, .okey-model ~ .okey-form { margin-top: var(--s-4); }
.okey-form { max-width: 34rem; }
.okey-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.okey-form-row + .okey-form-row { margin-top: var(--s-2); }
.okey-name-input { font-family: inherit; }
.okey-input {
  flex: 1 1 14rem;
  min-width: 0;
  height: 2.25rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
}
.okey-save { min-height: 2.25rem; margin-top: 0; }
.okey-form-note { margin: var(--s-2) 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); }
.okey-form-note a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .okey-head { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s-3); }
  .okey-side { grid-column: 2; margin-left: calc(var(--s-3) * -1); }
  .okey-side:has(.okey-add) { margin-left: 0; }
  .okey-body { padding-left: 0; }
  .okey-key { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
  .okey-key .okey-side { grid-column: 1; margin-left: calc(var(--s-3) * -1); }
}

@media (max-width: 640px) {
  .eco-row { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-6) 0; }
  .eco-row .eco-do { grid-column: 2; justify-self: start; margin-top: var(--s-5); }
}

.link-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--lg-r, var(--r-md));
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.message-body .link-card,
.message-body .link-card:hover,
.message-body .link-card:focus-visible,
.link-card,
.link-card * {
  text-decoration: none;
  color: inherit;
}
.link-card-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3125rem;
  background: var(--surface-3);
}
.link-card-mark img:not([src]),
.link-card-mark img[src=''] { display: none; }

li > .link-card { margin-block: var(--s-1); }

.panel-lead { border-color: var(--line-strong); background: var(--surface-3); }

.settings-section-head {
  padding: var(--s-8) var(--s-2) var(--s-3);
}
.settings-section-head h3 { margin: 0; }
.settings-section-note {
  margin-top: var(--s-1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink-muted) 65%, transparent);
}

.memory-tally { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; }
.memory-tally[hidden] { display: none; }
@media (max-width: 640px) {
  .settings-section-head { padding-inline: var(--s-1); }
}

.record-page {
  --lg-r: 18px;
  --lg-row-gap: 0.375rem;
  --lg-detail: 22rem;
  --lg-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 30px -22px rgba(0, 0, 0, 0.28);
  --lg-lift-open: 0 2px 4px rgba(0, 0, 0, 0.05), 0 22px 44px -26px rgba(0, 0, 0, 0.34);
  --lg-ring: 0 0 0 1.5px var(--ink-strong);
}

.record-page .page-body {
  position: relative;
  padding-block: var(--s-4) var(--s-7);
}
.composer-mode .icon-mx { width: 1.125rem; height: 1.125rem; color: var(--ink); }

.mode-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.mode-option:hover { background: var(--surface-2); }
.mode-option:focus-visible { background: var(--surface-2); outline: 2px solid var(--ink); outline-offset: -2px; }
.mode-option-mark { flex: none; width: 1.375rem; height: 1.375rem; color: var(--ink); }
.mode-option-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mode-option-name { font-size: 0.8125rem; font-weight: 570; line-height: 1.3; }
.mode-option-note {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--ink-muted);
}

.mode-option[aria-checked='true'] { background: var(--surface-2); }
.mode-head {
  margin: 0;
  padding: 0.375rem 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 570;
  color: var(--ink-faint);
}
.mode-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 0.1875rem;
  padding-top: 0.1875rem;
  border-top: 1px solid var(--line);
}
.mode-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mode-option-add { text-decoration: none; }
.mode-option-add .mode-option-mark { color: var(--ink-faint); }
.provider-logo { flex: none; }
.provider-logo-openai,
.provider-logo-grok { color: var(--ink-strong); }
:root[data-theme='dark'] .provider-logo-openrouter { --openrouter-mark: #C8FF00; }
.composer-model.composer-voice .icon-mx,
:root[data-theme] .composer-model.composer-voice .icon-mx { width: 1.125rem; height: 1.125rem; color: #ffffff; }
.composer-voice[data-state='listening']::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--ink-strong);
  opacity: 0;
  animation: voice-pulse 1.6s var(--ease-out) infinite;
}
@keyframes voice-pulse {
  from { opacity: 0.55; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .composer-voice[data-state='listening']::after { animation: none; opacity: 0.4; }
}
.composer-mode .icon-mx { width: 0.9375rem; height: 0.9375rem; }
.composer-mode .provider-logo { width: 0.9375rem; height: 0.9375rem; }

body[data-page='assistant'] .toast-region { top: calc(3.25rem + var(--s-2)); bottom: auto; }
body[data-page='assistant'] .toast:not([data-leaving]) { animation-name: toast-drop; }
@keyframes toast-drop {
  from { opacity: 0; transform: translateY(-12px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

.message-assistant .message-body {
  width: 100%;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: normal;
}
.message-assistant .message-body > * + * { margin-top: 1rem; }
.message-assistant .message-body strong { color: inherit; font-weight: 610; }
.message-assistant .message-body em { font-style: italic; }

.message-assistant .message-body .md-h {
  margin-bottom: 0;
  color: var(--ink);
  font-weight: 610;
  letter-spacing: normal;
}
.message-assistant .message-body h3.md-h { margin-top: 2rem; font-size: 1.75rem; line-height: 1.3; }
.message-assistant .message-body h4.md-h { margin-top: 2rem; font-size: 1.5rem; line-height: 1.35; }
.message-assistant .message-body h5.md-h { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.4; }
.message-assistant .message-body h6.md-h { margin-top: 1.25rem; font-size: 1rem; color: var(--ink); }
.message-assistant .message-body .md-h + * { margin-top: 0.5rem; }
.message-assistant .message-body .md-rule + .md-h,
.message-assistant .message-body > .md-h:first-child { margin-top: 0; }

.message-assistant .message-body .md-list {
  display: block;
  padding-left: 1.625rem;
}
.message-assistant .message-body ul.md-list { list-style: disc; }
.message-assistant .message-body ol.md-list { list-style: decimal; padding-left: 1.625rem; }
.message-assistant .message-body .md-list > li { padding-left: 0.375rem; }
.message-assistant .message-body .md-list > li + li { margin-top: 0.5rem; }
.message-assistant .message-body .md-list li::before { content: none; }
.message-assistant .message-body .md-list li::marker { color: var(--ink); }
.message-assistant .message-body ol.md-list li::marker { font-variant-numeric: tabular-nums; }
.message-assistant .message-body .md-list .md-list { margin-top: 0.5rem; }
.message-assistant .message-body .md-list .md-list > li { color: var(--ink); }
.message-assistant .message-body ul.md-list ul.md-list { list-style: circle; }

.message-assistant .message-body .md-rule {
  margin-block: 1.75rem;
  border: none;
  border-top: 1px solid var(--line);
}
.message-assistant .message-body .md-rule + * { margin-top: 0; }

.message-assistant .message-body .md-quote {
  padding-left: 1rem;
  border-left: 3px solid var(--line-strong);
  color: var(--ink);
}

.message-assistant .message-body code {
  padding: 0.15em 0.4em;
  border: none;
  border-radius: 0.375rem;
  background: var(--surface-3);
  font-size: 0.875em;
  font-weight: 570;
}
.message-assistant .message-body .md-pre code { padding: 0; background: none; font-weight: 400; }
.message-body .md-pre code,
.message-body .md-pre code * {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Consolas, Menlo, monospace;
  font-weight: 400;
  letter-spacing: 0;
}

.message-assistant .message-body .md-table th { color: var(--ink); font-size: 0.875rem; letter-spacing: normal; }
.message-assistant .message-body .md-table td { border-bottom-color: var(--line); }

.message-assistant .message-body a:not(.md-cite):not(.link-card):not(.source-row) {
  color: var(--link);
  font-weight: 570;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  text-underline-offset: 3px;
}
.message-assistant .message-body a:not(.md-cite):not(.link-card):not(.source-row):hover { text-decoration-color: var(--link); }

.message-body a.md-cite {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 1.25rem;
  margin-inline: 0.25rem 0;
  padding: 0 0.5rem;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 570;
  line-height: 1;
  vertical-align: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}
.message-body a.md-cite:hover,
.message-body a.md-cite:focus-visible { background: var(--ink); color: var(--bg); }
.source-mark::before {
  content: attr(data-letter);
  font-size: 0.5625rem;
  font-weight: 610;
  color: var(--ink-muted);
}
.source-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.source-cite .icon-mx { width: 0.9375rem; height: 0.9375rem; min-width: 0; }

.message-assistant .message-actions { gap: 0.125rem; margin-top: 0.5rem; }
.message-assistant .message-action {
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.5rem;
  color: var(--ink);
}
.message-assistant .message-action:hover { background: var(--surface-2); }
.message-assistant .message-action .icon { font-size: 0.875rem; }
.message-assistant .message-action .icon-mx { width: 1rem; height: 1rem; }
.message-assistant .message-action > span:not(.icon):not(.mxi) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.message-assistant:last-child .message-actions { opacity: 1; }
.message-assistant .message-action[aria-pressed='true'] .icon-mx path { fill: currentColor; }
.message-assistant:last-child .message-time { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.message-assistant:last-child:hover .message-time,
.message-assistant:last-child .message-actions:focus-within .message-time { opacity: 1; }

.mp {
  --mp-edge: var(--line-strong);
  --mp-rule: var(--line);
  max-width: 48rem;
  margin-inline: auto;
  padding: var(--s-10) 0 var(--s-16);
}
.mp-title {
  margin: 0 0 var(--s-10);
  font-size: 1.75rem;
  font-weight: 570;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.mp-section + .mp-section { margin-top: var(--s-12); }
.mp-heading { margin: 0; font-size: 1.0625rem; font-weight: 610; line-height: 1.4; color: var(--ink-strong); }
.mp-sub { margin: var(--s-1) 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-muted); }
.mp-section > .mp-sub,
.mp-head { margin-bottom: var(--s-4); }

.mp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.mp-tools { display: flex; align-items: center; gap: var(--s-2); }

.mp-box {
  padding: 0 var(--s-5);
  border: 1px solid var(--mp-edge);
  border-radius: 16px;
}
.mp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 4.5rem;
  padding: var(--s-4) 0;
}
.mp-row + .mp-row,
.mp-row + .mp-foot { border-top: 1px solid var(--mp-rule); }
.mp-copy { min-width: 0; flex: 1; }
.mp-label { margin: 0; font-size: 0.9375rem; font-weight: 570; line-height: 1.45; color: var(--ink-strong); }
.mp-note { margin: 0.125rem 0 0; max-width: 40rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-muted); }
.mp-foot { margin: 0; padding: var(--s-4) 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-muted); }

.mp-text { font-weight: 500; overflow-wrap: anywhere; white-space: pre-wrap; }
.mp-memory { min-height: 4rem; padding: var(--s-3) 0; }
.mp-pinned { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.375rem; color: var(--ink); font-weight: 570; vertical-align: top; }
.mp-pinned::after { content: '·'; margin-left: 0.125rem; color: var(--ink-faint); font-weight: 500; }
.mp-pinned .icon-mx { width: 0.8125rem; height: 0.8125rem; min-width: 0; }

.mp-switch {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.mp-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 160ms var(--ease-out);
}
.mp-switch[aria-checked='true'] { background: var(--ink); }
.mp-switch[aria-checked='true']::after { transform: translateX(1rem); background: var(--bg); }
.mp-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.mp-pill {
  flex: none;
  min-height: 2.5rem;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-strong);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out);
}
.mp-pill:hover { background: color-mix(in srgb, var(--ink) 14%, var(--surface-3)); }
.mp-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.mp-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 13rem;
  height: 2.5rem;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-faint);
  cursor: text;
}
.mp-search .icon-mx { width: 1rem; height: 1rem; min-width: 0; flex: none; }
.mp-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}
.mp-search input::placeholder { color: var(--ink-faint); }
.mp-search input:focus { outline: none; }
.mp-search:focus-within { box-shadow: 0 0 0 2px var(--ink); }

.mp-pick {
  appearance: none;
  height: 2.5rem;
  padding: 0 2.25rem 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--surface-3);
  color: var(--ink-strong);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
select.mp-pick {
  background-image: var(--select-chevron);
  background-position: right 0.95rem center;
  background-size: 0.625rem 0.375rem;
  background-repeat: no-repeat;
}
.mp-pick.chooser-trigger { gap: var(--s-3); padding-right: 2.125rem; line-height: 1; }
.mp-pick[hidden] { display: none; }
.mp-pick:hover { background-color: color-mix(in srgb, var(--ink) 14%, var(--surface-3)); }
.mp-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.mp-do { display: flex; flex: none; gap: 0.125rem; opacity: 0; transition: opacity 120ms var(--ease-out); }
.mp-memory:hover .mp-do,
.mp-memory:focus-within .mp-do { opacity: 1; }
@media (hover: none) {
  .mp-do { opacity: 1; }
}
.mp-tool {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-strong);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out);
}
.mp-tool .icon-mx { width: 1.0625rem; height: 1.0625rem; min-width: 0; }
.mp-tool:hover { background: var(--surface-3); }
.mp-tool.is-danger,
.mp-tool.is-danger .icon { color: var(--icon-delete); }
.mp-tool:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.mp-more { position: relative; flex: none; display: none; }
.mp-more-toggle[aria-expanded='true'] { background: var(--surface-3); color: var(--ink-strong); }
.mp-more-menu {
  top: calc(100% + 0.25rem);
  bottom: auto;
  left: auto;
  right: 0;
  width: auto;
  min-width: 9.5rem;
  transform-origin: top right;
}
.mp-more-menu .account-menu-item .icon { color: var(--ink-strong); }
.mp-more-menu .is-danger,
.mp-more-menu .is-danger .icon { color: var(--icon-delete); }
@media (max-width: 640px), (hover: none) {
  .mp-do { display: none; }
  .mp-more { display: block; }
}

.mp-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mp-open .mp-label,
.mp-open .mp-note { display: block; }
.mp-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.mp-memory.is-open {
  margin-inline: calc(var(--s-3) * -1);
  padding-inline: var(--s-3);
  border-radius: 12px;
  background: var(--surface-2);
}
.mp-memory.is-open .mp-do { opacity: 1; }

body.is-previewing .mp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-8);
  align-items: start;
}
body.is-previewing .mp { max-width: none; margin-inline: 0; }

.mp-preview {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-h) - var(--s-8));
  margin-top: var(--s-10);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
}
.mp-preview[hidden] { display: none; }
.mp-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.mp-preview .mp-preview-do { display: flex; opacity: 1; margin-right: calc(var(--s-2) * -1); }
.mp-preview-body { flex: 1; min-height: 0; overflow: auto; padding: var(--s-5); }
.mp-preview-body:has(> .mp-preview-frame) { padding: 0; overflow: hidden; }
.mp-preview-frame { display: block; width: 100%; height: 100%; border: 0; }
.mp-preview-picture img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.mp-preview-code { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1099px) {
  body.is-previewing .mp-split { display: block; }
  .mp-preview {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 40;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}

.mp-empty { padding: var(--s-10) 0; text-align: center; }
.mp-empty .mp-note { margin-inline: auto; max-width: 24rem; }

@media (max-width: 640px) {
  .mp { padding-top: var(--s-6); }
  .mp-title { margin-bottom: var(--s-8); }
  .mp-box { padding: 0 var(--s-4); }
  .mp-row { gap: var(--s-4); }
  .mp-memory { align-items: flex-start; }
  .mp-do { margin-right: calc(var(--s-2) * -1); }
  .mp-tools { width: 100%; }
  .mp-search { flex: 1; width: auto; min-width: 0; }
  .mp-pick { flex: none; max-width: 10rem; text-overflow: ellipsis; }
}

.engine-mark { flex: none; color: var(--ink); }
.composer-mode .icon-mx { width: 1rem; height: 1rem; }
.council-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 0.1875rem;
}
.council-block + .mode-section { margin-top: 0; padding-top: 0; border-top: 0; }

.mode-modes,
.mode-models { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mode-modes:empty { display: none; }
.mode-modes:not(:empty) + .mode-models {
  margin-top: 0.1875rem;
  padding-top: 0.1875rem;
  border-top: 1px solid var(--line);
}
.mode-option-tick { flex: none; width: 1rem; height: 1rem; color: var(--ink); }
.council-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.council-toggle:hover { background: var(--surface-2); }
.council-toggle:focus-visible { background: var(--surface-2); outline: 2px solid var(--ink); outline-offset: -2px; }
.council-switch {
  position: relative;
  flex: none;
  width: 1.875rem;
  height: 1.125rem;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color 160ms var(--ease-out);
}
.council-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 160ms var(--ease-out);
}
.council-toggle[aria-checked='true'] .council-switch { background: var(--ink); }
.council-toggle[aria-checked='true'] .council-switch::after { transform: translateX(0.75rem); background: var(--bg); }

.seat-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 0.3125rem;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--bg);
}
.seat-mark.is-seated { background: var(--ink); box-shadow: none; }
.seat-mark .icon.seat-mark-tick { width: 0.75rem; height: 0.75rem; color: inherit; }
.mode-option-seat[aria-checked='true'] { background: none; }
.mode-option-seat[aria-checked='true']:hover { background: var(--surface-2); }
.mode-option[aria-disabled='true'] { cursor: default; opacity: 0.45; }
.mode-option[aria-disabled='true']:hover { background: none; }
.mode-taste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin: 0.25rem 0 0;
  padding: 0.4375rem 0.5rem 0.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.mode-taste-toggle {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mode-taste-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.mode-own-note {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.5rem 0.375rem;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
@keyframes council-breathe { 50% { opacity: 0.45; } }
.council-text { font-size: 0.875rem; color: var(--ink-muted); }
.council-diff ins { border-radius: 3px; background: var(--positive-soft); color: var(--positive); text-decoration: none; }
.council-diff del { margin-right: 0.125rem; border-radius: 3px; background: var(--danger-soft); color: var(--danger); text-decoration: line-through; }
.composer-target-option .icon,
.composer-target-option .engine-mark,
.composer-target-option svg { flex: none; width: 0.8125rem; height: 0.8125rem; color: inherit; }

:root :is(p, dd, td, figcaption, blockquote, .consent-copy, .onboarding-aside) a:not([class]) {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}
:root :is(p, dd, td, figcaption, blockquote, .consent-copy, .onboarding-aside) a:not([class]):hover { text-decoration-color: var(--link); }

.settings-modal :is(.btn:not(.btn-icon), .eco-do, .okey-act) {
  height: 2.25rem;
  min-height: 2.25rem;
  padding-block: 0;
  padding-inline: 1rem;
  font-size: 0.8125rem;
}
.settings-modal :is(.pz-seg, .usage-range) { box-sizing: border-box; height: 2.25rem; }
.settings-modal :is(.pz-seg-btn, .usage-range-btn) { height: 100%; padding-block: 0; }
.mfa-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.mfa-setup-qr {
  width: 10rem;
  height: 10rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.mfa-setup-key {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}

.spend { margin-top: var(--s-10); }
.spend[hidden] { display: none; }
.spend-note { max-width: 54ch; margin: var(--s-3) 0 0; padding: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); }
.spend-note:empty { display: none; }
.spend-note + .spend-note { margin-top: var(--s-2); }
.spend-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.spend-bar .okeys-label { padding: 0; }
.spend-nav { display: inline-flex; align-items: center; gap: var(--s-1); }
.spend-week { min-width: 5.5rem; font-size: 0.8125rem; font-weight: 570; color: var(--ink-muted); text-align: center; }
.spend-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.spend-step:not(:disabled):hover { background: var(--surface-2); color: var(--ink-strong); }
.spend-step:disabled { opacity: 0.3; cursor: default; }
.spend-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.spend-step .icon, .spend-step .icon-mx { width: 0.875rem; height: 0.875rem; min-width: 0; }
.spend-head { padding: var(--s-4) 0 var(--s-5); }
.spend-total-cost {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 610;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.spend-total-stat { margin: var(--s-1) 0 0; font-size: 0.8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.spend-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
}
.spend-split dt { font-size: 0.6875rem; color: var(--ink-muted); opacity: 0.75; }
.spend-split dd { margin: 0.125rem 0 0; font-size: 0.875rem; font-weight: 570; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.spend-empty { margin: 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-faint); }
.spend-providers, .spend-models { margin: 0; padding: 0; list-style: none; }
.spend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 4rem 5.5rem;
  align-items: center;
  column-gap: var(--s-3);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.spend-row-head {
  padding-bottom: var(--s-2);
  font-size: 0.6875rem;
  color: var(--ink-muted);
  opacity: 0.75;
}
.spend-provider { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.spend-row-provider { color: var(--ink-strong); }
.spend-row-model { padding: 0.25rem 0 0.25rem calc(1.25rem + var(--s-3)); color: var(--ink-faint); }
.spend-models:not(:empty) { margin-top: var(--s-2); }
.spend-row-id { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.spend-row-model .spend-row-id { flex-direction: column; align-items: flex-start; gap: 0; }
.spend-row-text { display: flex; flex-direction: column; min-width: 0; }
.spend-row-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spend-row-model .spend-row-name { color: var(--ink-muted); }
.spend-provider-name { font-size: 0.875rem; font-weight: 570; line-height: 1.4; }
.spend-row-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--ink-faint); }
.spend-cell { text-align: right; }
.spend-row-provider .spend-cost { font-weight: 570; }
.spend-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--ink-strong); }
.spend-mark .provider-logo { width: 1.125rem; height: 1.125rem; }

@media (max-width: 560px) {
  .spend-row { grid-template-columns: minmax(0, 1fr) 3.25rem 3.25rem 4.75rem; column-gap: var(--s-2); }
  .spend-row-model { padding-left: 0; }
}

.auth-captcha,
.captcha-float {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.split-view.is-dropped { text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.usage-pop-bar[data-level='high'] > span { background: var(--danger); }
.usage-pop-bar[data-level='muted'] > span { background: var(--ink); opacity: 0.35; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rail-new-mark,
  .rail-nav-link .rail-mark,
  .rail-mini-icon .rail-mark,
  .composer-attach .icon-mx,
  .composer-send .icon-mx,
  .jump-latest .icon-mx,
  #rail-mini-new .icon-mx {
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  :is([data-key='projects'], [data-key='artifacts'], [data-key='memory'], .rail-new):hover:not(:active) .rail-mark,
  #rail-mini-new:hover:not(:active) .icon-mx { transform: translateY(-1.5px); }
  [data-key='feedback']:hover:not(:active) .rail-mark { transform: rotate(8deg) scale(1.06); }
}

:root:not([data-theme='dark']) .rail-group,
:root:not([data-theme='dark']) .rail-empty { opacity: 1; }
:root:not([data-theme='dark']) { --composer-fill: #efefec; }
:root:not([data-theme='dark']) .rail-avatar { --avatar-edge: rgba(0, 0, 0, 0.14); }

@media (prefers-reduced-motion: no-preference) {
  :is(.fact-report, .council-discussion, .setting-reveal) { interpolate-size: allow-keywords; }
  :is(.fact-report, .council-discussion, .setting-reveal)::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size 260ms var(--ease-out), opacity 200ms var(--ease), content-visibility 260ms allow-discrete;
  }
  :is(.fact-report, .council-discussion, .setting-reveal)[open]::details-content { block-size: auto; opacity: 1; }
}
:root[data-theme] .composer-model.composer-mode .provider-logo-openrouter { --openrouter-mark: #C8FF00; }
:root[data-theme='dark'] .composer-model.composer-mode .provider-logo-openrouter { --openrouter-mark: #7624F4; }

@media (hover: none) and (pointer: coarse) {
  [data-desktop-only] { display: none !important; }
}
.mode-title {
  margin: 0;
  padding: 0.5rem 0.75rem 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink-faint);
}

.site-notice {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 1.125rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  line-height: 1.35;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.site-notice[data-tone='warning'] { background: var(--danger-soft); color: var(--danger); }
.site-notice p { margin: 0; }
.site-notice-close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.site-notice-close:hover { opacity: 1; }