.msg-body.rich a.assistant-link {
  color: #D96A1D;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
}

:root[data-theme="dark"] .msg-body.rich a.assistant-link { color: #FFAA70; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .msg-body.rich a.assistant-link { color: #FFAA70; }
}

/* NasrinAI chat. Monochrome on off-white. The character is the one bold
   element; everything around it stays quiet: hairlines, no colour, no cards. */

:root {
  --paper: #F4F4F1;
  --surface: #FBFBF9;
  --ink: #0E0E0F;
  /* The person's message bubble: in light mode a softer charcoal than the
     ink (owner, 2026-10-13); in dark mode the ink itself. */
  --bubble: color-mix(in srgb, var(--ink) 76%, var(--paper));
  --ink-2: #3D3D3F;
  --ink-3: #8B8B87;
  --line: #E1E0DB;
  --glass: rgba(246, 246, 243, 0.65);
  --glass-line: rgba(14, 14, 15, 0.07);
  --glass-line-focus: rgba(14, 14, 15, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(30px) saturate(1.7) brightness(1.04);
  --glass-chip: rgba(255, 255, 255, 0.55);
  --glass-chip-hover: rgba(255, 255, 255, 0.8);
  --on-ink: #FAFAF8;

  /* the character */
  --ball-hi: #4C4C50;
  --ball-mid: #18181A;
  --ball-lo: #09090A;
  --spec: #FFFFFF;
  --spec-op: 0.24;
  --shade-op: 0.2;
  --eye: #FAFAF8;

  --round: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --column: 44rem;
  --spring: cubic-bezier(.3, 1.45, .5, 1);
  --glide: cubic-bezier(.2, .8, .2, 1);

  /* Design system (docs/redesign.md): sizes, spacing, motion and surfaces.
     New and redesigned parts use these, not raw values. */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem;
  --tap: 2.75rem; --tap-compact: 2.25rem;
  --radius-sm: 0.625rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-xl: 1.625rem; --radius-pill: 999px;
  --text-xs: 0.75rem; --text-sm: 0.84rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-title: 1.75rem;
  --icon: 1.25rem; --icon-sm: 1rem;
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 360ms;
  --ease: var(--glide); --ease-spring: var(--spring);
  --bg-glow: #FFFFFF;
  --elev-1: 0 1px 2px rgba(14, 14, 15, 0.06), 0 4px 14px -6px rgba(14, 14, 15, 0.12);
  --elev-2: 0 -18px 50px -28px rgba(14, 14, 15, 0.45);
  --press: rgba(14, 14, 15, 0.06);
  color-scheme: light;
}

/* Appearance: System follows the phone; Light and Dark are set on <html>
   by theme.js before the page is drawn. The two dark blocks are the same. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111113;
    --surface: #1D1D21;
    --ink: #F4F4F1;
    --bubble: var(--ink);
    --ink-2: #C8C8C3;
    --ink-3: #7D7D79;
    --line: #2B2B30;
    --glass: rgba(30, 30, 34, 0.68);
    --glass-line: rgba(255, 255, 255, 0.07);
    --glass-line-focus: rgba(255, 255, 255, 0.16);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(30px) saturate(1.6) brightness(0.9);
  --glass-chip: rgba(255, 255, 255, 0.07);
  --glass-chip-hover: rgba(255, 255, 255, 0.12);
    --on-ink: #0E0E0F;
    --bg-glow: rgba(255, 255, 255, 0.035);
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
    --elev-2: 0 -18px 50px -24px rgba(0, 0, 0, 0.8);
    --press: rgba(255, 255, 255, 0.08);

    --ball-hi: #FFFFFF;
    --ball-mid: #E3E3E6;
    --ball-lo: #A6A6AC;
    --spec: #FFFFFF;
    --spec-op: 0.7;
    --shade-op: 0.55;
    --eye: #0E0E0F;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #111113;
  --surface: #1D1D21;
  --ink: #F4F4F1;
  --bubble: var(--ink);
  --ink-2: #C8C8C3;
  --ink-3: #7D7D79;
  --line: #2B2B30;
  --glass: rgba(30, 30, 34, 0.68);
  --glass-line: rgba(255, 255, 255, 0.07);
  --glass-line-focus: rgba(255, 255, 255, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(30px) saturate(1.6) brightness(0.9);
  --glass-chip: rgba(255, 255, 255, 0.07);
  --glass-chip-hover: rgba(255, 255, 255, 0.12);
  --on-ink: #0E0E0F;
  --bg-glow: rgba(255, 255, 255, 0.035);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  --elev-2: 0 -18px 50px -24px rgba(0, 0, 0, 0.8);
  --press: rgba(255, 255, 255, 0.08);

  --ball-hi: #FFFFFF;
  --ball-mid: #E3E3E6;
  --ball-lo: #A6A6AC;
  --spec: #FFFFFF;
  --spec-op: 0.7;
  --shade-op: 0.55;
  --eye: #0E0E0F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Adaptive background: a soft light from the top over the page colour,
     following light/dark mode. */
  background: radial-gradient(130% 75% at 50% -25%, var(--bg-glow), transparent 70%) var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

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

.icon-btn svg, .mic svg, .send svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- top bar */

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; max-width: var(--column); margin: 0 auto;
  padding: max(0.7rem, env(safe-area-inset-top)) 1rem 0.4rem;
}

.brand {
  display: flex; align-items: center; gap: 0.55rem; min-height: 2.5rem;
  transition: opacity 320ms var(--glide), transform 420ms var(--glide);
}
body:not(.has-chat) .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
body:not(.has-chat) #newChat { display: none; }

.mark { display: block; width: 1.9rem; }
.mark .nasrin { display: block; }

.wordmark { font: 500 1.2rem/1 var(--round); letter-spacing: -0.015em; }

.bar-actions { display: flex; align-items: center; gap: 0.15rem; }

.icon-btn, .text-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; border: 0; background: none; color: var(--ink-3); border-radius: 999px;
  transition: color 160ms, background-color 160ms;
}
.icon-btn { width: 2.5rem; }
.text-btn { padding: 0 0.85rem; font-size: 0.92rem; }
.icon-btn:hover, .text-btn:hover { color: var(--ink); background: var(--surface); }
#settingsBtn[aria-expanded="true"] { color: var(--ink); background: var(--surface); }

/* --------------------------------------------------------------- settings */

.scrim {
  position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.28);
  animation: fade-in 220ms var(--glide) both;
}
.sheet {
  position: fixed; z-index: 21; left: 0; right: 0; bottom: 0;
  max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.5rem 1.25rem max(1.4rem, env(safe-area-inset-bottom));
  background: var(--surface); border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.5);
  animation: sheet-up 460ms var(--spring) both;
}
@media (min-width: 40rem) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 12vh; width: 26rem; transform: translateX(-50%);
    border-radius: 1.5rem; animation: sheet-in 380ms var(--spring) both; }
  .history-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.history-item { display: flex; align-items: center; gap: 0.25rem; border-radius: 0.9rem; }
.history-item.is-current { background: var(--paper); }
.history-open { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.75rem; padding: 0.8rem 0.6rem; border: 0; border-radius: 0.9rem; background: none; color: var(--ink); text-align: left; font: 500 0.98rem/1.3 var(--sans); cursor: pointer; }
.history-open:hover { background: var(--paper); }
.history-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-time { flex: none; color: var(--ink-3); font-size: 0.8rem; font-weight: 400; }
.history-delete { flex: none; }
.memory-box { margin: 0 0.25rem 0.4rem; }
.memory-text { cursor: default; white-space: normal; }
.memory-text:hover { background: none; }
.sheet-grip { display: none; }
}
.history-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.history-item { display: flex; align-items: center; gap: 0.25rem; border-radius: 0.9rem; }
.history-item.is-current { background: var(--paper); }
.history-open { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.75rem; padding: 0.8rem 0.6rem; border: 0; border-radius: 0.9rem; background: none; color: var(--ink); text-align: left; font: 500 0.98rem/1.3 var(--sans); cursor: pointer; }
.history-open:hover { background: var(--paper); }
.history-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-time { flex: none; color: var(--ink-3); font-size: 0.8rem; font-weight: 400; }
.history-delete { flex: none; }
.sheet-grip { width: 2.5rem; height: 0.3rem; margin: 0.2rem auto 0.6rem; border-radius: 999px; background: var(--line); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.sheet-head h2 { margin: 0; font: 500 1.3rem/1.2 var(--round); letter-spacing: -0.015em; }

.group { margin: 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--line); }
.sheet-head + .group, .sheet-head + [hidden] + .group { border-top: 0; }
.group legend { float: left; width: 100%; padding: 0; margin-bottom: 0.7rem; color: var(--ink-3); font-size: 0.82rem; font-weight: 500; }
.group legend + * { clear: both; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 500; }

/* Buttons used in sheets */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.6rem; padding: 0 1.1rem; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font: 500 0.95rem/1 var(--sans); text-decoration: none;
  transition: transform 220ms var(--spring), opacity 160ms, background-color 160ms, color 160ms;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.outline:hover { border-color: var(--ink-3); background: var(--paper); }
.btn.wide { width: 100%; min-height: 3rem; }

/* Account row in Settings */
.account { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-who { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.account-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-hint { color: var(--ink-3); font-size: 0.84rem; line-height: 1.35; }
.account .btn { flex: none; }
.account.is-in .btn { background: transparent; color: var(--ink); border-color: var(--line); }

/* Your data + Terms */
.data-group { display: flex; flex-direction: column; gap: 0.15rem; }
.data-row { width: 100%; padding: 0.7rem 0.25rem; border: 0; border-radius: 0.7rem; background: transparent; color: var(--ink); text-align: left; font-weight: 500; }
.data-row:hover { background: var(--paper); }
.data-row.danger { color: #B3261E; }
:root[data-theme="dark"] .data-row.danger { color: #F2B8B5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .data-row.danger { color: #F2B8B5; } }
.legal-links { margin: 0.6rem 0.25rem 0; font-size: 0.82rem; color: var(--ink-3); }
.legal-links a, .terms-note a, .check-row a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.check-row { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); font-weight: 500; line-height: 1.4; cursor: pointer; }
.check-row input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--ink); }
.terms-notes { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.88rem; line-height: 1.45; }
.terms-notes li + li { margin-top: 0.35rem; }
.legal-notes { margin: 0.6rem 0.25rem 0; color: var(--ink-3); font-size: 0.82rem; line-height: 1.45; }
.terms-note { margin: 0.8rem 0 1rem; color: var(--ink-3); font-size: 0.88rem; }
#termsSheet .text-btn { display: flex; margin: 0.4rem auto 0; }

/* Sign-in sheet */
.signin-lede { margin: 0 0 1.2rem; color: var(--ink-3); font-size: 0.92rem; }
.or { display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0; color: var(--ink-3); font-size: 0.82rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin-form { display: flex; flex-direction: column; gap: 0.6rem; }
.signin-form label { color: var(--ink-2); font-size: 0.85rem; font-weight: 500; }
.signin-form input {
  width: 100%; min-height: 3rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 1rem;
  background: var(--paper); color: var(--ink); font: 400 1rem/1 var(--sans);
  transition: border-color 160ms, background-color 160ms;
}
.signin-form input:focus { outline: none; border-color: var(--ink-3); background: var(--surface); }
#code { font: 500 1.35rem/1 var(--sans); letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
#code::placeholder { letter-spacing: 0.4em; color: var(--line); }
.signin-form .text-btn { align-self: center; }
.signin-status { min-height: 1.3em; margin: 0.8rem 0 0; color: var(--ink-2); font-size: 0.88rem; text-align: center; }
.signin-status:empty { margin: 0; }
/* Cloudflare Turnstile: centered below the email button; smaller on phones.
   The widget is a fixed-size iframe, so it is scaled rather than resized. */
.signin-captcha { display: flex; justify-content: center; width: 100%; margin: 1rem auto 0; }
@media (max-width: 480px) {
  .signin-captcha { transform: scale(0.8); transform-origin: top center; margin: 0.75rem auto -0.8rem; }
}

/* Appearance: three-way segmented control */
.segmented { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.25rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 0.5rem 0; text-align: center; border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: var(--ink-3);
  transition: background-color 220ms var(--glide), color 220ms, box-shadow 220ms; }
.segmented input:checked + span { background: var(--ink); color: var(--on-ink); }
.segmented input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* switch */
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 3.1rem; height: 1.85rem; border-radius: 999px; background: var(--line); cursor: pointer;
  transition: background-color 220ms var(--glide);
}
.switch::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 300ms var(--spring);
}
.switch:checked { background: var(--ink); }
.switch:checked::after { transform: translateX(1.25rem); background: var(--on-ink); }

/* voices */
.voices { display: flex; flex-direction: column; gap: 0.2rem; }
.voices h3 { margin: 0.6rem 0 0.3rem; color: var(--ink-3); font-size: 0.76rem; font-weight: 500; }
.voices h3:first-child { margin-top: 0; }
.voice { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.25rem 0.35rem 0.4rem; border-radius: 0.9rem; }
.voice:hover { background: var(--paper); }
.voice label { flex: 1; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; min-height: 2.4rem; }
.voice input { appearance: none; -webkit-appearance: none; flex: none; width: 1.2rem; height: 1.2rem; margin: 0; border-radius: 50%;
  border: 1.5px solid var(--ink-3); transition: border-width 160ms var(--spring), border-color 160ms; cursor: pointer; }
.voice input:checked { border: 0.38rem solid var(--ink); }
.voice { position: relative; }
.voice-name { min-width: 0; }
.voice-selected { flex: none; padding: 0.18rem 0.45rem; border-radius: 999px; background: var(--surface); color: var(--ink-3); font-size: 0.66rem; font-weight: 600; }
.voice-selected[hidden] { display: none; }

.voice .play { flex: none; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); display: grid; place-items: center; }
.voice .play:hover, .voice .play.is-playing { color: var(--ink); background: var(--surface); }
.voice .play svg, .listen svg { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.voices .empty { color: var(--ink-3); font-size: 0.88rem; margin: 0; }

/* ---------------------------------------------------------- conversation */

.log {
  flex: 1; overflow-y: auto; width: 100%; max-width: var(--column); margin: 0 auto;
  padding: 0.75rem 1.1rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem;
  overscroll-behavior: contain; scroll-padding-bottom: calc(var(--dock-h, 7rem) + 1rem);
  /* The message box floats over the chat (frosted glass): room underneath. */
  padding-bottom: calc(var(--dock-h, 7rem) + 1.5rem);
}

.msg { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }

.msg.user {
  align-self: flex-end; max-width: 84%;
  padding: 0.62rem 1rem; border-radius: 1.35rem 1.35rem 0.4rem 1.35rem;
  background: var(--bubble, var(--ink)); color: var(--on-ink); font-size: 0.95rem; line-height: 1.5;
  transform-origin: 100% 100%;
  animation: pop-in 320ms var(--spring) both;
}

.msg.assistant { align-self: flex-start; font-size: 0.95rem; line-height: 1.62; }
.listen {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 0.8rem; font-weight: 500;
  transition: color 160ms, border-color 160ms, background-color 160ms;
}
.listen:hover, .listen.is-playing { color: var(--ink); border-color: var(--ink-3); }
.act.listen { margin-top: 0; padding: 0; border: 0; gap: 0; }
.act.listen svg { width: 0.95rem; height: 0.95rem; fill: currentColor; stroke: none; }
.act.listen, .act.listen:hover, .act.listen:active, .act.listen.is-playing {
  background: transparent;
}
.act.listen.is-playing { color: var(--ink); }
.msg-body { white-space: pre-wrap; }
.msg-body.rich { white-space: normal; }

/* Organised replies: headings, paragraphs, lists, steps, quotes, code. */
.rich > * { margin: 0 0 0.75rem; }
.rich > *:last-child { margin-bottom: 0; }
.rich h3, .rich h4 { font: 500 1rem/1.35 var(--round); letter-spacing: -0.01em; margin-top: 1.1rem; }
.rich h4 { font-size: 0.93rem; color: var(--ink-2); }
.rich > h3:first-child, .rich > h4:first-child { margin-top: 0; }
.rich strong { font-weight: 500; }
.rich ul { padding-left: 1.15rem; }
.rich ul li { margin: 0.25rem 0; }
.rich ul li::marker { color: var(--ink-3); }
.rich code { font: 0.88em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 0.08rem 0.32rem; border-radius: 0.4rem; background: var(--paper); border: 1px solid var(--line); }
.rich a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.rich blockquote { padding: 0.15rem 0 0.15rem 0.85rem; border-left: 3px solid var(--line); color: var(--ink-2); }
.rich .reveal { animation: block-in 520ms var(--glide) both; animation-delay: var(--d, 0ms); }
@keyframes block-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* Numbered steps: tap the circle to tick a step off. */
.rich ol.steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 0.45rem; }
.rich .step { counter-increment: step; display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.95rem; background: var(--surface); transition: opacity 220ms, background-color 220ms; }
.rich .step-tick { flex: none; width: 1.55rem; height: 1.55rem; margin-top: 0.05rem; border-radius: 50%; border: 1.5px solid var(--ink-3); background: transparent; color: var(--ink); font: 500 0.78rem/1 var(--sans); display: grid; place-items: center; transition: background-color 200ms, transform 260ms var(--spring); }
.rich .step-tick::before { content: counter(step); }
.rich .step-tick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); transform: scale(1.06); }
.rich .step-tick[aria-pressed="true"]::before { content: "✓"; }
.rich .step-text { flex: 1; min-width: 0; }
.rich .step.is-done .step-text { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line); }

.rich .code-block { border: 1px solid var(--line); border-radius: 0.95rem; overflow: hidden; background: var(--paper); }
.rich .code-head { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem 0.35rem 0.8rem; border-bottom: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-3); }
.rich .code-copy { border: 0; background: transparent; color: var(--ink-2); font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 999px; }
.rich .code-copy:hover { background: var(--surface); color: var(--ink); }
.rich pre { margin: 0; padding: 0.75rem 0.85rem; overflow-x: auto; }
.rich pre code { padding: 0; border: 0; background: none; font-size: 0.84rem; white-space: pre; }

/* The + menu and "Create image" mode */
.plus-pick { position: relative; display: inline-flex; }
.plus-menu {
  position: absolute; z-index: 15; left: 0; bottom: calc(100% + 0.6rem); width: min(17rem, calc(100vw - 2.5rem));
  padding: 0.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.2rem;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35); transform-origin: 1.25rem 100%; animation: menu-in 260ms var(--spring) both;
}
.plus-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.65rem; border: 0; border-radius: 0.85rem; background: transparent; color: var(--ink); text-align: left; }
.plus-item:hover, .plus-item:focus-visible { background: var(--paper); outline: none; }
.plus-item svg { flex: none; width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plus-item span { display: flex; flex-direction: column; gap: 0.1rem; }
.plus-item strong { font-size: 0.92rem; font-weight: 500; }
.plus-item small { font-size: 0.78rem; color: var(--ink-3); }
.plus-item[hidden] { display: none; }
.mode-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0.3rem 0; padding: 0.3rem 0.35rem 0.3rem 0.6rem; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 0.8rem; font-weight: 500; animation: pop-in 320ms var(--spring) both; }
.mode-chip[hidden] { display: none; }
.mode-chip svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-chip button { width: 1.4rem; height: 1.4rem; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--on-ink) 18%, transparent); color: inherit; font-size: 1rem; line-height: 1; }

/* A picture Nasrin made */
.made-image { margin: 0 0 0.6rem; max-width: min(100%, 26rem); }
.made-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
  border-radius: 1.1rem;
  border: 1px solid var(--line);
  background: var(--paper);
  opacity: 0;
  transform: translateY(8px) scale(0.992);
  filter: blur(5px);
}
.made-image.is-loading img {
  width: 100%;
  aspect-ratio: 1;
  border-color: transparent;
  color: transparent;
  background: linear-gradient(110deg, var(--paper) 25%, var(--surface) 40%, var(--paper) 55%);
  background-size: 220% 100%;
  animation: image-placeholder-shimmer 1.8s ease-in-out infinite;
}
.made-image.is-ready img {
  animation: generated-image-reveal 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes generated-image-reveal {
  from { opacity: 0; transform: translateY(8px) scale(0.992); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes image-placeholder-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}
.made-image.is-gone img { display: none; }
.made-image figcaption { display: flex; gap: 0.4rem; margin-top: 0.5rem; color: var(--ink-3); font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) {
  .made-image.is-loading img { animation: none; }
  .made-image.is-ready img { animation: none; opacity: 1; transform: none; filter: none; }
}

/* While a picture, video or file is being made: a pixel screen that lights
   up in diagonal waves under a moving scan line (genLoader in app.js). */
.gen-loader { align-self: flex-start; width: 20rem; max-width: 100%; margin: 0.2rem 0 0.4rem; white-space: normal; animation: fade-in 260ms var(--glide) both; }
.gen-loader.msg { max-width: min(100%, 20rem); }
.gen-screen {
  position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px;
  aspect-ratio: 1; padding: 10px; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--paper);
}
.gen-loader.is-compact { width: 16rem; }
.gen-loader.is-compact .gen-screen { grid-template-columns: repeat(24, 1fr); aspect-ratio: auto; padding: 7px; border-radius: 0.8rem; }
.gen-cell {
  aspect-ratio: 1; border-radius: 2px; background: var(--ink); opacity: 0.07;
  animation: gen-cell 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: var(--d, 0ms);
}
.gen-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 28%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 10%, transparent) 70%, color-mix(in srgb, var(--ink) 28%, transparent) 98%, transparent);
  animation: gen-scan 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.gen-label { display: flex; justify-content: space-between; gap: 0.6rem; margin: 0.5rem 0.15rem 0; color: var(--ink-3); font-size: 0.85rem; }
.gen-label > span:first-child { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink) 50%, var(--ink-3) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }
.gen-time { font-variant-numeric: tabular-nums; }
@keyframes gen-cell { 0%, 100% { opacity: 0.07; transform: scale(0.82); } 45% { opacity: 0.6; transform: scale(1); } 60% { opacity: 0.22; } }
@keyframes gen-scan { from { transform: translateY(-100%); } to { transform: translateY(360%); } }
@media (prefers-reduced-motion: reduce) {
  .gen-cell, .gen-scan, .gen-label > span:first-child { animation: none; }
  .gen-cell { opacity: 0.18; }
  .gen-scan { display: none; }
  .gen-label > span:first-child { color: var(--ink-3); background: none; }
}
:root[data-motion="reduce"] .gen-cell, :root[data-motion="reduce"] .gen-scan, :root[data-motion="reduce"] .gen-label > span:first-child { animation: none; }
:root[data-motion="reduce"] .gen-cell { opacity: 0.18; }
:root[data-motion="reduce"] .gen-scan { display: none; }
:root[data-motion="reduce"] .gen-label > span:first-child { color: var(--ink-3); background: none; }

