/* platform/mobile.css — mobile layout overrides.
   Desktop renders in a fixed 420×525 frameless window; on a phone the app
   fills the viewport and window controls become CSS states set by
   capacitor-bridge.js:
     html.mobile         — always on, set at bridge install
     body.vn-landscape   — VN landscape (orientation lock does the real work)

   Chat mode uses a "Nintendo DS" split: header + avatar on the top half,
   messages + input on the bottom half. VN mode keeps the avatar fullscreen
   with the dialogue box overlaid (see the :has() exception below). */

html.mobile {
  /* Header height (safe-area handled separately) and avatar panel height.
     --mob-hdr must match the real rendered header: 42px buttons + 6px top
     + 6px bottom padding = 54px. The avatar panel is anchored right below it. */
  --mob-hdr: 54px;
  --mob-avatar: 36dvh;
  /* Stop iOS Safari from auto-inflating text in landscape / standalone. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.mobile, html.mobile body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}

/* Fill the phone screen; respect notch / home indicator */
html.mobile #scale-wrapper {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
}

html.mobile #app {
  width: 100%  !important;
  height: 100% !important;
  max-width: none  !important;
  max-height: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── TOUCH FUNDAMENTALS ─────────────────────────────────────────────────── */
html.mobile * {
  -webkit-tap-highlight-color: transparent;
}
html.mobile button {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* no double-tap zoom delay */
}
@media (hover: none) {
  html.mobile *:hover { transition: none; }
}

/* ── HEADER: top bar, evenly spaced, thumb-sized ────────────────────────── */
html.mobile #header {
  /* kill the 80px macOS traffic-light clearance; add notch clearance instead */
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px 14px;
  height: calc(var(--mob-hdr) + env(safe-area-inset-top));
  box-sizing: border-box;
  align-items: center;
  background: rgba(10, 8, 20, 0.85);
  -webkit-app-region: no-drag;
}
html.mobile #header-right {
  gap: 2px;
  justify-content: flex-end;
  flex: 1;
}
html.mobile .header-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}
html.mobile .header-btn svg {
  width: 21px;
  height: 21px;
}

/* Desktop-window concepts that don't exist on a phone.
   Mic buttons removed too: WebView speech recognition proved unreliable —
   call mode (platform/call-mode.js) provides voice via ElevenLabs Scribe. */
html.mobile #pin-btn,
html.mobile #expand-btn,
html.mobile #avatar-replay,
html.mobile #search-btn,
html.mobile #search-bar,
html.mobile #vn-landscape-btn,
html.mobile #mic-btn,
html.mobile #vn-mic-btn {
  display: none !important;
}

/* ── PRESS FEEDBACK: every tappable control reacts to touch ─────────────── */
html.mobile .header-btn,
html.mobile .upload-btn,
html.mobile #send-btn,
html.mobile #vn-send-btn,
html.mobile #mic-btn,
html.mobile #vn-mic-btn,
html.mobile .vn-ctrl-btn,
html.mobile .vn-play-btn,
html.mobile #model-toggle-btn,
html.mobile .pomo-btn,
html.mobile .notes-save-btn {
  transition: transform 0.08s ease, background-color 0.12s ease, opacity 0.12s ease;
}
/* Press feedback is COLOR ONLY — never transform: a button that shrinks
   under the finger moves its own hitbox away from edge taps, so the release
   lands outside and the tap is dropped ("have to tap everything twice"). */
html.mobile .header-btn:active,
html.mobile .upload-btn:active,
html.mobile #send-btn:active,
html.mobile #vn-send-btn:active,
html.mobile #mic-btn:active,
html.mobile #vn-mic-btn:active,
html.mobile .vn-ctrl-btn:active,
html.mobile .vn-play-btn:active,
html.mobile #model-toggle-btn:active,
html.mobile .pomo-btn:active,
html.mobile .notes-save-btn:active {
  background-color: rgba(200, 160, 255, 0.18);
}
html.mobile #memory-modal button:active,
html.mobile #keys-modal button:active,
html.mobile #tts-modal button:active,
html.mobile #audio-panel button:active {
  opacity: 0.75;
}
/* The shared renderer's "interaction polish" adds transform: scale() on :active.
   On a touch screen a shrinking button moves its own hitbox out from under the
   finger, so the release lands outside → the tap is dropped and you "press
   twice". Force press feedback to be color/opacity only on mobile. */
