/* =========================================================================
   Eva Mobile — premium mobile shell.
   Loaded AFTER style.css. Converts the donor desktop layout (sidebar + chat)
   into a single-column mobile app: top bar (hamburger) · hero avatar · chat ·
   input bar, with all controls collected into a slide-out drawer.
   Mobile-only product (iOS/Android) — desktop layout is intentionally dropped.
   ========================================================================= */

:root {
  --m-bar-h: 56px;
  --m-accent: #7d2ae8;
  --m-accent-2: #ff4081;
  --m-accent-grad: linear-gradient(135deg, #7d2ae8 0%, #9d50ff 100%);
  --m-surface: #1b1b27; /* drawer / segmented surface (dark) */
  --m-app-bg: var(--bg-app); /* shell background behind the avatar */
  --m-chat-surface: rgba(255, 255, 255, 0.05); /* tinted chat panel (dark) */
  --m-shadow-soft: 0 8px 24px rgba(15, 15, 40, 0.12);
  --m-shadow-pop: 0 8px 22px rgba(125, 42, 232, 0.35);
  --m-gap: 14px;
  --chat-font-size: 16px; /* fixed — font-size control removed from the UI */
  --m-tap: 48px; /* min touch target (mobile standard) */
  /* Round glass icon buttons (top bar) — dark theme */
  --m-icon-btn-bg: rgba(255, 255, 255, 0.07);
  --m-icon-btn-border: rgba(255, 255, 255, 0.13);
  --m-icon-btn-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  --m-bubble-bg: rgba(255, 255, 255, 0.07); /* assistant bubble (dark) */
}

body.light-theme {
  --m-surface: #ffffff;
  --m-app-bg: #ffffff;
  --m-chat-surface: transparent; /* chat panel blends into the gradient */
  --m-shadow-soft: 0 8px 24px rgba(60, 80, 120, 0.12);
  --m-icon-btn-bg: #ffffff;
  --m-icon-btn-border: rgba(60, 80, 120, 0.12);
  --m-icon-btn-shadow: 0 6px 18px rgba(60, 80, 120, 0.16);
  --m-bubble-bg: #ffffff; /* assistant bubble — white on light */
}

/* ---- Reset the desktop centering; the shell owns the viewport ---- */
html,
body {
  height: 100%;
}
body {
  display: block;
  overflow: hidden;
  margin: 0;
}

/* ---- App shell: full-height column, phone-width frame on desktop ---- */
.app-shell {
  position: relative;
  z-index: 10;
  height: 100vh;
  height: 100dvh; /* dynamic viewport — correct on iOS Safari */
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--m-app-bg);
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.18); /* frame edge when wider than phone */
}

/* ===================== Top bar ===================== */
.top-bar {
  flex: 0 0 auto;
  height: var(--m-bar-h);
  padding: calc(env(safe-area-inset-top)) 14px 0;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sit above the visualizer ring (which now extends up into this row) so the
     menu / theme buttons stay on top and clickable. */
  position: relative;
  z-index: 6;
}