/* The messy-file cleaner's result (cleanerCard in app.js). */
.clean-card { width: min(100%, 40rem); padding: 1rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); white-space: normal; }
.clean-title { margin: 0 0 0.35rem; font-family: var(--round); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.clean-check { margin: 0 0 0.6rem; font-size: 0.86rem; }
.clean-check.is-ok { color: var(--ink-2); }
.clean-check.is-ok::before { content: "✓ "; }
.clean-check.is-warn { color: #b3261e; }
.clean-sheet + .clean-sheet { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.clean-sheet-name { margin: 0 0 0.3rem; font-size: 0.92rem; font-weight: 600; }
.clean-facts { margin: 0 0 0.7rem; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.85rem; line-height: 1.5; }
.clean-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
.clean-tile { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.7rem; border-radius: 0.9rem; background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.clean-tile-label { color: var(--ink-3); font-size: 0.76rem; overflow-wrap: anywhere; }
.clean-tile-value { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.clean-tile-sub { color: var(--ink-3); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.clean-bars { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.7rem; }
.clean-bar { display: grid; grid-template-columns: minmax(4rem, 9rem) 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.clean-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clean-bar-fill { height: 0.55rem; width: var(--w, 4%); border-radius: 999px; background: var(--ink); opacity: 0.7; }
.clean-bar-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.clean-table-wrap { overflow: auto; max-height: 22rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--paper); }
.clean-table { border-collapse: collapse; font-size: 0.8rem; min-width: 100%; }
.clean-table th, .clean-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.clean-table th { position: sticky; top: 0; background: var(--surface); font-weight: 600; }
.clean-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.clean-more, .clean-foot { margin: 0.45rem 0 0; color: var(--ink-3); font-size: 0.76rem; }
.clean-get { margin-top: 0.8rem; }

/* Retained-image history: a compact 3×3 mobile-friendly gallery. Eight images
   and the Show more tile fill each page without squeezing the image controls. */
.image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  width: 100%;
  margin: 0.25rem 0 0.8rem;
}
.image-gallery-grid .made-image {
  min-width: 0;
  max-width: none;
  margin: 0;
}
.image-gallery-grid .made-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.65rem;
}
.image-gallery-grid .made-image figcaption {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: 0.72rem;
}
.image-gallery-grid .made-image figcaption .btn {
  padding: 0.3rem 0.4rem;
  min-height: 2rem;
  font-size: 0.72rem;
}
.image-gallery-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 5rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.image-gallery-more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.btn.small { min-height: 2.1rem; padding: 0 0.9rem; font-size: 0.82rem; }

/* Making a picture: Nasrin's questions and the brief, as cards in the chat. */
.image-card { align-self: stretch; max-width: 32rem; white-space: normal; padding: 0.9rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); animation: fade-in 260ms var(--glide) both; }
.card-lede { margin: 0 0 0.6rem; color: var(--ink-2); font-size: 0.95rem; }
.image-card .question { margin: 0 0 0.85rem; padding: 0; border: 0; min-width: 0; }
.image-card .question legend { padding: 0; margin-bottom: 0.45rem; font-size: 0.95rem; font-weight: 500; line-height: 1.35; }
.answer-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.answer-chip { min-height: 2.25rem; padding: 0 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 500 0.88rem/1 var(--sans); cursor: pointer; transition: transform 160ms var(--spring), background-color 160ms, color 160ms; }
.answer-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.answer-chip:active { transform: scale(0.96); }
.answer-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.image-card .question input { width: 100%; min-height: 2.6rem; margin-top: 0.45rem; padding: 0 0.85rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--paper); color: var(--ink); font: 400 0.95rem/1 var(--sans); }
.image-card .question input[hidden] { display: none; }
.image-card .question input:focus { outline: none; border-color: var(--ink-3); }
.image-card :disabled { opacity: 0.5; cursor: default; }
.brief-summary { margin: 0 0 0.8rem; font-size: 1rem; line-height: 1.5; }
.card-actions { display: flex; gap: 0.5rem; }

/* Under each reply: Listen, Copy, Share. */
.reply-actions { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.55rem; }
.reply-actions .listen { margin-top: 0; }
/* Web sources, folded under "Sources · n" in the reply actions. */
.reply-actions .sources-toggle { width: auto; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.6rem 0 0.35rem; border-radius: 999px; font-size: 0.86rem; color: var(--ink-2); }
.reply-actions .sources-toggle[aria-expanded="true"] { color: var(--ink); background: var(--surface); }
/* One round badge per site, overlapping like stacked avatars. */
.src-faces { display: inline-flex; align-items: center; }
.src-face { position: relative; z-index: 3; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font: 600 0.62rem/1 var(--round); color: var(--on-ink); background: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.src-face + .src-face { margin-left: -0.38rem; }
/* A real site logo covers the letter once it has loaded. */
.src-face, .reply-source-logo { overflow: hidden; }
.src-face img, .reply-source-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 180ms; }
.src-face.has-logo, .reply-source-logo.has-logo { background: #fff; color: transparent; }
.src-face.has-logo img, .reply-source-logo.has-logo img { opacity: 1; }
.src-face.has-logo img { padding: 2px; box-sizing: border-box; }
.reply-source-logo { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 0.45rem; display: grid; place-items: center; font: 600 0.7rem/1 var(--round); color: var(--on-ink); background: var(--ink); border: 1px solid var(--line); }
.reply-source-logo.has-logo img { padding: 3px; box-sizing: border-box; }
.reply-sources .reply-sources-credit { display: block; padding: 0.35rem 0.6rem 0.2rem; color: var(--ink-3); font-size: 0.72rem; }
.reply-sources .reply-sources-empty { display: block; padding: 0.55rem 0.65rem; color: var(--ink-3); font-size: 0.82rem; line-height: 1.45; }
.reply-source-words { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.src-face[data-n="1"] { z-index: 2; background: color-mix(in srgb, var(--ink) 70%, var(--paper)); }
.src-face[data-n="2"] { z-index: 1; background: color-mix(in srgb, var(--ink) 45%, var(--paper)); }
.reply-sources { list-style: none; margin: 0.4rem 0 0; padding: 0.35rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--paper); white-space: normal; animation: fade-in 220ms var(--glide) both; }
.reply-sources[hidden] { display: none; }
.reply-sources li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.reply-sources a { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.6rem; color: var(--ink); text-decoration: none; }
.cite-btn { flex: none; border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.78rem; min-height: 2rem; }
.cite-btn:hover, .cite-btn[aria-expanded="true"] { color: var(--ink); background: var(--surface); }
/* A source's citation: organized details, a style picker, the citation, Copy. */
.cite-card { flex: 1 1 100%; width: min(100%, 40rem); margin: 0.3rem 0 0.5rem; padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); white-space: normal; animation: fade-in 220ms var(--glide) both; }
.cite-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.8rem; margin: 0 0 0.5rem; font-size: 0.84rem; }
.cite-details dt { color: var(--ink-3); }
.cite-details dd { margin: 0; overflow-wrap: anywhere; }
.cite-details a, .reply-sources .cite-details a { display: inline; flex: none; padding: 0; border-radius: 0; color: var(--ink); text-decoration: underline; }
.cite-from { margin: 0 0 0.5rem; color: var(--ink-3); font-size: 0.76rem; }
.cite-styles { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0.55rem; }
.cite-style { border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 0.25rem 0.65rem; font-size: 0.78rem; min-height: 2rem; }
.cite-style[aria-checked="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cite-out { padding: 0.65rem 0.75rem; border-radius: 0.75rem; background: var(--paper); border: 1px solid var(--line); font-size: 0.86rem; line-height: 1.55; overflow-wrap: anywhere; padding-left: 1.6rem; text-indent: -0.85rem; }
.cite-out.is-code { white-space: pre; overflow-x: auto; text-indent: 0; padding-left: 0.75rem; font: 0.78rem/1.5 var(--mono, ui-monospace, monospace); }
.cite-copy { margin-top: 0.55rem; }
.reply-sources a:hover, .reply-sources a:focus-visible { background: var(--surface); }
.reply-source-title { font-size: 0.88rem; overflow-wrap: anywhere; }
.reply-source-host { font-size: 0.76rem; color: var(--ink-3); }
.act { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); display: grid; place-items: center; transition: color 160ms, background-color 160ms, transform 220ms var(--spring); }
.act:hover { color: var(--ink); background: var(--surface); }
.act:active { transform: scale(0.88); }
.act svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.act.is-done { color: var(--ink); }
.listen svg.filled { fill: currentColor; stroke: none; }
.listen.is-loading svg { animation: soft-pulse 900ms ease-in-out infinite; }
@keyframes soft-pulse { 50% { opacity: 0.35; } }
.msg.assistant .w { display: inline; animation: word-in 460ms var(--glide) both; animation-delay: var(--d, 0ms); }

.msg.problem {
  align-self: stretch; color: var(--ink-2); font-size: 0.95rem;
  padding: 0.1rem 0 0.1rem 0.85rem; border-left: 2px solid var(--ink-3);
  animation: fade-in 260ms var(--glide) both;
}

.thinking { align-self: flex-start; display: flex; align-items: center; gap: 0.6rem; animation: fade-in 260ms var(--glide) both; }
.thinking .mini { width: 1.75rem; flex: none; }
.thinking .label.is-new { animation: fade-in 320ms var(--glide) both, shimmer 1.8s linear infinite; }
.thinking .mini .nasrin { display: block; }
.thinking .mini.dot-sphere { color: var(--ink); }
.dots { display: block; width: 100%; height: auto; overflow: visible; }
.dots circle { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .dots { animation: soft-pulse 1.6s ease-in-out infinite; } }
:root[data-motion="reduce"] .dots { animation: soft-pulse 1.6s ease-in-out infinite; }
.thinking .label {
  font-size: 0.92rem; font-weight: 500;
  background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.8s linear infinite;
}

/* ----------------------------------------------------- empty-state hero */

.welcome {
  margin: auto 0; padding: 1.5rem 0 1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.hero {
  display: block; width: clamp(9rem, 42vw, 11.5rem); padding: 0; margin: 0 0 1.4rem;
  border: 0; background: none; border-radius: 50%;
  touch-action: manipulation;
}
.hero .nasrin { display: block; }
/* the entrance runs once: the class is removed when it ends, so it never
   overrides later moods or blinks */
.hero.is-entering .nasrin { animation: enter 980ms var(--spring) both; }
.hero.is-entering .n-lid { animation: open-eyes 420ms 620ms var(--spring) backwards; }
.hero:focus-visible { outline-offset: 6px; }

.greeting {
  margin: 0; font: 500 clamp(1.9rem, 7.4vw, 2.55rem)/1.08 var(--round); letter-spacing: -0.025em;
  animation: rise 700ms 380ms var(--glide) both;
}
.lede { margin: 0.55rem 0 1.6rem; color: var(--ink-3); animation: rise 700ms 470ms var(--glide) both; }

.starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 32rem; }
.starter {
  padding: 0.55rem 0.95rem; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-2); font-size: 0.9rem; line-height: 1.3;
  transition: border-color 180ms, color 180ms, background-color 180ms, transform 220ms var(--spring);
  animation: rise 600ms both;
}
.starter { animation-delay: 560ms; }
.starter[hidden] { display: none; }
.starter:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface); }
.starter:active { transform: scale(0.96); }

/* ---------------------------------------------------------------- dock */

.dock {
  position: fixed; z-index: 5; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: var(--column); margin: 0 auto;
  padding: 0.3rem 1rem calc(1rem + env(safe-area-inset-bottom));
  pointer-events: none;   /* the chat under the empty space stays scrollable */
}
.dock > * { pointer-events: auto; }

.notice { width: fit-content; max-width: 100%; margin: 0 auto 0.55rem; padding: 0.4rem 0.8rem; border-radius: 1rem; color: var(--ink-2); font-size: 0.88rem;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.notice:empty { display: none; }

.model-pick { position: relative; display: inline-flex; }
/* The model button: a circle with signal bars, one bar per level (NasrinAI 1 … Ultra 4). */
.tool.model-btn:active { transform: scale(0.9); }
.tool .bars { width: 1.45rem; height: 1.45rem; stroke: none; }
.model-option .bars { width: 1.35rem; height: 1.35rem; stroke: none; }
.bars rect { fill: color-mix(in srgb, var(--ink-3) 38%, transparent); transition: fill 220ms var(--glide), transform 320ms var(--spring); transform-box: fill-box; transform-origin: bottom; }
.bars rect.on { fill: currentColor; }
.model-btn[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.model-btn[aria-expanded="true"] .bars rect:not(.on) { fill: color-mix(in srgb, var(--on-ink) 32%, transparent); }
.model-btn.bump .bars rect.on { animation: bar-bump 420ms var(--spring); }
.model-btn.bump .bars rect:nth-child(2) { animation-delay: 40ms; }
.model-btn.bump .bars rect:nth-child(3) { animation-delay: 80ms; }
.model-btn.bump .bars rect:nth-child(4) { animation-delay: 120ms; }
@keyframes bar-bump { 0% { transform: scaleY(1); } 40% { transform: scaleY(0.55); } 100% { transform: scaleY(1); } }

.model-menu {
  position: absolute; z-index: 15; left: 0; bottom: calc(100% + 0.6rem);
  width: min(18rem, calc(100vw - 2.5rem)); padding: 0.35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.2rem;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35);
  transform-origin: 1.25rem 100%; animation: menu-in 260ms var(--spring) both;
}
.model-menu:focus { outline: none; }
@keyframes menu-in { from { opacity: 0; transform: scale(0.85) translateY(6px); } to { opacity: 1; transform: none; } }
.model-option {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6rem 0.65rem;
  border: 0; border-radius: 0.85rem; background: transparent; color: var(--ink); text-align: left;
}
.model-option:hover, .model-option:focus-visible { background: var(--paper); outline: none; }
.model-option .bars { flex: none; }
.model-option .text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.model-option .name { font-size: 0.92rem; font-weight: 500; }
.model-option .desc { font-size: 0.78rem; color: var(--ink-3); line-height: 1.3; }
.model-option .check { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.model-option .badge {
  flex: none; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: 0.7rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.model-option.is-locked .name, .model-option.is-locked .bars { opacity: 0.55; }
.model-menu .menu-foot { display: block; width: 100%; margin-top: 0.2rem; padding: 0.55rem; border: 0; border-top: 1px solid var(--line);
  border-radius: 0 0 0.85rem 0.85rem; background: transparent; color: var(--ink-2); font-size: 0.82rem; font-weight: 500; }
.model-menu .menu-foot:hover { color: var(--ink); }

/* Payment receipt popup */
.receipt-sheet {
  position: fixed;
  z-index: 70;
  left: 50%;
  top: 50%;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100dvh - 2rem));
  transform: translate(-50%, -50%);
  overflow: auto;
  box-sizing: border-box;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.28);
}
.receipt-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.8rem; }
.receipt-head h2 { margin:0; font:500 1.05rem/1.2 var(--round); }
.receipt-body { display:grid; gap:.55rem; }
.receipt-row { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.receipt-row:last-child { border-bottom:0; }
.receipt-label { color:var(--ink-3); font-size:.78rem; }
.receipt-value { text-align:right; font-size:.84rem; font-weight:500; overflow-wrap:anywhere; }
.receipt-total { margin-top:.25rem; padding-top:.75rem; border-top:1px solid var(--line); font-weight:600; }

/* Plans sheet */
.plan-list { display: flex; flex-direction: column; gap: 0.7rem; }
.plan-card { padding: 1rem 1rem 1.05rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--paper); }
.plan-card.is-current { border-color: var(--ink); }
.plan-card .plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.plan-card h3 { margin: 0; font: 500 1.1rem/1.2 var(--round); }
.plan-card .price { font-weight: 500; font-size: 0.95rem; }
.plan-card .price small { color: var(--ink-3); font-weight: 500; }
.plan-card .soon { color: var(--ink-3); font-size: 0.85rem; font-weight: 500; }
.plan-card .includes { margin: 0.35rem 0 0.8rem; color: var(--ink-2); font-size: 0.86rem; }
.plan-card .btn { width: 100%; }
.plan-card .btn.outline:disabled { opacity: 1; color: var(--ink-3); }
.plan-details-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; margin: 0 0 0.7rem; padding: 0.55rem 0;
  border: 0; border-top: 1px solid var(--line); background: transparent;
  color: var(--ink); font: 500 0.84rem/1.2 var(--sans); text-align: left; cursor: pointer;
}
.plan-details-icon { flex: none; font-size: 1.1rem; line-height: 1; color: var(--ink-3); }
.plan-details[hidden] { display: none; }
.plan-details { margin: -0.1rem 0 0.8rem; }
.plan-details-summary { margin: 0 0 0.45rem; color: var(--ink-2); font-size: 0.8rem; line-height: 1.35; }
.plan-details ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.8rem; line-height: 1.45; }
.plan-details li + li { margin-top: 0.2rem; }

.composer {
  --composer-border: rgba(14, 14, 15, 0.16);
  display: flex; flex-direction: column; gap: 0.15rem;
  position: relative; isolation: isolate;
  padding: 0.5rem; border: 0.5px solid var(--composer-border); border-radius: 27px;
  /* Translucent matte glass: a single surface, without a background gradient. */
  background: rgba(246, 246, 243, 0.42);
  -webkit-backdrop-filter: blur(28px) saturate(1.35) brightness(1.02); backdrop-filter: blur(28px) saturate(1.35) brightness(1.02);
  box-shadow:
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.075),
    inset 8px 8px 28px rgba(255, 255, 255, 0.018),
    inset -8px -10px 28px rgba(0, 0, 0, 0.045),
    0 22px 44px -26px rgba(0, 0, 0, 0.45);
  transition: border-color 200ms, box-shadow 300ms var(--glide);
  transform: translateY(16px);
}
.composer:focus-within { box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.5); }

#input {
  width: 100%; min-height: 4.25rem; max-height: 11rem; padding: 0.45rem 0.55rem; resize: none;
  border: 0; background: transparent; line-height: 1.45; outline: none;
}

.tools { display: flex; align-items: center; gap: 0.4rem; }
.spacer { flex: 1; }

.tool {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 220ms var(--spring), background-color 160ms;
}
.tool:hover { background: var(--paper); }
.tool:active { transform: scale(0.9) rotate(90deg); }
.tool svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* files waiting to be sent */
.tray { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.35rem 0.3rem 0.5rem; scrollbar-width: none; }
.tray::-webkit-scrollbar { display: none; }
.chip {
  position: relative; flex: none; display: flex; align-items: center; gap: 0.5rem;
  height: 3.6rem; border-radius: 0.95rem; border: 1px solid var(--line); background: var(--paper);
  animation: pop-in 280ms var(--spring) both;
}
.chip.photo { width: 3.6rem; padding: 0; overflow: visible; }
.chip.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.9rem; display: block; }
.chip.doc { max-width: 12rem; padding: 0 0.8rem 0 0.65rem; font-size: 0.82rem; }
.chip.doc .doc-icon { flex: none; width: 1.9rem; height: 2.3rem; border-radius: 0.35rem; background: var(--ink); color: var(--on-ink);
  display: grid; place-items: center; font: 600 0.55rem/1 var(--sans); letter-spacing: 0.04em; }
.chip.doc .doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x {
  position: absolute; top: -0.4rem; right: -0.4rem; width: 1.35rem; height: 1.35rem; padding: 0;
  border: 2px solid var(--surface); border-radius: 50%; background: var(--ink); color: var(--on-ink);
  display: grid; place-items: center; font: 500 0.8rem/1 var(--sans);
}

/* files shown in a sent message */
.msg.user .files { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; margin: -0.1rem -0.35rem 0.45rem; }
.msg.user .files img { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: 0.8rem; display: block; }
.msg.user .files .file { padding: 0.3rem 0.6rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--on-ink) 14%, transparent); font-size: 0.8rem; }
#input::placeholder { color: var(--ink-3); }

/* Claude-inspired dark composer surfaces. */
:root[data-theme="dark"] .composer {
  --composer-border: rgba(255, 255, 255, 0.10);
  background: rgba(52, 52, 54, 0.86);
  box-shadow:
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.055),
    inset 8px 8px 28px rgba(255, 255, 255, 0.012),
    inset -8px -10px 28px rgba(0, 0, 0, 0.12),
    0 22px 44px -26px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] #input {
  background: transparent;
  border-radius: 0;
  padding: 0.4rem 0.8rem 0.45rem;
  box-shadow: none;
}
:root[data-theme="dark"] .tool {
  background: rgba(55, 55, 58, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}
:root[data-theme="dark"] .tool:hover { background: rgba(65, 65, 69, 0.80); }
:root[data-theme="dark"] .composer .mic,
:root[data-theme="dark"] .composer .send {
  background: rgba(55, 55, 58, 0.76);
}
:root[data-theme="dark"] .composer .send:not(:disabled) { background: #FAFAFA; color: #111113; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .composer {
    --composer-border: rgba(255, 255, 255, 0.10);
    background: rgba(52, 52, 54, 0.86);
    box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.55);
  }
  :root:not([data-theme="light"]) #input {
    background: transparent;
    border-radius: 0;
    padding: 0.4rem 0.8rem 0.45rem;
    box-shadow: none;
  }
  :root:not([data-theme="light"]) .tool {
    background: rgba(55, 55, 58, 0.76);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  }
  :root:not([data-theme="light"]) .tool:hover { background: rgba(65, 65, 69, 0.80); }
  :root:not([data-theme="light"]) .composer .mic,
  :root:not([data-theme="light"]) .composer .send {
    background: rgba(55, 55, 58, 0.76);
  }
  :root:not([data-theme="light"]) .composer .send:not(:disabled) { background: #FAFAFA; color: #111113; }
}

