/* ORAVOLNA — Sound Capsule v2.0 (v4.23)
   Drop-in audio + native-script lyric layer.
   No external libraries or fonts required.
   v4.23: no CSS changes - copied forward unchanged from v4.22 so the JS/CSS pair stays in step
   (the v4.23 fix is JS-only, see assets/vvai-sound-capsule-v4.23.js: a permaOpen guard on the
   touch-dismissal click listener).
   v4.22 (owner 2026-09-20, Sony TV pointer report): the reveal rule for .vvai-sound__details no
   longer opens on a bare :hover - only :focus-within or [data-open="true"] do (the matching JS,
   assets/vvai-sound-capsule-v4.23.js, is the one thing now allowed to decide "open" on a
   pointer, and it never trusts :hover alone either). .vvai-sound__btn and
   .vvai-sound__lyrics-toggle are now a real 44px so every transport control is reachable and
   pressable by a D-pad. */

:root {
  --vvai-sound-bg: rgba(8, 8, 9, .74);
  --vvai-sound-fg: #f4f1eb;
  --vvai-sound-muted: rgba(244, 241, 235, .56);
  --vvai-sound-line: rgba(255,255,255,.15);
  --vvai-sound-line-strong: rgba(255,255,255,.28);
  --vvai-sound-shadow: 0 18px 70px rgba(0,0,0,.34);
  --vvai-sound-safe-bottom: max(18px, env(safe-area-inset-bottom));
  --vvai-sound-safe-right: max(18px, env(safe-area-inset-right));
  --vvai-sound-safe-left: max(18px, env(safe-area-inset-left));
}

.vvai-sound {
  position: fixed;
  right: var(--vvai-sound-safe-right);
  bottom: var(--vvai-sound-safe-bottom);
  z-index: 1300; /* deliberately below the site's menu (1400) and video modal (1500) */
  display: flex;
  align-items: center;
  min-height: 54px;
  max-width: calc(100vw - 36px - env(safe-area-inset-left) - env(safe-area-inset-right));
  border: 1px solid var(--vvai-sound-line);
  border-radius: 999px;
  background: var(--vvai-sound-bg);
  color: var(--vvai-sound-fg);
  box-shadow: var(--vvai-sound-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  overflow: clip;
  isolation: isolate;
  transition: border-color .28s ease, background .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}

.vvai-sound::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.035));
  opacity: .85;
  z-index: -1;
}

.vvai-sound:hover,
.vvai-sound:focus-within,
.vvai-sound[data-open="true"] {
  border-color: var(--vvai-sound-line-strong);
  background: rgba(8,8,9,.84);
  transform: translateY(-1px);
}

