/* 
 * NOVAWATT - Core Stylesheet
 * Dark Glassmorphism, 3D Tilt, Reader Themes, TTS Karaoke & Audio Mixer
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

:root {
  --bg-dark: #07070c;
  --accent-crimson: #ef4444;
  --accent-wattpad: #ff500a;
  --accent-violet: #8b5cf6;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-dark);
  color: #f1f5f9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 10, 16, 0.8);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(239, 68, 68, 0.5);
}

/* Glassmorphism Classes */
.glass {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dropdown {
  background: rgba(13, 13, 20, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Text Gradients & Glows */
.glow-text {
  background: linear-gradient(90deg, #ff500a, #ef4444, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glow-crimson {
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
}

.glow-gold {
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

/* 3D Perspective Card Tilt */
.perspective-1000 {
  perspective: 1000px;
}

.card-3d-inner {
  transform-style: preserve-3d;
  will-change: transform;
}

.card-hologram-sheen {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 80, 10, 0.15) 60%,
    rgba(139, 92, 246, 0.25) 100%
  );
  mix-blend-mode: overlay;
}

/* --- Reader Appearance Themes --- */

/* 1. Crimson Abyss (Mặc định cho truyện kinh dị) */
.theme-crimson {
  background: #07070c;
  color: #e2e8f0;
}
.theme-crimson .reader-paragraph {
  color: #cbd5e1;
}

/* 2. OLED Pure Dark */
.theme-oled {
  background: #000000;
  color: #d4d4d8;
}
.theme-oled .reader-paragraph {
  color: #a1a1aa;
}

/* 3. Warm Sepia (Trang sách cổ) */
.theme-sepia {
  background: #f4ecd8 !important;
  color: #433422 !important;
  border-color: rgba(67, 52, 34, 0.15) !important;
}
.theme-sepia .reader-paragraph {
  color: #382818 !important;
}
.theme-sepia .chapter-meta-banner {
  border-bottom-color: rgba(67, 52, 34, 0.15) !important;
}
.theme-sepia .glow-text {
  background: linear-gradient(90deg, #9a3412, #b45309, #78350f) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.theme-sepia .chapter-footer {
  border-top-color: rgba(67, 52, 34, 0.15) !important;
}

/* 4. Daylight (Trang giấy sáng) */
.theme-daylight {
  background: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}
.theme-daylight .reader-paragraph {
  color: #1e293b !important;
}
.theme-daylight .chapter-meta-banner {
  border-bottom-color: #e2e8f0 !important;
}
.theme-daylight .glow-text {
  background: linear-gradient(90deg, #ea580c, #dc2626, #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.theme-daylight .chapter-footer {
  border-top-color: #e2e8f0 !important;
}

/* Typography Classes */
.font-merriweather {
  font-family: 'Merriweather', Georgia, serif;
}
.font-inter {
  font-family: 'Inter', system-ui, sans-serif;
}
.font-mono {
  font-family: 'JetBrains Mono', Consolas, monospace;
}
.font-lora {
  font-family: 'Lora', Cambria, serif;
}

/* --- TTS Paragraph Karaoke Synchronization --- */
.reader-paragraph {
  position: relative;
  transition: all 0.25s ease;
  padding: 4px 6px;
  border-radius: 6px;
}

.reader-paragraph:hover {
  background: rgba(255, 255, 255, 0.02);
}

.tts-active-paragraph {
  border-left: 4px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.09) !important;
  padding-left: 14px !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 0 4px 25px -5px rgba(239, 68, 68, 0.25);
  transform: translateX(4px);
}

/* --- Floating Audio Mixer Dock --- */
#floatingAudioDock {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#floatingAudioDock.audio-dock-collapsed {
  transform: translateY(calc(100% - 38px));
}

/* Visualizer Bars Animation */
.soundwave-bar {
  animation: soundwaveAnim 1.2s ease-in-out infinite alternate;
}
.soundwave-bar:nth-child(2) { animation-delay: 0.2s; }
.soundwave-bar:nth-child(3) { animation-delay: 0.4s; }
.soundwave-bar:nth-child(4) { animation-delay: 0.1s; }

@keyframes soundwaveAnim {
  0% { height: 4px; }
  100% { height: 18px; }
}

/* Drawers Transition */
#inlineCommentDrawer, #loreDrawer {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pulse animation for second persona eye indicator */
@keyframes coldEyePulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(148, 163, 184, 0.6), inset 0 0 8px rgba(148, 163, 184, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(148, 163, 184, 0.9), inset 0 0 14px rgba(226, 232, 240, 0.8);
  }
}

.cold-persona-pulse {
  animation: coldEyePulse 1.8s infinite;
}