/* ═══════════════════════════════════════════════════════════════
   AgencyOS — mobile-responsive.css
   Full Mobile Responsive corrective.

   Loaded LAST (after style.css and convert-workspace.css) so every rule
   here wins on source order at equal specificity, without needing
   `!important` anywhere. This file adds responsive behavior only — it
   never changes a color, a font, a desktop spacing value, a label, or a
   component's visual identity. Above 900px nothing in this file has any
   visible effect at all (every rule lives inside a max-width media query).

   Two tiers, chosen from a real audit of this stylesheet (see the
   corrective's own write-up) rather than picked arbitrarily:

     @media (max-width: 900px)  — already existed (style.css) for the
       tablet icon-only sidebar / hidden right-panel. Extended here with
       safety-net rules that don't change the visual layout at tablet
       width (table/tab-bar overflow scrolling, modal max-width caps,
       touch-target sizing) — tablet (768/834px) keeps its existing
       multi-column layouts, exactly as Part E of the corrective requires
       ("Tablet: Reduce columns naturally").

     @media (max-width: 640px)  — the existing codebase's own prior
       precedent breakpoint (already used once, for .rtb-card) reused here
       rather than inventing a new magic number. This is where phone-width
       layouts (375/390/430px) actually need single-column stacking, the
       sidebar drawer, and toolbar wrapping.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   Part D — Sidebar / Mobile Navigation
   Hidden by default (desktop); only .mobile-nav-trigger has visible
   markup in index.html, everything else here is pure CSS state driven
   by a `.mobile-nav-open` class app.js toggles on <body>.
   ─────────────────────────────────────────────────────────────── */
.mobile-nav-trigger,
.mobile-nav-backdrop { display: none; }

@media (max-width: 640px) {
  /* --sidebar-w drives every other rule that positions itself relative
     to the sidebar (.preview-bar's `left`, etc.) — overriding the token
     itself (already the existing pattern the 900px tier uses) means
     every one of those dependents is correct automatically, with zero
     duplicate `left:`/`right:` rules to maintain here. */
  :root { --sidebar-w: 0px; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80vw, 280px);
    min-width: 0;
    max-width: 280px;
    transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease-out);
    z-index: 450;
    box-shadow: 2px 0 32px rgba(0,0,0,0.5);
  }
  body.mobile-nav-open .sidebar { transform: translateX(0); }

  /* Inside the open drawer, show full labels — the 900px tier's
     icon-only rules (same selectors) are for the ALWAYS-VISIBLE tablet
     rail; a drawer the user explicitly opened should show real text,
     not icons-only, same as the desktop sidebar it's standing in for. */
  body.mobile-nav-open .sidebar .brand-name,
  body.mobile-nav-open .sidebar .brand-badge,
  body.mobile-nav-open .sidebar .nav-item span:not(.nav-badge),
  body.mobile-nav-open .sidebar .nav-badge,
  body.mobile-nav-open .sidebar .nav-section-label,
  body.mobile-nav-open .sidebar .engine-status span,
  body.mobile-nav-open .sidebar .user-chip span { display: revert; }
  body.mobile-nav-open .sidebar .nav-item { justify-content: flex-start; }
  body.mobile-nav-open .sidebar { width: min(80vw, 280px); }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) ease;
  }
  body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: all; }

  .mobile-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 38px;
    height: 38px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-muted);
    border-radius: var(--r-md);
    color: var(--text-primary);
    cursor: pointer;
    z-index: 60;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }
  .mobile-nav-trigger svg { width: 18px; height: 18px; }

  /* Reserves room so the floating trigger never sits on top of the page
     title — the only layout effect of adding it. */
  .pd-header.page-header,
  .workspace-header.page-header { padding-left: 56px; }
}

/* ───────────────────────────────────────────────────────────────
   Right-panel drawer trigger — Mobile + Tablet UI/UX Redesign, Part E.
   Sits inline in .ws-header-right (NOT fixed, unlike .mobile-nav-trigger)
   since the workspace header already reserves that row; only meaningful
   below 1200px (style.css's @media (max-width:1200px) sets
   `display:inline-flex`; @media (min-width:1201px) forces it back to
   `display:none` — this file only supplies the button's own appearance).
   ─────────────────────────────────────────────────────────────── */
