/* =============================================================
   ATELIER — shell + music dock
   ============================================================= */

html, body.shell-host{ height:100%; margin:0; overflow:hidden; background:var(--bg); }
body.shell-host::before, body.shell-host::after{ display:none; }

#site{
  position:fixed; inset:0;
  width:100%; height:100%;
  border:0; display:block;
  background:var(--bg);
}

/* ---------- dock ---------- */
.dock{
  position:fixed; left:16px; bottom:16px; z-index:10;
  font-family:var(--sans); color:var(--ink);
}

/* pill (nothing open) */
.dock-pill{
  display:none;
  align-items:center; gap:8px;
  padding:9px 14px 9px 12px;
  border:1px solid var(--line-strong); border-radius:999px;
  background:rgba(12,10,7,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--gold-bright);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.dock-pill:hover{ border-color:var(--gold); transform:translateY(-1px); }
.dock-pill svg{ width:15px; height:15px; }
.dock[data-state="idle"] .dock-pill{ display:inline-flex; }

/* card */
.dock-card{
  width:360px; max-width:calc(100vw - 32px);
  border:1px solid var(--line-strong); border-radius:6px;
  background:rgba(12,10,7,.94);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  overflow:hidden;
}
/* idle: the card is gone, but kept out of layout rather than removed */
.dock[data-state="idle"] .dock-card{ display:none; }

.dock-head{ display:flex; align-items:center; gap:8px; padding:10px 8px 10px 14px; }
.dock-now{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.dock[data-state="min"] .dock-now{ cursor:pointer; }
.dock-eq{ display:none; width:12px; flex:none; }
.dock.playing .dock-eq{ display:inline-flex; }
.dock-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.dock-title{
  font-family:var(--serif); font-size:19px; font-weight:400;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dock-meta{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.dock-btns{ display:flex; gap:2px; flex:none; }
.dbtn{
  width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:4px; background:none;
  color:var(--ink-soft); cursor:pointer;
}
.dbtn svg{ width:14px; height:14px; }
.dbtn:hover{ color:var(--gold-bright); background:rgba(201,162,92,.10); }
.dbtn[aria-expanded="true"]{ color:var(--gold-bright); background:rgba(201,162,92,.14); }
.dbtn:focus-visible, .dock-pill:focus-visible, .dl-row:focus-visible{ outline:1px solid var(--gold); outline-offset:1px; }
#dock-prev, #dock-next{ display:none; }
.dock.playing #dock-prev, .dock.playing #dock-next{ display:grid; }
.dock[data-state="min"] #dock-min svg{ transform:rotate(180deg); }

/* song list */
.dock-list{
  max-height:min(52vh, 380px); overflow-y:auto; overscroll-behavior:contain;
  border-top:1px solid var(--line);
  padding:4px 0 8px;
}
.dock-list[hidden]{ display:none; }
.dl-head{
  margin:12px 14px 4px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.dl-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  width:100%; padding:7px 14px;
  border:0; background:none; text-align:left; cursor:pointer;
  color:var(--ink); font:inherit;
}
.dl-row:hover{ background:rgba(201,162,92,.08); }
.dl-row.on{ background:rgba(201,162,92,.13); box-shadow:inset 2px 0 0 var(--gold); }
.dl-t{ font-size:14px; line-height:1.3; }
.dl-t em{ font-style:normal; color:var(--ink-mute); font-size:12px; }
.dl-s{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }

/* status panel — the song itself plays in Suno's pop-out window */
.dock-embed{ border-top:1px solid var(--line); }
.dock-embed:empty{ display:none; }
.dock[data-state="min"] .dock-embed,
.dock.listing .dock-embed{ display:none; }
.dock-pop{ padding:12px 14px 14px; }
.dock-pop p{ margin:0 0 10px; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.dock-pop a{ color:var(--gold-bright); }
.dock-pop-btns{ display:flex; gap:8px; }
.dock-link{
  display:inline-flex; align-items:center;
  padding:6px 10px; border:1px solid var(--line-strong); border-radius:4px;
  background:none; color:var(--gold-bright); cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
.dock-link:hover{ border-color:var(--gold); background:rgba(201,162,92,.08); }
.dock[data-state="min"] .dock-card{ width:300px; }

@media (max-width:700px){
  .dock{ left:8px; right:auto; bottom:8px; }
  .dock-card{ width:calc(100vw - 16px); max-width:none; }
  .dock[data-state="min"] .dock-card{ width:min(300px, calc(100vw - 16px)); }
}