/* Phone Lite Mode — fires only below 700px wide.
 * Desktop and tablet (≥700px) get the FULL experience unchanged.
 * Phone (<700px) gets a simplified read+listen+AI-chat experience.
 * Heavy interactives (3D scenes, SAS clone, simulator) are hidden with
 * a "open on PC for full experience" notice.
 *
 * 2026-06-09: replaces the blocking message — phones now usable for studying.
 */

@media (max-width: 699px) {
  /* ===== Universal: prevent horizontal overflow + sane typography ===== */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { font-size: 15px !important; line-height: 1.55 !important; }

  /* ===== Top "lite mode" notice banner (one per page) ===== */
  body::before {
    content: "📱 Lite mode · for full interactive experience open on tablet or PC";
    display: block !important;
    position: sticky; top: 0; left: 0; right: 0;
    background: linear-gradient(135deg, #1A1410 0%, #2A1F0F 60%, #3A2818 100%);
    color: #FCD34D;
    padding: 8px 14px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11.5px !important; font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    z-index: 999998 !important;
    border-bottom: 2px solid #F59E0B !important;
    line-height: 1.4 !important;
  }

  /* ===== Toolbar (pp-header) — same sticky-solid pattern as practical's ===== */
  .pp-header {
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    /* CRITICAL: height auto so the dark background grows to contain all wrapped
       buttons. Without this, original height: 56px keeps the dark bg short and
       the wrapped buttons spill onto the content below. */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    align-items: center !important;
    overflow: visible !important;
    /* Solid dark background + sticky so it stays at top during scroll. */
    background: linear-gradient(135deg, #1A1410 0%, #2A1F0F 60%, #3A2818 100%) !important;
    position: sticky !important;
    top: 30px !important;
    z-index: 999990 !important;
    border-bottom: 1px solid #F59E0B !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
    color: #FCD34D !important;
  }
  /* Ensure toolbar text stays readable on the dark sticky bg */
  .pp-header .pp-title { color: #FEF3C7 !important; }
  .pp-header .pp-subtitle { color: #FCD34D !important; }
  .pp-header .pp-tb-btn {
    background: rgba(245,166,35,0.10) !important;
    border: 1px solid rgba(245,166,35,0.4) !important;
    color: #FCD34D !important;
  }
  .pp-header .pp-track {
    background: rgba(254,243,199,0.18) !important;
  }
  .pp-header .pp-track-fill {
    background: linear-gradient(90deg, #F59E0B, #FBBF24) !important;
  }
  /* Title shrinks and shares the row with the buttons (single-row layout) */
  .pp-title-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 6px !important;
    overflow: hidden !important;
  }
  .pp-title {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pp-subtitle {
    font-size: 9.5px !important;
    opacity: 0.85;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The .pp-controls wrapper (groups player buttons together) — inline with title row */
  .pp-controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Progress bar gets its own full row INSIDE pp-controls */
  .pp-track {
    flex: 1 1 100% !important;
    order: 99 !important;
    margin: 2px 0 !important;
    height: 5px !important;
  }
  /* Standard button sizes */
  .pp-tb-btn {
    padding: 4px 7px !important;
    min-width: 28px !important; height: 28px !important;
    font-size: 11.5px !important;
    flex: 0 0 auto !important;
  }
  /* HIDE LESS ESSENTIAL CONTROLS on phone — only show prev/play/next/AI/⚙ */
  #npRate { display: none !important; }
  #npStop { display: none !important; }
  #npPause { display: none !important; }
  /* Compress "Continuous" → just ▶ icon */
  #bcont {
    font-size: 0 !important;
    padding: 4px 8px !important; height: 28px !important;
    flex: 0 0 auto !important;
  }
  #bcont::before { content: "▶"; font-size: 11px; }
  /* AI Tutor + Settings cog — inline with the toolbar buttons */
  #ai-tutor-toolbar-btn {
    padding: 4px 9px !important;
    font-size: 11px !important; height: 28px !important;
  }
  .llm-cog-btn {
    width: 28px !important; height: 28px !important;
    font-size: 13px !important;
    position: static !important;
    top: auto !important; right: auto !important;
    box-shadow: none !important;
  }
  /* Hide the redundant pp-progress bar (the thin colored line under the toolbar) */
  .pp-progress { display: none !important; }

  /* ===== LECTURE pages — hide the 3D scene pane, show text full-width ===== */
  .lec-grid, .l-grid, .lecture-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .lstage, #stage3d, .scene-pane, [data-pane-role="stage"] {
    display: none !important;
  }
  .lsec, .lecture-section {
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    grid-column: 1 !important;
  }
  .lsec h2, .lsec h3 { font-size: 17px !important; line-height: 1.3 !important; }
  .lsec p { margin: 8px 0 !important; }
  /* Add phone-only notice INSIDE the lecture explaining the missing scene */
  body[data-page="lecture"] main::before,
  body:has(.lec-grid) .lec-grid::before {
    content: "🎬 The 3D animation for this lecture is hidden in Lite mode. Open this page on a tablet or PC to watch it alongside the text.";
    display: block;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    color: #78350F;
    font-size: 13px;
    line-height: 1.5;
  }

  /* ===== WALKTHROUGH pages — hide chart pane, show narration text full-width ===== */
  .ilab {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .ilab .stage, .ilab [data-pane-role="stage"] {
    display: none !important;
  }
  .ilab .lpane {
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 16px !important;
  }
  body:has(.ilab) .ilab::before {
    content: "📊 The live chart for this walkthrough is hidden in Lite mode. Open this page on a tablet or PC to watch it animate.";
    display: block;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    color: #78350F;
    font-size: 13px;
    line-height: 1.5;
  }

  /* ===== PRACTICAL pages — block (SAS clone + simulator can't run on phone) ===== */
  .econ-panes, [data-econ-video] .econ-panes,
  .sas-clone-host, .sas-clone-root,
  .econ-pane-wrapper, [data-role="simulator-container"] {
    display: none !important;
  }
  body[data-page="practical"] main::before,
  body:has([data-econ-video]) [data-econ-video]::before {
    content: "🧪 Hands-on SAS practicals need a PC. The interactive SAS Studio clone + simulator are hidden in Lite mode. Open this page on a PC or tablet to run + edit the SAS code.";
    display: block;
    margin: 14px;
    padding: 18px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    color: #78350F;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
  }

  /* ===== Karaoke subtitle bar at bottom — readable but compact ===== */
  #narrator-subtitle {
    font-size: 12px !important;
    padding: 6px 12px !important;
    line-height: 1.35 !important;
    right: 14px !important;
  }

  /* ===== Course hub (index.html) topic cards — single column, tighter ===== */
  .topic-grid { grid-template-columns: 1fr !important; }
  .topic { margin-bottom: 10px !important; }
  .topic-hdr { padding: 12px 14px !important; gap: 10px !important; }
  .topic-num { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  .topic-title { font-size: 14.5px !important; }
  .topic-sub { font-size: 11.5px !important; }
  .hero { padding: 24px 18px 30px !important; }
  .hero h1 { font-size: 26px !important; line-height: 1.08 !important; }
  .hero .lede { font-size: 14px !important; }
  .hero-meta { gap: 6px !important; }
  .hero-meta .pill { font-size: 10.5px !important; padding: 4px 9px !important; }
  .legend { padding: 10px 12px !important; font-size: 11.5px !important; }
  main { padding: 12px !important; }

  /* ===== AI Setup page — full width inputs, smaller cards ===== */
  .container { padding: 14px !important; max-width: 100% !important; }
  header h1 { font-size: 22px !important; }
  .opt { padding: 14px 16px !important; margin-bottom: 12px !important; }
  .opt-head { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .opt-head h2 { font-size: 15px !important; }
  .opt-body { font-size: 13px !important; }
  .opt-body ol, .opt-body ul { margin-left: 18px !important; }
  .privacy-banner { padding: 12px 14px !important; font-size: 12px !important; }
  .key-row { flex-direction: column !important; gap: 6px !important; }
  .key-row input, .key-row .btn, .key-row button { width: 100% !important; }

  /* ===== AI Tutor fullscreen — works fine, just tighter ===== */
  #chat { padding: 12px !important; }
  .msg { font-size: 14px !important; gap: 8px !important; }
  .msg .ava { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; font-size: 14px !important; }
  .msg .body { padding: 10px 13px !important; border-radius: 10px !important; }
  #sugBox { padding: 0 12px !important; gap: 5px !important; }
  .sug { font-size: 11.5px !important; padding: 4px 9px !important; }
  footer { padding: 10px 12px !important; }
  #inp { padding: 9px 11px !important; font-size: 14px !important; }
  #send { padding: 0 14px !important; font-size: 13px !important; }

  /* ===== Hide AI Tutor + Settings cog if they overlap toolbar (use inline ones only) ===== */
  /* Already handled by responsive pp-header above */
}

/* ===== Phone LANDSCAPE — same rules, slightly more horizontal room ===== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body::before { padding: 5px 12px !important; font-size: 11px !important; }
  .pp-header { padding: 4px 8px !important; }
  #narrator-subtitle { font-size: 11.5px !important; padding: 4px 10px !important; }
}

/* ===== Tablet + PC (≥700px) get the full experience unchanged ===== */
@media (min-width: 700px) {
  body::before { display: none !important; content: none !important; }
}