/* =========================================================
   ZAR AI v2 — CROSS-CUTTING RESPONSIVE RULES
   Breakpoints specific to one component already live beside
   that component (e.g. compact.css, fullscreen.css). This file
   is for adjustments that touch several components at once, or
   that don't belong to any single one.
========================================================= */

/* Prevent horizontal page overflow at any width, regardless of
   which ZAR v2 state is open. Scoped to .zar-v2 only — the host
   page's own overflow behavior is not this mockup's concern. */
.zar-v2 {
  overflow-x: hidden;
}

@media (max-width: 560px) {
  /* Panel header identity: keep the model pill and action icons
     from crowding on very small screens. .zar-v2-identity no longer
     needs explicit shrink-protection here (2026-09 UI hardening
     turned the header into a 3-column CSS Grid — see
     components/shell.css — whose `auto` columns are never shrunk
     below their content at ANY width, not just below this
     breakpoint); this block is now purely about decluttering, not
     correctness.

     The model pill's own trailing "Mistral-7B" text
     was a bare, unwrapped text node .zar-v2-model__provider's own
     `display: none` never reached — only half the label actually
     hid. The model pill swaps its whole
     text label for a single icon glyph — see model-selector.php's
     own comment and components/model-selector.css's .zar-v2-model__icon
     for why the accessible name is unaffected. */
  .zar-v2-panel__header { gap: var(--zar-v2-space-2); padding: var(--zar-v2-space-3); }
  .zar-v2-model__trigger { padding: var(--zar-v2-space-1) var(--zar-v2-space-2); gap: var(--zar-v2-space-1); }
  .zar-v2-model__label { display: none; }
  .zar-v2-model__icon { display: inline-flex; }

  .zar-v2-icon-btn { width: 29px; height: 29px; }
  .zar-v2-panel__actions { gap: 0; }

  .zar-v2-conversation { padding: var(--zar-v2-space-4) var(--zar-v2-space-3); gap: var(--zar-v2-space-4); }
  .zar-v2-msg, .zar-v2-knowledge-card { max-width: 96%; }

  .zar-v2-panel__footer { padding: var(--zar-v2-space-2) var(--zar-v2-space-3) var(--zar-v2-space-3); }

}

@media (max-width: 360px) {
  .zar-v2-identity__label { display: none; }
}
/* Model menu positioning for small screens */
@media (max-width: 560px) {
  .zar-v2-model__menu {
    left: 50%;
    right: auto;
    width: min(258px, calc(100vw - 32px));
    min-width: 0;
    transform: translateX(-50%);
  }
}