/* ════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES — iPhone 13 Pro tuned (390×844 CSS px, DPR 3)
   Loaded AFTER styles.css. Touches <=600px / <=480px breakpoints
   without disturbing tablet/desktop layout.
   ════════════════════════════════════════════════════════════════ */

/* ── Global mobile niceties ─────────────────────────────────── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html, body {
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Better tap response: prevent double-tap zoom on interactive elements */
button, .btn, .tab-btn, .choice, select, a[role="button"], [data-tab],
.view-toggle-btn, .more-filters-toggle, .stat-pill, .theme-toggle,
.sound-toggle, .qf-chip, .mobile-filter-toggle {
  touch-action: manipulation;
}

/* Use dynamic viewport units on mobile where supported */
@supports (height: 100dvh) {
  .modal-card, .modal-card--wide { max-height: 92dvh; }
}

/* ── Default: mobile filter toggle hidden on desktop ────────── */
.mobile-filter-toggle { display: none; }
.mobile-filter-backdrop { display: none; }

/* ════════════════════════════════════════════════
   ≤ 600px — phone breakpoint (incl. iPhone 13 Pro)
   ════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── App-wide chrome + safe areas ─────────────────────────── */
  body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  .app-main {
    padding: 12px 12px calc(12px + var(--safe-bottom)) !important;
  }

  /* ── Header: single tight row ─────────────────────────────── */
  .app-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    padding-top: calc(8px + var(--safe-top)) !important;
    min-height: 56px;
  }

  .brand {
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 42%;
    overflow: hidden;
  }
  .brand-mark { flex-shrink: 0; }
  .brand-mark svg { width: 22px; height: 22px; }
  .brand > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* On phone, the logo alone communicates the app — drop the title text
     to reclaim horizontal real-estate for hearts + streak + XP pills. */
  .brand-title { display: none !important; }
  .brand { max-width: 28%; }
  /* Hide the bank-summary line ("1750 questions · 908 Quant ...") to keep header to 1 row */
  .brand-sub { display: none !important; }
  .brand-title-row { gap: 4px; flex-wrap: nowrap; align-items: center; }
  .level-badge { padding: 2px 5px; font-size: 9.5px; flex-shrink: 0; }
  /* Hide the verbose score-est badge in the header — Dashboard already shows it */
  .gmat-score-badge { display: none !important; }

  /* Compact pill row: kill labels, shrink pills, keep one line */
  .header-stats {
    width: auto !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    margin-left: auto;
    justify-content: flex-end !important;
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
  }
  .stat-pill {
    padding: 3px 7px !important;
    border-width: 1.5px;
    font-size: 11px;
    min-height: 26px;
    border-radius: 999px;
    flex-shrink: 1;
  }
  .stat-pill-label { display: none !important; }
  .stat-pill-value { font-size: 12px; }
  .stat-pill-icon { font-size: 12px; }

  .hearts-display { padding: 3px 6px !important; gap: 1px; }
  .heart-icon { font-size: 11px !important; }

  .daily-goal-ring { width: 28px !important; height: 28px !important; }
  .daily-goal-ring svg { width: 28px !important; height: 28px !important; }
  .daily-goal-text { font-size: 7.5px !important; }

  .sound-toggle, .theme-toggle {
    width: 32px !important; height: 32px !important;
    font-size: 13px;
    box-shadow: 0 1.5px 0 var(--border);
  }

  /* XP bar tight under header */
  .xp-bar-wrap { top: auto; height: 16px; }
  .xp-bar-text { font-size: 9px; }

  /* ── Tab bar: tight, single line, scrollable if needed ───── */
  .tab-bar {
    padding: 0 4px !important;
    gap: 0 !important;
    top: auto !important;
    min-height: 48px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    align-items: stretch !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: 12px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex: 0 0 auto !important;
    min-width: max-content;
    min-height: 44px;
    line-height: 1.1;
  }

  /* XP bar wrap: force visible height */
  .xp-bar-wrap {
    height: 18px !important;
    min-height: 18px !important;
    top: auto !important;
    position: relative !important;
  }
  .xp-bar-text { font-size: 9.5px; }

  /* ── Practice layout: question card FIRST, sidebar hidden in drawer ── */
  .practice-layout {
    display: block !important;
    gap: 0 !important;
  }
  .practice-main {
    width: 100%;
    min-width: 0;
  }

  /* Force-undo the polish-pass desktop width override */
  .practice-sidebar {
    width: 100% !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    z-index: 1200;
    max-height: 78vh;
    max-height: 78dvh;
    overflow-y: auto;
    background: var(--surface);
    border-top: 2px solid var(--border-strong, var(--border));
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    padding: 14px 16px calc(20px + var(--safe-bottom));
    transform: translateY(105%);
    transition: transform 0.24s ease;
    -webkit-overflow-scrolling: touch;
  }
  .practice-sidebar.drawer-open {
    transform: translateY(0);
  }

  /* Drag handle visual at top of drawer */
  .practice-sidebar::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong, #cbd5e1);
    margin: 2px auto 12px;
    opacity: 0.7;
  }

  .practice-sidebar .view-toggle { margin-bottom: 12px; }
  .filter-col {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .filter-group { width: 100%; }
  .filter-group select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;  /* prevent iOS auto-zoom */
    padding: 10px 12px;
  }
  .more-filters-toggle { min-height: 44px; font-size: 13px; }

  /* Trigger button + backdrop */
  .mobile-filter-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 0 0 12px 0;
    padding: 11px 14px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    box-shadow: 0 2px 0 var(--border);
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  .mobile-filter-toggle:active { transform: translateY(1px); box-shadow: none; }
  .mobile-filter-toggle-icon { font-size: 16px; }
  .mobile-filter-toggle-label { flex: 1; text-align: left; }
  .mobile-filter-toggle-chev {
    font-size: 12px;
    opacity: 0.6;
    transition: transform 0.2s ease;
  }
  .mobile-filter-toggle[aria-expanded="true"] .mobile-filter-toggle-chev {
    transform: rotate(180deg);
  }

  .mobile-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    z-index: 1150;
    transition: background 0.22s ease;
  }
  .mobile-filter-backdrop.show { background: rgba(15, 23, 42, 0.45); }
  body.drawer-locked { overflow: hidden; }

  /* Daily-Missions and Tip card move to slim cards under the toggle, NOT above question */
  .daily-missions-card,
  .daily-tip-card {
    margin-bottom: 10px;
  }

  /* ── Question card: tighter padding, larger tap targets ──── */
  .question-card {
    padding: 16px 14px 18px !important;
    border-radius: 14px !important;
  }
  .qcard-meta {
    gap: 5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
  }
  .badge {
    padding: 4px 8px;
    font-size: 10px;
    min-height: 24px;
  }
  .qcard-question {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .choice {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 48px;
    border-radius: 12px;
    align-items: center;
  }
  .choice-letter {
    width: 28px !important; height: 28px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }

  .qcard-actions {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .qcard-actions .btn {
    min-height: 44px;
    flex: 1 1 calc(50% - 4px);
  }
  .btn { min-height: 44px; padding: 11px 14px; font-size: 14px; }
  .btn-small { min-height: 36px; padding: 8px 12px; font-size: 12px; }

  .btn-flag, .btn-bookmark, .btn-theory-meta, .btn-copy-question {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important;
  }

  .timer {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* ── Modals: full-bleed safe ─────────────────────────────── */
  .modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    align-self: flex-end;
    max-height: 92vh;
    max-height: 92dvh;
    padding-bottom: var(--safe-bottom);
  }
  .modal-card--wide {
    width: 100% !important;
    height: 96vh !important;
    height: 96dvh !important;
    max-height: 96dvh !important;
  }
  .modal-header { padding: 14px 16px 10px !important; }
  .modal-body { padding: 14px 16px !important; font-size: 14px; }
  .modal-footer {
    padding: 12px 16px calc(12px + var(--safe-bottom)) !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn { flex: 1 1 calc(50% - 4px); }
  .modal-title { font-size: 17px !important; }

  /* Exam setup: stack cleanly */
  .exam-setup-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
  .exam-setup-row select { width: 100%; min-height: 44px; font-size: 16px; }

  /* ── Dashboard cards: 1 col on phone ─────────────────────── */
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .dash-card.big { grid-column: span 1 !important; }
  .dash-card-value { font-size: 26px; }
  .session-tracker { grid-template-columns: repeat(2, 1fr); padding: 10px 6px; }
  .session-tracker .session-stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .session-tracker .session-stat:nth-child(even) { border-right: none; }
  .mastery-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .records-row { grid-template-columns: repeat(2, 1fr); }
  .topic-bar { grid-template-columns: 96px 1fr 60px; font-size: 11px; gap: 8px; }

  /* Section rings: wrap horizontally w/ scroll */
  .section-rings-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .section-ring-card { flex: 0 0 auto; min-width: 110px; }

  /* Activity table: allow horizontal scroll */
  .ta-table-wrap, table { -webkit-overflow-scrolling: touch; }

  /* ── Floating Quill mascot: shrink + reposition so it never sits over choices ── */
  .quill-wrap {
    bottom: calc(12px + var(--safe-bottom)) !important;
    right: 8px !important;
    left: auto !important;
    z-index: 1100;
  }
  .quill-svg { width: 44px !important; height: 52px !important; }
  .quill-bubble { max-width: 140px; font-size: 11px; }
  /* Opt-out for users who want zero mascot on mobile */
  body[data-quill-mobile="off"] .quill-wrap { display: none !important; }
  /* Auto-hide once drawer is open */
  body.drawer-locked .quill-wrap { display: none !important; }

  /* Toasts above safe-area */
  .toast-container {
    bottom: calc(16px + var(--safe-bottom)) !important;
    left: 12px !important;
    right: 12px !important;
  }
  .achievement-toast { min-width: 0 !important; width: 100%; }

  /* Levelup overlay sizing */
  .levelup-star { font-size: 64px; }
  .levelup-title { font-size: 28px; }
  .levelup-sub { font-size: 14px; }

  /* Sticky footer-safe bottom area for inline feedback */
  .feedback-inline-actions {
    flex-direction: column;
    gap: 8px;
    padding: 0 14px 14px;
  }
  .feedback-inline-actions .btn { width: 100%; min-height: 44px; font-size: 14px; }

  /* Hide kbd hints on touch screens */
  .kbd-shortcuts-hint { display: none !important; }

  /* Skill map: smaller padding */
  .skill-map { padding: 10px !important; }

  /* ── Bottom-fixed action bar (Duolingo pattern) ──────────────
     The Check / Continue / Skip / Hint row stays glued to the bottom
     of the viewport so the thumb never has to chase it. We add a
     spacer (padding-bottom on the practice main) so the bar never
     covers the last choice. */
  .practice-main { padding-bottom: 160px; }
  .qcard-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    padding: 12px 14px calc(12px + var(--safe-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "skip hint"
      "submit submit";
    gap: 8px;
  }
  [data-theme="dark"] .qcard-actions {
    background: var(--surface);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  }
  /* Hide action bar when drawer is open so it doesn't poke through backdrop */
  body.drawer-locked .qcard-actions { display: none !important; }
  /* Hide action bar when not on Practice tab */
  body:has(#tab-practice:not(.active)) .qcard-actions { display: none !important; }
  #btn-skip { grid-area: skip; }
  #btn-hint { grid-area: hint; }
  #btn-submit, #btn-next { grid-area: submit; width: 100%; }
  .qcard-actions .btn { min-height: 48px; font-weight: 800; font-size: 15px; }

  /* When feedback panel is shown, action bar simplifies to one Continue button */
  .question-card.has-feedback .qcard-actions {
    grid-template-areas: "submit submit";
  }

  /* ── Stronger "choice selected" affordance ───────────────────
     Duolingo lifts the selected choice with a thicker border, blue
     tint, and a clearer pressed shadow. */
  .choice {
    transition: transform 0.12s var(--easing), box-shadow 0.12s var(--easing),
                background 0.12s var(--easing), border-color 0.12s var(--easing);
  }
  .choice.selected,
  .choice[aria-checked="true"],
  .choice[data-selected="true"] {
    border-color: var(--duo-blue) !important;
    background: var(--duo-blue-bg) !important;
    box-shadow: 0 3px 0 var(--duo-blue), 0 0 0 4px rgba(28,176,246,0.16) !important;
    transform: translateY(-1px);
  }
  .choice.selected .choice-letter,
  .choice[aria-checked="true"] .choice-letter,
  .choice[data-selected="true"] .choice-letter {
    background: var(--duo-blue) !important;
    color: #fff !important;
    border-color: var(--duo-blue) !important;
  }
  .choice:active { transform: scale(0.985); }

  /* ── Tab icons stacked above labels (Duolingo bottom-nav vibe) ── */
  .tab-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 7px 10px !important;
    min-height: 52px !important;
  }
  .tab-ico { font-size: 17px; line-height: 1; }
  .tab-label { font-size: 10.5px; line-height: 1; letter-spacing: 0.04em; }

  /* Review subtabs: 7 buttons would overflow — horizontal scroll like main tab-bar */
  .review-subtabs {
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -2px;
    margin-right: -2px;
    padding-bottom: 2px;
  }
  .review-subtabs::-webkit-scrollbar { display: none; }
  .review-subtab {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    flex: 0 0 auto !important;
    min-width: max-content;
    min-height: 44px;
  }

  /* Hard cap: no child of any tab-panel may exceed the viewport width */
  .tab-panel { max-width: 100vw; overflow-x: hidden; }
}

/* ════════════════════════════════════════════════
   ≤ 380px — very small phones (iPhone SE, mini)
   ════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .brand-title { font-size: 14px; }
  .brand-sub { max-width: 50vw; }
  .stat-pill { padding: 3px 6px !important; }
  .stat-pill-value { font-size: 11px; }
  .hearts-display { display: none !important; }  /* reclaim width */
}

/* ════════════════════════════════════════════════
   Landscape phone — keep drawer reachable
   ════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .practice-sidebar { max-height: 90vh; }
  .app-header { padding-top: calc(6px + var(--safe-top)) !important; }
  .quill-wrap { display: none !important; }
}

/* ════════════════════════════════════════════════
   Dark theme tweaks
   ════════════════════════════════════════════════ */
@media (max-width: 600px) {
  [data-theme="dark"] .practice-sidebar {
    background: var(--surface);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
  }
  [data-theme="dark"] .mobile-filter-backdrop.show {
    background: rgba(0, 0, 0, 0.6);
  }
}