/* ============================================
   温柔二次元主题 (Soft Anime)
   治愈系视觉小说风格：
   - 柔和的粉紫、薄荷绿、天空蓝配色
   - 与月夜共用组件尺寸、圆角和排版
   - 毛玻璃效果
   - 樱花花瓣飘落动画
   - 发光环替换唱片
   - 保持 ASMR 舒缓感
   ============================================ */

:root[data-theme="soft-anime"] {
  color-scheme: light;
  --font-body: var(--sans);
  --shadow-md: var(--shadow-medium);
  /* ========== 表面系统（浅色） ========== */
  --surface-deepest: #F5F2F7;      /* 淡紫灰 */
  --surface-deep: #FDFBFE;          /* 几乎白，带微紫调 */
  --surface-base: #FFFFFF;          /* 纯白卡片 */
  --surface-raised: #FFFFFF;        /* 卡片 */
  --surface-overlay: #FFFBFD;       /* 弹窗，微粉调 */

  /* ========== 主题色系 ========== */
  --sakura-pink: #F0C4D8;           /* 樱花粉 */
  --lavender-soft: #D9C9E8;         /* 薰衣草 */
  --mint-gentle: #C8E8DD;           /* 薄荷绿 */
  --sky-tender: #D4E4F7;            /* 天空蓝 */
  --peach-whisper: #FFE4D6;         /* 蜜桃色 */

  /* ========== 文字层次（浅色主题表面上的正文对比度满足 WCAG AA） ========== */
  --text-primary: #3D3548;          /* 深紫灰，至少约 10.5:1 */
  --text-secondary: #5E5669;        /* 至少约 6.3:1 */
  --text-muted: #716879;            /* 至少约 4.7:1 */
  --text-accent: #925879;           /* 玫瑰紫 */

  /* ========== 功能色 ========== */
  --accent-primary: #F0C4D8;
  --accent-hover: #FFD6EB;
  --accent-soft: rgba(240, 196, 216, 0.15);

  /* ========== 边界（柔和彩色） ========== */
  --border-subtle: rgba(217, 201, 232, 0.25);
  --border-medium: rgba(217, 201, 232, 0.40);
  --border-strong: rgba(169, 107, 143, 0.30);

  /* ========== 光效（彩色阴影） ========== */
  --glow-ambient: rgba(240, 196, 216, 0.40);
  --glow-focus: rgba(200, 232, 221, 0.50);
  --shadow-soft: 0 4px 20px rgba(217, 201, 232, 0.20);
  --shadow-medium: 0 8px 32px rgba(217, 201, 232, 0.30);
  --shadow-strong: 0 16px 48px rgba(169, 107, 143, 0.25);

  /* ========== 兼容原有变量 ========== */
  --bg: var(--surface-deep);
  --panel: var(--surface-base);
  --line: var(--border-subtle);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --accent: var(--sakura-pink);
  --teal: var(--mint-gentle);
  --rose: var(--text-accent);
}

/* ========== 背景与氛围 ========== */
:root[data-theme="soft-anime"] body {
  background: linear-gradient(180deg, #f4e8e3 0%, #eeddd8 38%, #e4cdc6 72%, #d8bdb5);
  color: var(--text-primary);
  font-family: var(--font-body);
}

:root[data-theme="soft-anime"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 58% at 50% 24%, rgba(255, 248, 244, 0.34), transparent 70%),
    radial-gradient(ellipse 72% 60% at 84% 74%, rgba(217, 201, 232, 0.12), transparent 65%);
  z-index: -2;
}

:root[data-theme="soft-anime"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 95% at 50% 45%, transparent 58%, rgba(61, 50, 53, 0.16) 100%);
  mix-blend-mode: normal;
  z-index: -1;
}

/* ========== 侧边栏 ========== */
[data-theme="soft-anime"] .sidebar {
  background: linear-gradient(165deg, rgba(249, 246, 251, 0.95), rgba(255, 255, 255, 0.90));
  border-right-color: var(--border-medium);
  box-shadow: 8px 0 32px rgba(217, 201, 232, 0.15);
  backdrop-filter: blur(12px);
}

