/* ════════════════════════════════════════════════════════════════
   PROJECT ASCEND — RESPONSIVE  (drop-in, zero JS changes)
   Breakpoints:
     Desktop  > 1024px  original layout untouched
     Tablet   641–1024px  icon sidebar, grids shrink
     Mobile   ≤ 640px   bottom-nav, drawer sidebar, full reflow
════════════════════════════════════════════════════════════════ */

/* ── Tokens used only in this file ── */
:root {
  --bnav-h: 62px;
}

/* ══════════════════════════════════════════════════════
   ELEMENTS ADDED BY index.html  (hidden until needed)
══════════════════════════════════════════════════════ */

/* Hamburger */
#mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  -webkit-app-region: no-drag;
}

/* Overlay backdrop */
#sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 299;
  opacity: 0; pointer-events: none;
  transition: opacity 0.26s ease;
}
#sidebar-backdrop.visible { opacity: 1; pointer-events: all; }

/* Bottom nav */
#bottom-nav { display: none; }


/* ══════════════════════════════════════════════════════
   TABLET  641px – 1024px
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  html, body { overflow: auto; }

  /* Lock sidebar to icons only */
  #sidebar                   { width: 60px !important; flex-shrink: 0; }
  #sidebar:hover             { width: 60px !important; }
  #sidebar:hover .nav-label  { opacity: 0 !important; pointer-events: none !important; }
  #sidebar:hover .logo-text  { opacity: 0 !important; max-width: 0 !important; }

  .page       { padding: 20px 18px; }
  .stat-grid  { grid-template-columns: repeat(2,1fr); }
  .grid-3     { grid-template-columns: 1fr 1fr; }
  #mt-shell   { grid-template-columns: 1fr; }
  #mt-panel   { border-left: none; border-top: 1px solid var(--border); max-height: 240px; }
  #titlebar   { padding: 0 10px; gap: 8px; }
  #user-name  { display: none; }
}


