/* EKHO Sonic Chill — the persistent player dock (2 Oct 2026, build_player.py).
   Same tokens as site.css: true black, cyan -> violet, keycap corners. */
body.has-dock{padding-bottom:var(--dock-h,0px)}
body.has-dock .eschint{bottom:calc(var(--dock-h,0px) + 14px)}

.escdock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(5,4,8,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -10px 40px rgba(0,0,0,.6);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom))}
.escdock[hidden]{display:none}
.escdock::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--grad);opacity:.55}
.escdock.on::before{opacity:1;box-shadow:0 0 14px rgba(63,215,255,.6)}
.dk-frame{height:60px;overflow:hidden;border-radius:12px;transition:height .25s ease,margin .25s ease;margin-bottom:8px;background:#0b0913}
.dk-frame iframe{display:block;width:100%;height:60px;border:0}
.escdock.mini .dk-frame{height:0;margin-bottom:0}
.dk-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px}
.dk-ep{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:var(--ink2);white-space:nowrap}
.dk-ep .kbd{padding:4px 8px;font-size:10.5px}
.dk-ep:hover .kbd,.dk-ep:focus-visible .kbd{border-color:rgba(63,215,255,.7)}
.dk-now{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.05em;color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-ctl,.dk-win{display:flex;gap:6px;align-items:center}
.dk-ctl button,.dk-win button{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:38px;min-width:42px;padding:0 9px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:inset 0 -2px 0 rgba(180,76,255,.25);color:var(--cyan);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:11px;transition:border-color .15s,transform .1s}
.dk-ctl button:hover,.dk-ctl button:focus-visible,.dk-win button:hover,.dk-win button:focus-visible{border-color:rgba(63,215,255,.6);outline:none}
.dk-ctl button:active,.dk-win button:active{transform:translateY(1px)}
.dk-ctl svg,.dk-win svg{width:17px;height:17px;fill:currentColor}
.dk-ctl svg.ln,.dk-win svg.ln{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dk-ctl span{color:var(--ink2)}
.dk-ctl .pp{min-width:56px;background:var(--grad);border-color:transparent;color:#07030f;box-shadow:0 0 16px rgba(63,215,255,.25)}
.dk-win button{color:var(--muted);min-width:38px}
.escdock.mini [data-dk="min"] svg{transform:rotate(180deg)}

/* the page's own player spot: the music lives in the dock, so this just says so */
.escslot{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--panel2))}
.escslot .kbd{flex:none}
.escslot .slotmsg{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.04em;color:var(--ink2);line-height:1.5}

html.esc-loading body{cursor:progress}
html.esc-loading .escdock::before{animation:dkload 1s ease-in-out infinite}
@keyframes dkload{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dk-frame{transition:none}html.esc-loading .escdock::before{animation:none}}

@media (max-width:900px){
  .escdock{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .dk-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px 10px}
  .dk-ctl{grid-column:1/-1;grid-row:2;justify-content:space-between}
  .dk-ctl button{flex:1;height:44px}
  .dk-ctl .pp{flex:1.4}
  .dk-frame{margin-bottom:8px}
}