.rp-mobile-trigger {
  /* No `display` here on purpose: this file loads AFTER style.css, so an
     unconditional value here would permanently beat style.css's two
     media-scoped rules (<=1200px: inline-flex, >=1201px: none) regardless
     of viewport — confirmed live: the trigger stayed display:none at
     375px until this was removed. Visibility is fully owned by those two
     rules; this file only supplies the button's own appearance. */
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  min-width: 36px;
  min-height: 36px;
}
.rp-mobile-trigger svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 640px) {
  /* Icon-only at phone width — matches every other header control's
     already-established icon-only phone treatment (.device-btn etc). */
  .rp-mobile-trigger .rp-trigger-label { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   Part G — Workspace tab navigation: controlled horizontal scroll
   rather than wrapping/removing tabs. Applies from tablet width down —
   7 tabs (Brief/Homepage/Pages/QA/Convert/Deliver/Audit) already don't
   comfortably fit an ~768px-900px workspace width once real label text
   plus icons plus padding is accounted for, not just phone width.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .workspace-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .workspace-tabs .tab-btn { flex-shrink: 0; }
}

/* ───────────────────────────────────────────────────────────────
   Parts P/Q — Modal safety net + dense tables
   Never changes a modal's content/desktop width — only caps it so it
   can never exceed the viewport, and gives tables a scroll container
   instead of forcing the whole page to scroll horizontally.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* .modal-box already had its own max-width:calc(100vw - 40px) safety
     net; the plain .modal class (used by every simple confirm/rename
     dialog) never did — this brings it to the same standard. */
  .modal { max-width: calc(100vw - 32px); }
  .pc-shell { max-width: calc(100vw - 32px); }

  /* Every real <table> in the app (Assets, QA findings, Convert's own
     .cw-table) — becomes its own horizontal-scroll container instead of
     forcing #mainContent to scroll sideways for one wide table. Row
     structure/columns are untouched; only the table's outer box gains
     block-level scrolling. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody, table tr { width: max-content; min-width: 100%; }

  /* .token-table-header/-row is a CSS-grid "table", not a real <table> —
     same scroll-container treatment, applied to its actual wrapper. */
  .token-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .token-table-header, .token-table-row { min-width: 360px; }
}

/* ───────────────────────────────────────────────────────────────
   Part R — Touch usability
   Enlarges the tappable AREA of small icon-only controls via padding
   (box-sizing already border-box app-wide), never the visible icon size
   itself — desktop's compact look is unaffected there; this only ever
   applies under 900px, where these controls are touch-operated.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pd-icon-btn,
  .pd-view-btn,
  .tab-btn,
  .nav-item,
  .new-project-btn,
  .modal-close,
  .toast-item-close,
  .rp-tab,
  .panel-collapse-btn { min-height: 36px; }
  .pd-icon-btn, .pd-view-btn, .panel-collapse-btn { min-width: 36px; }
}

/* ───────────────────────────────────────────────────────────────
   Final Mobile + Tablet Screen-by-Screen Polish, Part H — right-panel
   drawer polish. The architecture (slide-over + backdrop) is unchanged;
   this only refines spacing/touch/heading so the drawer reads as a
   deliberate mobile panel rather than the desktop sidebar pasted into an
   overlay. Scoped to <=1200px only — style.css's own >=1201px tier keeps
   the desktop panel's existing header/tab/padding values untouched.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .right-panel-header { padding: 14px 12px 10px; }
  .rp-tabs { gap: 2px; }
  .rp-tab { padding: 0 8px; font-size: 11.5px; }
  .rp-panel { padding: 16px 16px 24px; }
  .rp-telemetry {
    padding: 18px 16px 28px;
    /* Confirmed via live screen-by-screen audit: the always-visible
       Telemetry block sits directly under whichever tab panel (e.g.
       Analysis) is active, and the existing 1px border-top (style.css)
       read as too faint at drawer scale to separate them — the two
       looked like one continuous list rather than a tab's content plus
       a persistent panel below it. A background shift makes the seam
       unambiguous without changing either section's own content. */
    background: var(--bg-overlay);
    border-top-color: var(--border-muted);
  }
}

@media (max-width: 640px) {
  /* Phone gets a touch-comfortable full drawer width rather than the
     834px tablet's narrower fixed panel (style.css: min(360px,88vw)) —
     88vw already achieves this at phone sizes, so no width change is
     needed here; only the denser tab row needs a touch pass at the
     narrowest sizes. */
  .rp-tab { font-size: 11px; padding: 0 6px; }
}

