.ainput {
  flex: 1;
  padding: 10px 13px;
  background: linear-gradient(180deg, rgba(2,4,10,1) 0%, rgba(5,8,16,1) 100%);
  border: 1px solid rgba(160,120,32,0.28);
  border-top-color: rgba(0,0,0,0.90);
  border-bottom-color: rgba(160,120,32,0.20);
  border-radius: var(--r);
  color: var(--smoke);
  font-family: var(--f-mono);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  letter-spacing: 0.06em;
  /* Deep recessed input well */
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,0.80),
    inset 0 1px 4px rgba(0,0,0,0.70),
    inset 2px 0 4px rgba(0,0,0,0.40),
    inset -2px 0 4px rgba(0,0,0,0.40),
    0 1px 0 rgba(210,175,90,0.08);
}
.ainput::placeholder { color: var(--smoke4); }
/* Custom select wrapper — replaces native select popup */
.csel-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.csel-wrap select {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.csel-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  background: linear-gradient(180deg, rgba(2,4,10,1) 0%, rgba(5,8,16,1) 100%);
  border: 1px solid rgba(160,120,32,0.28);
  border-top-color: rgba(0,0,0,0.90);
  border-bottom-color: rgba(160,120,32,0.20);
  border-radius: var(--r);
  color: var(--smoke);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,0.80),
    inset 0 1px 4px rgba(0,0,0,0.70),
    inset 2px 0 4px rgba(0,0,0,0.40),
    inset -2px 0 4px rgba(0,0,0,0.40),
    0 1px 0 rgba(210,175,90,0.08);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.csel-display::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(160,120,32,0.55);
  margin-left: 6px;
}
.csel-wrap:focus-within .csel-display {
  border-color: rgba(160,120,32,0.55);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.55),
    inset 0 1px 3px rgba(0,0,0,0.40),
    0 0 0 2px rgba(160,120,32,0.12),
    0 0 12px rgba(160,120,32,0.08);
}
.ainput:focus {
  border-color: rgba(160,120,32,0.55);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.55),
    inset 0 1px 3px rgba(0,0,0,0.40),
    0 0 0 2px rgba(160,120,32,0.12),
    0 0 12px rgba(160,120,32,0.08);
}
.asave {
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(28,38,62,1) 0%, rgba(14,19,36,1) 50%, rgba(9,13,24,1) 100%);
  border: 1px solid rgba(160,120,32,0.50);
  border-top-color: rgba(210,175,90,0.35);
  border-bottom-color: rgba(0,0,0,0.80);
  border-radius: var(--r);
  color: rgba(160,120,32,0.90);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s var(--ease);
  -webkit-appearance: none;
  position: relative;
  /* Strongly raised face */
  box-shadow:
    inset 0 1px 0 rgba(210,175,90,0.28),
    inset 1px 0 0 rgba(210,175,90,0.10),
    inset -1px 0 0 rgba(210,175,90,0.10),
    0 4px 12px rgba(0,0,0,0.80),
    0 2px 4px rgba(0,0,0,0.90),
    0 1px 0 rgba(0,0,0,0.95),
    inset 0 -2px 0 rgba(0,0,0,0.65);
}
.asave:hover {
  border-color: rgba(160,120,32,0.60);
  color: rgba(210,175,90,0.95);
  background: linear-gradient(180deg, rgba(28,38,60,0.97) 0%, rgba(14,19,34,0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(210,175,90,0.20),
    inset 1px 0 0 rgba(210,175,90,0.07),
    inset -1px 0 0 rgba(210,175,90,0.07),
    0 4px 14px rgba(0,0,0,0.75),
    0 0 20px rgba(160,120,32,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.55);
}
.asave:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(0,0,0,0.40),
    0 1px 3px rgba(0,0,0,0.60),
    inset 0 -1px 0 rgba(210,175,90,0.04);
}
.afb { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; margin-top: 8px; text-transform: uppercase; }
.afb.ok { color: var(--green-lt); }
.afb.err { color: var(--red-lt); }

/* ── Model Modal ───────────────────────────────────────── */
.modal-bg {
  display: none;
  position: fixed; inset: 0; z-index: 600;
  background: rgba(2,4,10,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: flex-end; justify-content: center;
}
.modal-bg.open { display: flex; }
.modal-sheet {
  background:
    radial-gradient(ellipse 90% 38% at 50% 0%, rgba(32,24,6,0.50) 0%, transparent 70%),
    linear-gradient(175deg,
      rgba(26,32,52,1) 0%,
      rgba(17,21,38,1) 35%,
      rgba(11,15,27,1) 65%,
      rgba(8,10,20,1) 100%);
  border: 1px solid rgba(160,120,32,0.28);
  border-top-color: rgba(210,175,90,0.42);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  width: 100%; max-width: 520px;
  padding: 24px 20px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  max-height: 85vh; overflow-y: auto;
  animation: slideUp 0.28s var(--ease);
  position: relative;
  isolation: isolate;
  box-shadow:
    0 -10px 50px rgba(0,0,0,0.85),
    0 -4px 16px rgba(0,0,0,0.65),
    inset 0 2px 0 rgba(210,175,90,0.24),
    inset 0 1px 0 rgba(210,175,90,0.10),
    inset 2px 0 0 rgba(210,175,90,0.06),
    inset -2px 0 0 rgba(210,175,90,0.06),
    inset 0 -4px 16px rgba(0,0,0,0.55),
    0 0 40px rgba(160,120,32,0.07);
}
/* Scanline texture — same technique as sidebar brand plate */
.modal-sheet::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.007) 2px,
    rgba(255,255,255,0.007) 3px
  );
  pointer-events: none;
  border-radius: 16px 16px 0 0;
  z-index: 0;
}
/* Top bevel — bright polished metal edge */
.modal-sheet::after {
  content: '';
  position: absolute; top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(160,120,32,0.28) 12%,
    rgba(210,175,90,0.88) 42%,
    rgba(255,250,210,1.00) 50%,
    rgba(210,175,90,0.88) 58%,
    rgba(160,120,32,0.28) 88%,
    transparent);
  pointer-events: none;
  z-index: 1;
}
@keyframes slideUp {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-handle {
  width: 36px; height: 3px;
  background: linear-gradient(90deg,
    rgba(160,120,32,0.16),
    rgba(210,175,90,0.55) 35%,
    rgba(210,175,90,0.55) 65%,
    rgba(160,120,32,0.16));
  border-radius: 2px;
  margin: 0 auto 22px;
  position: relative; z-index: 2;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.80),
    0 -1px 0 rgba(210,175,90,0.12);
}
.modal-title {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--smoke);
  margin-bottom: 4px;
  position: relative; z-index: 2;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.70);
}
.modal-sub {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--smoke4);
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative; z-index: 2;
  text-align: center;
}
/* ── Recessed pit — warm amber glow between plates ── */
#model-list {
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(80,45,5,0.55) 0%, rgba(40,22,2,0.70) 50%, rgba(18,10,1,0.90) 100%),
    linear-gradient(180deg,
      rgba(12,7,1,1) 0%,
      rgba(18,10,2,1) 40%,
      rgba(12,7,1,1) 100%);
  border: 1px solid rgba(120,80,10,0.40);
  border-top-color: rgba(0,0,0,0.80);
  border-bottom-color: rgba(180,120,20,0.30);
  border-radius: var(--r2);
  padding: 6px;
  position: relative; z-index: 2;
  box-shadow:
    inset 0 6px 20px rgba(0,0,0,0.80),
    inset 0 2px 6px rgba(0,0,0,0.70),
    inset 5px 0 14px rgba(0,0,0,0.40),
    inset -5px 0 14px rgba(0,0,0,0.40),
    inset 0 -4px 14px rgba(0,0,0,0.40),
    /* Warm amber glow from within */
    inset 0 0 30px rgba(160,90,10,0.15);
}
/* Pit floor — fine gold scanlines like machinery */
#model-list::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(180,110,10,0.04) 3px,
    rgba(180,110,10,0.04) 4px
  );
  pointer-events: none; border-radius: var(--r2);
}
/* ── Option cards — lifted slabs ── */
.moption {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 20px;
  border-radius: calc(var(--r) - 1px);
  border: 1px solid rgba(160,120,32,0.18);
  border-top-color: rgba(210,175,90,0.14);
  border-bottom-color: rgba(0,0,0,0.85);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(26,20,6,0.55) 0%, transparent 68%),
    linear-gradient(170deg,
      rgba(18,22,36,1) 0%,
      rgba(12,15,26,1) 45%,
      rgba(8,10,20,1) 100%);
  cursor: pointer;
  /* Gap between cards — amber glow peeks through */
  margin-bottom: 4px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative; overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.80),
    0 2px 5px rgba(0,0,0,0.65),
    0 1px 0 rgba(0,0,0,0.95),
    inset 0 2px 0 rgba(210,175,90,0.10),
    inset 0 1px 0 rgba(210,175,90,0.05),
    inset 0 -2px 6px rgba(0,0,0,0.60);
}
.moption:last-child { margin-bottom: 0; }
/* Card-face scanlines */
.moption::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.006) 2px,
    rgba(255,255,255,0.006) 3px
  );
  pointer-events: none; border-radius: inherit;
  z-index: 0;
}
/* Gold left-edge accent bar */
.moption::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    rgba(232,200,120,0.90) 0%,
    var(--gold-metal-2) 30%,
    var(--gold-metal-3) 65%,
    var(--gold-metal-4) 100%);
  opacity: 0;
  transition: opacity 0.20s;
  z-index: 1;
  box-shadow: 2px 0 10px rgba(160,120,32,0.35);
}
.moption:hover {
  border-color: rgba(160,120,32,0.30);
  border-top-color: rgba(210,175,90,0.20);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(32,25,6,0.70) 0%, transparent 68%),
    linear-gradient(170deg,
      rgba(20,25,40,1) 0%,
      rgba(14,18,30,1) 45%,
      rgba(10,12,22,1) 100%);
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.85),
    0 3px 7px rgba(0,0,0,0.70),
    0 1px 0 rgba(0,0,0,0.95),
    inset 0 2px 0 rgba(210,175,90,0.14),
    inset 0 1px 0 rgba(210,175,90,0.06),
    inset 0 -2px 6px rgba(0,0,0,0.65),
    0 0 14px rgba(160,120,32,0.07);
}
.moption.active {
  border-color: rgba(160,120,32,0.48);
  border-top-color: rgba(210,175,90,0.36);
  border-bottom-color: rgba(0,0,0,0.85);
  background:
    radial-gradient(ellipse 75% 48% at 50% 0%, rgba(50,34,4,0.85) 0%, transparent 68%),
    linear-gradient(170deg,
      rgba(32,24,5,1) 0%,
      rgba(22,16,3,1) 45%,
      rgba(14,10,2,1) 100%);
  box-shadow:
    0 5px 16px rgba(0,0,0,0.85),
    0 2px 6px rgba(0,0,0,0.70),
    0 1px 0 rgba(0,0,0,0.95),
    inset 0 2px 0 rgba(210,175,90,0.22),
    inset 0 1px 0 rgba(210,175,90,0.10),
    inset 0 -2px 8px rgba(0,0,0,0.65),
    0 0 24px rgba(160,120,32,0.14);
}
.moption.active::before { opacity: 1; }
.mo-pip {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  position: relative; z-index: 2;
  box-shadow:
    0 0 12px currentColor,
    0 0 5px currentColor,
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 1px 3px rgba(0,0,0,0.90);
}
.mo-pip::after {
  content: '';
  position: absolute; top: 1px; left: 2px;
  width: 3px; height: 2px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
}
.mo-info { flex: 1; position: relative; z-index: 2; text-align: center; }
.mo-name {
  font-family: var(--f-display);
  font-size: 18px; font-weight: 300;
  color: var(--smoke); letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.90), 0 1px 2px rgba(0,0,0,0.80);
}
.moption.active .mo-name {
  color: var(--gold-lt);
  text-shadow: 0 0 14px rgba(160,120,32,0.45), 0 2px 8px rgba(0,0,0,0.90);
}
.mo-sub {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.1em; color: var(--smoke4);
  text-transform: uppercase; margin-top: 2px;
}
.mo-check {
  color: var(--gold); font-size: 14px; display: none;
  position: relative; z-index: 2;
  text-shadow: 0 0 12px rgba(160,120,32,0.80), 0 0 5px rgba(160,120,32,0.60);
  filter: drop-shadow(0 0 5px rgba(160,120,32,0.55));
}
.moption.active .mo-check { display: block; }

