/* ==========================================================================
   responsive.css — Fluid/responsive layout for every viewport & zoom.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   RESPONSIVE — fluid layout for every viewport & zoom
   Strategy: clamp() for type, dvh/dvw for layout,
   breakpoints at 75rem (desktop-narrow), 48rem (tablet),
   30rem (small phone), 20rem (tiny/landscape)
══════════════════════════════════════════════════════ */

/* ── Content max-width scales with viewport ── */
:root {
  --content-max: min(80ch, calc(100vw - 2rem));
  --sw: clamp(220px, 22vw, 280px);  /* sidebar width */
  /* Notch / home-indicator safe area (iOS PWA, modern Android with cutouts).
     Falls back to 0 on browsers / devices that don't expose the env vars,
     so non-iOS users see no extra padding. */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

/* ── Fluid type scale ── */
html { font-size: clamp(14px, 1.1vw + 10px, 16px); }

/* ── No horizontal scroll on the document, ever — the sidebar slides over
   from the right and is `position:fixed`, but the underlying #app already
   has `overflow:hidden` so this is belt-and-suspenders against any rogue
   overflowing child (e.g. a long unbroken token in a chat message). ── */
html, body { overflow-x: hidden; }
/* When the sidebar is open on small screens we lock the body so the
   background doesn't scroll behind the overlay (the slide-over IS the
   navigation, scrolling underneath it feels broken). */
html.sb-locked, body.sb-locked { overflow: hidden; touch-action: none; }

/* ── Login screen ── */
#login-screen { padding: clamp(16px, 4vw, 40px); }
.login-logo { margin-bottom: clamp(24px, 5vh, 44px); }
.login-header-img { width: min(420px, 82vw); }
.login-sub { font-size: clamp(11px, 1.1vw + 9px, 13px); }
#user-cards { gap: clamp(10px, 2vw, 18px); }
.user-card { padding: clamp(14px, 2.5vw, 22px) clamp(16px, 3vw, 26px); }
.user-av { width: clamp(48px, 7vw, 64px); height: clamp(48px, 7vw, 64px); }

/* ── Sidebar ── */
.sb-header-img { width: 100%; }
.sb-head { padding: clamp(12px, 1.5vh, 18px) clamp(12px, 1.2vw, 16px) clamp(10px, 1.2vh, 14px); }

/* ── Topbar ── */
#topbar { padding: clamp(8px, 1.5vh, 14px) clamp(12px, 2vw, 22px); }
#chat-title { font-size: clamp(13px, 1vw + 11px, 15px); }

/* ── Messages / bubbles ── */
#messages { padding: clamp(12px, 2vw, 24px) clamp(14px, 3vw, 32px) 88px; }
.bubble { font-size: clamp(13px, 1vw + 11px, 15px); padding: clamp(8px, 1.2vw, 11px) clamp(10px, 1.5vw, 15px); }

/* ── Welcome screen ── */
.welcome-eagle { font-size: clamp(36px, 6vw, 56px); }
#welcome { padding: clamp(32px, 6vh, 48px) clamp(16px, 3vw, 24px); }

/* ── Input area ── */
#input-area { padding: clamp(8px, 1.5vh, 14px) clamp(10px, 2vw, 22px); }
#msg-input { font-size: clamp(13px, 1vw + 11px, 15px); }

/* ── Send button logo size — never render below 18×15 to stay crisp ── */
.send-logo-mask { width: clamp(18px, 2vw, 22px); height: clamp(15px, 1.6vw, 18px); }

/* ── Desktop narrow (≤75rem) — keep sidebar visible ── */
@media (max-width: 75rem) {
  :root { --sw: clamp(210px, 20vw, 260px); }
}

/* ── Tablet (≤48rem) — slide-over sidebar, single-column ── */
@media (max-width: 48rem) {
  :root { --content-max: 100%; }
  #sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: clamp(240px, 78vw, 310px);
    transform: translateX(100%);
    /* Respect the notch/cutout on the right edge in RTL when the device is
       rotated; on iPhone landscape the home-bar lives on the bottom but the
       cutout can sit on either side. */
    padding-top: var(--sa-t);
    padding-bottom: var(--sa-b);
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay.show { display: block; }
  #topbar-menu { display: flex; }
  #topbar {
    padding: 10px clamp(12px, 3vw, 18px);
    padding-top: calc(10px + var(--sa-t));
    /* Allow the topbar children to soft-wrap onto a second row if absolutely
       necessary, rather than push off-screen. In practice the gap-control and
       per-element hiding below keeps everything on one line on phones. */
    flex-wrap: wrap;
  }
  /* "الجدولة" label gets long on small — keep only the icon on phones.
     The button itself stays tappable; we just hide the trailing text node. */
  #disp-badge span { display: none; }
  /* Tap-target floor on phones: every topbar icon button must be ≥36px in
     each axis so fingertips land reliably (Apple HIG recommends 44pt; we
     hold a tight 36 to preserve the compact look). The icon glyphs stay the
     same size — we just inflate the padding. */
  .tb-icon-btn { min-width: 36px; min-height: 36px; padding: 9px; }
  #topbar-menu { padding: 9px; }                          /* overrides main.css's 5px */
  #disp-badge  { padding: 8px 10px; min-height: 36px; }
  .bubble { max-width: 90%; }
  .bubble.asst { max-width: 92%; }
  #messages { padding: clamp(10px, 2vw, 16px) clamp(12px, 3vw, 18px) 88px; }
  #input-area {
    padding: 8px clamp(10px, 3vw, 14px);
    /* iOS home-indicator clearance on phones with no physical button. */
    padding-bottom: max(8px, var(--sa-b));
  }
  .turn-ctr { max-width: 100%; }
  .artifact-card { max-width: 94%; }
  .proc-card { max-width: 100%; }
  .confirm-card { max-width: min(90vw, 290px); }
  /* Stack the long-session warning vertically so its text + buttons each get a
     full row — on phones the row layout crushed everything to ~30px wide. */
  #long-session-nudge { flex-wrap: wrap; padding: 10px 12px; }
  #long-session-nudge .lsn-text { flex: 1 1 100%; }
  #long-session-nudge .lsn-new { margin-inline-start: auto; }
  /* Dispatch panel: stack the run/pause/resume actions horizontally on
     mobile (they were a 3-row vertical column eating ~60px of width) and let
     the row body wrap below if needed. */
  .disp-card { width: 96vw; max-height: 90vh; }
  .disp-row { flex-wrap: wrap; }
  .disp-actions { flex-direction: row; flex-wrap: wrap; width: 100%; margin-top: 6px; }
  .disp-actions .disp-btn { flex: 1 1 auto; min-width: 96px; }
  /* Preflight rows: long error detail strings need to wrap, not ellipsis-clip
     to nothing. The badge stays inline; the detail wraps under it. */
  .disp-pf-row { flex-wrap: wrap; }
  .disp-pf-detail { flex: 1 1 100%; white-space: normal; margin-inline-start: 22px; }
  /* Self-test grid is a 4-column layout (60px 1fr auto 56px) that doesn't fit
     under ~360px; collapse to two rows on phones. */
  .disp-st-row {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "step pill"
      "detail elapsed";
    row-gap: 2px;
  }
  .disp-st-row .disp-st-step    { grid-area: step; }
  .disp-st-row .disp-pill       { grid-area: pill; justify-self: end; }
  .disp-st-row .disp-st-detail  { grid-area: detail; grid-column: 1 / -1; }
  .disp-st-row .disp-st-elapsed { grid-area: elapsed; }
  /* Process panel rows are flex with a tiny PID column + cmd + kill button;
     on a 320px phone the cmd ellipsis-clips to a few chars. Stack instead. */
  .proc-row { flex-wrap: wrap; gap: 6px 9px; }
  .proc-info { flex: 1 1 calc(100% - 80px); }
  .proc-cmd { white-space: normal; word-break: break-all; }
}