/* ───────────────────────────────────────────────────────────────
   Part S — Long text / overflow safety
   A generic safety net for identifier/message text that can genuinely
   be arbitrarily long (project/client names, paths, job messages, QA
   findings) — never applied to short fixed-vocabulary labels/badges, so
   it cannot change how those already look.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pd-card-client,
  .modal-body,
  .pd-modal-body,
  .toast-item-text,
  .qa-issues-table td,
  .cw-error-panel,
  .cw-success-panel,
  .job-name,
  .job-sub,
  .log-line { overflow-wrap: anywhere; }
}

/* ───────────────────────────────────────────────────────────────
   Part E — Projects dashboard
   .pd-grid.pd-grid-view already collapses to one column naturally
   (grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))) once
   available width drops below ~250px net of sidebar/padding — no rule
   needed for the grid itself. The toolbar (search/sort/filter/view
   toggle/+ New) is a plain non-wrapping flex row today — confirmed live
   (local static-file check before deploy) that it already overflows/
   clips its own "+ New Project" button at 768px, tablet width, with the
   icon-only sidebar rail already applied — not only at phone width — so
   this needs the SAME 900px tier the sidebar/table/modal rules above
   use, not a narrower one.
   ─────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────
   Final Mobile + Tablet Screen-by-Screen Polish, Part I/K/N/O —
   .section-header/.section-meta is the shared title+action-row pattern
   reused across Homepage/Pages/QA/Convert/Deliver (style.css:859,
   `justify-content:space-between`, no wrap). Confirmed via live
   screenshot audit on Homepage at 390px: 5-6 action buttons (Run QA,
   Request Changes, New Direction, Ready for Client Review, Approve) were
   squeezed onto one row against the title and clipped off the right edge
   — the exact "wall of desktop buttons" the task flags, not a rebuild,
   just a wrap. Letting the row wrap moves the action buttons onto their
   own full-width row below the title instead of stacking every button
   full-width (which Part C explicitly warns against) — each button keeps
   its natural compact size and wraps onto as many rows as needed.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .section-header { flex-wrap: wrap; row-gap: 10px; }
  .section-meta { flex-wrap: wrap; width: 100%; }
}

@media (max-width: 900px) {
  .pd-toolbar {
    flex-wrap: wrap;
  }
  .pd-search {
    flex: 1 1 100%;
    max-width: none;
    order: -1; /* search first, full width — filters/actions wrap below it */
  }
  .pd-view-toggle { order: 2; }
  .pd-toolbar .new-project-btn { order: 3; margin-left: auto; }
}

@media (max-width: 640px) {
  /* List view's 4-across fact row (Stack/Phase/Created/Updated) doesn't
     fit phone width at auto column sizing — 2×2 reads exactly as
     cleanly and uses the SAME grid the grid-view cards already use. */
  .pd-list-view .pd-card-facts { grid-template-columns: repeat(2, 1fr); }
  .pd-list-view .pd-card { flex-direction: column; align-items: stretch; }
}

