/*
  JARVIS activity-reactive chrome.
  Keeps the command center quiet at idle and raises outlines/glow only when
  there is a real interaction or local processing signal.
*/

:root {
  --chrome-idle-border: rgba(0, 212, 255, 0.07);
  --chrome-idle-border-soft: rgba(0, 212, 255, 0.045);
  --chrome-idle-shadow: 0 0 14px rgba(0, 212, 255, 0.018), inset 0 0 16px rgba(0, 212, 255, 0.014);
  --chrome-idle-fill: rgba(3, 12, 16, 0.5);
  --chrome-active-border: rgba(0, 212, 255, 0.54);
  --chrome-active-border-soft: rgba(0, 212, 255, 0.36);
  --chrome-active-shadow: 0 0 30px rgba(0, 212, 255, 0.18), inset 0 0 28px rgba(0, 212, 255, 0.075);
  --chrome-gesture-border: rgba(255, 176, 32, 0.58);
  --chrome-gesture-shadow: 0 0 34px rgba(255, 176, 32, 0.2), inset 0 0 30px rgba(255, 176, 32, 0.08);
}

.action-rail,
.operations-pane,
.audit-pane,
.holo-panel,
.trace-card,
.metric-node,
.system-ribbon,
.voice-console,
.voice-readout,
.mode-button,
.rail-button,
.hologram-stage,
.process-console,
.interaction-status,
.gesture-video,
.gesture-canvas,
.telemetry-node,
.orbit-dot,
.chip {
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    background-color 180ms ease-out,
    opacity 180ms ease-out,
    filter 180ms ease-out;
}

.action-rail,
.operations-pane,
.audit-pane,
.system-ribbon {
  border-color: var(--chrome-idle-border);
  box-shadow: var(--chrome-idle-shadow);
}

.holo-panel,
.trace-card,
.metric-node,
.voice-console,
.voice-readout,
.mode-button,
.rail-button,
.process-console,
.interaction-status,
.gesture-video,
.gesture-canvas,
.telemetry-node,
.orbit-dot,
.chip {
  border-color: var(--chrome-idle-border-soft);
  box-shadow: none;
}

.voice-console,
.voice-readout,
.mode-button,
.rail-button,
.process-console,
.interaction-status {
  background-color: var(--chrome-idle-fill);
}

.hologram-stage {
  border-color: rgba(0, 212, 255, 0.055);
  box-shadow: inset 0 0 42px rgba(0, 212, 255, 0.035), 0 0 16px rgba(0, 212, 255, 0.018);
}

.hologram-stage::before {
  opacity: 0.18;
  transition: opacity 220ms ease-out;
}

.hologram-stage::after {
  opacity: 0.34;
  transition: opacity 220ms ease-out;
}

.processing-matrix {
  opacity: 0.28;
  transition: opacity 220ms ease-out, filter 220ms ease-out;
}

.process-cell {
  border-color: rgba(0, 212, 255, 0.07);
  background: rgba(0, 212, 255, 0.018);
  color: rgba(244, 247, 250, 0.34);
}

.signal-bus i,
.link-line {
  opacity: 0.24;
  transition: opacity 220ms ease-out, filter 220ms ease-out;
}

.interaction-reticle {
  border-color: rgba(0, 212, 255, 0.16);
  opacity: 0.38;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.045), inset 0 0 10px rgba(0, 212, 255, 0.028);
}

.interaction-reticle::before,
.interaction-reticle::after {
  opacity: 0.42;
}

.orbit-dot {
  border-color: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.035);
}

.orbit-dot:hover,
.orbit-dot:focus-visible,
.orbit-dot.is-selected,
.hologram-stage.is-interacting .orbit-dot.is-selected {
  border-color: rgba(255, 176, 32, 0.72);
  box-shadow: 0 0 24px rgba(255, 176, 32, 0.34), inset 0 0 12px rgba(255, 176, 32, 0.12);
}

