:root {
  color-scheme: dark;
  --fo-bg: #0a0710;
  --fo-bg-soft: #15101e;
  --fo-surface: rgba(28, 20, 39, 0.76);
  --fo-surface-strong: rgba(38, 27, 52, 0.92);
  --fo-surface-hover: rgba(52, 36, 70, 0.94);
  --fo-border: rgba(255, 255, 255, 0.13);
  --fo-border-strong: rgba(216, 180, 254, 0.32);
  --fo-text: #faf7ff;
  --fo-text-soft: #d6cce1;
  --fo-text-muted: #aa9db8;
  --fo-purple: #9b6dff;
  --fo-purple-strong: #7c3aed;
  --fo-pink: #f05caa;
  --fo-danger: #fb7185;
  --fo-success: #5ee1a7;
  --fo-warning: #f7ce70;
  --fo-radius: 20px;
  --fo-radius-small: 14px;
  --fo-shadow: 0 18px 52px rgba(4, 2, 8, 0.42);
  --fo-shadow-soft: 0 10px 30px rgba(4, 2, 8, 0.28);
  --fo-focus: 0 0 0 4px rgba(155, 109, 255, 0.2);
}

html {
  background: var(--fo-bg);
  scroll-behavior: smooth;
}

body {
  color: var(--fo-text);
  background-color: var(--fo-bg);
  background-image:
    radial-gradient(circle at 14% -8%, rgba(124, 58, 237, 0.26), transparent 34rem),
    radial-gradient(circle at 92% 12%, rgba(240, 92, 170, 0.18), transparent 30rem),
    linear-gradient(145deg, #09060e 0%, #140d1c 48%, #0b0811 100%);
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::selection,
body *::selection {
  color: #fff;
  background: rgba(155, 109, 255, 0.58);
}

body :where(h1, h2, h3) {
  color: var(--fo-text);
  letter-spacing: -0.025em;
}

body :where(p, li, small) {
  text-wrap: pretty;
}

body :where(a) {
  text-underline-offset: 3px;
}

body :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid rgba(216, 180, 254, 0.96);
  outline-offset: 3px;
  box-shadow: var(--fo-focus);
}

body :where(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  min-height: 46px;
  color: var(--fo-text) !important;
  background: rgba(13, 9, 19, 0.72) !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius-small) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body :where(input, textarea, select):hover {
  border-color: rgba(216, 180, 254, 0.28) !important;
}

body :where(input, textarea, select):focus {
  border-color: var(--fo-purple) !important;
  box-shadow: var(--fo-focus) !important;
  outline: none !important;
}

body :where(input, textarea)::placeholder {
  color: rgba(214, 204, 225, 0.48) !important;
}

body :where(button:not(.hamburger-btn):not(.desktop-toggle-btn), .btn, [role="button"]) {
  border-radius: var(--fo-radius) !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

@media (hover: hover) {
  body :where(button:not(:disabled):not(.hamburger-btn):not(.desktop-toggle-btn), .btn, [role="button"]):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(8, 4, 13, 0.28);
  }
}

body :where(button, [role="button"]):active {
  transform: translateY(0) scale(0.985);
}

body :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

/* 共用玻璃卡片 */
body :where(
  .glass,
  .card,
  .stat-card,
  .privacy-card,
  .conversation-card,
  .agent-card,
  .character-card,
  .image-card,
  .modal-content,
  .voice-settings,
  .voice-card,
  .settings-section
) {
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius) !important;
  box-shadow: var(--fo-shadow-soft);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

body :where(.glass, .card, .privacy-card, .conversation-card, .agent-card, .settings-section) {
  background-color: var(--fo-surface) !important;
}

body :where(.glass, .card, .privacy-card, .conversation-card, .agent-card, .modal-content, #image-panel)
  :where(.text-gray-900, .text-gray-800, .text-gray-700) {
  color: var(--fo-text) !important;
}

body :where(.glass, .card, .privacy-card, .conversation-card, .agent-card, .modal-content, #image-panel)
  :where(.text-gray-600, .text-gray-500, .text-gray-400) {
  color: var(--fo-text-soft) !important;
}

body :where(.conversation-card, .agent-card, .character-card, .image-card, .voice-card) {
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

@media (hover: hover) {
  body :where(.conversation-card, .agent-card, .character-card, .image-card, .voice-card):hover {
    border-color: var(--fo-border-strong) !important;
    box-shadow: var(--fo-shadow);
  }
}

/* 導覽列 */
.mobile-nav-bar,
.desktop-sidebar,
.sidebar-drawer-mobile {
  background:
    linear-gradient(180deg, rgba(25, 17, 35, 0.96), rgba(10, 7, 14, 0.97)) !important;
  border-color: var(--fo-border) !important;
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}

.mobile-nav-bar {
  box-shadow: 0 10px 32px rgba(4, 2, 8, 0.24);
}

.desktop-sidebar,
.sidebar-drawer-mobile {
  box-shadow: 14px 0 42px rgba(4, 2, 8, 0.36) !important;
}

.sidebar-header,
.sidebar-user-info,
.sidebar-footer {
  border-color: var(--fo-border) !important;
}

.sidebar-item {
  margin: 3px 10px;
  width: calc(100% - 20px) !important;
  border-radius: 16px;
}

.sidebar-item:hover {
  background: rgba(155, 109, 255, 0.12) !important;
}

.sidebar-item.active {
  color: #fff !important;
  background: linear-gradient(100deg, rgba(124, 58, 237, 0.32), rgba(240, 92, 170, 0.18)) !important;
  border-left-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 254, 0.16);
}

.sidebar-upgrade {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--fo-radius) !important;
  background: linear-gradient(120deg, var(--fo-purple-strong), var(--fo-pink)) !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.22);
}

.desktop-toggle-btn,
.hamburger-btn {
  border-radius: 12px !important;
}

/* 頁尾 */
body > footer,
body footer[style] {
  width: min(1180px, calc(100% - 32px)) !important;
  margin: 56px auto 16px !important;
  padding: 24px !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius) !important;
  background: rgba(18, 12, 25, 0.62);
  box-shadow: var(--fo-shadow-soft);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* 提示、空資料與載入狀態 */
body :where([role="status"], .voice-note, .empty-state, .loading-state, .error-message, .success-message) {
  border-radius: var(--fo-radius-small);
}

body :where(.modal-content, dialog) {
  border: 1px solid var(--fo-border-strong) !important;
  border-radius: var(--fo-radius) !important;
  background: var(--fo-surface-strong) !important;
  box-shadow: 0 28px 90px rgba(3, 1, 6, 0.68) !important;
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
}

/* 聊天生圖面板保留原本拖曳、縮放與生成流程，只統一外觀 */
#image-panel {
  border: 1px solid var(--fo-border-strong) !important;
  border-radius: var(--fo-radius) !important;
  background:
    linear-gradient(145deg, rgba(39, 27, 53, 0.95), rgba(17, 12, 24, 0.96)) !important;
  box-shadow: 0 24px 70px rgba(3, 1, 6, 0.56) !important;
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
}

