/* ============================================================
   Vạn Môn Phái — Effects & Content v3 (Light Academy)
   Markdown/MathJax rendering, responsive overrides, keyframes,
   reduced-motion, voice widget. Loaded LAST so responsive
   overrides win the cascade.
   ============================================================ */

/* ---------- Markdown / math content ---------- */
.math-problem-area, .step-question {
  line-height: 1.7;
}
.math-problem-area h1, .math-problem-area h2, .math-problem-area h3,
.step-question h1, .step-question h2, .step-question h3 {
  font-family: var(--font-display);
  color: var(--text-color);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--border-soft);
  padding-bottom: 0.5rem;
}
.math-problem-area h1 { font-size: 1.7rem; }
.math-problem-area h2 { font-size: 1.4rem; }
.math-problem-area h3 { font-size: 1.2rem; }

.math-problem-area table, .step-question table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.math-problem-area th, .step-question th {
  background: var(--ink-950);
  color: var(--text-color);
  padding: 11px 15px;
  text-align: left;
  font-weight: 700;
  font-size: 0.86rem;
  border-bottom: 1px solid var(--glass-border);
}
.math-problem-area td, .step-question td {
  padding: 11px 15px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-color);
}
.math-problem-area tr:last-child td, .step-question tr:last-child td {
  border-bottom: none;
}
.math-problem-area tr:nth-child(even), .step-question tr:nth-child(even) {
  background: var(--ink-900);
}
.math-problem-area hr, .step-question hr {
  border: none;
  height: 1px;
  background: var(--glass-border);
  margin: 2rem 0;
}
.math-problem-area blockquote, .step-question blockquote {
  border-left: 3px solid var(--gold-400);
  background: #fffbeb;
  padding: 1rem 1.4rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  color: #713f12;
}
.math-problem-area ul, .math-problem-area ol,
.step-question ul, .step-question ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.math-problem-area li, .step-question li {
  margin-bottom: 0.5rem;
}
.formula {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}

.mjx-chtml {
  font-size: 1.08em !important;
  color: var(--text-color) !important;
}

/* Enhanced text rendering */
body,
.card,
.step-question {
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--ink-950);
}

::-webkit-scrollbar-thumb {
  background: #cdd5e4;
  border-radius: 6px;
  border: 2px solid var(--ink-950);
}

::-webkit-scrollbar-thumb:hover {
  background: #aab5cb;
}

/* ---------- MathJax overflow safety ---------- */
.math-problem-area, .step-question, .choices-list, .history-item,
.preview-box, .artifact-content, .md-content, .main-content-preview {
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  max-width: 100% !important;
}

.mjx-container, .mjx-chtml {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  vertical-align: middle !important;
  padding-top: 4px;
  padding-bottom: 4px;
}

.mjx-container[display="true"],
.mjx-chtml[display="true"] {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  margin: 1.5em 0 !important;
}

img {
  max-width: 100% !important;
  height: auto !important;
}

.math-problem-area {
  overflow-x: visible;
}

/* ---------- Mobile drawer & responsive overrides (768px) ----------
   The whole <nav> sidebar becomes the off-canvas drawer (slides from
   the left); .topbar-mobile is the persistent slim bar that hosts the
   hamburger when the rail is off-screen. Loads after layout.css so
   this is the sole authority on mobile nav behavior. */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
  .topbar-mobile {
    display: flex;
  }
  body,
  body.header-minimized {
    padding-left: 0;
  }
  body::before,
  body.header-minimized::before {
    inset: 0;
  }
  nav.app-nav {
    width: 280px;
    /* Slide via transform + hide when closed. Chrome counts a transformed
       fixed element into scrollable overflow, so the closed drawer must
       also be visibility:hidden (kept during slide-out via the delayed
       visibility transition). */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
    z-index: 1100;
    box-shadow: 12px 0 40px rgba(26, 34, 51, 0.14);
  }
  nav.app-nav.open {
    transform: none;
    visibility: visible;
    transition: transform 0.4s var(--ease-out), visibility 0s;
  }
  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 51, 0.4);
    z-index: 1050;
  }
  .sidebar-scrim.open {
    display: block;
  }

  /* Belt-and-braces: never allow horizontal panning on small screens. */
  html, body {
    overflow-x: hidden;
  }

  .container {
    width: 96%;
    margin: 1.25rem auto;
  }
  .card {
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 0.7rem 0.5rem;
    font-size: 0.85rem;
  }
  h1 {
    font-size: 1.5rem;
    line-height: 1.25;
  }
}

/* ---------- Mobile 480px ---------- */
@media (max-width: 480px) {
  .container {
    width: 100%;
    padding: 0 10px;
    margin: 1rem auto;
  }
  .card {
    padding: 1.25rem 1rem;
  }
  h1 {
    font-size: 1.35rem;
  }
  .nav-item-master {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* ---------- Shared keyframes ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page content entrance */
.container > * {
  animation: riseIn 0.4s var(--ease-out) both;
}

/* Legacy utility (was animated gradient text — gradient text is noise;
   now a plain strong amber emphasis. Name kept for the many templates
   that reference it.) */
.text-shimmer-gold {
  color: var(--gold-500);
  font-weight: 800;
}

/* ---------- Voice widget (Vocal Bridge) ---------- */
.glass-bg {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}
.status-pulse {
  box-shadow: 0 0 4px currentColor;
}
.status-pulse.active {
  animation: pulse-ring 1.5s infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.5; }
  100% { transform: scale(0.9); opacity: 1; }
}
.cinzel-font { font-family: var(--font-display); }

#voice-ripple.calling {
  animation: voice-ripple-anim 2s infinite;
  opacity: 1;
}
@keyframes voice-ripple-anim {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.message-entry {
  animation: fade-up 0.3s ease-out;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Reduced motion: kill everything ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}