.top-icon-btn {
  width: var(--m-tap);
  height: var(--m-tap);
  border: none;
  background: transparent;
  color: var(--m-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.18s,
    transform 0.12s,
    box-shadow 0.18s,
    color 0.18s;
}
.top-spacer {
  pointer-events: none;
}

/* Top-bar icon buttons (menu · theme cycle) — premium round glass buttons,
   themed for light / dark / system. */
.menu-btn,
.theme-cycle-btn {
  background: var(--m-icon-btn-bg);
  border: 1px solid var(--m-icon-btn-border);

  color: var(--text-main);
}
.menu-btn svg,
.theme-cycle-btn svg {
  width: 23px;
  height: 23px;
  display: block;
}
.menu-btn:active,
.theme-cycle-btn:active {
  transform: scale(0.92);
  color: var(--m-accent);
  background: rgba(125, 42, 232, 0.14);
  border-color: rgba(125, 42, 232, 0.3);
}
@media (hover: hover) {
  .menu-btn:hover,
  .theme-cycle-btn:hover {
    color: var(--m-accent);
    border-color: rgba(125, 42, 232, 0.3);
    transform: translateY(-1px);
  }
}

.top-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.top-title .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.online {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

/* ===================== Hero avatar =====================
   Override the donor's mobile media query (style.css ~2832) which forces a
   full-bleed SQUARE avatar (100vw, border-radius:0). We want a large circle. */
.app-shell .avatar-wrapper {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  margin: -10px 0 -22px; /* slight overlap onto the chat panel below */
  padding: 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-shell .avatar-container,
.app-shell .avatar-img,
.app-shell #avatar-video {
  width: min(70vw, 300px);
  height: min(70vw, 300px);
  border-radius: 50%;
  margin: 0;
}
.app-shell .avatar-container {
  border: none;
  box-shadow: 0 16px 38px rgba(20, 20, 55, 0.18);
  overflow: hidden;
}
/* Визуалайзер («осциллограф по кругу» вокруг аватара во время речи).
   Донор прячет его на мобильной ширине (display:none) и жёстко фиксирует 400px,
   из-за чего кольцо либо пропадает на телефоне, либо упирается в края фрейма
   (.app-shell overflow:hidden) и обрезается. Делаем канвас адаптивным: буфер
   рисования остаётся 400×400, но CSS-размер = min(93vw,400px) — кольцо
   масштабируется CSS'ом и всегда обнимает аватар (70vw) и влезает во фрейм. */
.app-shell .visualizer-canvas {
  display: block;
  width: min(93vw, 400px);
  height: min(93vw, 400px);
}

/* ===================== Chat ===================== */
.app-shell .chat-messages {
  flex: 1 1 auto;
  background: var(--m-chat-surface);
  border-radius: 30px 30px 0 0;
  padding: 34px 16px 10px; /* top room for the overlapping avatar */
  gap: var(--m-gap);

  -webkit-mask-image: linear-gradient(to bottom, transparent 20px, #000 100px);
  mask-image: linear-gradient(to bottom, transparent 20px, #000 100px);
}
.app-shell .message {
  max-width: 99%;
}
.app-shell .msg-content {
  box-shadow: var(--m-shadow-soft);
  padding: 12px 16px;
}
/* Подсветка английских слов/фраз в ответах Евы (только цвет+вес, без тултипа).
   Переменная --english_text-chat задана в style.css: #ffc107 (тёмная) / #068fff (светлая). */
.app-shell .english_text-chat {
  color: var(--english_text-chat);
  font-weight: 600;
  cursor: pointer;
  /* subtle affordance that the phrase is tappable for a translation */
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--english_text-chat) 45%, transparent);
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.app-shell .english_text-chat.tip-active {
  background: color-mix(in srgb, var(--english_text-chat) 16%, transparent);
  border-radius: 5px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--english_text-chat) 16%, transparent);
}

/* Translation tooltip — a small dark popover shown on tapping a phrase. */
.eva-tip {
  position: fixed;
  z-index: 3000;
  max-width: min(78vw, 320px);
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #fff;
  background: #2a2a38;
  box-shadow: 0 12px 34px rgba(10, 10, 30, 0.34);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: center bottom;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.eva-tip.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.eva-tip.error {
  background: #b3261e;
}
/* Little arrow pointing at the tapped phrase (down by default, up when below). */
.eva-tip::after {
  content: "";
  position: absolute;
  left: var(--tip-arrow, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  top: 100%;
  border-top-color: #2a2a38;
}
.eva-tip.error::after {
  border-top-color: #b3261e;
}
.eva-tip.below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #2a2a38;
}
.eva-tip.below.error::after {
  border-bottom-color: #b3261e;
}
.app-shell .message.system-msg {
  opacity: 0.85;
}

/* The donor's .topseparator (absolute colored gradient) is superseded by the
   mask above — hide it so it can't scroll into view or clash with the theme. */
.app-shell .topseparator {
  display: none;
}

/* ===================== Input bar =====================
   Override donor mobile media query: it strips the form border/radius and forces
   #user-input height:65px. Also fix the classic flexbox overflow that pushed the
   send button off-screen (textarea needs min-width:0 to shrink). */
.app-shell .chat-input-container {
  flex: 0 0 auto;
  border-top: none;
  background: var(--m-chat-surface);
  padding: 6px 14px calc(12px + env(safe-area-inset-bottom));
  /* Row: input pill (grows) + standalone mic button to its right.
     Override the donor's flex-direction:column (style.css ~1281). */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.app-shell .input-form {
  flex: 1 1 auto; /* pill takes the remaining width; mic sits outside it */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 32px; /* full pill — matches the round buttons inside */
  padding: 6px;
  box-shadow: var(--m-shadow-soft);
  background: var(--m-app-bg);
  border: 1px solid var(--input-border);
}
.app-shell #user-input {
  min-width: 0; /* allow shrink so the send button stays visible */
  height: 44px !important;
  max-height: 120px !important;
  padding: 11px 12px;
}
/* Send button — inside the pill. */
.app-shell .send-btn {
  width: var(--m-tap);
  height: var(--m-tap);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--m-accent-grad);
  box-shadow: var(--m-shadow-pop);
  transition:
    transform 0.12s,
    box-shadow 0.18s,
    filter 0.18s;
}
.app-shell .send-btn:active {
  transform: scale(0.93);
}
/* Mic — standalone round button OUTSIDE the pill (push-to-talk / hold-to-talk).
   touch-action:none + user-select:none so holding it records without scrolling,
   selecting text, or focusing the field (the keyboard never pops up). */
.app-shell .mic-ptt-btn {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m-accent);
  background: var(--m-icon-btn-bg);
  border: 1.5px solid rgba(125, 42, 232, 0.35);
  box-shadow: var(--m-shadow-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: none;
  transition:
    transform 0.12s,
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s;
}
.app-shell .mic-ptt-btn:active {
  transform: scale(0.93);
}
/* While held/recording — filled accent with a soft pulse. */
.app-shell .mic-ptt-btn.recording {
  color: #fff;
  background: var(--m-accent-grad);
  border-color: transparent;
  animation: mic-ptt-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-ptt-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(125, 42, 232, 0.18);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(125, 42, 232, 0.1);
  }
}