.mic, .send {
  position: relative; flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--on-ink);
  transition: transform 220ms var(--spring), background-color 200ms, color 200ms, opacity 200ms;
}
.mic:active, .send:not(:disabled):active { transform: scale(0.9); }
.mic { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.mic[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.mic[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--ink); animation: listen 1.5s infinite var(--glide);
}
.send:disabled { background: var(--line); color: var(--ink-3); cursor: default; }


/* ---------------------------------------------------------- the character */

.nasrin { width: 100%; height: auto; overflow: visible; --gx: 0; --gy: 0; }
.nasrin * { transform-box: fill-box; }

.n-stop-hi { stop-color: var(--ball-hi); }
.n-stop-mid { stop-color: var(--ball-mid); }
.n-stop-lo { stop-color: var(--ball-lo); }
.n-spec-in { stop-color: var(--spec); stop-opacity: var(--spec-op); }
.n-spec-out { stop-color: var(--spec); stop-opacity: 0; }
.n-shade-in { stop-color: #000; stop-opacity: var(--shade-op); }
.n-shade-out { stop-color: #000; stop-opacity: 0; }

.n-hop { transform-origin: 50% 100%; transition: transform 420ms var(--glide); }
.n-body { transform-origin: 50% 100%; animation: breathe 5.2s ease-in-out infinite; }
.n-shadow { transform-origin: 50% 50%; animation: shadow-breathe 5.2s ease-in-out infinite; }

.n-face {
  transform-origin: 50% 50%;
  transform: translate(calc(var(--gx) * 10px), calc(var(--gy) * 7px));
  transition: transform 230ms var(--glide);
}
.n-spec {
  transform-origin: 50% 50%;
  transform: translate(calc(var(--gx) * -6px), calc(var(--gy) * -5px));
  transition: transform 700ms var(--glide);
}

.n-eye { transform-origin: 50% 50%; transition: transform 300ms var(--spring); }
.n-lid { transform-origin: 50% 55%; transition: transform 380ms var(--glide); }
.n-pill { fill: var(--eye); transform-origin: 50% 75%; transition: transform 170ms var(--glide); }
.n-arc {
  fill: none; stroke: var(--eye); stroke-width: 8.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 200ms var(--glide);
}

.n-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0; transform-origin: 50% 50%; }
.n-z { fill: var(--ink-3); font: 600 18px var(--round); opacity: 0; }

.is-blink .n-lid { animation: blink 170ms ease-in-out; }
.is-tick .n-hop { animation: tick 170ms var(--glide); }

/* typing: looks down at your words, slightly focused */
[data-mood="typing"] .n-eye { transform: scaleY(0.86); }

/* thinking: eyes scan up and across */
[data-mood="thinking"] .n-face { animation: scan 2.2s cubic-bezier(.45, 0, .55, 1) infinite; }
[data-mood="thinking"] .n-eye { transform: scaleY(0.84); }
[data-mood="thinking"] .n-hop { animation: ponder 2.2s ease-in-out infinite; }

/* listening: wide awake, a soft pulse */
[data-mood="listening"] .n-eye { transform: scale(1.14); }
[data-mood="listening"] .n-ring { animation: ring 1.6s var(--glide) infinite; }
[data-mood="listening"] .n-body { animation-duration: 1.6s; }

/* happy: smiling eyes and a hop */
[data-mood="happy"] .n-pill { transform: scaleY(0); }
[data-mood="happy"] .n-arc { stroke-dashoffset: 0; transition-delay: 90ms; }
[data-mood="happy"] .n-hop { animation: hop 760ms var(--spring); }
[data-mood="happy"] .n-shadow { animation: shadow-hop 760ms var(--spring); }

/* concerned: worried eyes, a little lower */
[data-mood="concerned"] .n-eye-l { transform: translateY(3px) rotate(13deg) scaleY(0.86); }
[data-mood="concerned"] .n-eye-r { transform: translateY(3px) rotate(-13deg) scaleY(0.86); }
[data-mood="concerned"] .n-hop { transform: translateY(2px); }
[data-mood="concerned"] .n-body { animation-duration: 7s; }

/* sad: lower still, eyes downcast */
[data-mood="sad"] .n-face { transform: translate(0, 6px); }
[data-mood="sad"] .n-eye-l { transform: rotate(22deg) scaleY(0.58); }
[data-mood="sad"] .n-eye-r { transform: rotate(-22deg) scaleY(0.58); }
[data-mood="sad"] .n-hop { transform: translateY(5px) scale(1.02, 0.97); }

/* sleepy: eyes closed, slow deep breaths, floating z's */
[data-mood="sleepy"] .n-lid { transform: scaleY(0.1); transition-duration: 1.6s; }
[data-mood="sleepy"] .n-face { transform: translate(0, 4px); transition-duration: 1.6s; }
[data-mood="sleepy"] .n-body { animation: breathe-deep 6.5s ease-in-out infinite; }
[data-mood="sleepy"] .n-z { animation: snooze 4.2s ease-in-out infinite; }
[data-mood="sleepy"] .n-z1 { animation-delay: 1.4s; }
[data-mood="sleepy"] .n-z2 { animation-delay: 2.8s; }

/* speaking: a gentle bounce in time with talking */
[data-mood="speaking"] .n-hop { animation: talk 520ms ease-in-out infinite; }
[data-mood="speaking"] .n-eye { transform: scaleY(0.94); }

/* surprised: eyes pop, squash and stretch */
[data-mood="surprised"] .n-eye { transform: scale(1.3); transition-duration: 180ms; }
[data-mood="surprised"] .n-hop { animation: squash 640ms var(--spring); }
[data-mood="surprised"] .n-shadow { animation: shadow-hop 640ms var(--spring); }

/* ---------------------------------------------------------------- motion */

@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-1.5px) scale(1.008, 1.014); } }
@keyframes breathe-deep { 0%, 100% { transform: scale(1.01, 0.985); } 50% { transform: scale(0.995, 1.025); } }
@keyframes shadow-breathe { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.96); opacity: 0.85; } }
@keyframes blink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(0.07); } }
@keyframes tick { 50% { transform: translateY(1.8px) scale(1.01, 0.985); } }
@keyframes scan {
  0%, 100% { transform: translate(-8px, -6px); }
  42%, 52% { transform: translate(8px, -6px); }
  70% { transform: translate(0, -2px); }
}
@keyframes ponder { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ring { from { transform: scale(1); opacity: 0.35; } to { transform: scale(1.28); opacity: 0; } }
@keyframes hop {
  0% { transform: none; }
  22% { transform: translateY(2px) scale(1.06, 0.93); }
  48% { transform: translateY(-16px) scale(0.96, 1.05); }
  74% { transform: translateY(0) scale(1.04, 0.96); }
  100% { transform: none; }
}
@keyframes shadow-hop { 48% { transform: scaleX(0.72); opacity: 0.45; } }
@keyframes squash {
  0% { transform: none; }
  25% { transform: scale(1.12, 0.88); }
  55% { transform: translateY(-8px) scale(0.94, 1.07); }
  80% { transform: scale(1.02, 0.98); }
  100% { transform: none; }
}
@keyframes snooze {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -18px) scale(1.1); }
}
@keyframes talk { 0%, 100% { transform: none; } 40% { transform: translateY(-2.5px) scale(0.99, 1.015); } 70% { transform: translateY(0.5px) scale(1.01, 0.99); } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translate(-50%, 12px) scale(0.97); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes enter {
  0% { opacity: 0; transform: translateY(26px) scale(0.55); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes open-eyes { from { transform: scaleY(0.06); } to { transform: scaleY(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes word-in { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
@keyframes shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes listen { from { transform: scale(0.92); opacity: 1; } to { transform: scale(1.32); opacity: 0; } }

@media (min-width: 40rem) {
  .welcome { padding-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  [data-mood="sleepy"] .n-z { animation: none; opacity: 0.8; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
:root[data-motion="reduce"] [data-mood="sleepy"] .n-z { animation: none; opacity: 0.8; }

/* Legal pages */
.legal-page { display: block; height: auto; min-height: 100dvh; }
.legal-home { text-decoration: none; color: inherit; }
.legal-start { display: flex; align-items: center; gap: 0.25rem; }
.legal-back { width: 2.5rem; margin-left: -0.6rem; color: var(--ink); }
.legal-back svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.legal-nav { display: flex; gap: 1rem; font-size: 0.9rem; }
.legal-nav a { color: var(--ink-3); text-decoration: none; }
.legal-nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.legal-doc { max-width: 44rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; line-height: 1.65; }
.legal-doc h3 { font-size: 1.15rem; }
.legal-doc > h3:first-child { font-size: 1.6rem; margin-bottom: 0.25rem; }
body.legal-page .brand { opacity: 1; transform: none; pointer-events: auto; }

/* Settings as a menu: grouped cards of rows that open their own page. */
.settings-sheet { background: var(--paper); }
.settings-sheet .sheet-head { min-height: 2.75rem; }
.settings-sheet .sheet-head h2 { flex: 1; margin: 0 0.25rem; }
.settings-page[hidden] { display: none; }
.menu-label { margin: 1.1rem 0.4rem 0.45rem; color: var(--ink-3); font-size: 0.86rem; font-weight: 500; }
.menu, .menu-card { margin: 0 0 0.75rem; border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--line); }
.menu { overflow: hidden; }
.menu:empty { display: none; }
.menu-card { padding: 0.9rem 1rem; }
.menu-row { display: flex; align-items: center; gap: 0.9rem; width: 100%; min-height: 3.4rem; padding: 0 1rem; border: 0; background: none; color: var(--ink); font: 500 1rem/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.menu-row { position: relative; }
.menu-row + .menu-row::before { content: ""; position: absolute; top: 0; left: 3.25rem; right: 1rem; height: 1px; background: var(--line); }
.menu-row:not(:has(.ico)) + .menu-row::before, .menu-row + .menu-row:not(:has(.ico))::before { left: 1rem; right: 1rem; }
.menu-row[hidden] { display: none; }
.menu-row:hover { background: var(--paper); }
.menu-row span { flex: 1; }
.menu-row .ico { flex: none; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-row .chev { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-row.danger { color: #B3261E; }
:root[data-theme="dark"] .menu-row.danger { color: #F2B8B5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-row.danger { color: #F2B8B5; } }
/* Phones: New chat becomes an icon so the header fits (docs/feature-audit.md F1).
   Sign in now sits above the message box, so the wordmark always fits. */
.new-chat-ico { display: none; width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 430px) {
  #newChat { width: 2.5rem; padding: 0; }
  #newChat .new-chat-label { display: none; }
  #newChat .new-chat-ico { display: block; }
}
.settings-sheet .account, .settings-sheet .plan-menu { margin-top: 0.25rem; }
.about-name { margin: 0 0 0.2rem; font-weight: 600; font-size: 1.05rem; }
.about .legal-notes, .about .legal-links { margin-left: 0; }
.settings-sheet #accountBtn { white-space: nowrap; flex-shrink: 0; }
.menu-row.plan-row { min-height: 4.2rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.menu-row .plan-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.plan-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-hint { color: var(--ink-3); font-size: 0.72rem; font-weight: 400; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-row .plan-cta { flex: none; padding: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.plan-text .plan-title, .plan-text .plan-hint { flex: none; }
@media (max-width: 360px) { .menu-row.plan-row { gap: 0.7rem; padding-right: 0.75rem; } .menu-row .plan-cta { padding: 0.35rem 0.65rem; font-size: 0.78rem; } .plan-hint { white-space: normal; } }
#accountsMenu .menu-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Google's official "G": rendered from Google's sign-in branding SVG with only
   its background square removed (not redrawn); transparent, so one image fits both themes. */
.google-btn { gap: 0.65rem; }
.g-logo { width: 1.25rem; height: 1.25rem; flex: none; }

/* Settings pages: descriptions, status lines, usage meters, payments */
.setting-hint { display: block; margin: 0.25rem 0 0; color: var(--ink-3); font-size: 0.84rem; font-weight: 400; line-height: 1.4; }
.setting-row label { flex: 1; min-width: 0; }
.menu-row span > .setting-hint { margin-top: 0.2rem; }
.menu-row:has(.setting-hint) { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.setting-note { margin: 0.25rem 0.4rem 1rem; color: var(--ink-3); font-size: 0.82rem; line-height: 1.45; }
.card-title { margin: 0 0 0.15rem; font-weight: 500; }
.card-title + .setting-hint + .card-title { margin-top: 0.9rem; }
.data-status { margin: 0 0.4rem 0.75rem; color: var(--ink-2); font-size: 0.86rem; line-height: 1.4; }
.data-status:empty { display: none; }
.usage-item { display: flex; flex-direction: column; gap: 0.45rem; }
.usage-top { display: flex; justify-content: space-between; gap: 1rem; font-weight: 500; }
.usage-value { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.usage-bar { height: 0.45rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.usage-fill { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.pay-row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.pay-row:first-child { border-top: 0; padding-top: 0; }
.pay-row:last-child { padding-bottom: 0; }
.pay-what { font-weight: 500; min-width: 0; }
.pay-info { min-width: 0; display:grid; gap:.15rem; }
.pay-receipt { grid-column: 2; grid-row: 1 / span 2; align-self:center; padding:0; white-space:nowrap; }

.pay-amount { font-weight: 500; white-space: nowrap; }
.pay-row .setting-hint { grid-column: 1 / -1; margin: 0; }
.retention-doc ul { margin: 0; padding-left: 1.1rem; }
.retention-doc li { margin: 0.3rem 0; font-size: 0.9rem; }

/* Dark mode: Settings is a softer charcoal than the chat, cards a step lighter. */
:root[data-theme="dark"] .settings-sheet { --paper: #1F1F21; --surface: #2B2B2E; --line: #3A3A3E; --ink-3: #9A9A95; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .settings-sheet { --paper: #1F1F21; --surface: #2B2B2E; --line: #3A3A3E; --ink-3: #9A9A95; }
}

/* Buttons sitting on the glass: soft frosted pills instead of outlines. */
.composer .tool, .composer .mic:not([aria-pressed="true"]) { background: var(--glass-chip); box-shadow: none; }
.composer .tool:hover { background: var(--glass-chip-hover); }
.composer .model-btn[aria-expanded="true"] { background: var(--ink); box-shadow: none; }

/* Professional AI: selector pill in the message box, its sheet, the bot accessory */
.nb .nb-ball { fill: var(--ink); }
.nb .nb-eye, .nb .nb-acc { fill: var(--on-ink); }
.nb .nb-line { fill: none; stroke: var(--on-ink); stroke-width: 7; stroke-linecap: round; }
.nb .nb-ink { fill: var(--ink); }
.nb .nb-line-ink { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.composer .pro-btn { display: inline-flex; align-items: center; width: auto; max-width: 11rem; gap: 0.45rem; padding: 0 0.85rem 0 0.4rem; border-radius: 999px; font: 500 0.84rem/1 var(--sans); }
.composer .pro-btn { flex: 0 1 auto; min-width: 2.5rem; }
@media (max-width: 360px) { .composer .pro-btn { width: 2.5rem; padding: 0; justify-content: center; } .pro-btn .pro-label { display: none; } }
.text-btn { white-space: nowrap; }
.composer .pro-btn:active { transform: scale(0.96); }
.pro-btn .pro-ico { display: grid; place-items: center; flex: none; }
.pro-btn .nb { width: 1.6rem; height: 1.6rem; }
.pro-btn .pro-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-btn:not(.is-on) { color: var(--ink-2); }
.brand { position: relative; }
.pro-badge { position: absolute; left: 0; top: 50%; width: 1.9rem; transform: translateY(-50%); pointer-events: none; opacity: 0; transition: opacity 220ms var(--glide); }
.pro-badge.is-shown { opacity: 1; }
.pro-badge .nb-overlay { display: block; width: 1.9rem; height: auto; }
.pro-badge b { position: absolute; right: -0.4rem; bottom: -0.2rem; min-width: 0.95rem; height: 0.95rem; padding: 0 0.2rem; border-radius: 999px; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); font: 500 0.56rem/0.95rem var(--sans); text-align: center; }
.pro-used { margin: 0.35rem 0 0; color: var(--ink-3); font-size: 0.78rem; }
.pro-sheet .setting-row { margin-bottom: 0.75rem; }
.pro-modes { margin-bottom: 0.4rem; }
.pro-search { width: 100%; min-height: 2.75rem; margin: 0.25rem 0 0.6rem; padding: 0 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.92rem; }
.pro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.pro-actions .btn { font-weight: 500; }
.pro-count { flex: 1 1 100%; color: var(--ink-3); font-size: 0.82rem; }
.pro-group { margin: 0 0 0.75rem; padding: 0.3rem 0; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); min-width: 0; }
.pro-group-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; }
.pro-group-head small { margin-left: auto; color: var(--ink-3); font-size: 0.74rem; font-weight: 400; white-space: nowrap; }
.pro-row { display: flex; align-items: center; gap: 0.25rem; padding-right: 0.4rem; border-top: 1px solid var(--line); }
.pro-row label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 0.65rem; padding: 0.55rem 0.9rem; cursor: pointer; }
.pro-row label > span:last-child { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pro-face { flex: none; display: grid; place-items: center; }
.pro-face .nb { width: 1.75rem; height: 1.75rem; }
.pro-row strong { font-weight: 450; font-size: 0.9rem; }
.pro-row small { color: var(--ink-3); font-size: 0.76rem; line-height: 1.35; }
.pro-group input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); }
.pro-star { flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 1rem; cursor: pointer; }
.pro-star[aria-pressed="true"] { color: var(--ink); }
.pro-star:focus-visible, .pro-group input:focus-visible, .pro-search:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pro-sheet #proDone { margin-top: 0.5rem; font-weight: 500; }

/* Memory: the one-time question above the message box, and note editing */
.consent { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 0 0.6rem; padding: 0.9rem 2.6rem 0.9rem 1rem; border: 0.5px solid var(--glass-line); border-radius: 1.25rem;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.45); animation: block-in 360ms var(--glide) both; }
.consent-text { flex: 1 1 15rem; min-width: 0; }
.consent h2 { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 500; }
.consent p { margin: 0; color: var(--ink-2); font-size: 0.84rem; line-height: 1.4; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent-actions .btn { font-weight: 500; }
.consent-close { position: absolute; top: 0.35rem; right: 0.35rem; width: 2.5rem; }
/* In-app notices: one at a time, same card as the memory question */
.notice-kind { display: block; margin-bottom: 0.15rem; color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.02em; }
.notice-card[data-type="security"], .notice-card[data-type="error"], .notice-card[data-type="warning"] { border-color: var(--ink-3); }
.notice-card h2 { font-weight: 500; }
.notices-always { margin: 0.6rem 0.25rem 0; }
.memory-edit { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--paper); color: var(--ink); font: inherit; }

/* Replies as they are written, Stop, Retry, Regenerate and Edit */
.send .stop-ico { display: none; }
.send .dictate-ico { display: block; }
.send .send-ico { display: none; }
.send.has-text .dictate-ico, .send.is-stop .dictate-ico { display: none; }
.send.has-text .send-ico { display: block; }
.send svg rect { fill: currentColor; stroke: none; }
.send.is-stop { background: var(--ink); color: var(--on-ink); }
.send.is-stop .send-ico { display: none; }
.send.is-stop .stop-ico { display: block; }
/* Dictating: the button stops listening, so it shows Stop, even after words arrive. */
.send.is-listening .dictate-ico, .send.is-listening .send-ico { display: none; }
.send.is-listening .stop-ico { display: block; }
.msg.is-live .msg-body { white-space: pre-wrap; }
/* A reply fades in as it appears (live text, or a reply shown at once). */
.msg.assistant.is-new { animation: fade-in 360ms var(--glide) both; }
.msg.user { position: relative; }
.edit-msg { position: absolute; left: -2.6rem; bottom: 0.1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.edit-msg:hover, .edit-msg:focus-visible { color: var(--ink); background: var(--surface); }
.edit-msg svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.45rem 0.35rem; color: var(--ink-2); font-size: 0.82rem; }
.edit-bar[hidden] { display: none; }
.msg.problem .retry { margin-left: 0.6rem; vertical-align: middle; font-weight: 500; }

/* Chats and Library tabs; the Library */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; margin: 0 0 0.75rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.tab { min-height: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color 160ms, color 160ms; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lib-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem; }
.lib-select { flex: 1 1 8rem; min-width: 0; min-height: 2.5rem; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.88rem; }
.lib-tools .btn { font-weight: 500; }
.lib-hint { margin: 0 0.25rem 0.3rem; font-size: 0.78rem; }
.lib-open .history-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-back { padding: 0 0.25rem; margin: 0 0 0.4rem; color: var(--ink-2); }
.lib-title { margin: 0.2rem 0 0.1rem; font: 500 1.05rem/1.3 var(--round); overflow-wrap: anywhere; }
.lib-body { margin: 0.8rem 0; padding: 0.9rem 1rem; max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; }
.lib-pre { margin: 0; white-space: pre-wrap; font: 0.85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lib-label { display: block; margin: 0.5rem 0.25rem 0.3rem; color: var(--ink-2); font-size: 0.84rem; }
.lib-input { width: 100%; }
.lib-text { width: 100%; min-height: 10rem; padding: 0.6rem 0.75rem; line-height: 1.5; resize: vertical; margin-bottom: 0.6rem; }
.btn.danger { color: #B3261E; }
:root[data-theme="dark"] .btn.danger { color: #F2B8B5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.danger { color: #F2B8B5; } }

/* Projects */
.tabs[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.space-guest { padding: 0.4rem 0.25rem 0.6rem; }
.space-guest .btn { font-weight: 500; }
.tab[hidden] { display: none; }
.project-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Project expansion cards match the supplied reference: charcoal surface, thin outlines, white line icons. */
.prj-list-item { display: block; padding: 0.08rem 0; }
.prj-list-row { display: flex; align-items: center; gap: 0.25rem; }
.prj-list-row .history-open { min-width: 0; gap: 0.65rem; }
.prj-list-row .history-open::before { content: ""; flex: none; width: 1.8rem; height: 1.8rem; margin-right: 0.05rem; background: currentColor; opacity: 0.96; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5A2 2 0 0 1 5 5.5h4l2.2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 13v2m4-4v4m4-6v6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5A2 2 0 0 1 5 5.5h4l2.2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 13v2m4-4v4m4-6v6'/%3E%3C/svg%3E") center / contain no-repeat; }
.prj-expand { flex: none; width: 2.6rem; height: 2.6rem; color: var(--ink); transition: transform 180ms ease; }
.prj-expand svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prj-expand[aria-expanded="true"] { transform: rotate(180deg); }
.prj-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 0.6rem 0.25rem 0.8rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); animation: prj-actions-in 180ms ease both; overflow: visible; }
.prj-actions[hidden] { display: none; }
.prj-action { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.75rem; min-width: 0; min-height: 10.5rem; padding: 1.15rem 0.55rem 1rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--paper); color: var(--ink); text-align: center; font-family: var(--sans); cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.prj-action svg { flex: none; width: 2rem; height: 2rem; margin: 0.15rem 0 0.2rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.prj-action strong { display: block; font-size: clamp(0.95rem, 3.7vw, 1.2rem); line-height: 1.25; font-weight: 500; }
.prj-action .prj-action-description { display: block; max-width: 11ch; margin-top: auto; color: var(--ink-3); font-size: clamp(0.75rem, 2.9vw, 0.95rem); line-height: 1.45; overflow-wrap: anywhere; }
.prj-action:hover { background: var(--surface); border-color: var(--ink-3); }
.prj-action:active { transform: scale(0.985); }
.prj-action:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
.prj-list-item.is-expanded { background: transparent; border-radius: 0; }
@keyframes prj-actions-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 360px) { .prj-actions { gap: 0.45rem; } .prj-action { min-height: 9.5rem; padding-inline: 0.3rem; border-radius: 1rem; } .prj-action .prj-action-description { font-size: 0.72rem; } }
@media (prefers-reduced-motion: reduce) { .prj-expand, .prj-actions, .prj-action { transition: none; animation: none; } }
:root[data-motion="reduce"] .prj-expand, :root[data-motion="reduce"] .prj-actions, :root[data-motion="reduce"] .prj-action { transition: none; animation: none; }
.prj-desc { margin: 0.4rem 0 0.8rem; color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.prj-desc[hidden] { display: none; }
.lib-text.short { min-height: 4rem; }
.lib-label .setting-hint { margin-top: 0.15rem; font-size: 0.78rem; }
/* Library as storage: the keep-time card, photo thumbnails and the photo viewer */
.lib-keep { margin: 0 0 0.8rem; padding: 0.4rem 0.6rem 0.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); }
.lib-keep .lib-select { width: 100%; flex: none; margin-bottom: 0.4rem; }
.lib-keep .memory-edit { flex: 1 1 8rem; }
.lib-thumb { flex: none; width: 2.6rem; height: 2.6rem; margin-right: 0.6rem; border-radius: 0.6rem; object-fit: cover; background: var(--line); }
.lib-open { display: flex; align-items: center; }
.lib-open .lib-text-col { min-width: 0; flex: 1; display: flex; flex-direction: column; text-align: left; }
.lib-photo { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto; border-radius: 0.8rem; }
.lib-move { align-items: center; margin-top: 0.4rem; }
.lib-move .lib-label { margin: 0; }
.prj-save { margin-top: 0.4rem; }
.prj-task-add .memory-edit { flex: 1 1 10rem; }
.prj-tasks { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.prj-task { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.25rem 0 0.6rem; border-radius: 0.9rem; }
.prj-task input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); }
.prj-task-text { flex: 1; min-width: 0; font-size: 0.94rem; overflow-wrap: anywhere; cursor: pointer; }
.prj-task.is-done .prj-task-text { color: var(--ink-3); text-decoration: line-through; }
.prj-task-del { flex: none; width: 2.5rem; color: var(--ink-3); }
.prj-task-del svg { width: 0.95rem; height: 0.95rem; }
.prj-empty { padding: 0.3rem 0.6rem 0.6rem; }
.prj-danger { margin-top: 1.2rem; }



/* ---------------------------------------------------- files and questions in replies */

.file-card {
  display: flex; align-items: center; gap: 0.75rem; max-width: 32rem; margin: 0.6rem 0 0.2rem; padding: 0.7rem 0.8rem;
  border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); white-space: normal;
  animation: fade-in 260ms var(--glide) both;
}
.file-ext {
  flex: none; display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 0.3rem; border-radius: 0.8rem;
  background: var(--ink); color: var(--on-ink); font: 600 0.68rem/1 var(--sans); letter-spacing: 0.04em;
}
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.file-meta strong { font-size: 0.92rem; font-weight: 500; overflow-wrap: anywhere; }
.file-meta small { color: var(--ink-3); font-size: 0.78rem; }
.file-card .btn { flex: none; }
.file-card.is-offer { flex-wrap: wrap; }
.file-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ask-card { margin-top: 0.7rem; }
.ask-card .question input { display: block; }

/* the hands-free voice button sits beside the dictation mic */
.voice-btn svg { stroke-width: 2; }

/* ---------------------------------------------------- the character's mouth (voice screen only) */

.nasrin:not(.has-mouth) .n-mouth { display: none; }
.n-m-line { fill: none; stroke: var(--eye); stroke-width: 6.5; stroke-linecap: round; transition: opacity 180ms var(--glide); }
.n-m-flat, .n-m-frown { opacity: 0; }
.n-m-smile { opacity: max(0, calc(1 - var(--mouth, 0) * 5)); }
.n-m-open { fill: var(--eye); transform-origin: 50% 40%; transform: scale(calc(0.55 + var(--mouth, 0) * 0.45), var(--mouth, 0)); transition: transform 70ms linear; }

[data-mood="thinking"] .n-m-smile, [data-mood="typing"] .n-m-smile { opacity: 0; }
[data-mood="thinking"] .n-m-flat, [data-mood="typing"] .n-m-flat { opacity: 1; }
[data-emotion="concerned"] .n-m-smile, [data-emotion="sad"] .n-m-smile { opacity: 0; }
[data-emotion="concerned"] .n-m-frown, [data-emotion="sad"] .n-m-frown { opacity: 0.9; }
[data-mood="sad"] .n-m-smile { opacity: 0; }
[data-mood="sad"] .n-m-frown { opacity: 0.9; }

/* expressions while speaking */
[data-mood="speaking"][data-emotion="happy"] .n-pill { transform: scaleY(0); }
[data-mood="speaking"][data-emotion="happy"] .n-arc { stroke-dashoffset: 0; }
[data-mood="speaking"][data-emotion="concerned"] .n-eye-l { transform: translateY(3px) rotate(13deg) scaleY(0.9); }
[data-mood="speaking"][data-emotion="concerned"] .n-eye-r { transform: translateY(3px) rotate(-13deg) scaleY(0.9); }
[data-mood="speaking"][data-emotion="surprised"] .n-eye { transform: scale(1.18); }
.has-mouth[data-mood="speaking"] .n-hop { animation-duration: 900ms; }


/* NasrinAI Connect dashboard */
.connect-page { padding-bottom: 2rem; }
.connect-intro { display:flex; flex-direction:column; gap:.35rem; }
.connect-add { display:flex; flex-direction:column; gap:.7rem; }
.connect-input-row { display:flex; gap:.55rem; }
.connect-input-row input { flex:1; min-width:0; padding:.72rem .8rem; border:1px solid var(--line); border-radius:.8rem; background:var(--surface); color:var(--ink); font:inherit; outline:none; }
.connect-input-row input:focus { border-color:var(--glass-line-focus); box-shadow:0 0 0 3px var(--glass-line); }
.connect-sites { display:flex; flex-direction:column; gap:.65rem; }
.connect-site { display:flex; flex-direction:column; gap:.55rem; }
.connect-site-top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.connect-site-top strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.connect-status { flex:none; font-size:.75rem; padding:.28rem .55rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); }
.status-active { border-color:var(--ink-2); color:var(--ink); }
.status-failed { border-color:var(--ink-2); color:var(--ink); }
.connect-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding-top:.25rem; }
.connect-live { font-weight:500; font-size:.86rem; }
.connect-empty { color:var(--ink-2); }
.connect-token { display:block; max-width:100%; overflow:auto; padding:.55rem .65rem; border:1px dashed var(--line); border-radius:.65rem; background:var(--paper); user-select:all; font:500 .78rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }
.connect-ico { font-size:1rem; line-height:1; }
@media (max-width: 520px) {
  .connect-input-row { flex-direction:column; }
  .connect-input-row .btn { width:100%; }
  .connect-site-top { align-items:flex-start; flex-direction:column; gap:.4rem; }
}


.connect-config-form { display:flex; flex-direction:column; gap:.65rem; }
.connect-config-section { display:flex; flex-direction:column; gap:.7rem; }
.connect-config-site { display:flex; flex-direction:column; gap:.3rem; }
.connect-back { margin:0 0 .75rem; }
.connect-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.connect-role-grid label { display:flex; align-items:center; gap:.5rem; min-height:2.5rem; padding:.55rem .65rem; border:1px solid var(--line); border-radius:.7rem; font-size:.86rem; }
.connect-role-grid input { accent-color:currentColor; }
.connect-config-section select,
.connect-config-section textarea { width:100%; box-sizing:border-box; padding:.72rem .8rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); color:var(--ink); font:inherit; outline:none; }
.connect-config-section textarea { resize:vertical; min-height:5.5rem; }
.connect-config-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; padding:.25rem 0; }
@media (max-width:520px) { .connect-role-grid { grid-template-columns:1fr; } .connect-config-actions { align-items:stretch; flex-direction:column; } }


/* Settings and plans use a fixed shell. Normal pages scroll inside it; long
   legal documents live on their own HTML page and are intentionally exempt. */
.settings-sheet,
#plans {
  width: 100%;
  height: 86dvh;
  max-height: none;
  box-sizing: border-box;
  overflow: hidden;
}
#plans {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.settings-sheet {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
  font-size: 0.9rem;
}
.settings-sheet .sheet-grip {
  flex: none;
  margin: 0.1rem auto 0.55rem;
}
.settings-sheet .sheet-head {
  flex: none;
  min-height: 2.75rem;
  margin-bottom: 0.25rem;
  padding: 0;
}
.settings-sheet .sheet-head h2 {
  font-size: 1.12rem;
  line-height: 1.2;
}
.settings-sheet .settings-page {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.15rem 0.5rem;
}
.settings-sheet .menu-label {
  margin: 0.8rem 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 500;
}
.settings-sheet .menu-card {
  padding: 0.7rem 0.8rem;
}
.settings-sheet .menu-row {
  min-height: 2.9rem;
  gap: 0.7rem;
  padding: 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.25;
}
.settings-sheet .menu-row .ico {
  width: 1.2rem;
  height: 1.2rem;
}
.settings-sheet .menu-row .chev {
  width: 0.95rem;
  height: 0.95rem;
}
.settings-sheet .setting-row {
  gap: 0.8rem;
}
.settings-sheet .setting-hint {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  line-height: 1.32;
}
.settings-sheet .account-label {
  font-size: 0.9rem;
}
.settings-sheet .account-hint {
  font-size: 0.74rem;
  line-height: 1.3;
}
.settings-sheet .btn {
  min-height: 2.35rem;
  padding: 0 0.9rem;
  font-size: 0.84rem;
}
.settings-sheet .text-btn {
  min-height: 2.25rem;
  padding: 0 0.65rem;
  font-size: 0.84rem;
}
.settings-sheet .group {
  padding: 0.75rem 0;
}
.settings-sheet .group legend {
  margin-bottom: 0.5rem;
  font-size: 0.74rem;
}
.settings-sheet .data-row {
  padding: 0.6rem 0.2rem;
  font-size: 0.88rem;
}
.settings-sheet .legal-links,
.settings-sheet .legal-notes {
  font-size: 0.74rem;
  line-height: 1.35;
}
.settings-sheet .terms-notes {
  font-size: 0.8rem;
  line-height: 1.38;
}
.settings-sheet .terms-note,
.settings-sheet .signin-lede {
  font-size: 0.82rem;
}
.settings-sheet .signin-form label {
  font-size: 0.78rem;
}
.settings-sheet .signin-form input {
  min-height: 2.75rem;
  font-size: 0.9rem;
}
.settings-sheet .segmented span {
  padding: 0.42rem 0;
  font-size: 0.82rem;
}
.settings-sheet .account { position: relative; }
.settings-sheet .account-open {
  display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem;
  margin-left: auto; border: 0; border-radius: .7rem; background: transparent; color: var(--ink-2); cursor: pointer;
}
.settings-sheet .account-open:hover { background: var(--paper); color: var(--ink); }
.settings-sheet .account-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.settings-sheet .account-open .chev { width: 1rem; height: 1rem; }
.space-entry-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .14rem; }
.space-entry-text small { color: var(--ink-3); font-size: .72rem; line-height: 1.25; font-weight: 450; }
.space-ico { font-size: 1rem; line-height: 1; }
.space-lede { margin: .15rem .2rem .7rem; color: var(--ink-2); font-size: .8rem; line-height: 1.4; }
.space-apps .menu-row { min-height: 3.15rem; }
.space-status {
  flex: none; padding: .22rem .48rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-3); font-size: .68rem; font-weight: 500;
}
.account-detail { display: flex; flex-direction: column; gap: .2rem; }
.account-detail strong { font-size: .9rem; overflow-wrap: anywhere; }
.account-switch-menu[hidden], #accountSwitchMenu[hidden] { display: none; }
#accountActionsMenu .ico { display: grid; place-items: center; font-size: 1rem; }
.settings-sheet .switch {
  transform: scale(0.9);
  transform-origin: center right;
}
@media (min-width: 40rem) {
  .settings-sheet,
  #plans {
    width: 26rem;
    height: 36rem;
  }
  .settings-sheet { padding: 0.75rem; }
}

\n.plan-card .btn { margin-top: 0.8rem; width: 100%; }
.plan-term {
  display:flex; gap:.35rem; margin-top:.75rem;
  padding:.2rem; border:1px solid var(--line); border-radius:.75rem;
}
.plan-term button {
  flex:1; min-width:0; padding:.42rem .5rem; border:0; border-radius:.55rem;
  background:transparent; color:var(--ink-2); font:500 .76rem/1.2 var(--sans); cursor:pointer;
}
.plan-term button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.plan-term button:disabled { opacity:.45; cursor:not-allowed; }
\n
/* Settings v2: compact, iOS-style grouping without nested card overload. */
#settings .settings-page { padding-bottom: 1.25rem; }
#settings .menu-label { margin: .8rem .2rem .38rem; font-size: .72rem; letter-spacing: .01em; }
#settings .menu { margin-bottom: .55rem; border-radius: 1rem; }
#settings .menu-row { min-height: 3rem; padding: .62rem .78rem; gap: .72rem; }
#settings .menu-row .ico { width: 1.45rem; height: 1.45rem; flex: 0 0 1.45rem; }
#settings .menu-row .chev { width: .95rem; height: .95rem; }
#settings .menu-card.account { padding: .78rem .9rem; border-radius: 1rem; }
#settings .account-label { font-size: .93rem; }
#settings .account-hint { font-size: .72rem; }
#settings .account-open {
  display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem;
  margin-left: auto; border: 0; border-radius: .7rem; background: transparent; color: var(--ink-2); cursor: pointer;
}
#settings .account-open:hover { background: var(--paper); color: var(--ink); }
#settings .account-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#settings .account-open .chev { width: 1rem; height: 1rem; }
#settings .space-entry-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .14rem; }
#settings .space-entry-text small { color: var(--ink-3); font-size: .72rem; line-height: 1.25; font-weight: 450; }
#settings .space-ico { font-size: 1rem; line-height: 1; }
#settings .space-lede { margin: .05rem .15rem .55rem; color: var(--ink-2); font-size: .76rem; line-height: 1.4; }
#settings .space-status-message { min-height: 0; margin: 0 .15rem .5rem; color: var(--ink-3); font-size: .72rem; line-height: 1.35; }
#settings .space-apps { margin-bottom: .65rem; }
#settings .space-apps .menu-row { min-height: 3.05rem; }
#settings .space-status {
  flex: none; padding: .22rem .48rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-3); font-size: .68rem; font-weight: 500;
}
#settings .account-detail { display: flex; flex-direction: column; gap: .2rem; padding: .78rem .9rem; }
#settings .account-detail strong { font-size: .9rem; overflow-wrap: anywhere; }
#settings .account-detail .setting-hint { font-size: .72rem; line-height: 1.35; }
#settings #accountActionsMenu { margin-top: .55rem; }

/* Compact Settings hierarchy */
.settings-sheet .menu-label { margin: .8rem .2rem .38rem; font-size: .72rem; }
.settings-sheet .menu { margin-bottom: .55rem; border-radius: 1rem; }
.settings-sheet .menu-row { min-height: 3rem; padding: .62rem .9rem; gap: .72rem; }
.settings-sheet .menu-row .ico { width: 1.45rem; height: 1.45rem; flex: 0 0 1.45rem; }
.settings-sheet .menu-row .chev {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  stroke-width: 2;
}
.settings-sheet .menu-row + .menu-row::before { left: 3.15rem; right: .9rem; }
.settings-sheet .menu-row:not(:has(.ico)) + .menu-row::before,
.settings-sheet .menu-row + .menu-row:not(:has(.ico))::before { left: .9rem; right: .9rem; }
.settings-sheet .menu-card.account { padding: .78rem .9rem; border-radius: 1rem; }
.settings-sheet .account-label { font-size: .93rem; }
.settings-sheet .account-hint { font-size: .72rem; }
.settings-sheet .account-open {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem;
  margin-left: auto; border: 0; border-radius: .7rem; background: transparent; color: var(--ink-2); cursor: pointer;
}
.settings-sheet .account-open:hover { background: var(--paper); color: var(--ink); }
.settings-sheet .account-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.settings-sheet .account-open .chev { width: 1rem; height: 1rem; }
.settings-sheet .space-entry-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .12rem; }
.settings-sheet .space-entry-text small { color: var(--ink-3); font-size: .7rem; line-height: 1.25; font-weight: 450; }
.settings-sheet .space-lede { margin: .05rem .15rem .55rem; font-size: .76rem; line-height: 1.4; }
.settings-sheet .space-apps .menu-row { min-height: 3rem; }
.settings-sheet #planRow { display: none !important; }
.settings-sheet #accountActionsMenu { margin-top: .55rem; }

/* Compact Settings + voice dock refinements. */
.settings-sheet .menu-label { margin:.72rem .2rem .3rem; font-size:.7rem; }
.settings-sheet .menu { margin-bottom:.5rem; }
.settings-sheet .menu-row { min-height:2.7rem; padding:.45rem .75rem; gap:.65rem; }
.settings-sheet .menu-row .ico { width:1.2rem; height:1.2rem; flex:0 0 1.2rem; }
.settings-sheet .menu-row .chev { width:16px; height:16px; flex:0 0 16px; margin-left:auto; }
.settings-sheet .menu-row + .menu-row::before { left:3.05rem; right:.75rem; }
.settings-sheet .menu-row:not(:has(.ico)) + .menu-row::before,.settings-sheet .menu-row + .menu-row:not(:has(.ico))::before { left:.75rem; right:.75rem; }
.settings-sheet .space-entry-text small { font-size:.68rem; line-height:1.2; }

/* Voice provider catalog + real language selector */
.language-card{display:flex;flex-direction:column;gap:.75rem}.language-card label{font-weight:500}.language-select{width:100%;min-height:3rem;padding:0 2.6rem 0 .9rem;border:1px solid var(--line);border-radius:.9rem;background:var(--paper);color:var(--ink);font:500 .95rem/1 var(--sans)}.language-select:focus{outline:none;border-color:var(--ink-3)}.voice-catalog-note{margin:0;line-height:1.45}.voice.is-unavailable{opacity:.48}.voice .play:disabled{opacity:.35;cursor:not-allowed}.voice-selected{min-width:4.5rem;text-align:center}


/* Settings appearance — anchored at the very bottom of the main settings page. */
.settings-appearance{
  margin:.75rem .05rem .15rem;
  padding:.65rem .05rem .2rem;
  border-top:1px solid var(--line);
}
.settings-appearance-head{padding:0 .15rem .25rem}
.settings-appearance .menu-label{margin:.05rem 0 .16rem}
.appearance-control{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.2rem;
  margin:0;
  padding:.22rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:color-mix(in srgb,var(--surface) 82%,var(--paper));
  isolation:isolate;
}
.appearance-option{
  position:relative;
  min-width:0;
  cursor:pointer;
  user-select:none;
}
.appearance-option input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.appearance-option-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.42rem;
  min-height:2.7rem;
  padding:0 .5rem;
  border-radius:.78rem;
  color:var(--ink-2);
  font-size:.78rem;
  font-weight:500;
  transition:color .24s ease,transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease,box-shadow .24s ease;
}
.appearance-option-inner svg{
  width:1rem;height:1rem;flex:0 0 1rem;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.appearance-option:hover .appearance-option-inner{
  color:var(--ink);
  transform:translateY(-1px);
}
.appearance-option input:checked + .appearance-option-inner{
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 .35rem 1rem rgba(0,0,0,.08),inset 0 0 0 1px var(--line);
  transform:translateY(0);
}
.appearance-option input:focus-visible + .appearance-option-inner{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .appearance-option-inner{transition:none}
}
@media (max-width:390px){
  .appearance-option-inner{gap:.3rem;padding:0 .28rem;font-size:.72rem}
  .appearance-option-inner svg{width:.92rem;height:.92rem;flex-basis:.92rem}
}
@media (min-width:700px){
  .appearance-control{max-width:32rem}
}

/* iOS Home Screen apps may report a different display mode/viewport than Safari.
   Keep the Settings section rhythm content-driven in both standalone variants. */
@media (display-mode: standalone), (display-mode: fullscreen){
  .settings-sheet .settings-appearance{margin-top:.75rem}
}


/* Continuous composer dictation — scoped only to the existing composer. */
.composer.is-listening {
  border-color: color-mix(in srgb, #1683ff 52%, var(--glass-line-focus));
  box-shadow:
    0 0 0 1px rgba(22, 131, 255, 0.16),
    0 0 24px rgba(22, 131, 255, 0.20),
    0 0 44px rgba(22, 131, 255, 0.10),
    0 22px 44px -26px rgba(0, 0, 0, 0.45);
  animation: composer-voice-pulse 2.4s ease-in-out infinite;
}
/* The dictation sound wave (voice-wave.js). It spans the composer from border to
   border, thinning out toward both sides. It is a row of its own between the text
   and the buttons: closed (no height) until you listen, then it opens, so the text
   box moves up and words never run under the wave. The wave is --ink: black on
   Light, white on Dark. */
.voice-frequency-wave {
  flex: none;
  align-self: stretch;
  height: 0;
  margin: 0 -0.5rem;            /* out to the composer's borders; the ends thin out to nothing */
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: height 260ms var(--glide), margin 260ms var(--glide), opacity 220ms ease;
}
.voice-frequency-wave.is-active {
  height: 2.7rem;
  margin: 0.2rem -0.5rem 0.4rem;
  opacity: 1;
}
.voice-frequency-wave svg {
  display: block;
  width: 100%;
  height: 2.7rem;
  overflow: visible;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .voice-frequency-wave svg { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .voice-frequency-wave svg { mix-blend-mode: screen; }
}
.voice-frequency-wave .vw-fill { fill: var(--ink); stroke: none; }
.voice-frequency-wave .vw-glow,
.voice-frequency-wave .vw-line { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.voice-frequency-wave .vw-glows { opacity: 0.3; }
:root[data-theme="dark"] .voice-frequency-wave .vw-glows { opacity: 0.6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .voice-frequency-wave .vw-glows { opacity: 0.6; }
}
@keyframes composer-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(22,131,255,.10), 0 0 18px rgba(22,131,255,.13), 0 22px 44px -26px rgba(0,0,0,.45); }
  50% { box-shadow: 0 0 0 1px rgba(22,131,255,.22), 0 0 32px rgba(22,131,255,.25), 0 22px 44px -26px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce) {
  .composer.is-listening { animation: none; }
  .voice-frequency-wave { transition: none; }
}


/* Keep the signed-in account chevron crisp and the add-account icon consistent. */
#accountOpen .chev { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#accountAddBtn .account-add-ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


/* NasrinAI Space: compact monochrome app launcher. */
#pageSpace .space-app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: .15rem 0 .75rem;
}
#pageSpace .space-app-tile {
  display: flex;
  min-width: 0;
  min-height: 7.5rem;
  padding: .85rem .35rem .75rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .65rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--ink);
  font: 500 .8rem/1.2 var(--sans);
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
#pageSpace .space-app-tile:hover { background: var(--paper); border-color: var(--ink-3); }
#pageSpace .space-app-tile:active { transform: scale(.975); }
#pageSpace .space-app-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#pageSpace .space-app-logo {
  display: block;
  width: 3.65rem;
  height: 3.65rem;
  flex: 0 0 3.65rem;
  object-fit: contain;
  border-radius: .85rem;
}
/* Invert monochrome app badges in light mode; preserve the supplied themed Cloud art. */
#pageSpace .space-app-logo { transition: filter 160ms ease; }
html[data-theme="light"] #pageSpace .space-app-logo:not(.space-app-logo-empty):not(.space-cloud-logo) { filter: invert(1); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) #pageSpace .space-app-logo:not(.space-app-logo-empty):not(.space-cloud-logo) { filter: invert(1); }
}
.space-brand-lede { display: flex; align-items: center; gap: .65rem; margin: .05rem .15rem .55rem; min-width: 0; }
#pageSpace .space-brand-icon { display: block; width: 2rem; height: 2rem; flex: 0 0 2rem; object-fit: contain; border-radius: .55rem; }
#pageSpace .space-brand-lede .space-lede { margin: 0; }
#pageSpace .space-cloud-logo--light, #pageSpace .space-cloud-logo--dark { display: none; }
html[data-theme="light"] #pageSpace .space-cloud-logo--light { display: block; }
html[data-theme="dark"] #pageSpace .space-cloud-logo--dark { display: block; }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) #pageSpace .space-cloud-logo--light { display: block; }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) #pageSpace .space-cloud-logo--dark { display: block; }
}
#pageSpace .space-cloud-logo {
  background-color: #F1F1F1;
  object-position: center;
}
html[data-theme="dark"] #pageSpace .space-cloud-logo { background-color: #09090B; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) #pageSpace .space-cloud-logo { background-color: #09090B; }
}
#pageSpace .space-app-logo-empty { background: transparent; }
#pageSpace .space-app-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 340px) {
  #pageSpace .space-app-grid { gap: .45rem; }
  #pageSpace .space-app-tile { min-height: 6.75rem; padding-inline: .2rem; }
  #pageSpace .space-app-logo { width: 3.1rem; height: 3.1rem; flex-basis: 3.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  #pageSpace .space-app-tile { transition: none; }
}


