/* ============================================================================
   AERIE Agent Visualizer — host styles (ported from the Design handoff shell)
   ----------------------------------------------------------------------------
   Scoped under .aerie-floor so it embeds as a dashboard panel without leaking
   the prototype's full-viewport html/body resets. Two variants:
     .aerie-floor                 → panel (sized container, the dashboard hero)
     .aerie-floor--fullscreen     → fixed full-viewport (the public /floor OBS view)
   Class/id names + @keyframes (avz- prefixed) match what the engine emits.
   ========================================================================== */

.aerie-floor {
  --scene-filter: saturate(0.92) brightness(0.99);
  position: relative;
  width: 100%;
  /* Fit the hero to the viewport: header + subnav + page hero ≈ 250px of
     chrome above the floor, so the floor fills what's left (clamped) and the
     runs/lens panels live just below the fold instead of overflowing it. */
  height: clamp(380px, calc(100vh - 250px), 860px);
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--color-border-subtle);
  background: radial-gradient(120% 90% at 50% 0%, #131210 0%, #0a0a0b 60%, #08080a 100%);
  color: var(--color-fg-primary);
  -webkit-font-smoothing: antialiased;
}
.aerie-floor--fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;        /* fallback for browsers without dvh */
  height: 100dvh;       /* dynamic viewport: excludes the mobile browser chrome so
                           the bottom HUD (legend + agent list) sits ABOVE the URL
                           bar instead of behind it on a non-scrolling page */
  /* notch + home-indicator insets (0 on desktop/OBS; needs viewport-fit=cover) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  border: none;
  border-radius: 0;
  /* sit above the app nav/subnav so the public/OBS view reads as a clean full page */
  z-index: 9999;
}

/* ---------- stage ---------- */
.aerie-floor #stage { position: absolute; top: 66px; bottom: 126px; left: 0; right: 0; }
.aerie-floor--fullscreen #stage { top: calc(66px + var(--safe-top)); bottom: calc(126px + var(--safe-bot)); }
.aerie-floor #scene { width: 100%; height: 100%; display: block; }
.aerie-floor .scene-tint { filter: var(--scene-filter); }
.aerie-floor #vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 180px 40px rgba(0,0,0,0.55); }

