/* ============================================================================
 * VibeDial — "Plus" feature layer (build vd12)
 * ----------------------------------------------------------------------------
 * Styles for three additive, self-contained features implemented in
 * vibedial-plus.js: the Command Palette (⌘K), the keyboard-shortcut Help sheet,
 * and Cinema (immersive now-playing) mode. Loaded last; all scoped under .vdp-*
 * so nothing here can collide with the base app. Built on the existing token
 * system (--c1/--c2/--c3, --text, --radius*). Mobile-first, reduced-motion safe.
 * ========================================================================= */

:root { --vdp-ease: cubic-bezier(.2,.8,.2,1); --vdp-spring: cubic-bezier(.34,1.3,.5,1); }

/* ---- Shared overlay scrim ------------------------------------------------ */
.vdp-scrim{
  position:fixed; inset:0; z-index:10000;
  background:rgba(3,4,10,.62);
  backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1);
  opacity:0; pointer-events:none; transition:opacity .22s var(--vdp-ease);
  display:flex; align-items:flex-start; justify-content:center;
}
.vdp-scrim.is-open{ opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .vdp-scrim{ transition:none; } }

/* ============================ Command Palette ============================= */
.vdp-palette{
  margin-top:min(14vh,120px); width:min(640px,92vw);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 6%,transparent),transparent 40%),
             color-mix(in srgb,#0c1024 94%, black);
  border:1px solid color-mix(in srgb,var(--c1) 20%,rgba(255,255,255,.12));
  border-radius:22px; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset,
             0 0 60px -20px color-mix(in srgb,var(--c2) 50%,transparent);
  transform:translateY(-10px) scale(.98); opacity:0;
  transition:transform .26s var(--vdp-spring), opacity .2s ease;
}
.vdp-scrim.is-open .vdp-palette{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){ .vdp-palette{ transition:none; transform:none; } }

.vdp-pal-inputwrap{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
.vdp-pal-ic{ font-size:18px; color:var(--c1); flex:0 0 auto; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c1) 60%,transparent)); }
.vdp-pal-input{
  flex:1; background:transparent; border:0; outline:0; color:var(--text);
  font-family:var(--font-body,inherit); font-size:1.08rem; font-weight:500;
}
.vdp-pal-input::placeholder{ color:color-mix(in srgb,var(--text) 42%,transparent); }
.vdp-pal-esc{ font-size:11px; font-weight:700; color:var(--muted); border:1px solid rgba(255,255,255,.14);
  border-radius:7px; padding:3px 8px; letter-spacing:.04em; }

.vdp-pal-results{ max-height:min(52vh,440px); overflow-y:auto; padding:8px; scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--c1) 34%,transparent) transparent; }
.vdp-pal-results::-webkit-scrollbar{ width:9px; }
.vdp-pal-results::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--c1) 30%,transparent); border-radius:99px; border:3px solid transparent; background-clip:content-box; }

