/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 768 px)
   ═══════════════════════════════════════════════════════════ */

/* Bottom nav hidden on desktop */
.mobile-bottom-nav { display: none; }
.mob-toc-toggle-btn { display: none; }

@media (max-width: 768px) {

  /* ── Dynamic viewport height for iOS Safari ── */
  body {
    height: 100vh;
    height: 100dvh;
  }

  /* ── Header: strip center tabs + tagline, keep logo + actions ── */
  .header-tabs { display: none !important; }
  .header-sub  { display: none !important; }
  .header-sep  { display: none !important; }
  header { padding: 0 14px; gap: 0; }

  /* ── App area: subtract header (52px) + bottom nav (57px + safe-area) ── */
  .app {
    height: calc(100vh  - 52px - 57px);
    height: calc(100dvh - 52px - 57px);
  }

  /* ── Panels: fill full width ── */
  .panel { width: 100%; min-width: 0; }

  /* ── Feed sidenav: hidden on mobile (bottom nav replaces it) ── */
  .feed-sidenav { display: none !important; }
  /* Remove the concave corner decoration that relies on sidenav width */
  .feed-sidenav::after { display: none; }

  /* ─────────────── SEARCH TAB ─────────────── */

  .search-area { padding: 10px 14px 0; gap: 8px; }

  /* Scrollable filter/tab bar */
  .filter-bar {
    padding: 0 14px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .result-tabs { flex-wrap: nowrap; gap: 10px; }

  /* Results */
  .results-area { padding: 0 12px 80px; }
  .law-circles-row { padding: 8px 12px 4px; }

  /* Cards: slightly tighter */
  .card { padding: 11px 13px; }

  /* Search bar */
  .search-unit { padding: 4px 4px 4px 14px; }
  .search-unit-submit { padding: 0 14px; font-size: 12px; height: 32px; }

  /* ─────────────── DOCUMENTS TAB ─────────────── */

  /* Doc bar: compact */
  .doc-bar-item { height: 36px; padding: 0 10px 0 0; font-size: 11px; }
  .doc-bar-label { max-width: 130px; }

  /* TOC: hidden by default, full-screen overlay when open */
  .lex-toc {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: calc(57px + env(safe-area-inset-bottom, 0px));
    width: 100% !important;
    z-index: 210;
    border-right: none;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .lex-toc.mob-toc-open { display: flex; flex-direction: column; }

  .lex-toc-resizer { display: none !important; }

  /* Body: full width, readable padding, clear bottom for nav */
  .lex-body { padding: 20px 18px 80px; }
  .lex-reading-col { max-width: 100%; }

  /* TOC close button (appears inside TOC on mobile) */
  .mob-toc-close-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .mob-toc-close-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    letter-spacing: .3px;
    text-transform: uppercase;
  }
  .mob-toc-close-btn {
    width: 28px; height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .12s;
  }
  .mob-toc-close-btn:hover { background: var(--border2); }

  /* TOC toggle button: appears above the document body on mobile */
  .mob-toc-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    flex-shrink: 0;
    font-family: inherit;
    transition: color .12s, background .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-toc-toggle-btn:hover,
  .mob-toc-toggle-btn.active { color: var(--accent); background: var(--accent-bg); }
  .mob-toc-toggle-btn i { font-size: 14px; }

  /* In-doc search bar: keep but compact */
  .doc-search-bar { padding: 5px 10px; gap: 6px; }

  /* ─────────────── MY RUNES TAB ─────────────── */

  /* Folder panel: horizontal scrollable pill row */
  .bm-tab-layout { flex-direction: column; }
  .folder-panel {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
    overflow: visible;
    flex-direction: row !important;
  }
  .folder-panel.visible { display: flex; }
  .folder-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 10px;
    gap: 6px;
    scrollbar-width: none;
  }
  .folder-list::-webkit-scrollbar { display: none; }
  .folder-item {
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .folder-item.active {
    background: var(--accent-bg);
    border-color: var(--accent-bg2);
    color: var(--accent);
  }
  .folder-item-count { display: none; }
  .folder-new-btn { display: none; }

  .bm-search-wrap { padding: 8px 12px 4px; }
  .bm-modal-results-area { padding: 8px 12px 80px; }

  /* ─────────────── SIDEBARS ─────────────── */

  /* Detail sidebar: bottom sheet on mobile.
     Anchored to bottom:0 so translateY(100%) pushes it fully below the viewport.
     When open it covers the bottom nav — that's correct UX for a bottom sheet.   */
  .detail-sidebar {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 88vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .detail-sidebar.open { transform: translateY(0); }

  /* Comment sidebar: slide in from right, full height minus header.
     bottom: 0 so the translateX off-screen is clean with no shadow peek. */
  .comment-sidebar-wrap {
    right: calc(-100vw - 8px);
    width: 100%;
    border-radius: 0;
    bottom: 0;
    top: 52px;
  }
  .comment-sidebar-wrap.open { right: 0; }
  .comment-sidebar-wrap.split { width: 100%; }
  /* Hide norm split panel on mobile (too narrow) */
  .norm-split-panel { display: none !important; }
  .split-panel-resizer { display: none !important; }
  .comment-sidebar-split-btn { display: none !important; }
  .comment-sidebar-split-stub { display: none !important; }

  /* Citing / history sidebars: bottom sheet on mobile */
  .by-citing-sidebar {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 80vh;
    border-radius: 16px 16px 0 0;
    border: none;
    border-top: 1px solid var(--border);
    transform: translateY(calc(100% + 20px));
    transition: transform .22s cubic-bezier(.4,0,.2,1);
  }
  .by-citing-sidebar.open { transform: translateY(0); }

  /* ─────────────── OVERLAYS & MODALS ─────────────── */

  /* Essay viewer: full screen */
  .essay-viewer-overlay .essay-viewer-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .essay-viewer-overlay { align-items: stretch; padding: 0; }

  /* Edit-profile modal: centered, auto height */
  .ep-modal {
    width: 92%;
    height: auto;
    max-height: 90vh;
    border-radius: var(--radius);
  }

  /* Login wall modal */
  .lw-modal { width: 92%; }

  /* Commentary overlay */
  .commentary-overlay .commentary-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .commentary-overlay { align-items: stretch; }

  /* Profile popup: don't clip off right edge */
  .profile-popup { right: 0; min-width: 180px; }
  .guest-popup   { right: 0; min-width: 160px; }

  /* ─────────────── TOASTS ─────────────── */

  /* Share toast: above bottom nav */
  .share-toast {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* Update toast: full width on mobile */
  .update-toast {
    left: 16px;
    right: 16px;
    max-width: none;
    top: 62px;
  }

  /* ═══════════════════════════════════════════════════════════
     BOTTOM NAVIGATION BAR
     ═══════════════════════════════════════════════════════════ */

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: rgba(245,245,247,.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
    /* Account for iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(57px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  [data-theme="dark"] .mobile-bottom-nav {
    background: rgba(15,15,15,.94);
  }

  .mbn-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 57px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text3);
    transition: color .18s;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    font-family: inherit;
  }
  .mbn-tab i {
    font-size: 22px;
    line-height: 1;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  .mbn-tab span {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1;
  }
  .mbn-tab.active { color: var(--accent); }
  .mbn-tab.active i { transform: scale(1.1); }

  /* ─────────────── INPUT ZOOM PREVENTION ─────────────── */
  /* iOS Safari zooms the viewport when a focused input has font-size < 16px.
     Bump every interactive input to 16px on mobile.                          */
  input, textarea, select {
    font-size: 16px !important;
  }
  /* Re-apply correct sizes for specific elements after the blanket override */
  .search-input         { font-size: 16px !important; }
  .doc-search-input     { font-size: 16px !important; }
  .bm-search-input      { font-size: 16px !important; }
  .fef-input            { font-size: 16px !important; }
  .ep-input             { font-size: 16px !important; }
  .art-minimap-search-input { font-size: 16px !important; }
  .input-sm             { font-size: 16px !important; }

  /* ─────────────── ARTICLE MINIMAP ─────────────── */
  /* The minimap sits at right:4px, width:38px → 42px from edge.
     Add matching right padding to the body so text never slides under it. */
  .lex-body { padding-right: 48px; }

} /* end @media (max-width: 768px) */