:root {
  color-scheme: light;
  --paper: #f4f1ea;
  --paper-2: #ebe6dc;
  --card: #fffdf8;
  --ink: #1c1915;
  --muted: #6d675e;
  --line: rgba(28, 25, 21, 0.1);
  --spruce: #0e6b57;
  --spruce-ink: #f7fffb;
  --spruce-soft: rgba(14, 107, 87, 0.12);
  --danger: #9c3b2e;
  --login-orange: #ff7417;
  --shadow: 0 10px 30px rgba(40, 32, 20, 0.06);
  --radius: 18px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101412;
  --paper-2: #1a211e;
  --card: #18211d;
  --ink: #f3f0e8;
  --muted: #b7b1a6;
  --line: rgba(243, 240, 232, 0.12);
  --spruce: #3dbe9a;
  --spruce-ink: #06241c;
  --spruce-soft: rgba(61, 190, 154, 0.16);
  --danger: #ffb4a8;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --paper: #101412;
    --paper-2: #1a211e;
    --card: #18211d;
    --ink: #f3f0e8;
    --muted: #b7b1a6;
    --line: rgba(243, 240, 232, 0.12);
    --spruce: #3dbe9a;
    --spruce-ink: #06241c;
    --spruce-soft: rgba(61, 190, 154, 0.16);
    --danger: #ffb4a8;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  }
}

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

html, body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: 0; background: transparent; }

input, textarea, select {
  font-size: 16px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 12px 14px;
}

textarea { resize: none; min-height: 48px; max-height: 140px; }

