/* ============================================================================
   MaroAI — Responsive Layer  (v2 — safer, narrower rewrite)
   ----------------------------------------------------------------------------
   v1 broke the mobile layout because (a) it loaded before the app's own
   <style> blocks, so equal-specificity rules from the app silently won
   despite matching later in this file, and (b) a couple of rules used
   broad wildcard selectors (matching by inline style content) without
   being verified against the real DOM, which is risky in a codebase this
   large. This version:
     - is loaded LAST in the document (see index.html, right before
       </body>) so it reliably wins ties without needing !important
       everywhere,
     - only targets class/id selectors that were verified to exist in the
       actual markup,
     - keeps .app as a CSS grid (just collapsed to one column) instead of
       switching to block, since other rules (like .topbar's
       grid-column:1/-1) are meaningless outside a grid context and
       switching away from grid entirely is what most likely broke the
       tabs/site-list layout,
     - drops the speculative "any div with an inline flex style" rules
       entirely rather than risk matching something unintended.

   Breakpoints:
     >= 1025px  desktop (unchanged — the app's original design)
     769–1024px tablet / small laptop
     <= 768px   phone / small tablet
     <= 480px   phone
   ========================================================================= */

/* ── Universal safety net — harmless at any size ────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; height: auto; }

@media (pointer: coarse) {
  button, a, .tab { min-height: 30px; }
}

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

/* ============================================================================
   TABLET / SMALL LAPTOP  (1024px and below) — narrower sidebar only,
   everything else stays exactly as designed.
   ========================================================================= */
@media (max-width: 1024px) {
  .app { grid-template-columns: 220px 1fr; }
  .topbar { padding: 0 16px; gap: 12px; }
  .main { padding: 16px !important; }
}

/* ============================================================================
   PHONE / SMALL TABLET  (768px and below)
   ========================================================================= */
@media (max-width: 768px) {
  /* Still a grid — just one column now, with the sidebar taken out of flow
     below (position:fixed) so it doesn't reserve a column at all. Keeping
     display:grid (rather than switching to block) preserves the context
     that .topbar's own `grid-column:1/-1` and similar rules expect. */
  .app { grid-template-columns: 1fr; }

  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-tag { display: none !important; } /* first thing to drop — decorative, not functional */
  .topbar-status { font-size: 10px; padding: 4px 8px; }
  .maroai-account-badge-email { display: none !important; } /* saves space; email is still on /account.html */

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(84vw, 320px);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
  }
  /* mobile-nav.js toggles this class on <body> — pure presentation */
  body.maroai-sidebar-open .sidebar { transform: translateX(0); }
  body.maroai-sidebar-open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(10,14,26,.45);
    z-index: 190;
  }

  .main { padding: 12px !important; }

  /* The site-tabs / all-websites rows already scroll horizontally by design
     (overflow-x:auto is set inline in the markup) — just make that scroll
     smoother on touch instead of changing how their contents lay out. */
  #site-tabs-bar, #all-websites-bar, .tabs {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   PHONE  (480px and below)
   ========================================================================= */
@media (max-width: 480px) {
  .card { padding: 14px !important; }
  .main { padding: 8px !important; }
}

/* ============================================================================
   Mobile sidebar toggle button — inserted by mobile-nav.js
   ========================================================================= */
.maroai-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #f4f6fb;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .maroai-nav-toggle { display: inline-flex; }
}
