/* AURORA 極光 — visualizers (src/ui/visuals.js)
   Class prefix: av-   Tokens come from css/style.css; the zero-specificity block below only
   provides fallbacks so the visuals also render standalone (any real :root token wins).
   Every visual is a positioned box the app sizes; canvases fill it. Defaults below are sensible
   standalone heights — override height/width freely from the layout. */

:where(:root) {
  --bg-0: #07080d; --bg-1: #0c0f18; --bg-2: #121726;
  --panel: rgba(22, 28, 46, .72); --panel-hi: rgba(38, 48, 78, .6);
  --line: rgba(140, 160, 220, .14); --text: #e8ecff; --text-dim: #8e97b8; --text-faint: #7a83a6;
  --a-cyan: #5cf2ff; --a-teal: #3ef0b0; --a-violet: #a78bfa; --a-pink: #ff6bd6; --a-amber: #ffc46b; --a-red: #ff6b81;
  --grad-aurora: linear-gradient(120deg, #3ef0b0, #5cf2ff 30%, #a78bfa 65%, #ff6bd6);
  --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --font-ui: "Inter", "Noto Sans TC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ───────────────────────── shared ───────────────────────── */
:where(.av-vis) { width: 100%; }
.av-vis {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.av-vis > .av-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* instrument "screens": scope, spectrum, filter, lfo */
.av-scope, .av-spectrum, .av-filter, .av-lfo {
  --av-screen: #05070d;
  border-radius: var(--radius-sm, 8px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(92, 242, 255, .045), transparent 60%),
    linear-gradient(180deg, rgba(10, 13, 24, .92), rgba(5, 7, 13, .96));
  box-shadow:
    inset 0 0 0 1px var(--line, rgba(140, 160, 220, .14)),
    inset 0 1px 0 rgba(255, 255, 255, .03),
    inset 0 -18px 30px -24px rgba(0, 0, 0, .8);
}
:where(.av-scope) { height: 150px; }
:where(.av-spectrum) { height: 150px; }
:where(.av-filter) { height: 140px; }
:where(.av-lfo) { height: 84px; }
.av-filter { background:
    radial-gradient(120% 90% at 50% 0%, rgba(167, 139, 250, .06), transparent 60%),
    linear-gradient(180deg, rgba(10, 12, 24, .92), rgba(5, 6, 13, .96)); }
.av-lfo { background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 196, 107, .045), transparent 60%),
    linear-gradient(180deg, rgba(12, 12, 22, .92), rgba(6, 6, 12, .96)); }

/* ───────────────────────── hero ───────────────────────── */
:where(.av-hero) { height: 100%; min-height: 200px; }
.av-hero {
  border-radius: var(--radius, 14px);
  background: #04050b;
  box-shadow: var(--shadow, 0 10px 40px rgba(0, 0, 0, .45));
}
/* soft inner edge + faint top sheen so the sky sits inside the glass UI */
.av-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(140, 160, 220, .10),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 80px rgba(0, 0, 0, .35);
  z-index: 2;
}

/* ───────────────────────── scope mode chip ───────────────────────── */
.av-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 600 10.5px/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .1em;
  color: var(--text-faint, #7a83a6);
  background: rgba(8, 10, 18, .72);
  box-shadow: inset 0 0 0 1px var(--line, rgba(140, 160, 220, .14));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: box-shadow .18s ease, color .18s ease;
}
.av-chip > span {
  padding: 4px 7px 3px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.av-chip > span.on {
  color: #07080d;
  background: var(--a-cyan, #5cf2ff);
  box-shadow: 0 0 10px color-mix(in oklab, var(--a-cyan, #5cf2ff) 55%, transparent);
}
.av-chip:hover { color: var(--text-dim, #8e97b8); box-shadow: inset 0 0 0 1px rgba(92, 242, 255, .35); }
.av-chip:focus-visible { outline: 2px solid var(--a-cyan, #5cf2ff); outline-offset: 2px; }

/* ───────────────────────── meter ───────────────────────── */
:where(.av-meter) { height: 12px; }
:where(.av-meter.av-meter--v) { width: 18px; height: 120px; }
.av-meter {
  border-radius: 3px;
  overflow: hidden;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .av-chip, .av-chip > span { transition: none; }
}