img, video, audio { max-width: 100%; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.app {
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

.view { min-height: 100%; }

.view[hidden] { display: none !important; }

.overlay-body, .thread {
  width: min(720px, 100%);
  margin: 0 auto;
}

body[data-view="home"] .app, body[data-view="create"] .app,
body[data-view="reminders"] .app, body[data-view="memory"] .app, body[data-view="focus"] .app { overflow: hidden; }

/* The home feed uses document scrolling so iOS can paint content through the
   bottom safe area behind the floating glass dock. A 100dvh locked body plus
   a nested scroll root leaves an opaque strip below fixed navigation. */
body[data-view="home"] {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

html[data-view="home"] {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-view="home"] .app {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.view-home {
  height: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  margin: 0 auto;
  overflow: visible;
}

.view-chat, .view-create {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  margin: 0 auto;
}

.view-create { overflow: hidden; }
.create-main { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 0 16px 172px; }
.create-heading { position: absolute; inset: 0 16px 138px; display: grid; place-items: center; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.create-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(-22px); }
.create-hero-logo { display: block; width: clamp(136px, 38vw, 190px); height: auto; object-fit: contain; }
.create-heading h1 { margin: 0; color: var(--ink); font-size: clamp(30px, 8vw, 42px); font-weight: 480; line-height: 1.08; letter-spacing: -.045em; text-align: center; }
.view-create.composer-active .create-heading { opacity: 0; transform: translateY(-12px); }
body.auth-open .create-heading { opacity: 0; transform: translateY(-12px); }
html[data-theme="dark"] .create-hero-logo { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .create-hero-logo { filter: invert(1) hue-rotate(180deg); } }
.create-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.create-category { min-width: 0; min-height: 112px; padding: 14px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; display: grid; align-content: space-between; }
.create-category[aria-selected="true"] { background: var(--spruce); color: var(--spruce-ink); box-shadow: none; }
.create-category-icon { font-size: 28px; line-height: 1; }
.create-category strong { font-size: 19px; }
.create-category small { display: block; margin-top: 3px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-card { position: fixed; z-index: 5; left: 50%; bottom: max(8px, var(--safe-bottom)); transform: translateX(-50%); width: min(688px, calc(100% - 24px)); padding: 12px; border-radius: 28px; background: color-mix(in srgb, var(--card) 97%, transparent); box-shadow: 0 16px 42px rgba(19,31,25,.12), inset 0 0 0 1px var(--line); backdrop-filter: blur(18px); }
.quick-card:focus-within { box-shadow: 0 16px 42px rgba(19,31,25,.12), inset 0 0 0 1.5px var(--spruce); }
.quick-card textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); padding: 4px 8px 10px; min-height: 62px; max-height: 190px; box-shadow: none; font: inherit; font-size: 16px; line-height: 1.4; }
.quick-card textarea::placeholder { color: var(--muted); }
.quick-actions { display: flex; align-items: center; gap: 7px; min-width: 0; }
.quick-round-action { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 50%; background: var(--paper-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.quick-round-action svg { width: 20px; height: 20px; }
.quick-model { min-width: 0; max-width: min(52vw, 250px); height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 999px; background: var(--spruce); color: var(--spruce-ink); box-shadow: 0 5px 14px color-mix(in srgb, var(--spruce) 22%, transparent); }
.quick-model > span:first-child { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.quick-model strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.quick-model-chevron { flex: 0 0 auto; opacity: .72; font-size: 13px; transform: translateY(-1px); }
.quick-actions .estimate { display: none; }
.quick-actions .voice-status { text-align: right; }
.quick-actions #quick-mic-btn { width: 40px; height: 40px; margin-left: auto; background: var(--paper-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.quick-actions .send { width: 42px; height: 42px; border-radius: 50%; }
.quick-actions .send:disabled { background: var(--paper-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); opacity: 1; }

@media (max-width: 390px) {
  .quick-card { width: calc(100% - 16px); padding: 10px; }
  .quick-actions { gap: 5px; }
  .quick-model { max-width: calc(100vw - 164px); padding: 0 9px; }
}

@media (max-height: 560px) {
  .create-heading { opacity: 0; }
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px);
  z-index: 2;
}

.chat-top { position: static; }

.brand { display: flex; gap: 12px; align-items: center; }
.brand.compact { gap: 8px; }
.brand h1 { margin: 0; font-size: 28px; letter-spacing: -0.04em; }
.brand strong { font-size: 20px; letter-spacing: -0.03em; }

.mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--spruce);
  color: var(--spruce-ink);
  font-weight: 700;
  flex: 0 0 auto;
}

.lede { margin: 4px 0 0; color: var(--muted); }

form { display: grid; gap: 12px; margin-top: 22px; }

label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }

.btn, .icon-btn, .pill, .chip, .pack {
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn {
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 600;
}

.btn.primary { background: var(--spruce); color: var(--spruce-ink); box-shadow: none; }
.btn.slim { padding: 8px 14px; }
.btn.quiet { background: transparent; box-shadow: none; color: var(--spruce); }
.btn.danger { color: var(--danger); }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.icon-btn svg, .send svg { width: 20px; height: 20px; }

.top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.chip, .pill {
  border-radius: 999px;
  padding: 8px 12px;
  max-width: 100%;
}

.balance { font-variant-numeric: tabular-nums; font-weight: 650; }

.home-head, .catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 0;
}

.home-head h2, .overlay h2, .chat-title-wrap h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.session-list, .history, .catalog-list { list-style: none; margin: 0; padding: 8px 16px 32px; }

.session, .model, .family, .history li {
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 8px;
}

.session { display: flex; justify-content: space-between; gap: 12px; }
.session b, .model b, .family b { display: block; letter-spacing: -0.02em; }
.session span, .meta { color: var(--muted); font-size: 13px; }

.banner, .form-error, .fine, .empty, .estimate, .duration-note { color: var(--muted); font-size: 13px; }
.form-error { color: var(--danger); }
.banner, .empty { padding: 0 16px 8px; }
.form-error { min-height: 1.2em; margin: 0; }

.thread {
  flex: 1;
  overflow: auto;
  padding: 8px 16px calc(132px + var(--safe-bottom));
  width: 100%;
}

.bubble {
  max-width: min(100%, 560px);
  padding: 12px 14px;
  border-radius: 18px;
  margin: 8px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}

.bubble.user { margin-left: auto; background: var(--spruce-soft); }
.bubble .charge { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.media { display: grid; gap: 8px; margin-top: 8px; }
.media img, .media video { border-radius: 12px; }

.composer {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 720px;
  margin-inline: auto;
  padding: 0 max(10px, env(safe-area-inset-right, 0px)) calc(8px + var(--safe-bottom)) max(10px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-top: 1px solid var(--line);
}

.pill { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; padding: 7px 12px; flex: 0 1 auto; }
.estimate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.duration-note { margin: 8px 6px 0; }

.input-box {
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 25px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--spruce); }
.input-box textarea#draft {
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
  color: inherit;
  padding: 4px 6px 0;
  min-height: 24px;
  max-height: 230px;
  overflow-y: auto;
}
.input-toolbar { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow: hidden; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.toolbar-left { width: 0; flex: 1 1 auto; overflow: hidden; }
.toolbar-right { flex: 0 0 auto; }
.model-tools-btn { overflow: visible; }
.model-tools-dot { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--login-orange); box-shadow: 0 0 0 2px var(--card); }
.model-tools-popover {
  position: absolute; left: 12px; right: 12px; bottom: calc(78px + var(--safe-bottom)); z-index: 9;
  padding: 8px; border-radius: 22px; background: color-mix(in srgb, var(--card) 97%, transparent);
  box-shadow: 0 18px 46px rgba(0,0,0,.24), inset 0 0 0 1px var(--line); backdrop-filter: blur(22px);
}
.model-tools-popover[hidden] { display: none; }
.model-tool-row { min-height: 58px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.model-tool-row > span:first-child { min-width: 0; display: grid; gap: 2px; }
.model-tool-row strong { font-size: 15px; }
.model-tool-row small { color: var(--muted); font-size: 12px; }
.model-tool-row select, .model-setting-block select { max-width: 145px; min-height: 38px; border: 0; border-radius: 12px; padding: 0 10px; background: var(--paper-2); color: var(--ink); font: inherit; }
.reasoning-pill.is-active { background: color-mix(in srgb, var(--login-orange) 22%, var(--paper-2)); color: var(--login-orange); font-weight: 650; }
.model-tool-status { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.model-tool-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.model-tool-edit { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.model-settings-link { width: 100%; min-height: 52px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: 16px; font-weight: 650; text-align: left; }
.model-settings-panel { max-height: min(88dvh, 760px); }
.model-settings-body { display: grid; padding: 0 20px max(28px, calc(18px + var(--safe-bottom))); }
.model-setting-block { min-width: 0; padding: 18px 0; display: grid; gap: 14px; border-bottom: 1px solid var(--line); }
.model-setting-block > span:first-child { display: grid; gap: 5px; }
.model-setting-block strong { font-size: 18px; }
.model-setting-block small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.model-setting-block.is-inline { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.temperature-control { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 12px; align-items: center; }
.temperature-control input { width: 100%; accent-color: var(--login-orange); }
.temperature-control output { padding: 7px 5px; border-radius: 12px; background: var(--paper-2); text-align: center; font-variant-numeric: tabular-nums; }

.voice-status {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 160ms ease, color 160ms ease;
}
.voice-status[hidden] { display: none; }
.voice-status.success { color: var(--spruce); }
.voice-status.error { color: var(--danger); }

.toolbar-icon-btn {
  position: relative;
  overflow: visible;
  border: 0;
  background: #eee;
  box-shadow: none;
  color: #444;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.toolbar-icon-btn svg { width: 18px; height: 18px; }
.toolbar-icon-btn:disabled { opacity: 0.45; }
.toolbar-icon-btn.recording { background: var(--danger); color: #fff; box-shadow: none; }
.toolbar-icon-btn.transcribing { pointer-events: none; }
.toolbar-icon-btn.transcribing .mic-icon-mic { visibility: hidden; }
.toolbar-icon-btn.transcribing::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, var(--muted) 32%, transparent);
  border-top-color: var(--spruce);
  border-radius: 50%;
  animation: mic-ring-spin 0.75s linear infinite;
}
.mic-icon-stop { display: none; }
.toolbar-icon-btn.recording .mic-icon-mic { display: none; }
.toolbar-icon-btn.recording .mic-icon-stop { display: flex; }
.mic-ring {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 3px dotted var(--danger);
  animation: mic-ring-spin 1.6s linear infinite;
  pointer-events: none;
}
.toolbar-icon-btn.recording .mic-ring { display: block; }
@keyframes mic-ring-spin { to { transform: rotate(360deg); } }

.attach-preview { display: none; flex-wrap: wrap; gap: 8px; padding: 8px 2px 0; }
.attach-preview.has-items { display: flex; }
.attach-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  padding: 6px 26px 6px 6px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 12px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
}
.attach-chip img, .attach-chip video { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #000; }
.attach-chip .file-icon, .attach-chip .read-progress {
  width: 40px; height: 40px; border-radius: 8px; background: var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; position: relative;
}
.attach-chip .read-progress { font-size: 10px; font-weight: 600; }
.attach-chip .read-progress::before {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  border: 2px solid var(--line); border-top-color: var(--spruce);
  animation: mic-ring-spin 0.8s linear infinite;
}
.attach-chip .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.attach-chip .remove-att {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.attach-chip .remove-att svg { width: 11px; height: 11px; }

.message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.message-attachment-image { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; }
.message-attachment-file {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; text-decoration: none; color: inherit;
}

.chat-empty { margin: 40% auto 0; color: var(--muted); font-size: 16px; text-align: center; }
.chat-status { display: block; font-size: 12px; color: var(--muted); }

.send {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9a4d, var(--login-orange));
  color: #fff;
  box-shadow: 0 6px 18px rgba(255,116,23,.38);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.send:disabled, .btn:disabled { opacity: 0.45; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .composer .toolbar-icon-btn { background: #2c2d32; color: #e6e6e6; }
}
html[data-theme="dark"] .composer .toolbar-icon-btn { background: #2c2d32; color: #e6e6e6; }

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 40;
  flex-direction: column;
}

.overlay.show { display: flex; }

.sheet-overlay {
  justify-content: flex-end;
  background: rgba(12, 15, 13, 0.42);
  backdrop-filter: blur(4px);
}

.sheet-panel {
  width: min(720px, 100%);
  max-height: calc(100% - var(--safe-top));
  margin: 0 auto;
  overflow: auto;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.2);
  padding-bottom: var(--safe-bottom);
}

.sheet-panel .topbar { position: sticky; }
.sheet-panel .topbar h2 { flex: 1; }
.auth-card { padding: 0 20px 28px; }
#auth-sheet {
  align-items: center;
  padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom));
}
#auth-sheet .sheet-panel {
  max-width: 540px;
  max-height: min(82dvh, 680px);
  border-radius: 24px;
  padding-bottom: 0;
}
#auth-sheet .topbar { min-height: 60px; padding-bottom: 4px; }
#auth-sheet .topbar h2 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
#auth-sheet .topbar .icon-btn { width: 44px; height: 44px; }
#auth-sheet .auth-card { padding: 0 20px 22px; }
#rename-sheet .rename-card { padding: 12px 20px max(28px, calc(18px + var(--safe-bottom))); }
#rename-sheet #rename-form { margin-top: 0; gap: 14px; }
#rename-sheet #rename-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  border-radius: 16px;
}
#rename-sheet #rename-form .primary {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  font-size: 17px;
}
#rename-sheet .rename-delete {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  padding: 10px 14px;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 16px;
}
#rename-sheet .form-error:empty { display: none; }
.auth-lede { margin: 0 0 18px; color: var(--muted); text-align: left; font-size: 15px; }
.legal-action-note {
  max-width: 430px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.legal-action-note a { color: inherit; text-decoration-color: color-mix(in srgb, var(--ink) 42%, transparent); text-underline-offset: 3px; }
.legal-action-note a:hover { color: var(--login-orange); text-decoration-color: currentColor; }
.yandex-login {
  width: 100%; border: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--login-orange);
  color: #fff;
  box-shadow: 0 7px 20px rgba(255, 116, 23, .24);
  text-decoration: none;
  font-weight: 650;
}
.yandex-login { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.yandex-login:not(:disabled):active { transform: scale(.985); }
.yandex-login:disabled {
  opacity: 1;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: not-allowed;
}
.yandex-login:disabled .yandex-mark { filter: grayscale(1); opacity: .5; }
#auth-submit:disabled { opacity: .42; box-shadow: none; cursor: not-allowed; }
.yandex-mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fc3f1d; color: #fff; font-size: 21px; font-weight: 700; }
.password-auth-toggle {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
}
.password-auth-toggle:hover { color: var(--ink); background: var(--paper-2); }
.oauth-error { margin: 10px 0 0; text-align: center; }
#password-auth-panel { margin-top: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.auth-tabs button { min-width: 0; padding: 10px 8px; border-radius: 12px; color: var(--muted); }
.auth-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

.overlay-body { flex: 1; overflow: auto; padding-bottom: calc(24px + var(--safe-bottom)); width: min(720px, 100%); }

.search { display: block; padding: 0 16px 8px; position: relative; }

.tabs { display: flex; gap: 6px; padding: 0 16px 8px; overflow: auto; }
.tabs button {
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  white-space: nowrap;
}
.tabs button[aria-selected="true"] { background: var(--spruce); color: var(--spruce-ink); box-shadow: none; }

.section-label { margin: 12px 16px 4px; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

.model, .family { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; }
.model .pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  text-align: left;
  min-width: 0;
}
.model .pick b { overflow-wrap: anywhere; }
.model p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 14px; }
.price { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.star { border: 0; background: transparent; color: var(--spruce); font-size: 18px; padding: 0 4px; }

/* Fullscreen model catalog: mobile-first, compact rows and fixed category dock. */
#catalog {
  --catalog-bg: #fff;
  --catalog-ink: #171717;
  --catalog-muted: #777;
  --catalog-faint: #969696;
  --catalog-line: rgba(20, 20, 20, .08);
  --catalog-control: #f3f3f3;
  --catalog-mark: #f5f5f5;
  --catalog-price: #f1f1f1;
  --catalog-price-ink: #555;
  --catalog-active: #292929;
  --catalog-active-ink: #fff;
  --catalog-title-weight: 550;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background: var(--catalog-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  color: var(--catalog-ink);
}
html[data-theme="dark"] #catalog {
  --catalog-bg: #101412;
  --catalog-ink: #f3f0e8;
  --catalog-muted: #b7b1a6;
  --catalog-faint: #8f948f;
  --catalog-line: rgba(243, 240, 232, .12);
  --catalog-control: #252c29;
  --catalog-mark: #202724;
  --catalog-price: #252c29;
  --catalog-price-ink: #dedad1;
  --catalog-active: #f3f0e8;
  --catalog-active-ink: #171a18;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #catalog {
    --catalog-bg: #101412;
    --catalog-ink: #f3f0e8;
    --catalog-muted: #b7b1a6;
    --catalog-faint: #8f948f;
    --catalog-line: rgba(243, 240, 232, .12);
    --catalog-control: #252c29;
    --catalog-mark: #202724;
    --catalog-price: #252c29;
    --catalog-price-ink: #dedad1;
    --catalog-active: #f3f0e8;
    --catalog-active-ink: #171a18;
  }
}
#catalog .overlay-body { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; padding: 0 0 calc(88px + var(--safe-bottom)); }
.catalog-top {
  gap: 10px;
  min-height: calc(78px + var(--safe-top));
  padding: calc(14px + var(--safe-top)) 12px 10px;
  background: color-mix(in srgb, var(--catalog-bg) 94%, transparent);
  border-bottom: 1px solid var(--catalog-line);
}
.catalog-search { position: relative; flex: 1; min-width: 0; display: block; }
.catalog-search input {
  min-height: 44px;
  padding: 8px 12px 8px 36px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  color: var(--catalog-ink);
  font-size: 17px;
  box-shadow: none;
}
.catalog-search input::placeholder { color: var(--catalog-faint); opacity: 1; }
.catalog-search-icon {
  position: absolute; left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  color: var(--catalog-faint);
  pointer-events: none;
}
#catalog .icon-btn.round { flex: 0 0 44px; width: 44px; height: 44px; background: var(--catalog-control); color: var(--catalog-ink); }
#catalog .icon-btn.round svg { width: 22px; height: 22px; }