[data-theme="soft-anime"] .brand-mark {
  color: var(--sakura-pink);
  text-shadow: 0 0 16px rgba(240, 196, 216, 0.5);
}

[data-theme="soft-anime"] nav a {
  color: var(--text-secondary);
}

[data-theme="soft-anime"] nav a:hover {
  background: rgba(240, 196, 216, 0.10);
  color: var(--text-primary);
}

[data-theme="soft-anime"] nav a.active {
  color: var(--text-accent);
  background: linear-gradient(110deg, rgba(240, 196, 216, 0.20), rgba(217, 201, 232, 0.08));
  border-color: var(--border-medium);
  box-shadow: inset 2px 0 var(--sakura-pink);
}

/* ========== 按钮（渐变 + 软糖质感） ========== */
[data-theme="soft-anime"] .primary {
  background: linear-gradient(125deg, #F0C4D8 0%, #D9C9E8 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  color: #3D3548;
  box-shadow: 0 2px 12px rgba(240, 196, 216, 0.30);
}

[data-theme="soft-anime"] .primary:hover:not(:disabled) {
  background-position: 100% 0;
  box-shadow: 0 8px 24px rgba(240, 196, 216, 0.45);
}

[data-theme="soft-anime"] .primary:active:not(:disabled) {
  box-shadow: 0 4px 16px rgba(240, 196, 216, 0.35);
}

/* 普通按钮 */
[data-theme="soft-anime"] button:not(.primary),
[data-theme="soft-anime"] .button {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--border-subtle);
  backdrop-filter: blur(8px);
}

[data-theme="soft-anime"] button:not(.primary):hover:not(:disabled),
[data-theme="soft-anime"] .button:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--border-medium);
  box-shadow: 0 4px 16px rgba(217, 201, 232, 0.15);
}

/* ========== 输入框 ========== */
[data-theme="soft-anime"] input,
[data-theme="soft-anime"] textarea,
[data-theme="soft-anime"] select {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  backdrop-filter: blur(8px);
}

[data-theme="soft-anime"] input:focus,
[data-theme="soft-anime"] textarea:focus,
[data-theme="soft-anime"] select:focus {
  border-color: var(--sakura-pink);
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 2px 16px rgba(240, 196, 216, 0.25);
  background: rgba(255, 255, 255, 0.9);
}

/* ========== 通话界面：发光环设计 ========== */
[data-theme="soft-anime"] .call-room {
  background:
    radial-gradient(ellipse 88% 52% at 50% 12%, rgba(255, 247, 246, 0.84), transparent 66%),
    radial-gradient(ellipse 76% 44% at 22% 82%, rgba(217, 201, 232, 0.26), transparent 64%),
    linear-gradient(165deg, #ead8df 0%, #e3d1dc 48%, #d7c8d8 100%);
  border-color: rgba(154, 94, 122, 0.22);
  box-shadow: 0 28px 72px rgba(95, 74, 91, 0.17), inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

/* 沿用月夜头像的位置与尺寸，只改变光环配色。 */
[data-theme="soft-anime"] .call-avatar {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.92),
    0 0 0 8px var(--accent-soft),
    0 8px 30px rgba(95, 74, 91, 0.18);
  transition: box-shadow 0.3s ease;
}

/* 播放时的脉冲效果 */
[data-theme="soft-anime"] .call-avatar[data-state="playing"] {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.96),
    0 0 0 8px rgba(199, 138, 156, 0.2),
    0 8px 30px rgba(95, 74, 91, 0.2);
}