html.mobile button:active,
html.mobile .header-btn:active,
html.mobile #send-btn:active,
html.mobile #vn-send-btn:active,
html.mobile .vn-ctrl-btn:active,
html.mobile .vn-play-btn:active,
html.mobile .tts-btn:active,
html.mobile .dots-btn:active,
html.mobile .msg-actions button:active {
  transform: none !important;
}

/* ── DS SPLIT: avatar top, chat bottom (chat mode only) ─────────────────── */
/* The avatar panel sits between the header and the messages list instead of
   filling the whole background. object-fit: cover crops the portrait to the
   wide box (~11:9 on most phones). */
html.mobile #video-panel {
  top: calc(var(--mob-hdr) + env(safe-area-inset-top));
  height: var(--mob-avatar);
  bottom: auto;
  border-bottom: 1px solid var(--border);
}

/* Messages start below the avatar; bottom half gets an opaque backdrop so
   chat is no longer floating over the artwork. */
html.mobile #messages {
  margin-top: var(--mob-avatar);
  background: rgba(12, 10, 20, 0.97);
  padding: 14px 12px;
  gap: 12px;
}
html.mobile #input-area {
  background: rgba(12, 10, 20, 0.97);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
}

/* VN mode exception: the avatar goes back to fullscreen behind the dialogue
   box — the classic VN look ("image above the text box, filling the screen").
   (#app gets .vn-active while VN mode is on; the chat panel is display:none
   then, so the opaque chat backgrounds above don't matter here.) */
html.mobile #app.vn-active #video-panel {
  top: 0;
  height: 100% !important;
  bottom: 0;
  border-bottom: none;
}

/* ── READABILITY / TAP TARGETS ──────────────────────────────────────────── */
/* --mob-text-scale is driven by the text-size slider in settings (mobile-ux.js
   persists it and sets it on <html>). 1 = default; the slider spans ~0.85–1.4. */
html.mobile .msg {
  font-size: calc(13.5px * var(--mob-text-scale, 1));
  line-height: 1.58;
  max-width: 92%;
  padding: 10px 13px;
}
html.mobile .msg-label { font-size: 8.5px; }
html.mobile .msg-time  { font-size: 8.5px; }
/* Rich content (guides/headings) scales with the same knob */
html.mobile .msg .msg-h1 { font-size: calc(17px * var(--mob-text-scale, 1)); }
html.mobile .msg .msg-h2 { font-size: calc(15px * var(--mob-text-scale, 1)); }
html.mobile .msg .msg-h3 { font-size: calc(13.5px * var(--mob-text-scale, 1)); }

/* 16px input font also stops Android from zooming the page on focus */
html.mobile #msg-input,
html.mobile #vn-input {
  font-size: 16px !important;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}
html.mobile #input-row {
  gap: 8px;
  align-items: flex-end;
}
html.mobile #send-btn,
html.mobile #vn-send-btn,
html.mobile #mic-btn,
html.mobile #vn-mic-btn,
html.mobile .upload-btn {
  min-width: 46px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  flex-shrink: 0;
}
html.mobile #send-btn svg,
html.mobile #vn-send-btn svg,
html.mobile #mic-btn svg,
html.mobile #vn-mic-btn svg,
html.mobile .upload-btn svg {
  width: 21px;
  height: 21px;
}
html.mobile #model-bar { padding: 2px 4px; }
html.mobile #model-toggle-btn {
  min-height: 32px;
  padding: 4px 14px;
  font-size: 12px;
}

/* Search bar inside chat */
html.mobile #search-bar input {
  font-size: 16px;
  min-height: 42px;
}

/* ── VN MODE POLISH (landscape, fullscreen art) ─────────────────────────── */
html.mobile #vn-box {
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
html.mobile .vn-ctrl-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.mobile .vn-play-btn {
  min-width: 40px;
  min-height: 40px;
}
html.mobile #vn-input-row {
  padding-left: calc(8px + env(safe-area-inset-left));
  padding-right: calc(8px + env(safe-area-inset-right));
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
/* Finder shortcut is meaningless on a phone */
html.mobile #vn-folder-btn { display: none !important; }
/* Window-drag strip is inert in a WebView */
html.mobile #vn-drag-strip { display: none !important; }

/* ── VN CONTROL BAR: glassy cyborcore cluster (mobile) ──────────────────────
   Group the control buttons into one frosted pill so they read as a unit over
   the fullscreen art instead of floating loose, and give active toggles a real
   accent glow so "auto-advance / voice on" state is obvious at a glance. */