#catalog.family-view .catalog-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
}
#catalog.family-view .catalog-search { display: none; }
#catalog.family-view #catalog-back { grid-column: 1; grid-row: 1; }
#catalog.family-view #catalog-title {
  grid-column: 2;
  grid-row: 1;
  position: static;
  width: auto;
  height: auto;
  overflow: hidden;
  clip: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#catalog.family-view #catalog-close { grid-column: 3; grid-row: 1; }

.catalog-nav {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 4px;
  width: 100%; max-width: 720px; min-width: 0; margin: 0 auto;
  padding: 6px 7px calc(7px + var(--safe-bottom));
  background: color-mix(in srgb, var(--catalog-bg) 94%, transparent);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--catalog-line);
}
.catalog-nav button {
  flex: 1 1 0;
  width: 25%;
  min-width: 0;
  min-height: 58px;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  padding: 5px 3px;
  border-radius: 16px;
  color: var(--catalog-ink);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.catalog-nav button svg { width: 26px; height: 26px; }
.catalog-nav button[aria-selected="true"] { background: var(--catalog-active); color: var(--catalog-active-ink); }

#catalog .catalog-list { width: 100%; max-width: 720px; min-width: 0; overflow-x: hidden; margin: 0 auto; padding: 14px 7px 16px; }
#catalog .section-label { min-height: 24px; margin: 1px 4px 7px; display: flex; align-items: center; gap: 8px; color: var(--catalog-faint); font-size: 15px; letter-spacing: 0; text-transform: none; }
#catalog .section-label svg { width: 19px; height: 19px; flex: 0 0 19px; }
#catalog .cat-row + .section-label { margin-top: 9px; }
#catalog .section-label + .cat-row { margin-top: 0; }

.cat-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 1px 0;
  text-align: left;
}
button.cat-row { border-radius: 16px; }
button.cat-row:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cat-row-main {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: 3px 4px;
  border-radius: 12px;
  text-align: left;
}
.cat-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--catalog-mark);
  color: var(--catalog-muted);
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 auto;
  overflow: hidden;
}
.cat-mark svg { width: 24px; height: 24px; }
.cat-mark-openai, .cat-mark-anthropic, .cat-mark-google, .cat-mark-deepseek,
.cat-mark-qwen, .cat-mark-seed, .cat-mark-recraft, .cat-mark-xai,
.cat-mark-alibaba, .cat-mark-runway { background: var(--catalog-mark); color: var(--catalog-muted); box-shadow: none; }
.cat-text { min-width: 0; max-width: 100%; overflow: hidden; display: grid; gap: 1px; }
.cat-heading { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; overflow: hidden; }
.cat-text b { min-width: 0; font-size: 16px; line-height: 1.16; font-weight: var(--catalog-title-weight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-badges { display: flex; gap: 5px; flex: 0 0 auto; }
.cat-badge { padding: 3px 8px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.15; }
.cat-badge-new { background: #ff7900; }
.cat-badge-discount { background: #7467f5; }
.cat-badge-demo { background: var(--spruce); color: var(--spruce-ink); }
.cat-selected {
  position: absolute;
  z-index: 1;
  left: 34px;
  top: 3px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--spruce-ink);
  font-size: 12px;
  vertical-align: 1px;
}
.cat-row.is-selected .cat-row-main { background: transparent; }
.cat-row.is-selected .cat-text b { font-weight: 700; }
.cat-row-recommended { min-height: 60px; margin-bottom: 2px; }
.cat-row-recommended .cat-row-main { min-height: 58px; }
.cat-row-recommended .cat-text b { font-size: 17px; }
.cat-row-recommended .cat-sub { font-size: 13px; }
.cat-sub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-price { max-width: 84px; overflow: hidden; text-overflow: ellipsis; padding: 3px 7px; border-radius: 999px; background: var(--catalog-price); color: var(--catalog-price-ink); font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-arrow { color: var(--catalog-muted); display: grid; place-items: center; }
.cat-arrow svg { width: 18px; height: 18px; }
.cat-actions { min-width: 0; display: flex; gap: 0; align-items: center; }
.cat-info-btn {
  width: 26px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--catalog-muted);
}
.cat-info-btn svg { width: 16px; height: 16px; }
.cat-info-btn[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }
.cat-row .star { width: 28px; height: 34px; padding: 0; color: var(--catalog-faint); font-size: 23px; font-weight: 300; }
.cat-info {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 8px 9px 54px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#catalog .catalog-list.is-family { padding-top: 16px; }
.catalog-list.is-family .cat-row-family-model {
  min-height: 46px;
  padding: 0;
}
.catalog-list.is-family .cat-row-family-model .cat-row-main {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  gap: 8px;
  padding: 3px 4px 3px 8px;
}
.catalog-list.is-family .cat-row-family-model .cat-mark,
.catalog-list.is-family .cat-row-family-model .cat-sub { display: none; }
.catalog-list.is-family .cat-row-family-model .cat-text b { font-size: 15px; font-weight: var(--catalog-title-weight); }
.catalog-list.is-family .cat-row-family-model.is-selected .cat-text b { font-weight: 700; }
.catalog-list.is-family .cat-row-family-model .cat-selected { display: none; }
.catalog-list.is-family .cat-row-family-model .cat-price { font-size: 13px; }
.catalog-list.is-family .cat-row-family-model .cat-info { padding-left: 8px; }

@media (min-width: 700px) {
  #catalog .catalog-list { padding-inline: 24px; }
  .catalog-top { padding-inline: max(16px, calc((100% - 720px) / 2)); }
}

@media (max-width: 380px) {
  .cat-selected { left: 31px; top: 2px; }
  .catalog-nav button { font-size: 12px; }
  .catalog-nav button svg { width: 23px; height: 23px; }
  .cat-text b { font-size: 15px; }
  .cat-price { max-width: 76px; font-size: 12px; padding-inline: 6px; }
  .cat-row-main { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px; padding-inline: 2px; }
  .cat-mark { width: 38px; height: 38px; }
  .cat-info-btn { width: 24px; }
  .cat-row .star { width: 25px; }
  #catalog.family-view .catalog-top { grid-template-columns: 42px minmax(0, 1fr) 42px; }
  #catalog.family-view #catalog-title { font-size: 17px; }
  .catalog-list.is-family .cat-row-family-model .cat-text b { font-size: 14px; }
}

.balance-xl { font-size: 40px; letter-spacing: -0.04em; margin: 8px 16px; font-variant-numeric: tabular-nums; }
#wallet .topbar h2 { margin-right: auto; }
.wallet-refresh { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 650; }
.wallet-refresh svg { width: 19px; height: 19px; }
.wallet-refresh:disabled { opacity: .58; }
.wallet-refresh.is-loading svg { animation: wallet-refresh-spin .75s linear infinite; }
@keyframes wallet-refresh-spin { to { transform: rotate(360deg); } }
@media (max-width: 370px) { .wallet-refresh span { display: none; } .wallet-refresh { width: 42px; padding: 0; justify-content: center; } }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 8px; }
.pack { border-radius: 16px; padding: 16px; font-weight: 700; font-size: 18px; }
.wallet-custom-topup { min-width: 0; margin: 0 16px 14px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.wallet-custom-topup > label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.wallet-custom-topup-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.wallet-custom-topup input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px; }
.wallet-custom-topup .btn { min-width: 112px; padding-inline: 14px; }
.wallet-custom-topup small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
@media (max-width: 370px) { .wallet-custom-topup-row { grid-template-columns: 1fr; } .wallet-custom-topup .btn { width: 100%; } }
.overlay h3 { margin: 16px 16px 0; font-size: 16px; }
.history li { display: flex; justify-content: space-between; gap: 12px; }
.history li[hidden] { display: none; }
.wallet-history-toggle { display: block; width: calc(100% - 32px); min-height: 48px; margin: -20px 16px 24px; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 650; }
#autotopup-form { padding: 0 16px; }
#autotopup-form .reminder-field label, #autotopup-form .reminder-field > span { font-size: 13px; }
#autotopup-form .reminder-field input { width: calc(100% - 12px); margin-inline: 6px; }
.plus { color: var(--spruce); }
.minus { color: var(--danger); }

.profile-panel {
  width: min(720px, 100%);
  height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--paper);
  padding: var(--safe-top) 18px calc(18px + var(--safe-bottom));
}
.profile-view { padding-bottom: 8px; }
.profile-main-head { min-height: 54px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; margin-bottom: 4px; }
.profile-main-head h2 { margin: 0; text-align: center; font-size: 20px; }
.profile-head-actions { display: flex; gap: 2px; }
.profile-head-actions .icon-btn { position: relative; }
.profile-more-menu { position: fixed; z-index: 4; top: calc(var(--safe-top) + 58px); right: max(18px, calc((100vw - 720px) / 2 + 18px)); width: min(270px, calc(100vw - 36px)); padding: 7px; border-radius: 18px; background: var(--card); box-shadow: 0 12px 36px rgba(0,0,0,.2), inset 0 0 0 1px var(--line); }
.profile-more-menu[hidden] { display: none; }
.profile-more-menu button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-align: left; font-size: 15px; }
.profile-more-menu button + button { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.profile-more-icon { width: 22px; height: 22px; display: grid; place-items: center; border: 1.7px solid currentColor; border-radius: 50%; font-weight: 800; }
.profile-more-menu svg { width: 22px; height: 22px; }
.profile-more-menu .profile-more-logout { color: var(--danger); }
.profile-hero { display: grid; justify-items: center; gap: 8px; padding: 10px 8px 18px; }
.profile-hero .profile-avatar { width: 72px; height: 72px; font-size: 28px; }
.profile-hero > strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 23px; letter-spacing: -.025em; }
.profile-id { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; color: var(--muted); background: var(--paper-2); font-size: 12px; }
.profile-id svg { width: 15px; height: 15px; }
.profile-account-tabs { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 10px; padding: 4px; border-radius: 15px; background: var(--paper-2); }
.profile-account-tabs button { min-width: 0; min-height: 42px; padding: 6px 8px; border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.15; }
.profile-account-tabs button.is-active { color: var(--ink); background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.07); font-weight: 650; }
.profile-account-tabs small { display: block; margin-top: 2px; color: var(--login-orange); font-size: 10px; }
.profile-wallet-card { padding: 17px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.profile-wallet-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.profile-wallet-top button { min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--login-orange); color: #fff; font-weight: 700; }
.profile-wallet-card > strong { display: block; margin: 8px 0 16px; font-size: 34px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.profile-demo-row { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto 24px; gap: 8px; align-items: center; padding-top: 13px; border-top: 1px solid var(--line); text-align: left; }
.profile-demo-row b { font-variant-numeric: tabular-nums; }
.profile-help { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; }
.profile-action-card { width: 100%; min-width: 0; min-height: 68px; display: grid; grid-template-columns: 40px minmax(0,1fr) 20px; gap: 11px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.profile-action-card > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.profile-action-card small { color: var(--muted); font-size: 12px; }
.profile-action-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--login-orange) 14%, transparent); color: var(--login-orange); font-weight: 800; }
.profile-referral-card { width: 100%; min-height: 106px; display: grid; grid-template-columns: minmax(0,1fr) 48px; align-items: center; margin-top: 10px; padding: 17px; border-radius: 22px; background: linear-gradient(135deg, #ff7820, #ff9a36); color: #fff; text-align: left; box-shadow: 0 8px 22px rgba(255,116,23,.2); }
.profile-referral-card > span:first-child { display: grid; gap: 4px; }
.profile-referral-card small { opacity: .78; }
.profile-referral-card strong { font-size: 22px; }
.profile-referral-card em { font-style: normal; opacity: .88; font-size: 13px; }
.profile-referral-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 24px; }
.profile-sections { display: grid; grid-template-columns: repeat(5, minmax(max-content,1fr)); gap: 4px; margin: 14px -18px -8px; padding: 0 18px 8px; overflow-x: auto; scrollbar-width: none; }
.profile-sections::-webkit-scrollbar { display: none; }
.profile-sections button { min-height: 38px; padding: 0 11px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: 12px; white-space: nowrap; }
.profile-hidden-action { display: none !important; }
.profile-summary { width: 100%; min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 4px 8px 14px; text-align: left; }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--spruce-soft); color: var(--spruce); font-size: 21px; font-weight: 700; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-summary-copy { min-width: 0; display: grid; }
.profile-summary-copy strong { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary-copy small, .profile-account-values small { color: var(--muted); font-size: 14px; }
.profile-chevron { color: var(--muted); font-size: 32px; line-height: 1; text-align: right; }
.profile-divider { height: 1px; margin: 0 8px 14px; background: var(--line); }
.profile-section-label { margin: 0 10px 10px; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.profile-account { width: 100%; min-height: 64px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 18px; background: var(--paper-2); text-align: left; }
.profile-account-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--login-orange) 14%, transparent); color: var(--login-orange); }
.profile-account-icon svg { width: 21px; height: 21px; }
.profile-account-values { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.profile-account-values strong { font-size: 18px; }
.profile-topup { width: 100%; min-height: 58px; margin: 10px 0 16px; display: flex; justify-content: center; align-items: center; gap: 12px; border-radius: 999px; background: var(--login-orange); color: #fff; font-size: 18px; font-weight: 650; box-shadow: 0 6px 18px rgba(255, 116, 23, 0.24); }
.profile-topup svg { width: 26px; height: 26px; }
.profile-menu-item { width: 100%; min-height: 56px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; color: var(--muted); text-align: left; font-size: 18px; }
.profile-menu-item > span:first-child { text-align: center; }
.profile-menu-icon { display: grid; place-items: center; }
.profile-menu-icon svg { width: 23px; height: 23px; }
.profile-menu-item small { font-size: 14px; }
.profile-logout { margin-top: 6px; color: color-mix(in srgb, var(--danger) 82%, var(--muted)); }
.profile-push-item { cursor: pointer; }
.profile-push-icon { display: grid; place-items: center; }
.profile-push-icon svg { width: 24px; height: 24px; }
.profile-switch { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; padding: 2px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--muted) 32%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 18%, transparent); transition: background .18s ease; cursor: pointer; }
.profile-switch::before { content: ""; display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); transition: transform .18s ease; }
.profile-switch:checked { background: var(--login-orange); }
.profile-switch:checked::before { transform: translateX(20px); }
.profile-switch:focus-visible { outline: 3px solid color-mix(in srgb, var(--login-orange) 42%, transparent); outline-offset: 2px; }
.profile-switch:disabled { opacity: .45; cursor: default; }
.notification-settings { display: grid; gap: 0; padding-bottom: 8px; }
.notification-setting { min-width: 0; min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.notification-setting > span { min-width: 0; display: grid; gap: 3px; }
.notification-setting strong { font-size: 16px; font-weight: 650; }
.notification-setting small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.notification-master { margin: 4px 0 10px; padding: 14px; border: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.notification-group-label { margin: 4px 8px 2px; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.reminder-help-btn { font-size:20px;font-weight:750; }
.panel-head-actions { display:flex;align-items:center;justify-content:flex-end;gap:4px; }
.panel-head-actions .icon-btn { flex:0 0 44px; }
.reminder-help-copy { padding:8px 18px calc(18px + var(--safe-bottom));display:grid;gap:12px; }
.reminder-help-copy p { margin:0;color:var(--muted);line-height:1.45; }
.reminder-example { width:100%;padding:14px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-align:left;font-size:15px; }
.focus-help-example { display:grid;gap:5px;padding:14px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line); }
.focus-help-example span { color:var(--muted);line-height:1.4; }
.reminder-receipt { display:block;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--spruce-soft);color:var(--spruce);font-weight:700;text-align:left; }
.reminder-receipt small { display:block;margin-top:3px;font-weight:500;color:var(--muted); }
.profile-details-head { min-height: 54px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.profile-details-head h2 { text-align: center; }
.loyalty-page > .profile-details-head,
.referral-page > .profile-details-head,
.general-page > .profile-details-head,
.security-page > .profile-details-head,
.analytics-page > .profile-details-head,
.operations-page > .profile-details-head,
.api-page > .profile-details-head {
  min-height: calc(54px + var(--safe-top));
  padding: var(--safe-top) 16px 0;
  flex: 0 0 auto;
}
.profile-name { font-size: 26px; margin: 18px 0 0; letter-spacing: -0.03em; }
.profile-email { margin: 8px 0 22px; color: var(--muted); overflow-wrap: anywhere; }
.profile-details-identity { display: grid; justify-items: center; margin: 10px 0 18px; }
.profile-avatar-large { width: 88px; height: 88px; font-size: 34px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.profile-details-identity .profile-name { margin-top: 12px; text-align: center; }
.profile-data { margin: 0 0 22px; padding: 0 14px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.profile-data div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.profile-data div:last-child { border-bottom: 0; }
.profile-data dt { color: var(--muted); }
.profile-data dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.overlay .fine { padding: 0 16px; }
#profile-details .fine { padding: 0; }
.theme-set { border: 0; margin: 8px 0 22px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.theme-set legend { padding: 0 0 8px; color: var(--muted); font-size: 13px; }
.theme-set button { border-radius: 999px; padding: 8px 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.theme-set button[aria-pressed="true"] { background: var(--spruce); color: var(--spruce-ink); }
#delete-account { margin: 8px 0; width: 100%; min-height: 52px; }

.toast {
  position: fixed;
  left: 50%;
  top: calc(70px + var(--safe-top));
  transform: translate(-50%, -8px);
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  background: #163c31;
  color: #fff;
  border: 1px solid rgba(117, 200, 169, .32);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  padding: 10px 14px;
  border-radius: 14px;
  z-index: 50;
  max-width: calc(100% - 32px);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
}
.toast[data-kind="success"]::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #38b98b;
  color: #08271f;
  font-size: 14px;
  font-weight: 800;
}
.toast.is-visible { animation: toast-in .2s ease-out both; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px) scale(.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .toast.is-visible { animation: none; transform: translate(-50%, 0); }
}

.sessions-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + var(--safe-top)) 14px 8px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.home-sticky-stack {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 auto;
  background: var(--paper);
}

.brand-lockup { min-width: 0; }

.wordmark {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.05;
}

.wordmark span { color: #2997ff; }

.connection {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.connection::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--danger);
}

.connection.online::before { background: #1f9d55; box-shadow: 0 0 8px rgba(31, 157, 85, 0.45); }
.connection.checking::before { background: #d0892d; }

.icon-btn.round { border-radius: 50%; }
.push-toggle,.push-help { width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;flex:0 0 40px;border:1.5px solid rgba(142,142,147,.38);background:rgba(142,142,147,.10);color:#8e8e93;text-decoration:none;transition:.15s; }
.push-toggle svg { width:21px;height:21px; }
.push-toggle.active { color:#fff;background:var(--login-orange);border-color:#ffab6e;box-shadow:0 0 0 3px rgba(255,116,23,.28),0 3px 10px rgba(255,116,23,.32); }
.push-toggle-check { display:none; }
.push-toggle.completing .push-toggle-bell { display:none; }
.push-toggle.completing .push-toggle-check { display:block; }
.push-toggle.completing { color:#fff;background:var(--spruce);border-color:var(--spruce);box-shadow:0 0 0 3px color-mix(in srgb, var(--spruce) 24%, transparent);animation:push-cta-complete .7s ease forwards;pointer-events:none; }
@keyframes push-cta-complete { 0%,55% { opacity:1;transform:scale(1); } 100% { opacity:0;transform:scale(.78); } }
.push-toggle:active { transform:scale(.94); }
.push-help { width:28px;height:28px;flex-basis:28px;font-weight:800; }
.push-toggle[hidden],.push-help[hidden] { display:none; }
.push-toggle,.tabbar>button { position:relative; }
.nav-badge { position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ff3b30;color:#fff;font-size:10px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg); }
.nav-badge[hidden] { display:none!important; }
.tabbar .nav-badge { top:2px;right:calc(50% - 25px);box-shadow:0 0 0 2px var(--card); }
#notifications-center-sheet { z-index:45; }
.notification-center-sheet { width:min(720px,100%);height:100%;min-height:0;margin:0 auto;display:flex;flex-direction:column;padding:var(--safe-top) 18px calc(14px + var(--safe-bottom));background:var(--paper); }
.notification-center-head { min-height:54px;display:grid;grid-template-columns:88px minmax(0,1fr) 88px;align-items:center; }
.notification-center-head h2 { margin:0;text-align:center;font-size:20px; }
.notification-center-head .icon-btn { justify-self:start; }
.notification-clear-all { justify-self:end;color:var(--danger);font-size:12px; }
.notification-clear-all[hidden] { display:none; }
.notification-center-list { flex:1;min-height:0;display:grid;align-content:start;gap:8px;overflow:auto;padding:10px 0 18px; }
.notification-center-item-wrap { min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:6px;align-items:stretch; }
.notification-center-item { width:100%;display:grid;gap:4px;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);padding:13px 14px; }
.notification-center-item.is-read { opacity:.58; }
.notification-center-item strong { font-size:15px; }
.notification-center-item span,.notification-center-item time { color:var(--muted);font-size:13px;line-height:1.35; }
.notification-center-delete { width:40px;border-radius:14px;background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);font-size:20px; }
.notification-center-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }

#support { z-index: 60; flex-direction: column; background: var(--paper); }
#support.show { display: flex; }
.support-head { width: min(720px,100%); min-width:0; min-height: calc(62px + var(--safe-top)); margin:0 auto; padding:var(--safe-top) 12px 8px; display:grid; grid-template-columns:42px 42px minmax(0,1fr) 42px; gap:8px; align-items:center; border-bottom:1px solid var(--line); background:var(--paper); }
.support-avatar { width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--spruce-soft);color:var(--spruce); }
.support-avatar svg { width:23px;height:23px; }
.support-title-wrap { min-width:0; }
.support-title-wrap h2 { margin:0;font-size:16px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.support-status { margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.support-thread { width:min(720px,100%); min-width:0; flex:1; margin:0 auto; overflow-y:auto; overscroll-behavior:contain; padding:18px 14px calc(154px + var(--safe-bottom)); display:flex; flex-direction:column; gap:10px; }
.support-message { max-width:86%;min-width:0;padding:11px 13px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);align-self:flex-start;overflow-wrap:anywhere; }
.support-message.is-user { align-self:flex-end;background:var(--spruce);color:var(--spruce-ink);box-shadow:none;border-bottom-right-radius:6px; }
.support-message.is-support { border-bottom-left-radius:6px; }
.support-message p { margin:0;white-space:pre-wrap;line-height:1.4;font-size:15px; }
.support-message small { display:block;margin-top:6px;color:inherit;opacity:.62;font-size:10px;text-align:right; }
.support-message.is-pending { opacity:.76; }
.support-retry { display:block;margin:8px 0 0 auto;padding:5px 9px;border-radius:999px;background:color-mix(in srgb, currentColor 14%, transparent);color:inherit;font-size:12px;font-weight:650; }
.support-message-file { display:block;min-width:0;margin-top:8px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb, var(--paper) 55%, transparent);color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.support-composer { z-index:61; }
.support-composer .input-box { min-width:0; }
.support-composer textarea { font-size:16px; }
.support-composer .attach-preview { display:flex;gap:6px;overflow-x:auto;padding:7px 2px; }
.support-composer .attach-preview[hidden] { display:none; }
.support-pending-file { min-width:0;max-width:210px;display:flex;align-items:center;gap:6px;padding:7px 8px 7px 10px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line); }
.support-pending-file span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }
.support-pending-file button { flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--paper-2);color:var(--muted);font-size:18px; }
@media (max-width: 350px) { .support-head { grid-template-columns:38px 36px minmax(0,1fr) 38px;gap:5px;padding-inline:7px; } .support-status { font-size:10px; } .support-thread { padding-inline:10px; } }
.promo-overlay { z-index:70;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.42); }
.promo-overlay.show { display:flex; }
.promo-modal-card { position:relative;width:min(420px,100%);min-width:0;padding:26px 20px 20px;border-radius:24px;background:var(--card);box-shadow:0 22px 70px rgba(0,0,0,.25);display:grid;gap:14px; }
.promo-modal-card h2,.promo-modal-card p { margin:0; }
.promo-modal-card>p { color:var(--muted);font-size:14px;line-height:1.4; }
.promo-modal-card label { min-width:0; }
.promo-modal-card input { width:100%;min-width:0;max-width:100%;box-sizing:border-box;text-transform:uppercase;font-size:16px; }
.promo-close { position:absolute;right:10px;top:10px;font-size:24px; }
.promo-result { min-height:20px;color:var(--spruce)!important;font-weight:650; }
#loyalty { z-index:65;background:var(--paper); }
#loyalty.show { display:block; }
.loyalty-page { width:min(720px,100%);height:100%;margin:0 auto;display:flex;flex-direction:column;min-width:0; }
.loyalty-body { flex:1;min-height:0;overflow:auto;padding:16px 16px calc(28px + var(--safe-bottom));display:grid;align-content:start;gap:14px; }
.loyalty-summary,.loyalty-rules { padding:20px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line); }
.loyalty-summary { display:grid;gap:8px; }
.loyalty-summary small,.loyalty-summary p,.loyalty-rules p { color:var(--muted); }
.loyalty-summary strong { font-size:30px;letter-spacing:-.04em; }
.loyalty-summary b { color:var(--spruce); }
.loyalty-summary p,.loyalty-rules p { margin:0;font-size:14px;line-height:1.45; }
.loyalty-track { height:9px;border-radius:999px;background:var(--paper-2);overflow:hidden; }
.loyalty-track span { display:block;height:100%;width:0;border-radius:inherit;background:var(--spruce);transition:width .2s ease; }
.loyalty-levels { display:grid;gap:8px; }
.loyalty-level { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line); }
.loyalty-level span { display:grid;gap:2px; }.loyalty-level small { color:var(--muted); }.loyalty-level b { color:var(--spruce);font-size:18px; }
.loyalty-level.is-active { background:var(--spruce);color:var(--spruce-ink);box-shadow:none; }.loyalty-level.is-active small,.loyalty-level.is-active b { color:inherit; }
.loyalty-rules { display:grid;gap:10px; }.loyalty-rules h3 { margin:0; }
#referrals{z-index:66;background:var(--paper)}#referrals.show{display:block}.referral-page{width:min(720px,100%);height:100%;margin:auto;display:flex;flex-direction:column}.referral-body{flex:1;overflow:auto;padding:16px 16px calc(28px + var(--safe-bottom));display:grid;align-content:start;gap:14px}.referral-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.referral-summary>div,.referral-card{min-width:0;padding:16px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}.referral-summary div{display:grid;gap:5px}.referral-summary small,.referral-card p{color:var(--muted)}.referral-summary strong{font-size:18px}.referral-card{display:grid;gap:12px}.referral-card h3,.referral-card p{margin:0}.referral-link{min-width:0;display:flex;gap:8px;align-items:center;padding:10px;border-radius:14px;background:var(--paper-2)}.referral-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.referral-link button{color:var(--spruce);font-weight:700}.referral-card ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}@media(max-width:350px){.referral-summary{grid-template-columns:1fr}.referral-summary>div{grid-template-columns:1fr auto}}

.avatar-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--spruce-soft);
  color: var(--spruce);
  font-weight: 700;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
}