.vvai-sound button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.vvai-sound :where(button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.vvai-sound__head {
  appearance: none;
  border: 0;
  background: transparent;
  min-width: 148px;
  height: 52px;
  padding: 0 16px 0 17px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  text-align: left;
}

.vvai-sound__label-wrap { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.vvai-sound__dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.88; box-shadow:0 0 0 0 rgba(255,255,255,.18); transition:.25s ease; }
.vvai-sound[data-playing="true"][data-muted="false"] .vvai-sound__dot { box-shadow:0 0 0 4px rgba(255,255,255,.08); }
.vvai-sound__label { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:10px; font-weight:650; letter-spacing:.22em; text-transform:uppercase; }

.vvai-sound__wave { height:18px; min-width:53px; display:grid; grid-template-columns:repeat(12,1px); justify-content:end; align-items:center; gap:3px; opacity:.82; }
.vvai-sound__bar { width:1px; height:16px; border-radius:2px; background:currentColor; transform:scaleY(.08); transform-origin:center; transition:transform 95ms linear, opacity .25s ease; }
.vvai-sound[data-muted="true"] .vvai-sound__bar,
.vvai-sound[data-playing="false"] .vvai-sound__bar { transform:scaleY(.08)!important; opacity:.55; }

.vvai-sound__details {
  width:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  height:52px;
  display:flex;
  align-items:center;
  overflow:hidden;
  transition:width .38s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .38s;
}

/* v4.22: bare :hover removed from this selector list (owner 2026-09-20 TV pointer report - a
   pointer remote's cursor does not hold :hover reliably, so a rule keyed on :hover alone can
   collapse the instant hit-testing blips, even while the JS still considers the pill open).
   :focus-within and [data-open="true"] are both driven by real JS state (assets/vvai-sound-
   capsule-v4.22.js), which tracks pointer activity itself instead of trusting this pseudo-class -
   a real desktop mouse hover still opens the pill exactly as before, just through that JS path. */
.vvai-sound:focus-within .vvai-sound__details,
.vvai-sound[data-open="true"] .vvai-sound__details {
  width:246px;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:width .38s cubic-bezier(.2,.8,.2,1),opacity .24s ease .08s,visibility 0s;
}

/* v4.22 (owner 2026-09-20, TV pointer report): assets/vvai-sound-bar-v3.40.css is loaded AFTER
   this file and already makes .vvai-sound__details unconditionally visible (its own explicit,
   documented intent - "no reveal: the controls are always present") and bumps every control to
   44px, but only under `@media (pointer:coarse)` - a TV pointer remote that reports as a
   precise, fine pointer (plausible: it moves an on-screen cursor like a mouse) falls outside
   that query and keeps v3.40's 34px desktop-mouse size. [data-tv-safe="true"] is set directly
   by assets/vvai-sound-capsule-v4.22.js (see applyPermaOpenIfTV) whenever it determines this is
   a TV, independent of any pointer/hover media-feature reading. This selector's specificity
   (0,3,0: .vvai-sound + [data-tv-safe] + .vvai-sound__btn) is deliberately higher than v3.40's
   .vvai-sound .vvai-sound__btn (0,2,0), so it wins regardless of file load order or which
   pointer/hover media features the TV's browser happens to report. */
.vvai-sound[data-tv-safe="true"] .vvai-sound__btn,
.vvai-sound[data-tv-safe="true"] .vvai-sound__seek,
.vvai-sound[data-tv-safe="true"] .vvai-sound__playpause,
.vvai-sound[data-tv-safe="true"] .vvai-sound__mute,
.vvai-sound[data-tv-safe="true"] .vvai-sound__lyrics-toggle {
  width:44px; min-width:44px; height:44px;
}
.vvai-sound__divider { width:1px; height:20px; background:var(--vvai-sound-line); flex:0 0 auto; }
.vvai-sound__controls { height:100%; padding:0 8px 0 10px; display:flex; align-items:center; gap:2px; }
.vvai-sound__btn { appearance:none; border:0; background:transparent; min-width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--vvai-sound-muted); transition:color .2s ease,background .2s ease,transform .16s ease; } /* v4.22: was 38px - a real 44px D-pad/tap target */
.vvai-sound__btn:hover,.vvai-sound__btn:focus-visible { color:var(--vvai-sound-fg); background:rgba(255,255,255,.075); }
.vvai-sound__btn:active { transform:scale(.91); }
.vvai-sound__btn--minus,.vvai-sound__btn--plus { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:300; font-size:18px; line-height:1; }
.vvai-sound__value { min-width:34px; text-align:center; font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:10px; letter-spacing:.04em; color:var(--vvai-sound-fg); font-variant-numeric:tabular-nums; }
.vvai-sound__mute svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.vvai-sound__mute .vvai-icon-unmuted,.vvai-sound__mute .vvai-icon-muted { display:none; }
.vvai-sound[data-muted="false"] .vvai-sound__mute .vvai-icon-unmuted { display:block; }
.vvai-sound[data-muted="true"] .vvai-sound__mute .vvai-icon-muted { display:block; }

.vvai-sound__lyrics-toggle {
  appearance:none;
  border:0;
  background:transparent;
  height:44px; /* v4.22: was 38px - matches .vvai-sound__btn's 44px D-pad/tap target */
  min-width:58px;
  padding:0 9px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--vvai-sound-muted);
  cursor:pointer;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:9px;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.vvai-sound__lyrics-toggle:hover,.vvai-sound__lyrics-toggle:focus-visible,.vvai-sound__lyrics-toggle[aria-pressed="true"] { color:var(--vvai-sound-fg); background:rgba(255,255,255,.075); }
.vvai-sound__lyrics-indicator { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:0; transform:scale(.4); transition:.2s ease; }
.vvai-sound__lyrics-toggle[aria-pressed="true"] .vvai-sound__lyrics-indicator { opacity:1; transform:scale(1); }
.vvai-sound__lyrics-toggle:disabled { opacity:.25; cursor:not-allowed; background:transparent; }

/* Artistic native-text lyric veil. Current cue only; no translation layer. */
.vvai-lyrics {
  position:fixed;
  z-index:1290;
  left:max(5vw,env(safe-area-inset-left));
  bottom:calc(max(22px,env(safe-area-inset-bottom)) + 88px);
  width:min(72vw,980px);
  pointer-events:none;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.48);
  opacity:0;
  transform:translateY(12px);
  filter:blur(3px);
  transition:opacity .32s ease,transform .46s cubic-bezier(.2,.8,.2,1),filter .42s ease;
}
.vvai-lyrics[data-visible="true"] { opacity:1; transform:translateY(0); filter:blur(0); }
.vvai-lyrics[data-suppressed="true"] { opacity:0!important; }
.vvai-lyrics__line {
  margin:0;
  max-width:100%;
  font-size:clamp(26px,4.2vw,72px);
  line-height:1.08;
  font-weight:450;
  letter-spacing:-.025em;
  text-wrap:balance;
  white-space:pre-line;
}
.vvai-lyrics__line[dir="rtl"] { text-align:right; unicode-bidi:plaintext; }