/* Library / chat history sheet — fixed shell, independently scrolling content. */
#history {
  display: flex;
  flex-direction: column;
  height: 86dvh;
  max-height: none;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
}
#history .sheet-grip,
#history .sheet-head,
#history .tabs,
#history .space-guest {
  flex: 0 0 auto;
}
#history .sheet-head {
  min-height: 2.75rem;
  margin-bottom: 0.45rem;
}
#history .sheet-head h2 {
  font-size: 1.12rem;
  line-height: 1.2;
}
#history .tabs {
  gap: 0.25rem;
  margin-bottom: 0.65rem;
}
#history .tab {
  min-width: 0;
  min-height: 2.65rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.92rem;
}
#history > #chatsPane,
#history > #libraryPane,
#history > #projectsPane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.1rem 0.5rem;
}
#history .lib-hint {
  line-height: 1.45;
}
#history .lib-keep {
  padding: 0.65rem 0.75rem 0.5rem;
  margin-bottom: 0.75rem;
  border-radius: 1.1rem;
}
#history .lib-keep .lib-label {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
}
#history .lib-keep .lib-select {
  min-height: 2.8rem;
  margin-bottom: 0.35rem;
  padding-inline: 0.9rem;
  font-size: 0.94rem;
}
#history #libSearch {
  width: 100%;
  min-height: 2.8rem;
  margin: 0 0 0.65rem;
  border-radius: 999px;
}
#history #libList {
  margin-top: 0.3rem;
}
#history #libList .history-open {
  gap: 0.7rem;
  padding: 0.85rem 0.4rem;
  border-radius: 0.8rem;
  line-height: 1.35;
}
#history #libList .history-title {
  display: block;
  font-size: 0.96rem;
}
#history #libList .history-time {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
}
#history .lib-thumb {
  width: 3.25rem;
  height: 3.25rem;
  margin-right: 0.15rem;
  border-radius: 0.75rem;
}
@media (min-width: 40rem) {
  #history {
    top: 7vh;
    width: min(42rem, calc(100vw - 2rem));
    height: 86dvh;
    border-radius: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #history { animation: none; }
}

