/* agent-zero.css — Agent Zero drawer, matches console design tokens */

/* ── Neural Ops page layout ────────────────────────────────────────────────
   The drawer must NOT float over the 3D scene: an absolutely-positioned child
   never changes its parent's clientWidth, so neural-ops.js's resize handler
   would recompute the same numbers forever and the scene would stay full width
   underneath the drawer (and under the right-anchored HUD panels).

   Instead #page-neuralops is a flex row with two in-flow items:
     #neuralops-host  flex: 1 1 0  (3D canvas + every HUD panel, so the panels
                                    stay anchored to the *narrowed* host)
     #az-drawer       width 0 → 280px
   Animating the drawer's WIDTH is what genuinely reclaims/returns space, so
   #neuralops-host.clientWidth really differs between the two states and the
   existing resize recalculation does the right thing.
   #az-tab is absolutely positioned against the row, outside both items, so the
   width animation can never clip it.
────────────────────────────────────────────────────────────────────────── */
#page-neuralops { position: relative; }
#page-neuralops.active {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}
#page-neuralops > #neuralops-host { flex: 1 1 0; min-width: 0; }

#az-drawer {
  flex: 0 0 auto;
  width: 0;
  min-width: 0;          /* without this the flex item's min-content size keeps it open */
  overflow: hidden;      /* clips .az-panel while collapsed / mid-animation */
  display: flex;
  transition: width .25s ease;
}
#az-drawer.open { width: 280px; }

/* Fixed width so the drawer's contents keep their layout while the drawer's
   own width animates — otherwise every child reflows down to 0px and back. */
.az-panel {
  flex: 0 0 280px;
  display: flex; flex-direction: column;
  background: rgba(4, 8, 16, .97);
  border-left: 1px solid rgba(0, 180, 255, .25);
  font-family: 'Space Mono', monospace;
}

#az-tab {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  background: rgba(4, 8, 16, .9); border: 1px solid #00b4ff; border-right: none;
  border-radius: 6px 0 0 6px; padding: 14px 8px;
  writing-mode: vertical-rl; font-size: 10px; letter-spacing: 2px; color: #00b4ff;
  cursor: pointer; z-index: 6;
}
#az-drawer.open ~ #az-tab { display: none; }

.az-header {
  padding: 8px 10px; border-bottom: 1px solid rgba(0, 180, 255, .15);
  display: flex; justify-content: space-between; align-items: center;
}
.az-header-label { font-size: 10px; color: #00b4ff; letter-spacing: 1px; }
.az-header-actions { display: flex; align-items: center; gap: 8px; }
.az-collapse-btn { font-size: 12px; color: rgba(160, 200, 240, .5); cursor: pointer; background: none; border: none; }

/* Shared small icon-button style for the speaker (auto-speak) toggle and
   the mic (speech-to-text) button. */
.az-icon-btn {
  background: none; border: 1px solid rgba(0, 180, 255, .3); border-radius: 6px;
  color: rgba(160, 200, 240, .6); font-size: 13px; line-height: 1; cursor: pointer;
  padding: 4px 6px;
}
.az-icon-btn:hover { border-color: rgba(0, 180, 255, .6); }
/* Speaker toggle when auto-speak is on */
.az-icon-btn.active { border-color: #00b4ff; color: #00b4ff; box-shadow: 0 0 6px rgba(0, 180, 255, .3); }
/* Mic button while actively listening */
.az-icon-btn.listening { border-color: #ff2d55; color: #ff2d55; animation: az-mic-pulse 1.2s ease-in-out infinite; }
@keyframes az-mic-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 45, 85, .3); }
  50%      { box-shadow: 0 0 10px rgba(255, 45, 85, .7); }
}
.az-icon-btn[disabled] { opacity: .3; cursor: not-allowed; }

.az-ring-wrap { display: flex; justify-content: center; padding: 10px; }
.az-status-line { text-align: center; font-size: 10px; letter-spacing: 2px; margin-top: 4px; }
.az-sub-status { text-align: center; font-size: 9px; color: rgba(160, 200, 240, .5); }

.az-model-pills { display: flex; gap: 6px; justify-content: center; padding: 8px; }
.az-model-pill {
  background: rgba(4, 8, 16, .85); border: 1px solid rgba(0, 180, 255, .3);
  color: rgba(160, 200, 240, .6); font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 1px; padding: 5px 8px; border-radius: 4px; cursor: pointer;
}
.az-model-pill.active { border-color: #00b4ff; color: #00b4ff; box-shadow: 0 0 8px rgba(0, 180, 255, .3); }

.az-voice-row { padding: 0 8px 8px; }
.az-voice-select {
  width: 100%; background: rgba(4, 8, 16, .85); border: 1px solid rgba(0, 180, 255, .3);
  color: rgba(160, 200, 240, .8); font-family: 'Space Mono', monospace; font-size: 9px;
  letter-spacing: .5px; padding: 5px 6px; border-radius: 4px; outline: none;
}
.az-voice-select:hover { border-color: rgba(0, 180, 255, .6); }
.az-voice-select:disabled { opacity: .4; }

#az-transcript {
  flex: 1; overflow-y: auto; padding: 8px 10px; font-size: 10px; color: #c8dcf0; line-height: 1.6;
}
.az-line-you { color: rgba(160, 200, 240, .5); margin-bottom: 6px; }
.az-line-agent { color: #00b4ff; margin-bottom: 6px; }

.az-input-row {
  padding: 8px; border-top: 1px solid rgba(0, 180, 255, .15);
  display: flex; align-items: center; gap: 6px;
}
#az-input {
  flex: 1; min-width: 0; background: rgba(0, 180, 255, .06); border: 1px solid rgba(0, 180, 255, .3);
  border-radius: 14px; padding: 6px 10px; color: #c8dcf0; font-family: 'Space Mono', monospace;
  font-size: 10px; outline: none; box-sizing: border-box;
}
#az-input:disabled { opacity: .5; }

.az-globe-wrap { display: flex; justify-content: center; padding: 6px 0 10px; }

/* Spinning ring-sphere (replaces the old canvas globe) — a set of identical
   circles, each independently spun on X/Y at its own speed with a fixed Z
   offset (--rz, set per-ring in JS), which reads as a tumbling wireframe
   sphere. Recolored from the reference doc's green to the console's cyan. */
.ringu-container {
  position: relative;
  width: 70px; height: 70px;
  perspective: 300px;
}
.ringu {
  position: absolute; top: 0; left: 0;
  width: 70px; height: 70px;
  border: 1.5px solid rgba(0, 180, 255, .55);
  border-radius: 50%;
  animation-name: ringu-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ringu-spin {
  from { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(var(--rz, 0deg)); }
  to   { transform: rotateX(360deg) rotateY(360deg) rotateZ(var(--rz, 0deg)); }
}