/* Assistant chat bubble — white in light theme, soft glass in dark. */
.app-shell .gemini-msg .msg-content {
  background: var(--m-bubble-bg);
}
body.light-theme .app-shell .gemini-msg .msg-content {
  background: var(--m-bubble-bg);
  border: 1px solid rgba(60, 80, 120, 0.08);
  box-shadow: 0 6px 18px rgba(60, 80, 120, 0.1);
  color: var(--text-main);
}

/* ===================== Drawer (slide-out menu) ===================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
}
.drawer.open {
  visibility: visible;
}

.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 28, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.drawer.open .drawer-scrim {
  opacity: 1;
}

.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: var(--m-surface);
  color: var(--text-main);
  border-radius: 0 26px 26px 0;
  box-shadow: 26px 0 70px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) 14px
    calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  transform: translateX(-102%);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer.open .drawer-panel {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 12px 14px;
}
.drawer-brand-name {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #7d2ae8, #ff4081);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drawer-brand-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.drawer-close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--sidebar-item-hover);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drawer-close:active {
  transform: scale(0.92);
}

.drawer-divider {
  height: 1px;
  background: var(--input-border);
  margin: 10px 12px;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 500;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.drawer-item:active {
  background: var(--sidebar-item-hover);
}
.drawer-item svg {
  width: 22px;
  height: 22px;
  color: var(--m-accent);
  flex: 0 0 auto;
}
.drawer-item.danger svg {
  color: #ef4444; /* clear semantic red regardless of theme accent token */
}
/* Donor mobile media query hides #clear-ui-btn; it now lives in the chat menu
   sheet, so re-show it (ID + class specificity beats the donor rule). */
#clear-ui-btn.sheet-clear {
  display: flex;
}

/* ---- Preference rows (theme / language / voice / font size) ---- */
.drawer-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.drawer-pref-col {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.drawer-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-pref-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
}

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--sidebar-item-hover);
  border-radius: 14px;
}
.seg .theme-option {
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition:
    background 0.18s,
    box-shadow 0.18s;
}
.seg .theme-option.active {
  background: var(--m-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.pref-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--input-border);
  background: transparent;
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
}
.pref-pill:active {
  background: var(--sidebar-item-hover);
}
.pref-pill .voice-toggle-icon {
  width: 22px;
  height: 22px;
}

.drawer-pref .custom-slider {
  width: 100%;
}
.drawer-pref .slider-value {
  font-size: 0.9rem;
  color: var(--m-accent);
  font-weight: 600;
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .drawer-panel,
  .drawer-scrim,
  .top-icon-btn,
  .drawer-close {
    transition: none;
  }
}

/* =========================================================================
   v2 — Bottom-tab navigation shell.
   Replaces the hamburger drawer. Primary sections live in a bottom tab bar
   (Chat · Learn/WordFlow · Calendar · Profile); secondary screens (settings,
   pronunciation) and the calendar open as full-screen mobile sheets.
   ========================================================================= */
:root {
  --m-tab-h: 60px;
}

/* ---- Screen container + screens ---- */
.app-shell .screens {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  min-height: 0;
  /* overflow:visible (not hidden): the avatar sits at the very top and the
     visualizer ring extends ~30px above the avatar's edge; a hidden container
     clipped the ring's top arc at its boundary (right under the top bar).
     Inactive screens are display:none and the chat scrolls internally, so
     there is nothing to clip horizontally/vertically here anyway. The .app-shell
     frame still clips overflow at the phone edges. */
  overflow: visible;
}
.screen {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
/* Light theme: seamless white→soft-blue gradient across the whole chat screen
   (avatar · messages · input) instead of a distinct chat panel. */
body.light-theme #screen-chat {
  background: linear-gradient(0deg, #e8f1f7, #ffffff);
}
.screen.is-active {
  display: flex;
}
.screen-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 16px 18px;
  -webkit-overflow-scrolling: touch;
}

