/* ==========================================================================
   ClearMind Pro — SecondBrain AI Inspired Design System
   Cosmic Obsidian Glass, Aurora Atmosphere & High-Aesthetic Typography
   ========================================================================== */

:root {
  --color-ink-950: #050714;
  --color-ink-900: #0b0d22;
  --color-ink-850: #10142e;
  --color-ink-800: #151935;
  --color-ink-750: #1f2549;
  --color-ink-700: #272d4e;
  --color-ink-600: #3b426a;
  --color-ink-500: #545c85;
  --color-ink-400: #7a82a8;
  --color-ink-300: #a9b0cf;
  --color-ink-200: #d5d9ec;
  --color-ink-100: #ebeef8;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-fuchsia-500: #d946ef;
  --color-cyan-400: #22d3ee;
  --color-emerald-400: #34d399;
  --color-amber-400: #fbbf24;
  --color-rose-400: #fb7185;
}

html, body {
  background: #050714;
  color: #ebeef8;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -0.01em;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Universal Tactile Micro-Interactions */
button, .btn-tactile {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
button:active:not(:disabled), .btn-tactile:active:not(:disabled) {
  transform: scale(0.97);
}

/* Custom SecondBrain Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.35);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.6);
}

::selection {
  background: rgba(139, 92, 246, 0.45);
  color: #ffffff;
}

/* =========================================================================
   ATMOSPHERIC AMBIENT BACKGROUNDS (Aurora, Grid, Noise)
   ========================================================================= */
.aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(139, 92, 246, 0.28), transparent 60%),
    radial-gradient(35% 35% at 80% 20%, rgba(217, 70, 239, 0.2), transparent 60%),
    radial-gradient(45% 45% at 50% 80%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(30% 30% at 10% 90%, rgba(52, 211, 153, 0.15), transparent 60%);
  filter: blur(50px);
  pointer-events: none;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='7'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* =========================================================================
   GLASS UTILITIES & CARDS
   ========================================================================= */
.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.glass-strong {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
}

.bento-card, .spotlight-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(17, 20, 36, 0.8) 0%, rgba(11, 13, 24, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 1.25rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  --mouse-x: -300px;
  --mouse-y: -300px;
}
.bento-card::before, .spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mouse-x) var(--mouse-y),
    rgba(168, 85, 247, 0.18),
    rgba(99, 102, 241, 0.06) 40%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.bento-card:hover::before, .spotlight-card:hover::before {
  opacity: 1;
}
.bento-card:hover, .spotlight-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 15px 35px -10px rgba(168, 85, 247, 0.2);
}
.bento-card > *, .spotlight-card > * {
  position: relative;
  z-index: 2;
}

/* =========================================================================
   TYPOGRAPHY & GRADIENTS
   ========================================================================= */
.font-instrument-serif {
  font-family: 'Instrument Serif', Georgia, serif;
}

.text-gradient {
  background: linear-gradient(100deg, #a78bfa 0%, #f0abfc 40%, #22d3ee 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #c084fc 0%, #f472b6 50%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #fde047 0%, #f59e0b 60%, #ea580c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================= */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 30px -5px rgba(139, 92, 246, 0.35);
  }
  50% {
    box-shadow: 0 0 60px 0px rgba(139, 92, 246, 0.65);
  }
}
.animate-glow {
  animation: glowPulse 3.5s ease-in-out infinite;
}

@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-float {
  animation: floatAnim 6s ease-in-out infinite;
}

@keyframes pulseSlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
.animate-pulse-slow {
  animation: pulseSlow 5s ease-in-out infinite;
}

.lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s;
}
.lift:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 25px 50px -20px rgba(139, 92, 246, 0.3);
}

/* 2D Topic Prerequisite & Mastery Dependency Tree */
@keyframes weakNodePulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.9)); }
}
.animate-weak-node {
  animation: weakNodePulse 2s ease-in-out infinite;
}
.dependency-edge {
  stroke-dasharray: 4;
  animation: edgeFlow 30s linear infinite;
}
@keyframes edgeFlow {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}

/* 3D Spaced-Repetition Flashcards */
.perspective-1000 {
  perspective: 1200px;
}
.card-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-3d-inner.is-flipped {
  transform: rotateY(180deg);
}
.card-3d-front,
.card-3d-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-3d-back {
  transform: rotateY(180deg);
}

/* Circular Progress Rings */
.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 3.8;
}
.circle-bar {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

/* Match Config Option Buttons */
.blitz-config-pill.active {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.9), rgba(219, 39, 119, 0.9)) !important;
  border-color: rgba(236, 72, 153, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(219, 39, 119, 0.35);
}

/* Splitter Bar */
#workspaceSplitter {
  user-select: none;
  touch-action: none;
}
#workspaceSplitter:hover {
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

/* Multi-Page Navigation Bar */
.global-nav-link {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.global-nav-link.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(217, 70, 239, 0.2)) !important;
  color: #ffffff !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 4px 15px rgba(147, 51, 234, 0.25);
}