/* ========== 播放状态视觉反馈 ========== */
[data-theme="soft-anime"] .voice-bars i {
  background: linear-gradient(180deg, #c78a9c, #9a82ad);
  box-shadow: 0 0 6px rgba(154, 130, 173, 0.2);
}

:root[data-theme="soft-anime"] body[data-playing="true"][data-motion="gentle"] .voice-bars i {
  animation: anime-voice-dance 2.4s ease-in-out infinite;
}

@keyframes anime-voice-dance {
  0%, 100% { transform: scaleY(1); opacity: 0.58; }
  50% { transform: scaleY(2.8); opacity: 0.9; }
}

/* Decorative particles are shown only while audio is actually playing. */
.anime-petals,
.anime-sparkles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
  contain: layout paint;
}

:root[data-theme="soft-anime"] body[data-page="call"][data-playing="true"][data-motion="gentle"] .anime-petals,
:root[data-theme="soft-anime"] body[data-page="call"][data-playing="true"][data-motion="gentle"] .anime-sparkles {
  display: block;
}

.anime-petals i {
  position: absolute;
  top: -16px;
  width: 8px;
  height: 10px;
  border-radius: 70% 0 70% 0;
  background: linear-gradient(145deg, rgba(199, 138, 156, 0.36), rgba(217, 201, 232, 0.16));
  opacity: 0;
  animation: anime-petal-fall 30s linear infinite, anime-petal-sway 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}

:root[data-theme="soft-anime"] body[data-page="call"][data-playing="true"][data-motion="gentle"] .anime-petals i,
:root[data-theme="soft-anime"] body[data-page="call"][data-playing="true"][data-motion="gentle"] .anime-sparkles i {
  animation-play-state: running;
}

@keyframes anime-petal-fall {
  0% { top: -16px; opacity: 0; }
  12% { opacity: 0.42; }
  82% { opacity: 0.24; }
  100% { top: 105%; opacity: 0; }
}

@keyframes anime-petal-sway {
  from { transform: translateX(-9px) rotate(0deg); }
  to { transform: translateX(9px) rotate(150deg); }
}

.anime-petals i:nth-child(1) { left: 10%; animation-delay: 0s, 0s; animation-duration: 31s, 7.5s; }
.anime-petals i:nth-child(2) { left: 25%; animation-delay: -9s, -2s; animation-duration: 29s, 7s; }
.anime-petals i:nth-child(3) { left: 40%; animation-delay: -4s, -1s; animation-duration: 33s, 8s; }
.anime-petals i:nth-child(4) { left: 55%; animation-delay: -17s, -3s; animation-duration: 30s, 7.2s; }
.anime-petals i:nth-child(5) { left: 70%; animation-delay: -12s, -4s; animation-duration: 34s, 8.2s; }
.anime-petals i:nth-child(6) { left: 85%; animation-delay: -23s, -2s; animation-duration: 32s, 7.8s; }
.anime-petals i:nth-child(7) { left: 15%; animation-delay: -20s, -1s; animation-duration: 35s, 7.3s; }
.anime-petals i:nth-child(8) { left: 60%; animation-delay: -6s, -5s; animation-duration: 31s, 8.1s; }

.anime-sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(154, 130, 173, 0.5) 55%, transparent 78%);
  opacity: 0;
  animation: anime-sparkle-twinkle 5.8s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes anime-sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  50% { opacity: 0.42; transform: scale(1); }
}

.anime-sparkles i:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.anime-sparkles i:nth-child(2) { top: 60%; left: 70%; animation-delay: -1.8s; }
.anime-sparkles i:nth-child(3) { top: 40%; left: 15%; animation-delay: -3.1s; }
.anime-sparkles i:nth-child(4) { top: 75%; left: 50%; animation-delay: -0.9s; }
.anime-sparkles i:nth-child(5) { top: 30%; left: 85%; animation-delay: -4.2s; }

/* ========== 语义层级 ========== */
[data-theme="soft-anime"] h1 { color: var(--text-primary); }
.anime-background-canvas { z-index: -2; pointer-events: none; }

/* ========== 扫光动画增强 ========== */
@keyframes sweep-sakura {
  0% {
    transform: rotate(45deg) translateX(-120%);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: rotate(45deg) translateX(20%);
    opacity: 0.6;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: rotate(45deg) translateX(20%);
    opacity: 0;
  }
}