/* Script-aware stacks. Optional Noto families will be used if Planner self-hosts them later. */
.vvai-lyrics__line:lang(en),.vvai-lyrics__line:lang(ru) { font-family:"Iowan Old Style",Baskerville,"Times New Roman",Georgia,serif; }
.vvai-lyrics__line:lang(ja) { font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","MS PMincho",serif; letter-spacing:.01em; }
.vvai-lyrics__line:lang(ko) { font-family:"Noto Serif KR","Apple SD Gothic Neo","Malgun Gothic","NanumMyeongjo",serif; letter-spacing:-.01em; }
.vvai-lyrics__line:lang(zh-Hant) { font-family:"Songti TC","PingFang TC","Noto Serif TC","PMingLiU","MingLiU",serif; letter-spacing:.015em; }
.vvai-lyrics__line:lang(he) { font-family:"Noto Serif Hebrew","Times New Roman",serif; letter-spacing:0; }
.vvai-lyrics__segment { unicode-bidi:isolate; }

.vvai-sound__flash {
  position:fixed;
  z-index:1280;
  left:50%;
  top:50%;
  width:min(92vw,1500px);
  transform:translate(-50%,-47%);
  pointer-events:none;
  text-align:center;
  color:#fff;
  mix-blend-mode:difference;
  opacity:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(64px,13.5vw,210px);
  font-weight:500;
  line-height:.82;
  letter-spacing:-.075em;
  text-transform:uppercase;
  white-space:nowrap;
  user-select:none;
  filter:blur(3px);
  transition:opacity .19s ease,filter .32s ease,transform .42s cubic-bezier(.2,.8,.2,1);
}
.vvai-sound__flash[data-visible="true"] { opacity:.115; filter:blur(0); transform:translate(-50%,-50%); }
.vvai-sound__flash small { display:block; margin-top:.22em; font-size:.095em; font-weight:600; letter-spacing:.28em; }

@media (hover:none) {
  /* Touch users explicitly tap the capsule; hover should not fake an expanded state. */
  .vvai-sound:not([data-open="true"]):hover .vvai-sound__details:not(:focus-within) { width:0; opacity:0; visibility:hidden; pointer-events:none; }
  .vvai-sound[data-open="true"] .vvai-sound__details,.vvai-sound:focus-within .vvai-sound__details { width:246px; opacity:1; visibility:visible; pointer-events:auto; }
}

@media (max-width:900px) {
  .vvai-lyrics { left:8vw; right:8vw; width:auto; bottom:calc(max(18px,env(safe-area-inset-bottom)) + 92px); }
  .vvai-lyrics__line { font-size:clamp(28px,6vw,58px); }
}

@media (max-width:560px) {
  .vvai-sound { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .vvai-sound__head { min-width:126px; padding-left:14px; padding-right:12px; gap:10px; }
  .vvai-sound__wave { min-width:42px; grid-template-columns:repeat(9,1px); }
  .vvai-sound__wave .vvai-sound__bar:nth-child(n+10) { display:none; }
  .vvai-sound[data-open="true"] .vvai-sound__details,.vvai-sound:focus-within .vvai-sound__details { width:226px; }
  .vvai-sound__controls { padding-left:6px; padding-right:5px; }
  .vvai-sound__btn { min-width:36px; height:36px; }
  .vvai-sound__lyrics-toggle { min-width:56px; }
  .vvai-lyrics { left:18px; right:18px; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 82px); width:auto; text-align:center; }
  .vvai-lyrics__line { font-size:clamp(26px,9vw,46px); text-align:center; }
  .vvai-lyrics__line[dir="rtl"] { text-align:center; }
  .vvai-sound__flash { font-size:clamp(54px,18vw,104px); }
}

@media (max-height:600px) and (orientation:landscape) {
  .vvai-lyrics { left:5vw; right:44vw; bottom:max(18px,env(safe-area-inset-bottom)); width:auto; }
  .vvai-lyrics__line { font-size:clamp(24px,5vh,40px); }
}

@media (prefers-reduced-motion:reduce) {
  .vvai-sound,.vvai-sound__details,.vvai-sound__btn,.vvai-sound__flash,.vvai-sound__bar,.vvai-lyrics,.vvai-sound__lyrics-indicator { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}