/* Dedicated Multi-Page Views */
.workspace-page {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.workspace-page.hidden {
  display: none !important;
}

/* Interactive focus ring */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.8);
  outline-offset: 2px;
  border-radius: 12px;
}

/* =========================================================================
   SHIMMER BADGES & BORDER BEAMS
   ========================================================================= */
.shimmer-badge {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, rgba(217, 70, 239, 0.3) 50%, rgba(168, 85, 247, 0.15) 100%);
  background-size: 200% 100%;
  animation: shimmerMove 3s ease-in-out infinite;
}
@keyframes shimmerMove {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.border-beam {
  position: relative;
}
.border-beam::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), rgba(236, 72, 153, 0.6), transparent);
  background-size: 200% 100%;
  animation: shimmerMove 3s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

/* =========================================================================
   DYNAMIC AUDIO WAVEFORM VISUALIZER (Real-time Speech Indicator)
   ========================================================================= */
.audio-waveform {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 16px;
  padding: 0 4px;
}
.audio-waveform.hidden { display: none; }
.waveform-bar {
  width: 3px;
  height: 16px;
  background: linear-gradient(to top, #a855f7, #ec4899);
  border-radius: 9999px;
  transform: scaleY(var(--voice-level, 0.2));
  transition: transform 80ms linear;
}
.audio-waveform.active { filter: drop-shadow(0 0 4px #a855f755); }
.voice-choice-label { font-size: 10px; color: #c4b5fd; }
.voice-choice {
  max-width: 130px;
  padding: 4px 7px;
  border: 1px solid #a78bfa55;
  border-radius: 8px;
  background: #17152b;
  color: #f5f3ff;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.voice-choice:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.voice-speaking { animation: voiceSpeaking 1.4s ease-in-out infinite; }
@keyframes voiceSpeaking {
  0%, 100% { transform: scale(0.97); opacity: 0.45; }
  50% { transform: scale(1.08); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-speaking { animation: none; }
  .waveform-bar { transition: none; transform: scaleY(0.55); }
}

/* =========================================================================
   GLOBAL COMMAND PALETTE (Cmd+K / Ctrl+K)
   ========================================================================= */
#cmdPaletteModal {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(3, 4, 12, 0.82);
  animation: fadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cmd-palette-box {
  background: linear-gradient(155deg, rgba(14, 18, 35, 0.95) 0%, rgba(8, 10, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.9), 0 0 50px rgba(139, 92, 246, 0.2);
  animation: cmdScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cmdScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.cmd-item {
  transition: all 0.15s ease;
  cursor: pointer;
}
.cmd-item:hover, .cmd-item.active {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(217, 70, 239, 0.15)) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  transform: translateX(3px);
}
.cmd-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0,0,0,0.4);
}

/* Code & LaTeX Copy Feedback */
.code-copy-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: scale(1.04);
}
.code-copy-btn:active {
  transform: scale(0.96);
}

/* =========================================================================
   MOBILE ADAPTIVE SPLIT-PANE (< 1024px) & MODAL ANIMATIONS
   ========================================================================= */
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-scale-in {
  animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================================================
   MOBILE & ANDROID RESPONSIVE UX ENGINE (< 1024px & < 768px)
   Enforces zero horizontal overflow, fluid touch targets, dynamic viewports.
   Desktop layout (>= 1024px) remains 100% UNTOUCHED.
   ========================================================================= */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Safe container width clamp */
  #pageClassroom, #pageCheatSheet, #workspacePages {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Top Navbar Mobile Polish */
  #globalNavbar {
    padding: 8px 10px !important;
  }
  #globalNavbar > div {
    max-width: 100% !important;
    width: 100% !important;
  }
  #topWorkspaceNav {
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
  }
  #topWorkspaceNav::-webkit-scrollbar {
    display: none !important;
  }

  /* Splitter hidden on mobile */
  #workspaceSplitter {
    display: none !important;
  }

  /* Lock viewport to 100dvh on mobile classroom so chat input never scrolls off */
  html, body {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #globalNavbar {
    flex-shrink: 0 !important;
  }

  #workspacePages {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #pageClassroom {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 2px 4px 0 4px !important;
    gap: 2px !important;
  }

  #mobileWorkspaceSegment {
    flex-shrink: 0 !important;
    margin-bottom: 2px !important;
  }

  #pageClassroom > main {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Mobile Adaptive Split-Pane: Default or Chat view */
  body:not(.mobile-view-canvas) #leftChatSection:not(.hidden),
  body.mobile-view-chat #leftChatSection:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #chatStreamHeader {
    flex-shrink: 0 !important;
  }

  /* CHAT MESSAGES STREAM: The ONLY scrolling area inside the chat */
  #chatMessagesContainer {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: smooth !important;
    padding: 8px 10px !important;
  }

  #suggestedChipsDock {
    flex-shrink: 0 !important;
    background: rgba(10, 12, 28, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* STICKY BOTTOM CHAT INPUT BAR: Stays permanently anchored to bottom of screen on phone */
  #chatInputBarContainer {
    flex-shrink: 0 !important;
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    background: rgba(8, 10, 24, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6) !important;
    padding: 6px 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
  }

  body:not(.mobile-view-canvas) #rightCanvasSection,
  body.mobile-view-chat #rightCanvasSection {
    display: none !important;
  }

  /* Mobile Adaptive Split-Pane: Canvas view */
  body.mobile-view-canvas #rightCanvasSection,
  #leftChatSection.hidden ~ #rightCanvasSection {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    border-radius: 1.25rem !important;
    overflow-y: auto !important;
  }
  body.mobile-view-canvas #leftChatSection {
    display: none !important;
  }

  /* Other pages (Exam, Blitz, Flashcards, Analytics) scroll vertically on mobile */
  #pageExam, #pageCheatSheet, #pageBlitz, #pageFlashcards, #pageAnalytics {
    overflow-y: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mathematical Formulas & Code: local horizontal scroll without expanding page */
  .katex-display {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    padding: 6px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .katex {
    font-size: 1.05em !important;
  }
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Chat Message Bubbles: Full readability on narrow viewports */
  .chat-bubble, #chatMessagesContainer > div {
    max-width: 95% !important;
    word-break: break-word !important;
  }

  /* Input form on mobile: 15px font prevents auto-zoom */
  #chatMessageInput {
    font-size: 15px !important;
  }

  /* Touch Targets: minimum 40px - 44px */
  #chatSendBtn, #chatMicBtn, label[for="chatPhotoInput"] {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* 3D Flashcards Mobile Optimization */
  #flashcardFlipTrigger, #flashcardInner {
    min-height: 300px !important;
  }
  .card-3d-front, .card-3d-back {
    padding: 20px 16px !important;
  }

  /* Welcome Profile Modal on mobile */
  #profileModal {
    padding: 12px !important;
  }
  #profileModal > div {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 88dvh !important;
    padding: 16px !important;
    margin: auto !important;
    box-sizing: border-box !important;
  }
  #profileModal input, #profileModal select {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #avatarPickerGrid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .avatar-btn {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 4px !important;
  }

  /* Blitz Battle Options */
  .blitz-option-btn {
    min-height: 48px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* Formula cards in Exam Sheet */
  .formula-card-interactive {
    width: 100% !important;
  }

  /* Bento Grid Stack on Mobile */
  #analyticsBentoGrid, .bento-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  #globalNavbar {
    padding: 6px 8px !important;
  }
  #mobileWorkspaceSegment {
    margin-bottom: 6px !important;
  }
  #topWorkspaceNav button {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}


