/* First-class music, sharing Vibel's existing white/black and orange tokens. */
html[data-music-access="true"][data-control-layer="true"] #topbar #play { display: grid !important; width: 44px; height: 44px; flex: none; border-radius: 14px; }
html[data-music-access="true"] #topbar #tunerbtn { width: 44px; padding: 0; border-color: transparent; background: transparent; }
html[data-music-access="true"] .cc-entry-label { display: none; }
.va-button { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; flex: none; color: var(--cc-ink); border: 0; border-radius: 13px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.va-button .va-icon { width: 22px; height: 22px; }
.va-button .vibel-music-icon { width: 27px; height: 27px; }
.va-header-library { color: var(--cc-accent); background: var(--cc-selected); border: 1px solid var(--cc-line); }
.va-button:focus-visible, .va-now:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.va-strip { display: flex; align-items: center; gap: 2px; padding: 5px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--cc-line); }
.va-now { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 48px; padding: 3px; border: 0; border-radius: 11px; background: none; color: var(--cc-ink); text-align: left; cursor: pointer; }
.va-mark { display: grid; place-items: center; flex: none; width: 36px; height: 38px; color: var(--cc-accent); }
.va-mark .vibel-music-icon { width: 29px; height: 29px; }
.va-meta { display: block; min-width: 0; }
.va-meta strong { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.4 var(--font-body); }
.va-meta small { display: block; font: 500 10px/1.5 var(--font-body); color: var(--cc-muted); margin-top: 2px; }
.va-play { background: var(--tape-orange, #ef6e27); color: #211207; border-radius: 50%; }
.va-strip[data-playing="true"] .va-meta small { color: var(--cc-accent); }
/* The mark acknowledges playback without an endlessly moving equalizer. */
.va-strip[data-playing="true"] .vibel-music-icon__dot { fill: var(--cc-accent); }
html[data-music-access="true"] .control-dock { width: min(348px, calc(100vw - 24px)); padding: 6px; border-radius: 23px; }
html[data-music-access="true"] .cc-dock-main { justify-content: space-between; }
html[data-music-access="true"] .cc-dock-open { flex: 1; justify-content: center; gap: 13px; }
html[data-music-access="true"] .cc-dock-label { font-size: 0; gap: 0; }
html[data-music-access="true"] .cc-dock-label:has(small[hidden]) { display: none; }
html[data-music-access="true"] .cc-dock-label small { font-size: 9px; }
html[data-music-access="true"][data-control-note="true"] .main { padding-bottom: calc(var(--reading-dock-height, 130px) + 48px + env(safe-area-inset-bottom, 0px)); }
html[data-music-access="true"] .cc-toast { bottom: calc(var(--reading-dock-height, 130px) + 30px + env(safe-area-inset-bottom,0px)); }
html[data-music-access="true"] .control-center .cc-heading > div > p,
html[data-music-access="true"] #cc-panel-audio > .cc-intro { display: none; }
html[data-music-access="true"] #cc-tab-audio .vibel-music-icon { width: 21px; height: 21px; }
html[data-music-access="true"] .control-center .cc-narration { margin-top: 24px; }
html[data-music-access="true"] .control-center .cc-music-heading { margin-top: 0; }
html[data-music-access="true"] .control-center .music-viewbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 13px; background: var(--cc-soft); }
html[data-music-access="true"] .control-center .music-viewbar button { width: auto; min-height: 44px; padding: 8px; border: 0; border-radius: 10px; font: 600 12px/1.4 var(--font-body); color: var(--cc-muted); background: transparent; cursor: pointer; }
html[data-music-access="true"] .control-center .music-viewbar button[aria-selected="true"] { color: var(--cc-accent); background: var(--cc-surface); box-shadow: 0 1px 4px #0001; }
html[data-music-access="true"] .control-center .music-viewbar button::after { display: none; }
/* A dedicated listening room from music entry points; same original DOM. */
.control-center[data-presentation="music"] .cc-tabs,
.control-center[data-presentation="music"] .cc-foot,
.control-center[data-presentation="music"] .cc-narration,
.control-center[data-presentation="music"] #cc-panel-audio > .cc-intro { display: none !important; }
.control-center[data-presentation="music"] .cc-scroll { scroll-padding-top: 8px; }
.control-center[data-presentation="music"] .cc-panel { padding-top: 0; padding-bottom: max(24px,env(safe-area-inset-bottom,0px)); }
.control-center[data-presentation="music"] .cc-music-heading { justify-content: flex-end; position: absolute; top: 17px; right: 70px; margin: 0; }
.control-center[data-presentation="music"] .cc-music-heading h3 { display: none; }
.control-center[data-presentation="music"] .cc-head { padding-right: 19px; }
.control-center[data-presentation="music"] .music-eyebrow { display: none; }
.control-center[data-presentation="music"] .music-main-art { width: clamp(138px, 22vh, 186px); margin: 19px auto 16px; }
.control-center[data-presentation="music"] .music-transport { margin-block: 12px; }
.control-center[data-presentation="music"] .music-endless { font-size: 11px; margin: 8px 0; }
@media (hover: hover) {
  .va-now:hover, .va-button:not(.va-play):hover { background: var(--cc-soft); }
  .va-play:hover { background: #ff975a; }
}
@media (min-width: 941px) {
  html[data-music-access="true"] dialog.tuner.music-room.control-center { bottom: calc(var(--reading-dock-height, 130px) + 34px); height: min(760px, calc(100dvh - var(--bar-h, 80px) - var(--reading-dock-height, 130px) - 54px)); }
}
@media (max-width: 759px) {
  html[data-music-access="true"] .topbar__side--end { gap: 4px; }
  html[data-music-access="true"] .music-topnow .music-topmeta { display: none; }
  html[data-music-access="true"] .topbar .music-topnow { min-width: 44px; height: 44px; justify-content: center; }
  .control-center[data-presentation="music"] .cc-music-heading { top: 13px; right: 65px; }
}
@media (max-width: 380px) {
  html[data-music-access="true"] .topbar .music-topnow { display: none; }
  html[data-music-access="true"] .topbar__side { gap: 5px; }
  html[data-music-access="true"] .topbar__side--end { gap: 2px; }
  .va-now { gap: 5px; }
  .va-mark { width: 31px; }
  .va-meta strong { font-size: 11px; }
  .control-center[data-presentation="music"] #cc-title { font-size: 18px; }
}
@media (max-height: 520px) {
  html[data-music-access="true"] dialog.tuner.music-room.control-center { inset: 8px 8px 8px auto; height: calc(100dvh - 16px); }
  .control-center[data-presentation="music"] .cc-music-heading { top: 7px; }
  .control-center[data-presentation="music"] .music-main-art { width: 100px; }
}
@media (prefers-reduced-motion: reduce) { .va-strip *, .va-header-library { animation: none !important; transition: none !important; } }
html[data-motion="off"] .va-strip *, html[data-motion="reduced"] .va-strip * { animation: none !important; transition: none !important; }
@media print { .va-strip, .va-header-library { display: none !important; } }

/* Full and compact are two surfaces in one constant-size anchor. Keeping the
   anchor's footprint prevents percent, scroll position and footer oscillation. */
html[data-music-access="true"] .control-dock[data-adaptive-dock="true"] {
  padding: 0; border: 0; background: transparent; box-shadow: none;
  pointer-events: none; overflow: visible;
}
.vd-full, .vd-compact {
  border: 1px solid var(--cc-line); background: var(--cc-surface);
  box-shadow: 0 6px 28px #0003; color: var(--cc-ink);
  transform-origin: bottom right;
  transition: opacity 180ms ease, transform 220ms var(--motion-ease, cubic-bezier(.22,1,.36,1)), visibility 0s;
}
.vd-full { padding: 6px; border-radius: 23px; visibility: visible; transition-delay: 0s; opacity: 1; transform: none; pointer-events: auto; }
.vd-compact {
  position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 28px; width: max-content; max-width: 100%;
  opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 220ms; transform: translateY(8px) scale(.97); pointer-events: none;
}
.control-dock[data-dock-state="compact"] .vd-full {
  opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 220ms; transform: translateY(12px) scale(.98); pointer-events: none;
}
.control-dock[data-dock-state="compact"] .vd-compact {
  opacity: 1; visibility: visible; transition-delay: 0s; transform: none; pointer-events: auto;
}
.vd-toggle { color: var(--cc-muted); }
.vd-full .vd-toggle { margin-left: 2px; border-left: 1px solid var(--cc-line); border-radius: 0 15px 15px 0; }
.vd-full .vd-toggle:disabled { opacity: .4; cursor: not-allowed; }
.vd-compact .vd-library { color: var(--cc-accent); }
.vd-compact .vd-library .vibel-music-icon { width: 29px; height: 29px; }
.vd-compact[data-playing="true"] .vibel-music-icon__dot { fill: var(--cc-accent); }
.vd-progress { position: relative; font: 650 11px/1 var(--font-body); font-variant-numeric: tabular-nums; border-radius: 50%; }
.vd-ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.vd-ring circle { fill: none; stroke: var(--cc-line); stroke-width: 1.8; }
.vd-ring .vd-ring-value { stroke: var(--cc-accent); stroke-dasharray: var(--vd-progress,0) 100; stroke-linecap: round; }
.vd-preference legend { display: flex; align-items: center; gap: 8px; }
.vd-preference legend:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cc-accent); }
/* A retained layout box is never a click shield over the note. Only its
   visible surface is interactive; inert removes hidden controls from Tab. */
@media (hover: hover) { .vd-toggle:not(:disabled):hover, .vd-progress:hover { background: var(--cc-soft); color: var(--cc-accent); } }
@media (prefers-reduced-motion: reduce) { .vd-full, .vd-compact { transition: none !important; transform: none !important; } }
html[data-motion="reduced"] :is(.vd-full,.vd-compact),
html[data-motion="off"] :is(.vd-full,.vd-compact) { transition: none !important; transform: none !important; }
@media (forced-colors: active) {
  .vd-full, .vd-compact { border-color: ButtonText; box-shadow: none; }
  .vd-ring circle { stroke: GrayText; }
  .vd-ring .vd-ring-value { stroke: Highlight; }
}
@media print { .vd-compact, .vd-full { display: none !important; } }