/* ── Mobile responsive (≤640 px) ─────────────────────────────────────────
     Three changes the QA pass surfaced:
       - Stat cards reflow from 5-column grid to 2-column grid.
       - Tab bar already scrolls (see .tabs above) but tighten padding.
       - AI Agents table: horizontal scroll preserves Edit + Delete buttons
         that previously clipped off-screen at 400 px.
       - Form rows collapse to a single column so labels and inputs don't
         overlap on narrow screens.
  */
  @media (max-width: 640px) {
    .stats-bar { grid-template-columns:repeat(2, 1fr); }
    .tab { padding:10px 14px; font-size:12px; }
    .header { padding:10px 14px; }
    .agents-layout { padding:14px; }
    .form-row { grid-template-columns:1fr; gap:10px; }
    .modal { width:100%; max-width:100vw; max-height:100vh;
      border-radius:0; }
    .modal-body { padding:14px; }
    .modal-footer { padding:12px 14px; flex-wrap:wrap; }
    .modal-footer .btn-primary, .modal-footer .btn-secondary { flex:1; justify-content:center; }
    .aev-grid, .aev-grid-2col { grid-template-columns:1fr; padding:12px; gap:10px; }
    .aev-header { flex-wrap:wrap; gap:8px; padding:10px 12px; }
    .aev-header-right .btn-primary { width:100%; justify-content:center; }
    .agents-toolbar { flex-direction:column; align-items:stretch; gap:10px; }
    .agents-toolbar .btn-primary { width:100%; justify-content:center; }
    /* Stack the Actions cell vertically and let the table use full
       viewport width — Edit and Delete are otherwise too tight to tap or
       fall behind the right-edge clip of the scroll container. */
    .agents-table { min-width:0; }
    .agents-table th:nth-child(2), .agents-table td:nth-child(2),
    .agents-table th:nth-child(3), .agents-table td:nth-child(3),
    .agents-table th:nth-child(4), .agents-table td:nth-child(4) {
      display:none;
    }
    .agent-actions { flex-direction:row; justify-content:flex-end; gap:6px; }
    .btn-edit, .btn-danger { padding:6px 10px; font-size:12px; }
    /* Functions sub-modals (Agent Transfer / Extract Variable / Custom
       Function). The default `padding:28px; width:560px;` overflows on
       narrow screens. Match the agents modal: full-screen, tighter
       padding, sticky-bottom action bar so Cancel/Save are always
       reachable without scrolling the body behind. */
    .kb-modal { width:100%; max-width:100vw; max-height:100vh;
      border-radius:0; padding:14px; }
    .kb-modal-type-grid { grid-template-columns:1fr; gap:8px; }
    .kb-modal-actions { position:sticky; bottom:0; padding-top:10px;
      background:var(--surface); margin-top:14px; gap:8px; }
    .kb-modal-actions button { flex:1; }
  }
  /* Very-narrow screens (≤ 380 px). Compact further so the iPhone-SE
     class of devices doesn't have a single text input wrap around itself. */
  @media (max-width: 380px) {
    .stats-bar { grid-template-columns:1fr; }
    .header h1 { font-size:14px; }
    .header-sub { display:none; }
    .modal-header { padding:14px; }
    .modal-title { font-size:13px; }
  }