/* Shared display preferences. Both controls work without changing a conversation. */
body {
  isolation: isolate;
  transition:
    background-color 220ms ease,
    color 220ms ease;
}
.settings-dialog {
  max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.preference-row {
  flex-wrap: wrap;
  gap: 14px;
}
.preference-row > span {
  flex: 1 1 145px;
}
.preference-row small {
  line-height: 1.6;
}
.settings-toggle {
  display: flex;
  flex-shrink: 0;
  gap: 3px;
  padding: 4px;
  border-radius: 13px;
  border: 1px solid #b8a5de24;
  background: #070b1555;
}
.settings-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  min-width: 68px;
  min-height: 44px;
  padding: 0 10px;
  color: #a6a0b7;
  background: transparent;
  font-size: 12px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}
.settings-toggle button > [data-icon] {
  display: flex;
}
.settings-toggle button:hover {
  color: #f0e9fb;
  background: #b7a5d810;
}
.settings-toggle button[aria-pressed='true'] {
  background: linear-gradient(145deg, #aaa0d833, #8172a726);
  border-color: #c7b4ec36;
  color: #eee7fc;
  box-shadow:
    0 2px 8px #0002,
    inset 0 1px #ffffff0d;
}
.settings-action > [data-i18n] {
  color: inherit;
}
#saved-drafts h3 {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 8px;
}
#draft-list .settings-action {
  gap: 12px;
}
#draft-list .settings-action span:first-child {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:lang(zh) h1,
html:lang(zh) .has-stage .intro h1 {
  letter-spacing: 0.015em;
  line-height: 1.4;
  font-weight: 450;
}
html:lang(zh) .widget-header h2,
html:lang(zh) .settings-heading h2 {
  letter-spacing: 0;
  line-height: 1.5;
}
html:lang(zh) .widget-eyebrow,
html:lang(zh) .preview-label {
  letter-spacing: 0.1em;
}
html:lang(zh) .metric-item > small,
html:lang(zh) .metric-item > span {
  white-space: normal;
}
html:lang(zh) .period-tabs {
  gap: 2px;
}
html:lang(zh) .period-tabs button {
  padding-inline: 9px;
}
html:lang(zh) .intro-description {
  letter-spacing: 0.06em;
}