#image-panel-drag-handle {
  border-bottom-color: var(--fo-border) !important;
}

.image-panel-section {
  border-color: var(--fo-border) !important;
  border-radius: var(--fo-radius-small) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.image-progress-track {
  background: rgba(255, 255, 255, 0.09) !important;
}

.image-progress-fill {
  background: linear-gradient(90deg, var(--fo-purple), var(--fo-pink)) !important;
}

body :where(dialog)::backdrop {
  background: rgba(5, 2, 8, 0.72);
  backdrop-filter: blur(8px);
}

/* 聲線管理 */
.voice-admin {
  width: min(1080px, calc(100% - 32px));
  padding: 42px 0 64px !important;
}

.voice-admin > h1 {
  margin: 26px 0 8px;
  font-size: clamp(30px, 5vw, 46px) !important;
}

.voice-admin > section,
.voice-admin #admin-content > section {
  padding: clamp(18px, 3vw, 28px) !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius) !important;
  background: var(--fo-surface) !important;
  box-shadow: var(--fo-shadow-soft);
}

.voice-card {
  background: rgba(40, 28, 54, 0.82) !important;
}

.voice-card.selected {
  border-color: rgba(216, 180, 254, 0.8) !important;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.24), rgba(240, 92, 170, 0.14)) !important;
}

/* 滾動條 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 109, 255, 0.58) rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(var(--fo-purple), var(--fo-pink));
}

@media (max-width: 767px) {
  body > footer,
  body footer[style] {
    width: calc(100% - 24px) !important;
    margin: 36px auto 12px !important;
    padding: 20px 16px !important;
  }

  body :where(.glass, .card, .privacy-card, .conversation-card, .agent-card, .modal-content) {
    border-radius: 18px !important;
  }

  .voice-admin {
    width: calc(100% - 24px);
    padding: 24px 0 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}