/* =========================================================
   ZAR AI v2 — COMPACT LAYOUT (STATE B)
   Sizing/positioning only — visual chrome lives in
   components/shell.css, components/chat.css, etc.
========================================================= */

.zar-v2-compact {
  position: fixed;

  /* 2026-09-06 regression fix: this used to reserve the orb's own
     56px height in the bottom offset (56px + space-6 + space-4 =
     96px), as if the panel needed to clear a still-visible orb.
     But openCompact() hides the orb the instant the panel opens
     (zar-v2-ui.js) — so that reservation was 96px of dead space
     below the panel, which on shorter viewports also pushed the
     panel's top edge uncomfortably close to the page header. The
     panel should dock directly above the orb's own resting corner
     with one small, consistent gap — right and bottom now share the
     SAME inset (the orb's own space-6 inset plus the identical
     12px/space-3 gap the dragged-orb quadrant heuristic below
     already uses) so the docked panel reads as one deliberate unit
     rather than two unrelated offsets. */
  --zar-v2-compact-dock-gap: calc(var(--zar-v2-space-6) + var(--zar-v2-space-3));
  right: var(--zar-v2-compact-dock-gap);
  bottom: var(--zar-v2-compact-dock-gap);
  z-index: var(--zar-v2-z-panel);

  width: min(392px, calc(100vw - 2 * var(--zar-v2-space-4)));
  height: min(600px, calc(100vh - 120px));

  border-radius: var(--zar-v2-radius-xl);

  /* 2026-09-05 interaction-hardening pass: the compact panel is now
     draggable (desktop only — see zar-v2-compact-drag.js), layered on
     top of the same `right`/`bottom` anchor via translate, exactly
     like the orb's own drag composition in components/orb.css. The
     open/close keyframes below reference these same vars (rather
     than a bare translateY) so a previously-dragged position is
     never overridden or ignored for the animation's duration. */
  --zar-v2-compact-drag-x: 0px;
  --zar-v2-compact-drag-y: 0px;

  /* The actual resting transform — without this, the drag offset
     only ever existed inside the zar-v2-compact-in keyframes below,
     and since a CSS animation's effect reverts once it finishes
     (default animation-fill-mode: none), the panel would snap back
     to transform:none the instant the one-time open animation
     completed, discarding any dragged position live-confirmed via
     getComputedStyle(...).transform reading "none" after a drag. */
  transform: translate(var(--zar-v2-compact-drag-x), var(--zar-v2-compact-drag-y));
  transform-origin: bottom right;
  animation: zar-v2-compact-in var(--zar-v2-duration-base) var(--zar-v2-ease-emphasized);
}

/* COMMENT BLOCK
   PATCH: Compact desktop chat-history drawer
   NAME: ZAR AI v2
   DATE: 2026-09-06
   TIME: 13:21
   WHY: Provide transient history access inside compact desktop without changing fullscreen or mobile navigation. */
.zar-v2-compact__history-trigger { cursor:pointer; border-radius:var(--zar-v2-radius-sm); }
.zar-v2-compact__history-trigger:hover,
.zar-v2-compact__history-trigger[aria-expanded="true"] { background:var(--zar-v2-accent-softer); }
.zar-v2-compact-history {
  position:absolute; inset:57px auto 77px 0; z-index:4; width:min(280px, 78%);
  display:flex; flex-direction:column; min-width:0;
  border-right:1px solid var(--zar-v2-border-strong);
  background:var(--zar-v2-bg-surface-sunken); box-shadow:var(--zar-v2-shadow-3);
}
.zar-v2-compact-history[hidden] { display:none; }
.zar-v2-compact-history__scroll { min-height:0; overflow-y:auto; padding:var(--zar-v2-space-2) var(--zar-v2-space-3); }

/* COMMENT BLOCK
   PATCH: Phase 1F.1 compact history scrollbar polish
   NAME: ZAR AI v2
   DATE: 2026-09-06
   TIME: 14:31
   WHY: Preserve accessible scrolling while fading the compact desktop
   drawer's native chrome until pointer or keyboard interaction. */
