/* ==========================================================================
   ExamCracker AI — Final Mobile Containment Layer
   Purpose: fix horizontal overflow/intrinsic-width bugs on phones/tablets.
   Desktop (1024px+) is intentionally untouched.
   ========================================================================== */

@media (max-width: 1023px) {
  .app-main,
  .page-view,
  .page-view > *,
  .page-view .card,
  .page-view .stat-card,
  .page-view .dashboard-grid > *,
  .page-view .rooms-grid > *,
  .page-view .pricing-grid > *,
  .page-view .cbt-container > *,
  .page-view .doubt-solver-layout > * {
    min-width: 0;
  }

  .app-main,
  .page-view {
    max-width: 100%;
  }

  .page-view,
  .page-view * {
    max-width: 100%;
  }

  .page-view input,
  .page-view select,
  .page-view textarea,
  .page-view button {
    max-width: 100%;
  }

  img, svg, video, canvas, iframe {
    max-width: 100%;
  }

  .app-header,
  .header-left,
  .header-right,
  .exam-picker-wrap,
  .countdown-box {
    min-width: 0;
  }

  .header-left > *,
  .header-right > * {
    min-width: 0;
  }

  .exam-picker-wrap {
    flex: 1 1 0;
    overflow: hidden;
  }

  .exam-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .countdown-box {
    flex-shrink: 1;
  }

  .card-header,
  .card-header > div,
  .card-title,
  .card-subtitle,
  .stat-info,
  .welcome-banner > div {
    min-width: 0;
    max-width: 100%;
  }

  .card-title,
  .card-subtitle,
  .welcome-title,
  .welcome-desc,
  .stat-label,
  .stat-value,
  .stat-meta,
  .question-text,
  .option-content,
  .upload-title,
  .upload-subtitle,
  .card-content-body {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .dashboard-grid,
  .stat-grid,
  .rooms-grid,
  .pricing-grid,
  .weakness-heatmap-grid,
  .cbt-container,
  .doubt-solver-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stat-card {
    width: 100%;
    max-width: 100%;
  }

  .stat-card .stat-info {
    flex: 1 1 auto;
  }

  .welcome-banner,
  .quick-action-bar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .syllabus-upload-zone,
  .syllabus-upload-zone > * {
    min-width: 0;
    max-width: 100%;
  }

  .syllabus-upload-zone {
    width: 100%;
    overflow: hidden;
  }

  .table-responsive,
  .table-wrap,
  .leaderboard-table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }

  .cbt-main-arena,
  .cbt-sidebar-panel,
  .cbt-top-bar,
  .cbt-question-body,
  .cbt-action-footer,
  .q-header-meta,
  .question-text,
  .option-item,
  .option-content {
    min-width: 0;
    max-width: 100%;
  }

  .cbt-top-bar,
  .cbt-action-footer,
  .q-header-meta {
    flex-wrap: wrap;
  }

  .q-topic-label {
    min-width: 0;
    max-width: 100%;
  }

  .option-item {
    width: 100%;
  }

  .option-content {
    flex: 1 1 auto;
  }

  .flashcards-container,
  .card-scene,
  .flashcard-3d,
  .card-face,
  .card-content-body,
  .leitner-controls {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .card-face {
    overflow: hidden;
  }

  .leitner-controls {
    flex-wrap: wrap;
  }

  .btn-rating {
    min-width: 0;
  }

  .chat-history-sidebar,
  .chat-messages-wrap,
  .chat-messages-stream,
  .chat-input-bar,
  .chat-input,
  .chat-msg {
    min-width: 0;
    max-width: 100%;
  }

  .msg-bubble {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .score-summary-banner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }

  .page-view span[style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  .page-view [style*="grid-template-columns:repeat(3, 1fr)"],
  .page-view [style*="grid-template-columns: repeat(3, 1fr)"],
  .page-view [style*="grid-template-columns:1fr 1fr 1fr"],
  .page-view [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .btn {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-view pre,
  .page-view code,
  .page-view .ai-solution-box {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 767px) {
  .app-header {
    height: auto;
    min-height: var(--header-height);
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    flex-wrap: nowrap;
    gap: 10px;
  }

  .header-left {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .header-right {
    flex: 0 1 auto;
    width: auto;
    max-width: 45%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .header-right .streak-pill,
  .header-right .xp-pill {
    display: none;
  }

  .mobile-nav-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  .exam-picker-wrap {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .exam-label {
    flex: 0 0 auto;
  }

  .exam-select {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.95rem;
  }

  .countdown-box {
    display: none;
  }

  .page-view {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: clip;
  }

  .card {
    width: 100%;
    max-width: 100%;
  }

  .welcome-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-action-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-action-bar .btn {
    width: 100%;
    flex: 0 1 auto;
  }

  .stat-card {
    align-items: flex-start;
  }

  .syllabus-upload-zone {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card-scene {
    height: clamp(280px, 75vw, 380px);
  }

  .card-face {
    padding: clamp(18px, 5vw, 36px);
  }

  .doubt-solver-layout {
    height: auto;
  }

  .chat-history-sidebar {
    display: none;
  }

  .chat-messages-wrap {
    min-height: 70dvh;
  }

  .palette-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .palette-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-box {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 480px) {
  .app-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-view {
    padding-left: 10px;
    padding-right: 10px;
  }

  .card {
    padding: 18px;
  }

  .card-title {
    font-size: 1.05rem;
  }

  .exam-label {
    display: none;
  }

  .exam-picker-wrap {
    max-width: 100%;
  }

  .header-right {
    max-width: none;
  }
}

@media (max-width: 1023px) {
  #view-study-planner .card-header { min-width:0; flex-wrap:wrap; gap:14px; }
  #view-study-planner .card-header > div:last-child { width:100%; flex-wrap:wrap; justify-content:flex-start; }
  #recalculateScheduleBtn { min-height:44px; flex:1 1 220px; }
  #studyHoursPerDaySelect { min-width:0; max-width:100%; }
  #view-pyq-radar .card-header { min-width:0; }
  #pyqRadarContainer { min-width:0; max-width:100%; }
  #pyqRadarContainer .leaderboard-table { min-width:760px; }
  #pyqRadarContainer .table-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #view-study-planner .planner-timeline, #plannerDaysContainer { min-width:0; max-width:100%; }
  #view-study-planner .plan-day-header { min-width:0; flex-wrap:wrap; }
  #view-study-planner .plan-task-item { min-width:0; }
  #view-study-planner .plan-task-item span { min-width:0; overflow-wrap:anywhere; }
}
@media (max-width: 767px) {
  #view-study-planner .card { padding:16px; }
  #view-study-planner .card-header > div:last-child { display:grid !important; grid-template-columns:1fr; }
  #recalculateScheduleBtn { width:100%; }
}

/* Production entitlement + mobile presentation refinements */
.feature-locked { opacity:.78; }
.feature-locked:hover { opacity:1; }
.locked-feature { color:var(--text-dim)!important; opacity:.82; }
.locked-feature::after { content:"  Upgrade to unlock"; color:var(--amber-gold); font-size:.7rem; }
.pyq-mobile-list { display:none; }

@media (max-width: 767px) {
  #view-study-planner .card-header > div:last-child {
    width:100%;
    display:flex!important;
    flex-direction:column;
    align-items:stretch!important;
    gap:10px;
  }
  #studyHoursPerDaySelect,
  #recalculateScheduleBtn { width:100%; max-width:100%; min-height:44px; }
  #view-study-planner .plan-day-header { gap:12px; }
  #view-study-planner .plan-day-header > div:last-child { width:100%; text-align:left!important; }
  #view-study-planner .plan-task-item { align-items:flex-start!important; }
  #view-study-planner .plan-task-item span { white-space:normal!important; }
  .pyq-desktop-table { display:none!important; }
  .pyq-mobile-list { display:grid; gap:12px; }
  .pyq-mobile-card {
    background:rgba(255,255,255,.025);
    border:1px solid var(--border-subtle);
    border-radius:12px;
    padding:14px;
    min-width:0;
  }
  .pyq-mobile-top { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; }
  .pyq-mobile-top > div { min-width:0; }
  .pyq-mobile-top strong { display:block; color:#fff; overflow-wrap:anywhere; }
  .pyq-mobile-top small { display:block; color:var(--text-dim); margin-top:4px; overflow-wrap:anywhere; }
  .pyq-mobile-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
  .pyq-mobile-meta span { background:rgba(255,255,255,.03); border-radius:8px; padding:9px; color:var(--text-muted); font-size:.75rem; }
  .pyq-mobile-meta b { display:block; color:#fff; margin-top:2px; }
  .pyq-mobile-card .pyq-solve-btn { width:100%; min-height:42px; }
  #pricingGrid .pricing-card { min-width:0; width:100%; }
}