/* 为扫光添加模糊边缘 */
[data-theme="soft-anime"] .sweep-light {
  filter: blur(40px);
  background: linear-gradient(
    135deg,
    rgba(240, 196, 216, 0) 0%,
    rgba(240, 196, 216, 0.12) 40%,
    rgba(217, 201, 232, 0.18) 50%,
    rgba(200, 232, 221, 0.12) 60%,
    rgba(240, 196, 216, 0) 100%
  ) !important;
}

/* ========== 改进的毛玻璃卡片样式 ========== */
[data-theme="soft-anime"] .soft-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(217, 201, 232, 0.3);
  box-shadow:
    0 8px 32px rgba(217, 201, 232, 0.25),
    0 2px 8px rgba(240, 196, 216, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(217, 201, 232, 0.1);
  transition:
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

/* 卡片高光由 inset 阴影绘制，不新增定位或裁切容器。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-theme="soft-anime"] .soft-card:hover {
    box-shadow:
      0 14px 38px rgba(95, 74, 91, 0.16),
      0 3px 12px rgba(199, 138, 156, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
    border-color: rgba(199, 138, 156, 0.42);
  }
}

/* ========== 更丰富的阴影系统 ========== */
/* 微阴影 - 用于微小凸起元素 */
[data-theme="soft-anime"] .shadow-xs {
  box-shadow: 0 1px 3px rgba(217, 201, 232, 0.12);
}

/* 小阴影 - 用于按钮等 */
[data-theme="soft-anime"] .shadow-sm {
  box-shadow:
    0 2px 8px rgba(217, 201, 232, 0.15),
    0 1px 3px rgba(240, 196, 216, 0.08);
}

/* 中阴影 - 用于卡片 */
[data-theme="soft-anime"] .shadow-md {
  box-shadow:
    0 8px 24px rgba(217, 201, 232, 0.25),
    0 2px 8px rgba(240, 196, 216, 0.12);
}

/* 大阴影 - 用于模态框 */
[data-theme="soft-anime"] .shadow-lg {
  box-shadow:
    0 16px 48px rgba(217, 201, 232, 0.35),
    0 8px 24px rgba(240, 196, 216, 0.15);
}

/* 特大阴影 - 用于重要弹窗 */
[data-theme="soft-anime"] .shadow-xl {
  box-shadow:
    0 24px 64px rgba(217, 201, 232, 0.4),
    0 12px 32px rgba(240, 196, 216, 0.2);
}

/* 彩色阴影 - 粉色调 */
[data-theme="soft-anime"] .shadow-pink {
  box-shadow:
    0 8px 32px rgba(240, 196, 216, 0.4),
    0 4px 16px rgba(240, 196, 216, 0.2);
}

/* 彩色阴影 - 薰衣草调 */
[data-theme="soft-anime"] .shadow-lavender {
  box-shadow:
    0 8px 32px rgba(217, 201, 232, 0.4),
    0 4px 16px rgba(217, 201, 232, 0.2);
}

/* 彩色阴影 - 薄荷调 */
[data-theme="soft-anime"] .shadow-mint {
  box-shadow:
    0 8px 32px rgba(200, 232, 221, 0.4),
    0 4px 16px rgba(200, 232, 221, 0.2);
}

/* 内阴影 - 用于凹陷效果 */
[data-theme="soft-anime"] .shadow-inset {
  box-shadow:
    inset 0 2px 8px rgba(217, 201, 232, 0.15),
    inset 0 1px 3px rgba(169, 107, 143, 0.08);
}

/* ========== 发光效果 ========== */
[data-theme="soft-anime"] .glow-soft {
  box-shadow: 0 0 20px rgba(240, 196, 216, 0.4);
}

[data-theme="soft-anime"] .glow-medium {
  box-shadow: 0 0 30px rgba(240, 196, 216, 0.5);
}

[data-theme="soft-anime"] .glow-strong {
  box-shadow: 0 0 40px rgba(240, 196, 216, 0.6);
}

/* ========== 通话界面增强 ========== */
/* 旋转光环容器 */
[data-theme="soft-anime"] .rotating-halo {
  filter: blur(1px);
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

:root[data-theme="soft-anime"] body[data-playing="true"][data-motion="gentle"] .rotating-halo {
  opacity: 1;
}

/* ========== 滚动条美化 ========== */

[data-theme="soft-anime"] ::-webkit-scrollbar-track {
  background: rgba(217, 201, 232, 0.1);
  border-radius: 5px;
}

[data-theme="soft-anime"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sakura-pink), var(--lavender-soft));
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="soft-anime"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-hover), var(--lavender-soft));
  background-clip: padding-box;
}