/* Library layout correction: consistent spacing, no clipped summary, clear categories. */
#history { display:flex; flex-direction:column; height:86dvh; min-height:0; box-sizing:border-box; overflow:hidden; padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
#history .sheet-grip,#history .sheet-head,#history .tabs { flex:0 0 auto; }
#history #libraryPane { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:0 2px 12px; }
#history #libraryPane #libListView { padding:0; }
#history #libraryPane #libSummary { margin:0 2px 12px; font-size:12px; line-height:1.4; }
#history #libraryPane .lib-keep { margin:0 0 12px; padding:12px; }
#history #libraryPane .lib-keep .lib-label { margin:0 0 8px; }
#history #libraryPane #libSearch { width:100%; margin:0 0 12px; }
#history #libraryPane .lib-tools { display:flex; gap:8px; margin:0 0 10px; }
#history #libraryPane .lib-tools .lib-select { flex:1 1 0; min-width:0; }
#history #libraryPane #libList .history-open { min-height:68px; padding:12px 4px; gap:12px; }
#history #libraryPane #libList .history-item + .history-item { border-top:1px solid var(--line); }
#history #libraryPane #libList .history-time { white-space:normal; }
@media(max-width:380px) { #history { padding-inline:12px; } #history #libraryPane .lib-tools { gap:6px; } }


/* NasrinAI Space entry: logo, taller touch target, and a restrained galaxy sweep. */
#openNasrinSpace {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 5rem;
  padding: 0.8rem 1.1rem;
}
#openNasrinSpace > * {
  position: relative;
  z-index: 1;
}
#openNasrinSpace .space-entry-logo {
  display: block;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  object-fit: cover;
  border-radius: 0.72rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 78%, transparent);
}
#openNasrinSpace::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -55%;
  bottom: -55%;
  left: -58%;
  width: 58%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(149, 127, 255, 0.28) 0%, rgba(91, 174, 255, 0.18) 32%, transparent 72%),
    linear-gradient(100deg, transparent 4%, rgba(135, 117, 255, 0.08) 28%, rgba(112, 185, 255, 0.26) 49%, rgba(255, 255, 255, 0.18) 57%, transparent 88%);
  filter: blur(10px);
  transform: translateX(0);
  animation: space-entry-galaxy-flow 5.6s ease-in-out infinite;
}
#openNasrinSpace .chev {
  animation: space-entry-chevron-glow 5.6s ease-in-out infinite;
}
@keyframes space-entry-galaxy-flow {
  0%, 10% { opacity: 0; transform: translateX(0); }
  22% { opacity: 0.9; }
  68% { opacity: 0.72; }
  88%, 100% { opacity: 0; transform: translateX(280%); }
}
@keyframes space-entry-chevron-glow {
  0%, 72%, 100% { filter: drop-shadow(0 0 0 transparent); transform: translateX(0); }
  82% { filter: drop-shadow(0 0 7px rgba(150, 163, 255, 0.82)); transform: translateX(2px); }
  91% { filter: drop-shadow(0 0 3px rgba(133, 196, 255, 0.42)); transform: translateX(1px); }
}
@media (prefers-reduced-motion: reduce) {
  #openNasrinSpace::before,
  #openNasrinSpace .chev {
    animation: none;
  }
  #openNasrinSpace::before { display: none; }
}
:root[data-motion="reduce"] #openNasrinSpace::before,
:root[data-motion="reduce"] #openNasrinSpace .chev {
  animation: none;
}
:root[data-motion="reduce"] #openNasrinSpace::before { display: none; }


/* Composer toolbar enters as one coordinated group; no per-control stagger. */
.composer .tools {
  animation: composer-toolbar-together 280ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: 0ms !important;
  transition-delay: 0ms !important;
}
.composer .tools > :not(.spacer) {
  animation-delay: 0ms !important;
  transition-delay: 0ms !important;
}
@keyframes composer-toolbar-together {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .composer .tools {
    animation: none !important;
    transition: none !important;
  }
}
:root[data-motion="reduce"] .composer .tools {
  animation: none !important;
  transition: none !important;
}




/* Align the account switch chevron to the card's right inset and vertical center. */
#settings .menu-card.account { position: relative; }
#settings .menu-card.account .account-who { max-width: calc(100% - 3rem); }
#settings .menu-card.account #accountOpen { position: absolute; right: .9rem; top: 50%; margin-left: 0; transform: translateY(-50%); }




/* Small, muted AI accuracy note attached to each assistant reply, below its action icons. */
.reply-disclaimer {
  margin: 0.2rem 0 0;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
}