/* ───────────────────────────────────────────────────────────────
   Part F — New Project wizard
   .pc-shell is a fixed-sidebar (210px) + body flex row; at phone width
   that leaves too little room for the form itself, so it stacks — the
   step list becomes a horizontal strip above the form instead of a
   left rail. Fields inside step 1 (.pc-row-2 — Order ID / Package Name)
   stack too. Nothing about which fields exist, their order, or their
   validation changes.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pc-shell {
    flex-direction: column;
    width: 100%;
    height: min(92vh, 100%);
  }
  .pc-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 16px;
    gap: 12px;
  }
  /* Final Mobile + Tablet Screen-by-Screen Polish, Part F — the row-layout
     fix above only re-oriented .pc-sidebar's own children (logo, step
     nav, footer hint) side by side; .pc-step-nav itself is unconditionally
     `flex-direction: column` (style.css) with a vertical connector line
     between each item, so it still rendered as ~5 stacked rows consuming a
     large share of viewport height before any form field was visible —
     confirmed via live screenshot audit. The wizard already has TWO other,
     genuinely compact progress indicators built in and already wired by
     pcRenderStep() (app.js) — .pc-step-header's "Step X of 5" + title
     inside each step panel, and .pc-progress-dots in the footer next to
     Continue — so the tall step-nav list is redundant at phone width, not
     a missing feature to rebuild. Hiding it (and the now-empty sidebar
     footer hint) turns .pc-sidebar into a slim logo-only top bar. */
  .pc-step-nav, .pc-sidebar-footer { display: none; }
  .pc-logo { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .pc-dot { width: 7px; height: 7px; }
  .pc-dot.active { width: 20px; }
  .pc-row-2 { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   Parts H/I/J/N/O — Form/content grids that only make sense as two or
   more columns once there's real width for each column. All of these
   already collapse correctly at tablet width (768/834px still has
   enough room per-column); only phone width needs the stack.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The real cause of the confidence-ring clipping (and, transitively, of
     the whole Brief hero card silently rendering ~120px WIDER than its
     own .panel-two-col container at 375px — confirmed live via a full
     ancestor-chain width dump): none of .brief-main/#briefAutoDetect/
     .brief-hero/.brief-hero-top/.brief-hero-identity ever get
     `min-width: 0`, so as flex/grid items each defaults to
     `min-width: auto` — the browser's own protection against shrinking a
     flex/grid item below its content's natural (min-content) width. Some
     piece of hero content doesn't wrap down that far, so the whole chain
     was forced wider than the viewport instead of wrapping — invisible
     in the page because .brief-hero's own overflow:hidden clips the
     rendering without shrinking the box itself, and because that
     overflow:hidden also stops it from ever registering as
     document.body-level horizontal scroll. flex-wrap alone (above) could
     never fix this: the ring pair was wrapping correctly, just inside an
     oversized container. min-width:0 is the standard fix for exactly
     this flex/grid shrink-to-fit class of bug.
     ─────────────────────────────────────────────────────────────── */
  .panel-two-col, .brief-main, #briefAutoDetect,
  .brief-hero, .brief-hero-top, .brief-hero-identity { min-width: 0; }
}

@media (max-width: 480px) {
  /* .brief-hero-rings holds TWO 64px confidence/readiness rings + a 14px
     gap (~142px) inside a container that's only right-aligned
     (`align-self:flex-end`, style.css ~7258), never constrained or
     wrapped. Confirmed via live production audit: at 375-390px the
     second ring renders ~27px past the right edge of the viewport,
     clipped by .brief-hero's own overflow:hidden — this is the "AI
     PROJECT INTELLIGENCE" confidence badge the audit found cut off.
     Wrapping (rather than shrinking the rings, which would make the
     confidence % illegible) keeps both fully visible, stacked. */
  .brief-hero-rings {
    /* flex-wrap alone isn't enough: .brief-hero-top is column-direction
       with align-items:flex-start (style.css), so .brief-hero-rings sizes
       to its own max-content width (142px) regardless of the parent's
       actual width and never gets narrow enough to need to wrap — it just
       overflows instead. Confirmed live: flex-wrap:wrap alone left both
       rings on one row, still clipped. max-width forces the constraint
       that makes wrapping actually trigger. */
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 10px;
  }
}

@media (max-width: 640px) {
  .cv-scope-row,
  .brief-struct-grid,
  .brief-pu-group-fields,
  .cbir-columns,
  .cbir-intel-grid,
  .pc-asset-grid,
  .audit-steps,
  .dc-blocks-row,
  .nav-review-grid,
  .cbir-detect-group { grid-template-columns: 1fr; }

  /* Already 2-across at the 900px tier (existing rule) — one further
     step down to a single column once there's truly no room left. */
  .deliver-options { grid-template-columns: 1fr; }

  /* Convert/Homepage two-column layouts (stack selector + Build
     Activity, section list + preview) — same "give up the side column"
     pattern .panel-two-col/.homepage-main-row already use elsewhere in
     this stylesheet, applied to the two Convert-specific layouts that
     didn't have their own mobile rule yet. */
  .convert-layout,
  .cv-layout { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   Part I — Homepage preview
   The shared preview iframe/bar already spans `left:var(--sidebar-w)`
   to `right:var(--right-w)` — both tokens are already 0px at this width
   (this file's own --sidebar-w override above; --right-w already 0 from
   the existing 1200px tier) — so the bar already reaches full width with
   no new rule needed. .preview-viewport's fixed 340px height is what
   actually needs help — on a short phone viewport that alone can eat
   most of the visible screen; capping it relative to viewport height
   here only ever shrinks it, never touches preview-manager.js's own
   URL-building/resolver logic or which version/approval state it shows.

   The header row itself (title / device toggle / URL breadcrumb /
   refresh+close actions) has a real bug confirmed live at 375-430px:
   .preview-url-bar is flex:1 but (like every flex item by default) still
   refuses to shrink below its own content's natural width, and
   .preview-url-text has no truncation — so the refresh/close buttons
   were pushed off-screen entirely, not merely visually tight. Truncating
   the URL text is a real, always-safe fix (identical rendering whenever
   the text already fits — every desktop/tablet width). Hiding the
   purely-decorative URL breadcrumb and the device-toggle's text labels
   below phone width reclaims the room refresh/close actually need to
   stay reachable, the one non-negotiable requirement here.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .preview-url-bar { min-width: 0; }
  .preview-url-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .preview-viewport { height: min(340px, 55vh); }
  .preview-bar-header { flex-wrap: wrap; row-gap: 6px; }
  .preview-url-bar { display: none; }
  /* Icon-only device toggle — same convention the sidebar's own 900px
     tablet tier already uses to reclaim horizontal space. The SVG icons
     are sized via explicit width/height attributes, not em units, so
     collapsing the button's font-size hides only the trailing text node
     ("Desktop"/"Mobile") sitting directly after each icon in the markup. */
  .device-btn { font-size: 0; padding-left: 8px; padding-right: 8px; }
  .device-btn svg { width: 15px; height: 15px; }
  .preview-actions { margin-left: auto; }
}