.avatar-btn svg { width: 22px; height: 22px; }
.avatar-btn img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar-btn.guest-login {
  width: auto;
  min-width: 82px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--login-orange);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 4px 12px rgba(255, 116, 23, 0.24);
}

.session-search-bar {
  flex: 0 0 auto;
  padding: 6px 12px 10px;
}

.session-search-wrap { position: relative; }

#session-search {
  height: 48px;
  border-radius: 18px;
  padding: 0 46px 0 42px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236d675e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34' /%3E%3Ccircle cx='11' cy='11' r='8' /%3E%3C/svg%3E") no-repeat 14px center;
  -webkit-appearance: none;
  appearance: none;
}

#session-search::-webkit-search-cancel-button { display: none; }

#session-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  display: grid;
  place-items: center;
}

#session-search-clear[hidden] { display: none; }

#session-search-clear svg { width: 16px; height: 16px; }

.session-list {
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px calc(120px + var(--safe-bottom));
  list-style: none;
}

.session-list:empty {
  flex: 0 0 auto;
  padding-bottom: 8px;
}

.session-card {
  width: 100%;
  min-height: 96px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  text-align: left;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  -webkit-user-select: none;
  user-select: none;
}

.session-card:active { transform: scale(0.985); }

.agent-icon {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--spruce);
  background: var(--spruce-soft);
  border: 1px solid var(--line);
}
.session-unread-badge { position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 3px;border-radius:999px;background:#ff3b30;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--card); }

.agent-icon svg { width: 22px; height: 22px; }
.agent-icon.tone-1 { color: #315b86; background: #eef3f8; }
.agent-icon.tone-2 { color: #6b4c2a; background: #f6f0e8; }
.agent-icon.tone-3 { color: #3d5a45; background: #eef4ef; }
.agent-icon.tone-4 { color: #5c456b; background: #f4eef6; }
.agent-icon.tone-5 { color: #6b3d3d; background: #f7eeee; }

html[data-theme="dark"] .agent-icon.tone-1,
html[data-theme="dark"] .agent-icon.tone-2,
html[data-theme="dark"] .agent-icon.tone-3,
html[data-theme="dark"] .agent-icon.tone-4,
html[data-theme="dark"] .agent-icon.tone-5 { background: var(--paper-2); }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .agent-icon.tone-1,
  html[data-theme="auto"] .agent-icon.tone-2,
  html[data-theme="auto"] .agent-icon.tone-3,
  html[data-theme="auto"] .agent-icon.tone-4,
  html[data-theme="auto"] .agent-icon.tone-5 { background: var(--paper-2); }
}

.session-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.session-card .row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.session-card .name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-card .time { font-size: 12px; color: var(--muted); flex: 0 0 auto; padding-top: 2px; }
.session-card .meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-card .preview {
  font-size: 13px;
  line-height: 1.38;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.session-card .name .star-icon { color: var(--login-orange); margin-right: 2px; }

.session-status-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.session-status-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.general-page{width:min(720px,100%);height:100%;margin:auto;display:flex;flex-direction:column}.general-body{flex:1;overflow:auto;padding:16px 16px calc(28px + var(--safe-bottom));display:grid;align-content:start;gap:14px}.general-card{min-width:0;padding:18px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:12px}.general-card h3,.general-card p{margin:0}.general-card p{color:var(--muted);font-size:14px}.general-card label{min-width:0}.general-card input,.general-card select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;font-size:16px}
.security-page{width:min(720px,100%);height:100%;margin:auto;display:flex;flex-direction:column}.security-body{flex:1;overflow:auto;padding:16px 16px calc(28px + var(--safe-bottom));display:grid;align-content:start;gap:14px}.security-card{min-width:0;padding:18px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:12px}.security-card h3,.security-card p{margin:0}.security-card p{color:var(--muted);font-size:14px}.security-card label,.security-card form{min-width:0}.security-card input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;font-size:16px}.security-methods{display:grid;gap:8px}.security-methods>div{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:14px;background:var(--paper-2)}.security-methods b{color:var(--spruce);font-size:13px}.security-qr{width:min(240px,100%);aspect-ratio:1;margin:auto;padding:8px;border-radius:16px;background:#fff}.security-qr svg{display:block;width:100%;height:100%}.security-secret{width:100%;min-width:0;padding:12px;border-radius:12px;background:var(--paper-2);overflow-wrap:anywhere;font-family:ui-monospace,monospace;letter-spacing:.08em}.security-backups{padding:14px;border-radius:16px;background:color-mix(in srgb,var(--spruce) 10%,var(--card));display:grid;gap:8px}.security-backups pre{margin:0;padding:12px;border-radius:12px;background:var(--paper-2);white-space:pre-wrap;font-size:15px;line-height:1.6}.security-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.security-card-head h3{min-width:0}.security-card-head .btn{width:auto;margin:0}.security-sessions{display:grid;gap:8px}.security-sessions article{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:14px;background:var(--paper-2)}.security-sessions article span{min-width:0;display:grid;gap:3px}.security-sessions strong,.security-sessions small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.security-sessions small{color:var(--muted)}.security-sessions button{flex:none;color:var(--danger);font-weight:650}.security-danger{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 35%,var(--line))}.security-danger form{display:grid;gap:12px}.security-danger form[hidden]{display:none}
.analytics-page{width:min(720px,100%);height:100%;margin:auto;display:flex;flex-direction:column}.analytics-body{flex:1;overflow:auto;padding:16px 16px calc(28px + var(--safe-bottom));display:grid;align-content:start;gap:14px}.analytics-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:15px;background:var(--paper-2)}.analytics-periods button{min-width:0;min-height:40px;padding:4px;border-radius:12px;color:var(--muted);font-size:12px}.analytics-periods button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.07);font-weight:700}.analytics-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.analytics-summary>div{min-width:0;padding:14px 10px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:5px}.analytics-summary small{color:var(--muted);font-size:11px}.analytics-summary strong{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:18px;font-variant-numeric:tabular-nums}.analytics-card{min-width:0;padding:18px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:14px}.analytics-card h3{margin:0}.analytics-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.analytics-card-head small{color:var(--muted)}.analytics-chart{height:150px;display:flex;align-items:flex-end;gap:3px;padding:10px 4px 0;border-bottom:1px solid var(--line);background:linear-gradient(to top,color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px);background-size:100% 25%}.analytics-chart i{flex:1;min-width:1px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--login-orange),color-mix(in srgb,var(--login-orange) 68%,var(--spruce)));transition:height .2s ease}.analytics-breakdown{display:grid;gap:13px}.analytics-breakdown article{display:grid;gap:7px}.analytics-breakdown article>div{min-width:0;display:flex;justify-content:space-between;gap:10px}.analytics-breakdown strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-breakdown span{flex:none;color:var(--muted);font-size:13px}.analytics-breakdown i{height:7px;border-radius:999px;background:var(--paper-2);overflow:hidden}.analytics-breakdown b{display:block;height:100%;border-radius:inherit;background:var(--spruce)}.analytics-prices{width:100%;min-width:0;min-height:76px;padding:15px 17px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;justify-content:space-between;text-align:left}.analytics-prices span{min-width:0;display:grid;gap:3px}.analytics-prices small{color:var(--muted)}.analytics-prices b{font-size:28px;color:var(--muted)}.analytics-note{margin:0 4px;line-height:1.45}
.operations-page{width:min(720px,100%);height:100%;margin:auto;display:flex;flex-direction:column}.operations-body{flex:1;overflow:auto;padding:12px 16px calc(28px + var(--safe-bottom));display:grid;align-content:start;gap:12px}.operations-filters{display:flex;gap:7px;overflow-x:auto;padding:3px 0 7px;scrollbar-width:none}.operations-filters::-webkit-scrollbar{display:none}.operations-filters button{flex:none;min-height:38px;padding:0 14px;border-radius:999px;color:var(--muted);background:var(--paper-2);font-size:13px}.operations-filters button[aria-pressed="true"]{color:#fff;background:var(--spruce);font-weight:700}.operations-list{display:grid;gap:9px}.operation-item{min-width:0;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}.operation-main{width:100%;min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px;text-align:left}.operation-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--spruce) 12%,transparent);color:var(--spruce);font-size:20px;font-weight:800}.operation-usage .operation-icon{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger)}.operation-main>span:nth-child(2){min-width:0;display:grid;gap:3px}.operation-main strong,.operation-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.operation-main small{color:var(--muted);font-size:12px}.operation-main>b{font-variant-numeric:tabular-nums;color:var(--spruce);white-space:nowrap}.operation-usage .operation-main>b{color:var(--ink)}.operation-detail{padding:0 14px 13px 62px;display:grid;gap:7px}.operation-detail[hidden]{display:none}.operation-detail p{min-width:0;margin:0;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}.operation-detail b{min-width:0;color:var(--ink);text-align:right;overflow-wrap:anywhere}.operations-empty{margin:28px 0;text-align:center;color:var(--muted)}.operations-note{padding:16px;border-radius:18px;background:var(--paper-2);display:grid;gap:7px}.operations-note p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.status-dot.status-idle { background: var(--muted); }
.status-dot.status-running { background: var(--spruce); animation: passwordai-status-pulse 1.4s ease-in-out infinite; }
.status-dot.status-error { background: var(--danger); }
@keyframes passwordai-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--card);
  border-radius: 18px;
  width: min(340px, 90vw);
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform: scale(0.05);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform;
}
.modal-overlay.open .modal-box { transform: scale(1); }
.sheet-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 16px;
  text-align: center;
  color: var(--spruce);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sheet-btn:first-child { border-top: none; }
