/* ============================================================
   Responsive layer — Issue 4

   Loaded AFTER base.css and any page-specific CSS so these rules
   win at narrow viewports without us having to chase per-page
   regressions. Three tiers:

     ≤1024px  Tablet
     ≤768px   Mobile
     ≤480px   Phone (existing rules in base.css cover most of this)

   Scope: make the existing desktop UI usable on small screens —
   NOT a mobile-first redesign. Things that are clearly desktop-
   only (admin tools, comparison detail page) get a "use a wider
   screen" hint elsewhere rather than reflow.
============================================================ */

/* No global `body { overflow-x: hidden }` — the previous version of
   this file applied it at every width as a safety net, but it had a
   real cost on desktop: content that was previously visible via a
   page-level horizontal scrollbar got clipped instead. Pages that
   genuinely need the clip (e.g. /channel/:id) handle it at their own
   `.entity-detail-page` level in their page-specific CSS. The
   mobile-only clip below is fine — narrow viewports SHOULDN'T have
   any element extending past the viewport, and if one does it's a
   bug to be hunted down at the source. */

/* ============================================================
   Tablet — ≤ 1024px
============================================================ */
@media (max-width: 1024px) {
  /* Priority Actions in workspace + Latest Videos grids drop from
     4-col to 2-col so cards don't squeeze below their min readable
     width. The existing workspace_v2_1.css media queries handle the
     workspace-signals-grid; this rule covers the generic "4-col
     auto-grid" pattern used elsewhere. */
  .v21-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   Mobile — ≤ 768px
============================================================ */
@media (max-width: 768px) {
  /* Mobile-only horizontal-overflow clip. At narrow viewports any
     element extending past 100vw is far more likely to be a real
     bug (e.g. a wide table or fixed-width image) than intentional,
     so we clip at body level rather than create a horizontal page
     scrollbar that's awkward on touch. */
  body {
    overflow-x: hidden;
  }
  /* ---------- Topbar ---------- */
  /* Mobile topbar polish (2026-05-16): on phone the desktop "floating
     card" treatment (18px from top, 20px side margins, 22px radius,
     heavy shadow, 74px min-height) used too much vertical space and
     looked clunky. Switch to an edge-to-edge slim header — flush at
     the top, no side gutters, smaller height, lighter chrome.
     The desktop card-style remains untouched at ≥769px. */
  .app-shell-topbar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    box-shadow: 0 1px 0 rgba(28, 51, 67, 0.08), 0 4px 14px rgba(27, 39, 51, 0.06) !important;
    background: rgba(255, 255, 255, 0.94) !important;
  }
  /* Page padding-top adjusts since the floating-card 18px gap is gone. */
  .app-shell-page {
    padding-top: 64px !important;
  }
  .app-shell-page.app-shell-page-with-extension {
    padding-top: 116px !important;
  }
  /* The blur halo above topbar (line 565 in base.css) was 122px tall to
     cover the floating-card area. Shrink it to match the slim header. */
  .app-shell-page::before {
    height: 64px !important;
  }
  .app-shell-page.app-shell-page-with-extension::before {
    height: 116px !important;
  }

  /* The 700px rule in base.css already kicks in for very narrow
     widths; this 768px rule covers the 700-768 dead zone where
     the search input + level chip + Guide button overflowed. */
  .app-shell-topbar-main {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 6px;
    align-items: center;
  }
  /* Mobile topbar focus (2026-05-16): on phone the level chip and
     Guide button compete with the search input for limited horizontal
     space and aren't the primary action. The bottom-tab nav already
     surfaces Training (where the level chip would link to) and the
     "?" Guide can move into the More sheet later. Hide both on mobile
     so the search bar can claim the full center band. */
  .app-shell-level-chip,
  .app-shell-tour-btn {
    display: none !important;
  }
  /* 2026-06-12 — Topbar search is desktop-only. On mobile the narrow topbar
     can't fit it (it overflowed/clipped), and navigation happens via the
     bottom nav, so hide it entirely here. */
  .app-shell-topbar-center {
    min-width: 0 !important;
  }
  .app-shell-topbar-center .app-shell-search {
    display: none !important;
  }
  .app-shell-search-shortcut {
    display: none !important;
  }
  /* Right-side button group: keep tight + comfortable touch targets. */
  .app-shell-topbar-right {
    gap: 6px !important;
  }
  .app-shell-topbar-right .button,
  .app-shell-topbar-right .button-secondary,
  .app-shell-topbar-right .button-light,
  .app-shell-tour-btn,
  .app-shell-logout-btn {
    min-height: 38px !important;
    min-width: 38px !important;
    padding: 0 10px !important;
    border-radius: 999px;
  }
  /* Logout button on mobile: the desktop variant is a 50×50 saturated
     red/brown gradient orb with a 26px drop shadow — way too visually
     loud for the slim mobile topbar. Tone down to a subtle outlined
     icon button that still reads as destructive (red icon + soft tint)
     but matches the visual weight of the Guide button next to it. */
  .app-shell-logout-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    background: var(--surface-warm-warning) !important;
    border: 1px solid rgba(122, 46, 24, 0.22) !important;
    box-shadow: none !important;
  }
  .app-shell-logout-btn:hover,
  .app-shell-logout-btn:focus-visible {
    background: var(--surface-warm) !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .app-shell-logout-icon {
    color: var(--danger-text-deep) !important;
    font-size: 18px !important;
    transform: none !important;
  }
  /* Guide button: icon-only at mobile (text already hidden in the
     700px block — we duplicate here so the rule is present even if
     the 700px block changes). */
  .app-shell-help-text { display: none !important; }
  .app-shell-help-icon { display: inline-flex !important; }
  /* Logout button: keep the icon; existing rule is fine. */

  /* ---------- AGENT 007 launcher dock ---------- */
  /* Collapse the launcher pill from min-width 238px down to a
     48×48 round icon. The expanded chat panel still works the
     same way when opened. */
  .global-agent-chat-launcher-dock {
    right: 14px !important;
    bottom: 18px !important;
  }
  .global-agent-chat-launcher {
    min-width: 0 !important;
    width: 52px;
    height: 52px;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
  }
  .global-agent-chat-launcher:hover {
    min-width: 0 !important;
    width: 52px;
  }
  /* Hide the "AGENT 007 / Workspace Intelligence" copy + the
     trailing Ask pill — they don't fit a 52px circle. The orb
     stays as the visual anchor; tap opens the full panel. */
  .global-agent-chat-launcher-copy,
  .global-agent-chat-launcher-new {
    display: none !important;
  }
  /* Reduce the body padding-bottom (set in base.css for the
     desktop launcher) since the icon-only launcher is smaller. */
  .app-shell-page {
    --agent-widget-offset: 86px;
  }

  /* ---------- Workspace + Latest grids ---------- */
  /* Force any remaining 3/4-column grids to single-column so they
     don't horizontally compress below readability. */
  .v21-kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .workspace-priority-list {
    /* Already single-column by default; this is a defensive lock
       so any future override doesn't break it on mobile. */
    grid-template-columns: 1fr !important;
  }

  /* ---------- Review / report cards ---------- */
  /* Cards that use thumbnail-left, content-right layouts stack
     vertically at mobile. Targets the common patterns. */
  .review-related-card,
  .report-history-card,
  .report-v2-source-package-item {
    grid-template-columns: 1fr !important;
  }
  .review-related-card-thumb,
  .report-history-card-thumb,
  .report-v2-source-package-thumb {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- Topbar extension row (sub-nav chips) ---------- */
  /* Let the chip row wrap and add scroll-snap as a fallback. */
  .app-shell-topbar-extension-row {
    flex-wrap: wrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .app-shell-topbar-extension-row > * {
    scroll-snap-align: start;
  }

  /* ---------- Tables ---------- */
  /* Generic tables become horizontally scrollable instead of
     pushing the page width. Existing per-page tables that have
     `table-layout: fixed` (e.g. channel-detail) already behave;
     this rule wraps tables that haven't been audited. */
  .entity-detail-page table,
  .v21-shell table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* ---------- Settings — EXPAND/Collapse toggle overlap ----------
     `.settings-fullwidth-summary .v21-summary-toggle` is position:absolute
     right:0 — on mobile that overlapped the description text
     ("agent should thi[EXPAND]k"). Reserve right padding on the copy
     column so the toggle has its own breathing room. */
  .settings-fullwidth-summary .v21-summary-copy {
    padding-right: 80px !important;
    text-align: left !important;
  }
  .settings-fullwidth-summary .section-title,
  .settings-fullwidth-summary .settings-collapsible-title {
    text-align: left !important;
  }

  /* ---------- Search dropdown results — compact mobile tiles ----------
     The desktop result row is a 96px-thumb / content grid where each
     row is 200-260px tall (avatar + label + 3 chips + description).
     On mobile we collapse to a tight single-line tile: small thumb
     + label + small SPEAKER/REVIEW badge. Description and topic chips
     hidden — tapping the row navigates to the full target. */
  .app-shell-search-result {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    align-items: center !important;
  }
  .app-shell-search-media,
  .app-shell-search-media-speaker,
  .app-shell-search-media-channel {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
  }
  .app-shell-search-media img,
  .app-shell-search-media svg {
    width: 40px !important;
    height: 40px !important;
  }
  /* Hide topic chips + meta-extras; KEEP the description but clamp it
     to 2 lines so each tile shows title (2 lines) + description (2
     lines) max. */
  .app-shell-search-result-chips,
  .app-shell-search-result-meta-extra {
    display: none !important;
  }
  /* The kicker badge (SPEAKER / TRANSCRIPT / etc.) shrinks. */
  .app-shell-search-result-kicker,
  .app-shell-search-result-badge {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
  }
  /* Title clamps to 2 lines max so a long video title doesn't push
     the row tall. */
  .app-shell-search-result-title,
  .app-shell-search-result-name {
    font-size: 13px !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Description / summary / blurb: 2-line clamp on mobile. */
  .app-shell-search-result-description,
  .app-shell-search-result-summary,
  .app-shell-search-result-blurb {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: var(--ink-muted);
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
  }
  /* Search dropdown should fill most of the mobile viewport and
     scroll internally so users can reach all results regardless of
     how many match. Reserve room for the topbar above and the
     bottom-tab nav below. */
  .app-shell-search-dropdown {
    max-height: calc(100vh - var(--app-shell-bottom-nav-h, 60px) - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- Analysis queue mini-tile (mobile) ---------- */
  /* The persistent #app-analysis-queue is a 400px overlay on desktop.
     On mobile the user wanted a smaller "miniature" focused on the
     principal info — thumbnail + percentage while loading, OPEN
     button inside the tile when ready. Position it above the
     bottom-tab nav so it doesn't overlap the tabs. */
  .app-analysis-queue {
    top: auto !important;
    bottom: calc(var(--app-shell-bottom-nav-h, 60px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
    left: auto !important;
    width: min(220px, calc(100vw - 20px)) !important;
  }
  .app-analysis-queue-card {
    padding: 8px !important;
    max-height: 50vh !important;
    border-radius: 12px !important;
  }
  /* Hide the queue title bar entirely on mobile — it just says "Analysis
     Queue" which is implied. Keeps the mini-tile focused on rows. The
     "1 completed" summary count is also redundant on the mini-tile. */
  .app-analysis-queue-head .app-analysis-queue-title,
  .app-analysis-queue-head #app-analysis-queue-summary,
  .app-analysis-queue-head .app-analysis-queue-summary {
    display: none !important;
  }
  .app-analysis-queue-head {
    margin-bottom: 4px !important;
  }
  /* Per-row X close button: shrink from 24×24 to 18×18 so it doesn't
     dominate the compact row. */
  .app-analysis-queue-close {
    width: 18px !important;
    height: 18px !important;
    top: 4px !important;
    right: 4px !important;
    font-size: 11px !important;
  }
  /* Tighter rows: smaller thumbnail, no title text, prominent %. */
  .app-analysis-queue-row {
    padding: 6px 6px 6px !important;
  }
  .app-analysis-queue-row-main {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-right: 22px !important;
  }
  .app-analysis-queue-thumb,
  .app-analysis-queue-thumb-placeholder {
    width: 56px !important;
    height: 32px !important;
    border-radius: 6px !important;
  }
  /* Hide the verbose row title + secondary status text. Keep only the
     progress bar + percentage. */
  .app-analysis-queue-row-title,
  .app-analysis-queue-progress .app-progress-detail {
    display: none !important;
  }
  .app-analysis-queue-progress .app-progress-label {
    font-size: 9.5px !important;
    letter-spacing: 0.04em !important;
  }
  .app-analysis-queue-progress .app-progress-percent {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--brand-deep) !important;
  }
  .app-analysis-queue-progress .app-progress-track {
    height: 4px !important;
  }
  /* On completed rows, drop the progress band entirely — the JS-rendered
     OPEN button already signals success and is the only action that
     matters. The "COMPLETED · 100%" pill is redundant noise. */
  .app-analysis-queue-row[data-queue-state='completed'] .app-analysis-queue-progress,
  .app-analysis-queue-row[data-queue-state='completed'] .app-analysis-queue-status-inline--completed {
    display: none !important;
  }
  /* Move the OPEN button toward the left (was justify-content:flex-end)
     so it sits next to the thumbnail rather than tucked against the
     close button at the far right. */
  .app-analysis-queue-actions {
    justify-content: flex-start !important;
    padding-left: 6px !important;
  }
  /* (No `::after` "OPEN" pill — JS already injects an OPEN button when
     a row hits the completed state, and adding our own caused two OPEN
     affordances stacked on top of each other.) */
}