html.mobile #vn-controls {
  gap: 6px;
  padding: 5px 7px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 16, 38, 0.62), rgba(10, 8, 20, 0.7));
  border: 1px solid rgba(200, 159, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html.mobile .vn-ctrl-btn {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
html.mobile .vn-ctrl-btn svg { width: 17px; height: 17px; }
html.mobile .vn-ctrl-btn:active {
  background-color: rgba(200, 160, 255, 0.22) !important;
}
/* Active toggle (auto-advance, voice) — accent fill + outer glow */
html.mobile .vn-ctrl-btn.active {
  background: linear-gradient(180deg, rgba(200, 159, 255, 0.28), rgba(200, 159, 255, 0.14));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(200, 159, 255, 0.4), inset 0 0 6px rgba(200, 159, 255, 0.25);
}
/* Play / regenerate cluster: same frosted treatment, sit them as a neat row */
html.mobile .vn-play-btn {
  border-radius: 10px;
  background: rgba(200, 159, 255, 0.08);
  border: 1px solid rgba(200, 159, 255, 0.18);
}
html.mobile .vn-play-btn:active {
  background-color: rgba(200, 160, 255, 0.24) !important;
}

/* ── MODALS: use the whole screen, keep type readable ───────────────────── */
html.mobile #memory-modal > div {
  margin: calc(12px + env(safe-area-inset-top)) 10px 12px !important;
  max-width: none !important;
  padding: 16px !important;
}
html.mobile #memory-modal input,
html.mobile #memory-modal select,
html.mobile #memory-modal button {
  min-height: 40px;
  font-size: 14px !important;
}
html.mobile #keys-modal,
html.mobile #tts-modal {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top));
}
html.mobile #keys-modal input,
html.mobile #tts-modal input,
html.mobile #keys-modal button,
html.mobile #tts-modal button {
  min-height: 40px;
}

/* Settings / audio / pomodoro / notes panels */
html.mobile #audio-panel,
html.mobile #pomo-panel,
html.mobile #notes-panel {
  max-height: calc(100dvh - var(--mob-hdr) - env(safe-area-inset-top) - 20px);
  overflow-y: auto;
}
/* Panels were sized for the 420px desktop window — span the phone width
   instead of hugging the right edge. */
html.mobile #audio-panel,
html.mobile #pomo-panel,
html.mobile #notes-panel {
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  top: calc(var(--mob-hdr) + env(safe-area-inset-top) + 6px) !important;
}
html.mobile #audio-panel button,
html.mobile #pomo-panel button,
html.mobile #notes-panel button {
  min-height: 38px;
}
html.mobile input[type="range"] {
  min-height: 34px; /* fat slider hit area */
}

/* ── SETTINGS PANEL POLISH ───────────────────────────────────────────────── */
/* Per-channel mute buttons were 24px — make them thumb-sized */
html.mobile .audio-mute-btn {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}
html.mobile .audio-mute-all {
  min-height: 42px;
  font-size: 13px;
}
/* Theme/AI-tab option buttons: consistent size + press feel */
html.mobile #audio-panel .theme-btn {
  min-height: 42px;
  border-radius: 12px;
  font-size: 13px;
  transition: transform 0.08s ease, background-color 0.12s ease;
}
html.mobile #audio-panel .theme-btn:active { opacity: 0.75; }
html.mobile #audio-panel select,
html.mobile #audio-panel input[type="text"] {
  min-height: 42px;
  font-size: 14px;
}

/* Injected ✕ close (mobile-ux.js): a real layout row above the tabs, so it
   never floats over (and steals taps from) the SOUND tab. */
#mob-settings-close {
  display: block;
  margin-left: auto;
  margin-bottom: 4px;
  min-width: 40px;
  min-height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border, rgba(200, 160, 255, 0.2));
  border-radius: 12px;
  color: var(--text, #ede8f5);
  font-size: 16px;
  cursor: pointer;
}
#mob-settings-close:active { opacity: 0.7; }
:root[data-theme="light"] #mob-settings-close { color: #0a1628; background: rgba(60,100,160,0.08); }