.sheet-btn.sheet-cancel { color: var(--muted); font-weight: 600; }

#new-session-modal .modal-box { width: min(380px, 90vw); }
#new-session-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 10px;
  font-size: 18px;
  font-weight: 700;
}
#new-session-modal .modal-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
#new-session-input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--ink);
}
#new-session-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#new-session-chips:empty { display: none; }
.new-session-chip {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--paper-2);
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 16px 10px;
  flex: 0 0 auto;
}
.filter-chip-bar:empty { display: none; }
.filter-chip {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
}
.filter-chip.active { background: var(--spruce); color: var(--spruce-ink); box-shadow: none; }

.new-session-actions { display: flex; gap: 10px; }
.new-session-actions button {
  flex: 1;
  border: 0;
  border-radius: 14px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.new-session-actions button:active { transform: scale(0.98); }
#new-session-ok-btn { background: var(--spruce); color: var(--spruce-ink); }
#new-session-cancel-btn { background: var(--paper-2); color: var(--ink); }

.tabbar {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(2px + var(--safe-bottom));
  width: min(420px, calc(100% - 24px));
  transform: translateX(-50%);
  z-index: 25;
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 56px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(18, 18, 20, 0.68);
  color: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  overflow: hidden;
}

body[data-view="home"] .tabbar,
body[data-view="reminders"] .tabbar,
body[data-view="memory"] .tabbar,
body[data-view="focus"] .tabbar { display: grid; }

.tabbar > button {
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 23px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}

.tabbar > button.is-active { color: #fff; background: rgba(255, 255, 255, 0.18); }
.tabbar svg { width: 24px; height: 24px; }
.tabbar .label {
  display: none;
}

.tabbar .plus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #ff9a4d, var(--login-orange));
  box-shadow: 0 5px 16px rgba(255, 116, 23, 0.42);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
}

@media (min-width: 700px) {
  .tabbar { width: min(480px, 92vw); }
}

.chat-title-wrap { min-width: 0; flex: 1; }
.chat-title-wrap h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- personal views: reminders, memory, focus ---------- */

.view-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  margin: 0 auto;
}