/* ========== 性能优化 ========== */
[data-theme="soft-anime"] .anime-petals,
[data-theme="soft-anime"] .anime-sparkles {
  contain: layout style paint;
}


[data-theme="soft-anime"] .sweep-light,
[data-theme="soft-anime"] .rotating-halo {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------- Readability, real call controls, and overlays ---------- */
:root[data-theme="soft-anime"] :is(label, .hint, .muted, .fineprint, .tiny, .eyebrow, .nav-caption) {
  color: var(--text-secondary);
}

:root[data-theme="soft-anime"] :is(input, textarea, select) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(105, 91, 117, 0.22);
}

:root[data-theme="soft-anime"] :is(input, textarea, select)::placeholder {
  color: #746b7b;
  opacity: 1;
}

:root[data-theme="soft-anime"] select option {
  color: var(--text-primary);
  background: #fffafd;
}

:root[data-theme="soft-anime"] :is(button, a, summary, input, textarea, select):focus-visible {
  outline: 2px solid #925879;
  outline-offset: 3px;
}

:root[data-theme="soft-anime"] .call-presence h1 {
  color: var(--text-primary);
  text-shadow: 0 2px 16px rgba(95, 74, 91, 0.16);
}

:root[data-theme="soft-anime"] :is(.call-top, .call-state, .call-presence #statusdetail, .voice-transcript, .input-note, .call-microphone span, .subtitle-area > small) {
  color: #665e6d;
}

:root[data-theme="soft-anime"] .call-top .pill,
:root[data-theme="soft-anime"] .pill {
  color: #66506a;
  background: rgba(255, 250, 253, 0.68);
  border-color: rgba(154, 94, 122, 0.24);
}

:root[data-theme="soft-anime"] .call-top > a,
:root[data-theme="soft-anime"] .call-actions :is(button, .button) {
  color: #5f5668;
}


:root[data-theme="soft-anime"] .subtitle-area > p {
  color: var(--text-primary);
  text-shadow: none;
}

:root[data-theme="soft-anime"] .call-microphone {
  background: rgba(255, 250, 253, 0.58);
  border-color: rgba(154, 94, 122, 0.18);
}

:root[data-theme="soft-anime"] .call-actions :is(button, .button) {
  background: transparent;
  backdrop-filter: none;
}

:root[data-theme="soft-anime"] .call-actions b {
  color: #6a586d;
  background: rgba(255, 250, 253, 0.46);
  border-color: rgba(154, 94, 122, 0.18);
}

:root[data-theme="soft-anime"] #sayform {
  background: rgba(255, 250, 253, 0.74);
  border-color: rgba(154, 94, 122, 0.2);
}

:root[data-theme="soft-anime"] #say {
  color: var(--text-primary);
}

:root[data-theme="soft-anime"] :is(.notice, #mini-call, #toast, dialog) {
  color: var(--text-primary);
  background: rgba(255, 250, 253, 0.96);
  border-color: rgba(154, 94, 122, 0.2);
  box-shadow: 0 16px 42px rgba(71, 53, 70, 0.16);
}

:root[data-theme="soft-anime"] .notice {
  border-left-color: #925879;
}