/* ── SETTINGS AESTHETIC (phone-friendly, matches desktop's elevated look) ──── */
html.mobile #audio-panel {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(200,160,255,0.07), transparent 55%),
    rgba(14, 11, 26, 0.98) !important;
  border: 1px solid rgba(200,160,255,0.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
}
/* Tab bar → rounded pill segment, evenly spread */
html.mobile #audio-panel .settings-tab-bar {
  gap: 3px;
  margin: 2px 0 12px;
  padding: 3px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(200,160,255,0.1);
  border-radius: 12px;
}
html.mobile #audio-panel .settings-tab {
  flex: 1;
  min-height: 38px;
  border-radius: 9px;
  border-bottom: none !important;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
html.mobile #audio-panel .settings-tab.active {
  background: linear-gradient(180deg, rgba(200,160,255,0.24), rgba(200,160,255,0.1));
  color: var(--accent, #c89fff);
}
/* Rows: comfortable spacing + subtle separators */
html.mobile #audio-panel .theme-row {
  padding: 11px 2px;
  border-bottom: 1px solid rgba(200,160,255,0.07);
  gap: 10px;
}
html.mobile #audio-panel .audio-label { font-size: 12.5px; }

/* ── LIGHT MODE ──────────────────────────────────────────────────────────── */
/* Desktop light theme paints the WHOLE chat panel opaque, which on the DS
   layout buries the avatar. Make the panel transparent and light-tint only
   the pieces below the avatar instead. */
html.mobile[data-theme="light"] #chat-panel {
  background: transparent !important;
}
html.mobile[data-theme="light"] #messages {
  background: rgba(232, 242, 252, 0.97);
}
html.mobile[data-theme="light"] #input-area {
  background: rgba(240, 246, 253, 0.97);
}
html.mobile[data-theme="light"] #video-panel {
  border-bottom-color: rgba(60, 100, 160, 0.2);
}

/* Desktop-window affordances that linger in stylesheets */
html.mobile [style*="-webkit-app-region"],
html.mobile .drag-region {
  -webkit-app-region: no-drag !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Y2K CYBORCORE — full aesthetic layer (mobile only).
   Heavy neon/glass is gated to the dark theme via :not([data-theme="light"]);
   light mode keeps its existing calmer overrides above. All motion respects
   prefers-reduced-motion (see the guard at the very bottom).
   ════════════════════════════════════════════════════════════════════════════ */
html.mobile {
  --cy-cyan:    #6fe9ff;
  --cy-magenta: #ff7be5;
  --cy-violet:  #c89fff;
  --cy-glow:    rgba(200, 159, 255, 0.45);
  --cy-cyan-dim:    rgba(111, 233, 255, 0.16);
  --cy-magenta-dim: rgba(255, 123, 229, 0.18);
}

/* ── AMBIENT CRT SCANLINES ─────────────────────────────────────────────────
   A single fixed, non-interactive overlay of faint scanlines + a slow drift.
   Sits over the chat/avatar canvas (z 5) but BELOW the input dock, settings
   panel (z 20), header (z 99999) and modals (z 9000+) so every control stays
   crisp. Very low contrast so it reads as texture, never noise. */
html.mobile:not([data-theme="light"]) #app::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.11) 0px,
    rgba(0, 0, 0, 0.11) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.45;
  animation: cyScan 8s linear infinite;
}
@keyframes cyScan { from { background-position: 0 0; } to { background-position: 0 6px; } }

/* ── HEADER: glass bar + neon underglow hairline ───────────────────────────── */
html.mobile:not([data-theme="light"]) #header {
  background: linear-gradient(180deg, rgba(18, 12, 34, 0.9), rgba(10, 8, 20, 0.82));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--cy-violet), var(--cy-cyan), transparent) 1;
  box-shadow: 0 2px 18px rgba(120, 80, 200, 0.18);
}
html.mobile:not([data-theme="light"]) .header-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(200, 159, 255, 0.14);
  color: rgba(214, 200, 255, 0.75);
  transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
html.mobile:not([data-theme="light"]) .header-btn:active {
  color: var(--cy-violet);
  box-shadow: 0 0 14px rgba(200, 159, 255, 0.4), inset 0 0 8px rgba(200, 159, 255, 0.2);
}
html.mobile:not([data-theme="light"]) .header-btn.active {
  color: var(--cy-cyan);
  border-color: var(--cy-cyan-dim);
  box-shadow: 0 0 12px rgba(111, 233, 255, 0.35), inset 0 0 8px rgba(111, 233, 255, 0.18);
}