.panel-body {
  flex: 1;
  overflow: auto;
  padding: 12px 16px calc(120px + var(--safe-bottom));
}

.reminder-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.reminder-form input[type="text"], .reminder-form textarea, .reminder-form select,
.reminder-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 14px;
  padding: 12px;
  font-size: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.reminder-form textarea { resize: vertical; min-height: 56px; }
.reminder-form-row { display: flex; flex-direction: column; gap: 10px; overflow-x: hidden; }
.reminder-field { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.reminder-field label, .reminder-field > span { font-size: 12px; color: var(--muted); }
.reminder-field input[type="date"], .reminder-field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--card);
  border: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
.reminder-quick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.reminder-quick-chip {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
}
.reminder-quick-chip:active { transform: scale(0.95); }
#reminder-create-btn { width: 100%; }
#reminder-session-hint:empty { display: none; }

.reminders-list { display: flex; flex-direction: column; gap: 10px; }
.reminders-empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.reminder-slot { display: flex; flex-direction: column; gap: 6px; }
.reminder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 18px;
  padding: 12px;
}
.reminder-item.is-paused { opacity: 0.55; }
.reminder-item-main { flex: 1; min-width: 0; }
.reminder-item-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-item-sub { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-item-toggle {
  width: 46px;
  height: 28px;
  border-radius: 14px;
  border: none;
  background: var(--line);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.reminder-item-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.15s ease;
}
.reminder-item-toggle.is-on { background: var(--spruce); }
.reminder-item-toggle.is-on::after { left: 21px; }
.reminder-item-edit, .reminder-item-delete {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 15px;
  flex: 0 0 auto;
}
.reminder-item-delete { color: var(--danger); font-size: 20px; font-weight: 300; line-height: 1; }
.reminder-item-edit:active, .reminder-item-delete:active { transform: scale(0.92); }
.reminder-item-edit-row {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 16px;
  padding: 10px;
}
.reminder-item-edit-row.open { display: flex; }
.reminder-item-edit-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 9px 8px;
  font-size: 15px;
  background: var(--paper-2);
  color: var(--ink);
}
.reminder-item-edit-save {
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 700;
  background: var(--spruce);
  color: var(--spruce-ink);
  cursor: pointer;
  flex: 0 0 auto;
}