:root[data-theme="soft-anime"] :is(#raw-output, dialog pre) {
  color: #403849;
  background: #f4eff6;
  border-color: rgba(105, 91, 117, 0.16);
}

:root[data-theme="soft-anime"] dialog::backdrop {
  background: rgba(42, 35, 48, 0.42);
  backdrop-filter: blur(5px);
}

/* Shared reading and navigation layout; theme colours remain independent. */
:root[data-theme="soft-anime"] :is(.call-list-panel, .raw-panel, .chapter-card) {
  background: rgba(255, 250, 253, .90);
  border-color: rgba(105, 91, 117, .18);
  box-shadow: 0 8px 26px rgba(95, 74, 91, .06);
}
:root[data-theme="soft-anime"] :is(.raw-tabs button[aria-pressed="true"], .heading-tag, .studio-link.active) { color: #754963; }
:root[data-theme="soft-anime"] :is(.toolbar a, .raw-actions a, .text-link, .transcript-row.user .row-role) { color: #426f68; }
:root[data-theme="soft-anime"] :is(.session-options a, .setup-details summary, .top-status, .sidebar-bottom) { color: #665e6d; }
:root[data-theme="soft-anime"] .transcript-row .row-role { color: #754963; }
:root[data-theme="soft-anime"] .transcript-row { border-bottom-color: #695b7524; }
.mobile-nav, .mobile-more { display: none; }
.home-grid > *, .settings-grid > *, .studio-grid > *, .toolbar > * { min-width: 0; }
.subtitle-area { width: 100%; min-width: 0; }
#current-subtitle {
  max-height: clamp(120px, 24dvh, 240px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#current-subtitle:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 8px; }
.raw-actions { flex-wrap: wrap; }
#raw-output { max-width: 100%; overscroll-behavior: contain; }
.transcript-row p, #trace-meta, #script-body { overflow-wrap: anywhere; }

@media (max-width: 850px) {
  :root { --sidebar: 0px; --mobile-nav-height: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .app-shell { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--mobile-nav-height); }
  .sidebar { display: none; }
  .workspace, #pages { min-width: 0; min-height: 0; }
  .topbar { height: 54px; padding: 0 18px; }
  .page { padding: 22px 18px 28px; }
  .page-heading { gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  .page-heading > div { min-width: 0; }
  .page-heading .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .home-grid { display: flex; flex-direction: column; }
  .evening-setup { order: -1; }
  .hero-art { min-height: 240px; max-height: 340px; }
  .companion-mini { gap: 12px; }
  .companion-mini > div:not(.avatar) { min-width: 0; }
  .settings-grid, .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .call-page { padding: 12px; }
  .call-room { padding: 18px 14px; min-height: 0; border-radius: 22px; }
  .call-top { gap: 10px; flex-wrap: wrap; }
  .night-caption { display: none; }
  .call-top > a { margin-left: auto; font-size: 12px; }
  .call-presence { padding-top: 28px; }
  .subtitle-area { padding: 16px 12px; margin-top: 14px; }
  .subtitle-area > p { font-size: clamp(17px, 4vw, 21px); line-height: 1.85; }
  .call-bottom { width: 100%; min-width: 0; }
  .call-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; }
  .call-actions button, .call-actions .button { min-width: 0; font-size: 11px; }
  .call-actions b { width: 42px; height: 42px; }
  .call-microphone { max-width: 100%; }
  .toolbar { gap: 10px; }
  .toolbar label { display: flex; flex-wrap: wrap; gap: 8px; }
  .toolbar select { width: 100%; flex-basis: 100%; }
  .reading-paper { padding: 12px; }
  #transcript { height: clamp(240px, 52dvh, 640px); min-height: 0; }
  .transcript-row { padding: 16px 8px; }
  .transcript-row p { font-size: 15px; line-height: 1.9; }
  .call-list-panel, .raw-panel { padding: 14px; }
  .raw-tabs button { flex: 1 1 110px; min-height: 44px; }
  .raw-actions { gap: 10px; }
  .raw-actions label { flex-basis: 100%; font-size: 12px; }
  #raw-output { padding: 12px; min-height: 240px; max-height: 55dvh; }
  #mini-call { min-height: 64px; padding: 10px 12px; gap: 8px; }
  #mini-call .avatar { width: 30px; height: 30px; flex-shrink: 0; }
  #mini-call .button, #mini-call button { padding: 10px; min-height: 44px; }
  .mobile-nav {
    position: fixed; inset: auto 0 0; z-index: 30;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    height: var(--mobile-nav-height); padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
    background: #182334f5; border-top: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }
  .mobile-nav a, .mobile-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 5px; gap: 3px; margin: 0; border: 0; border-radius: 12px;
    font-size: 12px; line-height: 1.4; color: var(--muted); background: transparent;
  }
  .mobile-nav a > span, .mobile-nav button > span { font-size: 20px; line-height: 1.2; }
  .mobile-nav a::before { display: none; }
  .mobile-nav a:hover { transform: none; }
  .mobile-nav .active, .mobile-nav button[aria-expanded="true"] { color: var(--text); background: #b7c5dd18; }
  .mobile-more {
    position: fixed; right: 12px; bottom: calc(var(--mobile-nav-height) + 10px); z-index: 31;
    display: grid; width: min(290px, calc(100vw - 24px)); padding: 8px;
    background: #1c293cfb; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 12px 36px #0a142b44; max-height: calc(100dvh - var(--mobile-nav-height) - 24px); overflow-y: auto;
  }
  .mobile-more a { font-size: 14px; justify-content: flex-start; padding: 13px 16px; min-height: 46px; }
  .mobile-more a.active { background: #b7c5dd18; }
  :root[data-theme="soft-anime"] :is(.mobile-nav, .mobile-more) { background: #fffafdf7; border-color: #9a5e7a30; }
  :root[data-theme="soft-anime"] .mobile-nav .active,
  :root[data-theme="soft-anime"] .mobile-nav button[aria-expanded="true"],
  :root[data-theme="soft-anime"] .mobile-more a.active { background: #d9a8b826; color: #754963; }
  #toast { bottom: calc(var(--mobile-nav-height) + 12px); z-index: 40; }
}

@media (max-width: 420px) {
  .page { padding-inline: 14px; }
  .soft-card { padding: 16px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .asset-sliders { gap: 6px; }
  .call-page { padding: 8px; }
  .call-room { padding-inline: 10px; }
  .call-microphone { padding: 8px; }
  #mini-clock { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="soft-anime"] *,
  :root[data-theme="soft-anime"] *::before,
  :root[data-theme="soft-anime"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  :root[data-theme="soft-anime"] .anime-petals,
  :root[data-theme="soft-anime"] .anime-sparkles {
    display: none !important;
  }
}

/* Sakura dusk artwork: warm surfaces, readable foreground; moonlit stays unchanged. */
:root[data-theme="soft-anime"] {
  --surface-deepest: #f0ddd9;
  --surface-deep: #fff6f1;
  --surface-base: #fffaf7;
  --surface-raised: #fffaf7;
  --surface-overlay: #fff8f4;
}
:root[data-theme="soft-anime"] body {
  background: linear-gradient(160deg, #f7e7df, #ead5d9 58%, #deccd8);
}
:root[data-theme="soft-anime"] body::before {
  background: linear-gradient(180deg, #fff5eecc, #f1dfe6e6),
    url('/static/images/sakura-dusk.webp') center / cover no-repeat;
}
[data-theme="soft-anime"] .sidebar {
  background: linear-gradient(165deg, #fff5efeF, #fff9f5eF);
}
[data-theme="soft-anime"] .call-room > .art-image { opacity: 1; }
[data-theme="soft-anime"] .room-glow {
  background: linear-gradient(180deg, #fff7ee80, #fff6f087 35%, #fff6f1cc 72%, #f4e4e8ed);
}