/* The chat input sits above the tab bar, which already carries the safe-area. */
.app-shell .chat-input-container {
  padding: 6px 14px 8px;
}

/* ---- Bottom tab bar ---- */
.tab-bar {
  flex: 0 0 auto;
  display: flex;
  background: var(--m-app-bg);
  border-top: 1px solid var(--input-border);
  padding: 6px 4px calc(4px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 6px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s;
}
.tab svg {
  width: 24px;
  height: 24px;
}
.tab.is-active {
  color: var(--m-accent);
}
.tab:active {
  opacity: 0.65;
}

/* ---- Profile screen ---- */
.profile-hero {
  text-align: center;
  padding: 16px 0 6px;
}
.profile-brand {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #7d2ae8, #ff4081);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.profile-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.menu-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 20px 6px 8px;
}
.menu-list {
  background: var(--m-surface);
  border: 1px solid var(--input-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--m-shadow-soft);
}
.list-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: none;
  border-bottom: 1px solid var(--input-border);
  background: transparent;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.list-item:last-child {
  border-bottom: none;
}
.list-item:active {
  background: var(--sidebar-item-hover);
}
.list-item > svg:first-child {
  width: 22px;
  height: 22px;
  color: var(--m-accent);
  flex: 0 0 auto;
}
.list-item.danger > svg:first-child {
  color: #ef4444;
}
.list-item .chev {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--input-border);
}
.pref-row:last-child {
  border-bottom: none;
}
.pref-row-col {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.pref-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pref-label {
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--text-main);
}
.pref-row .custom-slider {
  width: 100%;
}
.pref-row .slider-value {
  font-size: 0.9rem;
  color: var(--m-accent);
  font-weight: 600;
}

/* ---- Empty state (Learn / WordFlow placeholder) ---- */
.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 40px 28px;
}
.empty-state .es-icon {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(125, 42, 232, 0.1);
  font-size: 2.1rem;
}
.empty-state h2 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--text-main);
}
.empty-state p {
  margin: 0;
  max-width: 280px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.badge-soon {
  margin-top: 4px;
  background: rgba(125, 42, 232, 0.12);
  color: var(--m-accent);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---- Secondary screens open as full-screen sheets above the tab bar ---- */
.modal-overlay.active {
  z-index: 2000;
}

/* ===================== Chat menu (bottom sheet) ===================== */
.sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
}
.sheet-modal.open {
  visibility: visible;
}
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 28, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sheet-modal.open .sheet-scrim {
  opacity: 1;
}
.sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--m-surface);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.3);
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.sheet-modal.open .sheet {
  transform: translateY(0);
}
.sheet-grabber {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: var(--input-border);
  margin: 0 auto 12px;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sheet-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.sheet-x {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--sidebar-item-hover);
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet-block {
  background: var(--sidebar-item-hover);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.sheet-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sheet-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}
.sheet-fs-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--m-accent);
}
.sheet-fs {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sheet-fs-a {
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1;
}
.sheet-fs-a.sm {
  font-size: 0.85rem;
}
.sheet-fs-a.lg {
  font-size: 1.35rem;
}
.sheet-fs input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: var(--input-border);
  outline: none;
  cursor: pointer;
}
.sheet-fs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--m-accent);
  box-shadow: 0 2px 8px rgba(125, 42, 232, 0.35);
  cursor: pointer;
}
.sheet-fs input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--m-accent);
  box-shadow: 0 2px 8px rgba(125, 42, 232, 0.35);
  cursor: pointer;
}
/* Voice on/off switch (Eva speaks replies) */
.sheet-toggle {
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: var(--input-border);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}
.sheet-toggle.is-on {
  background: var(--m-accent);
}
.sheet-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.sheet-toggle.is-on .sheet-toggle-knob {
  transform: translateX(22px);
}

.sheet-clear {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 0.98rem;
  font-weight: 600;
  border-radius: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.12s,
    background 0.18s;
}
.sheet-clear svg {
  width: 20px;
  height: 20px;
}
.sheet-clear:active {
  transform: scale(0.98);
  background: rgba(239, 68, 68, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .sheet-scrim,
  .sheet {
    transition: none;
  }
}