.confirm-text { margin: 0 0 14px; font-size: 15px; line-height: 1.4; }
#confirm-sheet .modal-box { width: min(340px, 88vw); padding: 18px; }
#confirm-ok-btn { background: var(--danger); color: #fff; }

.memory-search-wrap { display: block; margin-bottom: 10px; }
.memory-list { display: flex; flex-direction: column; gap: 8px; }
.memory-empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.memory-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 16px;
  padding: 12px;
}
.memory-item.highlight { box-shadow: inset 0 0 0 2px var(--spruce); animation: memory-flash 1.6s ease; }
@keyframes memory-flash {
  0%, 40% { background: color-mix(in srgb, var(--spruce) 22%, var(--card)); }
  100% { background: var(--card); }
}
.memory-item-text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.memory-item.is-expanded .memory-item-text { -webkit-line-clamp: unset; display: block; }
.memory-delete {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--paper-2);
  color: var(--danger);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  flex: 0 0 auto;
}
.memory-pin {
  width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--paper-2); color: var(--muted); cursor: pointer; flex: 0 0 auto; font-size: 16px;
}
.memory-pin.is-pinned { color: #d79b16; }
.memory-receipt {
  display: block;
  margin: 6px 0 0;
  border: 0;
  padding: 0;
  background: none;
  color: var(--spruce);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.focus-goal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#focus-goal-label { font-size: 16px; font-weight: 700; }
.focus-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.focus-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--spruce);
  transition: width 0.25s ease;
}
.focus-bar-fill.over-target { background: var(--danger); }
.focus-breakdown-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.focus-empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.focus-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.focus-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.focus-row.focus-in-goal .focus-check { border-color: var(--spruce); background: var(--spruce); }
.focus-row.focus-in-goal .focus-check::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--spruce-ink);
  border-bottom: 2px solid var(--spruce-ink);
  transform: rotate(-45deg) translateY(-1px);
}
.focus-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-pct { font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.focus-row.focus-in-goal .focus-pct { color: var(--spruce); }
.focus-hint { margin-top: 12px; }

@media (min-width: 900px) {
  body { background: var(--paper-2); }
  .app { background: var(--paper); box-shadow: var(--shadow); }
}

/* Profile API */
.api-page { width:100%; min-width:0; min-height:100%; background:var(--paper); color:var(--ink); }
.api-body { min-width:0; padding:16px max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); display:flex; flex-direction:column; gap:14px; }
.api-intro,.api-docs,.api-key { background:var(--card); border-radius:18px; box-shadow:inset 0 0 0 1px var(--line); padding:16px; }
.api-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.api-intro p,.api-docs p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.api-intro .btn { flex:0 0 auto; }
.api-search { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; min-width:0; }
.api-search input,.api-create-card input { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.api-keys { display:flex; flex-direction:column; gap:10px; }
.api-key-head { display:flex; align-items:flex-start; gap:10px; }
.api-key-head > span { flex:1; min-width:0; }
.api-key-head strong,.api-key-head small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.api-key-head small { color:var(--muted); margin-top:4px; }
.api-key-status { border-radius:999px; padding:5px 8px; font-size:12px; background:color-mix(in srgb,var(--spruce) 15%,transparent); color:var(--spruce); }
.api-key-status.off { background:var(--paper-2); color:var(--muted); }
.api-key-meta { margin:12px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12px; color:var(--muted); }
.api-key-models { font-size:12px; line-height:1.4; color:var(--muted); word-break:break-word; }
.api-key-actions { display:flex; gap:8px; margin-top:12px; }
.api-key-actions .btn { flex:1; }
.api-docs h3 { margin:0; }
.api-docs { min-width:0; }
.api-docs > button { width:100%; min-width:0; margin-top:8px; border:0; border-radius:12px; background:var(--paper-2); color:var(--ink); padding:12px; display:flex; justify-content:space-between; gap:8px; text-align:left; }
.api-docs > button code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.api-docs > button span { flex:none; }
.api-docs code,.api-docs pre { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.api-docs details { margin-top:14px; }
.api-docs summary { cursor:pointer; font-weight:700; }
.api-docs pre { white-space:pre-wrap; word-break:break-word; background:var(--paper-2); border-radius:12px; padding:12px; font-size:11px; line-height:1.5; overflow:auto; }
.api-create-card fieldset { border:0; padding:0; margin:14px 0; min-width:0; }
.api-create-card legend { font-weight:700; margin-bottom:8px; }
.api-models { max-height:240px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.api-models label { display:flex; flex-direction:row; align-items:center; gap:10px; padding:10px; border-radius:12px; background:var(--paper-2); }
.api-models input { width:20px; height:20px; flex:0 0 auto; }
.api-secret { width:100%; border:0; border-radius:12px; padding:14px; background:var(--paper-2); color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; text-align:left; margin:8px 0 14px; }
@media (max-width:359px) { .api-intro { align-items:stretch; flex-direction:column; } .api-intro .btn { width:100%; } .api-key-meta { grid-template-columns:1fr; } }

/* iOS WebKit can collapse a nested grid row around the horizontal filter scroller. */
.operations-body { min-height:0; display:flex; flex-direction:column; align-content:normal; }
.operations-filters,.operations-list,.operations-note { flex:none; }

.create-category-icon { display: grid; width: 28px; height: 28px; place-items: center; }
.create-category-icon svg { width: 28px; height: 28px; }
#quick-model-icon { display: grid; place-items: center; }
#quick-model-icon svg { width: 16px; height: 16px; }
.quick-model-chevron { transform: none; }
.quick-model-chevron svg { width: 16px; height: 16px; display: block; }
.tabbar .plus svg { width: 22px; height: 22px; }
.profile-more-menu .profile-more-icon svg { width: 14px; height: 14px; }
.profile-help svg { width: 14px; height: 14px; }
.profile-action-icon svg { width: 20px; height: 20px; }
.profile-referral-mark svg { width: 22px; height: 22px; }
.profile-chevron { display: grid; place-items: center; justify-self: end; }
.profile-chevron svg { width: 22px; height: 22px; }
.push-help svg { width: 16px; height: 16px; }
.support-pending-file button svg { width: 14px; height: 14px; }

/* Plus, mic, and send only. Do not target .send or .toolbar-icon-btn. */
.quick-actions:has(#quick-attach) {
  gap: 8px;
  align-items: center;
}
#toolbar-right:has(#mic-btn) {
  gap: 8px;
  align-items: center;
}
#input-toolbar:has(#mic-btn) {
  overflow: visible;
}
#quick-attach,
.quick-actions #quick-mic-btn,
#quick-send,
#attach-btn,
#mic-btn,
#send {
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  min-height: 46px;
  max-height: 46px;
  flex: 0 0 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  opacity: 1;
  line-height: 0;
}
#quick-attach svg,
.quick-actions #quick-mic-btn svg,
#quick-send svg,
#attach-btn svg,
#mic-btn svg,
#send svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
}
#quick-attach,
.quick-actions #quick-mic-btn,
#attach-btn,
#mic-btn {
  background: color-mix(in srgb, var(--paper-2) 72%, var(--card));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