/* Model toggle → cyber pill with a scanning sheen on its active state */
html.mobile:not([data-theme="light"]) #model-toggle-btn {
  border-radius: 999px;
  border: 1px solid rgba(200, 159, 255, 0.22);
  background: linear-gradient(180deg, rgba(40, 26, 70, 0.6), rgba(20, 14, 36, 0.6));
  color: var(--cy-violet);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
  box-shadow: inset 0 0 10px rgba(200, 159, 255, 0.12);
}
html.mobile:not([data-theme="light"]) #model-toggle-btn:active {
  box-shadow: 0 0 14px rgba(200, 159, 255, 0.4), inset 0 0 10px rgba(200, 159, 255, 0.2);
}

/* ── CHAT LIST: depth gradient behind the bubbles ──────────────────────────── */
html.mobile:not([data-theme="light"]) #messages {
  background:
    radial-gradient(130% 70% at 50% -8%, rgba(120, 80, 200, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(12, 10, 22, 0.98), rgba(7, 6, 15, 0.99));
}

/* ── AI BUBBLE: cyan glass with a glowing left edge-bar ─────────────────────── */
html.mobile:not([data-theme="light"]) .msg.ai {
  position: relative;
  background: linear-gradient(180deg, rgba(28, 40, 66, 0.5), rgba(15, 20, 38, 0.62));
  border: 1px solid var(--cy-cyan-dim);
  border-radius: 14px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: visible;
}
html.mobile:not([data-theme="light"]) .msg.ai::before {
  content: '';
  position: absolute;
  left: -1px; top: 7px; bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cy-cyan), rgba(111, 233, 255, 0.1));
  box-shadow: 0 0 9px var(--cy-cyan);
}
html.mobile:not([data-theme="light"]) .msg.ai .msg-label {
  color: var(--cy-cyan);
  opacity: 0.85;
  text-shadow: 0 0 8px rgba(111, 233, 255, 0.5);
}

/* ── USER BUBBLE: magenta glass with a glowing right edge-bar ───────────────── */
html.mobile:not([data-theme="light"]) .msg.user {
  position: relative;
  background: linear-gradient(180deg, rgba(58, 30, 70, 0.5), rgba(34, 18, 48, 0.6));
  border: 1px solid var(--cy-magenta-dim);
  border-radius: 14px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: visible;
}
html.mobile:not([data-theme="light"]) .msg.user::before {
  content: '';
  position: absolute;
  right: -1px; top: 7px; bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cy-magenta), rgba(255, 123, 229, 0.1));
  box-shadow: 0 0 9px var(--cy-magenta);
}
html.mobile:not([data-theme="light"]) .msg.user .msg-label {
  color: var(--cy-magenta);
  opacity: 0.8;
  text-shadow: 0 0 8px rgba(255, 123, 229, 0.5);
}

/* ── DAY DIVIDER: neon rule + glowing label ────────────────────────────────── */
html.mobile:not([data-theme="light"]) .day-sep {
  color: var(--cy-violet);
  text-shadow: 0 0 10px rgba(200, 159, 255, 0.5);
  letter-spacing: 0.14em;
  font-size: 8.5px;
}
html.mobile:not([data-theme="light"]) .day-sep::before,
html.mobile:not([data-theme="light"]) .day-sep::after {
  background: linear-gradient(90deg, transparent, rgba(200, 159, 255, 0.4)) !important;
  height: 1px !important;
}
html.mobile:not([data-theme="light"]) .day-sep::after {
  background: linear-gradient(90deg, rgba(200, 159, 255, 0.4), transparent) !important;
}

/* ── TYPING DOTS: cyan glow ─────────────────────────────────────────────────── */
html.mobile:not([data-theme="light"]) .typing-dots span {
  background: var(--cy-cyan);
  box-shadow: 0 0 8px var(--cy-cyan);
}

/* ── MESSAGE ACTION CHIPS (play / regen / •••) ─────────────────────────────── */
html.mobile:not([data-theme="light"]) .tts-btn {
  border-color: rgba(111, 233, 255, 0.22);
  color: rgba(180, 235, 255, 0.7);
}
html.mobile:not([data-theme="light"]) .tts-btn.playing {
  color: var(--cy-cyan);
  border-color: var(--cy-cyan);
  box-shadow: 0 0 10px rgba(111, 233, 255, 0.35);
}