/* ══════════════════════════════════════════════════════
   MOBILE  ≤ 640px
══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Root scroll ── */
  html, body { overflow-y: auto; height: 100%; }

  /* ── App shell: sidebar is fixed/out-of-flow, content takes full width ── */
  #app {
    flex-direction: row;
    height: auto; min-height: 100svh; overflow: visible;
  }

  /* ── Sidebar → off-canvas drawer, completely out of normal flow ── */
  #sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 270px !important;
    z-index: 300;
    background: var(--bg1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1) !important;
    overflow-x: hidden; overflow-y: auto;
    padding-bottom: 28px;
    /* Remove from flex flow entirely */
    flex-shrink: 0;
    margin: 0 !important;
  }
  #sidebar.open { transform: translateX(0) !important; }

  /* Labels visible inside open drawer */
  #sidebar.open .nav-label {
    opacity: 1 !important; transform: translateX(0) !important;
    pointer-events: all !important;
  }
  #sidebar.open .logo-text {
    opacity: 1 !important; transform: translateX(0) !important;
    max-width: 160px !important;
  }
  .nav-item { width: calc(100% - 10px); }

  /* Show backdrop */
  #sidebar-backdrop { display: block; }

  /* ── Content area takes FULL width since sidebar is fixed ── */
  #content-area {
    width: 100% !important;
    min-width: 0;
    height: auto; min-height: 100svh;
    overflow: visible; display: flex; flex-direction: column;
    margin-left: 0 !important;
  }

  /* ── Titlebar ── */
  #titlebar {
    height: 52px; padding: 0 14px; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    -webkit-app-region: no-drag;
  }
  #mobile-menu-btn { display: none !important; }
  #clock             { display: none; }
  #user-name         { display: none; }
  .titlebar-controls { display: none; }
  #streak-badge      { padding: 2px 8px; }
  #streak-badge span { font-size: 10px; }

  /* ── Page container: clips children, fills content area ── */
  #page-container {
    position: relative;
    flex: 1;
    overflow: hidden;
    height: 100%;
  }

  /* ── Pages: absolutely stacked, display-switched ── */
  .page {
    position: absolute !important;
    inset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 14px var(--bnav-h);
    display: none !important;
  }
  .page.active {
    display: block !important;
    pointer-events: all !important;
  }
  /* chat page needs no padding + flex, not scroll */
  #page-chat {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Page layout helpers ── */
  .page-header  { flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .page-title   { font-size: 21px; }
  .page-header > div:last-child { flex-wrap: wrap; gap: 8px; }

  /* ── Global grids ── */
  .stat-grid        { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .stat-val         { font-size: 20px; }
  .stat-card        { padding: 13px; }
  .grid-2, .grid-3  { grid-template-columns: 1fr; gap: 12px; }
  .card             { padding: 14px; }
  .btn              { padding: 8px 14px; font-size: 12px; }
  .tab-bar          { overflow-x: auto; flex-wrap: nowrap; width: 100%; }

  /* ── Modals → bottom sheets ── */
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 88svh;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    padding: 22px 16px 32px;
    transform: translateY(100%) !important;
  }
  .modal-overlay.open .modal { transform: translateY(0) !important; }

  /* ── Toasts ── */
  #toast-container { right: 10px; left: 10px; bottom: calc(var(--bnav-h) + 8px); }
  .toast { max-width: 100%; }

  /* ════ BOTTOM NAV ════ */
  #bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bnav-h);
    background: rgba(7,7,14,0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 100;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #bottom-nav::-webkit-scrollbar { display: none; }
  .bnav-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    padding: 4px 10px; border-radius: 10px;
    cursor: pointer; color: var(--text3);
    flex: 0 0 auto;
    min-width: 52px;
    transition: color var(--smooth);
    -webkit-tap-highlight-color: transparent;
  }
  .bnav-item.active     { color: var(--indigo2); }
  .bnav-item svg        { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--spring); }
  .bnav-item.active svg { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(108,99,255,0.75)); }
  .bnav-label {
    font-size: 9px; font-weight: 600;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
    letter-spacing: 0.02em;
  }

  /* ════ PAGE-SPECIFIC FIXES ════ */

  /* ── Dashboard ── */
  .stat-grid[style*="repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
  .card[style*="height:230px"]  { height: auto !important; min-height: 160px !important; }
  #page-dashboard canvas        { max-height: 130px !important; }
  #rank-banner [style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-direction: column !important; gap: 10px !important; align-items: flex-start !important;
  }
  #rank-pred-val { font-size: 28px !important; }

  /* ── Tasks kanban 3-col → single stack ── */
  #page-tasks [style*="grid-template-columns:1fr 1fr 1fr"] {
    display: flex !important; flex-direction: column !important; gap: 20px !important;
  }
  #page-tasks .page-header [style*="display:flex;gap:10px"] select {
    width: 100% !important; flex: 1 1 40% !important;
  }

  /* ── Timer 2-col → stack ── */
  #page-timer [style*="grid-template-columns:1fr 360px"] {
    display: flex !important; flex-direction: column !important; gap: 16px !important;
  }
  /* Shrink timer ring */
  #page-timer [style*="width:220px"][style*="height:220px"] {
    width: 180px !important; height: 180px !important;
  }
  #timer-display { font-size: 28px !important; }

  /* ── Mocks 5-col stats → 2-col ── */
  .stat-grid[style*="repeat(5"] { grid-template-columns: repeat(2,1fr) !important; }
  #page-mocks [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }
  #mocks-table { min-width: 580px; }

  /* ── Rank 360px+1fr → stack ── */
  #page-rank [style*="grid-template-columns:360px 1fr"] {
    display: flex !important; flex-direction: column !important; gap: 16px !important;
  }

  /* ── Resources ── */
  #page-resources [style*="display:flex;gap:12px;margin-bottom:20px"] {
    flex-direction: column !important;
  }
  #resources-grid { grid-template-columns: 1fr !important; }

  /* ── AI page full-bleed grid → stack ── */
  #page-ai [style*="grid-template-columns:220px 1fr"] {
    display: flex !important; flex-direction: column !important;
    height: auto !important; margin: -16px -14px !important;
  }
  /* Saved-chats sidebar: compact bar */
  #page-ai [style*="background:var(--bg1);border-right:1px solid var(--border)"] {
    height: auto !important; max-height: 52px !important;
    flex-direction: row !important; align-items: center !important;
    overflow: hidden !important;
    border-right: none !important; border-bottom: 1px solid var(--border) !important;
    padding: 8px 12px !important;
  }
  #saved-chats-list { display: none !important; }
  #page-ai [style*="padding:16px 14px 10px"] { padding: 8px 10px !important; }
  /* Main chat column */
  #page-ai [style*="display:flex;flex-direction:column;height:100%;overflow:hidden"]:last-child {
    height: auto !important; min-height: 70svh !important;
  }
  /* Chat panel */
  #ai-panel-chat { padding: 0 10px 10px !important; height: auto !important; }
  /* Messages container allow scroll */
  #chat-messages { flex: 1; overflow-y: auto; max-height: 52svh; }
  .ai-bubble-user { max-width: 92% !important; }
  .ai-bubble-ai   { max-width: 96% !important; }
  /* Planner/analyser inner 2-col → stack */
  #ai-panel-planner  [style*="grid-template-columns:320px"],
  #ai-panel-analyser [style*="grid-template-columns:320px"] {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
  }
  .sel-mode-btn { padding: 5px 10px !important; font-size: 11px !important; }
  .ai-tab-btn   { padding: 6px 10px !important; font-size: 11px !important; }

  /* ── Settings 2-col → stack ── */
  #page-settings [style*="grid-template-columns:1fr 1fr"] {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
  }

  /* ── Profile 360px+1fr → stack ── */
  /* profile: 1fr 340px → single column, preview card moves below */
  #page-profile [style*="grid-template-columns:1fr 340px"] {
    display: flex !important; flex-direction: column !important; gap: 16px !important;
  }
  /* hide sticky preview on mobile — too long */
  #page-profile [style*="position:sticky"] {
    position: static !important;
  }
  /* profile stats: 3-col → 2-col */
  #profile-stats { grid-template-columns: repeat(2,1fr) !important; }
  /* profile inner grids: pronouns+banner color side by side → stack */
  #page-profile [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Planner/Calendar ── */
  /* Weekly: 7-col → vertical cards */
  #page-calendar #cal-grid[style*="repeat(7,1fr)"] {
    display: flex !important; flex-direction: column !important; gap: 10px !important;
  }
  /* Monthly: keep 7-col but shrink cells */
  #page-calendar #cal-grid:not([style*="repeat(7,1fr)"]) [style*="min-height:82px"] {
    min-height: 54px !important; padding: 5px 6px !important;
  }
  /* AI schedule rest-day chips wrap */
  #ai-rest-days { flex-wrap: wrap !important; }
  /* Detail card */
  #cal-detail .card { padding: 14px; }

  /* ── Mock test ── */
  #mt-shell   { grid-template-columns: 1fr !important; height: auto !important; }
  #mt-topbar  { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }
  #mt-body    { padding: 12px !important; }
  #mt-footer  { flex-wrap: wrap; gap: 8px; }
  #mt-panel   { border-left: none; border-top: 1px solid var(--border); max-height: 280px; }
  #mt-timer   { font-size: 16px !important; }
  .qp-btn     { width: 32px !important; height: 32px !important; font-size: 11px !important; }
  .opt-btn    { padding: 10px 12px !important; font-size: 12px !important; }
  .int-input  { font-size: 22px !important; width: 140px !important; }
  /* Results: 5-col → 2-col + 3-col */
  #page-mocktest [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  #page-mocktest [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Extra small ≤ 380px ── */
@media (max-width: 380px) {
  .stat-val   { font-size: 18px !important; }
  .page       { padding: 10px 10px var(--bnav-h) !important; }
  .page-title { font-size: 18px !important; }
  #page-profile #profile-stats { grid-template-columns: 1fr 1fr !important; }
}