/* ── Bottom nav (mobile) ───────────────────────────────── */
#botbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  /* THE SAFE-AREA CLIP. `box-sizing: border-box` is set globally
     (main-1-login-theme.css:50), so padding is SUBTRACTED from height, not added.
     `height: var(--botbar)` (64px) + `padding-bottom: 34px` on a home-indicator
     device left a 30px content box -- the stacked icon+label was clipped and the
     touch target sat far below the 44px minimum, on the primary navigation of the
     exact device a store manager runs inspection pre-flight on. calc() adds the
     inset to the height so the 64px content box survives, and the inset still
     keeps the buttons clear of the indicator. */
  height: calc(var(--botbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(8,13,24,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: flex; z-index: 200;
}
.tab-btn {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  border: none; background: transparent;
  /* CONTRAST. --smoke4 (#2e3a50) on the botbar (#080d18) computes to 1.70:1 --
     failing WCAG AA (4.5:1) by a wide margin, at 8px, on primary navigation.
     --smoke2 (#9aa3b4) computes to 7.65:1. Size raised 8px -> 11px for the same
     reason: 8px uppercase mono at 0.08em tracking is not legible at arm's length
     on a phone. The .active state keeps --gold-lt and is unaffected. */
  color: var(--smoke2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.15s;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-btn::before {
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.15s;
}
.tab-btn.active { color: var(--gold-lt); }
.tab-btn.active::before { opacity: 0.8; }
.tab-icon { font-size: 17px; line-height: 1; }

/* ── Desktop / Mobile ──────────────────────────────────── */
@media (min-width: 768px) {
  #botbar { display: none; }
  .tb-logo { display: block; }
  .tb-model-chip { display: none !important; }
  #content { left: var(--sidebar); top: var(--topbar); bottom: 0; transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
  #content.sb-collapsed { left: 0; }
  .chat-messages { padding: 28px 32px; }
  .chat-bar { padding: 14px 32px; padding-bottom: 14px; }
  .files-top { padding: 16px 24px; }
  .files-body { padding: 16px 24px; }
  .admin-wrap { padding: 28px 36px; }
  .modal-sheet { border-radius: 16px; margin: auto; border-bottom: 1px solid rgba(160,120,32,0.18); }
  .modal-bg { align-items: center; }
}
@media (max-width: 767px) {
  #sidebar { display: none; }
  #sb-toggle { display: none; }
  #content { left: 0; top: var(--topbar); bottom: var(--botbar); }
  .tb-model-chip { display: flex !important; }
  .sgrid { grid-template-columns: 1fr; }
  .upload-area { flex-direction: column; }
  .upload-btn { width: 100%; }

  /* ── Files panel mobile redesign ──
     Stack collections list above files list instead of side-by-side.
     Collections become a horizontal scroll strip; files take full width. */
  .files-outer { flex-direction: column; }
  .col-sidebar {
    width: 100%;
    max-height: 110px;
    border-right: none;
    border-bottom: 1px solid rgba(160,120,32,0.22);
    box-shadow: 0 4px 20px rgba(0,0,0,0.65);
  }
  .col-sidebar-head { padding: 10px 14px; }
  .col-list {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 0 14px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    align-items: center;
  }
  .col-list::-webkit-scrollbar { display: none; }
  /* Collapse col-item and col-all to compact horizontal pills on mobile */
  .col-item, .col-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
    min-height: 0;
    gap: 0;
  }
  /* Hide everything except the name text */
  .col-item .col-icon,
  .col-item .col-del,
  .col-item .col-count,
  .col-all .col-all-icon,
  .col-section-label,
  .col-divider { display: none !important; }
  /* Show only the name */
  .col-item .col-info { display: inline; }
  .col-item .col-name { font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; }
  .col-all .col-all-name { font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; }
  .col-item { margin-bottom: 0; }
  .col-all { margin-bottom: 0; }
  .new-col-btn { display: none; }
  .col-sidebar-head { display: none; }
  .col-sidebar { max-height: 44px !important; padding: 6px 0; }
  .files-main { flex: 1; min-height: 0; }
  /* Filter bar — search shouldn't have a hard min-width on phone */
  .filter-search { min-width: 0; flex: 1 1 auto; }

  /* ── File cards (.fcard) mobile redesign ──
     Stack vertically: title / metadata / actions. Match the look of the
     saved-reports card pattern — stacked, breathable. */
  .fcard {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }
  .fcard .ficon {
    align-self: flex-start;
    width: auto;
    height: auto;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid rgba(160,120,32,0.28);
    border-radius: 3px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--gold-lt);
    box-shadow: none;
  }
  .fcard .finfo { flex: none; min-width: 0; }
  .fcard .fname {
    font-family: var(--f-display);
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    margin-bottom: 6px;
  }
  .fcard .fmeta {
    font-family: var(--f-mono);
    font-size: 10px;
    line-height: 1.5;
    color: var(--smoke4);
    white-space: normal;
    word-break: break-word;
  }
  .fcard .factions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }
  .fcard .fact-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
  }
  /* Defensive: clip any rogue horizontal overflow at the panel level so a
     wide child (long URL, oversized table, image) can't scroll the page. */
  .panel { overflow-x: hidden; }
  .chat-messages, .files-body, .admin-wrap, .resp-wrap { max-width: 100%; }
  .msg-bubble { max-width: 100%; }
  .msg-bubble img { max-width: 100%; height: auto; }
  .msg-bubble table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ── iPad portrait (768–1024) ──────────────────────────────────
   Standard desktop layout works at this size, but the 240px sidebar
   takes proportionally too much width. Tighten it and trim padding
   so the chat / documents panel has more room.
*/
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --sidebar: 240px; }
  #topbar { padding: 0 16px 0 12px; gap: 10px; }
  .chat-messages { padding: 24px 22px; }
  .chat-bar { padding: 12px 22px; padding-bottom: 12px; }
  .files-top { padding: 14px 18px; }
  .files-body { padding: 14px 18px; }
  .admin-wrap { padding: 22px 24px; }
  /* Watchtower header — let buttons wrap rather than overflow */
  .wt-title-row { flex-wrap: wrap; gap: 12px; }
  .wt-actions { flex-wrap: wrap; gap: 6px; }
  /* Documents panel: let upload buttons wrap rather than overflow */
  .upload-area { flex-wrap: wrap; gap: 8px; }
  .upload-btn { padding: 7px 12px; font-size: 9px; }
  /* Modal max-width safety */
  .modal-box { max-width: min(720px, 92vw); }
  .upload-modal { max-width: min(560px, 92vw); }
  .report-viewer-sheet { max-width: min(820px, 94vw); }
  /* Analytics stat grid — 2 columns at this width keeps cards readable */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Defensive: clip rogue horizontal overflow at the panel level */
  .panel { overflow-x: hidden; }
  .chat-messages, .files-body, .admin-wrap, .resp-wrap { max-width: 100%; }
  .msg-bubble { max-width: 100%; }
  .msg-bubble img { max-width: 100%; height: auto; }
  .msg-bubble table { display: block; overflow-x: auto; max-width: 100%; }
  /* Frontend #17 (3rd-party audit): .col-sidebar (main-4-openings-collections-2.css,
     width:220px; flex-shrink:0) had no responsive handling in this tablet range --
     confirmed the phone range below already stacks it to a full-width horizontal pill
     row, but this range had zero .col-sidebar rules, leaving it at its full desktop
     width while still in a side-by-side row layout. Narrowed rather than stacked,
     since a tablet has enough room to keep the side-by-side layout functional. */
  .col-sidebar { width: 160px; }
}

