/* =========================================================
   ZAR AI v2 — SHELL
   Chrome shared by both the compact panel (STATE B) and the
   full-screen workspace (STATE C): header bar, identity row,
   icon-button group, and the panel surface treatment itself.
   Sizing/positioning that differs between the two states lives
   in layout/compact.css and layout/fullscreen.css. The identity
   logo itself is icon.css's bare .zar-v2-logo — this file only
   lays out the row it sits in.
========================================================= */

.zar-v2-panel {
  display: flex;
  flex-direction: column;

  background:
    linear-gradient(var(--zar-v2-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--zar-v2-grid-line) 1px, transparent 1px),
    var(--zar-v2-bg-surface);
  background-size: 22px 22px, 22px 22px, auto;

  border: 1px solid var(--zar-v2-border-strong);
  box-shadow: var(--zar-v2-shadow-panel);
  overflow: hidden;
}

.zar-v2-panel[hidden] { display: none; }

/* ---- header ------------------------------------------------
   2026-09 UI HARDENING: rebuilt as a 3-column CSS Grid instead of
   one long flex row. Root cause of the original overlap: the
   compact panel is only ~392px wide even at desktop viewport
   widths, and a flex row's default `flex-shrink: 1` let
   .zar-v2-identity get compressed down to just its logo's width —
   its own children (the "ZAR AI" label) then rendered past its own
   shrunk box edge (overflow: visible), landing on top of the model
   pill. Confirmed live via getBoundingClientRect()/computed styles
   before this fix, not patched by eye.

   Grid solves this structurally: an `auto` column sizes to its
   content and is never shrunk below it, so .zar-v2-identity and
   .zar-v2-panel__actions (both `auto` columns) can no longer be
   compressed — only the middle `minmax(0, 1fr)` column (the model
   pill) absorbs/gives up space, and now needs no separate spacer
   element (removed; grid-template-areas below replaces
   .zar-v2-panel__header-spacer entirely).

   grid-template-areas: "identity model actions" is the DEFAULT
   (compact, and full-screen at desktop where the menu button is
   display:none). layout/fullscreen.css adds a 4th "menu" column
   only inside its own <=900px mobile breakpoint, where the sidebar-
   toggle hamburger becomes visible. ---------------------------- */
.zar-v2-panel__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "identity model actions";
  align-items: center;
  gap: var(--zar-v2-space-3);
  flex: 0 0 auto;

  padding: var(--zar-v2-space-3) var(--zar-v2-space-4);
  border-bottom: 1px solid var(--zar-v2-border-subtle);
  background: var(--zar-v2-bg-surface-raised);
}

.zar-v2-identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: var(--zar-v2-space-2);
  min-width: 0;
}

.zar-v2-identity__label {
  font-size: var(--zar-v2-font-size-sm);
  font-weight: var(--zar-v2-font-weight-bold);
  color: var(--zar-v2-text-primary);
  white-space: nowrap;
}

.zar-v2-panel__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--zar-v2-space-1);
}

/* Grid PLACEMENT only (which column the model pill's wrapper
   lives in) — its own visual styling (border/background/padding)
   stays owned by components/model-selector.css. justify-self:
   start keeps the pill left-aligned within its flexible column
   rather than stretching to fill all the extra space. */
.zar-v2-model {
  grid-area: model;
  justify-self: start;
  min-width: 0;
}

.zar-v2-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--zar-v2-radius-sm);
  color: var(--zar-v2-text-secondary);
  border: 1px solid transparent;
  transition: background var(--zar-v2-duration-fast) var(--zar-v2-ease-standard),
              color var(--zar-v2-duration-fast) var(--zar-v2-ease-standard);
}
.zar-v2-icon-btn:hover {
  background: var(--zar-v2-accent-softer);
  color: var(--zar-v2-text-primary);
}
.zar-v2-icon-btn svg { width: 17px; height: 17px; }

/* ---- body / viewport ---------------------------------------- */
  /* ==========================================================================
    PATCH: ZAR AI v2 — Conversation scroll ownership
    NAME: ChatGPT · GPT-5.6 Sol
    DATE.TIME: 2026-09-05
    SHORT EXPLANATION:
    Keep the main ZAR conversation vertically scrollable only. Horizontal
    overflow must be contained by City content or local code/table scrollers.
    ========================================================================== */

  .zar-v2-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

.zar-v2-panel__footer {
  flex: 0 0 auto;
  padding: var(--zar-v2-space-3) var(--zar-v2-space-4) var(--zar-v2-space-3);
  border-top: 1px solid var(--zar-v2-border-subtle);
  background: var(--zar-v2-bg-surface-raised);
}