:root {
  color-scheme: light;
  --bg: #f1f3eb;
  --bg-deep: #e8ece1;
  --surface: rgba(250, 251, 246, 0.95);
  --surface-solid: #fafbf6;
  --surface-soft: #f2f4ec;
  --surface-strong: #e7ebdf;
  --sidebar: rgba(246, 247, 240, 0.96);
  --studio: rgba(248, 249, 243, 0.97);
  --text: #252921;
  --text-soft: #666c60;
  --text-faint: #90968a;
  --border: rgba(68, 78, 60, 0.12);
  --border-strong: rgba(68, 78, 60, 0.20);
  --accent: #7b8b69;
  --accent-strong: #637257;
  --accent-soft: #e9eee3;
  --accent-wash: rgba(123, 139, 105, 0.11);
  --accent-rgb: 123, 139, 105;
  --accent-strong-rgb: 99, 114, 87;
  --accent-soft-rgb: 233, 238, 227;
  --danger: #bb5e65;
  --success: #617e63;
  --shadow-sm: 0 8px 22px rgba(73, 83, 61, 0.07);
  --shadow-md: 0 18px 44px rgba(73, 83, 61, 0.10);
  --shadow-lg: 0 34px 90px rgba(48, 54, 41, 0.14);
  --sidebar-width: 312px;
  --studio-width: 390px;
  --topbar-height: 72px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-deep: #000000;
  --surface: rgba(25, 25, 22, 0.96);
  --surface-solid: #1a1a17;
  --surface-soft: #22211d;
  --surface-strong: #2a2823;
  --sidebar: #000000;
  --studio: #000000;
  --text: #f4f1ea;
  --text-soft: #aaa397;
  --text-faint: #777167;
  --border: rgba(255, 247, 231, 0.11);
  --border-strong: rgba(255, 247, 231, 0.18);
  --accent: #ff9424;
  --accent-strong: #ffad52;
  --accent-soft: rgba(255, 148, 36, 0.14);
  --accent-wash: rgba(255, 148, 36, 0.09);
  --accent-rgb: 255, 148, 36;
  --accent-strong-rgb: 210, 91, 0;
  --accent-soft-rgb: 255, 240, 223;
  --danger: #f17676;
  --success: #5fb88a;
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 20px 48px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 36px 90px rgba(0, 0, 0, 0.50);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
html { background: var(--bg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, textarea, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.24);
  outline-offset: 2px;
}
.hidden { display: none !important; }
.mobile-only { display: none !important; }

.app-shell {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--studio-width);
  background:
    radial-gradient(circle at 20% -15%, rgba(var(--accent-rgb), 0.12), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(var(--accent-rgb), 0.06), transparent 25%),
    linear-gradient(150deg, var(--bg) 0%, var(--bg-deep) 100%);
  overflow: hidden;
}

/* Keep the raw guest/member shell behind one neutral boot stage until the
   session result has produced its final flex layout. The stage then
   cross-fades away, so neither identity ever sees the other layout move. */
.auth-boot-stage {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1000;
  overflow: hidden;
  color: var(--accent-strong);
  background:
    radial-gradient(circle at 50% 42%, var(--accent-wash), transparent 27%),
    var(--surface-solid);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .34s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .34s;
}
.auth-boot-content {
  position: fixed;
  left: 50%;
  top: 50vh;
  top: 50svh;
  width: max-content;
  display: grid;
  grid-template-rows: 76px 12px;
  place-items: center;
  gap: 14px;
  transform: translate(-50%, -50%);
}
.app-shell.auth-boot-pending .auth-boot-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.auth-boot-emblem {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgba(var(--accent-rgb), .10);
}
.auth-boot-emblem img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 15px;
}
.auth-boot-ring {
  position: absolute;
  inset: -13px;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 50%;
  animation: vesper-auth-boot-orbit 5.4s linear infinite;
}
.auth-boot-signal {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-wash);
  animation: vesper-auth-boot-signal 1.7s ease-in-out infinite;
}
.auth-boot-copy {
  display: block;
  height: 12px;
  line-height: 12px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .17em;
  white-space: nowrap;
}
.app-shell.auth-boot-revealing .sidebar,
.app-shell.auth-boot-revealing .workspace,
.app-shell.auth-boot-revealing .studio {
  animation: vesper-auth-shell-reveal .42s cubic-bezier(.22, 1, .36, 1) both;
}

/* R64: PWA cold launch fades ONLY the cover, over the fully opaque ready UI.
   Match the workspace backdrop so the handoff does not pulse through a third color.
   The session/layout gate, normal-browser and native-shell animations stay intact. */
html[data-vesper-standalone="true"] .auth-boot-stage {
  background:
    radial-gradient(circle at 50% -20%, var(--accent-wash), transparent 34%),
    var(--surface-solid);
}
html[data-vesper-standalone="true"][data-theme="dark"] .auth-boot-stage {
  background: #000000;
}
html[data-vesper-standalone="true"] .app-shell.auth-boot-revealing .sidebar,
html[data-vesper-standalone="true"] .app-shell.auth-boot-revealing .workspace,
html[data-vesper-standalone="true"] .app-shell.auth-boot-revealing .studio {
  animation: none;
  opacity: 1;
}

@keyframes vesper-auth-boot-orbit {
  to { transform: rotate(360deg); }
}
@keyframes vesper-auth-boot-signal {
  0%, 100% { transform: scale(.82); opacity: .62; }
  50% { transform: scale(1.16); opacity: 1; }
}
@keyframes vesper-auth-shell-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sidebar, .studio, .workspace { min-width: 0; min-height: 0; }
.sidebar {
  position: relative;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 16px 14px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.brand-row { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 4px 13px; }
.brand-mark-wrap {
  width: 40px; height: 40px; border-radius: 13px; overflow: hidden;
  box-shadow: 0 8px 20px rgba(var(--accent-strong-rgb), 0.14);
  flex: 0 0 auto;
}
.brand-mark { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 17px; letter-spacing: 0.11em; font-weight: 900; }
.brand-copy span { margin-top: 5px; color: var(--accent); font-size: 9px; letter-spacing: 0.17em; font-weight: 900; }
.preview-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-wash); }

.account-card {
  padding: 15px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.account-card-interactive {
  cursor: pointer;
  outline: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.account-card-interactive:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--surface-solid);
}
.account-card-interactive:focus-visible {
  border-color: rgba(var(--accent-rgb), .52);
  box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-sm);
}
.account-card-top { display: flex; gap: 10px; align-items: center; }
.account-profile-summary { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.account-card-top > .mini-icon-button, .account-profile-summary > .account-avatar { flex-shrink: 0; }
.account-name-edit { display: grid; place-items: center; padding: 0; }
.account-name-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-avatar {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 900;
  background: linear-gradient(145deg, #6f8478, #516359);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
[data-theme="dark"] .account-avatar { background: linear-gradient(145deg, #f1eee7, #c8c0b5); color: #151411; }
.account-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.account-copy strong { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy span { color: var(--text-faint); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-icon-button, .icon-button {
  border: 1px solid var(--border); background: var(--surface-solid); color: var(--text-soft);
  cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.mini-icon-button { width: 29px; height: 29px; border-radius: 10px; }
.icon-button { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-size: 17px; }
.mini-icon-button:hover, .icon-button:hover { transform: translateY(-1px); color: var(--text); border-color: var(--border-strong); background: var(--surface-soft); }
.sync-note { display: flex; align-items: center; gap: 7px; margin: 13px 0 11px; padding: 8px 9px; border-radius: 11px; color: var(--text-soft); background: var(--surface-soft); font-size: 10px; font-weight: 650; }
.sync-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(48, 122, 85, 0.10); }
.account-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.account-stats > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-solid); }
.account-stats > .account-plan-stat { padding: 0; }
.account-stat-trigger { width: 100%; height: 100%; padding: 9px 10px; border: 0; border-radius: inherit; background: transparent; text-align: left; cursor: pointer; }
.account-stat-trigger:hover { background: var(--accent-wash); }
#account-credit-balance { cursor: default; }
.account-stats span { display: block; color: var(--text-faint); font-size: 9px; margin-bottom: 5px; }
.account-stats strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.primary-action {
  margin-top: 13px; min-height: 48px; padding: 0 13px; border: 0; border-radius: 15px; cursor: pointer;
  display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 850;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 12px 25px rgba(var(--accent-strong-rgb), 0.18); transition: transform .16s ease, box-shadow .16s ease;
}
.primary-action:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(var(--accent-strong-rgb), 0.22); }
.primary-action-icon { font-size: 21px; line-height: 1; }
.primary-action kbd { margin-left: auto; padding: 3px 6px; border: 1px solid rgba(255,255,255,0.30); border-radius: 7px; color: rgba(255,255,255,0.78); font-size: 9px; background: rgba(255,255,255,0.10); }

.sidebar-section { margin-top: 17px; }
.rooms-section { min-height: 124px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 7px; color: var(--text-faint); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.text-button { border: 0; background: transparent; color: var(--accent); font-size: 10px; font-weight: 800; cursor: pointer; }
.rooms-manage-button { min-width: 64px; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 11px; background: var(--surface-solid); color: var(--accent-strong); box-shadow: 0 2px 5px rgba(0,0,0,.04); font-size: 12px; font-weight: 800; cursor: pointer; }
.rooms-manage-button:hover:not(:disabled) { background: var(--accent-wash); border-color: var(--accent); }
.rooms-manage-button:active:not(:disabled) { transform: translateY(1px); }
.rooms-manage-button:disabled { opacity: .45; cursor: default; box-shadow: none; }
@media (pointer: coarse) { .rooms-manage-button { min-height: 40px; } }
/* Keep every room in the drawer's single scroll flow, without a nested list viewport. */
.rooms-list { display: flex; flex-direction: column; gap: 5px; max-height: none; overflow: visible; }
.room-item { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 5px 7px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; color: var(--text-soft); background: transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.room-item:hover { background: var(--surface-soft); color: var(--text); }
.room-item.active { background: var(--accent-soft); color: var(--text); border-color: rgba(var(--accent-rgb), 0.16); }
.room-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--border); font-size: 13px; }
.room-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.room-copy strong { font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-copy span { font-size: 9px; color: var(--text-faint); }
.room-more {
  opacity: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 4px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
  color: var(--text-soft);
  font-size: 0;
  line-height: 1;
}
.room-more::before {
  content: "•••";
  font-size: 11px;
  line-height: 1;
  letter-spacing: -0.75px;
  transform: translate(-1px, -1px);
}
.room-item:hover .room-more, .room-item.active .room-more { opacity: 1; }

.feature-nav { margin-top: 15px; display: flex; min-height: 0; flex-direction: column; gap: 3px; }
.nav-heading { padding-bottom: 4px; }
.feature-nav-item {
  width: 100%; min-height: 40px; padding: 0 9px; border: 1px solid transparent; border-radius: 12px;
  display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 6px;
  color: var(--text-soft); background: transparent; cursor: pointer; text-align: left; font-size: 12px; font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.feature-nav-item:hover { color: var(--text); background: var(--surface-soft); transform: translateX(1px); }
.feature-nav-item.active { color: var(--text); background: var(--surface-solid); border-color: var(--border); box-shadow: 0 5px 13px rgba(59,79,66,.05); }
.feature-nav-item.purchase-nav { margin-top: 4px; }
/* R111: home and recharge share the same theme-aware emphasis. */
.feature-nav-item:is(.purchase-nav, .home-nav) { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 10px 20px rgba(var(--accent-strong-rgb), .16); }
.feature-nav-item:is(.purchase-nav, .home-nav):hover, .feature-nav-item:is(.purchase-nav, .home-nav).active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.nav-icon { width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; }
.nav-arrow { color: var(--text-faint); font-size: 18px; }
:is(.purchase-nav, .home-nav) .nav-arrow { color: rgba(255,255,255,.75); }
.nav-badge { min-width: 33px; padding: 4px 7px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); font-size: 9px; font-weight: 900; text-align: center; }

.sidebar-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.footer-link { min-height: 32px; border: 0; border-radius: 9px; padding: 0 7px; background: transparent; color: var(--text-soft); cursor: pointer; text-align: left; font-size: 10px; font-weight: 650; }
.footer-link:hover { color: var(--text); background: var(--surface-soft); }
.build-label { grid-column: 1 / -1; padding: 6px 7px 0; color: var(--text-faint); font-size: 8px; letter-spacing: .03em; }

.workspace {
  position: relative; z-index: 1; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(circle at 50% -20%, var(--accent-wash), transparent 34%),
    var(--surface-solid);
}
[data-theme="dark"] .workspace {
  background:
    radial-gradient(circle at 50% -20%, var(--accent-wash), transparent 34%),
    #000000;
}
.topbar {
  height: var(--topbar-height); flex: 0 0 var(--topbar-height); padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-solid) 90%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 10;
}
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.room-title-block { min-width: 0; }
.room-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.room-title-line h1 { margin: 0; font-size: 15px; font-weight: 850; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.room-title-block p { margin: 4px 0 0; color: var(--text-faint); font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.room-mode-chip { padding: 3px 7px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); font-size: 9px; font-weight: 900; }
.status-chip { min-height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); background: var(--surface); cursor: pointer; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-chip:hover { color: var(--text); border-color: var(--border-strong); }
.status-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.persona-chip { color: var(--text); }
.credit-chip { color: var(--accent-strong); }
.desktop-soft { background: var(--surface-soft); }
.studio-toggle { display: none; }

.debate-header { margin: 12px 18px 0; padding: 13px 15px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 17px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); box-shadow: var(--shadow-sm); }
.debate-header-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.debate-header-top strong { font-size: 12px; }
.debate-header-top span { margin-left: auto; color: var(--text-faint); font-size: 9px; }
.debate-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.debate-person { min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-solid); font-size: 10px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debate-versus > b { color: var(--text-faint); font-size: 10px; }
.room-warning { margin: 10px 18px 0; padding: 11px 13px; border-radius: 14px; color: #7d4304; background: #fff3d8; border: 1px solid rgba(210,122,0,.18); font-size: 11px; line-height: 1.45; }
[data-theme="dark"] .room-warning { color: #ffd29a; background: rgba(209,122,0,.12); }

.chat-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-content { width: min(900px, 100%); min-height: 100%; margin: 0 auto; padding: 32px 32px 22px; }
.empty-state { min-height: calc(100dvh - 265px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 0; }
.empty-orbit { width: 86px; height: 86px; display: grid; place-items: center; position: relative; margin-bottom: 19px; }
.empty-orbit-ring { position: absolute; inset: -8px; border: 1px dashed rgba(var(--accent-rgb), .28); border-radius: 50%; animation: orbit 18s linear infinite; }
.empty-orbit-ring::before { content: ""; position: absolute; top: 9px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-wash); }
.empty-logo { width: 68px; height: 68px; border-radius: 20px; box-shadow: 0 18px 34px rgba(var(--accent-strong-rgb), .16); }
@keyframes orbit { to { transform: rotate(360deg); } }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.empty-state h2 { margin: 10px 0 8px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.045em; }
.empty-state > p { margin: 0; max-width: 520px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.prompt-grid { width: min(690px, 100%); margin-top: 27px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prompt-card { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 17px; text-align: left; cursor: pointer; color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.prompt-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .24); box-shadow: var(--shadow-md); }
.prompt-card > span { display: block; font-size: 18px; margin-bottom: 12px; }
.prompt-card strong { display: block; font-size: 12px; margin-bottom: 5px; }
.prompt-card small { display: block; color: var(--text-faint); font-size: 9px; line-height: 1.45; }
.feature-launch-card { position: relative; overflow: hidden; }
.feature-launch-card::after { content: ""; position: absolute; width: 92px; height: 92px; right: -48px; top: -54px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), 0) 68%); pointer-events: none; }
.prompt-card-note { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; margin-top: 9px; padding: 4px 7px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 999px; color: var(--accent); background: rgba(var(--accent-rgb), .07); font-size: 8px; font-style: normal; font-weight: 850; line-height: 1.25; letter-spacing: -.01em; }
.messages { display: flex; flex-direction: column; gap: 26px; }
/* R58: identical, bounded history navigation in chat, debate and Story. */
/* R60: screen-reader-only history alternatives; no visible paging bar or layout space. */
.history-scroll-assist { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; }
.history-scroll-assist[hidden] { display:none !important; }
/* R62: elastic surface follows the finger; text stays crisp and layout stays still. */
.history-edge-cue { position:fixed; z-index:var(--history-cue-layer,45); display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; max-width:calc(100vw - 32px); color:var(--text-soft); font:600 11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space:nowrap; pointer-events:none; user-select:none; transform:translateX(-50%); contain:layout style; isolation:isolate; }
.history-edge-cue[hidden] { display:none !important; }
.history-edge-surface { position:absolute; inset:0; z-index:-1; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface-solid); box-shadow:0 4px 14px rgba(var(--accent-rgb),.18); }
.history-edge-cue[data-phase="pull"] { opacity:calc(.45 + var(--edge-pull)*.55); }
.history-edge-pages { display:flex; align-items:center; gap:3px; width:28px; height:20px; color:var(--accent); }
.history-edge-pages i { display:block; width:7px; height:12px; border-radius:3px; background:currentColor; transform:rotate(-12deg); }
.history-edge-pages i:nth-child(2) { height:16px; opacity:.8; transform:rotate(0); }
.history-edge-pages i:nth-child(3) { opacity:.55; transform:rotate(12deg); }
.history-edge-arrow { width:6px; height:6px; margin-left:1px; border:solid var(--accent); border-width:1.5px 0 0 1.5px; transform:translateY(2px) rotate(45deg); }
.history-edge-cue[data-direction="newer"] .history-edge-arrow { transform:translateY(-2px) rotate(225deg); }
.history-edge-cue[data-phase="turn"] .history-edge-pages i, .history-edge-cue[data-phase="enter"] .history-edge-pages i { animation:history-page-flip 360ms cubic-bezier(.2,.8,.2,1) both; }
.history-edge-cue[data-phase="turn"] .history-edge-pages i:nth-child(2), .history-edge-cue[data-phase="enter"] .history-edge-pages i:nth-child(2) { animation-delay:25ms; }
.history-edge-cue[data-phase="turn"] .history-edge-pages i:nth-child(3), .history-edge-cue[data-phase="enter"] .history-edge-pages i:nth-child(3) { animation-delay:50ms; }
.history-edge-cue[data-phase="enter"] { animation:history-cue-away 340ms ease-out both; }
.history-edge-cue[data-phase="settle"] { animation:history-cue-away 320ms ease-out both; }
@keyframes history-page-flip { 0% { transform:translateY(2px) rotate(-18deg) scaleX(.7); } 50% { transform:translateY(-3px) rotate(12deg) scaleX(1); border-radius:5px; } 100% { transform:translateY(0) rotate(0); } }
@keyframes history-cue-away { 0%,42% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .history-edge-cue, .history-edge-cue[data-phase], .history-edge-cue .history-edge-pages i { animation:none !important; }
  .history-edge-cue { transform:translateX(-50%) !important; }
  .history-edge-cue .history-edge-surface, .history-edge-cue .history-edge-pages, .history-edge-cue .history-edge-pages i { transform:none !important; }
}
.chat-history-load { display:grid; justify-items:center; gap:16px; padding:40px 16px; min-height:160px; color:var(--text-soft); text-align:center; }
.chat-history-load button { min-height:44px; padding:8px 16px; border:1px solid var(--border-strong); border-radius:10px; color:var(--text); background:var(--surface); }
.story-npc-guide { display:block; margin-top:8px; color:var(--text-soft); line-height:1.6; font-size:13px; }
.workspace-business-footer {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 7px 18px calc(7px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 10px;
  color: var(--text-faint);
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
  font-size: 7px;
  line-height: 1.45;
  text-align: center;
}
.workspace-business-footer strong { color: var(--text-soft); }
.workspace-business-footer a { color: inherit; }

.message { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; align-items: start; }
.message.user { grid-template-columns: minmax(0,1fr) 34px; }
.message.user .message-avatar { grid-column: 2; }
.message.user .message-main { grid-column: 1; grid-row: 1; justify-self: end; width: min(82%, 690px); }
.message-avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); font-size: 15px; box-shadow: var(--shadow-sm); overflow: hidden; }
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-main { min-width: 0; width: 100%; }
.message-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--text-faint); font-size: 9px; }
.message-meta strong { color: var(--text); font-size: 11px; }
.message-meta .stance-badge { padding: 3px 6px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); font-size: 8px; font-weight: 900; }
.message.user .message-meta { justify-content: flex-end; }
.message-surface { position: relative; padding: 15px 17px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-sm); }
.message.user .message-surface { background: var(--surface-soft); border-top-right-radius: 7px; }
.message.assistant .message-surface { border-top-left-radius: 7px; }
.message.streaming .message-surface { border-color: rgba(var(--accent-rgb), .24); }
.markdown-body { font-size: 13px; line-height: 1.72; word-break: break-word; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 12px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 18px 0 9px; line-height: 1.35; }
/* Keep the original large-heading hierarchy relative to the answer text,
   including the larger mobile body size and user font scaling. */
.markdown-body h1 { font-size: 2.05em; font-weight: 850; letter-spacing: -.04em; }
.markdown-body h2 { font-size: 1.55em; font-weight: 800; letter-spacing: -.03em; }
.markdown-body h3 { font-size: 1.22em; font-weight: 750; letter-spacing: -.02em; }
/* R330: lower-level Markdown titles must remain larger than body text. */
.markdown-body h4 { font-size: 1.16em; font-weight: 750; letter-spacing: -.02em; }
.markdown-body h5 { font-size: 1.10em; font-weight: 750; letter-spacing: -.01em; }
.markdown-body h6 { font-size: 1.04em; font-weight: 750; }
.markdown-body ul, .markdown-body ol { margin: 8px 0 12px; padding-left: 22px; }
.markdown-body li { margin: 5px 0; }
.markdown-body blockquote { margin: 12px 0; padding: 9px 12px; border-left: 3px solid var(--accent); color: var(--text-soft); background: var(--accent-wash); border-radius: 0 10px 10px 0; }
.markdown-body code { padding: 2px 5px; border-radius: 6px; color: var(--accent-strong); background: var(--surface-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.markdown-body pre { position: relative; margin: 13px 0; padding: 14px; overflow: auto; border: 1px solid var(--border); border-radius: 13px; background: #1d1d1b; color: #f7f3ec; }
.markdown-body pre code { padding: 0; color: inherit; background: transparent; }
/* R100: wide Markdown tables scroll inside the message, never the page. */
.markdown-table-scroll { width:100%; max-width:100%; min-width:0; margin:12px 0; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border:1px solid var(--border-strong,var(--border)); border-radius:10px; }
.markdown-table-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.markdown-table-scroll table { width:100%; border-collapse:collapse; font-size:inherit; line-height:1.6; }
.markdown-table-scroll th,.markdown-table-scroll td { min-width:6.5em; padding:9px 12px; vertical-align:top; border-right:1px solid var(--border); border-bottom:1px solid var(--border); overflow-wrap:anywhere; word-break:normal; }
.markdown-table-scroll th { background:var(--surface-strong); color:var(--text); font-weight:800; }
.markdown-table-scroll tbody tr:nth-child(even) { background:var(--surface-soft); }
.markdown-table-scroll tr > :last-child { border-right:0; }
.markdown-table-scroll tbody tr:last-child td { border-bottom:0; }
.markdown-table-scroll .markdown-table-left { text-align:left; }
.markdown-table-scroll .markdown-table-center { text-align:center; }
.markdown-table-scroll .markdown-table-right { text-align:right; }
/* The deterministic web-search source list is always the final list after its heading. */
.message.assistant .markdown-body h3 + ul:last-child a {
  color: #4e739b;
  text-decoration-color: rgba(78, 115, 155, .42);
  text-underline-offset: 3px;
}
.message.assistant .markdown-body h3 + ul:last-child a:hover,
.message.assistant .markdown-body h3 + ul:last-child a:focus-visible {
  color: #3e6289;
  text-decoration-color: currentColor;
}
[data-theme="dark"] .message.assistant .markdown-body h3 + ul:last-child a {
  color: #8fafcd;
  text-decoration-color: rgba(143, 175, 205, .48);
}
[data-theme="dark"] .message.assistant .markdown-body h3 + ul:last-child a:hover,
[data-theme="dark"] .message.assistant .markdown-body h3 + ul:last-child a:focus-visible {
  color: #abc5dc;
}
.message-actions { display: flex; gap: 5px; margin-top: 7px; opacity: 0; transition: opacity .15s ease; }
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; }
.message-action { min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 9px; color: var(--text-soft); background: var(--surface-solid); cursor: pointer; font-size: 9px; }
.message-action:hover { color: var(--text); border-color: var(--border-strong); }
.message-action.icon-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--text);
  background: var(--surface-soft);
}
.message-action.icon-action svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.message-action.icon-action .filled-icon {
  fill: currentColor;
  stroke: none;
}
.message-action.icon-action.is-active {
  color: #fff;
  border-color: #1f1e1b;
  background: #1f1e1b;
}
.message-action.icon-action:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.message.user .message-main { position: relative; }
.message.user .message-surface { padding-bottom: 54px; }
.message.user .message-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0;
  opacity: 1;
}