.mode-button[aria-current="page"],
.rail-button.primary {
  border-color: var(--chrome-active-border-soft);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.12);
}

.chip.warning,
.chip.danger,
.chip.success {
  box-shadow: 0 0 16px currentColor;
}

.chip.warning {
  border-color: rgba(255, 176, 32, 0.64);
}

.chip.danger {
  border-color: rgba(255, 92, 92, 0.58);
}

.chip.success {
  border-color: rgba(54, 211, 153, 0.58);
}

.action-rail:focus-within,
.operations-pane:focus-within,
.audit-pane:focus-within,
.system-ribbon:hover,
.holo-panel:hover,
.trace-card:hover,
.metric-node:hover,
.mode-button:hover,
.rail-button:hover,
.mode-button:focus-visible,
.rail-button:focus-visible,
.ptt-button:focus-visible,
.voice-console:focus-within,
.hologram-stage:hover,
.hologram-stage:focus-visible,
.process-console:hover,
.interaction-status:hover {
  border-color: var(--chrome-active-border);
  box-shadow: var(--chrome-active-shadow);
}

body.is-listening .voice-console,
body.is-listening .voice-readout,
body.is-listening .ptt-button,
body.is-listening .system-ribbon,
body.is-processing .operations-pane,
body.is-processing .hologram-stage,
body.is-processing .process-console,
body.is-processing .interaction-status,
body.is-gesture .hologram-stage,
body.is-gesture .gesture-video,
body.is-gesture .gesture-canvas,
.hologram-stage.is-interacting {
  border-color: var(--chrome-active-border);
  box-shadow: var(--chrome-active-shadow);
}

body.is-gesture .hologram-stage,
body.is-gesture .gesture-video,
body.is-gesture .gesture-canvas {
  border-color: var(--chrome-gesture-border);
  box-shadow: var(--chrome-gesture-shadow);
}

body.is-processing .hologram-stage::before,
body.is-processing .hologram-stage::after,
body.is-gesture .hologram-stage::before,
body.is-gesture .hologram-stage::after,
.hologram-stage:hover::before,
.hologram-stage:focus-visible::before,
.hologram-stage.is-interacting::before {
  opacity: 0.52;
}

body.is-processing .processing-matrix,
body.is-processing .signal-bus i,
body.is-processing .link-line,
body.is-gesture .signal-bus i,
.hologram-stage:hover .processing-matrix,
.hologram-stage.is-interacting .processing-matrix,
.hologram-stage.is-interacting .signal-bus i,
.hologram-stage.is-interacting .link-line {
  opacity: 0.78;
  filter: saturate(1.35);
}

body.is-processing .process-cell,
.hologram-stage.is-interacting .process-cell {
  border-color: rgba(0, 212, 255, 0.24);
  background: rgba(0, 212, 255, 0.055);
  color: rgba(244, 247, 250, 0.7);
}

body.is-processing .interaction-reticle,
body.is-gesture .interaction-reticle,
.hologram-stage:hover .interaction-reticle,
.hologram-stage.is-interacting .interaction-reticle {
  border-color: rgba(0, 212, 255, 0.66);
  opacity: 0.9;
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.22), inset 0 0 18px rgba(0, 212, 255, 0.09);
}

body.is-processing .interaction-reticle::before,
body.is-processing .interaction-reticle::after,
body.is-gesture .interaction-reticle::before,
body.is-gesture .interaction-reticle::after,
.hologram-stage.is-interacting .interaction-reticle::before,
.hologram-stage.is-interacting .interaction-reticle::after {
  opacity: 1;
}

@keyframes chromeActivityPulse {
  0%,
  100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.35) brightness(1.08);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.is-listening .voice-console,
  body.is-processing .hologram-stage,
  body.is-processing .process-console,
  body.is-gesture .hologram-stage {
    animation: chromeActivityPulse 1.8s ease-in-out infinite;
  }
}