/* ===== ACE Nexus — IT Requests · mobile / small-screen layout =============
   The desktop UI is a fixed two-pane: a 340px ticket list + a detail pane.
   On a phone that leaves the detail as an unusable sliver, so below 720px we
   collapse to ONE pane at a time:
     • the request LIST is the landing view (full width);
     • tapping a request slides in the DETAIL (full width) with a
       "← All requests" back button (button injected by app.js).
   Nothing here affects the desktop layout (all inside the media query, except
   the back button which is display:none until the query turns it on).        */

/* The mobile-only back button is hidden everywhere by default; the media query
   below reveals it. Keeps it invisible in the desktop/tablet two-pane view. */
.tk-mobile-back { display: none; }

@media (max-width: 720px) {

  /* ---- iOS safe areas (needs viewport-fit=cover in index.html) ----------
     Keep the header clear of the notch/status bar, the composer + list clear
     of the home indicator and the rounded screen corners, and inset the whole
     shell from a landscape notch. */
  .shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  /* Always clear the home indicator (env) PLUS a fixed gap on top, so the
     buttons never sit flush against the safe-area edge. */
  #tkComposer { padding-bottom: calc(env(safe-area-inset-bottom) + 18px) !important; }
  .tk-list { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }

  /* ---- soft keyboard: app.js sets --kb to the keyboard overlap (px) so the
     shell lifts above it and the composer stays visible while typing. -------- */
  .shell { bottom: var(--kb, 0px); }

  /* ---- header: wrap instead of overflowing a narrow screen -------------- */
  .web-head { flex-wrap: wrap; gap: 8px 10px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .web-head .brand { font-size: 15px; }
  .web-head .grow { flex-basis: 100%; height: 0; }   /* push the actor box onto its own row */
  .web-actor { font-size: 13px; }
  .web-actor input { width: 150px; font-size: 16px; } /* 16px stops iOS Safari focus-zoom */

  /* ---- one pane at a time ----------------------------------------------- */
  .tk-left { flex: 1 1 auto; width: 100%; border-right: none; }
  .tk-detail { display: none; }                        /* hidden until a request opens */
  #tkLayout.tk-show-detail .tk-left { display: none; }
  #tkLayout.tk-show-detail .tk-detail { display: flex; }

  /* ---- roomier tap targets in the landing list -------------------------- */
  .tk-nav { padding: 10px 10px 0; }
  .tk-nav-btn { padding: 9px 12px; }
  .tk-list-head { padding: 10px 10px 8px; gap: 8px; }
  .tk-list-head .tk-btn.tiny { padding: 9px 13px; font-size: 13px; }
  .tk-filter { font-size: 16px; padding: 9px 12px; }
  .tk-list { padding: 0 8px 14px; }
  .tk-item { padding: 12px 12px; gap: 4px; }
  .tk-item-subj { font-size: 14px; }

  /* ---- detail pane: comfortable padding + the back bar ------------------ */
  #tkHead { padding: 12px 14px 0; }
  .tk-thread-scroll { padding: 12px 14px 6px; }
  #tkComposer { padding: 0 14px 12px; }
  .tk-mobile-back {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto; align-self: flex-start; margin: 10px 12px 2px;
    padding: 8px 13px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line, #2a2a30); background: var(--inset, #1c1c20);
    color: var(--ink, #f3f1ef); font-size: 13px; font-weight: 700;
  }
  .tk-mobile-back:active { filter: brightness(1.15); }

  /* chat bubbles can use more of a narrow screen */
  .tk-grp { max-width: 88%; }

  /* reply composer: bigger, tappable, no iOS zoom */
  #tkComposer textarea,
  .tk-reply-bar textarea,
  .tk-reply-bar input[type="text"] { font-size: 16px; }

  /* ---- New-request modal: near-full-width sheet, scrolls if tall -------- */
  .tk-modal { width: 94vw; max-width: 94vw; max-height: 88vh; overflow: auto; }
  .tk-fld-row { flex-direction: column; gap: 0; }
  .tk-modal input, .tk-modal textarea, .tk-modal select { font-size: 16px; }
  .tk-modal-actions { flex-wrap: wrap; }
  .tk-modal-actions .tk-btn { padding: 10px 14px; }
}