/* Daylight: pearl surfaces, violet ink, and a soft mint / lilac atmosphere. */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f6f5fb;
  --text: #302b43;
  --muted: #706a83;
  --faint: #706a80;
  --violet: #7a5daf;
  --primary: #735cc3;
  --mint: #4c907e;
  --line: #70618522;
  --card: #ffffffd9;
  --ink: #312c46;
}
[data-theme='light'] .ambient {
  background:
    radial-gradient(ellipse at 49% 42%, #d8c7f255, transparent 43%),
    radial-gradient(ellipse at 83% 83%, #c5e3dc55, transparent 45%),
    radial-gradient(ellipse at 11% 13%, #fae3d948, transparent 40%),
    linear-gradient(155deg, #fcfbffb3, #f4f2fa00 55%, #eff6f34d);
}
[data-theme='light'] .ambient:after {
  opacity: 0.08;
  mix-blend-mode: multiply;
}
[data-theme='light'] .brand-icon {
  background: linear-gradient(145deg, #fff, #ece6f6);
  border-color: #fff;
  box-shadow:
    0 4px 15px #76629213,
    inset 0 0 0 1px #77608e16;
}
[data-theme='light'] .brand-icon img {
  filter: brightness(0);
  opacity: 0.68;
}
[data-theme='light'] .header-center {
  color: #70697e;
}
[data-theme='light'] .header-divider {
  background: #76628526;
}
[data-theme='light'] .eyebrow {
  color: #796789;
}
[data-theme='light'] h1 {
  color: #312b44;
  text-shadow: 0 2px 0 #fff9;
}
[data-theme='light'] h1 em {
  color: #7c659a;
  background: linear-gradient(110deg, #8864b0 14%, #8178ae 55%, #52877c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
[data-theme='light'] .intro-description {
  color: #706a80;
}
[data-theme='light'] .presence-halo {
  background: radial-gradient(ellipse, #c1a6e947, #b0dac82b 65%, transparent);
  filter: blur(26px);
}
[data-theme='light'] .presence-caption,
[data-theme='light'] .user-caption {
  color: #736681;
}
[data-theme='light'] .state-dot {
  background: #9a7cbb;
  box-shadow:
    0 0 0 3px #a080c512,
    0 0 12px #9e7fc745;
}
[data-theme='light'] .assistant-caption {
  color: #44394f;
}
[data-theme='light'] .suggestion {
  color: #665770;
  background: linear-gradient(125deg, #ffffffd6, #ffffff6b);
  border-color: #fff;
  box-shadow:
    0 3px 14px #7660880c,
    inset 0 0 0 1px #8c79a415;
  backdrop-filter: blur(12px);
}
[data-theme='light'] .suggestion:hover {
  background: #fff;
  border-color: #cec0df;
  box-shadow: 0 7px 22px #79629116;
}
[data-theme='light'] .suggestion-icon,
[data-theme='light'] .suggestion-arrow {
  color: #9a7db4;
}
[data-theme='light'] .icon-button:hover {
  color: #655079;
  background: #8d76a514;
}
[data-theme='light'] .dock-secondary {
  color: #7e6b92;
  background: #ffffffb0;
  border-color: #e4ddec;
  box-shadow:
    0 4px 14px #80708c0c,
    inset 0 1px #fff;
}
[data-theme='light'] .dock-secondary:hover {
  color: #5c4077;
  background: #fff;
  border-color: #c9b9dc;
}
[data-theme='light'] .start-button {
  color: #fff;
  background: linear-gradient(120deg, #8362ad, #6f52a4 63%, #65579a);
  border-color: #a88bcc;
  box-shadow:
    0 7px 24px #8060ae2e,
    inset 0 1px #dfc3ff6b;
}
[data-theme='light'] .start-button:hover {
  background: linear-gradient(120deg, #8769b2, #6e519f);
  box-shadow:
    0 9px 28px #8060ae40,
    inset 0 1px #dfc3ff6b;
}
[data-theme='light'] .button-spark {
  background: #e1d0f1;
  box-shadow: 0 0 7px #e0cbff;
}
[data-theme='light'] .start-button.live {
  color: #63497f;
  background: linear-gradient(120deg, #eee5f8, #e6e0f2);
  border-color: #c2acd8;
  box-shadow:
    0 6px 22px #9679b31f,
    inset 0 1px #fff;
}
[data-theme='light'] .start-button.muted {
  color: #886541;
  border-color: #d9c1a3;
  background: #f6eddf;
}
[data-theme='light'] .end-button {
  color: #a46065;
  border-color: #e5cfd2;
}
[data-theme='light'] .dock-note {
  color: #766e83;
}
[data-theme='light'] .text-form {
  background: #ffffffed;
  border-color: #d9cce7;
  box-shadow:
    0 14px 45px #7755911c,
    inset 0 1px #fff;
  backdrop-filter: blur(20px);
}
[data-theme='light'] .text-form input {
  color: #403349;
}
[data-theme='light'] .text-form input::placeholder {
  color: #7a6b85;
}
[data-theme='light'] .send-button {
  color: #fff;
  background: #7d60a3;
}
[data-theme='light'] .notice {
  color: #574267;
  background: #fffafef2;
  border-color: #ded1e9;
  box-shadow: 0 12px 35px #5f456428;
  backdrop-filter: blur(20px);
}
[data-theme='light'] .context-chip {
  color: #756080;
  border-color: #dacfe4;
  background: #ffffffa3;
  box-shadow: 0 3px 12px #89658b09;
}
[data-theme='light'] .widget-card {
  background: linear-gradient(145deg, #ffffffeb, #faf8ffde);
  border: 1px solid #fff;
  box-shadow:
    0 24px 70px #614e8120,
    0 2px 5px #67537a06;
  backdrop-filter: blur(22px);
}
[data-theme='light'] .project-card {
  background: linear-gradient(135deg, #fff, #fcfaff);
  box-shadow: 0 5px 16px #82679707;
}
[data-theme='light'] .card-button.primary {
  background: linear-gradient(120deg, #8162ad, #6e52a3);
  border-color: #9078b6;
  box-shadow: 0 3px 9px #86679b1a;
}
[data-theme='light'] .card-button.primary:hover {
  background: #715699;
}
[data-theme='light'] .settings-dialog {
  color: #44364e;
  background: linear-gradient(140deg, #fffefaed, #f9f7ffed 55%, #f0f8f4ed);
  border: 1px solid #fff;
  box-shadow:
    0 30px 100px #69527833,
    0 0 0 1px #cdbbdd33;
  backdrop-filter: blur(28px);
}
[data-theme='light'] .settings-dialog::backdrop {
  background: #6d58752c;
  backdrop-filter: blur(9px) saturate(0.85);
}
[data-theme='light'] .setting-row small,
[data-theme='light'] .settings-info,
[data-theme='light'] .install-help,
[data-theme='light'] .settings-footnote {
  color: #7a6a82;
}
[data-theme='light'] .setting-row input {
  accent-color: #9172b7;
}
[data-theme='light'] .settings-toggle {
  background: #e9e2f163;
  border-color: #ded3e84d;
  box-shadow: inset 0 1px 3px #78538b06;
}
[data-theme='light'] .settings-toggle button {
  color: #73627e;
}
[data-theme='light'] .settings-toggle button:hover {
  color: #6d4f85;
  background: #ffffff6b;
}
[data-theme='light'] .settings-toggle button[aria-pressed='true'] {
  color: #70528d;
  border-color: #fff;
  background: linear-gradient(130deg, #fff, #fbf8ff);
  box-shadow:
    0 2px 8px #7b5b9114,
    inset 0 1px #fff;
}
[data-theme='light'] .reset-action {
  color: #976753;
}
[data-theme='light'] :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline-color: #9975c2;
}
@media (min-width: 801px) {
  [data-theme='light'] .stage-open .widget-actions {
    background: #fcfafff5;
    backdrop-filter: blur(15px);
  }
}
@media (max-width: 800px) {
  [data-theme='light'] .conversation-dock {
    background: linear-gradient(0deg, #f6f5fb 64%, #f6f5fbd9 80%, #f6f5fb00);
  }
  html:lang(zh) .intro h1 {
    font-size: 36px;
  }
  html:lang(zh) .has-stage .intro h1 {
    font-size: 30px;
  }
  html:lang(zh) .metric-date {
    font-size: 20px;
  }
}