/* ── Small phone (≤30rem / 480px) ── */
@media (max-width: 30rem) {
  html { font-size: 14px; }
  .login-header-img { width: 90vw; }
  .user-card { min-width: 80px; padding: 12px 14px; }
  .user-av { width: 44px; height: 44px; font-size: 15px; }
  #topbar { padding: 8px 10px; gap: 6px; padding-top: calc(8px + var(--sa-t)); }
  .conn-pill { display: none; }   /* hide on very small — saves space */
  #messages { padding: 10px 10px 88px; }
  #input-area { padding: 6px 8px; padding-bottom: max(6px, var(--sa-b)); }
  .bubble { font-size: 13px; max-width: 96%; padding: 8px 10px; }
  .bubble.asst { max-width: 96%; }
  .welcome-eagle { font-size: 32px; }
  #welcome { padding: 24px 12px; }
  .welcome-chip { font-size: 12px; padding: 6px 12px; }
  .quick-btn { font-size: 11.5px; padding: 6px 8px; }
  .send-logo-mask { width: 18px; height: 15px; }
  #send-btn { width: 34px; height: 34px; }
  #stop-btn { width: 34px; height: 34px; }
  /* iOS Safari auto-zooms any <input>/<textarea> whose computed font-size is
     below 16px when the user taps to focus. That breaks the layout (the page
     ends up wider than the viewport until the user pinches back). Bump the
     textarea to 16px on phones — visually it's fine because the input wrap
     itself is already small. */
  #msg-input { font-size: 16px; }
  /* Welcome chips wrap row-aligned but get squeezed; let them grow per item. */
  .welcome-chips { gap: 6px; }
  /* Login PIN modal: keep some breathing room from the screen edges + notch. */
  #pin-modal { padding: max(16px, var(--sa-t)) 16px max(16px, var(--sa-b)); }
}