.vdp-pal-group{ font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 90%,transparent); padding:12px 12px 6px; }
.vdp-pal-item{
  display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:13px; cursor:pointer;
  border:1px solid transparent; transition:background .12s ease, border-color .12s ease;
}
.vdp-pal-item:hover{ background:rgba(255,255,255,.04); }
.vdp-pal-item.is-active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 16%,transparent),color-mix(in srgb,var(--c2) 12%,transparent));
  border-color:color-mix(in srgb,var(--c1) 34%,rgba(255,255,255,.12));
}
.vdp-pal-badge{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-size:17px; color:#08101a; background:linear-gradient(140deg,var(--c1),var(--c2));
  box-shadow:0 4px 14px color-mix(in srgb,var(--c2) 40%,transparent);
}
.vdp-pal-badge.station{ color:color-mix(in srgb,var(--acc,var(--c1)) 92%, white);
  background:radial-gradient(120% 120% at 25% 20%, color-mix(in srgb,var(--acc,var(--c1)) 42%,transparent), transparent 70%), linear-gradient(145deg,color-mix(in srgb,var(--acc,var(--c1)) 20%,#121425),rgba(255,255,255,.03)); }
.vdp-pal-badge.ghost{ background:rgba(255,255,255,.05); color:var(--c1); box-shadow:none; border:1px solid rgba(255,255,255,.1); }
.vdp-pal-txt{ flex:1; min-width:0; }
.vdp-pal-title{ font-weight:650; font-size:14.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vdp-pal-sub{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.vdp-pal-hint{ flex:0 0 auto; font-size:11px; color:var(--muted); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:2px 7px; font-weight:700; }
.vdp-pal-empty{ text-align:center; color:var(--muted); padding:34px 20px; font-size:14px; }

/* ============================ Help sheet ================================= */
.vdp-help{
  margin-top:min(12vh,110px); width:min(560px,92vw);
  background:color-mix(in srgb,#0c1024 95%, black); border:1px solid rgba(255,255,255,.12);
  border-radius:22px; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.6);
  transform:translateY(-8px) scale(.98); opacity:0; transition:transform .24s var(--vdp-spring), opacity .2s ease;
}
.vdp-scrim.is-open .vdp-help{ transform:none; opacity:1; }
.vdp-help-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.07); }
.vdp-help-head h3{ margin:0; font-family:var(--font-display,serif); font-size:1.3rem; font-weight:800; letter-spacing:-.01em; }
.vdp-help-body{ padding:10px 14px 18px; }
.vdp-help-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 8px; border-radius:10px; }
.vdp-help-row:hover{ background:rgba(255,255,255,.03); }
.vdp-help-label{ font-size:14px; color:color-mix(in srgb,var(--text) 92%,transparent); }
.vdp-keys{ display:flex; gap:6px; flex:0 0 auto; }
.vdp-key{ min-width:26px; text-align:center; font-size:12px; font-weight:700; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-bottom-width:2px;
  border-radius:7px; padding:4px 8px; font-family:ui-monospace,Menlo,monospace; }
.vdp-help-foot{ text-align:center; color:var(--muted); font-size:12px; padding:8px 0 4px; }

/* Shared close button */
.vdp-x{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--text); font-size:16px;
  transition:background .15s ease, transform .1s ease; }
.vdp-x:hover{ background:rgba(255,255,255,.12); } .vdp-x:active{ transform:scale(.92); }

/* ============================ Cinema mode =============================== */
.vdp-cinema{
  position:fixed; inset:0; z-index:9998; display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));
  background:#04050d; overflow:hidden; opacity:0; transition:opacity .4s ease;
}
.vdp-cinema.is-open{ display:flex; opacity:1; }
/* Layered accent aurora — slow drifting radial gradients keyed to the station. */
.vdp-cinema::before, .vdp-cinema::after{ content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none; }
.vdp-cinema::before{
  background:
    radial-gradient(40% 40% at 28% 30%, color-mix(in srgb,var(--acc,var(--c1)) 46%,transparent), transparent 70%),
    radial-gradient(45% 45% at 74% 66%, color-mix(in srgb,var(--acc2,var(--c2)) 40%,transparent), transparent 72%),
    radial-gradient(50% 50% at 60% 20%, color-mix(in srgb,var(--acc3,var(--c3)) 26%,transparent), transparent 70%);
  filter:blur(30px); animation:vdp-aurora 18s ease-in-out infinite; opacity:.9;
}
.vdp-cinema::after{ background:radial-gradient(70% 70% at 50% 55%, transparent, #04050d 78%); }
@keyframes vdp-aurora{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(3%,-2%) scale(1.06); }
  66%{ transform:translate(-2%,3%) scale(1.03); }
}
.vdp-cinema-close{ position:absolute; top:max(18px,env(safe-area-inset-top)); right:20px; z-index:3; }
.vdp-cinema-stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:760px; width:100%; }

/* The disc / art centerpiece */
.vdp-cine-art{
  width:min(46vh,340px); aspect-ratio:1; border-radius:50%; position:relative; margin-bottom:34px;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 50%, #1a1d2b 0 62%, #0c0e18 62%);
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset,
             0 0 90px -20px color-mix(in srgb,var(--acc,var(--c1)) 60%,transparent);
  display:grid; place-items:center;
}
.vdp-cine-art.spin{ animation:vdp-spin 6s linear infinite; }
@keyframes vdp-spin{ to{ transform:rotate(360deg); } }
.vdp-cine-art .label{
  width:34%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg, var(--acc,var(--c1)), var(--acc2,var(--c2)), var(--acc3,var(--c3)), var(--acc,var(--c1)));
  box-shadow:0 0 30px -4px color-mix(in srgb,var(--acc,var(--c1)) 70%,transparent);
  display:grid; place-items:center; position:relative;
}
.vdp-cine-art .label::after{ content:""; width:12%; aspect-ratio:1; border-radius:50%; background:#04050d; box-shadow:0 0 0 3px rgba(0,0,0,.4); }
.vdp-cine-art img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:none; }
.vdp-cine-art.has-cover img.cover{ display:block; }
.vdp-cine-art.has-cover{ background:#0c0e18; }
.vdp-cine-art.has-cover .label{ display:none; }

.vdp-cine-kicker{ font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--acc,var(--c1)); margin:0 0 10px; }
.vdp-cine-title{ font-family:var(--font-display,serif); font-weight:900; letter-spacing:-.03em; line-height:1; margin:0;
  font-size:clamp(2.4rem,7vw,4.6rem); color:var(--text); }
