/* ═══════════════════════════════════════════════════════════
 *  Anvár — mobile-friendly overrides
 * ═══════════════════════════════════════════════════════════
 *
 *  All rules below apply ONLY at viewport widths ≤ 768px.
 *  The desktop layout in layout.css is the source of truth at
 *  larger widths; this file is layered on top to retrofit the
 *  shell for phone-class screens.
 *
 *  Phase 1 scope (v4.5.x):
 *    • Top header compaction (hide subtitle/version, shrink chrome)
 *    • Sidebar = main content column → drop min-width + border
 *    • Tree splitter hidden (no useful touch affordance)
 *    • Books-tab list+reader stack vertically (1-col grid)
 *    • Books-tab picker+search row stack (1-col grid)
 *    • Search-tab toolbar wraps + inputs grow to row width
 *
 *  Drawer/hamburger pattern was considered and dropped — the
 *  element called `.sidebar` is actually the entire content
 *  column (it wraps every tab-panel and the settings overlay),
 *  so hiding it behind a hamburger would hide the whole app.
 *  Loaded after layout.css and auth.css.
 */

@media (max-width: 768px) {

  /* ── Top header compaction ───────────────────────────── */
  /* Most existing chrome rules in layout.css use ID selectors
     (#top-version-wrap, #top-recommend-btn, etc.); match the
     specificity here so our overrides actually win. !important
     is used on the hide rules as belt-and-suspenders against
     any future inline-style or higher-specificity additions.
     v4.5.8 — Clamp .top-inner to 100vw and respect safe-area
     insets. layout.css's max-width:1280px + margin:0 auto was
     letting content overflow on both sides of an iPhone-width
     viewport (brand icon + start of "انوار" pushed off the
     left edge). Force the inner row to fit the viewport and
     allow .top-nav to shrink so flex can rebalance. */
  .top-inner       {
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    /* overflow-x: hidden (NOT overflow: hidden) — clip horizontal
       overflow so the brand + nav can't push past the viewport,
       but allow VERTICAL overflow so dropdowns anchored inside
       (.badge-menu, .help-menu) can drop below the header. */
    overflow-x: hidden;
    overflow-y: visible;
  }
  .top-nav {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  .brand-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-icon      { width: 28px !important; height: 28px !important; }
  .brand-title     { font-size: 1.05rem !important; }
  .brand-subtitle  { display: none !important; }
  .top-nav         { gap: 4px !important; }
  /* Version label is pinned absolute right:28px on desktop with
     the 💡 lightbulb beside it. On mobile we put the version
     back inline in the top-nav flex flow (it keeps its order:5
     from layout.css, landing visually after the lang toggle on
     the right end of the header) and drop the lightbulb. The
     absolute / transform / top properties from the desktop rule
     are all explicitly cleared so the inline-flex positioning
     wins cleanly. */
  #top-version-wrap {
    /* Pin to the far right edge of the top header, using the same
       absolute-position approach as desktop. The .top element is
       position:sticky in layout.css, which acts as the containing
       block for this absolute child. right:4px puts it as close
       to the viewport edge as looks clean. Taking it out of the
       flex flow leaves HELP/farzin/فارسی untouched in .top-nav. */
    display: inline-flex !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 0 !important;
    flex-shrink: 0;
  }
  #top-recommend-btn { display: none !important; }
  .top-version {
    font-size: .7rem !important;
    color: rgba(122, 59, 46, .75) !important;
    opacity: 1 !important;
    white-space: nowrap;
  }
  .help-trigger    { padding: 6px 8px !important; font-size: .78rem !important; }
  #ui-lang-toggle  { padding: 6px 8px !important; font-size: .78rem !important; }
  /* User badge name truncates harder so it doesn't push nav
     buttons off-screen for long Persian names. */
  .badge-name      { max-width: 90px !important; overflow: hidden !important;
                     text-overflow: ellipsis !important; }

  /* ── iOS Safari viewport-height fix ──────────────────── */
  /* layout.css sets .app { height: calc(100vh - var(--top-h)) }
     which is wrong on iOS Safari: 100vh resolves to the page
     height with the address bar COLLAPSED, not the actually-
     visible height when the bar is showing. 100dvh ("dynamic
     viewport height") tracks the actual visible area. */
  .app {
    height: calc(100dvh - var(--top-h)) !important;
  }
  /* v4.5.3 attempted to lock html/body { overflow:hidden;height:100% }
     here to prevent openFullBook's scrollIntoView from scrolling
     the whole page. That broke nested scrolling on iOS Safari —
     the search results lost their internal scroll and the history
     dropdown couldn't reveal itself. v4.5.4 reverts that lock; the
     scrollIntoView issue is now addressed by manual body.scrollTop
     in reader.js's renderFullBook chunk-landing path. */

  /* ── Sidebar = main content column ───────────────────── */
  /* On desktop the sidebar has a 250px floor + a left border
     used as a visual seam between sidebar and (any) full-book
     panel. On a phone the sidebar IS the page, so the floor
     fights the viewport and the border just eats pixels.
     We DO keep .app's flex container intact — flipping it to
     block on mobile broke the .full-book close → sidebar
     transition the JS expects. */
  .sidebar {
    min-width: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* ── Tree splitter hidden ────────────────────────────── */
  /* The handle's pointer-events code is left untouched;
     display:none keeps it unreachable on touch. */
  #tree-resize-handle { display: none !important; }

  /* ── Search-tab toolbar: shrink padding so cards have
        room to breathe on narrow screens ───────────────── */
  #tab-search.active { padding: 8px 10px 10px; }

  /* ── Search 🔍 button on mobile ──────────────────────── */
  /* layout.css makes .search-icon decorative on desktop (users
     hit Enter). On iPhone enterkeyhint=search only relabels the
     keyboard's return key (and uses the OS language — Persian
     users see "جستجو", which they may not recognise as a search
     trigger), so we need a clear, visible tap target inside the
     page itself.
     Styling: gold pill with a white 🔍 glyph, sized to match
     the input's height. Anchored to the leading edge of the
     input where the decorative icon used to sit — same spot
     desktop users mentally associate with "search start". */
  .search-icon {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: var(--gold) !important;
    color: #fff !important;
    border-radius: 999px !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: .8rem !important;
    inset-inline-start: 4px !important;
    z-index: 5 !important;
  }
  .search-icon:active { opacity: .65; }
  /* Bump the input's leading padding so text doesn't slide under
     the now-larger pill. Desktop's default 34px assumes a tiny
     transparent icon; on mobile we need ~38px clearance. */
  #search-input {
    padding-inline-start: 38px !important;
  }

  /* ── Books tab: stack picker + search input ──────────── */
  /* The toolbar above the books list is a 1fr 1fr grid; on
     phones it can't fit both controls side by side without
     crushing the picker label. Stack to one column. The
     selector targets the inline style attribute that markup
     declares — narrow enough to avoid collateral damage. */
  #tab-books > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  /* ── Books tab: list + reader stack vertically ───────── */
  .books-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .books-split-list,
  .books-split-reader {
    grid-column: 1 !important;
    width: 100%;
  }

  /* ── Book splitter hidden ────────────────────────────── */
  .book-resize-handle { display: none !important; }

  /* ── Mobile feature gating ───────────────────────────── */
  /* Settings overlay (Books / Collections / Compilations /
     Users / Config tabs) isn't useful on a phone — operator
     features only. Hide the entry point in the top header.
     The overlay markup stays in the DOM so any deep-link
     code that opens it still works, but there's no UI path
     to reach it on mobile.
     Download button in the full-book toolbar is removed —
     users don't typically download source .docx/.txt files
     from a phone. The attribute selector targets just that
     one button without an HTML change.
     Add-to-compilation entry in the right-click context menu
     is hidden — compilations are a manager workflow that
     doesn't fit the mobile reader. */
  #settings-top-nav                                 { display: none !important; }
  .fb-icon-btn[onclick*="downloadCurrentDoc"]       { display: none !important; }
  #ctx-append-item                                  { display: none !important; }
  /* Show prev/next card-navigation buttons on mobile (hidden
     on desktop by the .fb-card-nav rule below outside @media).
     Uses default .fb-icon-btn sizing to match the other toolbar
     buttons (A−/A+/✕). */
  .fb-card-nav { display: inline-flex !important; }
  /* Badge dropdown on mobile: keep Logout only. Hide the
     "Account" entry — Clerk profile management isn't a phone
     workflow. Role flip is already display:none in markup. */
  #badge-menu button[data-i18n="sidebar.account"]   { display: none !important; }
  /* v4.5.12 — Pin the badge-menu to position:fixed on mobile so
     it escapes .top-inner's overflow-x:hidden clipping (iOS
     Safari clips vertical-positioned absolute children even
     when overflow-y:visible is set — a known WebKit quirk).
     position:fixed anchors to the viewport directly, so no
     ancestor clipping applies. Top is the header height + a
     small gap; right is a tiny inset for tap-target reach. */
  #badge-menu {
    position: fixed !important;
    top: calc(var(--top-h) + 4px) !important;
    right: 8px !important;
    left: auto !important;
    z-index: 99999 !important;
  }

  /* ── Full-book reader: full screen on mobile (only when a
        real book is loaded) ───────────────────────────────── */
  /* The full-book panel is .open by default at boot — the inline
     boot script paints a splash inside it so the right pane has
     visual content. On desktop the splash sits next to the
     search panel; on mobile a 100%-wide splash would block the
     entire screen forever, hiding the search input below.
     Fix: hide .full-book.open by default at mobile widths, and
     only flip it to full-width when body.full-book-loaded is
     set (toggled by the patched open/closeFullBook below). */
  .full-book.open { display: none !important; }
  body.full-book-loaded .full-book.open {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    /* v4.5.14 — Wider side margin (was 6px in v4.5.9) so the
       reader feels noticeably narrower than the screen, plus
       safe-area-aware bottom margin. */
    margin: 6px 16px max(8px, env(safe-area-inset-bottom)) 16px !important;
    border-radius: 8px !important;
    border: 1px solid var(--warm) !important;
  }
  /* v4.5.14 — Body padding-inline bumped 18→22 to bring the
     reading column in further from the panel border. */
  .full-book-body {
    padding-inline: 22px !important;
  }

  /* v4.5.13 — User requirement: three top rows (Anvár header,
     font-size toolbar, in-book search) must be visible at ALL
     times while reading a book on mobile. The Anvár header is
     already position:sticky from layout.css. Pin the full-book
     toolbar and search row with position:fixed so they ride
     directly under the Anvár header regardless of any errant
     page or body scroll. The body content gets padding-top to
     clear them. left/right match the panel's 6px outer margin
     so the fixed bars visually align with the card edges. */
  body.full-book-loaded .full-book.open .full-book-toolbar {
    position: fixed !important;
    top: calc(var(--top-h) + 6px) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 45 !important;
    background: var(--parchment);
    border: 1px solid var(--warm);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
  }
  body.full-book-loaded .full-book.open .full-book-search {
    position: fixed !important;
    top: calc(var(--top-h) + 6px + var(--header-rule-y)) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 45 !important;
    background: var(--cream);
    border-left: 1px solid var(--warm);
    border-right: 1px solid var(--warm);
    border-bottom: 1px solid var(--warm);
    box-sizing: border-box;
  }
  body.full-book-loaded .full-book.open .full-book-body {
    /* Clear room for the two fixed bars above. ~50px = approx
       height of the in-book search row; header-rule-y (52px)
       is the toolbar height. Sum is the offset content needs. */
    padding-top: calc(var(--header-rule-y) + 50px) !important;
  }

  /* ── Search panel: switch from 3-pane grid to flex column ─ */
  /* On desktop #search-split is a 3-col 2-row grid. On mobile
     the grid template approach was fragile — the chip I added
     in v4.5.x has no grid-area assignment and grid auto-flow's
     interaction with the named areas was inconsistent on iOS
     (user reported the search row vanished, only the empty
     state was visible).
     Switching to flexbox column eliminates the variable: items
     stack in DOM order, .search-row-wide first, results-body
     fills the rest. The filter-tree-pane and handle are taken
     out of flow separately (position:fixed and display:none
     below), so they don't disturb the column. */
  #search-split {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
  }
  #search-split > .search-row-wide { flex: 0 0 auto !important; min-height: 40px; }
  #search-split > #results-body   { flex: 1 1 auto !important; min-height: 0 !important; }

  /* ── Filter tree → bottom sheet ──────────────────────── */
  /* The tree's grid-area was "filter" — remove from grid flow
     and re-anchor as a fixed-position bottom panel. Hidden by
     default; body.mobile-filter-sheet-open slides it up. */
  #filter-tree-pane {
    grid-area: unset !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    height: 70vh;
    max-height: 70vh;
    width: 100%;
    z-index: 250;
    background: var(--cream);
    border-top: 2px solid var(--warm);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
    transform: translateY(100%);
    transition: transform 260ms ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.mobile-filter-sheet-open #filter-tree-pane {
    transform: translateY(0);
  }
  /* The tree list inside scrolls; sheet header sticks at top. */
  #filter-tree-pane .rt-tree {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
  }

  /* Mobile-only sheet header injected via HTML; hidden on
     desktop by default and revealed only inside this @media. */
  .mobile-sheet-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--warm);
    background: var(--parchment);
    flex-shrink: 0;
  }
  .mobile-sheet-header-title {
    font-weight: 700;
    color: var(--rust);
    font-size: 1rem;
  }
  .mobile-sheet-close {
    background: transparent;
    border: 1.5px solid var(--warm);
    border-radius: var(--r);
    color: var(--rust);
    font-size: 1.1rem;
    line-height: 1;
    width: 32px; height: 32px;
    cursor: pointer;
    padding: 0;
  }
  .mobile-sheet-close:active { background: rgba(192, 57, 43, .08); }

  /* Backdrop behind the sheet — covers everything from below
     the top header to the sheet's top edge. */
  .mobile-sheet-backdrop {
    display: block !important;
    position: fixed;
    top: var(--top-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease-out;
  }
  body.mobile-filter-sheet-open .mobile-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-filter-sheet-open { overflow: hidden; }

  /* ── Mobile filter trigger button in the search row ───── */
  .mobile-filter-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 32px;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--warm);
    border-radius: var(--r);
    color: var(--rust);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-filter-btn:active { background: rgba(163, 123, 43, .12); }

  /* ── Active-filter chip below the search row ─────────── */
  /* Chip is shown on mobile by default; .is-hidden hides it
     when no narrowing is active. .is-hidden needs !important
     too (higher-specificity selector among the !important
     rules) so it can beat the visible-default. */
  .mobile-filter-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin: 4px 0 0;
    background: rgba(163, 123, 43, .12);
    border: 1px solid var(--warm);
    border-radius: 14px;
    font-size: .78rem;
    color: var(--ink);
    max-width: 100%;
  }
  .mobile-filter-chip.is-hidden {
    display: none !important;
  }
  .mobile-filter-chip .chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-filter-chip .chip-clear {
    background: transparent;
    border: none;
    color: var(--rust);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
  }
}

/* Mobile-only HTML elements live in the DOM at all widths so JS
   can find them, but stay hidden on desktop. The @media block
   above flips display back on at ≤768px. */
.mobile-filter-btn,
.mobile-sheet-header,
.mobile-sheet-backdrop,
.mobile-filter-chip,
.fb-card-nav { display: none; }