/* ── iPad landscape / small laptop (1024–1279) ─────────────────
   Slight padding tightening; full sidebar.
*/
@media (min-width: 1025px) and (max-width: 1279px) {
  :root { --sidebar: 240px; }
  .chat-messages { padding: 26px 28px; }
  .admin-wrap { padding: 26px 32px; }
}

/* ── Phone polish (<= 767) ──────────────────────────────────────
   Existing rules stack the layout. These tighten chat density,
   modal sizing, and the empty-state hints so they fit a phone
   viewport without horizontal scrolling.
*/
@media (max-width: 767px) {
  /* Topbar — hide module label to free space, keep KAIT brand visible */
  #topbar { padding: 0 12px; gap: 8px; }
  .tb-module { display: none; }
  .tb-logo { display: block !important; font-size: 16px; letter-spacing: 0.22em; }
  /* Status chip compact */
  .tb-status { padding: 4px 8px; }
  .tb-status-text { font-size: 8px; }
  /* Chat density */
  .chat-messages { padding: 16px 14px; }
  .chat-bar { padding: 10px 12px; padding-bottom: 12px; }
  /* Empty-state hints stack vertically and full-width */
  .ce-hints { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .ce-hints .hint { width: 100%; text-align: center; }
  /* Files / Documents panel */
  .files-top { padding: 8px 12px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
  .upload-area { flex-shrink: 0; gap: 4px; }
  .upload-btn { font-size: 9px !important; padding: 5px 10px !important; letter-spacing: 0.06em !important; }
  .files-tab-bar { flex-shrink: 0; }
  .files-tab-bar { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; gap: 6px; scrollbar-width: none; white-space: nowrap; }
  .files-tab-bar::-webkit-scrollbar { display: none; }
  .ftab, .files-tab, .files-tab-btn { flex-shrink: 0; white-space: nowrap; font-size: 10px !important; padding: 5px 10px !important; }
  .files-scope-bar, .scope-bar { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; gap: 6px; scrollbar-width: none; }
  .files-scope-bar::-webkit-scrollbar { display: none; }
  #scope-all, .scope-btn { flex-shrink: 0; white-space: nowrap; font-size: 10px; padding: 4px 10px; }
  .files-body { padding: 12px 14px; }
  /* Watchtower */
  .wt-title-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .wt-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  /* Saved Responses */
  .resp-wrap { padding: 14px; }
  /* Admin / AI Settings */
  .admin-wrap { padding: 14px; }
  /* Modals — fit phone viewport */
  .modal-bg { padding: 12px; }
  .modal-box, .modal-sheet { width: 100%; max-width: 100%; max-height: 88vh; }
  .upload-modal { max-width: 100%; }
  .upload-modal-bg { padding: 12px; }
  /* Scenario panel sizing */
  .scenario-panel-inner { padding: 14px; }
  .sp-form { gap: 12px; }
  .sp-field-row { flex-direction: column; gap: 12px; }
  /* Topbar user chip more compact */
  #tb-user-chip { padding: 4px 8px !important; }
  /* Theme toggle smaller */
  #theme-toggle { width: 28px !important; height: 28px !important; }
  #theme-toggle svg { width: 12px !important; height: 12px !important; }
}

/* ── Very small phones (≤375, iPhone SE-class) ─────────────── */
@media (max-width: 375px) {
  .tb-logo { font-size: 13px !important; letter-spacing: 0.14em !important; min-width: 52px !important; overflow: visible !important; }
  .chat-messages { padding: 14px 10px; }
  .chat-bar { padding: 8px 10px; padding-bottom: 10px; }
  .ce-hints { max-width: 100%; }
  /* Analytics stat grid — drop to 2 columns on phone so cards stay legible */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Cross Check confirmation sheet sizing ────────────────────
   Larger than default modal-sheet on desktop, but full-width and
   capped on phone via the existing mobile rule's behavior. */
.report-confirm-sheet { max-width: 560px; }
.report-viewer-sheet  {
  max-width: 840px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .report-confirm-sheet,
  .report-viewer-sheet {
    max-width: 100%;
    width: 100%;
  }
  .report-viewer-sheet { max-height: 92vh; }
  /* Stack the viewer header vertically on phone so title + buttons fit */
  .report-viewer-sheet > div:first-of-type + div {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .report-viewer-sheet > div:first-of-type + div > div {
    justify-content: flex-end;
  }
}