@media (min-width:561px) {
  .zar-v2-compact-history__scroll {
    scrollbar-width:thin;
    scrollbar-color:var(--zar-v2-compact-history-scrollbar-idle) transparent;
  }
  .zar-v2-compact-history__scroll:hover,
  .zar-v2-compact-history__scroll:focus,
  .zar-v2-compact-history__scroll:focus-within {
    scrollbar-color:var(--zar-v2-compact-history-scrollbar-active) transparent;
  }
  .zar-v2-compact-history__scroll::-webkit-scrollbar { width:6px; height:6px; }
  .zar-v2-compact-history__scroll::-webkit-scrollbar-track,
  .zar-v2-compact-history__scroll::-webkit-scrollbar-corner { background:transparent; }
  .zar-v2-compact-history__scroll::-webkit-scrollbar-thumb {
    background:var(--zar-v2-compact-history-scrollbar-idle);
    border-radius:var(--zar-v2-radius-pill);
  }
  .zar-v2-compact-history__scroll:hover::-webkit-scrollbar-thumb,
  .zar-v2-compact-history__scroll:focus::-webkit-scrollbar-thumb,
  .zar-v2-compact-history__scroll:focus-within::-webkit-scrollbar-thumb {
    background:var(--zar-v2-compact-history-scrollbar-active);
  }
  .zar-v2-compact-history__scroll::-webkit-scrollbar-button {
    display:none;
    width:0;
    height:0;
  }
}

@media (max-width:560px) {
  .zar-v2-compact__history-trigger { pointer-events:none; }
  .zar-v2-compact-history { display:none; }
}

/* No transform transition while a drag is actively in progress — see
   orb.css's identical rule for the same reason (position must track
   the pointer 1:1, not ease toward it). */
.zar-v2-compact.is-dragging {
  transition: none;
  animation: none;
}

@keyframes zar-v2-compact-in {
  from {
    opacity: 0;
    transform: translate(var(--zar-v2-compact-drag-x), calc(var(--zar-v2-compact-drag-y) + 12px)) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(var(--zar-v2-compact-drag-x), var(--zar-v2-compact-drag-y)) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .zar-v2-compact { animation: none; }
}

/* ---------------------------------------------------------
   DRAG PERIMETER (2026-09-05)

   Generated at runtime by the shared zar_draggable_panel.js helper
   (usePerimeter: true) — no markup added here, only the styling for
   what it creates. Deliberately invisible: the panel's own visual
   design is unchanged, per the task's own "do not put obvious dotted
   handles around the UI" instruction — cursor feedback is the only
   affordance. 8px keeps the band safely inside the header/footer's
   own 12px padding (components/shell.css), clear of real button
   hitboxes, with the explicit ignoreFrom list in
   zar-v2-compact-drag.js as the actual (not just geometric) guarantee
   those controls are never treated as drag surface.
--------------------------------------------------------- */
.zar-v2-compact-drag-perimeter {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.zar-v2-compact-drag-perimeter__edge {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;

  /* 2026-09-06 regression fix: index.php defines the site-wide custom
     hand cursor as plain :root custom properties (--zar-cursor-grab/
     -grabbing), consumed there by several OTHER draggable components'
     own class names. Rather than adding zar-v2-* selectors to
     index.php's global list (which zar_v2_production_integration.
     test.js explicitly pins to exactly one line — the shell include —
     for this package), this panel consumes the same :root tokens
     directly here. A plain `grab`/`grabbing` fallback keeps this safe
     even if index.php's block were ever absent. */
  cursor: var(--zar-cursor-grab, grab);
}

.zar-v2-compact-drag-perimeter__edge--top {
  top: 0; left: 0; right: 0;
  height: 8px;
}
.zar-v2-compact-drag-perimeter__edge--bottom {
  left: 0; right: 0; bottom: 0;
  height: 8px;
}
.zar-v2-compact-drag-perimeter__edge--left {
  top: 0; bottom: 0; left: 0;
  width: 8px;
}
.zar-v2-compact-drag-perimeter__edge--right {
  top: 0; bottom: 0; right: 0;
  width: 8px;
}

.zar-v2-compact.is-dragging .zar-v2-compact-drag-perimeter__edge {
  cursor: var(--zar-cursor-grabbing, grabbing);
}

/* Compact-panel dragging is desktop-only (see
   zar-v2-compact-drag.js's own DESKTOP_QUERY) — the perimeter is
   still generated in the DOM at any width (the shared helper doesn't
   conditionally render it), so it must not eat pointer events on the
   mobile sheet where dragging never initializes. */
@media (max-width: 560px) {
  .zar-v2-compact-drag-perimeter {
    display: none;
  }
}

/* Mobile: the "large mobile assistant sheet" — near full-width,
   anchored to the bottom safe area above the still-visible orb. */
@media (max-width: 560px) {
  .zar-v2-compact {
    right: var(--zar-v2-space-3);
    left: var(--zar-v2-space-3);
    bottom: calc(52px + var(--zar-v2-space-4) + var(--zar-v2-space-3));
    width: auto;
    height: min(74vh, 640px);
  }
}