.quick-actions #quick-mic-btn { margin-left: auto; }
#quick-mic-btn .mic-ring,
#mic-btn .mic-ring {
  display: none;
  animation: none;
}
#quick-send:not(:disabled),
#send:not(:disabled) {
  background: var(--spruce);
  color: var(--spruce-ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--spruce) 42%, transparent);
}
#quick-send:disabled,
#send:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--paper-2) 72%, var(--card));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
#attach-btn[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1.5px var(--spruce), 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
.quick-actions #quick-mic-btn.recording,
#mic-btn.recording {
  background: color-mix(in srgb, var(--paper-2) 72%, var(--card));
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent), 0 0 0 6px color-mix(in srgb, var(--danger) 18%, transparent);
}
#quick-attach:focus-visible,
.quick-actions #quick-mic-btn:focus-visible,
#quick-send:focus-visible,
#attach-btn:focus-visible,
#mic-btn:focus-visible,
#send:focus-visible {
  outline: 2px solid var(--spruce);
  outline-offset: 2px;
}
#quick-attach:active,
#attach-btn:active,
.quick-actions #quick-mic-btn:not(.recording):active,
#mic-btn:not(.recording):active {
  background: color-mix(in srgb, var(--paper-2) 46%, var(--ink));
}
#quick-send:not(:disabled):active,
#send:not(:disabled):active {
  background: color-mix(in srgb, var(--spruce) 82%, #000);
}
@media (hover: hover) {
  #quick-attach:hover,
  #attach-btn:hover,
  .quick-actions #quick-mic-btn:hover:not(.recording),
  #mic-btn:hover:not(.recording) {
    background: color-mix(in srgb, var(--paper-2) 48%, var(--card));
  }
  #quick-send:hover:not(:disabled),
  #send:hover:not(:disabled) {
    background: color-mix(in srgb, var(--spruce) 88%, #000);
  }
}
@media (prefers-reduced-motion: reduce) {
  #quick-mic-btn.transcribing::after,
  #mic-btn.transcribing::after,
  #quick-mic-btn .mic-ring,
  #mic-btn .mic-ring {
    animation: none;
  }
}
@media (max-width: 390px) {
  #quick-model { max-width: calc(100vw - 198px); }
}