.speech-player {
  position: fixed;
  z-index: 80;
  top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  transform: translateX(-50%);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
  box-shadow: var(--speech-player-shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.speech-player-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.speech-player-copy strong { font-size: 13px; font-weight: 900; }
.speech-player-copy span { color: var(--text-faint); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speech-player-actions { display: flex; align-items: center; gap: 5px; }
.speech-player-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}
.speech-player-button:hover { background: var(--surface-strong); }
.speech-player-button:disabled { opacity: .42; cursor: not-allowed; background: transparent; }
.speech-player-toggle { font-size: 19px; font-weight: 950; }
.speech-player-seek { position: relative; font-size: 25px; line-height: 1; }
.speech-player-seek small {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 2px;
  font-size: 8px;
  font-weight: 950;
}
.speech-player-close { font-size: 30px; font-weight: 300; }
[data-theme="dark"] .speech-player { box-shadow: var(--speech-player-shadow); }

/* R86: desktop rails share one fluid width. The normal/debate player belongs
 * to the workspace, not the viewport behind those rails. CSS follows window
 * resizing/zoom without moving the player DOM or touching its audio session.
 * Phone/tablet placement and the full-screen Story portal remain unchanged. */
@media (min-width: 921px) {
  :root {
    --sidebar-width: clamp(280px, 21vw, 312px);
    --studio-width: var(--sidebar-width);
  }
  .workspace > .speech-player {
    position: absolute;
    width: min(760px, calc(100% - 32px));
  }
}

.speech-settings-panel { gap: 13px; }
.speech-engine-switch { margin-top: 14px; }
.speech-engine-switch button:disabled { opacity: .44; cursor: not-allowed; }
.speech-engine-card { display: grid; gap: 14px; }
.speech-voice-setting-copy { display: grid; gap: 6px; }
.speech-voice-setting-copy strong { font-size: 14px; }
.speech-voice-setting-copy span,
.speech-voice-note { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.6; }
.speech-voice-select-wrap { display: grid; gap: 7px; }
.speech-voice-select-wrap > span,
.speech-voice-current-row > span { color: var(--text-faint); font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.speech-voice-select,
.speech-speed-select,
.speech-preset-select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  outline: none;
  color: var(--text);
  background: var(--surface-solid);
  font: inherit;
  font-size: 12px;
}
.speech-voice-select:focus,
.speech-speed-select:focus,
.speech-preset-select:focus { border-color: rgba(var(--accent-rgb), .40); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .10); }
.speech-voice-select:disabled,
.speech-speed-select:disabled,
.speech-preset-select:disabled { cursor: wait; color: var(--text-faint); background: var(--surface-soft); }
.speech-voice-policy-note {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}
.speech-voice-policy-note strong { color: var(--text); font-size: 11px; }
.speech-voice-policy-note span { color: var(--text-soft); font-size: 9px; line-height: 1.55; }
.speech-voice-policy-note.paid { border-color: rgba(var(--success-rgb, 70, 128, 82), .35); }
.speech-voice-policy-note.locked { border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
.speech-voice-policy-note.answer-lock { border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
.speech-cloud-status {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.speech-cloud-status .connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.speech-cloud-status.ready .connection-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent); }
.speech-cloud-status.loading .connection-dot { background: var(--accent); animation: blink 1.2s infinite ease-in-out; }
.speech-cloud-status.unavailable .connection-dot { background: var(--danger); }
.speech-cloud-status > div:not(.speech-cloud-status-actions) { min-width: 0; display: grid; gap: 3px; }
.speech-cloud-status strong { overflow-wrap: anywhere; font-size: 12px; }
.speech-cloud-status small { color: var(--text-soft); font-size: 10px; line-height: 1.5; }
.speech-cloud-status-actions { display: flex; align-items: center; gap: 6px; }
.speech-cloud-empty { display: grid; gap: 5px; padding: 13px; border-radius: 13px; background: var(--surface-soft); }
.speech-cloud-empty strong { font-size: 12px; }
.speech-cloud-empty span { color: var(--text-soft); font-size: 10px; line-height: 1.55; }
.speech-fallback-setting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  cursor: pointer;
}
.speech-fallback-setting input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); }
.speech-fallback-setting > span { display: grid; gap: 4px; }
.speech-fallback-setting strong { font-size: 12px; }
.speech-fallback-setting small { color: var(--text-soft); font-size: 10px; line-height: 1.5; }
.speech-current-card { display: grid; gap: 12px; }
.speech-current-card > div { display: grid; gap: 5px; padding: 12px 13px; border-radius: 13px; background: var(--surface-soft); }
.speech-current-card > div > span { color: var(--text-faint); font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.speech-current-card > div > strong { overflow-wrap: anywhere; font-size: 12px; }
.speech-current-card [data-engine="cloud"] { color: var(--accent-strong); }
.speech-current-card [data-engine="fallback"] { color: var(--danger); }
.speech-voice-preview {
  min-height: 44px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 13px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.speech-voice-preview:hover { border-color: rgba(var(--accent-rgb), .34); }
.speech-voice-preview:disabled { opacity: .45; cursor: not-allowed; }
.speech-voice-preview.is-active { color: var(--surface-solid); border-color: var(--accent); background: var(--accent); }
.typing-dots { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .16s; } .typing-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 0%,80%,100% { opacity:.25; transform: translateY(0);} 40% {opacity:1; transform: translateY(-3px);} }

.composer-area { flex: 0 0 auto; padding: 12px 24px 12px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-solid) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.composer-context { width: min(820px, 100%); margin: 0 auto 8px; padding: 8px 11px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 11px; color: var(--text-soft); background: var(--accent-soft); font-size: 10px; }
.composer-shell { width: min(820px, 100%); margin: 0 auto; padding: 10px 10px 8px 14px; border: 1px solid var(--border-strong); border-radius: 22px; background: var(--surface); box-shadow: 0 13px 34px rgba(55,42,25,.10); transition: border-color .15s ease, box-shadow .15s ease; }
.composer-shell:focus-within { border-color: rgba(var(--accent-rgb), .34); box-shadow: 0 15px 38px rgba(var(--accent-strong-rgb), .12); }
#message-input { display: block; width: 100%; min-height: 30px; max-height: 150px; resize: none; border: 0; outline: 0; padding: 5px 1px 6px; color: var(--text); background: transparent; font-size: 13px; line-height: 1.55; }
#message-input::placeholder { color: var(--text-faint); }
.composer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer-tools, .composer-actions { display: flex; align-items: center; gap: 7px; min-width: 0; }
.composer-tool { min-width: 0; height: 29px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: var(--surface-soft); cursor: pointer; font-size: 9px; font-weight: 750; display: inline-flex; align-items: center; gap: 5px; }
.composer-tool span:last-child { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-count { color: var(--text-faint); font-size: 8px; }
.send-button { width: 36px; height: 36px; border: 0; border-radius: 13px; display: grid; place-items: center; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 18px rgba(var(--accent-strong-rgb), .18); font-size: 18px; font-weight: 900; transition: transform .15s ease, opacity .15s ease; }
.send-button:hover { transform: translateY(-1px); }
.send-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.send-button.stop { background: #24221f; }
.composer-footnote { width: min(820px, 100%); margin: 7px auto 0; color: var(--text-faint); text-align: center; font-size: 8px; }

.studio { z-index: 30; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--border); background: var(--studio); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.studio-header { min-height: var(--topbar-height); padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.studio-header h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.02em; }
#studio-close { display: none; }
.studio-content { min-height: 0; flex: 1; overflow: auto; padding: 16px; scrollbar-width: thin; }
.panel-stack { display: flex; flex-direction: column; gap: 13px; }
.panel-card { padding: 15px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-card.accent { border-color: rgba(var(--accent-rgb), .18); background: linear-gradient(145deg, var(--accent-soft), var(--surface)); }
.panel-card h3 { margin: 0 0 6px; font-size: 13px; }
.panel-card p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.55; }
.panel-label { display: block; margin-bottom: 7px; color: var(--text-faint); font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.metric { padding: 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-solid); }
.metric span { display: block; color: var(--text-faint); font-size: 8px; margin-bottom: 6px; }
.metric strong { display: block; font-size: 13px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-card { min-height: 83px; padding: 12px; border: 1px solid var(--border); border-radius: 15px; color: var(--text); background: var(--surface-solid); cursor: pointer; text-align: left; transition: transform .15s ease, border-color .15s ease; }
.quick-card:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .24); }
.quick-card span { display: block; font-size: 17px; margin-bottom: 9px; }
.quick-card strong { display: block; font-size: 10px; margin-bottom: 3px; }
.quick-card small { display: block; color: var(--text-faint); font-size: 8px; line-height: 1.4; }
.connection-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 10px; }
.connection-row:last-child { border-bottom: 0; padding-bottom: 0; }
.connection-row:first-child { padding-top: 0; }
.connection-row .connection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.connection-row span:nth-child(2) { flex: 1; color: var(--text-soft); }
.connection-row strong { font-size: 9px; }

.voltage-dial { position: relative; width: 230px; height: 190px; margin: 3px auto 0; pointer-events: none; }
.voltage-gauge { position: absolute; inset: 0 auto auto 0; width: 230px; height: 170px; overflow: visible; }
.voltage-arc,
.voltage-progress {
  fill: none;
  stroke-width: 17;
  vector-effect: non-scaling-stroke;
}
.voltage-arc { stroke: var(--surface-strong); }
.voltage-progress {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: var(--voltage-fill, 100) 100;
  filter: drop-shadow(0 5px 8px rgba(var(--accent-rgb), .14));
  transition: stroke-dasharray .24s cubic-bezier(.2,.8,.2,1);
}
.voltage-center { position: absolute; inset: 76px 60px auto; height: 90px; border: 1px solid var(--border); border-radius: 45px 45px 22px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-solid); box-shadow: var(--shadow-md); }
.voltage-center strong { font-size: 28px; letter-spacing: -.05em; }
.voltage-center span { margin-top: 2px; color: var(--text-soft); font-size: 10px; font-weight: 800; }
.voltage-needle { position: absolute; left: 113px; top: 100px; width: 4px; height: 52px; border-radius: 999px; background: var(--accent); transform-origin: 50% 97%; transform: rotate(var(--needle-angle, 88deg)); transition: transform .24s cubic-bezier(.2,.8,.2,1); box-shadow: 0 3px 8px rgba(var(--accent-rgb), .26); }
.voltage-needle::after { content: ""; position: absolute; bottom: -5px; left: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translateX(-50%); background: var(--accent); border: 3px solid var(--surface-solid); }
.voltage-levels { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; margin-top: -4px; pointer-events: auto; }
.voltage-level-button { position: relative; z-index: 4; padding: 8px 2px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--surface-solid); cursor: pointer; touch-action: manipulation; pointer-events: auto; font-size: 9px; font-weight: 850; }
.voltage-level-button.active { color: #fff; border-color: transparent; background: var(--accent); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-copy { min-width: 0; }
.setting-copy strong { display: block; font-size: 11px; margin-bottom: 3px; }
.setting-copy span { display: block; color: var(--text-faint); font-size: 8px; line-height: 1.4; }
.toggle { position: relative; width: 43px; height: 25px; flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; }
.toggle-track { position: absolute; inset: 0; border-radius: 999px; cursor: pointer; background: var(--surface-strong); border: 1px solid var(--border); transition: background .18s ease; }
.toggle-track::after { content: ""; position: absolute; width: 19px; height: 19px; left: 2px; top: 2px; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .18s ease; }
.toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); }
.scope-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.scope-switch button { min-height: 30px; border: 0; border-radius: 9px; color: var(--text-soft); background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.scope-switch button.active { color: var(--text); background: var(--surface-solid); box-shadow: 0 3px 8px rgba(55,42,25,.08); }

.persona-list { display: flex; flex-direction: column; gap: 9px; }
.persona-card { position: relative; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 16px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; color: var(--text); background: var(--surface-solid); cursor: pointer; text-align: left; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.persona-card:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .24); }
.persona-card.active { border-color: rgba(var(--accent-rgb), .38); background: var(--accent-soft); }
.persona-emoji { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 14px; display: grid; place-items: center; background: var(--surface); font-size: 20px; }
.persona-copy { min-width: 0; }
.persona-copy strong { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.persona-copy p { margin: 4px 0 0; font-size: 8px; color: var(--text-faint); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.persona-badge { padding: 3px 6px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); font-size: 7px; font-weight: 900; }
.persona-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); font-size: 10px; opacity: 0; }
.persona-card.active .persona-check { opacity: 1; }
.custom-persona-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.small-primary, .small-secondary, .danger-button { min-height: 34px; padding: 0 11px; border-radius: 11px; cursor: pointer; font-size: 9px; font-weight: 850; }
.small-primary { border: 0; color: #fff; background: var(--accent); }
.small-secondary { border: 1px solid var(--border); color: var(--text); background: var(--surface-solid); }
.danger-button { border: 1px solid rgba(199,67,67,.23); color: var(--danger); background: rgba(199,67,67,.07); }

.form-group { margin-bottom: 13px; }
.form-group:last-child { margin-bottom: 0; }
.form-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.form-label-row label { font-size: 10px; font-weight: 850; }
.form-label-row span { color: var(--text-faint); font-size: 8px; }
.text-input, .text-area, .select-input { width: 100%; border: 1px solid var(--border-strong); border-radius: 13px; color: var(--text); background: var(--surface-solid); outline: 0; }
.text-input, .select-input { min-height: 41px; padding: 0 12px; font-size: 10px; }
.text-area { min-height: 220px; resize: vertical; padding: 12px; font-size: 10px; line-height: 1.6; }
.text-input:focus, .text-area:focus, .select-input:focus { border-color: rgba(var(--accent-rgb), .42); box-shadow: 0 0 0 3px var(--accent-wash); }
.form-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }
.helper-box { padding: 10px 11px; border-radius: 12px; color: var(--text-soft); background: var(--surface-soft); font-size: 8px; line-height: 1.55; }
.room-manager-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 11px; border: 1px solid rgba(199,67,67,.18); border-radius: 13px; background: rgba(199,67,67,.045); }
.room-manager-danger-copy { min-width: 0; }
.room-manager-danger-copy strong { display: block; color: var(--danger); font-size: 10px; }
.room-manager-danger-copy span { display: block; margin-top: 4px; color: var(--text-faint); font-size: 8px; line-height: 1.5; }
.room-manager-danger-zone .danger-button { flex: 0 0 auto; }
#rooms-menu-button:disabled, #clear-room-button:disabled, #mobile-room-menu:disabled { cursor: default; opacity: .42; }

.room-selection-intro { margin: 0 0 14px; color: var(--text-soft); font-size: 14px; }
.room-selection-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.room-selection-all { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; cursor: pointer; font-size: 13px; font-weight: 750; }
.room-selection-manager input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.room-selection-manager input:disabled { cursor: wait; }
.room-selection-manager input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.room-selection-count { padding: 5px 10px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-wash); font-size: 12px; font-weight: 750; white-space: nowrap; }
.room-selection-list { display: grid; gap: 8px; }
.room-selection-row { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 68px; padding: 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.room-selection-row:hover { border-color: var(--border-strong); }
.room-selection-row.is-selected { border-color: var(--accent); background: var(--accent-wash); }
.room-selection-row:focus-within { box-shadow: 0 0 0 2px var(--accent-wash); }
.room-selection-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-solid); font-size: 15px; }
.room-selection-copy { display: grid; gap: 4px; min-width: 0; }
.room-selection-copy > strong { color: var(--text); font-size: 14px; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.room-selection-copy > span { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--text-faint); font-size: 11px; }
.room-selection-current { padding: 1px 6px; border-radius: 5px; color: var(--accent-strong); background: var(--surface-solid); font-size: 10px; font-weight: 700; }
.room-selection-feedback { margin: 14px 0 0; color: var(--text-faint); font-size: 12px; line-height: 1.6; }
.room-selection-feedback.is-error { color: var(--danger); }
.room-selection-empty { padding: 22px 12px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-faint); text-align: center; }
#room-selection-refresh { margin-top: 10px; min-height: 42px; }
#delete-selected-rooms-button { min-width: 140px; min-height: 44px; }
#delete-selected-rooms-button:disabled { opacity: .45; cursor: default; }
.modal-actions:has(#delete-selected-rooms-button) > button { min-height: 44px; }
@media (max-width: 720px) {
  .modal-actions:has(#delete-selected-rooms-button) { padding-bottom: calc(13px + var(--safe-bottom)); }
  .modal-actions:has(#delete-selected-rooms-button) > button { flex: 1; min-width: 0; min-height: 48px; font-size: 14px; }
}

.debate-select-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 7px; }
.debate-side { min-width: 0; }
.debate-side .select-input { min-width: 0; max-width: 100%; }
.debate-side label { display: block; margin-bottom: 6px; font-size: 8px; color: var(--text-faint); font-weight: 850; }
.swap-button { width: 34px; height: 34px; margin-bottom: 3px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--surface-solid); cursor: pointer; }
.debate-preview { display: grid; grid-template-columns: 1fr auto 1fr; gap: 7px; align-items: center; margin-top: 12px; }
.debate-preview-card { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-solid); text-align: center; }
.debate-preview-card span { display: block; font-size: 17px; margin-bottom: 5px; }
.debate-preview-card strong { display: block; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debate-preview-card small { display: block; margin-top: 3px; color: var(--accent-strong); font-size: 7px; font-weight: 850; }
.start-debate-button { width: 100%; min-height: 43px; margin-top: 12px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); cursor: pointer; font-size: 10px; font-weight: 900; }

