/* Gamyra AI — phones + tablets (platform layer, all variants).
 *
 * Breakpoints (from the device census + BEFORE screenshots, 2026-08-20):
 *   phone      : (max-width: 640px)                     single pane, drawer sidebar
 *   short      : (max-height: 500px)                    phone landscape — compaction
 *   tablet     : (min-width: 641px) and (max-width: 1024px)  two-pane, narrower sidebar
 * Desktop rules live in the existing stylesheets; this file only ADDS rules
 * under those queries, so desktop rendering is byte-identical (no rule here
 * matches a ≥1025px-wide, ≥501px-tall viewport).
 *
 * Principles: logical properties (RTL-safe); safe-area vars from
 * admin-shared :root; 100dvh (live viewport); ≥44px tap targets; 16px inputs
 * (iOS zooms on focus below 16px); no hover-only affordances.
 */

/* ---------- shared: tap targets + inputs (≤ 1024px, touch-first) ---------- */
@media (max-width: 1024px), (pointer: coarse) {
  /* (pointer: coarse) brings landscape iPads (1133/1180px) into the touch layer;
     a desktop mouse is pointer:fine, so desktop rendering is unchanged. */
  /* iOS zooms the page when a focused input's font-size is < 16px. */
  .app-shell input, .app-shell textarea, .app-shell select,
  .gds-input, #gds-input, .gds-search, .gds-past-search { font-size: 16px !important; }
  /* Minimum comfortable tap targets for the chrome + row actions (selectors
     verified against the census — no phantom classes). */
  .gds-top-bar button, .gds-top-bar a, .sidebar .nav-item, .recycle-bottom,
  .gds-new-chat, .gds-landing-cta, .row-action-btn, .gds-past-row button,
  .gds-attach-btn, #gds-send, .gds-cta button, .gds-header .tr-btn, .gds-files-drawer-toggle, .gds-files-show, .sidebar-show,
  .gds-dialog button, .tr-list-row { min-height: 44px; }
  .gds-top-bar button, .gds-top-bar a, .row-action-btn, .gds-past-row button, .gds-attach-btn, #gds-send, .gds-files-drawer-toggle, .gds-files-show { min-width: 44px; }
  /* Secondary controls a phone user must still hit (QA list, 2026-08-20) */
  .gds-sb-pill, .gds-help-btn, .gds-rte-btn, .tr-button-group .tr-btn, .tr-outcome-pill, .settings-edit-btn,
  #kb-clean-btn, #kb-skip-btn, #kb-clear-btn, #add-learning-toggle, #reindex-trigger, .gds-recycle-actions button,
  #gds-shell-main table select, .gds-pill, .gds-ticket-pill { min-height: 40px; }
  .gds-cite-yn button, .gds-deep-review-btn { min-width: 32px; min-height: 32px; padding: 6px; }
  /* Hover-revealed row actions must be visible on touch. */
  .row-action-btn { opacity: 1 !important; }
  /* Action rows WRAP (never overflow-x:auto — it would clip the absolutely
     positioned Download popover inside .gds-chat-actions). */
  .gds-chat-actions, .gds-cta { flex-wrap: wrap; row-gap: 6px; }
  /* Tables never force the page wider than the viewport. */
  .app-shell table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ---------- auth pages (login/signup/forgot/reset/security) + body-appended
   overlays — OUTSIDE .app-shell, so they get their own rules ---------- */
@media (max-width: 1024px), (pointer: coarse) {
  /* Inputs in the auth card + every body-appended dialog: 16px (iOS zoom). */
  .card input, .card textarea, .card select, .gds-dialog input, .gds-dialog textarea, .gds-dialog-input,
  .tr-raise textarea, .tr-raise input { font-size: 16px !important; }
  .card button, .gds-dialog button { min-height: 44px; }
}
@media (max-width: 640px), (max-height: 560px) {
  /* The auth card is flex-centred in a height:100% body: on a short viewport
     (phone landscape, keyboard up) its TOP becomes unreachable. Align to start
     and let the page scroll. */
  body:has(> .card) { align-items: flex-start; overflow-y: auto; height: auto; min-height: 100dvh; padding: calc(16px + var(--safe-top, 0px)) 12px calc(16px + var(--safe-bottom, 0px)); box-sizing: border-box; }
  .card { width: 100%; max-width: 440px; margin: 0 auto; padding: 20px 16px; }
  /* Body-appended modals: never taller than the live viewport; scroll inside. */
  .gds-dialog, .gds-modal, .gds-cost-modal, .gds-diag-modal { max-height: calc(100dvh - 24px); overflow: auto; width: min(100vw - 24px, 560px); }
}

/* ---------- phone: single pane, sidebar as an off-canvas drawer ---------- */
@media (max-width: 640px) {
  :root { --gds-topbar-h: 52px; }

  /* Shell: no gutters; top bar height + safe top; bottom safe inset. */
  .app-shell {
    padding: calc(var(--gds-topbar-h) + var(--safe-top)) 0 var(--safe-bottom) 0;
    gap: 0;
    height: 100dvh;
  }
  /* Top bar: fixed full-width strip under the notch, compact. */
  .admin-top-bar-wrap { top: 0; left: 0; right: 0; padding-top: var(--safe-top); }
  .admin-top-bar-wrap .gds-top-bar {
    padding: 8px calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));
    min-height: var(--gds-topbar-h); gap: 8px;
    background: var(--brand-bar-dark, #14120E);
  }
  .gds-top-bar .gds-brand { font-size: 15px; white-space: nowrap; }
  .gds-top-bar .gds-version-pill, .gds-top-bar .gds-who { display: none; }   /* moved to the drawer footer */
  .gds-top-bar .gds-security-link { display: none; }                          /* available from the drawer */
  .gds-top-bar .gds-logout-btn { padding: 8px 10px; }
  /* Hamburger (injected by shell.js on phones) */
  .gds-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-inline-end: 2px;
    border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
    background: rgba(255,255,255,0.06); color: #fff; font-size: 20px; line-height: 1;
  }

  /* Sidebar → off-canvas drawer. The desktop collapse rules (is-collapsed /
     sidebar-show / resize handle) are overridden here: the drawer is driven by
     body.gds-drawer-open only. */
  aside.sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    width: min(86vw, 360px); min-width: 0; max-width: none;
    height: 100dvh; border-radius: 0;
    padding-top: calc(var(--safe-top) + 8px); padding-bottom: var(--safe-bottom);
    padding-inline-start: var(--safe-left);
    transform: translateX(-100%); transition: transform 220ms ease;
    box-shadow: 8px 0 32px rgba(0,0,0,0.55);
    background: #15120E;   /* opaque over the page (the desktop gradient is translucent) */
  }
  html[dir="rtl"] aside.sidebar { transform: translateX(100%); box-shadow: -8px 0 32px rgba(0,0,0,0.55); }
  body.gds-drawer-open aside.sidebar { transform: translateX(0); }
  aside.sidebar.is-collapsed { flex-basis: auto; opacity: 1; pointer-events: auto; border: inherit; }   /* a persisted desktop collapse must not leave the phone drawer inert */
  #gds-shell-sidebar-toggle, #gds-shell-sidebar-show, .sidebar-resize { display: none !important; }
  /* Scrim — appended INSIDE .app-shell (isolation:isolate = its own stacking
     context) so z-index compares with the drawer (z60) rather than the root. */
  .app-shell > .gds-drawer-scrim {
    position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none; transition: opacity 220ms ease;
  }
  body.gds-drawer-open .gds-drawer-scrim { opacity: 1; pointer-events: auto; }
  body.gds-drawer-open { overflow: hidden; }
  /* Drawer IA (critic risk 6): a phone user opens the drawer to pick a chat —
     the active list comes FIRST; the module nav collapses behind a disclosure
     row (shell.js adds .gds-nav-disclosure; .gds-nav-open expands it). */
  .sidebar .sidebar-scroll { display: flex; flex-direction: column; }
  .sidebar #gds-shell-list-slot { order: 1; }
  /* flex:0 0 auto on the nav + disclosure: .sidebar-scroll is a COLUMN flex box
     whose list slot (overflow visible → min-height:auto) cannot shrink, so the
     nav (overflow:hidden → min-height 0) absorbed all the negative space and
     opened to 0px whenever the session list was taller than the drawer — the
     module nav was unreachable on phones (QA 2026-08-20, P1). */
  .sidebar #gds-shell-sidebar-nav { order: 2; flex: 0 0 auto; max-height: 0; overflow: hidden; transition: max-height 200ms ease; }
  .sidebar.gds-nav-open #gds-shell-sidebar-nav { max-height: 70dvh; overflow-y: auto; }
  .sidebar .gds-nav-disclosure {
    order: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    width: calc(100% - 20px); margin: 4px 10px 6px; padding: 10px 12px; min-height: 44px;
    border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; background: rgba(255,255,255,0.04);
    color: var(--text, #fff); font: inherit; font-weight: 600; text-align: start;
  }
  .sidebar .gds-nav-disclosure::after { content: '▾'; opacity: 0.7; transition: transform 160ms; }
  .sidebar.gds-nav-open .gds-nav-disclosure::after { transform: rotate(180deg); }

  /* In-drawer close (the open drawer covers the hamburger) */
  aside.sidebar > header { position: relative; }
  aside.sidebar .gds-drawer-close {
    position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04); color: var(--text, #fff); font-size: 22px; line-height: 1; cursor: pointer;
  }
  /* Drawer footer: identity + security + version (what the bar dropped) */
  .gds-drawer-foot {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 14px calc(10px + var(--safe-bottom));
    border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: var(--muted, #9a948c);
  }
  .gds-drawer-foot a { color: var(--accent); }

  /* Main pane fills the width; rounded corners off at the edges. The desktop
     floor (chat.css: main min-width 490px — protects the centre column between
     two side panes) is meaningless when main is the ONLY pane. */
  main#gds-shell-main, .gds-shell-main, .app-shell main, .app-shell[data-active-module="chat"] main { border-radius: 0; min-width: 0 !important; width: 100%; }
  /* Chat internals: fluid, never wider than the pane. */
  .gds-chat, .gds-messages, .gds-actions, .gds-input-resize, .gds-landing, .gds-cta, #gds-chat-context-pills,
  .gds-input-row, .gds-composer { min-width: 0; max-width: 100%; width: auto; box-sizing: border-box; }
  .gds-landing { padding-inline: 16px; }
  /* Desktop gutters stack up on a phone: main.gds-chat pads 28px + .gds-actions
     20px + .gds-input margin 8px → the composer started 57px in on a 393px
     phone and the textarea was 163px ('Describe the' truncated). Messages and
     header pad 20px on top of the 28px too. Collapse the outer gutter; keep
     the inner 12px so bubbles still breathe. */
  main.gds-chat { padding-left: 0 !important; padding-right: 0 !important; }
  .gds-header, .gds-messages, .gds-actions { padding-left: 12px; padding-right: 12px; }
  .gds-input { margin-left: 0; margin-right: 0; }
  .gds-landing-sub { max-width: 100%; }
  .gds-input { width: 100%; }
  .app-shell:has(.sidebar-show:not([hidden])) main { padding-left: 0; }

  /* Top bar: the right group must never push Logout off-screen. The brand
     name yields (ellipsis) before the controls do. */
  .admin-top-bar-wrap .gds-top-bar { flex-wrap: nowrap; }
  .gds-top-bar .gds-top-bar-left { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .gds-top-bar .gds-brand { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .gds-top-bar .gds-top-bar-right { flex: 0 0 auto; }
  .gds-top-bar .gds-logout-btn { white-space: nowrap; }

  /* Admin-module inline FORM ROWS (users/kb/learnings/settings render them as
     style="display:flex;align-items:flex-end;gap:…"): on phones the fields
     wrap and go full-width instead of overflowing the pane. */
  #gds-shell-main div[style*="display:flex"][style*="align-items:flex-end"],
  #gds-shell-main div[style*="display: flex"][style*="align-items: flex-end"] { flex-wrap: wrap !important; }
  #gds-shell-main div[style*="display:flex"][style*="align-items:flex-end"] > div,
  #gds-shell-main div[style*="display: flex"][style*="align-items: flex-end"] > div { flex: 1 1 100% !important; min-width: 0 !important; }
  #gds-shell-main div[style*="display:flex"][style*="align-items:flex-end"] > button,
  #gds-shell-main div[style*="display: flex"][style*="align-items: flex-end"] > button { flex: 1 1 100% !important; }
  #gds-shell-main input[type="text"], #gds-shell-main input[type="email"], #gds-shell-main select, #gds-shell-main textarea { max-width: 100%; box-sizing: border-box; }
  /* Report forms: the two-column field grid stacks on phones. */
  .tr-row { grid-template-columns: 1fr !important; }
  .tr-input { min-width: 0; width: 100%; }
  /* Help toolbar: the search field takes a full first row; pill/count/‹ ›/clear wrap under it. */
  .gds-help-toolbar { flex-wrap: wrap; padding: 8px 12px; }
  .gds-help-search { flex: 1 1 100%; order: -1; }
  .gds-help-count { min-width: 0; }
  /* Settings knob table: let the wide table scroll inside its own box. */
  .settings-table, #gds-shell-main table { display: block; overflow-x: auto; max-width: 100%; }
  /* Help: TOC/search chrome tap targets */
  .help-toc button, .help-search button, .help-nav-prev, .help-nav-next { min-width: 40px; min-height: 40px; }
  .sidebar-toggle, #gds-shell-sidebar-toggle { min-width: 40px; min-height: 40px; }

  /* Chat: messages full-width-ish; composer = ONE ROW on phones (buttons
     inline, textarea auto-grows), compact + safe-area aware. */
  .gds-msg { max-width: 92%; }
  .gds-composer, .gds-input-row { padding-bottom: calc(8px + var(--safe-bottom)); }
  .gds-input { height: auto !important; min-height: 52px; max-height: 40dvh; display: flex; flex-direction: row; align-items: flex-end; gap: 6px; padding: 6px 8px; margin: 0 8px; width: auto; }
  .gds-input textarea { flex: 1 1 auto; min-width: 0; }
  .gds-input > .gds-attach-stack { order: 0; } .gds-input > textarea { order: 1; } .gds-input > .gds-submit { order: 2; }
  .gds-input textarea { height: 40px; min-height: 40px; max-height: 30dvh; padding: 9px 8px; line-height: 1.35; resize: none; overflow-y: auto; }   /* rows=4 intrinsic → 1 row; chat.js auto-grows on input (phone only) */
  .gds-attach-stack { flex-direction: row; align-self: flex-end; margin-bottom: 0; gap: 4px; }
  .gds-attach-btn, .gds-submit { width: 44px; height: 44px; flex: 0 0 44px; }
  /* Folder upload (webkitdirectory) is unsupported by iOS Safari / most phone
     browsers and its button cost the textarea ~50px on a 393px phone
     (placeholder truncated to 'Describe the'). Files attach still works. */
  #gds-attach-folder-btn { display: none; }
  .gds-input-resize { display: none; }   /* drag-to-resize is a desktop affordance; auto-grow on phones */
  /* The org · role pill doesn't fit a phone top bar (it clipped to 'GLOBAL
     ADMI' next to the brand, worse with the language toggle); the drawer
     footer shows it instead (shell.js copies it into .gds-drawer-role). */
  .gds-top-bar .gds-who-role { display: none; }
  .gds-drawer-role { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 999px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
  /* Touch polish: scope pills + drawer footer link reach ≥32px; */
  .gds-scope-pill { min-height: 32px; }
  .gds-drawer-security { display: inline-block; padding: 8px 0; }
  .gds-files-show, .sidebar-show { top: calc(var(--gds-topbar-h) + var(--safe-top) + 6px); }   /* float below the phone header, not over it */
}
/* Files drawer as a bottom SHEET on phones in either orientation (portrait by
   width, landscape by height): the desktop 380px side pane (min-width 180px
   !important in chat.css) starved the chat to 0px at 852x393. */
@media (max-width: 640px), (max-height: 500px) {
  .app-shell > .gds-files-drawer, .app-shell.files-drawer-open > .gds-files-drawer {
    position: fixed; inset-inline: 0; bottom: 0; top: auto; height: 70dvh; max-height: 70dvh; width: auto; min-width: 0 !important; max-width: none;
    border-radius: 16px 16px 0 0; z-index: 58; padding-bottom: var(--safe-bottom);
  }
}

/* ---------- phone landscape (short viewports, any width): compaction ----------
   852x393 is in the TABLET width band but has phone height — the composer and
   the top bar must take the phone treatment, and the sidebar yields space. */
@media (max-height: 500px) {
  :root { --gds-topbar-h: 40px; }
  .app-shell { padding-top: calc(var(--gds-topbar-h) + var(--safe-top)); padding-bottom: var(--safe-bottom); }
  .admin-top-bar-wrap { top: 0; left: 0; right: 0; }
  .admin-top-bar-wrap .gds-top-bar { min-height: var(--gds-topbar-h); padding: 2px 10px; gap: 8px; flex-wrap: nowrap; }
  .gds-top-bar button, .gds-top-bar a { min-height: 34px; }     /* 44px buttons overflowed a 40px bar */
  .gds-top-bar .gds-who { display: none; }
  .admin-top-bar-wrap { padding-top: var(--safe-top); }
  .admin-top-bar-wrap .gds-top-bar { padding-left: calc(10px + var(--safe-left)); padding-right: calc(10px + var(--safe-right)); }
  /* Open session in phone landscape: the header action rows (44px) + CTA +
     meter + composer left the message list 0px tall. Compact the pane chrome
     and cap the composer; the transcript keeps a floor. */
  .gds-header { padding: 6px 12px; gap: 4px; }
  .gds-header .tr-btn, .gds-chat-actions .tr-btn, .gds-cta button { min-height: 32px; height: 32px; padding-top: 2px; padding-bottom: 2px; }
  .gds-cta { padding: 4px 0; }
  .gds-messages { padding: 8px 12px; min-height: 80px; }
  .gds-input { max-height: 28dvh; }
  /* Admin inline form rows wrap here too (same rule as the phone block). */
  #gds-shell-main div[style*="display:flex"][style*="align-items:flex-end"],
  #gds-shell-main div[style*="display: flex"][style*="align-items: flex-end"] { flex-wrap: wrap !important; }
  #gds-shell-main div[style*="display:flex"][style*="align-items:flex-end"] > div,
  #gds-shell-main div[style*="display: flex"][style*="align-items: flex-end"] > div { flex: 1 1 220px !important; min-width: 0 !important; }
  /* One-row composer (same as the phone rule) */
  .gds-input { height: auto !important; min-height: 48px; max-height: 34dvh; display: flex; flex-direction: row; align-items: flex-end; gap: 6px; padding: 4px 8px; }
  .gds-input textarea { height: 36px; min-height: 36px; max-height: 26dvh; padding: 8px; resize: none; flex: 1 1 auto; min-width: 0; }
  .gds-attach-stack { flex-direction: row; align-self: flex-end; margin-bottom: 0; gap: 4px; }
  .gds-attach-btn, .gds-submit { width: 40px; height: 40px; flex: 0 0 40px; }
  .gds-input-resize { display: none; }
  .gds-actions { padding-top: 6px; padding-bottom: calc(6px + var(--safe-bottom)); }
  .gds-header { min-height: 0; }
  .gds-landing { padding: 8px; }
  .gds-landing-icon, .gds-landing svg { width: 36px; height: 36px; }
  .gds-landing-title { font-size: 16px; margin: 6px 0 2px; }
  .sidebar .nav-item { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
  aside.sidebar header { padding-top: 6px; padding-bottom: 6px; }
  aside.sidebar header h1 { font-size: 16px; }
  /* In the tablet width band the sidebar takes ~300px of 852: slim it.
     (.app-shell > prefix beats the tablet block's single-class rule.) */
  .app-shell > aside.sidebar { min-width: 220px !important; max-width: 260px !important; flex-basis: 240px; }
}

/* ---------- tablet: keep two panes, slim the sidebar ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .app-shell { padding: calc(50px + var(--safe-top)) calc(16px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(16px + var(--safe-left)); gap: 10px; }
  aside.sidebar { flex-basis: 260px; min-width: 240px; max-width: 280px; }   /* 260 of 744 (iPad mini) leaves the chat 432px; 300 left it 304 */
  /* The middle pane's desktop floor (main min-width 490px) starved the
     sidebar to 212px on an iPad mini (744px): session titles clipped to
     'Test Inpu…'. Tablets are fluid like phones; the sidebar floor holds. */
  main#gds-shell-main, .gds-shell-main, .app-shell main { min-width: 0 !important; }
  .gds-chat, .gds-messages, .gds-actions, .gds-landing, .gds-cta, .gds-input-row, .gds-composer { min-width: 0; max-width: 100%; }
  .admin-top-bar-wrap .gds-top-bar { flex-wrap: nowrap; gap: 8px; }
  .gds-top-bar .gds-version-pill { font-size: 9px; padding: 2px 6px; }   /* slimmer, not hidden — the drawer footer (its phone home) does not exist on tablets */
  .gds-top-bar .gds-top-bar-right { min-width: 0; }
  .gds-top-bar .gds-brand, .gds-top-bar .gds-logout-btn, .gds-top-bar .gds-security-link { white-space: nowrap; }
  .gds-top-bar .gds-who { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* the yielder (AR bumps the font; 744px wrapped the brand) */
  .gds-top-bar .gds-who-role { display: inline-block; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .gds-composer-actions { flex-direction: row; }
  /* Files drawer: an OVERLAY pane on tablets (a third flex pane collapsed the
     chat to 52–128px on an iPad portrait; 0px with a persisted 450px width). */
  .app-shell > .gds-files-drawer, .app-shell.files-drawer-open > .gds-files-drawer {
    position: fixed; inset-inline-end: 0; top: calc(var(--gds-topbar-h, 50px) + var(--safe-top)); bottom: 0; height: auto;
    width: min(380px, 55vw); min-width: 0 !important; max-width: none; z-index: 58; border-radius: 16px 0 0 16px;
  }
  html[dir="rtl"] .app-shell > .gds-files-drawer { border-radius: 0 16px 16px 0; }
  /* Admin inline form rows wrap on tablets (the invite Email field was 0px on an iPad mini). */
  #gds-shell-main div[style*="display:flex"][style*="align-items:flex-end"],
  #gds-shell-main div[style*="display: flex"][style*="align-items: flex-end"] { flex-wrap: wrap !important; }
  #gds-shell-main div[style*="display:flex"][style*="align-items:flex-end"] > div[style*="flex:1 1 auto"],
  #gds-shell-main div[style*="display: flex"][style*="align-items: flex-end"] > div[style*="flex: 1 1 auto"] { flex: 1 1 220px !important; min-width: 0 !important; }
}