/* ═══════════════════════════════════════════════════════════
   AGENT DECK — top-left stacked toggle deck
   Both agent toggles live inside a single fixed-position deck and
   stack like the file cards on the splash screen.

   Interaction model (driven by index.html's deck controller):
     • Resting: compact stacked tiles. The FRONT tile (data-pos="0")
       is on top; tiles behind are hidden (opacity 0) at rest and fade
       in only when the deck fans.
     • Hover → deck gets .fanned: tiles fan DOWNWARD into a vertical
       list for selection.
     • Click a BACK tile → controller promotes it to front (swap).
       Does NOT open a panel.
     • Click the FRONT tile → opens that agent's panel.
     • When any agent panel opens → controller adds .deck-collapsed,
       which forces the resting stack even under hover, so the fan
       never overlaps the open panel.

   POSITION-BASED, not agent-based: styling keys off [data-pos="N"]
   (0 = front), so promoting an agent is just a matter of the
   controller re-writing data-pos on the tiles. No per-agent rules.

   NOTE: must load AFTER gap_agent.css and inventory_agent.css so the
   position/transform/z-index overrides win. The tiles' internal look
   (icon, label, colors) is inherited from those files unchanged.
   ═══════════════════════════════════════════════════════════ */

/* ── Deck container ── */
#agentDeck {
  position: fixed;
  /* Top gap from the browser edge to the front tile. Mirrored as the gap
     between fanned tiles so the vertical rhythm is uniform. */
  top: 16px;
  left: 12px;
  z-index: 710;
  /* Resting footprint holds one card; the fanned list overflows downward
     (overflow:visible) and the deck grows to .fanned height on hover. */
  width: 250px;
  height: 56px;
  box-sizing: content-box;
  /* Fanned list overflows downward without clipping. */
  overflow: visible;
}

/* ── Tiles: absolutely-positioned cards inside the deck ──
   Overrides the fixed positioning from the two agent stylesheets.
   transform-origin top-left so scale-down stays pinned to the deck corner.
   Default transform here is overridden per data-pos below. */
#agentDeck > [data-deck-tile] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform-origin: top left;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              opacity .28s ease,
              box-shadow .28s ease,
              filter .28s ease;
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════
   RESTING STACK — styled by stacking position (data-pos)
   pos 0 = front (on top), pos 1 = one behind, pos 2 = two behind…
   Each step back: lower z, smaller scale, more offset, dimmer.
   z-indexes are spaced by 10 so positions stay ordered and a future
   3rd/4th card slots in cleanly.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   RESTING STACK — only the FRONT card (pos 0) is visible.
   Back cards sit at opacity 0 so the deck reads as a single clean
   card at rest (no peeking, no mismatched-width overlap). They fade
   in only when the deck is fanned (hover). pointer-events:none keeps
   the invisible cards from catching clicks while hidden.
   z-indexes stay assigned so the fan order is correct the instant
   they fade in.
   ═══════════════════════════════════════════════════════════ */
#agentDeck > [data-pos="0"] {
  z-index: 30;
  transform: scale(.88);
  opacity: 1;
  filter: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
}
#agentDeck > [data-pos="1"] {
  z-index: 20;
  /* Hidden directly behind the front card (same origin) so fading in reads
     as a clean straight-down drop rather than a diagonal slide. */
  transform: scale(.88);
  opacity: 0;
  pointer-events: none;
}
#agentDeck > [data-pos="2"] {
  z-index: 10;
  transform: scale(.88);
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   FANNED STATE — set by the controller on hover (deck gets .fanned)
   Back cards fade IN and drop into a vertical list so each is fully
   clickable. The FRONT tile (pos 0) stays put and stays ON TOP; each
   tile behind drops one slot further down at full opacity/scale.
   Because z-index from the resting rules is unchanged, lower tiles
   slide out FROM UNDERNEATH the one above — front never loses the
   z-axis. Drop step = front tile height (~40px at .92) + 16px = 56px.
   ═══════════════════════════════════════════════════════════ */
#agentDeck.fanned { height: 124px; }
#agentDeck.fanned > [data-pos="0"] { transform: scale(.92); }
#agentDeck.fanned > [data-pos="1"] {
  transform: translate(0, 56px) scale(.92);
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
#agentDeck.fanned > [data-pos="2"] {
  transform: translate(0, 112px) scale(.92);
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════
   COLLAPSED OVERRIDE — set by the controller while a panel is open.
   The resting rules already hide the back cards (opacity 0); this
   override's job is to DEFEAT the hover-fan, so even if the pointer is
   over the deck while a panel is open, the deck stays collapsed and no
   card fades in to overlap the panel. Wins over .fanned by coming later
   with equal specificity.
   ═══════════════════════════════════════════════════════════ */
#agentDeck.deck-collapsed { height: 56px; }
#agentDeck.deck-collapsed > [data-pos="0"] {
  transform: scale(.88);
}
#agentDeck.deck-collapsed > [data-pos="1"],
#agentDeck.deck-collapsed > [data-pos="2"] {
  transform: scale(.88);
  opacity: 0;
  pointer-events: none;
}

/* Hover affordance. */
#agentDeck:hover { cursor: pointer; }

/* Reduced-motion: snap instead of animating the fan/swap. */
@media (prefers-reduced-motion: reduce) {
  #agentDeck > [data-deck-tile] { transition: none; }
}