/* ── Tiny / landscape phone (≤20rem) ──
   The 36×36 tap-target floor set in the 48rem block above takes priority
   over any width-shrink here — we no longer override .tb-icon-btn to 30×30. */
@media (max-width: 20rem) {
  .login-header-img { width: 95vw; }
  .conn-pill { display: none; }
  #send-btn { width: 36px; height: 36px; } /* keep ≥36px so logo stays crisp */
}

/* ── Large screens & high-DPI ── */
@media (min-width: 90rem) {
  :root {
    --content-max: min(88ch, 70vw);
    --sw: 300px;
  }
}
@media (min-width: 120rem) {
  :root { --content-max: min(96ch, 66vw); --sw: 320px; }
  html { font-size: 17px; }
}

/* ── High zoom (≥150%) — treated same as small screen ── */
@media (max-resolution: 1.49dppx) and (max-width: 60rem) {
  :root { --content-max: 100%; }
  #sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: clamp(240px, 78vw, 310px);
    transform: translateX(100%);
  }
  #sidebar.open { transform: translateX(0); }
  #topbar-menu { display: flex; }
}

/* ── Soft keyboard on mobile shrinks the visual viewport. When a keyboard is
   showing the chat history needs to stay scrollable but the input must remain
   visible above the keyboard. The `dvh` unit used in shell.css already
   handles this on modern browsers (#app height: 100dvh); below we just make
   sure the messages list always reserves enough bottom padding so the last
   message isn't hidden under the input. ── */
@media (max-width: 48rem) {
  /* Ensure the textarea never grows so tall on a phone that it covers half
     the chat — the autoGrow JS already caps at 120px; this is belt-and-
     suspenders against an explicit `rows` override or paste of a huge blob. */
  #msg-input { max-height: min(120px, 30dvh); }
}