.credit-hero { padding: 18px; border-radius: 19px; color: #fff; background: linear-gradient(140deg, #1d1b18, #373029 58%, #5b2b02); box-shadow: var(--shadow-md); }
.credit-hero .panel-label { color: rgba(255,255,255,.58); }
.credit-balance { display: flex; align-items: flex-end; gap: 6px; }
.credit-balance strong { font-size: 32px; letter-spacing: -.05em; }
.credit-balance span { padding-bottom: 4px; color: rgba(255,255,255,.68); font-size: 9px; }
.credit-split { margin-top: 13px; display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.credit-split > div { padding: 9px; border-radius: 11px; background: rgba(255,255,255,.08); }
.credit-split span { display: block; color: rgba(255,255,255,.58); font-size: 7px; margin-bottom: 5px; }
.credit-split strong { font-size: 9px; }
.commerce-state { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--surface-soft); font-size: 9px; }
.commerce-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.commerce-state.ready .commerce-state-dot { background: var(--success); }
.purchase-card { padding: 15px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 17px; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); }
.purchase-card-top { display: flex; align-items: start; gap: 10px; }
.purchase-card-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--accent); font-size: 18px; }
.purchase-card-copy { flex: 1; min-width: 0; }
.purchase-card-copy strong { display: block; font-size: 12px; }
.purchase-card-copy span { display: block; margin-top: 4px; color: var(--text-soft); font-size: 8px; }
.purchase-price { margin-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; }
.purchase-price strong { font-size: 20px; }
.purchase-price span { color: var(--text-faint); font-size: 8px; }
.purchase-button { width: 100%; min-height: 40px; margin-top: 11px; border: 0; border-radius: 12px; color: #fff; background: var(--accent); cursor: pointer; font-size: 10px; font-weight: 900; }
.purchase-button:disabled { cursor: not-allowed; color: var(--text-faint); background: var(--surface-strong); }
.ledger-list { display: flex; flex-direction: column; }
.ledger-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-soft); font-size: 13px; }
.ledger-copy { min-width: 0; }
.ledger-copy strong { display: block; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-copy span { display: block; margin-top: 3px; color: var(--text-faint); font-size: 7px; }
.ledger-amount { font-size: 9px; font-weight: 900; }
.ledger-amount small { font-size: .72em; font-weight: 800; }
.ledger-amount.positive { color: var(--success); }
.ledger-amount.negative { color: var(--danger); }

.backdrop { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(15,13,10,.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.login-overlay { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: minmax(0,1fr) auto; justify-items: center; min-width: 0; min-height: 0; overflow: hidden; padding: max(24px, env(safe-area-inset-top)) 24px max(18px, env(safe-area-inset-bottom)); }
/* Keep backdrop effects off the authentication controls' ancestor chain.
   Chromium visibility tracking treats an ancestor backdrop filter as obscuring. */
.login-overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 15%, rgba(var(--accent-rgb), .16), transparent 34%), rgba(239, 244, 240, .94); backdrop-filter: blur(20px); }
.login-overlay.login-visual-viewport { position: absolute; inset: auto; top: var(--login-viewport-top, 0px); left: var(--login-viewport-left, 0px); width: var(--login-viewport-width, 100vw); height: var(--login-viewport-height, 100dvh); }
[data-theme="dark"] .login-overlay::before { background: radial-gradient(circle at 50% 15%, rgba(255,148,36,.18), transparent 34%), rgba(11,11,10,.95); }
.login-card { position: relative; align-self: center; display: flex; flex-direction: column; min-height: 0; width: min(470px, 100%); max-height: calc(100% - 40px); margin: 20px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--surface-solid); box-shadow: var(--shadow-lg); text-align: center; }
.login-card-scroll { min-height: 0; max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 26px 28px; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.login-overlay-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-muted); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.login-overlay-close:hover { border-color: var(--accent); color: var(--accent-strong); }
.login-benefits { display: grid; gap: 6px; margin: 0 auto 16px; max-width: 375px; text-align: left; }
.login-benefits span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-muted); color: var(--text-soft); font-size: 12px; font-weight: 750; }
.login-benefits b { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; }
.guest-credit-hero p { margin: 10px 0 14px; color: var(--text-soft); line-height: 1.6; }
.login-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font-weight: 950; letter-spacing: .12em; font-size: 12px; }
.login-brand img { width: 34px; height: 34px; border-radius: 11px; }
.login-card-scroll > .eyebrow { display: block; }
.login-card h2 { margin: 8px 0 10px; font-size: 27px; line-height: 1.28; letter-spacing: -.045em; }
.login-card-scroll > p { margin: 0 auto 16px; max-width: 375px; color: var(--text-soft); font-size: 11px; line-height: 1.6; }
.social-login-actions { display: grid; gap: 8px; width: 100%; max-width: 375px; margin-inline: auto; }
.social-login-actions .social-login-button { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; min-height: 44px; padding: 0 44px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.social-login-icon { position: absolute; left: 16px; width: 18px; height: 18px; }
.naver-button { color: #fff; background: #03a94d; border: 0; }
.social-login-button:hover { filter: brightness(.97); }
.social-login-button:active { filter: brightness(.92); }
.social-login-button:focus-visible, .login-overlay-close:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
.social-login-actions .social-login-button:disabled { cursor: wait; opacity: .62; }
.kakao-button, .secondary-button { width: 100%; min-height: 49px; border-radius: 15px; cursor: pointer; font-size: 11px; font-weight: 900; }
.kakao-button { border: 0; color: #17120a; background: #fee500; }
.google-login-button { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }

.apple-button { width: 100%; min-height: 52px; padding: 0; border: 0; border-radius: 15px; background: transparent; cursor: pointer; overflow: hidden; }
.social-login-actions .apple-button { padding: 0; background: #000; }
.apple-button img { display: block; width: 100%; height: 44px; object-fit: cover; margin: 0 auto; }
.apple-button:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.login-products-link { display: inline-block; margin-top: 12px; color: var(--accent-strong); font-size: 11px; font-weight: 850; text-decoration: none; }
.login-products-link:hover { text-decoration: underline; }
.kakao-button:disabled, .apple-button:disabled { cursor: wait; opacity: .62; }
.secondary-button { margin-top: 8px; border: 1px solid var(--border); color: var(--text); background: var(--surface-soft); }
.login-card small { display: block; margin-top: 10px; color: var(--text-faint); font-size: 8px; line-height: 1.5; }
.login-card small a { color: var(--accent); font-weight: 800; text-underline-offset: 2px; }
.login-business-footer { align-self: end; min-height: 0; width: min(1180px, 100%); max-height: min(24dvh, 132px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 14px 4px 0; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 9px; line-height: 1.55; -webkit-overflow-scrolling: touch; }
.login-business-summary, .login-business-detail { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.login-business-summary strong { color: var(--text-soft); }
.login-business-detail { margin-top: 4px; }
.login-business-footer a { color: inherit; }

.modal-root { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12,10,8,.54); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(560px, 100%); max-height: min(760px, calc(100dvh - 40px)); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 25px; background: var(--surface-solid); box-shadow: var(--shadow-lg); }
.modal-header { min-height: 72px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 5px 0 0; font-size: 16px; }
.modal-content { min-height: 0; overflow: auto; padding: 18px; font-size: 11px; line-height: 1.65; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface-soft); }
.modal-actions:empty { display: none; }
.notice-card { padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); margin-bottom: 9px; }
.notice-card:last-child { margin-bottom: 0; }
.notice-card strong { display: block; font-size: 11px; }
.notice-card p { margin: 7px 0 0; color: var(--text-soft); font-size: 9px; line-height: 1.55; white-space: pre-wrap; }

.account-profile-hero {
  display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 14px;
  border: 1px solid var(--border); border-radius: 17px; background: var(--surface-soft);
}
.account-profile-avatar {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 15px; color: #fff; background: linear-gradient(145deg, #6f8478, #516359);
  font-size: 17px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
[data-theme="dark"] .account-profile-avatar { color: #151411; background: linear-gradient(145deg, #f1eee7, #c8c0b5); }
.account-profile-hero > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.account-profile-hero strong { color: var(--text); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-hero span { color: var(--text-soft); font-size: 12px; }
.account-name-helper { margin-top: 8px; }
.profile-feedback { margin: 9px 0 0; padding: 9px 10px; border-radius: 11px; font-size: 12px; line-height: 1.45; }
.profile-feedback.pending { color: var(--text-soft); background: var(--surface-soft); }
.profile-feedback.success { color: var(--success); background: rgba(48,122,85,.10); }
.profile-feedback.error { color: var(--danger); background: rgba(199,67,67,.09); }
.account-profile-details { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.account-profile-details > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.account-profile-details span { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: 11px; }
.account-profile-details strong { display: block; color: var(--text); font-size: 14px; }
.account-profile-session { grid-column: 1 / -1; }
.account-profile-session code { display: block; color: var(--text-soft); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; user-select: text; }
.profile-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.profile-form-actions .small-primary,
.profile-form-actions .small-secondary { min-height: 43px; padding: 0 15px; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { max-width: 340px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: var(--surface-solid); box-shadow: var(--shadow-md); font-size: 10px; line-height: 1.45; animation: toast-in .22s ease both; }
.toast.success { border-color: rgba(48,122,85,.25); } .toast.error { border-color: rgba(199,67,67,.28); }
/* New-room notices share the voice player's elevation without changing other toasts. */
#room-created-toast-stack {
  top: calc(var(--app-header-height, 56px) + 12px);
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: auto;
  align-items: center;
}
.toast.room-created-notice {
  width: max-content;
  max-width: min(520px, 100%);
  padding: 13px 18px;
  border-radius: 18px;
  box-shadow: var(--speech-player-shadow);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
  transition: opacity .18s ease, transform .18s ease;
}
.room-created-notice-detail { display: block; margin-top: 2px; }
.room-created-notice-name { font-size: 16px; font-weight: 800; }
.toast.voice-answer-replay-notice {
  border-color: rgba(111,128,91,.42);
  box-shadow: 0 18px 42px rgba(24,31,20,.28), 0 5px 14px rgba(24,31,20,.2);
}
[data-theme="dark"] .toast.voice-answer-replay-notice {
  box-shadow: 0 20px 46px rgba(0,0,0,.58), 0 6px 16px rgba(0,0,0,.4);
}
/* All transient light-theme notices share one clear, raised surface. */
:root:not([data-theme="dark"]) :is(.toast, .vs-notice, .vs-completion-toast) {
  box-shadow: 0 24px 48px rgba(31,40,23,.30),
              0 8px 18px rgba(31,40,23,.20),
              0 2px 5px rgba(31,40,23,.12),
              inset 0 1px 0 rgba(255,255,255,.8);
}
/* R321: a compact title directly above the clipped settings button. */
#studio-tab-label-layer { position: fixed; inset: 0; z-index: 151; pointer-events: none; }
#studio-tab-label-layer .toast.studio-tab-label-notice {
  position: fixed;
  width: max-content;
  max-width: min(260px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: 0 15px 50px #0005;
  animation: none;
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}
[data-theme="dark"] #studio-tab-label-layer .toast.studio-tab-label-notice {
  border-color: #ff9424;
  box-shadow: none;
}
#studio-tab-label-layer .studio-tab-label-notice.is-leaving {
  opacity: 0;
  transform: translateY(-2px);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(7px) scale(.98); } }

.loading-panel { padding: 40px 10px; display: grid; place-items: center; color: var(--text-faint); font-size: 10px; }
.loading-spinner { width: 25px; height: 25px; margin-bottom: 10px; border-radius: 50%; border: 3px solid var(--surface-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-panel { padding: 26px 12px; text-align: center; color: var(--text-faint); font-size: 10px; }

@media (max-width: 1320px) {
  .app-shell { grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
  .studio { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--studio-width), 92vw); transform: translateX(104%); box-shadow: var(--shadow-lg); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
  .studio.open { transform: translateX(0); }
  .studio-backdrop.visible { display: block; }
  #studio-close { display: grid; }
  .studio-toggle { display: grid; }
}

@media (max-width: 920px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(var(--sidebar-width), 88vw); transform: translateX(-104%); box-shadow: var(--shadow-lg); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
  .sidebar.open { transform: translateX(0); }
  .backdrop.visible { display: block; }
  .studio-backdrop { z-index: 45; }
  .mobile-only { display: grid !important; }
  .brand-row .mobile-only { margin-right: 1px; }
  .workspace { width: 100%; height: 100dvh; }
  .topbar { padding: 0 12px; }
  .persona-chip, .credit-chip, .desktop-soft { display: none; }
  .chat-content { padding: 25px 20px 18px; }
  .composer-area { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 620px) {
  :root { --topbar-height: 62px; }
  .topbar { gap: 8px; }
  .topbar-left { gap: 7px; }
  .topbar-actions { gap: 6px; }
  .topbar .icon-button { width: 34px; height: 34px; border-radius: 11px; }
  .room-title-line h1 { max-width: 160px; font-size: 13px; }
  .room-title-block p { max-width: 180px; font-size: 8px; }
  .status-chip { min-height: 31px; padding: 0 9px; font-size: 9px; }
  .chat-content { padding: 20px 13px 13px; }
  .empty-state { min-height: calc(100dvh - 235px); }
  .empty-state h2 { font-size: 25px; }
  .empty-state > p { font-size: 11px; }
  .prompt-grid { grid-template-columns: 1fr; width: 100%; margin-top: 20px; }
  .prompt-card { display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 9px; padding: 12px; }
  .prompt-card > span { grid-row: 1 / 3; margin: 0; align-self: center; }
  .prompt-card strong, .prompt-card small { grid-column: 2; }
  .prompt-card .prompt-card-note { grid-column: 2; margin-top: 6px; }
  .message { grid-template-columns: 29px minmax(0,1fr); gap: 8px; }
  .message.user { grid-template-columns: minmax(0,1fr) 29px; }
  .message-avatar { width: 29px; height: 29px; border-radius: 9px; font-size: 12px; }
  .message.user .message-main { width: 94%; }
  .message-surface { padding: 13px 14px; border-radius: 16px; }
  .markdown-body { font-size: 12px; }
  .message-actions { opacity: 1; }
  .composer-area { padding: 9px; }
  .composer-shell { border-radius: 18px; padding-left: 11px; }
  .composer-tool { max-width: 120px; }
  .message-count { display: none; }
  .composer-footnote { display: none; }
  .studio { width: 100vw; top: auto; height: min(82dvh, 760px); border-left: 0; border-top: 1px solid var(--border); border-radius: 25px 25px 0 0; transform: translateY(104%); }
  .studio.open { transform: translateY(0); }
  .studio-header { min-height: 66px; }
  .login-card { border-radius: 23px; }
  .login-card-scroll { padding: 26px 20px; }
  .login-card h2 { font-size: 24px; }
  .modal-root { padding: 0; align-items: end; }
  .modal-card { width: 100%; max-height: 87dvh; border-radius: 25px 25px 0 0; border-bottom: 0; }
  .toast-stack { left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); align-items: stretch; }
  .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* === VESPER WEB V2 READABILITY PATCH: 2026-08-15 === */
/*
 * Fixes the dark-theme inherited-text bug and raises typography/touch targets
 * for phone-first use.  This block intentionally lives at the end so it can
 * improve readability without restructuring the proven layout rules above.
 */

:root {
  --text-soft: #5f594f;
  --text-faint: #7f776c;
}

[data-theme="dark"] {
  --text: #faf7f0;
  --text-soft: #d1c9bd;
  --text-faint: #aaa194;
  --border: rgba(255, 247, 231, 0.16);
  --border-strong: rgba(255, 247, 231, 0.27);
}

body {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
}

/* Critical dark-mode fix: theme variables were changing the surfaces, but
   unstyled headings inherited the light body color. */
.app-shell {
  color: var(--text);
  font-size: 16px;
}

.app-shell input,
.app-shell textarea,
.app-shell select {
  color: var(--text);
}

.app-shell input::placeholder,
.app-shell textarea::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

[data-theme="dark"] select,
[data-theme="dark"] option {
  color: var(--text);
  background: var(--surface-solid);
}

/* Make headings explicit so future theme edits cannot regress them. */
.room-title-line h1,
.empty-state h2,
.studio-header h2,
.panel-card h3,
.modal-header h2,
.login-card h2,
.account-copy strong,
.metric strong,
.setting-copy strong,
.persona-copy strong,
.purchase-card-copy strong,
.ledger-copy strong,
.message-meta strong {
  color: var(--text);
}

/* Global legibility and touch-target pass. */
.brand-copy strong { font-size: 18px; }
.brand-copy span { font-size: 11px; }
.account-copy strong { font-size: 14px; }
.account-copy span { font-size: 12px; }
.mini-icon-button { width: 34px; height: 34px; }
.icon-button { width: 42px; height: 42px; font-size: 18px; }
.sync-note { font-size: 12px; line-height: 1.45; }
.account-stats span { font-size: 11px; }
.account-stats strong { font-size: 14px; }
.primary-action { min-height: 50px; font-size: 14px; }
.primary-action kbd { font-size: 10px; }
.section-heading { font-size: 12px; }
.text-button { font-size: 12px; }
.room-item { min-height: 48px; }
.room-copy strong { font-size: 13px; }
.room-copy span { font-size: 11px; }
.feature-nav-item { min-height: 46px; font-size: 13px; }
.nav-badge { font-size: 10px; }
.footer-link { min-height: 40px; font-size: 12px; }
.build-label { font-size: 10px; }

.room-title-line h1 { font-size: 17px; }
.room-title-block p { font-size: 12px; }
.room-mode-chip { font-size: 10px; }
.status-chip { min-height: 38px; font-size: 12px; }
.debate-header-top strong { font-size: 14px; }
.debate-header-top span { font-size: 11px; }
.debate-person,
.debate-versus > b { font-size: 12px; }
.room-warning { font-size: 13px; }

.eyebrow { font-size: 11px; }
.empty-state > p { font-size: 15px; }
.prompt-card strong { font-size: 14px; }
.prompt-card small { font-size: 12px; line-height: 1.55; }
.prompt-card-note { font-size: 10px; }
.message-meta { font-size: 11px; }
.message-meta strong { font-size: 13px; }
.message-meta .stance-badge { font-size: 10px; }
.markdown-body { font-size: 15px; line-height: 1.75; }
.message-action { min-height: 34px; font-size: 12px; }

.composer-context { font-size: 12px; }
#message-input { font-size: 16px; }
.composer-tool { height: 36px; font-size: 12px; }
.message-count { font-size: 10px; }
.send-button { width: 44px; height: 44px; font-size: 20px; }
.composer-footnote { font-size: 10px; }

.studio-header h2 { font-size: 18px; }
.panel-card h3 { font-size: 15px; }
.panel-card p { font-size: 12px; line-height: 1.65; }
.panel-label { font-size: 11px; }
.metric span { font-size: 10px; }
.metric strong { font-size: 15px; }
.quick-card strong { font-size: 12px; }
.quick-card small { font-size: 10px; line-height: 1.5; }
.connection-row { font-size: 12px; }
.connection-row strong { font-size: 11px; }

.voltage-center span { font-size: 12px; }
.voltage-level-button { min-height: 42px; font-size: 12px; }
.setting-copy strong { font-size: 13px; }
.setting-copy span { font-size: 11px; line-height: 1.5; }
.scope-switch button { min-height: 38px; font-size: 12px; }
.persona-copy strong { font-size: 13px; }
.persona-copy p { font-size: 11px; line-height: 1.5; }
.persona-badge { font-size: 9px; }
.small-primary,
.small-secondary,
.danger-button { min-height: 40px; font-size: 12px; }
.form-label-row label { font-size: 13px; }
.form-label-row span { font-size: 10px; }
.text-input,
.select-input { min-height: 46px; font-size: 14px; }
.text-area { font-size: 14px; }
.helper-box { font-size: 11px; line-height: 1.65; }
.debate-side label { font-size: 11px; }
.swap-button { width: 40px; height: 40px; }
.debate-preview-card strong { font-size: 12px; }
.debate-preview-card small { font-size: 10px; }
.start-debate-button { min-height: 48px; font-size: 13px; }

.credit-balance span { font-size: 11px; }
.credit-split span { font-size: 9px; }
.credit-split strong { font-size: 11px; }
.commerce-state { font-size: 11px; }
.purchase-card-copy strong { font-size: 14px; }
.purchase-card-copy span { font-size: 11px; }
.purchase-price span { font-size: 10px; }
.purchase-button { min-height: 48px; font-size: 13px; }
.ledger-copy strong { font-size: 12px; }
.ledger-copy span { font-size: 10px; }
.ledger-amount { font-size: 12px; }

.login-brand { font-size: 14px; }
.login-card-scroll > p { font-size: 14px; }
.kakao-button,
.secondary-button { min-height: 52px; font-size: 14px; }

.login-card small { font-size: 11px; }
.modal-content { font-size: 14px; }
.notice-card strong { font-size: 13px; }
.notice-card p { font-size: 12px; }
.toast { font-size: 12px; }
.loading-panel,
.empty-panel { font-size: 12px; }

[data-theme="dark"] .purchase-button:disabled {
  color: var(--text-soft);
}

/* Phone-first adjustments: readable Korean text and 44px-class controls. */
@media (max-width: 620px) {
  :root { --topbar-height: 68px; }

  .topbar { padding: 0 10px; }
  .topbar .icon-button { width: 42px; height: 42px; border-radius: 13px; }
  .room-title-line h1 { max-width: 150px; font-size: 16px; }
  .room-title-block p { max-width: 165px; font-size: 11px; line-height: 1.35; }
  .status-chip { min-height: 38px; padding: 0 10px; font-size: 12px; }

  .chat-content { padding: 22px 14px 15px; }
  .empty-state { min-height: calc(100dvh - 250px); }
  .empty-state h2 { font-size: 27px; line-height: 1.25; }
  .empty-state > p { font-size: 14px; line-height: 1.65; }
  .prompt-grid { gap: 11px; }
  .prompt-card { min-height: 76px; padding: 15px; grid-template-columns: 38px minmax(0,1fr); column-gap: 11px; }
  .prompt-card > span { font-size: 21px; }
  .prompt-card strong { font-size: 14px; }
  .prompt-card small { font-size: 11px; }

  .message { grid-template-columns: 34px minmax(0,1fr); gap: 9px; }
  .message.user { grid-template-columns: minmax(0,1fr) 34px; }
  .message-avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
  .message-surface { padding: 15px 15px; }
  .markdown-body { font-size: 15px; line-height: 1.75; }
  .message-meta { font-size: 10px; }
  .message-meta strong { font-size: 12px; }
  .message-action { min-height: 36px; font-size: 12px; }

  .composer-area { padding: 10px 9px; }
  .composer-shell { padding: 11px 10px 9px 12px; }
  #message-input { min-height: 36px; font-size: 16px; line-height: 1.55; }
  .composer-tool { height: 36px; padding: 0 11px; font-size: 12px; }
  .send-button { width: 44px; height: 44px; }

  .studio { height: min(88dvh, 800px); }
  .studio-header { min-height: 72px; padding: 15px 17px; }
  .studio-content { padding: 16px; }
  .panel-card { padding: 16px; }
  .panel-card h3 { font-size: 16px; }
  .panel-card p { font-size: 13px; }
  .quick-card { min-height: 94px; padding: 14px; }
  .quick-card strong { font-size: 13px; }
  .quick-card small { font-size: 11px; }
  .setting-row { padding: 13px 0; }
  .setting-copy strong { font-size: 14px; }
  .setting-copy span { font-size: 11px; }
  .scope-switch button { min-height: 40px; font-size: 12px; }
  .persona-card { padding: 14px; }
  .persona-copy strong { font-size: 14px; }
  .persona-copy p { font-size: 11px; }

  /* 16px prevents Safari from auto-zooming form fields. */
  .text-input,
  .text-area,
  .select-input { font-size: 16px; }
  .form-label-row label { font-size: 13px; }
  .helper-box { font-size: 12px; }
  .account-profile-hero { margin-bottom: 15px; padding: 13px; }
  .account-profile-avatar { width: 44px; height: 44px; }
  .account-profile-hero strong { font-size: 16px; }
  .account-profile-hero span { font-size: 12px; }
  .account-profile-details { grid-template-columns: 1fr 1fr; }
  .profile-form-actions { position: sticky; bottom: 0; margin: 17px -18px -18px; padding: 12px 18px calc(12px + var(--safe-bottom)); background: var(--surface-solid); border-top: 1px solid var(--border); }
  /* Keep the name editor actions in normal flow, including with a mobile keyboard. */
  .account-profile-form .profile-form-actions {
    position: static;
    bottom: auto;
    margin: 18px 0 0;
    padding: 0;
    border-top: 0;
    background: transparent;
  }
  .profile-form-actions > button { flex: 1; min-height: 48px; font-size: 14px; }
  .modal-content { font-size: 14px; }
  .toast { font-size: 13px; }
}


/* Overlay stacking fix: the mobile Studio backdrop must sit behind the sheet. */
.sidebar,
.studio { z-index: 60; }
.backdrop { z-index: 50; }
.studio-backdrop { z-index: 55; }

/* Keep the larger sidebar typography usable on shorter laptop screens. */
.sidebar {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.brand-row,
.account-card,
.primary-action,
.rooms-section,
.feature-nav,
.sidebar-footer { flex-shrink: 0; }

/* VESPER WEB V2 UX FIXES: clickable centre voltage and keyboard hint. */
.composer-footnote strong { color: var(--text-soft); font-weight: 850; }


/* === VESPER WEB V2 MOBILE-FIRST PATCH: 2026-08-16 ===
 * Keeps the desktop layout intact while giving phones their own concise
 * navigation and conversation controls instead of merely hiding desktop UI.
 */
.mobile-room-menu { display: none; }

.mobile-action-list {
  display: grid;
  gap: 9px;
}
.mobile-action-item {
  width: 100%;
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.mobile-action-item:hover,
.mobile-action-item:active {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}
.mobile-action-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 17px;
  font-weight: 900;
}
.mobile-action-copy { min-width: 0; }
.mobile-action-copy strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.mobile-action-copy small {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
}
.mobile-action-arrow {
  color: var(--text-faint);
  font-size: 20px;
}
.mobile-action-item.danger .mobile-action-icon {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.mobile-action-item.danger .mobile-action-copy strong { color: var(--danger); }

.studio-mobile-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 7px;
  padding: 10px 14px 11px;
  overflow: visible;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--studio) 96%, transparent);
}
.studio-mobile-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text-soft);
  background: var(--surface-solid);
  cursor: pointer;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.studio-mobile-tabs button:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong));
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface-solid));
}
.studio-mobile-tabs button.active,
.studio-mobile-tabs button[aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 7px 17px rgba(var(--accent-strong-rgb), .18);
}
.studio-mobile-tabs button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}
[data-theme="dark"] .studio-mobile-tabs button:not(.active):not([aria-selected="true"]) {
  color: #c9c3b9;
  border-color: rgba(224, 221, 215, .16);
  background: rgba(24, 25, 27, .92);
}
[data-theme="dark"] .studio-mobile-tabs button:hover:not(.active):not([aria-selected="true"]) {
  color: #f0ece5;
  border-color: rgba(var(--accent-rgb), .48);
  background: rgba(var(--accent-rgb), .12);
}
.studio-theme-button {
  gap: 4px;
}
/* R320: translated settings labels stay inside their desktop/mobile buttons. */
.studio-mobile-tabs button[data-studio-tab] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-theme-button > #theme-icon { flex: 0 0 auto; }
.studio-theme-button > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}



@media (max-width: 920px) {
  .mobile-room-menu { display: grid; }
  .room-more { opacity: 1; }
}

/* === RC9.2.17 · fixed install entry and platform guide === */
.service-menu-launch.pwa-install-launch { margin-top: 4px; }
.pwa-install-launch:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}