/* Mobile adaptive layout: safe-area-aware gutters without changing composer internals. */
@media (max-width: 47.99rem) {
  .bar, .log, .dock { min-width: 0; }
  .bar { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
  .log { padding-left: max(.85rem, env(safe-area-inset-left)); padding-right: max(.85rem, env(safe-area-inset-right)); overflow-x: clip; }
  .dock { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
}
@media (max-width: 47.99rem) and (max-height: 30rem) and (orientation: landscape) {
  .bar { padding-top: max(.35rem, env(safe-area-inset-top)); }
  .welcome { padding-top: .6rem; }
}

/* Tablet adaptive layout: use the available canvas without stretching content indefinitely. */
@media (min-width: 48rem) and (max-width: 69.99rem) {
  :root { --column: 56rem; }
  .bar { max-width: 56rem; padding-inline: clamp(1.25rem, 3vw, 2rem); }
  .log { max-width: 56rem; padding-inline: clamp(1.25rem, 3vw, 2rem); }
  .dock { max-width: 56rem; padding-inline: clamp(1.25rem, 3vw, 2rem); }
  .welcome { max-width: 42rem; margin-inline: auto; }
  .sheet { max-width: calc(100vw - 2rem); }
}

/* Desktop workspace navigation. Existing controls remain the behavior source of truth. */
.desktop-rail { display: none; }
@media (min-width: 70rem) {
  :root { --column: 58rem; }
  body { padding-left: 15.5rem; }
  .desktop-rail {
    position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; flex-direction: column;
    gap: .45rem; width: 15.5rem;
    padding: max(1.2rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    border-right: 1px solid var(--line); background: var(--paper); color: var(--ink);
  }
  .desktop-rail-brand { display: flex; align-items: center; gap: .7rem; min-height: 2.7rem; margin: 0 0 1.5rem; padding: .25rem .4rem; color: inherit; text-decoration: none; }
  .desktop-rail-mark { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); font: 600 1.05rem/1 var(--round); letter-spacing: -.05em; }
  .desktop-rail-wordmark { font: 500 1.12rem/1 var(--round); letter-spacing: -.025em; }
  .desktop-rail-section-label { padding: .15rem .65rem .45rem; color: var(--ink-3); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
  .desktop-rail-action { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 2.85rem; padding: .65rem .75rem; border: 1px solid transparent; border-radius: .85rem; background: transparent; color: var(--ink-2); text-align: left; font-size: .9rem; font-weight: 500; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
  .desktop-rail-action svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .desktop-rail-action:hover { background: var(--surface); color: var(--ink); }
  .desktop-rail-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .desktop-rail-primary { border-color: var(--line); background: var(--surface); color: var(--ink); }
  .desktop-rail-primary:hover { border-color: var(--ink-3); }
  .desktop-rail-spacer { flex: 1 1 auto; min-height: 1rem; }
  .desktop-rail-footnote { padding: .9rem .65rem .15rem; color: var(--ink-3); font-size: .72rem; line-height: 1.4; }
  .bar, .log { max-width: var(--column); }
  .bar { padding-inline: 1.5rem; }
  .log { padding-inline: 1.75rem; }
  .dock { left: 15.5rem; right: 0; width: auto; max-width: var(--column); padding-inline: 1.5rem; }
  /* Desktop composer spacing is measured from the viewport bottom.
     Hide the prewritten welcome prompts; keep the welcome hero intact. */
  body:not(.has-chat) .dock { bottom: 250px; }
  body.has-chat .dock { bottom: 100px; }
  body:not(.has-chat) .starters { display: none; }
  body:not(.has-chat) .composer { transform: none; }
  body.has-chat .composer { transform: none; }
  body:not(.has-chat) .brand { opacity: 1; transform: none; pointer-events: auto; }
  body:not(.has-chat) #newChat { display: inline-flex; }
}
@media (min-width: 70rem) and (max-aspect-ratio: 4/3) {
  :root { --column: 52rem; }
  .desktop-rail { width: 14rem; }
  body { padding-left: 14rem; }
  .dock { left: 14rem; }
}
@media (min-width: 70rem) and (max-height: 40rem) {
  .desktop-rail { padding-top: .65rem; padding-bottom: .65rem; }
  .desktop-rail-brand { margin-bottom: .45rem; }
  .desktop-rail-section-label { padding-bottom: .2rem; }
  .desktop-rail-action { min-height: 2.45rem; }
}
@media (prefers-reduced-motion: reduce) { .desktop-rail-action { transition: none; } }
:root[data-motion="reduce"] .desktop-rail-action { transition: none; }


/* Usage & Billing: compact inline refresh indicator and distinct sections. */
.usage-section { margin: 0; }
.usage-section-heading { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; min-height: 1.6rem; }
.usage-section-heading .menu-label { margin: 0; line-height: 1.2; }
.usage-loading { display: inline-flex; flex: 0 0 1rem; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--ink-3); vertical-align: middle; }
.usage-loading[hidden] { display: none !important; }
.usage-loading-icon { display: block; width: .85rem; height: .85rem; animation: usage-spin .8s linear infinite; transform-origin: center; }
@keyframes usage-spin { to { transform: rotate(360deg); } }
.billing-section { padding-top: .1rem; }
.billing-current-card .card-title { margin-bottom: .25rem; }
@media (prefers-reduced-motion: reduce) { .usage-loading-icon { animation-duration: 1.8s; } }
:root[data-motion="reduce"] .usage-loading-icon { animation-duration: 1.8s; }

/* Show the signed-in user's current plan at the end of the Billing settings row. */
.settings-sheet .menu-row .billing-plan-label {
  flex: none;
  margin-left: auto;
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.settings-sheet .menu-row .billing-plan-label[hidden] { display: none; }

/* Design system: one pressed state and focus ring for every control
   (docs/redesign.md, R1). Reduce motion turns the scale off. */
:where(button, a[href], [role="button"], input, select, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(.icon-btn, .text-btn, .tool, .act, .starter, .btn, .mic, .send) { transition: transform var(--dur) var(--ease-spring), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
:where(.icon-btn, .text-btn, .act):active { transform: scale(0.94); background: var(--press); }
.menu-row:active { background: var(--press); }
.sheet { box-shadow: var(--elev-2); }
@media (prefers-reduced-motion: reduce) {
  :where(.icon-btn, .text-btn, .tool, .act, .starter, .btn, .mic, .send):active { transform: none; }
}
:root[data-motion="reduce"] :where(.icon-btn, .text-btn, .tool, .act, .starter, .btn, .mic, .send):active { transform: none; }

.billing-current-card .btn { margin-top: 0.6rem; }

/* Tables in replies: comparisons only, scroll sideways inside their own box
   on phones so the page never does. */
.rich .table-wrap { max-width: 100%; margin: 0.7rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 0.9rem; }
.rich .table-wrap:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
.rich table { width: 100%; border-collapse: collapse; font-size: 0.86rem; line-height: 1.45; }
.rich th, .rich td { min-width: 6rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.rich td code { white-space: nowrap; }
.rich th { color: var(--ink-2); font-weight: 500; background: var(--paper); white-space: nowrap; }
.rich tr:last-child td { border-bottom: 0; }
/* Touch targets (docs/feature-audit.md F2): on touch screens every control is
   at least 44 x 44 pt, Apple's minimum. Mouse layouts keep their compact sizes.
   Kept last so it wins over the rules it raises. */
@media (pointer: coarse) {
  .icon-btn, #newChat, .tool, .mic, .send, .act, .edit-msg { min-width: 2.75rem; min-height: 2.75rem; }
  .tool, .mic, .send { width: 2.75rem; height: 2.75rem; }
  .act { width: 2.75rem; height: 2.75rem; }
  .edit-msg { width: 2.75rem; height: 2.75rem; left: -3rem; }
  .starter, .btn, .listen, .composer .pro-btn, .rich .code-copy, .msg.problem .retry { min-height: 2.75rem; }
  .composer .pro-btn { min-width: 2.75rem; }
  .rich .code-copy { padding-inline: 0.85rem; }
  .reply-actions { flex-wrap: wrap; }
}

/* ======================================================================
   Themes (docs/themes.md). Appearance picks Light, Dark or System; Theme
   picks the colours: Monochrome (no data-palette: everything above), Orange,
   Charcoal or Galaxy. theme.js sets data-palette before the page is drawn.
   Each theme sets the page tokens for Light and Dark, plus --accent for the
   main actions (Send, buttons, switches, selected chips). Monochrome never
   gets here, so it is unchanged.
   ====================================================================== */

/* ---------- Orange: warm paper, orange actions ---------- */
:root[data-palette="orange"] {
  --paper: #FBF6F0; --surface: #FFFCF8; --ink: #1E1813; --ink-2: #4A3F36; --ink-3: #9A8D80; --line: #EBDFD2;
  --glass: rgba(251, 246, 240, 0.7); --glass-line: rgba(30, 24, 19, 0.08); --glass-line-focus: rgba(242, 107, 29, 0.35);
  --bg-glow: #FFE6CF; --press: rgba(242, 107, 29, 0.1);
  --accent: #F26B1D; --on-accent: #FFFFFF;
}
:root[data-palette="orange"][data-theme="dark"] {
  --paper: #181310; --surface: #231C17; --ink: #F8F0E8; --ink-2: #D6C6B8; --ink-3: #8F8073; --line: #3A2E25;
  --glass: rgba(40, 32, 26, 0.7); --glass-line: rgba(255, 255, 255, 0.07); --glass-line-focus: rgba(255, 128, 56, 0.4);
  --bg-glow: rgba(255, 122, 46, 0.14); --press: rgba(255, 128, 56, 0.14);
  --accent: #FF7A2E; --on-accent: #1A110B;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="orange"]:not([data-theme="light"]) {
    --paper: #181310; --surface: #231C17; --ink: #F8F0E8; --ink-2: #D6C6B8; --ink-3: #8F8073; --line: #3A2E25;
    --glass: rgba(40, 32, 26, 0.7); --glass-line: rgba(255, 255, 255, 0.07); --glass-line-focus: rgba(255, 128, 56, 0.4);
    --bg-glow: rgba(255, 122, 46, 0.14); --press: rgba(255, 128, 56, 0.14);
    --accent: #FF7A2E; --on-accent: #1A110B;
  }
}

/* ---------- Charcoal: cool greys, a deep charcoal at night ---------- */
:root[data-palette="charcoal"] {
  --paper: #ECEDEF; --surface: #F7F8F9; --ink: #1D2024; --ink-2: #42474E; --ink-3: #868C95; --line: #D8DBDF;
  --glass: rgba(236, 237, 239, 0.7); --glass-line: rgba(29, 32, 36, 0.08); --glass-line-focus: rgba(29, 32, 36, 0.2);
  --bg-glow: #FFFFFF; --press: rgba(29, 32, 36, 0.07);
  --accent: #2F343A; --on-accent: #F4F5F6;
}
:root[data-palette="charcoal"][data-theme="dark"] {
  --paper: #25282C; --surface: #2F3237; --ink: #ECEEF0; --ink-2: #BEC3C9; --ink-3: #7E858E; --line: #3C4046;
  --glass: rgba(47, 50, 55, 0.72); --glass-line: rgba(255, 255, 255, 0.08); --glass-line-focus: rgba(255, 255, 255, 0.2);
  --bg-glow: rgba(255, 255, 255, 0.06); --press: rgba(255, 255, 255, 0.09);
  --accent: #E4E7EA; --on-accent: #1D2024;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="charcoal"]:not([data-theme="light"]) {
    --paper: #25282C; --surface: #2F3237; --ink: #ECEEF0; --ink-2: #BEC3C9; --ink-3: #7E858E; --line: #3C4046;
    --glass: rgba(47, 50, 55, 0.72); --glass-line: rgba(255, 255, 255, 0.08); --glass-line-focus: rgba(255, 255, 255, 0.2);
    --bg-glow: rgba(255, 255, 255, 0.06); --press: rgba(255, 255, 255, 0.09);
    --accent: #E4E7EA; --on-accent: #1D2024;
  }
}

/* ---------- Galaxy: lavender by day, a starry night sky in Dark ---------- */
:root[data-palette="galaxy"] {
  --paper: #F3F1FA; --surface: #FBFAFF; --ink: #1A1630; --ink-2: #413A62; --ink-3: #8A84A6; --line: #E0DBEF;
  --glass: rgba(243, 241, 250, 0.7); --glass-line: rgba(26, 22, 48, 0.08); --glass-line-focus: rgba(109, 74, 255, 0.35);
  --bg-glow: #E4DAFF; --press: rgba(109, 74, 255, 0.1);
  --accent: #6D4AFF; --on-accent: #FFFFFF;
  --sky: radial-gradient(70% 45% at 85% -10%, rgba(109, 74, 255, 0.16), transparent 70%), radial-gradient(60% 40% at 0% 105%, rgba(64, 156, 255, 0.12), transparent 70%);
}
:root[data-palette="galaxy"][data-theme="dark"] {
  --paper: #0D0A1E; --surface: #181331; --ink: #F0EDFF; --ink-2: #C8C1EA; --ink-3: #8780AC; --line: #2B2448;
  --glass: rgba(24, 19, 49, 0.7); --glass-line: rgba(255, 255, 255, 0.08); --glass-line-focus: rgba(143, 115, 255, 0.45);
  --bg-glow: rgba(143, 115, 255, 0.18); --press: rgba(143, 115, 255, 0.16);
  --accent: #8F73FF; --on-accent: #0D0A1E;
  --sky:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 27% 62%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 43% 9%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 58% 41%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 71% 77%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 84% 28%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 93% 88%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 6% 83%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 35% 92%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(70% 45% at 85% -10%, rgba(143, 115, 255, 0.28), transparent 70%),
    radial-gradient(60% 40% at 0% 105%, rgba(64, 156, 255, 0.18), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="galaxy"]:not([data-theme="light"]) {
    --paper: #0D0A1E; --surface: #181331; --ink: #F0EDFF; --ink-2: #C8C1EA; --ink-3: #8780AC; --line: #2B2448;
    --glass: rgba(24, 19, 49, 0.7); --glass-line: rgba(255, 255, 255, 0.08); --glass-line-focus: rgba(143, 115, 255, 0.45);
    --bg-glow: rgba(143, 115, 255, 0.18); --press: rgba(143, 115, 255, 0.16);
    --accent: #8F73FF; --on-accent: #0D0A1E;
    --sky:
      radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.85), transparent),
      radial-gradient(1px 1px at 27% 62%, rgba(255, 255, 255, 0.7), transparent),
      radial-gradient(1.5px 1.5px at 43% 9%, rgba(255, 255, 255, 0.8), transparent),
      radial-gradient(1px 1px at 58% 41%, rgba(255, 255, 255, 0.6), transparent),
      radial-gradient(1.5px 1.5px at 71% 77%, rgba(255, 255, 255, 0.75), transparent),
      radial-gradient(1px 1px at 84% 28%, rgba(255, 255, 255, 0.7), transparent),
      radial-gradient(1px 1px at 93% 88%, rgba(255, 255, 255, 0.6), transparent),
      radial-gradient(1px 1px at 6% 83%, rgba(255, 255, 255, 0.65), transparent),
      radial-gradient(1.5px 1.5px at 35% 92%, rgba(255, 255, 255, 0.55), transparent),
      radial-gradient(70% 45% at 85% -10%, rgba(143, 115, 255, 0.28), transparent 70%),
      radial-gradient(60% 40% at 0% 105%, rgba(64, 156, 255, 0.18), transparent 70%);
  }
}
:root[data-palette="galaxy"] body { background: var(--sky), radial-gradient(130% 75% at 50% -25%, var(--bg-glow), transparent 70%) var(--paper); background-attachment: fixed; }

/* ---------- the accent on the main actions (themes only) ---------- */
:root[data-palette] .btn:not(.outline),
:root[data-palette] .send:not(:disabled),
:root[data-palette] .composer .send:not(:disabled),
:root[data-palette] .mic[aria-pressed="true"],
:root[data-palette] .segmented input:checked + span,
:root[data-palette] .answer-chip[aria-pressed="true"],
:root[data-palette] .composer .model-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-palette] .switch:checked,
:root[data-palette] .usage-fill { background: var(--accent); }
:root[data-palette] .msg-body.rich a { color: var(--accent); }
:root[data-palette] :where(button, a[href], [role="button"], input, select, textarea):focus-visible { outline-color: var(--accent); }

/* ---------- the Theme picker in Settings ---------- */
.palette-control { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.palette-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0.55rem 0.25rem; border-radius: 0.9rem; cursor: pointer; color: var(--ink-2); font: 500 0.78rem/1.1 var(--sans); }
.palette-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.palette-swatch { width: 2.1rem; height: 2.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform var(--dur, 220ms) var(--ease-spring, ease), box-shadow var(--dur-fast, 120ms) var(--ease, ease); }
.palette-swatch.mono { background: linear-gradient(135deg, #F4F4F1 0 50%, #0E0E0F 50% 100%); }
.palette-swatch.orange { background: radial-gradient(circle at 35% 30%, #FFB27A, #F26B1D 60%, #B9470B); }
.palette-swatch.charcoal { background: radial-gradient(circle at 35% 30%, #7E858E, #2F343A 60%, #1D2024); }
.palette-swatch.galaxy { background: radial-gradient(1px 1px at 30% 35%, #fff, transparent), radial-gradient(1px 1px at 65% 60%, #fff, transparent), radial-gradient(circle at 70% 25%, #8F73FF, #2B1F66 55%, #0D0A1E); }
.palette-option input:checked + .palette-swatch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); transform: scale(1.04); }
.palette-option input:focus-visible + .palette-swatch { outline: 2px solid var(--ink); outline-offset: 4px; }
.palette-option:has(input:checked) { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .palette-swatch { transition: none; } }
/* Optional bottom tab bar (docs/mobile-nav.md): phones and tablets, only when
   turned on in Settings > General (data-tabbar="on"). Desktop keeps its side rail. */
.tabbar { display: none; }
@media (max-width: 69.99rem) {
  /* Tab bar: fixed at the bottom, clear of the home indicator; the message box sits above it. */
  :root[data-tabbar="on"] { --tabbar-h: calc(3.4rem + env(safe-area-inset-bottom)); }
  :root[data-tabbar="on"] .tabbar { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 0.2rem max(0.5rem, env(safe-area-inset-right)) 0 max(0.5rem, env(safe-area-inset-left)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 0.5px solid var(--glass-line); }
  :root[data-tabbar="on"] .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 3.2rem; border: 0; background: none;
    color: var(--ink-3); font: 500 0.68rem/1.1 var(--sans); letter-spacing: 0.01em; transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease-spring); }
  :root[data-tabbar="on"] .tab-item svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  :root[data-tabbar="on"] .tab-item.is-active { color: var(--ink); }
  :root[data-tabbar="on"] .tab-item.is-active svg { stroke-width: 2; }
  :root[data-tabbar="on"] .tab-item:active { transform: scale(0.92); }
  /* The message box is drawn 1rem low (translateY), so the padding keeps it clear of the bar. */
  :root[data-tabbar="on"] .dock { bottom: var(--tabbar-h); padding-bottom: 1.5rem; }
  :root[data-tabbar="on"] .log { padding-bottom: calc(var(--dock-h, 7rem) + var(--tabbar-h) + 1.5rem); scroll-padding-bottom: calc(var(--dock-h, 7rem) + var(--tabbar-h) + 1rem); }
  :root[data-tabbar="on"] #settingsBtn { display: none; }
}
/* Only touch screens get an on-screen keyboard; a tablet with a keyboard keeps its tabs. */
@media (max-width: 69.99rem) and (pointer: coarse) {
  :root[data-tabbar="on"] body.is-typing .tabbar { display: none; }
  :root[data-tabbar="on"] body.is-typing .dock { bottom: 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
:root[data-motion="reduce"] .tab-item:active { transform: none; }

/* Menu button and drawer on phones and tablets (docs/mobile-nav.md). */
.menu-btn { display: none; }
.drawer, .drawer-scrim { display: none; }
@media (max-width: 69.99rem) {
  /* Phones and tablets: the header is just the menu and New chat (icon);
     Your chats and Settings live in the menu. */
  #historyBtn, #settingsBtn { display: none; }
  #newChat { width: 2.75rem; padding: 0; color: var(--ink); }
  #newChat .new-chat-label { display: none; }
  #newChat .new-chat-ico { display: block; }
  .menu-btn { display: inline-flex; margin-right: 0.15rem; color: var(--ink); }
  .menu-btn svg { stroke-width: 2; }
  .bar { gap: 0.25rem; }
  .drawer-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.32); animation: fade-in var(--dur, 220ms) var(--ease, ease) both; }
  .drawer:not([hidden]) {
    position: fixed; z-index: 41; top: 0; bottom: 0; left: 0; width: min(84vw, 21rem);
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: var(--surface); color: var(--ink); box-shadow: 12px 0 40px -18px rgba(0, 0, 0, 0.45);
    border-radius: 0 1.5rem 1.5rem 0; overflow: hidden;
    animation: drawer-in var(--dur-slow, 320ms) var(--ease, ease) both;
  }
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.drawer-title { margin: 0; font: 500 1.45rem/1.2 var(--round); letter-spacing: -0.015em; }
.drawer-search { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--paper); color: var(--ink); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-link, .drawer-chat, .drawer-more {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.6rem;
  border: 0; border-radius: 0.85rem; background: none; color: var(--ink); text-align: left; font: 500 1.02rem/1.25 var(--sans); cursor: pointer;
}
.drawer-link svg { flex: none; width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drawer-link:active, .drawer-chat:active, .drawer-more:active { background: var(--press); }
.drawer-link[hidden] { display: none; }
.drawer-recent { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.drawer-label { margin: 0 0.6rem 0.25rem; color: var(--ink-3); font: 500 0.74rem/1.2 var(--sans); }
.drawer-chats { margin: 0; padding: 0; list-style: none; }
.drawer-chat { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 450; }
.drawer-chat.is-current { background: var(--paper); }
.drawer-more { color: var(--ink-3); }
.drawer-more[hidden] { display: none; }
.drawer-status { margin: 0.25rem 0.6rem; color: var(--ink-3); font-size: 0.86rem; }
.drawer-status:empty { display: none; }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; }
.drawer-new { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3rem; padding: 0 1.4rem 0 1.15rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 500 1rem/1 var(--sans); box-shadow: var(--elev-1); cursor: pointer; }
.drawer-new svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer-new:active { transform: scale(0.96); }
.drawer-settings { width: 3rem; height: 3rem; border-radius: 50%; background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .drawer:not([hidden]), .drawer-scrim:not([hidden]) { animation: none; } }
:root[data-motion="reduce"] .drawer:not([hidden]), :root[data-motion="reduce"] .drawer-scrim:not([hidden]) { animation: none; }

/* iOS-style header icons (docs/redesign.md R3a). */
.bar .icon-btn, .bar #newChat { color: var(--ink-2); }
.bar .icon-btn svg, .bar .new-chat-ico, .desktop-rail-action svg { stroke-width: 1.6; }
.header-signin { white-space: nowrap; }
/* Owner (2026-10-12): Sign in stays in the header on every screen; on the
   narrowest phones the wordmark gives way so it fits. */
@media (max-width: 400px) {
  .bar:has(#headerSignIn:not([hidden])) .wordmark { display: none; }
}

/* Coding chat (Code in the menu): project + leave at the top right, menu at the left. */
.coding-bar { display: flex; align-items: center; gap: 0.25rem; }
.coding-bar[hidden] { display: none; }
.coding-project svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.coding-project:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.coding-mode .bar-actions > :not(#codingBar) { display: none; }
body.coding-mode #projectBar { display: none; }
.code-picker-lede { margin: 0 0 0.6rem; }
.code-picker-list { max-height: 45vh; overflow-y: auto; }
.code-picker-item.is-current { background: var(--paper); }
.code-picker-new { margin-top: 0.75rem; }
.code-picker-row { display: flex; gap: 0.5rem; align-items: center; }
.code-picker-row .lib-input { flex: 1; min-width: 0; margin: 0; }


/* Library glyph: one filled, theme-adaptive icon (menu, tab bar, Space), no background. */
svg.lib-glyph, .drawer-link svg.lib-glyph, :root[data-tabbar="on"] .tab-item svg.lib-glyph { fill: currentColor; stroke: none; }
svg.lib-glyph .lib-glyph-dim { opacity: .5; }
#pageSpace .space-app-glyph { padding: .35rem; box-sizing: border-box; color: var(--ink); background: transparent; filter: none !important; border-radius: 0; }

/* Status icons (done, failed, warning, secured, note, action) for replies:
   outline icons, coloured by meaning, readable in light and dark. */
:root { --st-ok: #15803d; --st-fail: #dc2626; --st-warn: #c2410c; --st-secure: #15803d; --st-info: #6b7280; --st-key: #b45309; }
:root[data-theme="dark"] { --st-ok: #4ade80; --st-fail: #f87171; --st-warn: #fb923c; --st-secure: #4ade80; --st-info: #a1a1aa; --st-key: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-ok: #4ade80; --st-fail: #f87171; --st-warn: #fb923c; --st-secure: #4ade80; --st-info: #a1a1aa; --st-key: #fbbf24; } }
.st-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.st-ok { color: var(--st-ok); } .st-fail { color: var(--st-fail); } .st-warn { color: var(--st-warn); }
.st-secure { color: var(--st-secure); } .st-info { color: var(--st-info); } .st-key { color: var(--st-key); }
.rich .st-line > .st-ico { margin-right: 0.45rem; }
.rich h3.st-line, .rich h4.st-line { display: flex; align-items: center; gap: 0; }
.rich .checks { padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.rich .checks-title { margin: 0 0 0.55rem; font-weight: 500; }
.rich .checks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.rich .check { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.rich .check .st-ico { width: 1.25rem; height: 1.25rem; }
.rich .check-text { flex: 1; min-width: 0; }
.rich .check-badge { flex: none; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.78em; font-weight: 500; white-space: nowrap; background: color-mix(in srgb, currentColor 12%, transparent); }
.st-badge-ok { color: var(--st-ok); } .st-badge-fail { color: var(--st-fail); } .st-badge-warn { color: var(--st-warn); }
.st-badge-secure { color: var(--st-secure); } .st-badge-info { color: var(--st-info); } .st-badge-key { color: var(--st-key); }

/* Coding chat: a compact, technical type scale (smaller text, plain sans
   headings, code chips), like a developer console. */
body.coding-mode .msg.assistant { font-family: var(--sans); font-size: 0.875rem; line-height: 1.6; }
body.coding-mode .msg.user { font-size: 0.875rem; }
body.coding-mode .rich h3, body.coding-mode .rich h4 { font: 500 0.95rem/1.35 var(--sans); letter-spacing: 0; }
body.coding-mode .rich h4 { font-size: 0.9rem; }
body.coding-mode .rich code { font-size: 0.82em; padding: 0.06rem 0.34rem; }
body.coding-mode .rich pre code { font-size: 0.78rem; }
body.coding-mode .rich .checks { padding: 0.75rem 0.85rem; }

/* Coding chat: the project's name sits under "Nasrin" at the top center; the
   folder button on the right switches project. */
.brand-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.brand-project { max-width: 11rem; margin-top: 0.12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; line-height: 1.1; color: var(--ink-3); }
.brand-project[hidden] { display: none; }
body.coding-mode .brand { opacity: 1; transform: none; pointer-events: auto; }

/* Lighter type everywhere (owner, 2026-10-12): browsers draw b, strong,
   headings and table headers at 700 by default; NasrinAI uses softer weights. */
b, strong, th, h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* Code chat logo: the animated pixel robot (owner, 2026-10-12). CSS picks the
   tile for the theme (light UI: dark robot on light; dark UI: the reverse) and
   a still one when motion is reduced. Animation is SMIL inside the SVG, so the
   strict CSP needs no inline styles. */
.code-logo { display: inline-block; flex: none; background: url(/space-logos/code-bot-light.svg) center / contain no-repeat; }
:root[data-theme="dark"] .code-logo { background-image: url(/space-logos/code-bot-dark.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code-logo { background-image: url(/space-logos/code-bot-dark.svg); } }
:root[data-motion="reduce"] .code-logo { background-image: url(/space-logos/code-bot-light-still.svg); }
:root[data-motion="reduce"][data-theme="dark"] .code-logo { background-image: url(/space-logos/code-bot-dark-still.svg); }
@media (prefers-reduced-motion: reduce) {
  .code-logo { background-image: url(/space-logos/code-bot-light-still.svg); }
  :root[data-theme="dark"] .code-logo { background-image: url(/space-logos/code-bot-dark-still.svg); }
}
@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code-logo { background-image: url(/space-logos/code-bot-dark-still.svg); } }
@media (prefers-color-scheme: dark) { :root[data-motion="reduce"]:not([data-theme="light"]) .code-logo { background-image: url(/space-logos/code-bot-dark-still.svg); } }
.brand-code-logo { display: none; width: 2rem; height: 2rem; }
body.coding-mode .brand-code-logo { display: inline-block; }
body.coding-mode .brand .mark, body.coding-mode .brand .pro-badge { display: none; }
#pageSpace .space-app-logo.code-logo { filter: none !important; }
.code-picker-title { display: flex; align-items: center; gap: 0.55rem; }
.code-picker-title .code-logo { width: 1.75rem; height: 1.75rem; }
/* The coding chat starts empty: no Nasrin ball, greeting or starter buttons. */
body.coding-mode #welcome { display: none; }
/* Thinking line in the coding chat: the pixel robot, about 4x faster while
   Nasrin thinks, remembers, reads or searches; still when motion is reduced. */
.thinking .mini.code-logo { height: 1.75rem; }
.code-logo.is-busy { background-image: url(/space-logos/code-bot-light-busy.svg); }
:root[data-theme="dark"] .code-logo.is-busy { background-image: url(/space-logos/code-bot-dark-busy.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code-logo.is-busy { background-image: url(/space-logos/code-bot-dark-busy.svg); } }
:root[data-motion="reduce"] .code-logo.is-busy { background-image: url(/space-logos/code-bot-light-still.svg); }
:root[data-motion="reduce"][data-theme="dark"] .code-logo.is-busy { background-image: url(/space-logos/code-bot-dark-still.svg); }
@media (prefers-reduced-motion: reduce) {
  .code-logo.is-busy { background-image: url(/space-logos/code-bot-light-still.svg); }
  :root[data-theme="dark"] .code-logo.is-busy { background-image: url(/space-logos/code-bot-dark-still.svg); }
}

/* GitHub in the coding chat (docs/github.md) */
.github-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 0.6rem; }
.github-sheet .code-picker-title .gh-mark { width: 1.5rem; height: 1.5rem; }
.plugin-card { margin-top: 0.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); overflow: hidden; }
.plugin-card .setting-hint { margin: 0.35rem 0 0; }
.plugin-name { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink); font-weight: 500; }
.gh-mark { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pr-open { align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.2rem; }
.pr-sheet .lib-input { width: 100%; box-sizing: border-box; margin: 0; }
.pr-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pr-files .lib-input { font-family: var(--mono, ui-monospace, monospace); font-size: 0.82rem; }
.pr-actions { justify-content: flex-end; margin-top: 0.6rem; }
.pr-done a { color: inherit; text-decoration: underline; }
.pr-open { display: none; }
body.coding-mode .pr-open { display: inline-flex; }

/* Coding replies with many files: one card, opened as a pull request. */
.pr-card { margin: 0.5rem 0; padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.pr-card-title { margin: 0 0 0.4rem; font-weight: 500; }
.pr-card-files { margin: 0 0 0.5rem; padding-left: 1.1rem; max-height: 9.5rem; overflow-y: auto; font: 0.78rem/1.45 var(--mono, ui-monospace, monospace); color: var(--ink-2); overflow-wrap: anywhere; }
.pr-card-status { margin: 0.35rem 0; color: var(--ink-2); font-size: 0.84rem; }
.pr-card-status a { color: inherit; text-decoration: underline; }

/* Pull request chips (Diff +/-, merged or not), made from GitHub's answer. */
.pr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.6rem; }
.pr-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0.35rem 0.85rem;
  border: 1px solid var(--line); border-radius: 0.85rem; background: var(--surface);
  color: var(--ink); font-family: var(--round); font-size: 0.9rem; font-weight: 500; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pr-chip:hover { border-color: var(--ink-3); }
.pr-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pr-chip svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pr-add { color: #1a7f37; }
.pr-del { color: #cf222e; }
.pr-chip-dot, .pr-count, .pr-state { color: var(--ink-2); }
.pr-chip.is-merged .pr-state, .pr-chip.is-merged svg { color: #8250df; stroke: #8250df; }
.pr-chip.is-open .pr-state { color: #1a7f37; }
.pr-chip.is-closed .pr-state { color: #cf222e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pr-add, :root:not([data-theme="light"]) .pr-chip.is-open .pr-state { color: #3fb950; }
  :root:not([data-theme="light"]) .pr-del, :root:not([data-theme="light"]) .pr-chip.is-closed .pr-state { color: #f85149; }
  :root:not([data-theme="light"]) .pr-chip.is-merged .pr-state { color: #a371f7; }
  :root:not([data-theme="light"]) .pr-chip.is-merged svg { stroke: #a371f7; }
}
:root[data-theme="dark"] .pr-add, :root[data-theme="dark"] .pr-chip.is-open .pr-state { color: #3fb950; }
:root[data-theme="dark"] .pr-del, :root[data-theme="dark"] .pr-chip.is-closed .pr-state { color: #f85149; }
:root[data-theme="dark"] .pr-chip.is-merged .pr-state { color: #a371f7; }
:root[data-theme="dark"] .pr-chip.is-merged svg { stroke: #a371f7; }
body.coding-mode.github-on .pr-card .pr-open { display: inline-flex; }
.plugin-option { margin-top: 0.75rem; }

/* Space app icons: one tile for every app, like Projects (light: soft grey;
   dark: a lifted grey, never black). The art sits inside it. */
#pageSpace .space-app-icon { display: grid; place-items: center; width: 3.65rem; height: 3.65rem; flex: 0 0 3.65rem; border-radius: .95rem; background: #ECEBE7; }
:root[data-theme="dark"] #pageSpace .space-app-icon { background: #3A3A3C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #pageSpace .space-app-icon { background: #3A3A3C; } }
#pageSpace .space-app-icon .space-app-logo { width: 70%; height: 70%; flex: none; border-radius: 0; background-color: transparent; }
#pageSpace .space-app-icon .space-cloud-logo { width: 78%; height: 78%; }
#pageSpace .space-app-icon .code-logo { width: 76%; height: 76%; }
#pageSpace .space-app-icon .space-app-glyph { width: 62%; height: 62%; padding: 0; }
.space-movo-glyph { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 340px) { #pageSpace .space-app-icon { width: 3.1rem; height: 3.1rem; flex-basis: 3.1rem; } }

/* Menu → Recent: Chats and Code tabs. */
.drawer-tabs { display: flex; gap: 0.25rem; margin: 0 0.35rem 0.35rem; }
.drawer-tab { min-height: 2rem; padding: 0 0.8rem; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font: 500 0.8rem/1 var(--sans); cursor: pointer; }
.drawer-tab.is-on { background: var(--paper); color: var(--ink); }
#pageSpace .space-app-icon img.space-cloud-logo { background-color: transparent !important; }

/* Plugins → more plugins, not connected yet: a compact list, Coming soon. */
.plugins-more { margin-top: 0.4rem; }
.plugins-group { margin: 1rem 0.25rem 0.35rem; color: var(--ink-3); font: 500 0.74rem/1.2 var(--sans); }
.plugins-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.plugins-item { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto auto; align-items: center; column-gap: 0.75rem; min-height: 3.5rem; padding: 0.4rem 0.9rem; color: var(--ink); font-size: 0.92rem; }
.plugins-item + .plugins-item { border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent); }
.plugins-glyph { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plugins-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.plugins-soon { display: inline-flex; align-items: center; justify-content: center; min-width: 6.1rem; min-height: 1.8rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--paper); color: var(--ink-3); font-size: 0.72rem; white-space: nowrap; }
.plugins-settings-btn { flex: none; min-height: 2rem; padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 0.78rem/1 var(--sans); cursor: pointer; }
.plugins-settings-btn:hover, .plugins-settings-btn:focus-visible { background: var(--paper); color: var(--ink); outline-offset: 2px; }
.plugins-item .plugins-soon { margin-left: auto; }
.plugins-item:has(.plugins-settings-btn) { gap: 0.55rem; }
.plugin-catalog-settings .plugin-info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plugin-catalog-settings .plugin-info em { max-width: 62%; overflow-wrap: anywhere; text-align: right; color: var(--ink-3); font-style: normal; }
.plugin-catalog-settings #pluginCatalogConfigure { width: 100%; margin: 0.75rem 0; }
.plugin-catalog-settings #pluginCatalogConfigure:disabled,
.plugin-catalog-settings #pluginCatalogConnect:disabled { opacity: .5; cursor: not-allowed; }
.plugin-catalog-settings .menu-label { margin-top: 1.15rem; }
.plugin-catalog-settings .setting-row { gap: 1rem; }
.plugin-catalog-settings .setting-row label { min-width: 0; }
.plugin-catalog-settings .setting-hint { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .plugin-catalog-settings .plugin-info { align-items: flex-start; }
  .plugin-catalog-settings .plugin-info em { max-width: 58%; }
}

/* Plugins: a row per plugin that opens its actions; Settings opens its page. */
.plugin-head { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.6rem; padding: 0.55rem 0.9rem; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.plugin-head:hover { background: var(--paper); }
.plugin-icon { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.75rem; background: #ECEBE7; color: #111; }
:root[data-theme="dark"] .plugin-icon { background: #3A3A3C; color: #F4F4F1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plugin-icon { background: #3A3A3C; color: #F4F4F1; } }
.plugin-icon .gh-mark { width: 1.35rem; height: 1.35rem; }
.plugin-icon .plugin-brand-logo { display: block; width: 2rem; height: 2rem; object-fit: contain; flex: none; }
.plugins-product-logo { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; flex: none; stroke: none; }
.plugin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.plugin-title { font-weight: 500; }
.plugin-sub { color: var(--ink-3); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-chev { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.plugin-head[aria-expanded="true"] .plugin-chev { transform: rotate(180deg); }
.plugin-actions { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.plugin-actions .menu-row { min-height: 3rem; font-size: 0.94rem; }
.plugin-detail { padding-bottom: 0.5rem; }
.plugin-back { margin: 0 0 0.6rem; }
.plugin-hero { padding: 1rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); }
.plugin-icon-big { width: 3.4rem; height: 3.4rem; border-radius: 1rem; }
.plugin-icon-big .gh-mark { width: 2rem; height: 2rem; }
.plugin-hero-title { margin: 0.75rem 0 0.2rem; font: 500 1.35rem/1.2 var(--round, var(--sans)); }
.plugin-hero-text { margin: 0; }
.plugin-account { cursor: default; }
.plugin-account-manager .plugin-account { display: flex; align-items: center; gap: .75rem; min-height: 3.75rem; }
.plugin-account-manager .plugin-login { display: flex; flex-direction: column; gap: .18rem; min-width: 0; flex: 1; }
.plugin-account-sub { color: var(--ink-3); font-size: .84rem; font-weight: 400; overflow-wrap: anywhere; }
.plugin-account-manager #pluginCatalogAccountMain { margin-left: auto; }
.plugin-account-manager #pluginCatalogAddAccount .plugin-avatar { width: 2.5rem; height: 2.5rem; }
.plugin-account-manager #pluginCatalogConnect,
.plugin-account-manager #pluginCatalogDisconnect { min-height: 3.25rem; }
.plugin-account-manager #pluginCatalogDisconnect { color: var(--danger, #B3261E); }
.plugin-account-manager #pluginCatalogAddAccount:disabled { opacity: .52; cursor: not-allowed; }
.plugin-account-manager .plugin-account[hidden] { display: none; }
.plugin-account:hover, .plugin-info:hover { background: none; }
.plugin-avatar { display: grid; place-items: center; flex: none !important; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 0.9rem; }
.plugin-info { cursor: default; }
.plugin-info em { font-style: normal; color: var(--ink-3); font-size: 0.92rem; }

/* Coding chat thinking line: two more moods of the pixel robot (owner,
   2026-10-13). Still robot when motion is reduced. */
.code-logo.is-remembering { background-image: url(/space-logos/code-bot-light-remember.svg); }
.code-logo.is-writing { background-image: url(/space-logos/code-bot-light-write.svg); }
:root[data-theme="dark"] .code-logo.is-remembering { background-image: url(/space-logos/code-bot-dark-remember.svg); }
:root[data-theme="dark"] .code-logo.is-writing { background-image: url(/space-logos/code-bot-dark-write.svg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .code-logo.is-remembering { background-image: url(/space-logos/code-bot-dark-remember.svg); }
  :root:not([data-theme="light"]) .code-logo.is-writing { background-image: url(/space-logos/code-bot-dark-write.svg); }
}
:root[data-motion="reduce"] .code-logo.is-remembering, :root[data-motion="reduce"] .code-logo.is-writing { background-image: url(/space-logos/code-bot-light-still.svg); }
:root[data-motion="reduce"][data-theme="dark"] .code-logo.is-remembering, :root[data-motion="reduce"][data-theme="dark"] .code-logo.is-writing { background-image: url(/space-logos/code-bot-dark-still.svg); }
@media (prefers-reduced-motion: reduce) {
  .code-logo.is-remembering, .code-logo.is-writing { background-image: url(/space-logos/code-bot-light-still.svg); }
  :root[data-theme="dark"] .code-logo.is-remembering, :root[data-theme="dark"] .code-logo.is-writing { background-image: url(/space-logos/code-bot-dark-still.svg); }
}
/* GitHub settings: connected accounts (up to 10). */
.plugin-login { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-main-tag { flex: none; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--paper); color: var(--ink-3); font-style: normal; font-size: 0.74rem; }
.plugin-link { flex: none; min-height: 2.2rem; padding: 0 0.4rem; border: 0; background: none; color: var(--ink-2); font: 500 0.82rem/1 var(--sans); cursor: pointer; }
.plugin-link.danger { color: #B3261E; }
:root[data-theme="dark"] .plugin-link.danger { color: #F2B8B5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plugin-link.danger { color: #F2B8B5; } }
.plugin-add { font-size: 1.1rem; }
.plugin-accounts-hint { margin: -0.4rem 0.4rem 0.75rem; }
.made-video video { display: block; width: 100%; max-height: 70vh; border-radius: inherit; background: #000; }


/* Evidence-led Research workspace */
.research-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:clamp(.5rem,3vw,2rem);background:color-mix(in srgb,#09090b 66%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.research-overlay[hidden]{display:none}
.research-panel{width:min(100%,66rem);max-height:min(92dvh,58rem);overflow:auto;border:1px solid var(--line);border-radius:1.35rem;background:var(--surface,var(--bg));color:var(--text);box-shadow:0 28px 100px #0003;padding:clamp(1rem,3vw,2rem);overscroll-behavior:contain}
.research-head,.research-result-head,.research-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.research-head h2{margin:.1rem 0;font-size:clamp(1.7rem,4vw,2.3rem);letter-spacing:-.04em}
.research-eyebrow{font-size:.68rem;letter-spacing:.14em;font-weight:700;opacity:.62;margin:0 0 .35rem}
.research-subtitle{margin:.3rem 0 0;opacity:.7;font-size:.9rem}
.research-form{display:grid;gap:.55rem;margin:1.5rem 0;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel,transparent)}
.research-form label{font-size:.84rem;font-weight:600;margin-top:.25rem}
.research-form label span{font-weight:400;opacity:.6}
.research-form textarea{width:100%;resize:vertical;min-height:3.1rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:.75rem;background:var(--bg);color:inherit;font:inherit;line-height:1.5}
.research-form textarea:focus-visible,.research-overlay button:focus-visible,.research-overlay a:focus-visible{outline:2px solid var(--accent,#5d8cff);outline-offset:3px}
.research-form-actions{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.3rem}
#researchStatus{font-size:.82rem;line-height:1.45;opacity:.75}
.research-actions{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end}
.research-result{margin:1.4rem 0}
.research-result-head{align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.research-result-head h3,.research-history-head h3{margin:.1rem 0;font-size:1.1rem}
.research-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-bottom:1rem}
.research-metric{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--line);border-radius:.8rem;padding:.8rem;min-width:0}
.research-metric-label{font-size:.75rem;opacity:.65}
.research-metric strong{font-size:.95rem;overflow-wrap:anywhere}
.research-findings{display:grid;gap:.7rem}
.research-finding{border:1px solid var(--line);border-radius:.9rem;padding:1rem}
.research-finding-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.research-finding-number,.research-confidence,.research-source-status{font-size:.72rem;opacity:.72}
.research-confidence{border:1px solid var(--line);border-radius:999px;padding:.22rem .5rem}
.research-finding-text{line-height:1.65;margin:.75rem 0}
.research-citations{display:flex;flex-wrap:wrap;gap:.45rem .8rem;font-size:.8rem}
.research-citations a,.research-source a{color:var(--accent,#5d8cff);overflow-wrap:anywhere}
.research-details{margin-top:1rem;border:1px solid var(--line);border-radius:.9rem;padding:.8rem 1rem}
.research-details summary{cursor:pointer;font-weight:600}
.research-source{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.65rem 0;border-bottom:1px solid var(--line)}
.research-source-reason{flex-basis:100%;margin:0;font-size:.8rem;opacity:.7}
#researchQuality{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.75rem;opacity:.75}
.research-history{border-top:1px solid var(--line);padding-top:1rem;margin-top:1.5rem}
.research-history-head{align-items:center;margin-bottom:.6rem}
.research-history-list{display:grid;gap:.35rem}
.research-history-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .65rem;border-radius:.7rem}
.research-history-row:hover{background:var(--press)}
.research-history-open{border:0;background:transparent;color:inherit;text-align:left;min-width:0;overflow-wrap:anywhere;cursor:pointer;font:inherit}
.research-muted,.research-empty{font-size:.82rem;opacity:.65}
.research-open{overflow:hidden}
@media(max-width:38rem){.research-overlay{padding:0;align-items:stretch}.research-panel{max-height:100dvh;width:100%;border-radius:0;border-left:0;border-right:0;padding:1rem .85rem calc(1rem + env(safe-area-inset-bottom))}.research-summary{grid-template-columns:1fr}.research-form-actions{align-items:stretch;flex-direction:column}.research-form-actions .btn{width:100%}.research-result-head{align-items:flex-start;flex-direction:column}.research-actions{justify-content:flex-start}.research-history-row{align-items:flex-start;flex-direction:column;gap:.25rem}}


/* Library document cards: readable content preview with direct file actions. */
.lib-list-preview {
  margin: 0 0 10px;
  padding: 0 14px 2px;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
}
.lib-list-actions .btn { min-height: 36px; }


/* Document rows contain a full-width opener followed by preview and actions.
   Keep them vertical instead of inheriting the horizontal history-row layout. */
.lib-document-item {
  display: block;
  min-width: 0;
}
.lib-document-item > .lib-open {
  display: flex;
  width: 100%;
  min-width: 0;
}
.lib-document-item > .lib-list-preview,
.lib-document-item > .lib-list-actions {
  display: flex;
  width: 100%;
  min-width: 0;
}
.lib-document-item > .lib-list-preview {
  display: -webkit-box;
}


/* Isolated Google Team settings layout */
#googleTeamForm { display:grid; gap:.65rem; padding:1rem; }
#googleTeamForm label { font-size:.9rem; font-weight:550; }
#googleTeamForm input, #googleTeamForm select, .google-team-controls select { width:100%; min-width:0; min-height:2.7rem; padding:.55rem .75rem; border:1px solid var(--line); border-radius:.8rem; background:var(--surface,transparent); color:var(--ink); font:inherit; }
#googleTeamForm .setting-hint { margin:.15rem 0 0; }
#googleTeamList { padding:0 .9rem; }
.google-team-member { align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line); }
.google-team-member:last-child { border-bottom:0; }
.google-team-details { display:flex; min-width:0; flex:1; flex-direction:column; gap:.2rem; overflow-wrap:anywhere; }
.google-team-name { font-size:.94rem; font-weight:550; }
.google-team-controls { display:flex; align-items:center; gap:.45rem; }
.google-team-controls select { width:auto; min-width:4.6rem; padding:.45rem; }
.google-team-controls .btn { min-height:2.25rem; padding:0 .75rem; }
@media (max-width:420px) { .google-team-member { align-items:flex-start; flex-direction:column; gap:.6rem; } .google-team-controls { width:100%; } .google-team-controls select { flex:1; } }


/* Follow-up prompts read like a compact checklist while keeping every answer editable. */
.ask-card .ask-questions {
  display: grid;
  gap: 0.8rem;
  margin: 0.5rem 0 0;
  padding-left: 1.35rem;
}
.ask-card .ask-questions > li {
  padding-left: 0.15rem;
}
.ask-card .ask-questions > li::marker {
  color: var(--ink-3);
  font-weight: 600;
}
.ask-card .ask-questions .question {
  min-width: 0;
  margin: 0;
}
.ask-card .question legend {
  max-width: 100%;
  line-height: 1.45;
  font-weight: 600;
}
.reply-sources-heading {
  margin: 0.55rem 0 0.15rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink-2);
}
.reply-sources-heading[hidden] {
  display: none;
}


/* Mobile-safe layout for per-app plugin settings. Keep labels and values
   in independent grid tracks so generic menu-row styles cannot overlap them. */
.plugin-catalog-settings { min-width: 0; }
.plugin-catalog-settings .plugin-hero-title,
.plugin-catalog-settings .plugin-hero-text,
.plugin-catalog-settings #pluginCatalogStatus,
.plugin-catalog-settings #pluginCatalogAccountHint,
.plugin-catalog-settings #pluginCatalogPermissionHint,
.plugin-catalog-settings .setting-hint {
  max-width: 100%;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.plugin-catalog-settings .menu-label { margin: 1.25rem 0 .6rem; line-height: 1.35; }
.plugin-catalog-settings #pluginCatalogAccounts .plugin-info,
.plugin-catalog-settings #pluginCatalogInformation .plugin-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  height: auto;
  padding: .85rem 1rem;
  line-height: 1.4;
  white-space: normal;
}
.plugin-catalog-settings #pluginCatalogAccounts .plugin-info > span,
.plugin-catalog-settings #pluginCatalogInformation .plugin-info > span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.plugin-catalog-settings #pluginCatalogAccounts .plugin-info > em,
.plugin-catalog-settings #pluginCatalogInformation .plugin-info > em {
  display: block;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.4;
}
.plugin-catalog-settings #pluginCatalogInformation > .menu-row:not(.plugin-info) {
  min-height: 3.5rem;
  height: auto;
  padding-top: .8rem;
  padding-bottom: .8rem;
  line-height: 1.4;
}
.plugin-catalog-settings .menu-card.setting-row {
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
  padding: 1rem;
  gap: 1rem;
}
.plugin-catalog-settings .menu-card.setting-row > label {
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.plugin-catalog-settings .menu-card.setting-row .setting-hint {
  display: block;
  margin-top: .35rem;
  line-height: 1.5;
}
.plugin-catalog-settings .menu-card.setting-row > input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: .15rem;
}
.plugin-catalog-settings #pluginCatalogConnect,
.plugin-catalog-settings #pluginCatalogDisconnect,
.plugin-catalog-settings #pluginCatalogConfigure {
  box-sizing: border-box;
  min-height: 3.25rem;
  height: auto;
  max-width: 100%;
  padding: .85rem 1rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.plugin-catalog-settings .plugin-back { max-width: 100%; white-space: normal; }
@media (max-width: 420px) {
  .plugin-catalog-settings #pluginCatalogAccounts .plugin-info,
  .plugin-catalog-settings #pluginCatalogInformation .plugin-info {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
    align-items: start;
  }
  .plugin-catalog-settings #pluginCatalogAccounts .plugin-info > em,
  .plugin-catalog-settings #pluginCatalogInformation .plugin-info > em {
    text-align: left;
  }
}

/* Plugin controls: one expanded Google card at a time, with mobile-safe actions. */
.plugin-actions .menu-row { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.plugin-actions .menu-row.danger, .plugin-catalog-settings #pluginCatalogConnect.danger { color: var(--danger, #b42318); }
@media (max-width: 480px) {
  .plugin-head { gap: .6rem; padding-inline: .7rem; }
  .plugin-actions .menu-row { min-height: 3.25rem; padding-inline: .85rem; }
  .plugins-item { flex-wrap: wrap; padding-block: .45rem; }
  .plugins-name { flex: 1 1 7rem; white-space: normal; overflow-wrap: anywhere; }
  .plugins-settings-btn { min-height: 2.25rem; }
}


/* Consent-first location action embedded in an assistant reply. */
.location-cta{box-sizing:border-box;display:grid;gap:10px;width:100%;max-width:100%;min-width:0;margin:16px 0 8px;padding:clamp(12px,3.5vw,16px);border:1px solid var(--line,rgba(128,128,128,.24));border-radius:18px;background:var(--surface,rgba(128,128,128,.06))}
.location-cta-copy{margin:0;color:var(--text-secondary,inherit);font-size:.92rem;line-height:1.5}
.location-cta-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;width:100%;padding:12px 16px;border:0;border-radius:14px;background:var(--text,#f5f5f5);color:var(--background,#151515);font:inherit;font-weight:650;cursor:pointer;transition:opacity .15s ease,transform .15s ease}
.location-cta-button:hover{opacity:.9}.location-cta-button:active{transform:scale(.99)}.location-cta-button:disabled{opacity:.6;cursor:wait}
.location-cta-status{margin:0;color:var(--text-secondary,inherit);font-size:.82rem;line-height:1.45}
.location-cta-button:focus-visible{outline:2px solid var(--accent,#e87935);outline-offset:3px}


/* Compact, accessible manual fallback for the location consent card. */
.location-cta-manual{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;min-width:0;margin-top:2px}
.location-cta-manual input{box-sizing:border-box;display:block;min-width:0;width:100%;max-width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:12px;background:var(--background,transparent);color:var(--text,inherit);font:inherit}
.location-cta-manual input::placeholder{color:var(--text-secondary,rgba(128,128,128,.9))}
 .location-cta-manual-button{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:44px;padding:10px 13px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:12px;background:var(--surface,rgba(128,128,128,.08));color:var(--text,inherit);font:inherit;font-weight:600;cursor:pointer}
.location-cta-manual-button:disabled{opacity:.6;cursor:wait}
.location-cta-manual input:focus-visible,.location-cta-manual-button:focus-visible{outline:2px solid var(--accent,#e87935);outline-offset:2px}
@media(min-width:520px){.location-cta-manual{grid-template-columns:minmax(0,1fr) auto}.location-cta-manual-button{width:auto;max-width:100%}}


/* Follow-up answer card: keep fields and actions aligned with the card's
   content edge, and prevent browser default sizing from creating overflow. */
.ask-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 1rem;
}
.ask-card .ask-questions {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-left: 1.25rem;
}
.ask-card .ask-questions > li,
.ask-card .ask-questions .question,
.ask-card .ask-questions .question fieldset {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.ask-card .ask-questions input,
.ask-card .ask-questions textarea,
.ask-card .ask-questions select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
}
.ask-card .card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.65rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.ask-card .card-actions > .btn {
  box-sizing: border-box;
  max-width: 100%;
  margin-inline: 0;
}
@media (max-width: 480px) {
  .ask-card { padding: 0.85rem; }
  .ask-card .ask-questions { padding-left: 1.1rem; }
}


/* Visual previews for web-researched answers. The image endpoint keeps all
   browser image requests same-origin and serves only validated raster data. */
.web-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: 0.7rem;
  margin: 1rem 0 0;
  max-width: 100%;
}
.web-preview-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.22));
  border-radius: 0.9rem;
  color: inherit;
  text-decoration: none;
  background: var(--surface, transparent);
  transition: border-color 160ms ease, transform 160ms ease;
}
.web-preview-card:hover {
  border-color: var(--muted, rgba(127, 127, 127, 0.55));
  transform: translateY(-1px);
}
.web-preview-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface-secondary, rgba(127, 127, 127, 0.08));
}
.web-preview-caption {
  display: -webkit-box;
  overflow: hidden;
  padding: 0.65rem 0.75rem;
  color: var(--ink, inherit);
  font-size: 0.84rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 480px) {
  .web-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .web-preview-caption { padding: 0.55rem; font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .web-preview-card { transition: none; }
  .web-preview-card:hover { transform: none; }
}


/* Embedded YouTube tutorials are opt-in through intent detection and use the
   privacy-enhanced player host. Keep the cards calm and responsive. */
.youtube-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin: 1.1rem 0 0;
  min-width: 0;
  max-width: 100%;
}
.youtube-results-heading {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.youtube-video-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.22));
  border-radius: 1rem;
  background: var(--surface, transparent);
}
.youtube-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.youtube-video-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.youtube-video-details {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem 0.9rem 0.9rem;
}
.youtube-video-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.youtube-video-channel {
  margin: 0;
  color: var(--muted, #777);
  font-size: 0.8rem;
}
.youtube-video-link {
  width: fit-content;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  text-underline-offset: 0.18em;
}
@media (min-width: 760px) {
  .youtube-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .youtube-results-heading { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .youtube-video-details { padding: 0.7rem; }
}

.youtube-video-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  background: #000;
}
.youtube-video-frame:fullscreen iframe {
  width: 100%;
  height: 100%;
}


/* Real internet image results requested by the person; compact, responsive and accessible. */
.internet-image-gallery { margin-top: 1rem; min-width: 0; }
.internet-image-heading { margin: 0 0 .65rem; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.internet-image-status { margin: .35rem 0; color: var(--ink-3); font-size: .84rem; }
.internet-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.internet-image-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .85rem; padding: .4rem; background: var(--surface, transparent); }
.internet-image-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .55rem; background: var(--surface-2, transparent); }
.internet-image-caption { margin: .45rem .1rem .2rem; font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }
.internet-image-credit { margin: .2rem .1rem .35rem; color: var(--ink-3); font-size: .68rem; line-height: 1.35; overflow-wrap: anywhere; }
.internet-image-card a { display: inline-block; margin: 0 .1rem .15rem; font-size: .75rem; text-underline-offset: .15em; }
@media (min-width: 620px) { .internet-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* The active tutorial player lives outside the transcript so new-chat and
   transcript refresh actions cannot remove it. Its video metadata is restored
   from local storage; the person can dismiss it explicitly. */
.persistent-youtube-player {
  position: fixed;
  z-index: 80;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: calc(var(--dock-h, 8rem) + 0.75rem + env(safe-area-inset-bottom));
  width: min(27rem, calc(100vw - 1.5rem));
  max-height: min(48vh, 25rem);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.25));
  border-radius: 1rem;
  background: var(--surface, #fff);
  color: var(--ink, #171717);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}
.persistent-youtube-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem 0.45rem 0.85rem;
  border-bottom: 1px solid var(--line, rgba(127, 127, 127, 0.2));
  background: var(--surface, #fff);
}
.persistent-youtube-label {
  font-size: 0.8rem;
  font-weight: 650;
}
.persistent-youtube-close {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.persistent-youtube-close:hover,
.persistent-youtube-close:focus-visible {
  background: var(--surface-secondary, rgba(127, 127, 127, 0.12));
}
.persistent-youtube-player .youtube-video-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.persistent-youtube-player .youtube-video-details {
  padding: 0.55rem 0.75rem 0.7rem;
}
@media (max-width: 480px) {
  .persistent-youtube-player {
    right: 0.5rem;
    width: calc(100vw - 1rem);
    max-height: min(38vh, 19rem);
    border-radius: 0.85rem;
  }
}


/* Location permission card, matching the supplied dark in-chat reference. */
.location-consent-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.location-consent-card{width:min(100%,760px);box-sizing:border-box;padding:clamp(22px,3.5vw,38px);color:#f7f7f7;background:#050505;border:1px solid #292929;border-radius:30px;box-shadow:0 24px 80px rgba(0,0,0,.42)}
.location-consent-header{display:grid;grid-template-columns:86px minmax(0,1fr);gap:22px;align-items:center}
.location-consent-icon{width:86px;height:86px;display:grid;place-items:center;color:#fff;background:#242424;border-radius:24px}
.location-consent-icon svg{width:38px;height:38px}
.location-consent-copy h2{margin:0 0 12px;color:#fff;font-size:clamp(20px,2.5vw,29px);line-height:1.2;font-weight:600;letter-spacing:-.025em}
.location-consent-copy p{margin:0;color:#aaa;font-size:clamp(15px,1.9vw,21px);line-height:1.42}
.location-consent-divider{height:1px;margin:30px 0 24px;background:#252525}
.location-consent-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.location-consent-choice{min-height:104px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #292929;border-radius:22px;color:#fff;background:#050505;font:inherit;text-align:center;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.location-consent-choice>span:first-child{font-size:clamp(17px,2.1vw,23px);font-weight:600;line-height:1.25}
.location-consent-choice>span:last-child{max-width:250px;color:#aaa;font-size:clamp(13px,1.6vw,17px);line-height:1.4}
.location-consent-choice:hover{background:#141414;border-color:#555}
.location-consent-choice:active{transform:scale(.985)}
.location-consent-choice:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
.location-consent-allow{background:#101010}
@media(max-width:520px){.location-consent-overlay{padding:14px}.location-consent-card{padding:22px 18px;border-radius:24px}.location-consent-header{grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start}.location-consent-icon{width:56px;height:56px;border-radius:17px}.location-consent-icon svg{width:28px;height:28px}.location-consent-copy h2{margin-top:2px}.location-consent-divider{margin:24px 0 18px}.location-consent-actions{gap:10px}.location-consent-choice{min-height:100px;padding:13px 8px;border-radius:17px}}
@media(prefers-reduced-motion:reduce){.location-consent-choice{transition:none}}


/* Desktop layout correction: keep the composer close to the viewport edge
   and show each primary navigation action only once. */
@media (min-width: 70rem) {
  body:not(.has-chat) .dock { bottom: 150px; }
  body.has-chat .dock { bottom: 50px; }
  .bar-actions > #historyBtn,
  .bar-actions > #settingsBtn,
  .bar-actions > #newChat { display: none !important; }
  .desktop-rail-action { min-width: 0; }
  .desktop-rail-action span { min-width: 0; overflow-wrap: anywhere; }
}


/* Coding-chat welcome: a large, animated coding SVG while the conversation is empty. */
.coding-empty-state {
  display: none;
  flex: 1 0 auto;
  min-height: min(62vh, 36rem);
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.5rem 1rem calc(var(--dock-h, 7rem) + 1.5rem);
  text-align: center;
  overflow: hidden;
}
body.coding-mode:not(.has-chat) .coding-empty-state { display: flex; }
body.coding-mode #welcome { display: none; }
.coding-empty-art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(15rem, 58vw);
  height: min(15rem, 58vw);
  margin: 0 auto 1rem;
  isolation: isolate;
}
.coding-empty-art::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ink) 10%, transparent), transparent 70%);
  filter: blur(9px);
  animation: coding-welcome-breathe 3.8s ease-in-out infinite;
  z-index: -1;
}
.coding-empty-logo {
  width: 76%;
  height: 76%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--ink) 13%, transparent));
  animation: coding-welcome-float 4.2s ease-in-out infinite;
}
.coding-empty-orbit {
  position: absolute;
  inset: 8%;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 34%;
  transform: rotate(28deg);
  animation: coding-welcome-orbit 12s linear infinite;
}
.coding-empty-orbit-two {
  inset: 2%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 50%;
  animation-direction: reverse;
  animation-duration: 19s;
}
.coding-empty-spark {
  position: absolute;
  z-index: 3;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
  opacity: .7;
  animation: coding-welcome-spark 2.8s ease-in-out infinite;
}
.coding-empty-spark-one { top: 9%; right: 12%; }
.coding-empty-spark-two { bottom: 13%; left: 9%; font-size: 1.8rem; animation-delay: -1.2s; }
.coding-empty-cursor {
  position: absolute;
  z-index: 4;
  width: .42rem;
  height: 1.6rem;
  border-radius: 2px;
  background: var(--ink);
  right: 22%;
  bottom: 25%;
  opacity: .8;
  animation: coding-welcome-cursor 1s steps(2, jump-none) infinite;
}
.coding-empty-title {
  max-width: 32rem;
  margin: 0;
  color: var(--ink);
  font: 600 clamp(1.35rem, 3.8vw, 2rem)/1.2 var(--sans);
  letter-spacing: -.035em;
  text-wrap: balance;
  animation: coding-welcome-rise .65s var(--spring) both;
}
.coding-empty-subtitle {
  margin: .3rem 0 0;
  color: var(--muted, var(--ink-muted));
  font: 400 clamp(.9rem, 2.4vw, 1.05rem)/1.5 var(--sans);
  animation: coding-welcome-rise .7s .08s var(--spring) both;
}
.coding-empty-words {
  height: 1.7rem;
  margin-top: .5rem;
  overflow: hidden;
  color: var(--muted, var(--ink-muted));
  font: 500 .9rem/1.7rem var(--sans);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.coding-empty-word-track { display: flex; flex-direction: column; animation: coding-welcome-words 8s steps(4, end) infinite; }
.coding-empty-word-track span { height: 1.7rem; flex: 0 0 1.7rem; }
@keyframes coding-welcome-float { 0%,100% { transform: translateY(0) rotate(-2deg) scale(1); } 50% { transform: translateY(-9px) rotate(2deg) scale(1.025); } }
@keyframes coding-welcome-breathe { 0%,100% { opacity: .45; transform: scale(.9); } 50% { opacity: .95; transform: scale(1.08); } }
@keyframes coding-welcome-orbit { from { transform: rotate(28deg); } to { transform: rotate(388deg); } }
@keyframes coding-welcome-spark { 0%,100% { opacity: .35; transform: translateY(2px) scale(.8) rotate(-12deg); } 50% { opacity: 1; transform: translateY(-5px) scale(1.15) rotate(12deg); } }
@keyframes coding-welcome-cursor { 0%,49% { opacity: .85; } 50%,100% { opacity: .12; } }
@keyframes coding-welcome-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coding-welcome-words { from { transform: translateY(0); } to { transform: translateY(-6.8rem); } }
@media (max-width: 540px) {
  .coding-empty-state { min-height: min(58vh, 32rem); padding-inline: .75rem; }
  .coding-empty-art { width: min(13rem, 57vw); height: min(13rem, 57vw); margin-bottom: .75rem; }
  .coding-empty-logo { width: 80%; height: 80%; }
  .coding-empty-title { max-width: 19rem; }
}
@media (prefers-reduced-motion: reduce) {
  .coding-empty-art::before, .coding-empty-logo, .coding-empty-orbit,
  .coding-empty-spark, .coding-empty-cursor, .coding-empty-title,
  .coding-empty-subtitle, .coding-empty-word-track {
    animation: none !important;
  }
  .coding-empty-word-track { transform: none; }
  .coding-empty-word-track span:not(:first-child) { display: none; }
}


/* Empty coding chat: keep the name/header controls, but remove the small
   coding-bot avatar so the animated, combined mark is the central focus. */
body.coding-mode:not(.has-chat) .brand-code-logo {
  display: none !important;
  visibility: hidden !important;
}


/* Screenshot/photo crop dialog */
.image-crop-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 68%); }
.image-crop-panel { width: min(760px, 100%); max-height: min(92dvh, 900px); overflow: auto; padding: 18px; border: 1px solid var(--border, #d7d7d7); border-radius: 22px; background: var(--surface, #fff); color: var(--text, #111); box-shadow: 0 24px 80px rgb(0 0 0 / 28%); }
.image-crop-title { margin: 0; font-size: 1.15rem; font-weight: 650; }
.image-crop-help { margin: 8px 0 14px; color: var(--muted, #666); font-size: .92rem; }
.image-crop-stage { position: relative; display: block; width: fit-content; max-width: 100%; max-height: 65dvh; min-height: 160px; margin-inline: auto; overflow: hidden; border-radius: 12px; background: #171717; touch-action: none; user-select: none; }
.image-crop-source { display: block; max-width: 100%; max-height: 65dvh; width: auto; height: auto; object-fit: contain; pointer-events: none; user-select: none; }
.image-crop-selection { position: absolute; border: 2px solid #fff; outline: 9999px solid rgb(0 0 0 / 44%); box-sizing: border-box; pointer-events: none; }
.image-crop-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.image-crop-actions button { min-height: 44px; padding: 0 18px; border: 1px solid var(--border, #d7d7d7); border-radius: 999px; font: inherit; cursor: pointer; }
.image-crop-cancel { background: transparent; color: inherit; }
.image-crop-use { background: var(--accent, #111); color: var(--accent-contrast, #fff); }
.image-crop-actions button:disabled { opacity: .45; cursor: not-allowed; }
.chip-crop { margin-inline: 5px; min-height: 30px; padding: 3px 9px; border: 1px solid var(--border, #d7d7d7); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .78rem; }
.chip-crop:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .image-crop-overlay, .image-crop-panel { animation: none !important; transition: none !important; } }

/* Keep the conversation title geometrically centered regardless of the
   unequal left/right header controls. */
.bar { position: relative; }
.bar > .brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  margin: 0;
  white-space: nowrap;
}
body:not(.has-chat) .bar > .brand {
  transform: translate(-50%, -50%);
}
body.coding-mode .bar > .brand {
  transform: translate(-50%, -50%);
}
body.coding-mode:not(.has-chat) .bar > .brand-code-logo {
  display: none !important;
}
.coding-empty-sphere {
  position: absolute;
  inset: -7%;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--ink);
  opacity: .8;
}
.coding-empty-sphere .dots {
  width: 100%;
  height: 100%;
  overflow: visible;
  color: inherit;
}
.coding-empty-sphere .dots circle { fill: currentColor; }
.coding-empty-logo {
  z-index: 2;
}
.coding-empty-spark-one { display: none !important; }
@media (max-width: 540px) {
  .bar > .brand { max-width: calc(100% - 7rem); }
  .coding-empty-sphere { inset: -12%; }
}


/* Unified coding welcome mark: one face that blooms into a contained particle sphere.
   Remove the decorative layers that previously collided with the logo/text. */
body.coding-mode:not(.has-chat) .coding-empty-state {
  gap: .55rem;
  padding-top: 1rem;
  padding-bottom: calc(var(--dock-h, 7rem) + 1rem);
}
body.coding-mode:not(.has-chat) .coding-empty-art {
  width: min(15rem, 54vw);
  height: min(15rem, 54vw);
  flex: 0 0 auto;
  margin: 0 auto .8rem;
  overflow: visible;
}
body.coding-mode:not(.has-chat) .coding-empty-art::before,
body.coding-mode:not(.has-chat) .coding-empty-orbit,
body.coding-mode:not(.has-chat) .coding-empty-spark,
body.coding-mode:not(.has-chat) .coding-empty-cursor {
  display: none !important;
}
body.coding-mode:not(.has-chat) .coding-empty-sphere {
  inset: 0 !important;
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  opacity: calc(.18 + var(--sphere-burst, 0) * .82);
  transform: scale(calc(.42 + var(--sphere-burst, 0) * .58));
  transform-origin: center;
  will-change: transform, opacity;
}
body.coding-mode:not(.has-chat) .coding-empty-sphere .dots {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body.coding-mode:not(.has-chat) .coding-empty-sphere .dots circle {
  fill: currentColor;
}
body.coding-mode:not(.has-chat) .coding-empty-logo {
  position: absolute;
  inset: 12%;
  z-index: 2;
  width: 76%;
  height: 76%;
  margin: auto;
  transform: scale(calc(1 - var(--sphere-burst, 0) * .24));
  opacity: calc(1 - var(--sphere-burst, 0) * .72);
  transition: opacity .08s linear;
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--ink) 10%, transparent));
}
body.coding-mode:not(.has-chat) .coding-empty-title {
  max-width: min(100%, 32rem);
  margin-top: 0;
  text-wrap: balance;
}
body.coding-mode:not(.has-chat) .coding-empty-subtitle {
  max-width: 30rem;
  text-wrap: balance;
}
body.coding-mode:not(.has-chat) .coding-empty-words {
  margin-top: .4rem;
}
@media (max-width: 540px) {
  body.coding-mode:not(.has-chat) .coding-empty-state {
    min-height: min(58vh, 32rem);
    padding-inline: .75rem;
  }
  body.coding-mode:not(.has-chat) .coding-empty-art {
    width: min(13rem, 54vw);
    height: min(13rem, 54vw);
    margin-bottom: .65rem;
  }
  body.coding-mode:not(.has-chat) .coding-empty-logo {
    inset: 12%;
    width: 76%;
    height: 76%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.coding-mode:not(.has-chat) .coding-empty-sphere {
    transform: none;
    opacity: .12;
  }
  body.coding-mode:not(.has-chat) .coding-empty-logo {
    opacity: 1;
    transform: none;
  }
}


/* Coding welcome: sphere-only identity; remove the eye/face logo entirely. */
body.coding-mode:not(.has-chat) .coding-empty-logo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.coding-mode:not(.has-chat) .coding-empty-sphere {
  opacity: 1;
  transform: scale(calc(.42 + var(--sphere-burst, 0) * .58));
}

.chip-transcribe { margin-inline: 5px; min-height: 30px; padding: 3px 9px; border: 1px solid var(--border, #d7d7d7); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .78rem; }
.chip-transcribe:disabled { opacity: .55; }


/* Provider-hosted social embeds; never render provider-supplied HTML. */
.social-embed-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
  width: 100%;
  min-width: 0;
}
.social-embed-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border, rgba(127, 127, 127, .24));
  border-radius: 14px;
  padding: 12px;
}
.social-embed-title {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.social-embed-card iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.social-embed-tiktok iframe { height: min(76vh, 640px); min-height: 420px; }
.social-embed-facebook iframe { height: min(76vh, 640px); min-height: 300px; }
.social-embed-card > a {
  display: inline-block;
  margin-top: 10px;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .social-embed-card { padding: 8px; }
  .social-embed-tiktok iframe { min-height: 400px; }
  .social-embed-facebook iframe { min-height: 260px; }
}


/* Keep the chat composer 10px above the viewport edge on phones and tablets.
   Preserve the device safe area so the composer clears the home indicator. */
@media (max-width: 69.99rem) {
  .dock { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}


/* Professional job discovery: premium, readable cards with an independently scrollable result list. */
.professional-jobs{margin:1.5rem 0 1.8rem;padding:1rem;border:1px solid var(--line);border-radius:1.1rem;background:var(--panel,transparent)}
.professional-jobs-intro h3{margin:.1rem 0 .35rem;font-size:1.35rem;letter-spacing:-.025em}
.professional-jobs-intro>p:last-child,.professional-search-results-head p{margin:.25rem 0 0;opacity:.7;font-size:.88rem;line-height:1.5}
.professional-search-form{display:grid;gap:.55rem;margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:.9rem;background:var(--bg)}
.professional-search-form label{display:block;margin-bottom:.35rem;font-size:.83rem;font-weight:650}
.professional-search-form input,.professional-search-form select{width:100%;min-width:0;padding:.75rem .8rem;border:1px solid var(--line);border-radius:.7rem;background:var(--surface,var(--bg));color:var(--text);font:inherit}
.professional-search-form input:focus-visible,.professional-search-form select:focus-visible,.professional-search-cards:focus-visible{outline:2px solid var(--accent,#5d8cff);outline-offset:3px}
.professional-search-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(9rem,1fr);gap:.75rem}
.professional-search-actions,.professional-search-results-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.professional-search-actions span{font-size:.82rem;opacity:.75;line-height:1.4}
.professional-search-result{margin-top:1rem}
.professional-search-results-head{margin-bottom:.75rem}
.professional-search-results-head h4{margin:0;font-size:1rem}
.professional-search-cards{display:grid;gap:.8rem;max-height:min(68vh,52rem);overflow-y:auto;overscroll-behavior:contain;padding:.15rem .4rem .5rem .05rem;scrollbar-gutter:stable}
.professional-job-card{min-width:0;padding:1rem;border:1px solid var(--line);border-radius:.95rem;background:var(--surface,var(--bg));box-shadow:0 5px 20px rgba(0,0,0,.035)}
.professional-job-card-head{display:grid;gap:.2rem}
.professional-job-card h5{margin:0;font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere}
.professional-job-company{margin:0;opacity:.72;font-size:.88rem}
.professional-job-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0}
.professional-job-meta span{padding:.35rem .55rem;border:1px solid var(--line);border-radius:999px;font-size:.76rem;line-height:1.35;overflow-wrap:anywhere}
.professional-job-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.professional-job-fields section{min-width:0;padding:.65rem;border-radius:.65rem;background:color-mix(in srgb,var(--text) 3%,transparent)}
.professional-job-fields h6{margin:0 0 .25rem;font-size:.8rem}
.professional-job-fields p{margin:0;font-size:.82rem;line-height:1.5;overflow-wrap:anywhere}
.professional-job-evidence{grid-column:1/-1;font-size:.82rem;line-height:1.5}
.professional-job-evidence summary{cursor:pointer;font-weight:600}
.professional-job-evidence ul{padding-left:1.2rem;overflow-wrap:anywhere}
.professional-job-evidence li+li{margin-top:.35rem}
.professional-job-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.65rem;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.78rem}
.professional-job-footer span{opacity:.65;overflow-wrap:anywhere}
.professional-job-footer a{font-weight:650;text-decoration:none}
.professional-job-footer a:hover{text-decoration:underline}
.professional-search-footnote{margin:.75rem .1rem 0;font-size:.76rem;line-height:1.5;opacity:.62}
@media(max-width:38rem){.professional-jobs{padding:.75rem}.professional-search-form{padding:.75rem}.professional-search-filters{grid-template-columns:1fr}.professional-job-fields{grid-template-columns:1fr}.professional-job-evidence{grid-column:auto}.professional-search-actions{align-items:flex-start;flex-direction:column}.professional-search-actions .btn{width:100%}.professional-search-results-head{align-items:flex-start}.professional-search-cards{max-height:62vh}}