/* =========================================================================
   PRINT ISOLATION: REAL COMPREHENSIVE EXAM REVISION CHEAT SHEET
   ========================================================================= */
@media print {
  @page {
    margin: 1.2cm;
    size: A4 portrait;
  }
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11pt !important;
  }
  header, #globalNavbar, aside, #leftChatSection, #pageClassroom, #pageBlitz, #pageFlashcards, #pageAnalytics, #workspaceSplitter, .canvas-tab-btn, #toastContainer, #profileModal, #printExamSheetBtn, #regenerateExamSheetBtn, .no-print, .aurora, .grid-bg, .noise {
    display: none !important;
  }
  #pageCheatSheet, #viewCanvasExam {
    display: block !important;
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  #viewCanvasExam {
    display: block !important;
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  #viewCanvasExam * {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
  .exam-pdf-header {
    display: block !important;
    border-bottom: 2px solid #7c3aed !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
  }
  .formula-card-print {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 4px solid #7c3aed !important;
    page-break-inside: avoid !important;
    margin-bottom: 8px !important;
  }
  .trap-card-print {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-left: 4px solid #f59e0b !important;
    page-break-inside: avoid !important;
    margin-bottom: 8px !important;
  }
}

/* ========================================================================= */
/* FULLSCREEN FOCUS CANVAS MODE                                              */
/* ========================================================================= */
body.fullscreen-canvas #leftChatSection {
  display: none !important;
}
body.fullscreen-canvas #workspaceSplitter {
  display: none !important;
}
body.fullscreen-canvas #rightCanvasSection {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* ========================================================================= */
/* 3D MOTION CONCEPT STUDIO (SIGNBRIDGE AI INSPIRED)                         */
/* ========================================================================= */
.motion-stage-canvas {
  cursor: grab;
  touch-action: none;
}
.motion-stage-canvas:active {
  cursor: grabbing;
}

.motion-hud-badge {
  background: rgba(5, 7, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.motion-transcript-capsule {
  background: rgba(10, 13, 30, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.15);
}

.motion-phase-step.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(99, 102, 241, 0.18));
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
}

.motion-phase-step.completed {
  opacity: 0.75;
  border-color: rgba(16, 185, 129, 0.4);
}

@keyframes audioWavePulse {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

.audio-bar {
  animation: audioWavePulse 1.2s ease-in-out infinite;
}
.audio-bar:nth-child(2) { animation-delay: 0.2s; }
.audio-bar:nth-child(3) { animation-delay: 0.4s; }
.audio-bar:nth-child(4) { animation-delay: 0.1s; }
.audio-bar:nth-child(5) { animation-delay: 0.3s; }