/* ── INPUT DOCK: glass + neon top hairline + glowing send ──────────────────── */
html.mobile:not([data-theme="light"]) #input-area {
  background: linear-gradient(180deg, rgba(14, 11, 26, 0.9), rgba(9, 7, 18, 0.96));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--cy-cyan), var(--cy-violet), transparent) 1;
}
html.mobile:not([data-theme="light"]) #msg-input {
  background: rgba(10, 8, 20, 0.7);
  border: 1px solid rgba(200, 159, 255, 0.2);
  border-radius: 14px;
}
html.mobile:not([data-theme="light"]) #msg-input:focus {
  border-color: var(--cy-violet);
  box-shadow: 0 0 0 2px rgba(200, 159, 255, 0.14), 0 0 18px rgba(200, 159, 255, 0.16);
}
html.mobile:not([data-theme="light"]) #send-btn {
  background: linear-gradient(145deg, var(--cy-violet), #8b6fd6);
  border: none;
  color: #0a0814;
  box-shadow: 0 0 16px rgba(200, 159, 255, 0.4);
}
html.mobile:not([data-theme="light"]) #send-btn:active {
  box-shadow: 0 0 22px rgba(200, 159, 255, 0.6);
}
html.mobile:not([data-theme="light"]) .upload-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 159, 255, 0.2);
  color: rgba(214, 200, 255, 0.8);
}

/* ── SETTINGS PANEL: push into full cyborcore ──────────────────────────────── */
html.mobile:not([data-theme="light"]) #audio-panel {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(111, 233, 255, 0.08), transparent 55%),
    radial-gradient(120% 55% at 100% 0%, rgba(255, 123, 229, 0.07), transparent 55%),
    rgba(13, 10, 24, 0.98) !important;
  border: 1px solid rgba(200, 159, 255, 0.22) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.6), 0 0 40px rgba(120, 80, 200, 0.12) !important;
}
html.mobile:not([data-theme="light"]) #audio-panel .settings-tab.active {
  background: linear-gradient(180deg, rgba(200, 159, 255, 0.3), rgba(111, 233, 255, 0.12));
  color: #fff;
  box-shadow: 0 0 12px rgba(200, 159, 255, 0.3), inset 0 0 8px rgba(200, 159, 255, 0.2);
}
html.mobile:not([data-theme="light"]) #audio-panel .audio-label {
  color: rgba(224, 214, 255, 0.9);
}
html.mobile:not([data-theme="light"]) #mob-settings-close {
  background: rgba(255, 123, 229, 0.1);
  border-color: rgba(255, 123, 229, 0.3);
  color: var(--cy-magenta);
}

/* ── MODALS: frosted cyborcore glass + gradient headers ────────────────────── */
html.mobile:not([data-theme="light"]) #memory-modal > div,
html.mobile:not([data-theme="light"]) #keys-modal > div,
html.mobile:not([data-theme="light"]) #tts-modal > div {
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(120, 80, 200, 0.14), transparent 60%),
    rgba(13, 10, 24, 0.99) !important;
  border: 1px solid rgba(200, 159, 255, 0.24) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(120, 80, 200, 0.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
html.mobile:not([data-theme="light"]) #memory-modal h2,
html.mobile:not([data-theme="light"]) #memory-modal h3,
html.mobile:not([data-theme="light"]) #keys-modal h2,
html.mobile:not([data-theme="light"]) #tts-modal h2 {
  color: var(--cy-cyan);
  text-shadow: 0 0 12px rgba(111, 233, 255, 0.4);
  letter-spacing: 0.03em;
}
html.mobile:not([data-theme="light"]) #memory-modal input,
html.mobile:not([data-theme="light"]) #memory-modal select,
html.mobile:not([data-theme="light"]) #keys-modal input,
html.mobile:not([data-theme="light"]) #tts-modal input {
  background: rgba(10, 8, 20, 0.7) !important;
  border: 1px solid rgba(200, 159, 255, 0.2) !important;
  border-radius: 10px !important;
  color: #ede8f5 !important;
}
html.mobile:not([data-theme="light"]) #memory-modal input:focus,
html.mobile:not([data-theme="light"]) #keys-modal input:focus,
html.mobile:not([data-theme="light"]) #tts-modal input:focus {
  border-color: var(--cy-violet) !important;
  box-shadow: 0 0 0 2px rgba(200, 159, 255, 0.14) !important;
  outline: none;
}

/* ── MOTION SAFETY ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.mobile #app::after { animation: none; }
}