/* ---------- top HUD ---------- */
.aerie-floor .hud-top {
  position: absolute; top: 0; left: 0; right: 0; height: 66px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; padding: 0 26px;
  background: rgba(12,12,13,0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border-subtle);
}
/* Push the header content below the status bar / notch; keep it 66px tall under the inset. */
.aerie-floor--fullscreen .hud-top {
  height: calc(66px + var(--safe-top)); padding-top: var(--safe-top); box-sizing: border-box;
}
.aerie-floor .brand { display: flex; align-items: center; gap: 13px; }
.aerie-floor .brand img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #2c2a26; }
.aerie-floor .brand-txt { display: flex; flex-direction: column; gap: 2px; }
.aerie-floor .brand-name { font-family: var(--font-display); font-size: 25px; letter-spacing: 0.05em; color: #f1efe9; line-height: 1; }
.aerie-floor .brand-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #6f6c64; }
.aerie-floor .stats { display: flex; gap: 22px; align-items: center; }
.aerie-floor .stat { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: #8a877f; letter-spacing: 0.04em; }
.aerie-floor .stat .d { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.aerie-floor .stat b { font-size: 17px; color: #e9e6df; font-weight: 600; }
.aerie-floor .stat .lab { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.12em; }

/* ---------- bottom legend ---------- */
.aerie-floor .hud-bot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 11px 22px 13px;
  background: rgba(12,12,13,0.82); backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border-subtle);
  display: flex; flex-direction: column; gap: 10px;
}
.aerie-floor--fullscreen .hud-bot { padding-bottom: calc(13px + var(--safe-bot)); }
.aerie-floor .key { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.aerie-floor .key-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #57544e; margin-right: 2px; }
.aerie-floor .key-item { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: #9a978f; }
.aerie-floor .key-item .d { width: 9px; height: 9px; border-radius: 50%; }
/* Cap the agent chip list so the band height stays bounded no matter how many
   agents exist — it scrolls instead of wrapping up over the floor. */
.aerie-floor #legend-agents {
  display: flex; gap: 7px; flex-wrap: wrap; align-content: flex-start;
  min-height: 34px; max-height: 72px; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px;
}
.aerie-floor #legend-agents::-webkit-scrollbar { width: 8px; }
.aerie-floor #legend-agents::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.aerie-floor #legend-agents::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.aerie-floor #legend-agents::-webkit-scrollbar-track { background: transparent; }

/* Collapse/expand the agent pane to give the floor the whole panel. */
.aerie-floor .legend-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--color-border-subtle);
  color: #b9b4a8; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 7px; cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.aerie-floor .legend-toggle:hover { background: rgba(255,255,255,0.09); color: #e9e6df; }
.aerie-floor .legend-toggle .chev { transition: transform var(--duration-base) var(--ease-out); font-size: 10px; }
.aerie-floor--legend-collapsed .legend-toggle .chev { transform: rotate(-90deg); }
.aerie-floor--legend-collapsed #legend-agents { display: none; }
.aerie-floor--legend-collapsed #stage { bottom: 46px; }
.aerie-floor--fullscreen.aerie-floor--legend-collapsed #stage { bottom: calc(46px + var(--safe-bot)); }
.aerie-floor .lg-chip { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-border-subtle); border-radius: 999px; padding: 5px 11px 5px 6px;
  cursor: pointer; color: #cfcabd; transition: background var(--duration-base) var(--ease-out); }
.aerie-floor .lg-chip:hover { background: rgba(255,255,255,0.07); border-color: var(--color-border-strong); }
.aerie-floor .lg-swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.4); }
.aerie-floor .lg-dot { width: 8px; height: 8px; border-radius: 50%; transition: background var(--duration-base); }
.aerie-floor .lg-name { font-size: 12px; width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aerie-floor .lg-state { font-size: 11px; width: 124px; white-space: nowrap; overflow: hidden; text-align: left; }

/* ---------- tooltip ---------- */
.aerie-floor #viz-tip {
  position: fixed; z-index: 40; display: none; min-width: 238px; max-width: 308px;
  background: rgba(18,18,20,0.97); border: 1px solid #3a372f; border-radius: 11px;
  box-shadow: var(--shadow-float); padding: 12px 14px 13px; pointer-events: none;
}
.aerie-floor .tip-head { display: flex; align-items: center; gap: 8px; }
.aerie-floor .tip-dot { width: 9px; height: 9px; border-radius: 50%; }
.aerie-floor .tip-name { font-size: 14.5px; font-weight: 700; color: #f3f1ec; }
.aerie-floor .tip-role { margin-left: auto; font-size: 10.5px; color: #73706a; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.aerie-floor .tip-series { font-family: var(--font-mono); font-size: 11px; color: #8a877f; margin-top: 4px; }
.aerie-floor .tip-act { font-size: 13px; color: #d7d3ca; margin-top: 9px; display: flex; gap: 6px; align-items: center; }
.aerie-floor .tip-act span { font-size: 9px; }
.aerie-floor .tip-blurb { font-size: 12px; color: #837f77; margin-top: 6px; line-height: 1.42; }
.aerie-floor .tip-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-subtle); font-size: 11.5px; }
.aerie-floor .tip-grid span { color: #6f6c64; font-family: var(--font-mono); }
.aerie-floor .tip-grid b { color: #cfcabd; font-weight: 500; text-align: right; }
.aerie-floor .mono { font-family: var(--font-mono); }

/* ---------- hint + zoom controls ---------- */
.aerie-floor #hint { position: absolute; bottom: 138px; left: 50%; transform: translateX(-50%); z-index: 18;
  font-family: var(--font-mono); font-size: 11.5px; color: #57544e; letter-spacing: 0.06em;
  background: rgba(12,12,13,0.7); padding: 5px 12px; border-radius: 999px; border: 1px solid #1f1d19;
  pointer-events: none; transition: opacity 0.6s; }
.aerie-floor .zoom-ctrl { position: absolute; right: 18px; bottom: 140px; z-index: 19; display: flex; flex-direction: column; gap: 6px; }
/* Keep the hint + zoom controls above the safe-area-expanded legend on mobile. */
.aerie-floor--fullscreen #hint { bottom: calc(138px + var(--safe-bot)); }
.aerie-floor--fullscreen .zoom-ctrl { bottom: calc(140px + var(--safe-bot)); }

/* ---------- mobile (phone-width) tuning for the fullscreen floor ----------
   Scoped to .aerie-floor--fullscreen + a width gate, so ONLY the public/OBS
   floor on small screens is affected — the in-app windowed visualizer, desktop,
   and every other page are untouched. Declutters a header that otherwise wraps
   (the wide subtitle overflowed the fixed header and clipped the wordmark) and
   lifts the zoom controls clear of the taller, chip-stacked mobile legend. */
@media (max-width: 600px) {
  .aerie-floor--fullscreen .hud-top { padding-left: 14px; padding-right: 14px; }
  .aerie-floor--fullscreen .brand { gap: 9px; }
  .aerie-floor--fullscreen .brand img { width: 28px; height: 28px; }
  .aerie-floor--fullscreen .brand-name { font-size: 18px; }
  .aerie-floor--fullscreen .brand-sub { display: none; }          /* wide subtitle → drop on phones */
  .aerie-floor--fullscreen .stats { gap: 14px; flex-wrap: nowrap; }
  .aerie-floor--fullscreen .stat { gap: 5px; }
  .aerie-floor--fullscreen .stat .lab { display: none; }          /* dot + number only; legend explains colors */
  .aerie-floor--fullscreen .stat b { font-size: 15px; }
  /* Move zoom controls to the top-right of the stage, clear of the variable-
     height legend (which stacks agent chips on a phone). */
  .aerie-floor--fullscreen .zoom-ctrl {
    top: calc(66px + var(--safe-top) + 12px); bottom: auto; right: 12px;
  }
  .aerie-floor--fullscreen #hint { display: none; }               /* drag/hover hint is desktop-only */
}
.aerie-floor .zoom-ctrl button { width: 36px; height: 36px; border-radius: 9px; background: rgba(18,18,20,0.92);
  border: 1px solid var(--color-border-subtle); color: #cfcabd; font-family: var(--font-mono); font-size: 17px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--duration-base) var(--ease-out); }
.aerie-floor .zoom-ctrl button:hover { background: rgba(255,255,255,0.09); border-color: var(--color-border-strong); }
.aerie-floor .zoom-ctrl button:active { background: rgba(47,156,149,0.18); }

/* ---------- sprite / scene animations ---------- */
.aerie-floor .srv-led { animation: avz-led 1.9s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes avz-led { 0%, 58% { opacity: 1; } 59%, 100% { opacity: 0.22; } }
.aerie-floor .fx-steam { animation: avz-steam 2.7s ease-in-out infinite; }
@keyframes avz-steam { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.6; } }
.aerie-floor .ind-run { animation: avz-spin 2.6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes avz-spin { to { transform: rotate(360deg); } }
.aerie-floor .ind-flag { animation: avz-wave 1.7s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom left; }
@keyframes avz-wave { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }
.aerie-floor .ind-pop { animation: avz-pop 0.42s var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
@keyframes avz-pop { 0% { transform: scale(0.3); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
.aerie-floor .ind-fail { animation: avz-shk 0.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes avz-shk { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.4px); } 75% { transform: translateX(1.4px); } }
.aerie-floor .ind-idle { animation: avz-fade 2.6s ease-in-out infinite; }
@keyframes avz-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.aerie-floor .act-whack .gear-hammer { transform-box: fill-box; transform-origin: 50% 90%; animation: avz-whack 0.62s ease-in-out infinite; }
@keyframes avz-whack { 0% { transform: rotate(-2deg); } 26% { transform: rotate(-40deg); } 52% { transform: rotate(14deg); } 100% { transform: rotate(-2deg); } }
.aerie-floor .act-lift .gear-dumbbell { transform-box: fill-box; transform-origin: 50% 140%; animation: avz-curl 1.05s ease-in-out infinite; }
@keyframes avz-curl { 0%, 100% { transform: translateY(2px) rotate(2deg); } 50% { transform: translateY(-7px) rotate(-12deg); } }
.aerie-floor .blend-jar { transform-box: fill-box; transform-origin: 50% 100%; animation: avz-blendwobble 0.18s ease-in-out infinite; }
@keyframes avz-blendwobble { 0%, 100% { transform: translateX(-0.5px); } 50% { transform: translateX(0.5px); } }

/* Forge hearth — fire mouth flickers, the worked billet pulses hot */
.aerie-floor .forge-fire  { transform-box: fill-box; transform-origin: 50% 100%; animation: avz-fireflick 0.45s ease-in-out infinite alternate; }
.aerie-floor .forge-fire2 { transform-box: fill-box; transform-origin: 50% 100%; animation: avz-fireflick 0.32s ease-in-out infinite alternate; }
@keyframes avz-fireflick { 0% { opacity: 0.78; transform: scaleY(0.9); } 100% { opacity: 1; transform: scaleY(1.06); } }
.aerie-floor .forge-billet { animation: avz-billet 1.5s ease-in-out infinite; }
@keyframes avz-billet { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .aerie-floor .srv-led, .aerie-floor .ind-run, .aerie-floor .ind-flag, .aerie-floor .ind-fail,
  .aerie-floor .ind-idle, .aerie-floor .fx-steam, .aerie-floor .act-whack .gear-hammer,
  .aerie-floor .act-lift .gear-dumbbell, .aerie-floor .blend-jar,
  .aerie-floor .forge-fire, .aerie-floor .forge-fire2, .aerie-floor .forge-billet { animation: none; }
}