/* ng-voice-picker.css — AURORA-X voice switcher (2026-09-07).
   the operator: "Make a button on the dashboard for switching voices, we may have
   a few I like with different vibes."

   Companion to ng-voice-picker.js. Nothing here styles anything owned by
   ng-voice-vnext.js / ng-voice-lane.js — every selector is .nvp-*.
   Colours come from the AURORA-X brand seam (--x-cyan et al) so the 12 skins
   in ng-skins.css theme this for free; never hardcode the cyan. */

/* ------------------------------------------------ statusbar trigger --- */
.nvp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  background: transparent;
  border: 1px solid var(--line2, rgba(0, 229, 255, .25));
  border-radius: 999px;
  color: var(--t2, #a8b8cf);
  font: 600 10px/1 var(--fu, system-ui);
  letter-spacing: .1em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.nvp-btn:hover, .nvp-btn:focus-visible, .nvp-btn[aria-expanded="true"] {
  color: var(--x-cyan, #00e5ff);
  border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 55%, transparent);
  background: color-mix(in srgb, var(--x-cyan, #00e5ff) 10%, transparent);
  outline: none;
}
.nvp-btn i { font-style: normal; font-size: 11px; line-height: 1; }
.nvp-btn b { font-weight: 700; letter-spacing: .04em; }

/* ------------------------------------------------------- the panel --- */
.nvp-wrap {                       /* full-screen click-away catcher */
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(2, 6, 14, .45);
  display: grid; place-items: start end;
  padding: 46px 14px 14px;
}
.nvp-wrap[hidden] { display: none !important; }

.nvp-panel {
  width: min(430px, calc(100vw - 28px));
  max-height: min(76vh, 720px);
  display: flex; flex-direction: column;
  /* Two layers on purpose: the skins' --glass-deep is genuinely translucent in
     several palettes and the telemetry rail read straight through the list.
     The flat wash under it makes the text legible without losing the tint. */
  background:
    linear-gradient(rgba(4, 9, 18, .93), rgba(4, 9, 18, .93)),
    var(--glass-deep, rgba(6, 13, 26, .96));
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--line2, rgba(0, 229, 255, .25));
  border-radius: var(--r2, 14px);
  box-shadow: 0 10px 44px rgba(0, 0, 0, .7);
  color: var(--t1, #dce6f5);
  overflow: hidden;
}
.nvp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--line2, rgba(0, 229, 255, .18));
  font: 600 11px/1 var(--fu, system-ui);
  letter-spacing: .16em;
  color: var(--x-cyan, #00e5ff);
}
.nvp-head .nvp-sp { flex: 1 1 auto; }
.nvp-x {
  background: none; border: 0; cursor: pointer;
  color: var(--t3, #6f849a); font: 700 15px/1 var(--fu, system-ui);
  padding: 2px 4px;
}
.nvp-x:hover { color: var(--x-cyan, #00e5ff); }

.nvp-body { overflow: auto; padding: 8px 8px 10px; -webkit-overflow-scrolling: touch; }

.nvp-note {
  padding: 7px 9px; margin: 2px 2px 8px;
  border: 1px dashed var(--line2, rgba(0, 229, 255, .22));
  border-radius: var(--r1, 9px);
  font: 400 10px/1.5 var(--fu, system-ui);
  color: var(--t2, #a8b8cf);
}

.nvp-group {
  margin: 10px 4px 5px;
  font: 700 9px/1 var(--fu, system-ui);
  letter-spacing: .18em;
  color: var(--t3, #6f849a);
}
.nvp-group:first-child { margin-top: 2px; }

/* ------------------------------------------------------- each row --- */
.nvp-row {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%;
  padding: 8px 9px;
  margin: 3px 0;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r1, 9px);
  color: inherit;
  cursor: pointer;
}
.nvp-row:hover, .nvp-row:focus-within {
  background: color-mix(in srgb, var(--x-cyan, #00e5ff) 6%, transparent);
  border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 26%, transparent);
}
.nvp-row.is-on {
  background: color-mix(in srgb, var(--x-cyan, #00e5ff) 12%, transparent);
  border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 55%, transparent);
}

.nvp-pick {                       /* the selecting surface (a real button) */
  flex: 1 1 auto; min-width: 0;
  display: block; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; cursor: pointer; font: inherit;
}
.nvp-pick:focus-visible { outline: 1px solid var(--x-cyan, #00e5ff); outline-offset: 3px; }

.nvp-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 600 12px/1.2 var(--fu, system-ui);
  color: var(--t1, #dce6f5);
}
.nvp-row.is-on .nvp-name { color: var(--x-cyan, #00e5ff); }
.nvp-tag {
  font: 700 8px/1 var(--fu, system-ui); letter-spacing: .14em;
  padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--line2, rgba(0, 229, 255, .25));
  color: var(--t3, #6f849a);
}
.nvp-tag.is-default { color: var(--x-cyan, #00e5ff); border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 50%, transparent); }
.nvp-tag.is-active  { color: #0a0f16; background: var(--x-cyan, #00e5ff); border-color: transparent; }

.nvp-desc {
  margin-top: 3px;
  font: 400 10px/1.45 var(--fu, system-ui);
  color: var(--t2, #a8b8cf);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nvp-meta {
  margin-top: 4px;
  font: 500 9.5px/1.3 var(--fm, ui-monospace, monospace);
  color: var(--t3, #6f849a);
  word-break: break-all;
}

/* --------------------------------------------------- play control --- */
.nvp-play {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line2, rgba(0, 229, 255, .25));
  border-radius: 999px;
  color: var(--t2, #a8b8cf);
  font: 700 11px/1 var(--fu, system-ui);
  cursor: pointer;
}
.nvp-play:hover, .nvp-play:focus-visible {
  color: var(--x-cyan, #00e5ff);
  border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 55%, transparent);
  outline: none;
}
.nvp-play[data-state="load"] { color: var(--x-cyan, #00e5ff); animation: nvp-pulse 1s ease-in-out infinite; }
.nvp-play[data-state="play"] { color: #0a0f16; background: var(--x-cyan, #00e5ff); border-color: transparent; }
.nvp-play[data-state="err"]  { color: #ff6b6b; border-color: rgba(255, 107, 107, .5); }
@keyframes nvp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .nvp-play[data-state="load"] { animation: none } }

.nvp-err {
  margin: 6px 4px 0;
  font: 400 10px/1.4 var(--fu, system-ui);
  color: #ff8f8f;
}

/* Narrow screens: the panel takes the width and drops from the top. */
@media (max-width: 640px) {
  .nvp-wrap { place-items: start center; padding: 10px; }
  .nvp-panel { width: 100%; max-height: 86vh; }
  .nvp-btn b { display: none; }
}