.pwa-install-guide {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 18px calc(18px + var(--safe-bottom));
}
.pwa-install-guide.is-ios {
  padding-bottom: calc(94px + var(--safe-bottom));
}
.pwa-install-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 8, 7, .62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.pwa-install-guide-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100dvh - 54px - var(--safe-bottom));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  animation: pwa-install-guide-enter .24s cubic-bezier(.2, .82, .26, 1) both;
}
.pwa-install-guide.is-ios .pwa-install-guide-dialog {
  max-height: calc(100dvh - 126px - var(--safe-bottom));
}
.pwa-install-guide-dialog:focus { outline: none; }
.pwa-install-guide-header {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--border);
}
.pwa-install-guide-header h2 { margin: 5px 0 0; font-size: 17px; line-height: 1.3; }
.pwa-install-guide-body { min-height: 0; overflow-y: auto; padding: 17px; }
.pwa-install-guide-body > p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.pwa-install-guide-steps { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; }
.pwa-install-guide-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.pwa-install-guide-steps li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 900;
}
.pwa-install-guide-steps strong { display: block; font-size: 12px; line-height: 1.4; }
.pwa-install-guide-steps small { display: block; margin-top: 4px; color: var(--text-soft); font-size: 10px; line-height: 1.5; }
.pwa-install-guide-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 17px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.pwa-install-guide-actions .small-primary { min-width: 96px; min-height: 42px; font-size: 12px; }
.pwa-install-share-pointer {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(7px + var(--safe-bottom));
  display: none;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  place-items: center;
  column-gap: 7px;
  color: #fff;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
  transform: translateX(-50%);
  animation: pwa-install-share-pointer 1.2s ease-in-out infinite;
}
.pwa-install-guide.is-ios .pwa-install-share-pointer { display: grid; }
.pwa-install-share-pointer svg {
  width: 27px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pwa-install-share-pointer span { font-size: 11px; font-weight: 850; }
.pwa-install-share-pointer b { grid-column: 1 / -1; font-size: 22px; line-height: 1; }

@keyframes pwa-install-guide-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pwa-install-share-pointer {
  0%, 100% { transform: translate(-50%, -2px); }
  50% { transform: translate(-50%, 6px); }
}

@media (max-width: 620px) {
  .pwa-install-guide { padding: 12px 12px calc(12px + var(--safe-bottom)); }
  .pwa-install-guide.is-ios { padding-bottom: calc(92px + var(--safe-bottom)); }
  .pwa-install-guide-dialog {
    max-height: calc(100dvh - 36px - var(--safe-bottom));
    border-radius: 22px;
  }
  .pwa-install-guide.is-ios .pwa-install-guide-dialog {
    max-height: calc(100dvh - 116px - var(--safe-bottom));
  }
}

@media (min-width: 700px) {
  .pwa-install-guide,
  .pwa-install-guide.is-ios { align-items: center; padding: 24px; }
  .pwa-install-guide-dialog,
  .pwa-install-guide.is-ios .pwa-install-guide-dialog { max-height: min(720px, calc(100dvh - 48px)); }
  .pwa-install-guide.is-ios .pwa-install-share-pointer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-guide-dialog,
  .pwa-install-share-pointer { animation: none !important; transition: none !important; }
}

@media (max-width: 620px) {
  :root { --topbar-height: 64px; }

  /* Phone header: menu, title, conversation menu, settings. The duplicated
     desktop status chips move to the composer and Studio. */
  .topbar { padding: 0 9px; gap: 7px; }
  .topbar-left { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .topbar-actions { flex: 0 0 auto; gap: 5px; }
  .topbar .icon-button {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  .room-title-block { flex: 1 1 auto; min-width: 0; }
  .room-title-line h1 {
    max-width: min(42vw, 180px);
    font-size: 16px;
  }
  .room-title-block p { display: none; }
  #voltage-chip { display: none; }
  .mobile-room-menu { font-size: 23px; line-height: 1; letter-spacing: 1px; }
  .studio-toggle { display: grid; }

  /* The drawer is a phone menu, not a squeezed desktop column. */
  .sidebar {
    width: min(88vw, 360px);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 13px calc(14px + var(--safe-bottom));
  }
  .brand-row { min-height: 48px; padding-bottom: 9px; }
  .brand-mark-wrap { width: 38px; height: 38px; }
  .brand-copy strong { font-size: 17px; }
  .preview-dot { display: none; }
  .account-card { padding: 12px; border-radius: 17px; }
  .account-copy span { display: none; }
  .sync-note { display: none; }
  .account-stats { margin-top: 10px; }
  .primary-action { min-height: 48px; margin-top: 10px; }
  .primary-action kbd { display: none; }
  .rooms-section { min-height: 96px; margin-top: 14px; }
  .room-item { min-height: 48px; }
  .feature-nav { margin-top: 12px; gap: 3px; }
  .nav-heading { display: none; }
  .feature-nav-item { min-height: 45px; }
  .sidebar-footer {
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .footer-link {
    min-height: 42px;
    padding: 0 5px;
    text-align: center;
    font-size: 11px;
  }
  .build-label { display: none; }
  .workspace-business-footer {
    padding: 6px 10px calc(6px + var(--safe-bottom));
    gap: 2px 7px;
    font-size: 6.5px;
    line-height: 1.4;
  }

  /* Mobile Studio behaves like a focused bottom sheet with an always-visible
     feature switcher. */
  .studio {
    height: min(91dvh, 820px);
    border-radius: 24px 24px 0 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .studio-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .studio-header {
    min-height: 62px;
    padding: 12px 15px 8px;
  }
  .studio-header .eyebrow { display: none; }
  .studio-header h2 { margin: 0; font-size: 19px; }
  .studio-mobile-tabs { gap: 5px; padding: 7px 8px 10px; }
  .studio-mobile-tabs button { min-height: 40px; padding: 0 7px; font-size: 11px; }
  .studio-mobile-tabs .studio-theme-button { gap: 3px; }
  .speech-cloud-status { grid-template-columns: 9px minmax(0, 1fr); }
  .speech-cloud-status-actions { grid-column: 2; justify-content: flex-start; }
  .speech-voice-select,
  .speech-speed-select,
  .speech-preset-select { font-size: 16px; }
  .studio-content {
    padding: 13px 12px calc(18px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
  }

  /* The action sheet is the mobile home for clear/rename/new-room actions. */
  .mobile-action-item { min-height: 60px; }

  /* Keep transient notices above the fixed composer instead of covering it. */
  .toast-stack {
    bottom: calc(112px + var(--safe-bottom));
  }
}

/* === VESPER WEB V2 OPEN RESPONSE PATCH: 2026-08-16 ===
 * Contemporary AI-chat hierarchy:
 * - the user's prompt remains a compact right-aligned bubble;
 * - Vesper's answer is an open, full-width response on the conversation canvas.
 * The assistant body deliberately has no card border, fill, radius, or shadow.
 */
.messages {
  gap: 31px;
}

.message.assistant {
  display: block;
  width: 100%;
  padding: 2px 0 8px;
}

.assistant-message-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.message.assistant .message-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  box-shadow: none;
}

.message.assistant .message-meta {
  min-width: 0;
  margin: 0;
}

.message.assistant .message-main {
  width: 100%;
}

.message.assistant .message-surface,
.message.assistant.streaming .message-surface {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.message.assistant .markdown-body {
  width: 100%;
  max-width: none;
  color: var(--text);
}

/* Keep conversational answers visually even when the model uses Markdown
 * emphasis. Code, links, lists and quote styling remain intact. */
.message.assistant .markdown-body strong {
  font-weight: inherit;
}

.message.assistant .markdown-body em {
  font-style: normal;
}

.message.assistant .message-actions {
  margin-top: 12px;
}

.message.user .message-main {
  width: min(78%, 680px);
}

.message.user .message-surface {
  padding: 13px 16px 50px;
  border-radius: 18px 18px 7px 18px;
  box-shadow: none;
}

@media (max-width: 620px) {
  .messages {
    gap: 29px;
  }

  .message.assistant {
    padding: 0 0 6px;
  }

  .assistant-message-head {
    min-height: 30px;
    gap: 9px;
    margin-bottom: 10px;
  }

  .message.assistant .message-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
  }

  .message.assistant .message-surface {
    padding: 0;
  }

  .message.assistant .markdown-body {
    font-size: 16px;
    line-height: 1.78;
  }

  .message.assistant .message-actions {
    margin-top: 11px;
  }

  .message.user .message-main {
    width: min(88%, 560px);
  }

  .message.user .message-surface {
    padding: 12px 14px 54px;
    border-radius: 17px 17px 6px 17px;
  }

  .message-action.icon-action {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .message-action.icon-action svg { width: 21px; height: 21px; }

  .speech-player {
    top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 6px);
    width: calc(100vw - 18px);
    min-height: 72px;
    padding: 10px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 16px;
  }

  .speech-player-copy strong { font-size: 14px; }
  .speech-player-copy span { font-size: 11px; }
  .speech-player-actions { gap: 2px; }
  .speech-player-button { width: 36px; height: 36px; border-radius: 11px; }
}



/* === VESPER WEB V2 iOS-CADENCE STREAMING PATCH: 2026-08-16 ===
 * Completed lines are rendered as Markdown while the actively growing tail is
 * a cheap plain-text node. This avoids replacing the entire answer DOM every
 * 60 ms and lets the browser paint every iPhone-style reveal beat.
 */
.stream-live-committed:empty { display: none; }
.stream-live-tail {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* === VESPER WEB V2 PRECISION UX FIXES: 2026-08-17 ===
 * Narrow fixes only: custom-persona visibility/actions and stable room controls.
 */
.custom-persona-list {
  max-height: min(46vh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
}
.custom-persona-card {
  grid-template-columns: 42px minmax(0, 1fr) 22px 40px;
  padding-right: 10px;
  cursor: default;
}
.custom-persona-card .custom-select {
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.custom-persona-card .persona-emoji.custom-select {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.custom-persona-card .custom-edit {
  position: static;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: 6px;
  opacity: 1;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text-soft);
  background: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.custom-persona-card .custom-edit:hover,
.custom-persona-card .custom-edit:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-soft);
}
@media (max-width: 620px) {
  .custom-persona-list { max-height: min(43dvh, 440px); }
  .custom-persona-card { grid-template-columns: 42px minmax(0, 1fr) 22px 44px; }
  .custom-persona-card .custom-edit { width: 44px; height: 44px; margin-right: 6px; }
}



/* === VESPER WEB V2 MICRO UI POLISH: 2026-08-17 ===
 * Compact/inset overflow glyphs and a true proportional 1V–12V gauge.
 */

/* === VESPER WEB V2 GAUGE LAYOUT FIX: V10R4 ===
 * A wider outer arc and a smaller/lower value capsule keep the full gauge
 * visible instead of hiding it behind the 1V–12V label.
 */

/* === VESPER WEB V2 FINAL INPUT + PERSONA GUARD: V10R5 ===
 * 5,000-character composer parity, compact long user bubbles, and a hard
 * ten-item custom-persona creation ceiling. Existing chat/voice behavior stays intact.
 */
.message-count {
  display: none;
  min-width: 68px;
  justify-content: flex-end;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.message-count.is-visible { display: inline-flex; }
.message-count.is-limit { color: var(--danger); font-weight: 850; }

.message.user .message-surface.has-user-collapse {
  position: relative;
}
.message.user .message-surface.has-user-collapse .markdown-body {
  transition: max-height .2s ease;
}
.message.user .message-surface.has-user-collapse.is-collapsed .markdown-body {
  max-height: var(--user-message-collapsed-height, 11em);
  overflow: hidden;
}
.message.user .message-surface.has-user-collapse.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 49px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface-soft));
}
.user-message-toggle {
  position: relative;
  z-index: 2;
  min-height: 29px;
  margin-top: 10px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}
.user-message-toggle:hover,
.user-message-toggle:focus-visible {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}

.custom-persona-toolbar {
  align-items: center;
}

@media (max-width: 620px) {
  .message-count.is-visible {
    display: inline-flex;
    font-size: 10px;
  }
  .composer-actions {
    margin-left: auto;
  }
  .user-message-toggle {
    min-height: 32px;
    padding-inline: 11px;
    font-size: 11px;
  }
}



/* V10R6 business menu and user-consented report/share flows */
.service-menu-launch {
  width: calc(100% - 28px);
  margin: 10px 14px 4px;
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.service-menu-launch:hover { border-color: var(--accent); background: var(--accent-soft); }
.service-menu-launch-icon { font-size: 19px; color: var(--accent); }
.service-menu-shell { display: grid; gap: 22px; }
.service-menu-section > h3 { margin: 0 0 10px; color: var(--text-faint); font-size: 13px; font-weight: 850; }
.service-menu-list { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.service-menu-item {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 12px;
  padding: 11px 15px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left;
  font: inherit; font-size: 14px; font-weight: 780; cursor: pointer;
}
.service-menu-item:last-child { border-bottom: 0; }
.service-menu-item:hover { background: var(--surface-soft); }
.service-menu-item.danger { color: var(--danger); }
.service-menu-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.service-menu-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.service-menu-chevron { color: var(--text-faint); font-size: 22px; text-align: right; }
.account-danger-zone { margin-top: 14px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.account-danger-zone div { min-width: 0; display: grid; gap: 3px; }
.account-danger-zone strong { color: var(--danger); font-size: 13px; }
.account-danger-zone span { color: var(--text-soft); font-size: 11px; line-height: 1.45; }
.small-danger { border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); color: var(--danger); border-radius: 12px; padding: 9px 12px; font-weight: 850; cursor: pointer; }
.danger-card { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)) !important; background: color-mix(in srgb, var(--danger) 5%, var(--surface)) !important; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); color: var(--text-soft); font-size: 12px; line-height: 1.55; cursor: pointer; }
.consent-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.danger-confirm { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.consent-status { margin-top: 12px; padding: 9px 11px; border-radius: 11px; font-size: 12px; font-weight: 850; }
.consent-status.accepted { background: rgba(48,122,85,.10); color: var(--success); }
.consent-status.required { background: var(--accent-soft); color: var(--accent); }
.inline-link-button { border: 0; padding: 3px 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.support-form, .report-form-stack { display: grid; gap: 14px; }
.support-body, .context-report-note { min-height: 160px; }
.support-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; }
.support-links a { color: var(--accent); font-weight: 800; }
.report-choice-list { display: grid; gap: 10px; margin-bottom: 14px; }
.report-choice-card { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) 16px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.report-choice-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.report-choice-card > span:nth-child(2) { display: grid; gap: 4px; }
.report-choice-card strong { font-size: 14px; }
.report-choice-card small { color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.report-choice-card > b { color: var(--text-faint); font-size: 22px; }
.report-choice-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.report-choice-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.report-choice-icon.context { color: var(--accent); }
.report-preview { padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.report-preview span { display: block; margin-bottom: 6px; color: var(--text-faint); font-size: 10px; font-weight: 850; }
.report-preview p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.report-scope-field { display: grid; gap: 8px; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 14px; }
.report-scope-field legend { padding: 0 5px; font-size: 12px; font-weight: 850; }
.report-scope-field label { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 12px; cursor: pointer; }
.report-scope-field input { accent-color: var(--accent); }
.report-scope-field small { color: var(--text-faint); }
.context-share-summary { display: grid; gap: 3px; padding: 11px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.context-share-summary strong { font-size: 12px; }
.context-share-summary span { font-size: 10px; line-height: 1.4; }
.message-action.report-action:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
#credits-balance-section, #credits-purchase-section, #credits-orders-section, #credits-ledger-section { scroll-margin-top: 16px; }
@media (max-width: 720px) {
  .service-menu-launch { margin-top: 8px; }
  .service-menu-item { min-height: 58px; font-size: 15px; }
  .account-danger-zone { align-items: stretch; flex-direction: column; }
  .account-danger-zone .small-danger { width: 100%; }
  .report-choice-card { grid-template-columns: 42px minmax(0,1fr) 14px; }
}

/* === V10R13 WEB COMMERCE MENU === */
.credit-catalog-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.credit-catalog-header h3 { margin: 0; }
.credit-catalog-header p { margin-top: 4px; }
.credit-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.credit-product-option { position: relative; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.credit-product-option.recommended { border-color: rgba(var(--accent-rgb), .36); background: linear-gradient(145deg, var(--accent-soft), var(--surface-solid)); }
.credit-product-option-top { min-height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.credit-product-option-top > strong { font-size: 12px; }
.credit-product-badge { padding: 3px 6px; border-radius: 999px; color: #fff; background: var(--accent); font-size: 7px; font-weight: 900; white-space: nowrap; }
.credit-product-amount { margin-top: 10px; display: flex; align-items: flex-end; gap: 4px; }
.credit-product-amount strong { font-size: 24px; letter-spacing: -.04em; }
.credit-product-amount span { padding-bottom: 3px; color: var(--text-soft); font-size: 8px; }
.credit-product-option > p { min-height: 32px; margin: 6px 0 0; color: var(--text-soft); font-size: 9px; line-height: 1.45; }
.credit-product-price { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.credit-product-price strong { font-size: 16px; }
.credit-product-price span { color: var(--text-faint); font-size: 7px; text-align: right; }
.credit-product-option .purchase-button { margin-top: 10px; min-height: 39px; }
.commerce-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; color: var(--text-soft); background: var(--surface-soft); }
.commerce-notice.ready { color: var(--success); background: rgba(48,122,85,.08); }
.commerce-notice-icon { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--accent); background: var(--surface-solid); }
.commerce-notice.ready .commerce-notice-icon { color: var(--success); }
.commerce-notice strong { display: block; color: var(--text); font-size: 11px; }
.commerce-notice span { display: block; margin-top: 3px; font-size: 9px; line-height: 1.45; }
.payment-method-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.payment-method-list span { padding: 6px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: var(--surface-solid); font-size: 8px; font-weight: 800; }
.credit-policy-list { display: grid; gap: 9px; margin-top: 11px; }
.credit-policy-item { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 9px; align-items: start; }
.credit-policy-item > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 900; }
.credit-policy-item strong { display: block; font-size: 10px; }
.credit-policy-item p { margin-top: 3px; font-size: 8px; }
.credit-policy-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.credit-policy-links button { font-size: 9px; }
.order-list { display: flex; flex-direction: column; }
.order-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.order-row:last-child { border-bottom: 0; }
.order-copy strong { display: block; font-size: 10px; }
.order-copy span { display: block; margin-top: 3px; color: var(--text-faint); font-size: 8px; }
.order-summary { text-align: right; }
.order-summary strong { display: block; font-size: 10px; }
.order-status { display: inline-block; margin-top: 4px; padding: 3px 6px; border-radius: 999px; color: var(--text-soft); background: var(--surface-soft); font-size: 7px; font-weight: 850; }
.order-status.paid { color: var(--success); background: rgba(48,122,85,.09); }
.order-status.failed { color: var(--danger); background: rgba(199,67,67,.08); }
.order-refund-button { margin-top: 7px; padding: 5px 8px; border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 8px; color: var(--accent); background: var(--accent-soft); font-size: 7px; font-weight: 900; }
.order-refund-button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); }
.order-refund-status { display: block; margin-top: 6px; color: var(--accent); font-size: 7px; font-weight: 850; }
.refund-quote-summary { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.refund-quote-summary > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 12px; background: var(--surface); }
.refund-quote-summary span { color: var(--text-faint); font-size: 9px; }
.refund-quote-summary strong { text-align: right; font-size: 9px; }
.refund-quote-summary .refund-quote-total { background: var(--accent-soft); }
.refund-quote-summary .refund-quote-total span, .refund-quote-summary .refund-quote-total strong { color: var(--accent); font-weight: 950; }
.refund-review-note { margin-top: 10px; color: var(--text-faint); font-size: 8px; line-height: 1.65; }
.checkout-product-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 15px; border: 1px solid rgba(var(--accent-rgb), .20); border-radius: 16px; background: var(--accent-soft); }
.checkout-product-summary strong { display: block; font-size: 15px; }
.checkout-product-summary span { display: block; margin-top: 4px; color: var(--text-soft); font-size: 11px; }
.checkout-product-summary b { align-self: center; font-size: 18px; }
.checkout-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.checkout-method-button { min-height: 58px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-solid); cursor: pointer; text-align: left; }
.checkout-method-button:only-child { grid-column: 1 / -1; }
.checkout-method-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.checkout-method-button strong { display: block; font-size: 12px; }
.checkout-method-button span { display: block; margin-top: 4px; color: var(--text-soft); font-size: 9px; line-height: 1.4; }
.checkout-method-button:disabled { cursor: wait; opacity: .55; }

/* Public PG-reviewable product page. */
body.public-commerce-page { width: 100%; height: 100dvh; min-height: 100dvh; overflow: auto; background: linear-gradient(160deg, #f8f3ea 0%, #eee5d8 100%); }
.public-commerce-header { width: min(1180px, calc(100% - 40px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.public-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.public-brand img { width: 42px; height: 42px; border-radius: 13px; }
.public-brand span { display: grid; gap: 3px; }
.public-brand strong { font-size: 16px; letter-spacing: .12em; }
.public-brand small { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.public-commerce-header nav { display: flex; align-items: center; gap: 22px; }
.public-commerce-header nav a { color: var(--text-soft); font-size: 13px; font-weight: 760; text-decoration: none; }
.public-commerce-header nav a:hover { color: var(--accent); }
.public-commerce-header .public-login-link { padding: 10px 15px; border-radius: 12px; color: #fff; background: var(--text); }
.public-commerce-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 54px 0 76px; }
.public-commerce-hero { max-width: 780px; padding: 38px 0 60px; }
.public-commerce-hero h1 { margin: 12px 0 18px; font-size: clamp(42px, 7vw, 76px); line-height: 1.02; letter-spacing: -.065em; }
.public-commerce-hero > p { max-width: 650px; margin: 0; color: var(--text-soft); font-size: 18px; line-height: 1.7; }
.public-commerce-trust { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.public-commerce-trust span { padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: rgba(255,255,255,.58); font-size: 12px; font-weight: 800; }
.public-products-section, .public-policy-section { padding: 34px; border: 1px solid var(--border); border-radius: 30px; background: rgba(255,253,249,.87); box-shadow: var(--shadow-md); }
.public-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.public-section-heading h2 { margin: 7px 0 0; font-size: 27px; letter-spacing: -.035em; }
.public-section-heading > p { margin: 0; color: var(--text-soft); font-size: 13px; }
.public-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.public-product-card { position: relative; min-width: 0; padding: 21px; border: 1px solid var(--border); border-radius: 22px; background: #fffdfa; }
.public-product-card.recommended { border-color: rgba(var(--accent-rgb), .40); background: linear-gradient(145deg, #eef5f0, #f8fbf8); box-shadow: 0 18px 40px rgba(var(--accent-strong-rgb), .10); }
.public-product-top { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-soft); font-size: 13px; font-weight: 850; }
.public-product-badge { padding: 4px 7px; border-radius: 999px; color: #fff; background: var(--accent); font-size: 9px; }
.public-product-card > strong { display: block; margin-top: 20px; font-size: 34px; letter-spacing: -.04em; }
.public-product-card > strong small { color: var(--text-soft); font-size: 12px; letter-spacing: 0; }
.public-product-card > p { min-height: 45px; margin: 10px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.public-product-price { margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 4px; }
.public-product-price b { font-size: 22px; }
.public-product-price span { color: var(--text-faint); font-size: 10px; }
.public-product-card > a { min-height: 43px; margin-top: 16px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--text); text-decoration: none; font-size: 12px; font-weight: 900; }
.public-product-card.recommended > a { background: var(--accent); }
.public-buy-note { margin-top: 18px; padding: 15px 17px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--surface-soft); }
.public-buy-note p { margin: 0; color: var(--text-soft); font-size: 12px; }
.public-buy-note a { color: var(--accent-strong); font-size: 12px; font-weight: 900; text-decoration: none; }
.public-commerce-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.public-info-card { padding: 28px; border: 1px solid var(--border); border-radius: 26px; background: rgba(255,253,249,.78); }
.public-info-card h2 { margin: 8px 0 10px; font-size: 22px; }
.public-info-card p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.public-info-card small { display: block; margin-top: 13px; color: var(--text-faint); font-size: 10px; line-height: 1.55; }
.public-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.public-policy-grid article { padding: 17px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-soft); }
.public-policy-grid strong { font-size: 13px; }
.public-policy-grid p { margin: 6px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.65; }
.public-policy-legal { margin: 16px 0 0; color: var(--text-faint); font-size: 11px; line-height: 1.65; }
.public-policy-legal a { color: var(--accent-strong); }
.public-policy-example { margin: 14px 0 0; padding: 14px 16px; border-radius: 15px; color: var(--text-soft); background: var(--accent-soft); font-size: 12px; line-height: 1.65; }
.public-policy-example strong { color: var(--accent-strong); }
.public-business-footer { padding: 38px max(20px, calc((100% - 1180px) / 2)); border-top: 1px solid var(--border); color: var(--text-soft); background: rgba(255,253,249,.72); }
.public-business-brand { display: flex; align-items: baseline; gap: 10px; }
.public-business-brand strong { color: var(--text); font-size: 16px; }
.public-business-brand span { color: var(--accent); font-size: 11px; font-weight: 850; }
.public-business-grid { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 7px 18px; font-size: 11px; line-height: 1.55; }
.public-business-grid span:not(:last-child)::after { content: ""; }
.public-business-grid a { color: inherit; }
.public-business-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 17px; }
.public-business-links a { color: var(--text); font-size: 11px; font-weight: 800; text-decoration: none; }
.public-business-footer > small { display: block; margin-top: 15px; color: var(--text-faint); font-size: 10px; }

@media (min-width: 721px) {
  .credit-product-option-top > strong { font-size: 14px; }
  .credit-product-amount span { font-size: 10px; }
  .credit-product-option > p { font-size: 10px; }
  .credit-product-price span { font-size: 8px; }
  .commerce-notice strong { font-size: 13px; }
  .commerce-notice span { font-size: 11px; }
  .payment-method-list span { font-size: 10px; }
  .credit-policy-item strong { font-size: 12px; }
  .credit-policy-item p { font-size: 10px; }
  .credit-policy-links button { font-size: 11px; }
  .order-copy strong, .order-summary strong { font-size: 12px; }
  .order-copy span { font-size: 10px; }
  .order-status { font-size: 9px; }
}

@media (max-width: 900px) {
  .public-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-commerce-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .public-commerce-header { width: calc(100% - 28px); min-height: 66px; }
  .public-commerce-header nav { gap: 8px; }
  .public-commerce-header nav a:not(.public-login-link) { display: none; }
  .public-commerce-main { width: calc(100% - 24px); padding: 24px 0 50px; }
  .public-commerce-hero { padding: 28px 5px 42px; }
  .public-commerce-hero h1 { font-size: 45px; }
  .public-commerce-hero > p { font-size: 15px; }
  .public-products-section, .public-policy-section { padding: 19px; border-radius: 23px; }
  .public-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .public-product-grid { grid-template-columns: 1fr; }
  .public-product-card > p { min-height: 0; }
  .public-buy-note { align-items: flex-start; flex-direction: column; gap: 8px; }
  .public-policy-grid { grid-template-columns: 1fr; }
  .public-info-card { padding: 21px; }
  .public-business-footer { padding: 30px 20px; }
  .checkout-methods { grid-template-columns: 1fr; }
  .login-overlay { padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
  .login-card { max-height: calc(100% - 16px); margin: 8px 0; }
  .login-business-footer { font-size: 8px; }
}

@media (max-height: 620px) {
  .login-overlay { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .login-card { max-height: calc(100% - 8px); margin: 4px 0; }
  .login-card-scroll { padding-top: 22px; padding-bottom: 22px; }
  .login-business-footer { max-height: min(27dvh, 96px); padding-top: 8px; }
}

@media (max-width: 390px) {
  .credit-product-grid { grid-template-columns: 1fr; }
}

/* === V10R18 LOGIN COMPOSITION FIX: 2026-08-18 === */
.login-card h2 {
  width: min(390px, 100%);
  margin: 12px auto 14px;
  font-size: clamp(18px, 1.15vw, 20px);
  line-height: 1.45;
  letter-spacing: -.035em;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

@media (max-width: 620px) {
  .login-card h2 {
    width: min(310px, 100%);
    font-size: 18px;
    line-height: 1.5;
  }
}

.settings-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
  stroke: none;
}
#studio-open { color: #000000; }
[data-theme="dark"] #studio-open { color: #ffffff; }

@media (max-width: 620px) {
  .settings-icon { width: 21px; height: 21px; }
}

/* === MOBILE COMPOSER SLIM + NATIVE IOS KEYBOARD LAYOUT: 2026-08-21 ===
 * Scope: phone composer only. Keep the existing controls/features intact elsewhere.
 * The persona/voltage composer chips stay in the DOM for state logic but are hidden
 * on phones, and the composer becomes a single-row input + send layout.
 */
@media (max-width: 620px) {
  .composer-tools { display: none; }
  .composer-area { padding: 6px 8px; }
  .composer-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 5px 6px 5px 12px;
    border-radius: 18px;
  }
  #message-input {
    grid-column: 1;
    grid-row: 1;
    min-height: 34px;
    max-height: 120px;
    padding: 5px 0 4px;
  }
  .composer-bottom-row {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-content: flex-end;
    gap: 6px;
  }
  .composer-actions { margin-left: 0; }
  .send-button { width: 42px; height: 42px; }

  /* Keep keyboard layout native. Do not force the app/workspace height from
     VisualViewport metrics: third-party iOS keyboards can report geometry
     differently from the Apple keyboard and leave a false gap above the keyboard. */
}

/* === MOBILE COMPOSER KEYBOARD LAYOUTS: 2026-08-21 / 2026-08-26 ===
 * The installed PWA keeps its proven fixed VisualViewport anchor. Browser tabs
 * use the normal-flow workspace path below to avoid Safari's focus/compositor pan.
 */
@media (max-width: 620px) {
  html.vesper-composer-visual-anchor .composer-area {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vesper-composer-visual-bottom);
    bottom: auto;
    z-index: 12;
    transform: translateY(-100%);
    margin: 0;
  }

  /* Safari browser tabs use a different path from the installed PWA. The
     workspace itself follows the reported visual bottom and the composer stays
     as its normal final flex child. Avoiding fixed + transform + backdrop blur
     keeps WebKit from painting the input in a stale compositor coordinate space. */
  html.vesper-composer-flow-anchor .workspace {
    align-self: start;
    height: var(--vesper-composer-flow-bottom);
    min-height: 0;
    max-height: 100dvh;
  }
  html.vesper-composer-flow-anchor .composer-area {
    position: static;
    inset: auto;
    z-index: 12;
    transform: none;
    margin: 0;
    background: var(--surface-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.vesper-composer-flow-anchor .workspace-business-footer {
    display: none !important;
  }
}

/* === COMPOSER CHIPS REMOVED EVERYWHERE + DESKTOP SLIM PARITY: 2026-08-21 ===
 * Scope: composer presentation only. Persona/voltage remain available through
 * their existing navigation/Studio surfaces; only the redundant composer chips
 * are hidden on every viewport. Desktop gets the same single-row slim shell as phone.
 */
.composer-tools { display: none; }

@media (min-width: 621px) {
  .composer-area { padding-top: 5px; padding-bottom: 5px; }
  .composer-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 3px 6px 3px 12px;
    border-radius: 18px;
  }
  #message-input {
    grid-column: 1;
    grid-row: 1;
    min-height: 32px;
    padding: 4px 0;
  }
  .composer-bottom-row {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-content: flex-end;
    gap: 6px;
  }
  .composer-actions { margin-left: 0; }
  .send-button { width: 40px; height: 40px; }
}

/* === MOBILE KEYBOARD LAST-RESPONSE ACTION CLEARANCE: 2026-08-21 ===
 * While the composer is visually anchored above an iOS keyboard, reserve only
 * the portion of the chat scroller actually covered by that fixed composer.
 * The existing #chat-tail becomes the spacer, so the final assistant action row
 * (copy / speech / report) can scroll completely above the composer/keyboard.
 * No keyboard-brand-specific pixel offsets are used.
 */
#chat-tail {
  height: var(--vesper-chat-bottom-clearance, 0px);
  flex: 0 0 auto;
  pointer-events: none;
}


/* === VESPER PREMIUM WARM SKIN + IOS THINKING LABEL: 2026-08-21 ===
 * Visual-only reskin.
 * LOCK: keep all existing desktop/mobile layout, menu/button positions,
 * responsive drawers/sheets, composer geometry, keyboard anchoring, chat
 * behavior, Persona/Voltage/Debate/Credit/OAuth logic, and open-response UI.
 * This layer only refines dark-theme color, gradients, borders and shadows.
 */
[data-theme="dark"] {
  --bg: #080807;
  --bg-deep: #0c0a08;
  --surface: rgba(25, 23, 20, 0.94);
  --surface-solid: #171613;
  --surface-soft: #1e1b17;
  --surface-strong: #28231d;
  --sidebar: #0a0908;
  --studio: #0a0908;
  --text: #f4f1ea;
  --text-soft: #b9b0a4;
  --text-faint: #81786d;
  --border: rgba(255, 227, 196, 0.085);
  --border-strong: rgba(255, 220, 181, 0.145);
  --accent: #f28a18;
  --accent-strong: #ffad52;
  --accent-soft: rgba(242, 138, 24, 0.115);
  --accent-wash: rgba(242, 138, 24, 0.075);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 20px 52px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 38px 96px rgba(0, 0, 0, 0.48);
}

/* Preserve the existing responsive geometry; only repaint the major shells. */
[data-theme="dark"] .app-shell {
  background:
    radial-gradient(circle at 17% -12%, rgba(242, 138, 24, 0.075), transparent 29%),
    radial-gradient(circle at 88% 16%, rgba(160, 82, 18, 0.045), transparent 28%),
    linear-gradient(150deg, #080807 0%, #0c0a08 54%, #080807 100%);
}
[data-theme="dark"] .workspace {
  background:
    radial-gradient(circle at 51% -20%, rgba(242, 138, 24, 0.055), transparent 34%),
    radial-gradient(circle at 78% 68%, rgba(107, 55, 17, 0.025), transparent 34%),
    #080807;
}
[data-theme="dark"] .sidebar {
  background:
    radial-gradient(circle at 12% 0%, rgba(242, 138, 24, 0.045), transparent 28%),
    linear-gradient(180deg, rgba(14, 13, 11, 0.99), rgba(8, 8, 7, 0.995));
}
[data-theme="dark"] .studio {
  background:
    radial-gradient(circle at 70% 4%, rgba(242, 138, 24, 0.04), transparent 26%),
    linear-gradient(180deg, rgba(14, 13, 11, 0.99), rgba(8, 8, 7, 0.995));
}
[data-theme="dark"] .topbar {
  background:
    linear-gradient(180deg, rgba(22, 20, 17, 0.90), rgba(12, 11, 10, 0.88));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .composer-area {
  background:
    linear-gradient(180deg, rgba(15, 14, 12, 0.82), rgba(9, 9, 8, 0.95));
}

/* Left rail: preserve structure, replace hard black boxes with controlled warm depth. */
[data-theme="dark"] .brand-mark-wrap {
  box-shadow: 0 9px 24px rgba(225, 105, 10, 0.17);
}
[data-theme="dark"] .account-card {
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 138, 24, 0.055), transparent 34%),
    linear-gradient(145deg, rgba(29, 27, 23, 0.97), rgba(19, 18, 16, 0.96));
  border-color: rgba(255, 225, 190, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018),
    0 12px 34px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .account-card-interactive:hover {
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 138, 24, 0.075), transparent 36%),
    linear-gradient(145deg, rgba(33, 30, 25, 0.98), rgba(21, 20, 17, 0.98));
  border-color: rgba(255, 213, 168, 0.16);
}
[data-theme="dark"] .sync-note {
  background: linear-gradient(135deg, rgba(36, 33, 28, 0.86), rgba(27, 25, 21, 0.78));
}
[data-theme="dark"] .account-stats > div,
[data-theme="dark"] .room-icon {
  background: linear-gradient(145deg, rgba(31, 29, 25, 0.96), rgba(22, 21, 18, 0.96));
}
[data-theme="dark"] .primary-action {
  background:
    linear-gradient(135deg, #e8790e 0%, #ef8b20 55%, #f5a44a 100%);
  box-shadow:
    0 12px 28px rgba(199, 85, 5, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .primary-action:hover {
  box-shadow:
    0 16px 34px rgba(199, 85, 5, 0.29),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .room-item:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), rgba(242, 138, 24, 0.025));
}
[data-theme="dark"] .room-item.active {
  background:
    linear-gradient(100deg, rgba(72, 43, 20, 0.72), rgba(37, 29, 21, 0.72) 64%, rgba(29, 26, 22, 0.68));
  border-color: rgba(242, 138, 24, 0.31);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}
[data-theme="dark"] .feature-nav-item:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.024), rgba(242, 138, 24, 0.022));
}
[data-theme="dark"] .feature-nav-item.active {
  background:
    linear-gradient(100deg, rgba(35, 32, 27, 0.96), rgba(23, 22, 19, 0.96));
  border-color: rgba(255, 224, 188, 0.10);
  box-shadow: none;
}
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav),
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav):hover,
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav).active {
  background:
    linear-gradient(110deg, #7a3a09 0%, #b55a10 48%, #d57a26 100%);
  border-color: rgba(255, 182, 104, 0.16);
  box-shadow:
    0 10px 24px rgba(119, 49, 3, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
[data-theme="dark"] .footer-link:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* Header chips: glassy, low-contrast chrome so orange remains a brand accent. */
[data-theme="dark"] .status-chip,
[data-theme="dark"] .mini-icon-button,
[data-theme="dark"] .icon-button {
  background:
    linear-gradient(145deg, rgba(29, 27, 23, 0.88), rgba(17, 17, 15, 0.92));
  border-color: rgba(255, 229, 199, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}
[data-theme="dark"] .status-chip:hover,
[data-theme="dark"] .mini-icon-button:hover,
[data-theme="dark"] .icon-button:hover {
  background:
    linear-gradient(145deg, rgba(36, 32, 27, 0.94), rgba(21, 20, 17, 0.96));
  border-color: rgba(255, 216, 172, 0.16);
}

/* Conversation: retain the open-response assistant UI and current message geometry. */
[data-theme="dark"] .message.user .message-surface {
  background:
    radial-gradient(circle at 100% 0%, rgba(242, 138, 24, 0.027), transparent 30%),
    linear-gradient(145deg, #24221f, #1c1b18);
  border-color: rgba(255, 228, 198, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018),
    0 8px 26px rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] .message-avatar {
  background:
    linear-gradient(145deg, rgba(31, 29, 25, 0.96), rgba(18, 17, 15, 0.96));
  border-color: rgba(255, 225, 190, 0.095);
  box-shadow: none;
}
[data-theme="dark"] .message-action.icon-action,
[data-theme="dark"] .message-action {
  background:
    linear-gradient(145deg, rgba(31, 29, 25, 0.94), rgba(20, 19, 17, 0.96));
  border-color: rgba(255, 225, 190, 0.09);
}
[data-theme="dark"] .message-action.icon-action:hover,
[data-theme="dark"] .message-action:hover {
  background:
    linear-gradient(145deg, rgba(39, 35, 29, 0.96), rgba(23, 22, 18, 0.98));
  border-color: rgba(255, 213, 166, 0.16);
}

/* iOS-parity waiting state: keep the existing web dot animation, add only the label. */
.thinking-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.thinking-label {
  color: var(--text-faint);
  font-weight: 500;
}
.thinking-indicator .typing-dots {
  min-height: 14px;
}

/* Composer: same dimensions/placement, premium warm surface only. */
[data-theme="dark"] .composer-shell {
  background:
    radial-gradient(circle at 88% 50%, rgba(242, 138, 24, 0.055), transparent 30%),
    linear-gradient(110deg, rgba(24, 22, 19, 0.98), rgba(20, 19, 17, 0.98));
  border-color: rgba(255, 216, 171, 0.145);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018),
    0 12px 32px rgba(0, 0, 0, 0.16);
}
[data-theme="dark"] .composer-shell:focus-within {
  border-color: rgba(242, 138, 24, 0.42);
  box-shadow:
    0 0 0 1px rgba(242, 138, 24, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.19);
}
[data-theme="dark"] .send-button {
  background:
    linear-gradient(145deg, #f07d10 0%, #f39428 54%, #ffb05c 100%);
  box-shadow:
    0 8px 20px rgba(193, 76, 2, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
[data-theme="dark"] .send-button.stop {
  background: linear-gradient(145deg, #2d2a25, #1d1c19);
}

/* Studio: keep every card, metric, quick action and click target in place. */
[data-theme="dark"] .panel-card {
  background:
    linear-gradient(145deg, rgba(27, 25, 22, 0.97), rgba(18, 18, 16, 0.96));
  border-color: rgba(255, 226, 192, 0.095);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.015),
    0 12px 30px rgba(0, 0, 0, 0.13);
}
[data-theme="dark"] .panel-card.accent {
  background:
    radial-gradient(circle at 88% 6%, rgba(196, 91, 15, 0.23), transparent 38%),
    linear-gradient(140deg, #211c17 0%, #31261c 57%, #3f2815 100%);
  border-color: rgba(242, 138, 24, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.022),
    0 14px 34px rgba(0, 0, 0, 0.17);
}
[data-theme="dark"] .panel-card.accent .metric {
  background:
    linear-gradient(145deg, rgba(31, 29, 25, 0.84), rgba(25, 23, 20, 0.80));
  border-color: rgba(255, 228, 195, 0.10);
}
[data-theme="dark"] .metric,
[data-theme="dark"] .quick-card {
  background:
    linear-gradient(145deg, rgba(30, 28, 24, 0.95), rgba(20, 19, 17, 0.96));
  border-color: rgba(255, 225, 190, 0.09);
}
[data-theme="dark"] .quick-card:hover {
  border-color: rgba(242, 138, 24, 0.25);
  background:
    radial-gradient(circle at 88% 10%, rgba(242, 138, 24, 0.055), transparent 36%),
    linear-gradient(145deg, rgba(34, 31, 26, 0.97), rgba(21, 20, 17, 0.97));
}

/* Preserve and elevate the user's preferred credit-card gradient language. */
[data-theme="dark"] .credit-hero {
  background:
    radial-gradient(circle at 100% 20%, rgba(233, 124, 36, 0.28), transparent 38%),
    linear-gradient(140deg, #1d1b18 0%, #373029 58%, #5b2b02 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 44px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .credit-split > div {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.048));
}
[data-theme="dark"] .purchase-card,
[data-theme="dark"] .credit-product-option.recommended {
  background:
    radial-gradient(circle at 100% 0%, rgba(242, 138, 24, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(45, 34, 24, 0.96), rgba(25, 22, 18, 0.98));
  border-color: rgba(242, 138, 24, 0.32);
}
[data-theme="dark"] .credit-product-option {
  background:
    linear-gradient(145deg, rgba(30, 28, 24, 0.97), rgba(19, 18, 16, 0.98));
  border-color: rgba(255, 225, 190, 0.095);
}

/* Mobile inherits the same skin while keeping the existing drawer, bottom-sheet,
 * single-row composer, Enter/newline behavior and VisualViewport anchor intact.
 */
@media (max-width: 620px) {
  .thinking-indicator { font-size: 13px; }
  [data-theme="dark"] .studio {
    background:
      radial-gradient(circle at 70% 0%, rgba(242, 138, 24, 0.05), transparent 30%),
      linear-gradient(180deg, rgba(16, 14, 12, 0.995), rgba(8, 8, 7, 0.998));
  }
}


/* Guest exhausted state: keep existing conversation readable, gate only new sends. */
.composer-shell.guest-readonly textarea {
  cursor: pointer;
}
[data-theme="dark"] .composer-shell.guest-readonly {
  background:
    radial-gradient(circle at 88% 50%, rgba(242, 138, 24, 0.075), transparent 30%),
    linear-gradient(110deg, rgba(27, 24, 20, 0.98), rgba(18, 17, 15, 0.98));
  border-color: rgba(242, 138, 24, 0.28);
}
[data-theme="dark"] .composer-shell.guest-readonly textarea::placeholder {
  color: rgba(255, 214, 170, 0.72);
}

/* Debate first-speaker switch: make selected/unselected states unmistakable in dark mode. */
[data-theme="dark"] #debate-order.scope-switch,
[data-theme="dark"] #debate-speech-register.scope-switch {
  background: #0c0b0a;
  border-color: rgba(255, 225, 190, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}
[data-theme="dark"] #debate-order.scope-switch button,
[data-theme="dark"] #debate-speech-register.scope-switch button {
  color: #8f877d;
  background: #11100e;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
[data-theme="dark"] #debate-order.scope-switch button:hover:not(.active),
[data-theme="dark"] #debate-speech-register.scope-switch button:hover:not(.active) {
  color: #d9d0c6;
  background: #1b1916;
  border-color: rgba(255, 225, 190, 0.10);
}
[data-theme="dark"] #debate-order.scope-switch button.active,
[data-theme="dark"] #debate-speech-register.scope-switch button.active {
  color: #211307;
  background: linear-gradient(135deg, #f0a14a 0%, #ffb663 100%);
  border-color: rgba(255, 202, 139, 0.88);
  box-shadow:
    0 4px 12px rgba(207, 102, 17, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* === VESPER WEB V2 MICRO POLISH: 2026-08-21 ===
 * Requested scope only:
 * 1) Let the three guest starter cards carry the warm corner glow farther inward.
 * 2) Tone internal scrollbars down so they blend into the dark warm theme.
 */
[data-theme="dark"] .feature-launch-card::after {
  width: 184px;
  height: 184px;
  right: -70px;
  top: -76px;
  background: radial-gradient(
    circle,
    rgba(242, 138, 24, 0.105) 0%,
    rgba(242, 138, 24, 0.060) 34%,
    rgba(242, 138, 24, 0.024) 56%,
    rgba(242, 138, 24, 0) 76%
  );
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .chat-scroll,
[data-theme="dark"] .studio-content,
[data-theme="dark"] .rooms-list,
[data-theme="dark"] .custom-persona-list,
[data-theme="dark"] .login-overlay {
  scrollbar-color: rgba(152, 126, 101, 0.24) transparent;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-track,
[data-theme="dark"] .chat-scroll::-webkit-scrollbar-track,
[data-theme="dark"] .studio-content::-webkit-scrollbar-track,
[data-theme="dark"] .rooms-list::-webkit-scrollbar-track,
[data-theme="dark"] .custom-persona-list::-webkit-scrollbar-track,
[data-theme="dark"] .login-overlay::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] .studio-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .rooms-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .custom-persona-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .login-overlay::-webkit-scrollbar-thumb {
  background: rgba(152, 126, 101, 0.24);
  border-radius: 999px;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-scroll::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .studio-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .rooms-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .custom-persona-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .login-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 139, 109, 0.34);
}

/* === VESPER WEB V2 NOIR STUDIO COLOR RESKIN: 2026-08-21 ===
 * Scope locked to visuals only.
 * Layout, menu structure, element positions, and behavior are intentionally unchanged.
 * Goal: match the uploaded sample's refined black / charcoal / amber tone with softer card glow.
 */
[data-theme="dark"] {
  --bg: #040507;
  --bg-deep: #090b0f;
  --surface: rgba(16, 18, 22, 0.92);
  --surface-solid: #101216;
  --surface-soft: #15181d;
  --surface-strong: #1c2027;
  --sidebar: linear-gradient(180deg, rgba(8, 9, 12, 0.98), rgba(8, 9, 12, 0.95));
  --studio: linear-gradient(180deg, rgba(9, 10, 13, 0.98), rgba(9, 10, 13, 0.95));
  --text: #f2eee7;
  --text-soft: #aba59b;
  --text-faint: #7b756d;
  --border: rgba(247, 236, 219, 0.085);
  --border-strong: rgba(247, 236, 219, 0.14);
  --accent: #c69453;
  --accent-strong: #e0bb80;
  --accent-soft: rgba(198, 148, 83, 0.12);
  --accent-wash: rgba(198, 148, 83, 0.065);
  --danger: #e27a7a;
  --success: #67ba8b;
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 34px 84px rgba(0, 0, 0, 0.46);
}

[data-theme="dark"] .app-shell {
  background:
    radial-gradient(circle at 18% 7%, rgba(53, 74, 118, 0.11), transparent 27%),
    radial-gradient(circle at 74% 24%, rgba(198, 148, 83, 0.075), transparent 23%),
    radial-gradient(circle at 82% 72%, rgba(198, 148, 83, 0.045), transparent 21%),
    linear-gradient(180deg, #040507 0%, #080a0d 42%, #090b10 100%);
}

[data-theme="dark"] .workspace {
  background:
    radial-gradient(circle at 50% -18%, rgba(57, 76, 118, 0.10), transparent 30%),
    radial-gradient(circle at 72% 44%, rgba(198, 148, 83, 0.055), transparent 24%),
    linear-gradient(180deg, rgba(10, 12, 15, 0.985), rgba(8, 10, 13, 0.995));
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .studio {
  background:
    linear-gradient(180deg, rgba(8, 9, 12, 0.985), rgba(10, 11, 14, 0.965));
  border-color: rgba(247, 236, 219, 0.07);
}

[data-theme="dark"] .topbar {
  background:
    linear-gradient(180deg, rgba(9, 10, 13, 0.90), rgba(9, 10, 13, 0.82));
  border-color: rgba(247, 236, 219, 0.075);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

[data-theme="dark"] .brand-mark-wrap {
  box-shadow: 0 8px 22px rgba(198, 148, 83, 0.18);
}
[data-theme="dark"] .preview-dot,
[data-theme="dark"] .status-chip-dot,
[data-theme="dark"] .empty-orbit-ring::before {
  background: var(--accent-strong);
  box-shadow: 0 0 0 5px rgba(198, 148, 83, 0.14);
}
[data-theme="dark"] .brand-copy span,
[data-theme="dark"] .eyebrow {
  color: var(--accent-strong);
}

[data-theme="dark"] .account-card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .metric,
[data-theme="dark"] .quick-card,
[data-theme="dark"] .composer-shell,
[data-theme="dark"] .message-surface,
[data-theme="dark"] .message-avatar,
[data-theme="dark"] .status-chip,
[data-theme="dark"] .mini-icon-button,
[data-theme="dark"] .icon-button,
[data-theme="dark"] .room-created-notice,
[data-theme="dark"] .speech-player,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .drawer-modal-content,
[data-theme="dark"] .service-menu-list,
[data-theme="dark"] .account-danger-zone,
[data-theme="dark"] .consent-check {
  border-color: rgba(247, 236, 219, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018),
    0 14px 32px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .account-card,
[data-theme="dark"] .message-avatar,
[data-theme="dark"] .status-chip,
[data-theme="dark"] .mini-icon-button,
[data-theme="dark"] .icon-button,
[data-theme="dark"] .feature-nav-item.active,
[data-theme="dark"] .room-item.active,
[data-theme="dark"] .metric,
[data-theme="dark"] .quick-card,
[data-theme="dark"] .message-action,
[data-theme="dark"] .message-action.icon-action,
[data-theme="dark"] .speech-player,
[data-theme="dark"] .service-menu-list,
[data-theme="dark"] .account-danger-zone,
[data-theme="dark"] .consent-check {
  background:
    linear-gradient(145deg, rgba(18, 20, 24, 0.97), rgba(12, 13, 17, 0.98));
}

[data-theme="dark"] .panel-card,
[data-theme="dark"] .message-surface,
[data-theme="dark"] .composer-shell,
[data-theme="dark"] .login-card,
[data-theme="dark"] .modal-card {
  background:
    radial-gradient(circle at 82% 12%, rgba(198, 148, 83, 0.035), transparent 28%),
    linear-gradient(145deg, rgba(17, 19, 23, 0.985), rgba(11, 12, 16, 0.985));
}

[data-theme="dark"] .panel-card.accent {
  background:
    radial-gradient(circle at 88% 10%, rgba(198, 148, 83, 0.11), transparent 32%),
    linear-gradient(145deg, rgba(22, 21, 24, 0.98), rgba(16, 16, 20, 0.98));
  border-color: rgba(198, 148, 83, 0.17);
}

[data-theme="dark"] .panel-card.accent .metric {
  background:
    linear-gradient(145deg, rgba(19, 21, 25, 0.95), rgba(13, 14, 18, 0.96));
}

[data-theme="dark"] .account-card-interactive:hover,
[data-theme="dark"] .status-chip:hover,
[data-theme="dark"] .mini-icon-button:hover,
[data-theme="dark"] .icon-button:hover,
[data-theme="dark"] .quick-card:hover,
[data-theme="dark"] .message-action:hover,
[data-theme="dark"] .message-action.icon-action:hover,
[data-theme="dark"] .feature-nav-item:hover,
[data-theme="dark"] .room-item:hover {
  border-color: rgba(224, 187, 128, 0.14);
  background:
    radial-gradient(circle at 88% 10%, rgba(198, 148, 83, 0.055), transparent 30%),
    linear-gradient(145deg, rgba(22, 24, 29, 0.98), rgba(14, 15, 19, 0.98));
}

[data-theme="dark"] .sync-note,
[data-theme="dark"] .account-stats > div,
[data-theme="dark"] .room-icon,
[data-theme="dark"] .debate-person,
[data-theme="dark"] .speech-player-button:hover,
[data-theme="dark"] .speech-voice-current-row,
[data-theme="dark"] .notice-card,
[data-theme="dark"] .drawer-plan-card,
[data-theme="dark"] .drawer-user-card,
[data-theme="dark"] .account-profile-details > div {
  background: linear-gradient(145deg, rgba(18, 20, 24, 0.93), rgba(13, 14, 18, 0.95));
  border-color: rgba(247, 236, 219, 0.075);
}

[data-theme="dark"] .primary-action,
[data-theme="dark"] .send-button,
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav),
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav):hover,
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav).active {
  color: #fff8ee;
  background: linear-gradient(135deg, #8f6030 0%, #b68349 55%, #d9b172 100%);
  border-color: rgba(224, 187, 128, 0.16);
  box-shadow:
    0 10px 24px rgba(110, 74, 35, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .send-button.stop,
[data-theme="dark"] .message-action.icon-action.is-active {
  background: linear-gradient(145deg, #26231f, #1b1916);
  border-color: rgba(247, 236, 219, 0.08);
}

[data-theme="dark"] .room-item.active,
[data-theme="dark"] .feature-nav-item.active,
[data-theme="dark"] .prompt-card-note,
[data-theme="dark"] .room-mode-chip,
[data-theme="dark"] .message-meta .stance-badge,
[data-theme="dark"] .nav-badge,
[data-theme="dark"] .consent-status.required {
  color: var(--accent-strong);
  background: rgba(198, 148, 83, 0.10);
  border-color: rgba(198, 148, 83, 0.16);
}

[data-theme="dark"] .feature-nav-item.active,
[data-theme="dark"] .room-item.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.012);
}

[data-theme="dark"] .debate-header,
[data-theme="dark"] .room-warning,
[data-theme="dark"] .credit-hero,
[data-theme="dark"] .purchase-card,
[data-theme="dark"] .credit-product-option.recommended {
  background:
    radial-gradient(circle at 88% 12%, rgba(198, 148, 83, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(18, 19, 23, 0.985), rgba(13, 14, 18, 0.99));
  border-color: rgba(198, 148, 83, 0.17);
}
[data-theme="dark"] .room-warning {
  color: #edd5b0;
}

[data-theme="dark"] .workspace-business-footer,
[data-theme="dark"] .modal-actions,
[data-theme="dark"] .composer-area {
  background:
    linear-gradient(180deg, rgba(11, 12, 15, 0.88), rgba(9, 10, 13, 0.96));
  border-color: rgba(247, 236, 219, 0.075);
}

[data-theme="dark"] .workspace-business-footer strong,
[data-theme="dark"] .persona-chip,
[data-theme="dark"] .message-meta strong,
[data-theme="dark"] .room-title-line h1,
[data-theme="dark"] .empty-state h2,
[data-theme="dark"] .studio-header h2,
[data-theme="dark"] .panel-card h3,
[data-theme="dark"] .account-profile-hero strong {
  color: #f4efe7;
}

[data-theme="dark"] .message.user .message-surface {
  background:
    radial-gradient(circle at 100% 0%, rgba(198, 148, 83, 0.030), transparent 28%),
    linear-gradient(145deg, rgba(24, 26, 30, 0.98), rgba(16, 18, 22, 0.98));
}

[data-theme="dark"] .message.assistant .message-surface,
[data-theme="dark"] .markdown-body pre,
[data-theme="dark"] .message-avatar,
[data-theme="dark"] .speech-player,
[data-theme="dark"] .service-menu-list {
  background:
    linear-gradient(145deg, rgba(18, 20, 24, 0.98), rgba(12, 13, 17, 0.98));
}

[data-theme="dark"] .empty-orbit-ring {
  border-color: rgba(224, 187, 128, 0.26);
}
[data-theme="dark"] .empty-logo {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.30);
}

/* Home starter cards: softer, more refined, each with slightly different low-intensity glow. */
[data-theme="dark"] .prompt-card {
  background:
    linear-gradient(145deg, rgba(17, 19, 23, 0.975), rgba(11, 12, 16, 0.985));
  border-color: rgba(247, 236, 219, 0.08);
}
[data-theme="dark"] .feature-launch-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018),
    0 16px 34px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .feature-launch-card::before,
[data-theme="dark"] .feature-launch-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
[data-theme="dark"] .feature-launch-card::after {
  width: 156px;
  height: 156px;
  right: -72px;
  top: -72px;
  background: radial-gradient(circle, rgba(198, 148, 83, 0.080) 0%, rgba(198, 148, 83, 0.040) 34%, rgba(198, 148, 83, 0.015) 56%, rgba(198, 148, 83, 0) 76%);
}
[data-theme="dark"] .feature-launch-card::before {
  width: 110px;
  height: 110px;
  left: -44px;
  bottom: -56px;
  background: radial-gradient(circle, rgba(72, 98, 155, 0.050) 0%, rgba(72, 98, 155, 0.016) 52%, rgba(72, 98, 155, 0) 76%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="debate"]::after {
  width: 148px;
  height: 148px;
  right: -66px;
  top: -58px;
  background: radial-gradient(circle, rgba(188, 201, 255, 0.050) 0%, rgba(198, 148, 83, 0.038) 34%, rgba(198, 148, 83, 0.013) 56%, rgba(198, 148, 83, 0) 76%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="role"]::after {
  width: 170px;
  height: 170px;
  right: -76px;
  top: -74px;
  background: radial-gradient(circle, rgba(198, 148, 83, 0.070) 0%, rgba(198, 148, 83, 0.030) 38%, rgba(198, 148, 83, 0.010) 60%, rgba(198, 148, 83, 0) 78%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="story"]::after {
  width: 162px;
  height: 162px;
  right: -70px;
  top: -82px;
  background: radial-gradient(circle, rgba(216, 178, 120, 0.072) 0%, rgba(198, 148, 83, 0.032) 36%, rgba(198, 148, 83, 0.010) 58%, rgba(198, 148, 83, 0) 78%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="debate"]::before {
  left: -52px;
  bottom: -60px;
  background: radial-gradient(circle, rgba(75, 104, 166, 0.042) 0%, rgba(75, 104, 166, 0.014) 56%, rgba(75, 104, 166, 0) 78%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="role"]::before {
  left: -46px;
  bottom: -62px;
  background: radial-gradient(circle, rgba(52, 73, 118, 0.030) 0%, rgba(52, 73, 118, 0.010) 58%, rgba(52, 73, 118, 0) 78%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="story"]::before {
  left: -42px;
  bottom: -58px;
  background: radial-gradient(circle, rgba(92, 112, 158, 0.036) 0%, rgba(92, 112, 158, 0.012) 56%, rgba(92, 112, 158, 0) 78%);
}

/* Scrollbars: softer and more integrated with the new dark palette. */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .chat-scroll,
[data-theme="dark"] .studio-content,
[data-theme="dark"] .rooms-list,
[data-theme="dark"] .custom-persona-list,
[data-theme="dark"] .login-overlay {
  scrollbar-color: rgba(118, 105, 90, 0.22) transparent;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] .studio-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .rooms-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .custom-persona-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .login-overlay::-webkit-scrollbar-thumb {
  background: rgba(118, 105, 90, 0.22);
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-scroll::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .studio-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .rooms-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .custom-persona-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .login-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 124, 104, 0.30);
}

@media (max-width: 620px) {
  [data-theme="dark"] .studio {
    background:
      radial-gradient(circle at 74% 0%, rgba(198, 148, 83, 0.045), transparent 26%),
      linear-gradient(180deg, rgba(8, 9, 12, 0.995), rgba(9, 10, 13, 0.998));
  }
}

/* === VESPER REFERENCE MATCH — 2026-08-22 ===
 * Visual-only override matched to the approved reference screenshot.
 * Do not alter layout, component geometry, or behavior.
 */
[data-theme="dark"] {
  --bg: #0f0f10;
  --bg-deep: #0f0f10;
  --surface: rgba(21, 22, 24, 0.96);
  --surface-solid: #151618;
  --surface-soft: #1a1a1c;
  --surface-strong: #202124;
  --sidebar: #0d0e10;
  --studio: #0d0e10;
  --text: #f2f0ec;
  --text-soft: #aaa59e;
  --text-faint: #77736e;
  --border: rgba(224, 221, 215, 0.10);
  --border-strong: rgba(224, 221, 215, 0.17);
  --accent: #b79a6c;
  --accent-strong: #d1b78f;
  --accent-soft: rgba(183, 154, 108, 0.11);
  --accent-wash: rgba(183, 154, 108, 0.055);
}

/* Center workspace: intentionally flat. The reference does NOT have a colored ambient wash here. */
[data-theme="dark"] .app-shell {
  background: #0f0f10;
}
[data-theme="dark"] .workspace {
  background: #0f0f10;
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .composer-area,
[data-theme="dark"] .workspace-business-footer {
  background: rgba(15, 15, 16, 0.96);
  border-color: rgba(224, 221, 215, 0.08);
  box-shadow: none;
}

/* Side rails are graphite, not orange. */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .studio {
  background: linear-gradient(180deg, #0d0e10 0%, #0f1012 52%, #0d0e10 100%);
  border-color: rgba(224, 221, 215, 0.08);
}

/* Left account surface: cool smoked silver with a restrained brown edge. */
[data-theme="dark"] .account-card {
  background:
    radial-gradient(circle at 96% 10%, rgba(151, 132, 104, 0.10), transparent 30%),
    linear-gradient(145deg, #17191c 0%, #131416 58%, #181613 100%);
  border-color: rgba(224, 221, 215, 0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.018), 0 12px 30px rgba(0,0,0,.18);
}
[data-theme="dark"] .sync-note,
[data-theme="dark"] .account-stats > div,
[data-theme="dark"] .room-icon {
  background: linear-gradient(145deg, #18191b, #121315);
  border-color: rgba(224, 221, 215, 0.085);
}

/* Match reference CTA: dark silver-brown, not orange. */
[data-theme="dark"] .primary-action,
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav),
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav):hover,
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav).active {
  color: #f4f1ec;
  background: linear-gradient(180deg, #43382c 0%, #393026 50%, #302920 100%);
  border-color: rgba(205, 191, 171, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 9px 22px rgba(0,0,0,.22);
}
[data-theme="dark"] .primary-action:hover,
[data-theme="dark"] .feature-nav-item:is(.purchase-nav, .home-nav):hover {
  background: linear-gradient(180deg, #4a3e30 0%, #3f3529 52%, #342c23 100%);
}

[data-theme="dark"] .room-item.active {
  color: var(--text);
  background: linear-gradient(100deg, #191817 0%, #171718 68%, #1d1a16 100%);
  border-color: rgba(183,154,108,.24);
  box-shadow: none;
}
[data-theme="dark"] .feature-nav-item.active {
  color: var(--text);
  background: linear-gradient(100deg, #17181a, #141517);
  border-color: rgba(224,221,215,.09);
  box-shadow: none;
}
[data-theme="dark"] .room-item:hover,
[data-theme="dark"] .feature-nav-item:hover {
  background: #17181a;
  border-color: rgba(224,221,215,.10);
}

/* Top chips: smoked metal. */
[data-theme="dark"] .status-chip,
[data-theme="dark"] .mini-icon-button,
[data-theme="dark"] .icon-button {
  background: linear-gradient(145deg, #18191b, #111214);
  border-color: rgba(224,221,215,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}
[data-theme="dark"] .status-chip-dot,
[data-theme="dark"] .preview-dot,
[data-theme="dark"] .empty-orbit-ring::before {
  background: #c5a777;
  box-shadow: 0 0 0 5px rgba(183,154,108,.12);
}
[data-theme="dark"] .brand-copy span,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .credit-chip,
[data-theme="dark"] .text-button,
[data-theme="dark"] .prompt-card-note {
  color: #c6aa7f;
}

/* Main starter cards: intentionally different, visible blooms like the reference. */
[data-theme="dark"] .prompt-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(224,221,215,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 15px 32px rgba(0,0,0,.19);
}



/* Remove the old orange pseudo-glow; the card backgrounds above are the intended glow. */
[data-theme="dark"] .feature-launch-card::before,
[data-theme="dark"] .feature-launch-card::after {
  display: none !important;
}
[data-theme="dark"] .prompt-card:hover {
  border-color: rgba(200,190,174,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 38px rgba(0,0,0,.24);
}
[data-theme="dark"] .prompt-card-note {
  background: rgba(117,99,73,.11);
  border-color: rgba(183,154,108,.20);
}

/* Studio surfaces: same reference hierarchy — first card warm silver-brown, others smoked silver. */
[data-theme="dark"] .panel-card {
  background: linear-gradient(145deg, #161719 0%, #121315 100%);
  border-color: rgba(224,221,215,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015), 0 12px 28px rgba(0,0,0,.15);
}
[data-theme="dark"] .panel-card.accent {
  background:
    radial-gradient(ellipse at 76% 0%, rgba(105,82,57,.26) 0%, rgba(66,55,44,.16) 35%, transparent 68%),
    linear-gradient(145deg, #1b1917 0%, #171615 56%, #141517 100%);
  border-color: rgba(183,154,108,.22);
}
[data-theme="dark"] .panel-card.accent .metric {
  background: linear-gradient(145deg, #18191a, #121315);
  border-color: rgba(224,221,215,.085);
}
[data-theme="dark"] .metric,
[data-theme="dark"] .quick-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(111,113,121,.075), transparent 34%),
    linear-gradient(145deg, #17181a 0%, #121315 100%);
  border-color: rgba(224,221,215,.085);
}
[data-theme="dark"] .quick-grid .quick-card:nth-child(2),
[data-theme="dark"] .quick-grid .quick-card:nth-child(4) {
  background:
    radial-gradient(circle at 92% 4%, rgba(91,83,105,.085), transparent 35%),
    linear-gradient(145deg, #17181a 0%, #121315 100%);
}
[data-theme="dark"] .quick-card:hover {
  background: linear-gradient(145deg, #1b1c1f, #141517);
  border-color: rgba(200,190,174,.14);
}

/* Composer should look metallic-dark, not orange. */
[data-theme="dark"] .composer-shell {
  background: linear-gradient(110deg, #17181a, #121315);
  border-color: rgba(224,221,215,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 12px 30px rgba(0,0,0,.17);
}
[data-theme="dark"] .composer-shell:focus-within {
  border-color: rgba(183,154,108,.30);
  box-shadow: 0 0 0 1px rgba(183,154,108,.04), 0 14px 32px rgba(0,0,0,.20);
}
[data-theme="dark"] .send-button {
  color: #f4f1ec;
  background: linear-gradient(145deg, #5a4b3b 0%, #493e33 58%, #3a342d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.24);
}

/* Preserve readable cards/dialogs while removing incidental orange cast. */
[data-theme="dark"] .message.user .message-surface {
  background: linear-gradient(145deg, #1c1d20, #161719);
  border-color: rgba(224,221,215,.085);
}
[data-theme="dark"] .message-avatar,
[data-theme="dark"] .message-action,
[data-theme="dark"] .message-action.icon-action {
  background: linear-gradient(145deg, #18191b, #121315);
  border-color: rgba(224,221,215,.08);
}

/* Low-profile scrollbars matched to the reference. */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .chat-scroll,
[data-theme="dark"] .studio-content,
[data-theme="dark"] .rooms-list,
[data-theme="dark"] .custom-persona-list,
[data-theme="dark"] .login-overlay {
  scrollbar-color: rgba(111,112,116,.22) transparent;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] .studio-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .rooms-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .custom-persona-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .login-overlay::-webkit-scrollbar-thumb {
  background: rgba(111,112,116,.22);
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-scroll::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .studio-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .rooms-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .custom-persona-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .login-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(130,131,136,.30);
}

@media (max-width: 620px) {
  [data-theme="dark"] .studio {
    background: linear-gradient(180deg, #0d0e10 0%, #0f1012 100%);
  }
}

/* === VESPER FINAL MICRO TUNE — 2026-08-22 ===
 * Scope locked by user:
 * 1) Keep the three home starter cards EXACTLY unchanged.
 * 2) Slightly strengthen silver-brown gradients on photographed menu/card surfaces.
 * 3) Keep the center conversation canvas flat; restore assistant open-response to truly transparent.
 * No layout, behavior, or component-position changes.
 */

/* Center conversation canvas: absolutely no decorative gradient. */
[data-theme="dark"] .workspace,
[data-theme="dark"] .chat-scroll,
[data-theme="dark"] .chat-content,
[data-theme="dark"] .messages {
  background: #0f0f10;
}

/* Restore the intended open-response assistant hierarchy.
 * A later dark-reskin rule had reintroduced a faint card fill, which made a rectangular patch visible.
 */
[data-theme="dark"] .message.assistant,
[data-theme="dark"] .message.assistant .message-main,
[data-theme="dark"] .message.assistant .markdown-body,
[data-theme="dark"] .message.assistant .message-surface,
[data-theme="dark"] .message.assistant.streaming .message-surface {
  background: transparent !important;
  box-shadow: none !important;
}
[data-theme="dark"] .message.assistant .message-surface,
[data-theme="dark"] .message.assistant.streaming .message-surface {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Left account/menu surfaces: same silver-brown family, just one notch more visible. */
[data-theme="dark"] .account-card {
  background:
    radial-gradient(circle at 96% 10%, rgba(158, 139, 110, 0.16), transparent 34%),
    radial-gradient(circle at 5% 100%, rgba(105, 108, 118, 0.055), transparent 30%),
    linear-gradient(145deg, #191b1e 0%, #141517 56%, #1b1814 100%);
  border-color: rgba(224, 221, 215, 0.105);
}
[data-theme="dark"] .sync-note {
  background:
    radial-gradient(circle at 92% 8%, rgba(147, 130, 105, 0.085), transparent 32%),
    linear-gradient(145deg, #191a1c, #131416);
}
[data-theme="dark"] .account-stats > div {
  background:
    radial-gradient(circle at 100% 0%, rgba(151, 136, 113, 0.075), transparent 30%),
    linear-gradient(145deg, #191a1c, #131416);
}

/* Right Vesper Studio: strengthen only the panel/menu material, not geometry. */
[data-theme="dark"] .studio .panel-card {
  background:
    radial-gradient(ellipse at 86% 0%, rgba(126, 122, 120, 0.11) 0%, rgba(79, 77, 78, 0.045) 40%, transparent 70%),
    linear-gradient(145deg, #17181a 0%, #121315 100%);
  border-color: rgba(224, 221, 215, 0.10);
}
[data-theme="dark"] .studio .panel-card.accent {
  background:
    radial-gradient(ellipse at 78% 0%, rgba(119, 95, 68, 0.34) 0%, rgba(76, 63, 50, 0.21) 36%, rgba(47, 42, 37, 0.09) 56%, transparent 72%),
    radial-gradient(circle at 2% 100%, rgba(91, 94, 106, 0.06), transparent 34%),
    linear-gradient(145deg, #1d1b18 0%, #181716 55%, #141517 100%);
  border-color: rgba(183, 154, 108, 0.25);
}
[data-theme="dark"] .studio .panel-card.accent .metric {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 119, 108, 0.09), transparent 31%),
    linear-gradient(145deg, #191a1c, #121315);
}
[data-theme="dark"] .studio .quick-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(120, 121, 127, 0.11), transparent 36%),
    linear-gradient(145deg, #18191b 0%, #121315 100%);
  border-color: rgba(224, 221, 215, 0.095);
}
[data-theme="dark"] .studio .quick-grid .quick-card:nth-child(2),
[data-theme="dark"] .studio .quick-grid .quick-card:nth-child(4) {
  background:
    radial-gradient(circle at 92% 4%, rgba(99, 91, 116, 0.12), transparent 37%),
    linear-gradient(145deg, #18191b 0%, #121315 100%);
}

/* Credit Studio surfaces: same reference color, slightly more pronounced material depth. */
[data-theme="dark"] .credit-hero {
  background:
    radial-gradient(ellipse at 92% 8%, rgba(126, 102, 76, 0.24) 0%, rgba(76, 65, 54, 0.14) 38%, transparent 68%),
    radial-gradient(circle at 4% 100%, rgba(93, 97, 109, 0.065), transparent 34%),
    linear-gradient(140deg, #1a1a1b 0%, #181717 52%, #211b16 100%);
  border: 1px solid rgba(224, 221, 215, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.24);
}
[data-theme="dark"] .credit-split > div {
  background:
    radial-gradient(circle at 100% 0%, rgba(170, 165, 157, 0.07), transparent 36%),
    linear-gradient(145deg, rgba(40, 40, 43, 0.92), rgba(28, 28, 31, 0.94));
}
[data-theme="dark"] .purchase-card {
  background:
    radial-gradient(circle at 92% 5%, rgba(140, 122, 96, 0.14), transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(88, 92, 104, 0.055), transparent 32%),
    linear-gradient(145deg, #191a1c 0%, #131416 100%);
  border-color: rgba(224, 221, 215, 0.10);
}
[data-theme="dark"] .credit-product-option {
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 116, 102, 0.095), transparent 36%),
    linear-gradient(145deg, #191917 0%, #141413 100%);
  border-color: rgba(224, 221, 215, 0.09);
}
[data-theme="dark"] .credit-product-option.recommended {
  background:
    radial-gradient(circle at 100% 0%, rgba(144, 119, 88, 0.17), transparent 38%),
    linear-gradient(145deg, #1d1b18 0%, #171614 100%);
  border-color: rgba(183, 154, 108, 0.22);
}

/* === VESPER FINAL CENTER AMBIENT RESTORE — 2026-08-22 ===
 * Final user-approved direction:
 * - Keep starter cards and side menu gradients as-is.
 * - Keep assistant open-response fully transparent.
 * - Restore the prettier, subtle center ambient gradient behind chat.
 */
[data-theme="dark"] .app-shell {
  background:
    radial-gradient(circle at 16% 7%, rgba(86, 102, 145, 0.10), transparent 29%),
    radial-gradient(circle at 76% 22%, rgba(178, 158, 128, 0.060), transparent 24%),
    radial-gradient(circle at 84% 72%, rgba(121, 106, 153, 0.048), transparent 24%),
    linear-gradient(180deg, #0b0c0f 0%, #0d0e11 44%, #0d0e10 100%);
}
[data-theme="dark"] .workspace,
[data-theme="dark"] .chat-scroll,
[data-theme="dark"] .chat-content,
[data-theme="dark"] .messages {
  background:
    radial-gradient(circle at 48% -18%, rgba(88, 104, 147, 0.085), transparent 30%),
    radial-gradient(circle at 73% 46%, rgba(177, 157, 129, 0.050), transparent 23%),
    radial-gradient(circle at 90% 78%, rgba(118, 103, 151, 0.036), transparent 25%),
    linear-gradient(180deg, rgba(12, 13, 16, 0.992), rgba(14, 15, 17, 0.996));
}
[data-theme="dark"] .workspace-business-footer {
  background:
    radial-gradient(circle at 100% 0%, rgba(176, 156, 126, 0.028), transparent 24%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.90), rgba(12, 13, 15, 0.97));
}

/* Preserve true open-response assistant surfaces on top of the restored ambient background. */
[data-theme="dark"] .message.assistant,
[data-theme="dark"] .message.assistant .message-main,
[data-theme="dark"] .message.assistant .markdown-body,
[data-theme="dark"] .message.assistant .message-surface,
[data-theme="dark"] .message.assistant.streaming .message-surface {
  background: transparent !important;
  box-shadow: none !important;
}
[data-theme="dark"] .message.assistant .message-surface,
[data-theme="dark"] .message.assistant.streaming .message-surface {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* === VESPER MICRO TUNE — INPUT CONTRAST + SEND BUTTON SIZE (2026-08-22) ===
   User-approved scope only:
   - Slightly brighten dark-mode composer so it separates from the chat area.
   - Slightly reduce send button size.
   - Keep all other layout/functionality intact.
*/
[data-theme="dark"] .composer-shell {
  background:
    radial-gradient(circle at 85% 18%, rgba(183, 163, 131, 0.070), transparent 36%),
    linear-gradient(145deg, rgba(26, 28, 33, 0.985), rgba(18, 20, 24, 0.988));
  border-color: rgba(230, 224, 214, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.028),
    0 12px 28px rgba(0,0,0,0.22);
}
[data-theme="dark"] .composer-shell:focus-within {
  border-color: rgba(187, 159, 114, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.032),
    0 0 0 1px rgba(187, 159, 114, 0.04),
    0 14px 32px rgba(0,0,0,0.24);
}
[data-theme="dark"] .send-button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 16px;
}

@media (max-width: 768px) {
  [data-theme="dark"] .send-button {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 18px;
  }
}

/* === VESPER CENTER CANVAS SEAM FIX — 2026-08-22 ===
   Remove visible vertical seams between the centered chat column and its side margins.
   Paint the ambient gradient once on the outer scroll/canvas only; keep nested content transparent.
*/
[data-theme="dark"] .workspace {
  background:
    radial-gradient(circle at 48% -18%, rgba(88, 104, 147, 0.085), transparent 30%),
    radial-gradient(circle at 73% 46%, rgba(177, 157, 129, 0.050), transparent 23%),
    radial-gradient(circle at 90% 78%, rgba(118, 103, 151, 0.036), transparent 25%),
    linear-gradient(180deg, rgba(12, 13, 16, 0.992), rgba(14, 15, 17, 0.996));
}
[data-theme="dark"] .chat-scroll,
[data-theme="dark"] .chat-content,
[data-theme="dark"] .messages {
  background: transparent !important;
}

/* Keep assistant open-response fully transparent over the single continuous canvas. */
[data-theme="dark"] .message.assistant,
[data-theme="dark"] .message.assistant .message-main,
[data-theme="dark"] .message.assistant .markdown-body,
[data-theme="dark"] .message.assistant .message-surface,
[data-theme="dark"] .message.assistant.streaming .message-surface {
  background: transparent !important;
  box-shadow: none !important;
}
[data-theme="dark"] .message.assistant .message-surface,
[data-theme="dark"] .message.assistant.streaming .message-surface {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* === VESPER LOCK-IN POLISH — GUEST NOTICE + STUDIO ACCORDION (2026-08-22) ===
 * Scope:
 * - Keep one guest-expired notice above the composer; remove duplicate center copy.
 * - Reduce VESPER STUDIO overview density with native accessible accordions.
 * - No chat, auth, credit, persona, debate, mobile composer, or backend behavior changes.
 */
.overview-accordion {
  padding: 0;
  overflow: hidden;
}
.overview-accordion-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.overview-accordion-summary::-webkit-details-marker {
  display: none;
}
.overview-accordion-summary::marker {
  content: "";
}
.overview-accordion-summary .panel-label {
  margin: 0;
}
.overview-accordion-summary-meta {
  min-width: 0;
  max-width: 118px;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-accordion-chevron {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform .16s ease, color .16s ease;
}
.overview-accordion[open] > .overview-accordion-summary .overview-accordion-chevron {
  transform: rotate(0deg);
  color: var(--text-soft);
}
.overview-accordion[open] > .overview-accordion-summary {
  padding-bottom: 10px;
}
.overview-accordion-body {
  padding: 0 15px 15px;
}
.overview-accordion-body > h3:first-child {
  margin-top: 0;
}
.overview-accordion-summary:hover .panel-label,
.overview-accordion-summary:hover .overview-accordion-summary-meta {
  color: var(--text);
}

/* === VESPER LIVE WEB SEARCH PROGRESS + STREAM FOLLOW HARDENING — 2026-08-22 ===
 * Search status is shown only when the backend emits a real Tavily progress event.
 * It sits immediately above the existing "머리 굴리는 중" indicator and disappears
 * on the first generated answer token. No fake provider/source animation.
 */
.web-search-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0 0 10px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.35;
}
.web-search-progress.hidden { display: none !important; }
.web-search-progress-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
}
.web-search-pulse {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
  border-radius: 50%;
  opacity: .88;
}
.web-search-pulse::before,
.web-search-pulse::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.web-search-pulse::before {
  width: 5px;
  height: 5px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 34%, transparent);
}
.web-search-pulse::after {
  inset: -3px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  animation: vesper-search-pulse 1.45s ease-out infinite;
}
.web-search-progress-label {
  color: var(--text-soft);
  font-weight: 650;
}
.web-search-progress-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.web-search-progress-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .35;
  animation: vesper-search-dot 1.05s infinite ease-in-out;
}
.web-search-progress-dots i:nth-child(2) { animation-delay: .14s; }
.web-search-progress-dots i:nth-child(3) { animation-delay: .28s; }
.web-search-progress-sources {
  max-width: min(100%, 680px);
  padding-left: 22px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.web-search-progress[data-phase="complete"] .web-search-pulse::after {
  animation-duration: 2s;
  opacity: .55;
}
.web-search-progress[data-phase="failed"] .web-search-pulse {
  opacity: .55;
}
@keyframes vesper-search-pulse {
  0% { transform: scale(.72); opacity: .55; }
  70%, 100% { transform: scale(1.38); opacity: 0; }
}
@keyframes vesper-search-dot {
  0%, 65%, 100% { transform: translateY(0); opacity: .28; }
  32% { transform: translateY(-2px); opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
  .web-search-pulse::after,
  .web-search-progress-dots i { animation: none !important; }
}
@media (max-width: 620px) {
  .web-search-progress { margin-bottom: 8px; font-size: 11px; }
  .web-search-progress-sources { padding-left: 21px; font-size: 10px; }
}


/* === VESPER LIGHT STARTER CARD SAGE BLOOMS — 2026-08-22 ===
 * Scope locked: light mode home starter cards only.
 * Three fixed, intentionally different warm-sage bloom distributions.
 * Dark mode is excluded by selector and remains untouched.
 */
:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card {
  border-color: rgba(104, 121, 99, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 13px 28px rgba(87, 104, 82, 0.065);
}







:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card[data-home-feature="debate"]::after {
  width: 138px;
  height: 138px;
  right: -60px;
  top: -72px;
  background: radial-gradient(circle, rgba(126, 149, 114, 0.095) 0%, rgba(126, 149, 114, 0.040) 42%, transparent 72%);
}
:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card[data-home-feature="role"]::after {
  width: 170px;
  height: 170px;
  right: -68px;
  top: -92px;
  background: radial-gradient(circle, rgba(139, 162, 126, 0.115) 0%, rgba(139, 162, 126, 0.045) 42%, transparent 74%);
}
:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card[data-home-feature="story"]::after {
  width: 154px;
  height: 154px;
  right: -92px;
  top: -24px;
  background: radial-gradient(circle, rgba(119, 145, 108, 0.100) 0%, rgba(119, 145, 108, 0.038) 44%, transparent 74%);
}

:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card:hover {
  border-color: rgba(91, 112, 89, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 17px 34px rgba(77, 96, 74, 0.095);
}


/* === VESPER LIGHT GLOBAL AMBIENT SURFACES — 2026-08-22 ===
 * Extend the warm-sage ambient treatment beyond the home starter cards.
 * Scope: light mode only. Goal: reduce pure-white glare inside feature pages
 * while preserving layout, readability, and dark-mode styling.
 */
:root:not([data-theme="dark"]) .panel-card,
:root:not([data-theme="dark"]) .quick-card,
:root:not([data-theme="dark"]) .persona-card,
:root:not([data-theme="dark"]) .debate-preview-card,
:root:not([data-theme="dark"]) .voltage-center,
:root:not([data-theme="dark"]) .voltage-level-button,
:root:not([data-theme="dark"]) .small-secondary,
:root:not([data-theme="dark"]) .helper-box,
:root:not([data-theme="dark"]) .commerce-state,
:root:not([data-theme="dark"]) .text-input,
:root:not([data-theme="dark"]) .text-area,
:root:not([data-theme="dark"]) .select-input,
:root:not([data-theme="dark"]) .swap-button,
:root:not([data-theme="dark"]) .scope-switch,
:root:not([data-theme="dark"]) .persona-emoji,
:root:not([data-theme="dark"]) .account-stats > div,
:root:not([data-theme="dark"]) .sync-note,
:root:not([data-theme="dark"]) .room-icon,
:root:not([data-theme="dark"]) .ledger-icon,
:root:not([data-theme="dark"]) .custom-persona-card,
:root:not([data-theme="dark"]) .service-menu-list {
  background:
    radial-gradient(ellipse at 86% 4%, rgba(139, 160, 126, 0.100) 0%, rgba(139, 160, 126, 0.050) 34%, transparent 70%),
    radial-gradient(circle at 0% 100%, rgba(206, 204, 173, 0.050) 0%, transparent 34%),
    linear-gradient(145deg, #fbfcf9 0%, #f7faf4 58%, #f2f6ee 100%);
}

:root:not([data-theme="dark"]) .panel-card,
:root:not([data-theme="dark"]) .quick-card,
:root:not([data-theme="dark"]) .persona-card,
:root:not([data-theme="dark"]) .debate-preview-card,
:root:not([data-theme="dark"]) .purchase-card,
:root:not([data-theme="dark"]) .custom-persona-card {
  border-color: rgba(104, 121, 99, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 12px 26px rgba(87, 104, 82, 0.060);
}

:root:not([data-theme="dark"]) .panel-card.accent,
:root:not([data-theme="dark"]) .purchase-card,
:root:not([data-theme="dark"]) .commerce-state {
  background:
    radial-gradient(ellipse at 82% 0%, rgba(142, 164, 129, 0.135) 0%, rgba(142, 164, 129, 0.065) 35%, transparent 72%),
    radial-gradient(circle at 0% 100%, rgba(209, 202, 166, 0.060) 0%, transparent 35%),
    linear-gradient(145deg, #f9fbf6 0%, #f3f7ef 56%, #edf2e7 100%);
}

:root:not([data-theme="dark"]) .quick-grid .quick-card:nth-child(2),
:root:not([data-theme="dark"]) .quick-grid .quick-card:nth-child(4),
:root:not([data-theme="dark"]) .persona-list .persona-card:nth-child(even) {
  background:
    radial-gradient(ellipse at 14% 0%, rgba(145, 167, 131, 0.090) 0%, rgba(145, 167, 131, 0.042) 32%, transparent 68%),
    radial-gradient(circle at 100% 100%, rgba(209, 202, 166, 0.045) 0%, transparent 33%),
    linear-gradient(145deg, #fafcf8 0%, #f6f9f3 58%, #f1f5ec 100%);
}

:root:not([data-theme="dark"]) .text-input,
:root:not([data-theme="dark"]) .text-area,
:root:not([data-theme="dark"]) .select-input,
:root:not([data-theme="dark"]) .small-secondary,
:root:not([data-theme="dark"]) .swap-button,
:root:not([data-theme="dark"]) .scope-switch,
:root:not([data-theme="dark"]) .voltage-level-button {
  border-color: rgba(104, 121, 99, 0.16);
}

:root:not([data-theme="dark"]) .scope-switch button.active {
  background:
    radial-gradient(circle at 88% 8%, rgba(138, 159, 124, 0.100) 0%, rgba(138, 159, 124, 0.040) 40%, transparent 72%),
    linear-gradient(145deg, #fbfcf9 0%, #f6f9f3 100%);
  box-shadow: 0 4px 12px rgba(87, 104, 82, 0.070);
}

:root:not([data-theme="dark"]) .panel-card:hover,
:root:not([data-theme="dark"]) .quick-card:hover,
:root:not([data-theme="dark"]) .persona-card:hover,
:root:not([data-theme="dark"]) .small-secondary:hover,
:root:not([data-theme="dark"]) .swap-button:hover {
  border-color: rgba(91, 112, 89, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 15px 32px rgba(77, 96, 74, 0.085);
}

/* === VESPER LIGHT CREDIT HERO SAGE FIX — 2026-08-22 ===
 * Scope locked: light-mode credit hero / commerce notice only.
 * Replaces the legacy dark-brown hero surface with the approved warm-sage language.
 * Dark mode is explicitly excluded and remains untouched.
 */
:root:not([data-theme="dark"]) .credit-hero {
  color: var(--text);
  border: 1px solid rgba(104, 121, 99, 0.16);
  background:
    radial-gradient(ellipse at 92% 8%, rgba(139, 160, 126, 0.185) 0%, rgba(150, 170, 137, 0.090) 34%, transparent 69%),
    radial-gradient(circle at 2% 100%, rgba(209, 202, 166, 0.075) 0%, transparent 38%),
    linear-gradient(145deg, #f9fbf6 0%, #f2f6ed 55%, #e9efe3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 15px 32px rgba(77, 96, 74, 0.085);
}

:root:not([data-theme="dark"]) .credit-hero .panel-label {
  color: #74806d;
}

:root:not([data-theme="dark"]) .credit-hero .credit-balance strong {
  color: #273128;
}

:root:not([data-theme="dark"]) .credit-hero .credit-balance span {
  color: #687265;
}

:root:not([data-theme="dark"]) .credit-hero .credit-split > div {
  border: 1px solid rgba(104, 121, 99, 0.12);
  background:
    radial-gradient(circle at 90% 6%, rgba(139, 160, 126, 0.090), transparent 60%),
    rgba(250, 252, 248, 0.72);
}

:root:not([data-theme="dark"]) .credit-hero .credit-split span {
  color: #81897d;
}

:root:not([data-theme="dark"]) .credit-hero .credit-split strong {
  color: #30392f;
}

:root:not([data-theme="dark"]) .guest-credit-hero p {
  color: #626c60;
}

:root:not([data-theme="dark"]) .commerce-notice {
  border: 1px solid rgba(104, 121, 99, 0.13);
  background:
    radial-gradient(ellipse at 88% 0%, rgba(142, 164, 129, 0.105) 0%, rgba(142, 164, 129, 0.045) 38%, transparent 72%),
    linear-gradient(145deg, #fbfcf9 0%, #f4f7f0 100%);
}

/* === VESPER LIGHT DEBATE ORDER ACTIVE CONTRAST — 2026-08-22 ===
 * Scope locked: light-mode debate first-speaker switch only.
 * Make the selected choice as unmistakable as dark mode while keeping
 * the approved warm-sage palette. Dark mode remains untouched.
 */
:root:not([data-theme="dark"]) #debate-order.scope-switch,
:root:not([data-theme="dark"]) #debate-speech-register.scope-switch {
  background:
    linear-gradient(145deg, rgba(246,248,241,.96), rgba(237,241,231,.98));
  border-color: rgba(104, 121, 99, 0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

:root:not([data-theme="dark"]) #debate-order.scope-switch button,
:root:not([data-theme="dark"]) #debate-speech-register.scope-switch button {
  color: #687064;
  background: rgba(255,255,255,.26);
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

:root:not([data-theme="dark"]) #debate-order.scope-switch button:hover:not(.active),
:root:not([data-theme="dark"]) #debate-speech-register.scope-switch button:hover:not(.active) {
  color: #414a3e;
  background: rgba(226,233,219,.60);
  border-color: rgba(108, 128, 96, .16);
}

:root:not([data-theme="dark"]) #debate-order.scope-switch button.active,
:root:not([data-theme="dark"]) #debate-speech-register.scope-switch button.active {
  color: #263021;
  background:
    radial-gradient(circle at 82% 8%, rgba(255,255,255,.30) 0%, transparent 42%),
    linear-gradient(135deg, #dbe3d0 0%, #b3c1a3 55%, #99aa88 100%);
  border-color: rgba(104, 126, 88, 0.52);
  box-shadow:
    0 5px 14px rgba(82, 103, 73, 0.18),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* === VESPER MOBILE COMPOSER MICRO LIFT — 2026-08-22 ===
 * Scope: phone composer position only.
 * Add 6px of bottom breathing room so the rounded composer sits slightly
 * higher in iPhone Safari/PWA, while preserving VisualViewport anchoring.
 */
@media (max-width: 620px) {
  .composer-area {
    padding-bottom: 12px;
  }
}

/* === VESPER DEBATE 2.0 — SPECIALIST LOUNGE + SHARED EVIDENCE === */
.debate-panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.debate-panel-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.debate-panel-tabs button:hover { color: var(--text); }
.debate-panel-tabs button.active {
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: 0 4px 12px rgba(45, 59, 48, .08);
}

.debate-character-lounge { gap: 10px; }
.debate-character-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.debate-character-card {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background:
    radial-gradient(circle at 92% 0%, var(--accent-wash), transparent 36%),
    var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.debate-character-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.debate-character-card.is-selected { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.debate-character-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.debate-character-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 20px;
}
.debate-character-title { min-width: 0; flex: 1; }
.debate-character-title > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.debate-character-title strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.debate-character-title > div span {
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .04em;
}
.debate-character-title small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 9px; line-height: 1.35; }
.debate-character-card > p { margin: 10px 0 11px; color: var(--text-soft); font-size: 10px; line-height: 1.55; }
.debate-character-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.debate-character-actions button {
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
  font-size: 8px;
  font-weight: 850;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.debate-character-actions button:hover { color: var(--text); border-color: var(--border-strong); }
.debate-character-actions button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}
.debate-character-developer-note { opacity: .92; }
.debate-search-rule-card { position: relative; overflow: hidden; }
.debate-search-rule-card::after {
  content: "🌐";
  position: absolute;
  right: 12px;
  top: 9px;
  opacity: .16;
  font-size: 27px;
}
.debate-specialist-preview .debate-preview-card { min-height: 78px; }

.debate-evidence-panel {
  flex: 0 0 auto;
  margin: 9px 18px 0;
  display: grid;
  gap: 7px;
  z-index: 9;
}
.debate-evidence-progress,
.debate-evidence-ledger {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0%, var(--accent-wash), transparent 34%),
    color-mix(in srgb, var(--surface-solid) 94%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.debate-evidence-progress {
  min-height: 48px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.debate-evidence-pulse {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 50%;
}
.debate-evidence-pulse::before,
.debate-evidence-pulse::after,
.debate-evidence-pulse i {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.debate-evidence-pulse::after {
  inset: -1px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  animation: debate-evidence-ring 1.35s ease-out infinite;
}
@keyframes debate-evidence-ring {
  0% { transform: scale(.68); opacity: .75; }
  100% { transform: scale(1.45); opacity: 0; }
}
.debate-evidence-progress-copy { min-width: 0; flex: 1; }
.debate-evidence-progress-copy strong { display: block; font-size: 10px; }
.debate-evidence-progress-copy span { display: block; margin-top: 3px; overflow: hidden; color: var(--text-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.debate-evidence-progress-dots { display: inline-flex; align-items: center; gap: 3px; }
.debate-evidence-progress-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .28;
  animation: vesper-search-dot 1.1s ease-in-out infinite;
}
.debate-evidence-progress-dots i:nth-child(2) { animation-delay: .13s; }
.debate-evidence-progress-dots i:nth-child(3) { animation-delay: .26s; }
.debate-evidence-ledger { overflow: hidden; }
.debate-evidence-ledger > summary {
  min-height: 48px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.debate-evidence-ledger > summary::-webkit-details-marker { display: none; }
.debate-evidence-ledger > summary::marker { content: ""; }
.debate-evidence-summary-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
}
.debate-evidence-summary-copy { min-width: 0; }
.debate-evidence-summary-copy strong { display: block; font-size: 10px; }
.debate-evidence-summary-copy small { display: block; margin-top: 3px; overflow: hidden; color: var(--text-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.debate-evidence-chevron { color: var(--text-faint); font-size: 14px; transform: rotate(-90deg); transition: transform .16s ease; }
.debate-evidence-ledger[open] .debate-evidence-chevron { transform: rotate(0deg); }
.debate-evidence-ledger-body { padding: 0 12px 12px; display: grid; gap: 8px; }
.debate-evidence-batch { padding-top: 9px; border-top: 1px solid var(--border); }
.debate-evidence-batch-head { display: flex; align-items: baseline; gap: 7px; min-width: 0; margin-bottom: 7px; }
.debate-evidence-batch-head span { flex: 0 0 auto; color: var(--accent-strong); font-size: 7px; font-weight: 900; }
.debate-evidence-batch-head strong { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.debate-evidence-sources { display: grid; gap: 5px; }
.debate-evidence-source {
  width: 100%;
  min-height: 39px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.debate-evidence-source:hover { border-color: var(--border-strong); background: var(--surface-soft); }
.debate-evidence-source-main { min-width: 0; flex: 1; }
.debate-evidence-source-main strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.debate-evidence-source-main small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 7px; }
.debate-evidence-source-main em { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--text-soft); font-size: 7px; font-style: normal; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.debate-evidence-source-arrow { color: var(--accent-strong); font-size: 12px; }

.debate-control-panel {
  flex: 0 0 auto;
  margin: 8px 18px 0;
  padding: 10px 11px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
  box-shadow: var(--shadow-sm);
  z-index: 8;
}
.debate-cycle-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.debate-cycle-copy { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.debate-cycle-copy strong { font-size: 10px; }
.debate-cycle-copy span { color: var(--text-faint); font-size: 8px; }
.debate-search-budget {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 7px;
  font-weight: 850;
}
.debate-intervention-scroll {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.debate-intervention-scroll button {
  min-height: 31px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
  font-size: 8px;
  font-weight: 850;
  scroll-snap-align: start;
}
.debate-intervention-scroll button:hover,
.debate-intervention-scroll button.active { color: var(--text); border-color: var(--border-strong); background: var(--accent-soft); }
.debate-intervention-scroll button.search-cost { color: #176444; border-color: rgba(33, 128, 85, .26); background: rgba(45, 155, 105, .08); }
.debate-cost-note { margin: 7px 1px 0; color: var(--text-faint); font-size: 7px; line-height: 1.45; }
.debate-cost-note b { color: var(--text-soft); }

.debate-format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.debate-format-option {
  min-height: 72px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text-soft);
  background: var(--surface-soft);
  cursor: pointer;
  text-align: left;
}
.debate-format-option strong { display: block; color: var(--text); font-size: 11px; }
.debate-format-option span { display: block; margin-top: 5px; font-size: 8px; line-height: 1.45; }
.debate-format-option.active { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.debate-stance-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 9px; margin: 0 0 12px; }
.debate-stance-field { padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.debate-stance-field label { display: block; margin-bottom: 7px; color: var(--text-soft); font-size: 8px; font-weight: 850; }
.debate-confidence-row { display: flex; align-items: center; gap: 8px; }
.debate-confidence-row input { min-width: 0; flex: 1; accent-color: var(--accent); }
.debate-confidence-row output { min-width: 32px; color: var(--accent-strong); font-size: 9px; font-weight: 900; text-align: right; }

[data-theme="dark"] .debate-panel-tabs,
[data-theme="dark"] .debate-character-card,
[data-theme="dark"] .debate-evidence-progress,
[data-theme="dark"] .debate-evidence-ledger,
[data-theme="dark"] .debate-control-panel {
  border-color: rgba(224, 221, 215, .09);
  background:
    radial-gradient(circle at 88% 0%, rgba(183, 154, 108, .075), transparent 35%),
    linear-gradient(145deg, #17181a, #121315);
}
[data-theme="dark"] .debate-panel-tabs button.active,
[data-theme="dark"] .debate-character-avatar,
[data-theme="dark"] .debate-character-actions button,
[data-theme="dark"] .debate-evidence-summary-icon,
[data-theme="dark"] .debate-evidence-source {
  background: linear-gradient(145deg, #18191b, #111214);
  border-color: rgba(224, 221, 215, .09);
}
[data-theme="dark"] .debate-panel-tabs button:not(.active):not([aria-selected="true"]) {
  color: #aaa397;
  background: rgba(12, 13, 15, .28);
  border: 1px solid transparent;
}
[data-theme="dark"] .debate-panel-tabs button:hover:not(.active):not([aria-selected="true"]) {
  color: #ded8ce;
  background: #1d1e20;
  border-color: rgba(224, 221, 215, .11);
}
[data-theme="dark"] .debate-panel-tabs button.active,
[data-theme="dark"] .debate-panel-tabs button[aria-selected="true"] {
  color: #17130f;
  background: linear-gradient(135deg, #d6c3a4, #b8996b);
  border: 1px solid rgba(238, 219, 190, .72);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}
[data-theme="dark"] .debate-character-actions button.active {
  background: linear-gradient(180deg, #4a3e30, #342c23);
  border-color: rgba(205, 191, 171, .18);
}

@media (max-width: 620px) {
  .debate-panel-tabs { margin-bottom: 10px; }
  .debate-panel-tabs button { min-height: 38px; font-size: 11px; }
  .debate-character-card { padding: 14px; }
  .debate-character-title strong { font-size: 13px; }
  .debate-character-title small,
  .debate-character-card > p { font-size: 10px; }
  .debate-character-actions button { min-height: 36px; font-size: 9px; }
  .debate-evidence-panel { margin: 8px 12px 0; gap: 6px; }
  .debate-evidence-progress,
  .debate-evidence-ledger > summary { min-height: 50px; }
  .debate-evidence-progress-copy strong,
  .debate-evidence-summary-copy strong { font-size: 11px; }
  .debate-evidence-progress-copy span,
  .debate-evidence-summary-copy small { font-size: 9px; }
  .debate-evidence-source { min-height: 42px; }
  .debate-evidence-source-main strong { font-size: 10px; }
  .debate-evidence-source-main small { font-size: 8px; }
  .debate-evidence-source-main em { font-size: 8px; }
  .debate-control-panel { margin: 7px 12px 0; padding: 9px 10px 8px; }
  .debate-cycle-copy { display: grid; gap: 2px; }
  .debate-cycle-copy strong { font-size: 11px; }
  .debate-cycle-copy span { font-size: 9px; }
  .debate-search-budget { font-size: 8px; }
  .debate-intervention-scroll button { min-height: 36px; font-size: 9px; }
  .debate-cost-note { font-size: 8px; }
  .debate-format-grid,
  .debate-stance-grid { grid-template-columns: 1fr; }
  .debate-format-option { min-height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .debate-evidence-pulse::after,
  .debate-evidence-progress-dots i { animation: none !important; }
}

/* Persona / Voltage scope switches — improve active/inactive contrast in both themes. */
[data-theme="dark"] #persona-scope-switch.scope-switch,
[data-theme="dark"] #voltage-scope-switch.scope-switch {
  background: #0c0b0a;
  border-color: rgba(255, 225, 190, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.015);
}
[data-theme="dark"] #persona-scope-switch.scope-switch button,
[data-theme="dark"] #voltage-scope-switch.scope-switch button {
  color: #8f877d;
  background: #11100e;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
[data-theme="dark"] #persona-scope-switch.scope-switch button:hover:not(.active),
[data-theme="dark"] #voltage-scope-switch.scope-switch button:hover:not(.active) {
  color: #ddd4ca;
  background: #1b1916;
  border-color: rgba(255,225,190,.10);
}
[data-theme="dark"] #persona-scope-switch.scope-switch button.active,
[data-theme="dark"] #voltage-scope-switch.scope-switch button.active {
  color: #211307;
  background: linear-gradient(135deg, #f0c88e 0%, #d7b173 100%);
  border-color: rgba(248, 214, 162, 0.88);
  box-shadow: 0 6px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.22);
}

:root:not([data-theme="dark"]) #persona-scope-switch.scope-switch,
:root:not([data-theme="dark"]) #voltage-scope-switch.scope-switch {
  background: linear-gradient(145deg, rgba(246,248,241,.96), rgba(237,241,231,.98));
  border-color: rgba(104, 121, 99, 0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
:root:not([data-theme="dark"]) #persona-scope-switch.scope-switch button,
:root:not([data-theme="dark"]) #voltage-scope-switch.scope-switch button {
  color: #687064;
  background: rgba(255,255,255,.26);
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
:root:not([data-theme="dark"]) #persona-scope-switch.scope-switch button:hover:not(.active),
:root:not([data-theme="dark"]) #voltage-scope-switch.scope-switch button:hover:not(.active) {
  color: #414a3e;
  background: rgba(226,233,219,.60);
  border-color: rgba(108, 128, 96, .16);
}
:root:not([data-theme="dark"]) #persona-scope-switch.scope-switch button.active,
:root:not([data-theme="dark"]) #voltage-scope-switch.scope-switch button.active {
  color: #263021;
  background: radial-gradient(circle at 82% 8%, rgba(255,255,255,.30) 0%, transparent 42%), linear-gradient(135deg, #dbe3d0 0%, #b3c1a3 55%, #99aa88 100%);
  border-color: rgba(104, 126, 88, 0.52);
  box-shadow: 0 5px 14px rgba(82, 103, 73, 0.18), inset 0 1px 0 rgba(255,255,255,.44);
}

/* === VESPER PREMIUM MOTION 01–03 — 2026-08-24 ===
 * Presentation only: starter Core breathing, staggered starter cards and
 * a visible Core Voltage sweep. No navigation, room, credit or API behavior.
 */
.empty-orbit {
  isolation: isolate;
}
.empty-orbit::before,
.empty-orbit::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -13px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 13%, transparent);
  pointer-events: none;
  will-change: transform, opacity;
  animation: vesper-core-breath-ring 4.2s cubic-bezier(.2,.64,.34,1) infinite;
}
.empty-orbit::after {
  animation-delay: 2.1s;
}
.empty-orbit-ring {
  z-index: 1;
  animation-duration: 16s;
  will-change: transform;
}
.empty-orbit-ring::before {
  box-shadow:
    0 0 0 5px var(--accent-wash),
    -5px 5px 11px color-mix(in srgb, var(--accent) 28%, transparent);
  will-change: transform, opacity, box-shadow;
  animation: vesper-orbit-signal 5.3s linear infinite;
}
.empty-logo {
  position: relative;
  z-index: 2;
  will-change: transform;
  animation: vesper-core-breathe 4.2s ease-in-out infinite;
}

.empty-state.starter-motion-pending .prompt-card {
  opacity: 0;
  transform: translate3d(0,22px,0) scale(.985);
}
.empty-state.starter-motion-active .prompt-card {
  animation: vesper-starter-card-enter .90s linear backwards;
  animation-delay: var(--starter-delay, .08s);
}
.prompt-card:active {
  transform: translateY(0) scale(.985);
  transition-duration: .08s;
}

.voltage-dial {
  isolation: isolate;
}
.voltage-gauge { z-index: 1; }
.voltage-needle { z-index: 2; }
.voltage-center { z-index: 3; }
.voltage-dial-transitioning::before,
.voltage-dial-transitioning::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 45px 28px 2px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: vesper-voltage-ripple .72s ease-out both;
}
.voltage-dial-transitioning::after { animation-delay: .09s; }
.voltage-dial-transitioning .voltage-needle {
  transition: none;
  animation: vesper-voltage-needle-sweep .64s cubic-bezier(.18,1.32,.34,1) both;
}
.voltage-dial-transitioning .voltage-progress {
  transition: none;
  animation: vesper-voltage-arc-sweep .54s cubic-bezier(.2,.78,.28,1) both;
}
.voltage-dial-transitioning .voltage-center {
  animation: vesper-voltage-center-settle .48s cubic-bezier(.2,.84,.28,1) both;
}
.voltage-dial-transitioning + .voltage-levels .voltage-level-button.active {
  animation: vesper-voltage-button-settle .42s cubic-bezier(.2,.8,.25,1) both;
}

@keyframes vesper-core-breath-ring {
  0% { transform: scale(.78); opacity: 0; }
  18% { opacity: .48; }
  72%, 100% { transform: scale(1.28); opacity: 0; }
}
@keyframes vesper-core-breathe {
  0%, 100% { transform: scale(.98); }
  50% { transform: scale(1.035); }
}
@keyframes vesper-orbit-signal {
  0%, 7%, 13%, 27%, 41%, 56%, 72%, 86%, 100% {
    transform: scale(.88);
    opacity: .64;
    box-shadow:
      0 0 0 4px var(--accent-wash),
      0 0 9px color-mix(in srgb, var(--accent) 34%, transparent);
  }
  8%, 10%, 29%, 33%, 58%, 62%, 88%, 92% {
    transform: scale(1.24);
    opacity: 1;
    box-shadow:
      0 0 0 6px var(--accent-wash),
      0 0 18px color-mix(in srgb, var(--accent) 82%, transparent),
      0 0 34px color-mix(in srgb, var(--accent) 48%, transparent);
  }
  16%, 18%, 43%, 44%, 75%, 77% {
    transform: scale(1.06);
    opacity: .9;
    box-shadow:
      0 0 0 5px var(--accent-wash),
      0 0 14px color-mix(in srgb, var(--accent) 62%, transparent);
  }
}
@keyframes vesper-starter-card-enter {
  0% {
    transform: translate3d(0,22px,0) scale(.985);
    opacity: 0;
    animation-timing-function: cubic-bezier(.42,0,.18,1);
  }
  54% {
    transform: translate3d(0,-4.5px,0) scale(1.003);
    opacity: 1;
    animation-timing-function: cubic-bezier(.40,0,.22,1);
  }
  81% {
    transform: translate3d(0,.7px,0) scale(.999);
    opacity: 1;
    animation-timing-function: cubic-bezier(.25,0,.35,1);
  }
  100% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}
@keyframes vesper-voltage-ripple {
  0% { transform: scale(.82); opacity: .42; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes vesper-voltage-needle-sweep {
  from { transform: rotate(var(--needle-from-angle)); }
  to { transform: rotate(var(--needle-angle)); }
}
@keyframes vesper-voltage-arc-sweep {
  from { stroke-dasharray: var(--voltage-from-fill) 100; }
  to { stroke-dasharray: var(--voltage-fill) 100; }
}
@keyframes vesper-voltage-center-settle {
  0% { transform: scale(.965); opacity: .72; }
  72% { transform: scale(1.012); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes vesper-voltage-button-settle {
  0% { transform: scale(.92); }
  70% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-boot-stage,
  .auth-boot-emblem,
  .auth-boot-ring,
  .auth-boot-signal,
  .app-shell.auth-boot-revealing .sidebar,
  .app-shell.auth-boot-revealing .workspace,
  .app-shell.auth-boot-revealing .studio,
  .empty-orbit::before,
  .empty-orbit::after,
  .empty-orbit-ring,
  .empty-orbit-ring::before,
  .empty-logo,
  .empty-state.starter-motion-pending .prompt-card,
  .empty-state.starter-motion-active .prompt-card,
  .voltage-dial-transitioning::before,
  .voltage-dial-transitioning::after,
  .voltage-dial-transitioning .voltage-needle,
  .voltage-dial-transitioning .voltage-progress,
  .voltage-dial-transitioning .voltage-center,
  .voltage-dial-transitioning + .voltage-levels .voltage-level-button.active {
    animation: none !important;
    transition: none !important;
  }
  .empty-state.starter-motion-pending .prompt-card {
    opacity: 1;
    transform: none;
  }
}

/* === VESPER ANSWER CODE BLOCK COPY (2026-09-03) ===
 * Completed assistant code fences get their own exact-content copy control.
 * The light surface is a restrained neutral gray; dark mode keeps equivalent
 * contrast without producing a bright panel inside the dark conversation.
 */
.markdown-body .code-block-shell {
  position: relative;
  margin: 13px 0;
  min-width: 0;
}

.markdown-body .code-block-shell pre {
  margin: 0;
  padding: 42px 14px 15px;
  border-color: #c6c9c7;
  background: #dfe1df;
  color: #24282a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}

.markdown-body .code-block-shell pre code {
  color: inherit;
  background: transparent;
}

.code-copy-button {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  min-width: 58px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(79, 84, 82, .25);
  border-radius: 8px;
  color: #404543;
  background: rgba(244, 245, 243, .82);
  box-shadow: 0 1px 3px rgba(28, 31, 30, .08);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

.code-copy-button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.code-copy-button:hover {
  color: #202422;
  background: rgba(252, 252, 250, .94);
  border-color: rgba(66, 71, 69, .38);
}

.code-copy-button:active { transform: scale(.97); }
.code-copy-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.code-copy-button:disabled { cursor: wait; opacity: 1; }
.code-copy-button[data-copy-state="success"] { color: #276346; }
.code-copy-button[data-copy-state="error"] { color: #9a3d35; }

[data-theme="dark"] .markdown-body .code-block-shell pre {
  border-color: rgba(216, 220, 222, .18);
  background: #292b2e;
  color: #ececea;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

[data-theme="dark"] .code-copy-button {
  border-color: rgba(226, 228, 229, .20);
  color: #d8dadb;
  background: rgba(65, 68, 72, .92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .code-copy-button:hover {
  color: #ffffff;
  background: rgba(78, 81, 85, .98);
  border-color: rgba(236, 238, 239, .34);
}
[data-theme="dark"] .code-copy-button[data-copy-state="success"] { color: #a8dfbd; }
[data-theme="dark"] .code-copy-button[data-copy-state="error"] { color: #f1aea7; }

@media (max-width: 720px) {
  .code-copy-button {
    min-width: 64px;
    height: 32px;
    font-size: 11px;
  }
  .markdown-body .code-block-shell pre { padding-top: 46px; }
}

/* === VESPER MODE + VOICE SELECTED-STATE CONTRAST — 2026-09-03 ===
 * Give light debate tabs and both voice-engine themes an unmistakable selected
 * state. The approved dark debate-tab treatment above remains unchanged.
 */
:root:not([data-theme="dark"]) .debate-panel-tabs button:not(.active):not([aria-selected="true"]) {
  color: #687064;
  background: rgba(255, 255, 255, .26);
  border: 1px solid transparent;
  box-shadow: none;
}

:root:not([data-theme="dark"]) .debate-panel-tabs button:hover:not(.active):not([aria-selected="true"]) {
  color: #414a3e;
  background: rgba(226, 233, 219, .60);
  border-color: rgba(108, 128, 96, .16);
}

:root:not([data-theme="dark"]) .debate-panel-tabs button.active,
:root:not([data-theme="dark"]) .debate-panel-tabs button[aria-selected="true"] {
  color: #263021;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 255, 255, .30) 0%, transparent 42%),
    linear-gradient(135deg, #dbe3d0 0%, #b3c1a3 55%, #99aa88 100%);
  border: 1px solid rgba(104, 126, 88, .52);
  box-shadow:
    0 5px 14px rgba(82, 103, 73, .18),
    inset 0 1px 0 rgba(255, 255, 255, .44);
}

:root:not([data-theme="dark"]) .speech-engine-switch.scope-switch {
  background: linear-gradient(145deg, rgba(246, 248, 241, .96), rgba(237, 241, 231, .98));
  border-color: rgba(104, 121, 99, .20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

:root:not([data-theme="dark"]) .speech-engine-switch.scope-switch button:not(.active):not([aria-checked="true"]) {
  color: #687064;
  background: rgba(255, 255, 255, .26);
  border: 1px solid transparent;
  box-shadow: none;
}

:root:not([data-theme="dark"]) .speech-engine-switch.scope-switch button:hover:not(.active):not([aria-checked="true"]):not(:disabled) {
  color: #414a3e;
  background: rgba(226, 233, 219, .60);
  border-color: rgba(108, 128, 96, .16);
}

:root:not([data-theme="dark"]) .speech-engine-switch.scope-switch button.active,
:root:not([data-theme="dark"]) .speech-engine-switch.scope-switch button[aria-checked="true"] {
  color: #263021;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 255, 255, .30) 0%, transparent 42%),
    linear-gradient(135deg, #dbe3d0 0%, #b3c1a3 55%, #99aa88 100%);
  border: 1px solid rgba(104, 126, 88, .52);
  box-shadow:
    0 5px 14px rgba(82, 103, 73, .18),
    inset 0 1px 0 rgba(255, 255, 255, .44);
}

[data-theme="dark"] .speech-engine-switch.scope-switch {
  border-color: rgba(224, 221, 215, .09);
  background:
    radial-gradient(circle at 88% 0%, rgba(183, 154, 108, .075), transparent 35%),
    linear-gradient(145deg, #17181a, #121315);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}

[data-theme="dark"] .speech-engine-switch.scope-switch button:not(.active):not([aria-checked="true"]) {
  color: #aaa397;
  background: rgba(12, 13, 15, .28);
  border: 1px solid transparent;
  box-shadow: none;
}

[data-theme="dark"] .speech-engine-switch.scope-switch button:hover:not(.active):not([aria-checked="true"]):not(:disabled) {
  color: #ded8ce;
  background: #1d1e20;
  border-color: rgba(224, 221, 215, .11);
}

[data-theme="dark"] .speech-engine-switch.scope-switch button.active,
[data-theme="dark"] .speech-engine-switch.scope-switch button[aria-checked="true"] {
  color: #17130f;
  background: linear-gradient(135deg, #d6c3a4, #b8996b);
  border: 1px solid rgba(238, 219, 190, .72);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}
/* === END VESPER MODE + VOICE SELECTED-STATE CONTRAST === */

/* === VOICE SETTINGS · XAI SPEED-ONLY === */
.speech-pricing-note { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.65; }

.voice-help-guide { display: grid; gap: 10px; }
.voice-help-guide section {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.voice-help-guide section > span { color: var(--accent-strong); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.voice-help-guide h3 { margin: 0; font-size: 13px; }
.voice-help-guide p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.7; }

[data-theme="dark"] .voice-help-guide section { background: rgba(255, 255, 255, .025); }
/* === END VOICE SETTINGS === */

/* R87: compact desktop Studio controls, not phone/tablet sheets.
 * Preserve rail/player geometry and every mobile rule. Give controls their
 * own space instead of shrinking Korean labels inside shared flex rows. */
@media (min-width: 921px) {
  #studio :is(.panel-card, .setting-copy, .helper-box, .debate-panel-tabs, .credit-hero) {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  #studio .panel-card:has(.debate-select-grid) { padding: 12px; }
  #studio .debate-select-grid {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 4px;
  }
  #studio .debate-select-grid .swap-button {
    width: 28px;
    min-width: 28px;
    height: 36px;
    margin-bottom: 5px;
    padding: 0;
    border-radius: 9px;
    font-size: 16px;
  }
  #studio .debate-side .select-input {
    /* Preserve native select/keyboard behavior, with a smaller chevron so
     * Safari's native indicator doesn't consume the name width. */
    -webkit-appearance: none;
    appearance: none;
    padding: 0 15px 0 5px;
    font-size: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%2383877b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 8px 5px;
  }
  #studio .debate-panel-tabs button:last-child { grid-column: 1 / -1; }
  #studio .debate-format-grid { grid-template-columns: minmax(0, 1fr); }
  #studio .debate-format-option span { line-height: 1.55; }
  #studio .debate-preview { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 5px; }
  #studio .debate-preview > b { font-size: 12px; text-align: center; }

  #studio .setting-row:has(> .scope-switch) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  #studio .setting-row > .scope-switch {
    width: 100% !important; /* Overrides the existing inline 150px width. */
    min-width: 0;
  }
  #studio .scope-switch button { white-space: nowrap; }
  #studio :is(.small-primary, .small-secondary, .danger-button) {
    flex-shrink: 0;
    white-space: nowrap;
  }
  #studio :is(.custom-persona-toolbar, .credit-catalog-header) { flex-wrap: wrap; }

  #studio :is(#credits-orders-section, #credits-ledger-section) .custom-persona-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 8px;
  }
  #studio :is(#credits-orders-section, #credits-ledger-section) .custom-persona-toolbar > div { display: contents; }
  #studio :is(#credits-orders-section, #credits-ledger-section) .custom-persona-toolbar .panel-label { grid-column: 1; grid-row: 1; }
  #studio :is(#credits-orders-section, #credits-ledger-section) .custom-persona-toolbar > button { grid-column: 2; grid-row: 1; }
  #studio :is(#credits-orders-section, #credits-ledger-section) .custom-persona-toolbar p { grid-column: 1 / -1; grid-row: 2; }
  #studio .ledger-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 7px; }
  #studio .ledger-icon { grid-column: 1; grid-row: 1 / 3; width: 26px; height: 30px; border-radius: 9px; }
  #studio .ledger-copy { display: contents; }
  #studio .ledger-copy > strong { grid-column: 2; grid-row: 1; min-width: 0; }
  #studio .ledger-copy > span { grid-column: 2 / -1; grid-row: 2; min-width: 0; margin-top: 0; }
  #studio .ledger-amount { grid-column: 3; grid-row: 1; }
  #studio :is(.ledger-amount, .order-summary) { white-space: nowrap; }
  #studio :is(.ledger-copy span, .order-copy span) { line-height: 1.5; text-wrap: balance; }
}

/* R88: desktop product footers align within each equal-height grid row.
 * Short descriptions retain whitespace; longer copy remains fully visible.
 * Phone/tablet cards and purchase behavior are unchanged. */
@media (min-width: 921px) {
  #studio .credit-product-option { display: flex; flex-direction: column; }
  #studio .credit-product-option > p { flex: 1 0 auto; }
  #studio .credit-product-option > :is(.credit-product-price, .purchase-button) { flex: 0 0 auto; }
}

/* R27 AMOLED base canvas — independent of room state and viewport size.
 * Only paint the app's background containers. Do not change shared color
 * variables, controls/cards, message surfaces, or the isolated Story Lounge.
 * !important overrides earlier transparent/gradient canvas rules and the
 * browser-surface inline color applied during theme restoration.
 */
html[data-theme="dark"],
html[data-theme="dark"] > body,
[data-theme="dark"] #app,
[data-theme="dark"] #app > .workspace,
[data-theme="dark"] #sidebar,
[data-theme="dark"] #studio,
[data-theme="dark"] #chat-scroll,
[data-theme="dark"] #app > .workspace > .topbar,
[data-theme="dark"] #app > .workspace > .composer-area,
[data-theme="dark"] #app > .workspace > .workspace-business-footer,
[data-theme="dark"] #studio > .studio-header,
[data-theme="dark"] #studio-mobile-tabs {
  background: #000000 !important;
}

/* R106: custom selections keep a stable border inside their scrolling list. */
.custom-persona-list { padding-top: 2px; padding-bottom: 2px; }
.custom-persona-card { transition: border-color .15s ease, background .15s ease; }
.custom-persona-card:hover, .custom-persona-card:active { transform: none; }

/* R113: one elevation treatment for normal, debate, Story and Role players. */
:root {
  --speech-player-shadow:0 24px 48px rgba(38,49,29,.28),0 8px 18px rgba(38,49,29,.16),inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="dark"] {
  --speech-player-shadow:0 26px 58px rgba(0,0,0,.66),0 8px 20px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08);
}
.lounge-credit-trigger {
  min-height:36px; padding:7px 12px; border:1px solid var(--border-strong); border-radius:12px;
  background:var(--surface-solid); color:var(--text); font:inherit; font-size:12px; font-weight:650; cursor:pointer;
}
.lounge-credit-trigger:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
#story-credit-peek { min-height:36px; white-space:nowrap; }
.lounge-credit-dialog {
  width:min(540px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); margin:auto; padding:0;
  border:1px solid var(--border-strong); border-radius:22px; color:var(--text); background:var(--surface-solid);
  box-shadow:0 28px 80px rgba(0,0,0,.38); overflow:hidden;
}
.lounge-credit-dialog[open] { display:flex; flex-direction:column; }
.lounge-credit-dialog::backdrop { background:rgba(0,0,0,.48); backdrop-filter:blur(5px); }
.lounge-credit-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); flex:none; }
.lounge-credit-head h2 { font-size:18px; margin:0; }
.lounge-credit-head p { font-size:12px; margin:5px 0 0; color:var(--text-soft); }
.lounge-credit-dialog button { border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); color:var(--text); cursor:pointer; min-height:40px; padding:8px 12px; font:inherit; font-size:12px; }
.lounge-credit-dialog button:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
.lounge-credit-head [data-credit-close] { font-size:25px; width:42px; padding:0; }
.lounge-credit-dialog button:disabled { opacity:.5; cursor:wait; }
.lounge-credit-body { padding:20px; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
.lounge-credit-balance { border:1px solid var(--border); background:var(--accent-wash); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.lounge-credit-balance span { font-size:12px; color:var(--text-soft); }
.lounge-credit-balance strong { font-size:30px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.lounge-credit-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:22px; }
.lounge-credit-toolbar h3 { margin:0; font-size:14px; }
.lounge-credit-status { font-size:11px; line-height:1.7; color:var(--text-soft); margin:10px 0; }
.lounge-credit-status.error { color:var(--danger); }
.lounge-credit-dialog .ledger-row { gap:9px; }
.lounge-credit-dialog .ledger-icon { width:28px; height:28px; flex:none; }
.lounge-credit-dialog .ledger-copy { min-width:0; }
.lounge-credit-dialog .ledger-copy strong { white-space:normal; overflow-wrap:anywhere; }
.lounge-credit-dialog .ledger-amount { white-space:nowrap; font-size:15px; }
@media(max-width:420px) {
  .lounge-credit-head { padding:14px 16px; }
  .lounge-credit-body { padding:16px; }
  .lounge-credit-dialog .ledger-row { grid-template-columns:24px minmax(0,1fr) auto; gap:7px; }
  .lounge-credit-dialog .ledger-amount { font-size:13px; }
}

/* R119: restore R116 closing speed while retaining R118 compositing (no fade).
 * Prepare only this panel's transform layer while open. Keep its existing
 * opening duration/easing and every sidebar/drawer rule unchanged. */
@media (max-width: 1320px) {
  .studio { transform: translate3d(104%, 0, 0); backface-visibility: hidden; }
  .studio.open { transform: translate3d(0, 0, 0); will-change: transform; }
  .studio.is-closing {
    transform: translate3d(104%, 0, 0);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
    pointer-events: none;
  }
}
@media (max-width: 620px) {
  .studio { transform: translate3d(0, 104%, 0); }
  .studio.is-closing { transform: translate3d(0, 104%, 0); }
}
/* R122: distinguish settings with a local edge shadow, without dimming or
 * blurring the page/status bar. Retain a transparent outside-click shield.
 * The non-scrolling root keeps absolute/fixed viewport bounds identical;
 * this shield must not become a fixed-edge tint source in iOS WebKit. */
#studio-backdrop {
  position: absolute;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 1320px) {
  .studio { box-shadow: -10px 0 30px rgba(28, 34, 23, .14), -2px 0 7px rgba(28, 34, 23, .07); }
  [data-theme="dark"] .studio { box-shadow: -10px 0 30px rgba(0, 0, 0, .42), -2px 0 7px rgba(0, 0, 0, .24); }
}
@media (max-width: 620px) {
  .studio { box-shadow: 0 -10px 30px rgba(28, 34, 23, .14), 0 -2px 7px rgba(28, 34, 23, .07); }
  [data-theme="dark"] .studio { box-shadow: 0 -10px 30px rgba(0, 0, 0, .42), 0 -2px 7px rgba(0, 0, 0, .24); }
}

/* R123: all page headers use Story Lounge's compact height, including the
 * same safe-area budget. The opaque live surface also gives WebKit one
 * stable top-edge color instead of sampling blurred/translucent layers. */
:root {
  --app-header-base: 68px;
  --app-header-controls: 38px;
  --app-header-safe-top: env(safe-area-inset-top, 0px);
  --app-header-height: max(var(--app-header-base), calc(var(--app-header-safe-top) + var(--app-header-controls) + 1px));
  --topbar-height: var(--app-header-height);
  --browser-surface: #f1f3eb;
}
:root[data-theme="dark"] { --browser-surface: #000000; }
@media (max-width: 720px) {
  :root { --app-header-base: 60px; --app-header-controls: 40px; }
}
@media (max-width: 620px) {
  :root { --app-header-base: 52px; }
}
@media (max-width: 620px) and (display-mode: browser) {
  :root:not(.vesper-native-shell) { --app-header-safe-top: max(0px, calc(env(safe-area-inset-top, 0px) - 12px)); }
}
html :is(.workspace > .topbar, .story-shell > .story-topbar, .role-shell > .role-header, .vs-shell > .vs-header, .is-shell > .is-header) {
  position: sticky;
  top: 0;
  height: var(--app-header-height);
  min-height: var(--app-header-height);
  max-height: var(--app-header-height);
  flex: 0 0 var(--app-header-height);
  padding-top: var(--app-header-safe-top);
  padding-bottom: 0;
}
html :is(.workspace > .topbar, .story-shell > .story-topbar, .role-shell > .role-header) {
  background: var(--browser-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 720px) {
  html .topbar .icon-button { width: 40px; height: 40px; }
  html .role-header .role-button { min-height: 40px; height: 40px; padding-top: 8px; padding-bottom: 8px; }
  /* R243: studio controls fit the same compact header and safe-area budget. */
  html .is-header > button,
  html .vs-header :is(.vs-back, .vs-help-toggle, .lounge-credit-trigger) {
    min-height: 40px;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* R124: only an explicit Safari-tab theme reload uses a plain matching cover.
 * It still hides the unauthenticated/unlaid-out shell until bootstrap finishes.
 * Normal cold launch, PWA and native-shell presentation remain unchanged. */
html[data-vesper-theme-reload="true"] .auth-boot-stage {
  height: 100dvh;
  background: var(--browser-surface);
  transition: none;
}
html[data-vesper-theme-reload="true"] .auth-boot-content { display: none; }


/* Shared dark controls: the same graphite/brown gradients as the Vesper main screen. */
[data-theme="dark"]{--vesper-dark-control:linear-gradient(145deg,#18191b,#111214);--vesper-dark-primary:linear-gradient(180deg,#43382c 0%,#393026 50%,#302920 100%);--vesper-dark-primary-hover:linear-gradient(180deg,#4a3e30 0%,#3f3529 52%,#342c23 100%);--vesper-dark-control-border:rgba(224,221,215,.17)}

/* R197: use the user's supplied gradient images unchanged for all drawer actions. */
:root {
  --drawer-action-image: url("./drawer-gradient-light-r197.png");
  --drawer-action-text: #252a20;
}
:root[data-theme="dark"] {
  --drawer-action-image: #252423;
  --drawer-action-text: #f5f2eb;
}
:root .sidebar :is(.primary-action, .feature-nav-item.home-nav, .feature-nav-item.purchase-nav),
:root .sidebar :is(.primary-action, .feature-nav-item.home-nav, .feature-nav-item.purchase-nav):hover,
:root .sidebar :is(.primary-action, .feature-nav-item.home-nav, .feature-nav-item.purchase-nav).active {
  background: var(--drawer-action-image) center / 100% 100% no-repeat;
  color: var(--drawer-action-text);
  border: 1px solid var(--border);
  box-shadow: none;
}
:root .sidebar :is(.primary-action, .feature-nav-item.home-nav, .feature-nav-item.purchase-nav)::before,
:root .sidebar :is(.primary-action, .feature-nav-item.home-nav, .feature-nav-item.purchase-nav)::after {
  content: none;
  display: none;
}
:root .sidebar .feature-nav-item:is(.home-nav, .purchase-nav) .nav-arrow {
  color: currentColor;
}
:root .sidebar .primary-action kbd {
  color: inherit;
  border-color: var(--border);
  background: transparent;
}

/* R196 light cards: exact R182 background/glow values, pinned to each feature.
 * The new Voice Studio card reuses the first R182 treatment. */
:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card {
  border-color: rgba(104, 121, 99, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 13px 28px rgba(87, 104, 82, 0.065);
}

:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card:is([data-home-feature="debate"],[data-home-feature="voice-studio"],[data-home-feature="illusion-studio"]) {
  background:
    radial-gradient(ellipse at 18% 6%, rgba(139, 158, 126, 0.155) 0%, rgba(159, 176, 146, 0.085) 34%, transparent 66%),
    radial-gradient(circle at 92% 100%, rgba(194, 199, 166, 0.075) 0%, transparent 38%),
    linear-gradient(145deg, #fafcf8 0%, #f7faf5 57%, #f2f6ef 100%);
}

:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card[data-home-feature="role"] {
  background:
    radial-gradient(ellipse at 67% -8%, rgba(145, 166, 132, 0.185) 0%, rgba(168, 184, 154, 0.095) 35%, transparent 68%),
    radial-gradient(circle at -4% 88%, rgba(203, 198, 160, 0.065) 0%, transparent 35%),
    linear-gradient(145deg, #fbfcf9 0%, #f6f9f3 55%, #f1f5ed 100%);
}

:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card[data-home-feature="story"] {
  background:
    radial-gradient(ellipse at 88% 34%, rgba(132, 154, 119, 0.165) 0%, rgba(158, 177, 145, 0.082) 37%, transparent 69%),
    radial-gradient(circle at 8% -6%, rgba(204, 207, 174, 0.075) 0%, transparent 34%),
    linear-gradient(145deg, #fafcf8 0%, #f6f9f3 58%, #f2f5ed 100%);
}

:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card:is([data-home-feature="debate"],[data-home-feature="voice-studio"],[data-home-feature="illusion-studio"])::after {
  width: 138px;
  height: 138px;
  right: -60px;
  top: -72px;
  background: radial-gradient(circle, rgba(126, 149, 114, 0.095) 0%, rgba(126, 149, 114, 0.040) 42%, transparent 72%);
}
:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card[data-home-feature="role"]::after {
  width: 170px;
  height: 170px;
  right: -68px;
  top: -92px;
  background: radial-gradient(circle, rgba(139, 162, 126, 0.115) 0%, rgba(139, 162, 126, 0.045) 42%, transparent 74%);
}
:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card[data-home-feature="story"]::after {
  width: 154px;
  height: 154px;
  right: -92px;
  top: -24px;
  background: radial-gradient(circle, rgba(119, 145, 108, 0.100) 0%, rgba(119, 145, 108, 0.038) 44%, transparent 74%);
}

:root:not([data-theme="dark"]) .prompt-grid .feature-launch-card:hover {
  border-color: rgba(91, 112, 89, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 17px 34px rgba(77, 96, 74, 0.095);
}


/* R196 dark cards: R182 glow geometry, softened warm gold with a subtle silver cast on black. */
[data-theme="dark"] .prompt-grid .feature-launch-card:is([data-home-feature="debate"],[data-home-feature="voice-studio"],[data-home-feature="illusion-studio"]) {
  background:
    linear-gradient(rgba(0,0,0,.388), rgba(0,0,0,.388)),
    radial-gradient(ellipse at 56% -5%, rgba(180,177,172,.22) 0%, rgba(127,124,119,.13) 31%, rgba(84,82,78,.055) 55%, transparent 74%),
    radial-gradient(circle at 0% 100%, rgba(84,82,78,.075), transparent 38%),
    linear-gradient(145deg, #171616 0%, #090808 62%, #000000 100%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="role"] {
  background:
    linear-gradient(rgba(0,0,0,.388), rgba(0,0,0,.388)),
    radial-gradient(ellipse at 62% 3%, rgba(180,177,172,.22) 0%, rgba(127,124,119,.13) 35%, transparent 69%),
    radial-gradient(circle at 8% 100%, rgba(84,82,78,.055), transparent 34%),
    linear-gradient(145deg, #171616 0%, #090808 58%, #000000 100%);
}
[data-theme="dark"] .prompt-grid .feature-launch-card[data-home-feature="story"] {
  background:
    linear-gradient(rgba(0,0,0,.388), rgba(0,0,0,.388)),
    radial-gradient(ellipse at 72% 1%, rgba(180,177,172,.22) 0%, rgba(127,124,119,.13) 34%, rgba(84,82,78,.055) 55%, transparent 74%),
    radial-gradient(circle at 0% 100%, rgba(84,82,78,.045), transparent 36%),
    linear-gradient(145deg, #171616 0%, #090808 56%, #000000 100%);
}

/* R196: all four desktop starters share one row in fixed DOM order. */
@media (max-width: 920px) {
  .empty-state .prompt-grid { grid-template-columns: 1fr; }
}
@media (min-width: 921px) {
  .empty-state .prompt-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* R273: balance with a direct, account-gated recharge action. */
.lounge-credit-balance{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.lounge-credit-balance>div{display:flex;flex-direction:column;gap:8px}.lounge-credit-balance [data-credit-purchase]{background:var(--accent-wash);border-color:var(--accent-strong);font-weight:700}.lounge-credit-dialog [hidden]{display:none!important}

.home-about{display:flex;align-items:center;gap:16px;text-align:left;text-decoration:none;color:var(--text);padding:12px 16px;margin:20px auto;max-width:600px;width:100%;border:1px solid var(--border);border-radius:18px;background:var(--surface-solid)}.home-about img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}.home-about span{min-width:0}.home-about strong{display:block;font-size:15px}.home-about small{display:block;font-size:12px;color:var(--text-soft);margin-top:5px;line-height:1.6}.home-about:focus-visible{outline:2px solid var(--accent-strong);outline-offset:4px}

/* R274: the guest intro replaces the greeting instead of adding another row. */
.empty-state.guest-home .home-about{margin:10px auto 0}
.empty-state.guest-home .prompt-grid{margin-top:18px}
.empty-state.chat-entry .prompt-grid{display:none}

/* R280: guest introduction uses the notice shadow; dark mode uses a gold band. */
.home-about{box-shadow:0 15px 50px #0005}
[data-theme="dark"] .home-about{border:3px solid #d8b77b;padding:10px 14px;box-shadow:none}

.debate-format-guide{margin:18px 0}.debate-format-guide>strong{display:block;font-size:14px;color:var(--text)}.debate-format-guide>p{margin:7px 0 0;line-height:1.7}

/* R298: native full-label picker with a stable, single-line selected label. */
.debate-character-select{position:relative;min-width:0}
.debate-character-select .select-input{color:transparent!important}
.debate-character-select .select-input option{color:var(--text);background:var(--surface,#fff)}
.debate-selected-label{position:absolute;inset:0 30px 0 13px;display:block;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:14px;color:var(--text)}
.message-meta>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){#studio .debate-selected-label{inset:0 15px 0 5px;font-size:13px}}