.vdp-cine-track{ font-size:clamp(1rem,2.6vw,1.35rem); color:color-mix(in srgb,var(--text) 82%,transparent); margin:16px 0 0; min-height:1.4em; font-weight:500; }
.vdp-cine-track .np{ color:var(--acc,var(--c1)); font-weight:700; }
.vdp-cine-sub{ color:var(--muted); font-size:14px; margin:8px 0 0; }

.vdp-cine-controls{ display:flex; align-items:center; gap:20px; margin-top:38px; }
.vdp-cine-btn{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--text); font-size:20px;
  transition:transform .14s var(--vdp-ease), background .16s ease; }
.vdp-cine-btn:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.vdp-cine-btn:active{ transform:scale(.94); }
.vdp-cine-btn.play{ width:74px; height:74px; font-size:26px; color:#08101a;
  background:linear-gradient(140deg,var(--acc,var(--c1)),var(--acc2,var(--c2)));
  box-shadow:0 14px 44px color-mix(in srgb,var(--acc2,var(--c2)) 45%,transparent); border:0; }
.vdp-cine-fav.is-fav{ color:var(--c3); border-color:color-mix(in srgb,var(--c3) 50%,transparent); }

@media (prefers-reduced-motion: reduce){
  .vdp-cinema, .vdp-cinema::before, .vdp-cine-art.spin{ animation:none !important; transition:none !important; }
}

/* ---- Palette / cinema trigger buttons injected into the app ------------- */
.vdp-trigger{
  display:inline-grid; place-items:center; gap:0; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--text);
  border-radius:10px; height:34px; padding:0 10px; font:inherit; font-size:12px; font-weight:700;
  transition:transform .14s var(--vdp-ease), border-color .16s ease, background .16s ease;
}
.vdp-trigger:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--c1) 40%,rgba(255,255,255,.12)); }
.vdp-trigger .kbd{ font-family:ui-monospace,Menlo,monospace; opacity:.7; margin-left:6px; }
.vdp-cine-trigger{ font-size:15px; }

/* On phones the palette input must not zoom the viewport (iOS ≥16 needs 16px). */
@media (max-width:560px){ .vdp-pal-input{ font-size:16px; } .vdp-palette{ margin-top:8vh; } }

/* ---- Mobile FAB: the command palette's touch entry point --------------- */
/* Hidden on desktop (the ⌘K chip in the sidebar header covers it there);
   shown on narrow/touch layouts where that header chrome is hidden. Sits above
   the Radio/Discover dock, respecting safe-area insets. */
.vdp-fab{
  position:fixed; z-index:9997; display:none;
  right:16px; bottom:calc(84px + env(safe-area-inset-bottom,0px));
  width:54px; height:54px; border-radius:50%; place-items:center; cursor:pointer;
  border:0; color:#08101a; font-size:22px;
  background:linear-gradient(140deg,var(--c1),var(--c2));
  box-shadow:0 12px 34px color-mix(in srgb,var(--c2) 45%,transparent), 0 2px 0 rgba(255,255,255,.25) inset;
  transition:transform .16s var(--vdp-spring), filter .16s ease;
}
.vdp-fab:hover{ filter:brightness(1.05); } .vdp-fab:active{ transform:scale(.9); }
.vdp-fab.pulse{ animation:vdp-fab-pulse 3s ease-in-out 1s 2; }
@keyframes vdp-fab-pulse{ 0%,100%{ box-shadow:0 12px 34px color-mix(in srgb,var(--c2) 45%,transparent); } 50%{ box-shadow:0 12px 34px color-mix(in srgb,var(--c2) 45%,transparent), 0 0 0 10px color-mix(in srgb,var(--c1) 18%,transparent); } }
body.vdp-cinema-active .vdp-fab{ display:none !important; }
@media (max-width:820px){ .vdp-fab{ display:grid; } }
@media (prefers-reduced-motion: reduce){ .vdp-fab.pulse{ animation:none; } }