/* ── Landscape phone (height < 500px) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .login-logo { margin-bottom: 16px; }
  .login-header-img { width: min(280px, 50vw); }
  #user-cards { flex-direction: row; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
  .pin-card { padding: 16px 18px; }
  #pin-dots { margin: 10px 0; }
}

/* ══════════════════════════════════════════════════════
   OVERFLOW GUARD — nothing escapes the message column
   horizontally, at any screen size or mid-stream. The chat
   is a flex column; flex items default to min-width:auto and
   won't shrink below their content's intrinsic width, so a
   wide table / <pre> / long unbroken token / iframe used to
   push the whole layout wider than the viewport (and since
   the viewport disables zoom, it "ate" the screen). We clip
   the column and let those elements shrink + scroll/wrap
   inside their own box instead.
══════════════════════════════════════════════════════ */
#messages { overflow-x: hidden; }
#messages > * { min-width: 0; max-width: 100%; }
.msg-row, .turn-ctr, .chat-section, .artifact-row, .auth-card { min-width: 0; }
.bubble, .turn-rsn, .mc, .mc p, .mc li, .mc a { overflow-wrap: anywhere; }
/* Media + wide content never wider than their container */
.mc img, .mc video, .mc iframe, .html-bbl, .artifact-card { max-width: 100%; }
.mc pre, .mc table { max-width: 100%; overflow-x: auto; }
.artifact-card { width: 100%; }
.artifact-body iframe { max-width: 100%; }

/* ── Touch / no-hover devices (phones, tablets, touch-laptops): rethink the
   .msg-actions positioning entirely. ──
   The desktop CSS uses `position: absolute; bottom: -10px` so chips PEEK out
   from under the bubble ONLY on hover (a deliberate compact overlap that is
   dim and transient). On a touch device there is no hover, so the chips must
   be PERMANENTLY visible — and a permanent absolute overlap reads as "chips
   fused to / eating the bubble" (reported via real-iPhone screenshots, and
   again 2026-06-04 on a wide touch layout where the نسخ/رد area looked
   eaten up).

   Fix (ALL touch widths, not just phones): take the chips OUT of absolute
   positioning and let them FLOW on their own line below the bubble — no
   overlap, no clipping, at any width. We keep the ROW in flex row-direction
   (reliable RTL alignment on Chromium AND WebKit — .msg-row.user
   {justify-content:flex-start} pins the bubble to the right in RTL,
   .msg-row.asst{justify-content:flex-end} pins to the left) and use flex-wrap
   to push the chip strip onto a NEW line under the bubble. The strip is then
   justified with the same flex-start/flex-end rules so it sits under its
   bubble's side.

   (flex-direction:column + align-items:flex-start was tried 2026-06-01 —
   WebKit on iOS rendered user bubbles centered instead of right-aligned, an
   RTL column cross-axis quirk. Avoiding that whole code path.) */
@media (hover: none), (pointer: coarse) {
  .msg-row {
    flex-wrap: wrap;          /* lets the in-flow chip strip drop to its own line */
    align-items: flex-start;
  }
  .msg-actions {
    /* In flow, full-row width, clean gap below the bubble — no absolute
       positioning, no overlap, never clipped by the scroll container. */
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    flex: 0 0 100%;                 /* force onto its own row beneath the bubble */
    display: flex !important;       /* always visible (no hover to reveal them) */
    opacity: .85;
    margin-top: 8px;
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Align the chip strip under the SAME side as its bubble.
     RTL: justify-content:flex-start → right edge, flex-end → left edge. */
  .msg-row.user .msg-actions { justify-content: flex-start; }
  .msg-row.asst .msg-actions { justify-content: flex-end; }
  .mac { padding: 5px 12px; font-size: 11px; }   /* comfortable tap target */
}

/* ── Phone-only sizing tweaks (positioning is handled by the touch block
   above; this is just for narrow viewports). ── */
@media (max-width: 48rem) {
  .mac { font-size: 11.5px; }
  .bubble { max-width: 92%; }
  .mc pre { padding: 9px 10px; }
  .mc table { font-size: .82em; }
}