/* includes/player/web-player.css
   Desktop (≥900px) audio player system — v2 (Temmuz 2026).
   Mini transport bar + collection panel + 3-dot sheet menu + full player +
   sleep timer, all driving the shared engine (window.miniPlayer). Independent
   dark/light chrome; fonts inherit the page (no CDN). Reference: teslim/.
   The compact mobile .mini-player is hidden on web. */

:root{
  --wp-bar-bg:#121212; --wp-bar-fg:#fff; --wp-bar-muted:#9B9B9B;
  --wp-accent:#1F8A5B; --wp-orange:#F4581C; --wp-success:#1F8A5B;
  --wp-panel-bg:#fff; --wp-panel-fg:#191919; --wp-panel-muted:#8A8A8A;
  --wp-panel-line:#ECECEC; --wp-panel-soft:#F4F4F2; --wp-row-active:#EDF5EF;
  --wp-track:#E9E9E7;
  --wp-glass:rgba(22,22,22,.72); --wp-glass-brd:rgba(255,255,255,.13);
}

/* keyframes */
@keyframes wp-marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes wp-eq{0%,100%{height:3px}50%{height:13px}}
@keyframes wp-pop{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wp-sheet{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes wp-fade{0%{opacity:0}100%{opacity:1}}
@keyframes wp-panel{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* hidden by default; only the desktop interface shows these */
.web-player,.wp-panel-wrap,.wp-full,.wp-toast{ display:none; }
html[data-viewport="mobile"] .web-player,
html[data-viewport="mobile"] .wp-panel-wrap,
html[data-viewport="mobile"] .wp-full,
html[data-viewport="mobile"] .wp-toast{ display:none !important; }

@media (min-width: 900px){
  .mini-player{ display:none !important; }

  /* ============================ MINI BAR ============================ */
  .web-player{
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    display:none; align-items:center; gap:22px;
    height:88px; padding:0 20px;
    background:var(--wp-bar-bg); color:var(--wp-bar-fg);
    border-top:1px solid rgba(255,255,255,.06);
    box-shadow:0 -8px 30px -10px rgba(0,0,0,.6);
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
    font-family:inherit;
  }
  .web-player.is-visible{ display:flex; transform:translateY(0); }

  /* top single progress line: 3px, thickens to 9px + white thumb on hover/drag */
  .wp-progress{
    position:absolute; top:0; left:0; right:0; height:3px;
    border:none; padding:0; margin:0; background:rgba(255,255,255,.14);
    cursor:pointer; display:block; transition:height .12s;
  }
  .wp-progress:hover,.wp-progress.is-drag{ height:9px; }
  .wp-progress-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--wp-orange); }
  .wp-progress-knob{
    position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
    width:14px; height:14px; border-radius:50%; background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.4); opacity:0; transition:opacity .12s;
  }
  .wp-progress:hover .wp-progress-knob,.wp-progress.is-drag .wp-progress-knob{ opacity:1; }

  /* left cluster: cover + title/author (whole cluster opens full player) */
  .wp-left{ display:flex; align-items:center; gap:13px; min-width:0; flex:1 1 0; cursor:pointer; }
  .wp-cover{ width:46px; height:46px; border-radius:8px; object-fit:cover; background:#2a2a2a; flex:none; }
  .wp-info{ min-width:0; overflow:hidden; max-width:340px; }
  .wp-title-vp{ overflow:hidden; white-space:nowrap; }
  .wp-title{ font-size:15px; font-weight:700; white-space:nowrap; }
  /* marquee: JS adds .is-marquee and duplicates the text span */
  .wp-title.is-marquee{ display:inline-flex; animation:wp-marq linear infinite; }
  .wp-left:hover .wp-title.is-marquee{ animation-play-state:paused; }
  .wp-title.is-marquee .wp-marq-seg{ padding-right:40px; }
  .wp-sub{ font-size:12.5px; color:var(--wp-bar-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* center transport */
  .wp-center{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
  .wp-btn{
    border:none; background:none; cursor:pointer; color:var(--wp-bar-muted);
    display:flex; align-items:center; justify-content:center; padding:0;
    transition:color .15s, transform .15s; position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .wp-btn:hover{ color:#fff; transform:scale(1.12); }
  .wp-btn:active{ transform:scale(.94); }
  .wp-btn:focus-visible{ outline:2px solid var(--wp-accent); outline-offset:3px; border-radius:6px; }
  .wp-btn svg{ width:22px; height:22px; }
  .wp-skip{ width:26px; height:26px; }
  .wp-skip svg{ width:26px; height:26px; }
  .wp-skip-n{ position:absolute; left:0; right:0; top:55%; transform:translateY(-50%); text-align:center; font-size:8.5px; font-weight:700; pointer-events:none; }
  .wp-play{ width:52px; height:52px; border-radius:50%; background:#fff; color:#121212; }
  .wp-play:hover{ color:#121212; background:#fff; transform:scale(1.06); }
  .wp-play svg{ width:22px; height:22px; }
  .wp-time{ font-size:13px; color:var(--wp-bar-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

  /* right cluster: speed · sleep · volume · collection · full · | · X */
  .wp-right{ display:flex; align-items:center; gap:14px; flex:1 1 0; justify-content:flex-end; }
  .wp-speed{ font:700 13px/1 inherit; color:var(--wp-bar-muted); min-width:38px; padding:5px 6px; border-radius:7px; }
  .wp-speed:hover{ color:#fff; transform:none; background:rgba(255,255,255,.08); }
  .wp-sep{ width:1px; height:26px; background:rgba(255,255,255,.14); }

  /* volume: slider slides open on hover of the group */
  .wp-vol-group{ display:flex; align-items:center; }
  .wp-vol{
    -webkit-appearance:none; appearance:none; width:0; height:4px; border-radius:4px;
    background:rgba(255,255,255,.22); cursor:pointer; outline:none; opacity:0;
    margin-left:0; transition:width .4s cubic-bezier(.22,1,.36,1), opacity .3s, margin-left .3s;
  }
  .wp-vol-group:hover .wp-vol,.wp-vol.is-open{ width:84px; opacity:1; margin-left:10px; }
  .wp-vol::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; cursor:pointer; }
  .wp-vol::-moz-range-thumb{ width:13px; height:13px; border:none; border-radius:50%; background:#fff; cursor:pointer; }

  /* collection button active dot */
  .wp-coll{ position:relative; }
  .wp-coll.is-active{ color:#fff; }
  .wp-coll.is-active::after{
    content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%; background:var(--wp-orange);
  }

  /* sleep countdown chip (replaces the moon icon when a timer runs) */
  .wp-sleep.is-active{
    color:var(--wp-orange); border:1.5px solid var(--wp-orange); border-radius:999px;
    padding:4px 9px; font:700 12px/1 inherit; font-variant-numeric:tabular-nums;
  }
  .wp-sleep.is-active:hover{ transform:none; }
  .wp-sleep.is-active svg{ display:none; }

  /* ======================= COLLECTION PANEL ======================= */
  .wp-panel-wrap{ position:fixed; inset:0; z-index:210; display:none; }
  .wp-panel-wrap.is-open{ display:block; }
  .wp-panel-scrim{ position:absolute; inset:0; background:rgba(10,10,10,.12); }
  .wp-panel{
    position:absolute; right:20px; bottom:102px;
    width:clamp(430px,32vw,540px);
    height:min(clamp(480px,62vh,640px), calc(100vh - 140px));
    background:var(--wp-panel-bg); color:var(--wp-panel-fg);
    border-radius:22px; box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
    display:flex; flex-direction:column; overflow:hidden;
    transform-origin:bottom right; animation:wp-panel .34s cubic-bezier(.22,1,.36,1);
  }
  .wp-panel-x{
    position:absolute; top:14px; right:14px; z-index:5; width:32px; height:32px;
    border:none; border-radius:50%; background:var(--wp-panel-soft); color:var(--wp-panel-muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .wp-panel-x:hover{ background:var(--wp-panel-line); }
  .wp-tabs{ display:flex; justify-content:center; gap:34px; padding:22px 20px 0; }
  .wp-tab{
    border:none; background:none; cursor:pointer; padding:0 2px 12px;
    font:700 16px/1 inherit; color:var(--wp-panel-muted); position:relative;
  }
  .wp-tab.is-on{ color:var(--wp-panel-fg); }
  .wp-tab.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:var(--wp-accent); }
  /* single-mode centred heading (no tab underline) */
  .wp-tabs.is-single{ justify-content:center; }
  .wp-tabs.is-single .wp-tab{ cursor:default; color:var(--wp-panel-fg); }
  .wp-tabs.is-single .wp-tab.is-on::after{ display:none; }

  .wp-search{ padding:14px 20px 6px; position:relative; }
  .wp-search svg{ position:absolute; left:34px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--wp-panel-muted); }
  .wp-search input{
    width:100%; border:1px solid var(--wp-panel-line); background:var(--wp-panel-soft);
    border-radius:12px; padding:11px 14px 11px 40px; font:500 14px/1 inherit; color:var(--wp-panel-fg); outline:none;
  }
  .wp-search input:focus{ border-color:var(--wp-accent); }

  .wp-rows{ flex:1; overflow-y:auto; padding:6px 12px 14px; }
  .wp-rows::-webkit-scrollbar{ width:9px; }
  .wp-rows::-webkit-scrollbar-thumb{ background:var(--wp-panel-line); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
  .wp-row{
    display:flex; align-items:center; gap:12px; padding:10px; border-radius:14px;
    cursor:default; position:relative;
  }
  .wp-row:hover{ background:var(--wp-panel-soft); }
  .wp-row.is-playing{ background:var(--wp-row-active); }
  .wp-row-cover{ width:48px; height:66px; border-radius:6px; object-fit:cover; background:#eee; flex:none; }
  .wp-row-main{ flex:1; min-width:0; }
  .wp-row-badge{ display:flex; align-items:center; gap:6px; font:800 10.5px/1 inherit; letter-spacing:.06em; color:var(--wp-accent); margin-bottom:4px; }
  .wp-row-title{ font:700 14px/1.2 inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wp-row-author{ font:500 12.5px/1 inherit; color:var(--wp-panel-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wp-row-prog{ height:4px; border-radius:4px; background:var(--wp-track); margin-top:8px; overflow:hidden; }
  .wp-row-prog i{ display:block; height:100%; background:var(--wp-accent); border-radius:4px; }
  .wp-row-meta{ font:500 11.5px/1 inherit; color:var(--wp-panel-muted); margin-top:6px; }
  .wp-row-meta.is-done{ color:var(--wp-success); font-weight:700; }
  /* EQ bars for the currently-playing row */
  .wp-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
  .wp-eq i{ width:3px; background:var(--wp-accent); border-radius:2px; animation:wp-eq .9s ease-in-out infinite; }
  .wp-eq i:nth-child(2){ animation-delay:.2s } .wp-eq i:nth-child(3){ animation-delay:.4s }
  .wp-row-act{
    width:44px; height:44px; border-radius:50%; border:1.5px solid var(--wp-panel-line);
    background:#fff; color:var(--wp-accent); display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex:none;
  }
  .wp-row-act:hover{ background:var(--wp-accent); color:#fff; border-color:var(--wp-accent); }
  .wp-row-act svg{ width:20px; height:20px; }
  .wp-row-more{ border:none; background:none; cursor:pointer; color:var(--wp-panel-muted); padding:6px; border-radius:8px; flex:none; }
  .wp-row-more:hover{ background:var(--wp-panel-soft); color:var(--wp-panel-fg); }
  .wp-rows-empty{ text-align:center; color:var(--wp-panel-muted); font:500 14px/1.5 inherit; padding:40px 20px; }

  /* ==================== 3-DOT SHEET MENU (in panel) ==================== */
  /* blurred backdrop over the panel; clicking it closes the sheet */
  .wp-sheet-scrim{
    position:absolute; inset:0; z-index:7; background:rgba(255,255,255,.35);
    backdrop-filter:blur(6px) saturate(1.1); -webkit-backdrop-filter:blur(6px) saturate(1.1);
    animation:wp-fade .2s ease;
  }
  .wp-sheet{
    position:absolute; left:0; right:0; bottom:0; z-index:8;
    background:var(--wp-panel-bg); border-radius:20px 20px 22px 22px;
    box-shadow:0 -20px 50px -18px rgba(0,0,0,.35);
    animation:wp-sheet .28s cubic-bezier(.22,1,.36,1); max-height:100%; overflow-y:auto;
  }
  .wp-sheet-head{ display:flex; align-items:center; gap:12px; padding:18px 18px 14px; border-bottom:1px solid var(--wp-panel-line); }
  .wp-sheet-cover{ width:44px; height:60px; border-radius:6px; object-fit:cover; background:#eee; flex:none; }
  .wp-sheet-back{ border:none; background:var(--wp-panel-soft); border-radius:50%; width:34px; height:34px; cursor:pointer; color:var(--wp-panel-fg); flex:none; display:flex; align-items:center; justify-content:center; }
  .wp-sheet-tt{ font:700 15px/1.25 inherit; }
  .wp-sheet-sub{ font:500 12.5px/1.3 inherit; color:var(--wp-panel-muted); margin-top:2px; }
  .wp-sheet-list{ padding:8px; }
  .wp-mi{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    border:none; background:none; cursor:pointer; padding:14px; border-radius:12px;
    font:600 14.5px/1 inherit; color:var(--wp-panel-fg);
  }
  .wp-mi:hover{ background:var(--wp-panel-soft); }
  .wp-mi .wp-mi-ic{ width:22px; height:22px; color:var(--wp-panel-muted); flex:none; display:flex; }
  .wp-mi.is-on{ color:var(--wp-success); } .wp-mi.is-on .wp-mi-ic{ color:var(--wp-success); }
  .wp-mi-chev{ margin-left:auto; color:var(--wp-panel-muted); }
  .wp-mi-sep{ height:1px; background:var(--wp-panel-line); margin:6px 14px; }
  /* download progress ring */
  .wp-dl-ring{ transform:rotate(-90deg); }
  .wp-dl-ring circle{ fill:none; stroke-width:2.4; }
  .wp-dl-ring .bg{ stroke:var(--wp-panel-line); }
  .wp-dl-ring .fg{ stroke:var(--wp-success); stroke-linecap:round; transition:stroke-dashoffset .2s; }
  .wp-report-thanks{ text-align:center; padding:44px 24px; color:var(--wp-success); font:700 16px/1.5 inherit; }
  .wp-report-thanks svg{ width:46px; height:46px; margin-bottom:10px; }

  /* ============================ FULL PLAYER ============================ */
  .wp-full{
    position:fixed; inset:0; z-index:300; display:none;
    color:#fff; font-family:inherit; animation:wp-fade .25s ease;
    background:linear-gradient(155deg, var(--wp-full-tint,#3a2b28) 0%, rgba(12,9,8,.94) 58%, rgba(8,6,5,.99) 100%);
  }
  .wp-full.is-open{ display:block; }
  .wp-full-top{ position:absolute; top:0; left:0; right:0; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
  .wp-full-title-now{ position:absolute; left:50%; transform:translateX(-50%); font:800 12px/1 inherit; letter-spacing:.18em; color:rgba(255,255,255,.7); }
  .wp-full-ico{ width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .wp-full-ico:hover{ background:rgba(255,255,255,.18); }
  .wp-full-body{ position:absolute; inset:78px 0 0; display:flex; align-items:center; justify-content:center; gap:clamp(40px,6vw,90px); padding:0 clamp(40px,7vw,120px); }
  .wp-full-cover{ width:clamp(200px,20vw,300px); aspect-ratio:2/3; border-radius:10px; object-fit:cover; box-shadow:0 30px 70px -20px rgba(0,0,0,.7); background:#2a2a2a; flex:none; }
  .wp-full-main{ flex:1; min-width:0; max-width:720px; }
  .wp-full-title{ font:800 clamp(30px,3.4vw,46px)/1.12 inherit; margin:0; cursor:pointer; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .wp-full-title:hover{ opacity:.85; }
  .wp-full-title-ico{ width:.52em; height:.52em; margin-left:.32em; vertical-align:baseline; color:rgba(255,255,255,.7); flex:none; }
  .wp-full-title:hover .wp-full-title-ico{ color:#fff; }
  .wp-full-track{ margin-top:10px; font:600 clamp(14px,1.3vw,17px)/1.3 inherit; color:rgba(255,255,255,.62); }
  .wp-full-author{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font:600 clamp(16px,1.5vw,20px)/1 inherit; color:rgba(255,255,255,.82); cursor:pointer; }
  .wp-full-author:hover{ color:#fff; }
  .wp-full-author svg{ width:15px; height:15px; }
  .wp-full-prog{ display:flex; align-items:center; gap:14px; margin-top:34px; }
  .wp-full-prog .t{ font:600 13px/1 inherit; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; min-width:38px; }
  .wp-full-bar{ flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.2); position:relative; cursor:pointer; }
  .wp-full-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:5px; background:#fff; }
  .wp-full-bar-knob{ position:absolute; top:50%; left:0; width:15px; height:15px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 1px 5px rgba(0,0,0,.5); }
  .wp-full-controls{ display:flex; align-items:center; justify-content:center; gap:clamp(20px,3vw,40px); margin-top:30px; }
  .wp-fc{ border:none; background:none; color:rgba(255,255,255,.85); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s,color .15s; position:relative; }
  .wp-fc:hover{ color:#fff; transform:scale(1.1); }
  .wp-fc svg{ width:28px; height:28px; }
  .wp-fc-skip .wp-skip-n{ color:currentColor; }
  .wp-fc-play{ width:74px; height:74px; border-radius:50%; background:#fff; color:#151515; }
  .wp-fc-play:hover{ background:#fff; color:#151515; transform:scale(1.05); }
  .wp-fc-play svg{ width:30px; height:30px; }
  .wp-full-pills{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; }
  .wp-pill{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; border-radius:999px; padding:9px 15px; font:700 13px/1 inherit; cursor:pointer; }
  .wp-pill:hover{ background:rgba(255,255,255,.13); }
  .wp-pill.is-active{ border-color:var(--wp-orange); color:#fff; }
  .wp-pill svg{ width:17px; height:17px; }
  .wp-pill-vol{ width:90px; }
  .wp-pill-vol input{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:rgba(255,255,255,.25); outline:none; }
  .wp-pill-vol input::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; cursor:pointer; }

  /* sleep duration strip (centred under the pills, dark glass) */
  .wp-sleep-strip{
    position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
    display:none; align-items:center; gap:6px; padding:8px;
    background:var(--wp-glass); border:1px solid var(--wp-glass-brd); border-radius:999px;
    backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
  }
  .wp-sleep-strip.is-open{ display:flex; }
  .wp-sleep-opt{ border:none; background:none; color:rgba(255,255,255,.8); cursor:pointer; padding:8px 14px; border-radius:999px; font:700 13px/1 inherit; white-space:nowrap; }
  .wp-sleep-opt:hover{ color:#fff; background:rgba(255,255,255,.1); }
  .wp-sleep-opt.is-on{ background:#fff; color:#151515; }

  /* full-player dark-glass 3-dot menu */
  .wp-full-menu{
    position:absolute; top:70px; right:22px; z-index:6; width:290px;
    background:var(--wp-glass); border:1px solid var(--wp-glass-brd); border-radius:18px;
    backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
    padding:8px; display:none; animation:wp-pop .2s ease; box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
  }
  .wp-full-menu.is-open{ display:block; }
  .wp-full-menu .wp-mi{ color:#fff; }
  .wp-full-menu .wp-mi:hover{ background:rgba(255,255,255,.08); }
  .wp-full-menu .wp-mi .wp-mi-ic{ color:rgba(255,255,255,.7); }
  .wp-full-menu .wp-mi.is-on,.wp-full-menu .wp-mi.is-on .wp-mi-ic{ color:#2DBA75; }
  .wp-full-menu .wp-mi-sep{ background:rgba(255,255,255,.12); }
  .wp-full-menu .wp-mi-chev{ color:rgba(255,255,255,.6); }
  .wp-full-menu .wp-report-thanks{ color:#2DBA75; }

  /* ============================ SLEEP TOAST ============================ */
  .wp-toast{
    position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(10px);
    z-index:320; display:none; align-items:center; gap:16px; padding:14px 18px;
    background:var(--wp-glass); border:1px solid var(--wp-glass-brd); border-radius:16px;
    backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
    color:#fff; font:600 14px/1.35 inherit; box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
    opacity:0; transition:opacity .3s, transform .3s;
  }
  .wp-toast.is-open{ display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
  .wp-toast b{ display:block; font-weight:700; }
  .wp-toast small{ color:rgba(255,255,255,.7); font-weight:500; }
  .wp-toast-btn{ border:none; background:#fff; color:#151515; border-radius:999px; padding:9px 16px; font:700 13px/1 inherit; cursor:pointer; white-space:nowrap; }
}