/* =========================
   Musikwunsch – App Styles
   ========================= */

:root{
  --bg:#0b0c10; --card:#12141a; --text:#f2f3f5; --muted:#99a1b3; --brand:#1db954; --radius:14px;
  --player-h:0px; --brand-h:0px; --footer-h:0px;
  --header-offset:0px;
  --search-h:72px;
  --suggest-start:0px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; height:100dvh;
  background:var(--bg); color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
body{ overflow:hidden; overscroll-behavior:none; }
body.alert-visible{ --header-offset:54px; }

/* ========== Layout Frame ========== */
.wrap{
  max-width:720px; margin:0 auto;
  padding:clamp(16px,4vw,28px);
  padding-bottom:calc(var(--player-h) + var(--brand-h) + 14px + env(safe-area-inset-bottom));
}

.header{
  display:none; position:sticky; top:0; z-index:60;
  background:rgba(18,20,26,.9);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid #232734;
}
body.alert-visible .header{ display:block; }
.header .inner{
  max-width:720px; margin:0 auto; padding:10px 14px;
  display:flex; align-items:center; gap:10px; justify-content:center;
}

.ampel{ width:14px; height:14px; border-radius:50%; background:#e74c3c; box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 8px rgba(0,0,0,.25); }
.ampel.green{ background:#2ecc71; }
.ampel.orange{ background:#f39c12; }
.ampel.red{ background:#e74c3c; }

.status-text{ font-size:12px; color:var(--muted); }
.status-text.ok{ color:#b7f5c7; }
.status-text.warn{ color:#ffd08a; text-align:center; }
.status-text.err{ color:#ffb1a1; }
.status-text a.help-link{ color:#9db3ff; text-decoration:underline; font-weight:600; }
.status-text a.help-link:hover{ opacity:1; }

/* ========== Card & Headline ========== */
.card{
  background:var(--card); border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  padding:16px; margin-top:0;
}
h1{ font-size:1.25rem; margin:0 0 15px; text-align:center; }

/* Inline-Status */
.inline-status{ display:flex; align-items:center; gap:8px; margin:0 0 20px; justify-content:flex-start; }
.inline-status .ampel{ width:12px; height:12px; }
.inline-status .label{ font-size:.9rem; color:var(--muted); }

/* ========== Search Area ========== */
.search{
  position:sticky; top:var(--header-offset);
  background:var(--card); padding-bottom:0; z-index:120;
}
.input{
  display:flex; gap:10px; flex-direction:column; position:relative;
}
.input input{
  flex:1; border:1px solid #232734; background:#0f1116; color:#fff;
  border-radius:12px; padding:14px 14px; font-size:16px; outline:none;
  -webkit-tap-highlight-color: transparent;
}
.input input:focus{ box-shadow:0 0 0 2px rgba(29,185,84,.35); }

/* Clear (X) im Suchfeld – brandgrün, ohne Farbwechsel */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  width:18px; height:18px; margin-right:6px; cursor:pointer;
  background-color:var(--brand);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A 1 1 0 1 0 5.7 7.1L10.6 12l-4.9 4.9a 1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a 1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a 1 1 0 0 0 0-1.4Z"/></svg>');
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:100% 100%;
  transition: transform .08s ease;
}
input[type="search"]::-webkit-search-cancel-button:hover,
input[type="search"]::-webkit-search-cancel-button:active{
  background-color:var(--brand);
  transform: scale(0.95);
}

/* Buttons */
.btn{
  border-radius:12px; padding:12px 16px; font-weight:700;
  transition:transform .06s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--outline{ background:transparent; border:1px solid #2a824a; color:#9de3b3; }
.btn--outline:hover{ filter:brightness(1.05); background:#0f1511; }
.btn.loading{ pointer-events:none; opacity:.9; }

/* Spinner (weiß/grün) im Button */
.btn.loading::after{
  content:""; display:inline-block; width:18px; height:18px; margin-left:8px;
  border:2px solid #ffffff; border-top-color:var(--brand);
  border-radius:50%; animation:spin .8s linear infinite; vertical-align:-3px;
}

/* ========== Suggest-Dropdown ========== */
.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#0f1116; border:1px solid #232734; border-radius:12px;
  overflow:auto; display:none; box-shadow:0 10px 20px rgba(0,0,0,.35); z-index:130;
  max-height:calc(100dvh - var(--suggest-start) - var(--footer-h) - env(safe-area-inset-bottom) - 6px);
  padding-bottom:0; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; touch-action:pan-y;
}
.suggest.show{ display:block; }

/* Sticky-Kopfzeile „Vorschläge“ */
.sug-head{
  position:sticky; top:0; z-index:1;
  background:var(--brand);
  padding:6px 10px;
  font-size:12px; color:#ffffff; letter-spacing:.02em;
}

/* Suggest-Items */
.sug-item{
  display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center;
  padding:8px 10px; touch-action:pan-y; -webkit-tap-highlight-color:transparent;
}
.sug-item + .sug-item{ border-top:1px solid #1a1f2b; }
.sug-cover{ width:40px; height:40px; border-radius:8px; object-fit:cover; background:#1d2130; }
/* Der mittlere Text-Block darf schrumpfen -> Ellipsis funktioniert */
.sug-item > div{ min-width:0; }
.sug-title{
  font-size:.95rem; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* 1 Zeile */
}
.sug-artist{ font-size:.82rem; color:#99a1b3; }
.sug-wish{
  background:transparent; border:1px solid #2a824a; border-radius:10px;
  padding:8px 12px; color:#9de3b3; cursor:pointer; touch-action:pan-y;
}
.sug-item.active, .sug-item:hover{ background:#121826; }

@media (max-width:599px){
  .sug-item{ grid-template-columns:40px 1fr; }
  .sug-wish{ display:none; }
}

/* Während Suggest offen: Panel ausblenden */
body.has-suggest #panel{ display:none !important; }

/* ========== Cooldown-Balken ========== */
.coolbar{ margin-top:20px; min-height:26px; text-align:center; }
.coolbar .pill{
  display:inline-block; border:1px solid #2a824a; border-radius:10px; padding:6px 10px; font-size:12px;
}
.coolbar--free .pill{ border-color:#1f3b2a; background:#0f1511; color:#c7f5d4; }
.coolbar--wait .pill{ border-color:#3b1a1f; background:#19130e; color:#ffd08a; }

/* ========== Results Panel ========== */
.results-panel{
  margin-top:8px; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  max-height:none; padding-bottom:0;
}
.results-panel.scroll{
  max-height:calc(100dvh - var(--footer-h) - var(--header-offset) - var(--search-h) - 16px);
  padding-bottom:calc(var(--footer-h) + 8px);
}

.list{ display:grid; gap:10px; }

.item{
  display:grid; gap:10px; align-items:center;
  background:#0f1116; border:1px solid #232734; border-radius:12px; padding:8px;
  grid-template-columns:56px 1fr;
  grid-template-areas:"cover meta" "button button";
}
.cover{ grid-area:cover; width:56px; height:56px; border-radius:10px; object-fit:cover; background:#1d2130; }
.meta{ grid-area:meta; display:flex; flex-direction:column; gap:4px; }
.title{ font-size:.98rem; line-height:1.2; }
.artist{ font-size:.85rem; color:#99a1b3; }

.wish{
  grid-area:button; background:var(--brand); border:none; color:#06270f;
  border-radius:12px; padding:10px 12px; font-weight:700;
  justify-self:stretch; transition:filter .2s ease, transform .06s ease;
}
.wish:hover{ filter:brightness(1.05); }
.wish:active{ transform:translateY(1px); }
.wish.loading{ pointer-events:none; opacity:.95; position:relative; }

/* Spinner auf Wunsch-Buttons – gleiches Weiß/Grün */
.wish.loading::after{
  content:""; display:inline-block; width:14px; height:14px; margin-left:8px;
  border:2px solid #ffffff; border-top-color:var(--brand);
  border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px;
}

.wish.error{ background:#e74c3c; color:#fff; }
.wish.success{ background:#1db954; color:#06270f; }
.wish.blocked{ filter:grayscale(.25) brightness(.9); opacity:.9; cursor:not-allowed; }

@keyframes shake{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-2px) }
  50%{ transform:translateX(2px) }
  75%{ transform:translateX(-2px) }
}
.wish.shake{ animation:shake .25s linear 1; }

/* Desktop-Layout für Result-Items */
@media (min-width:600px){
  .item{ grid-template-columns:56px 1fr auto; grid-template-areas:"cover meta button"; }
  .wish{ justify-self:auto; width:auto; }
}

/* Mehr laden */
.load-more{
  display:block; width:100%; max-width:420px; margin:12px auto 0;
  padding:12px 14px; border-radius:14px; border:1px solid #2a824a;
  background:transparent; color:#9de3b3; font-weight:700; cursor:pointer;
}
.load-more:hover{ filter:brightness(1.05); background:#0f1511; }
.load-more[hidden]{ display:none !important; }
.load-more:disabled{ opacity:.75; cursor:default; }

/* Toast */
.toast{
  position:fixed; text-align:center; width:85%;
  left:50%; top:75%; transform:translate(-50%,-50%);
  border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:.25s; z-index:140;
  padding:10px 14px; backdrop-filter:saturate(120%) blur(6px);
  border:1px solid transparent; font-size:14px;
}
.toast--ok{ background:rgba(12,20,16,.92); border-color:#1f3b2a; color:#c7f5d4; }
.toast--err{ background:rgba(28,12,12,.92); border-color:#3b1a1f; color:#ffd3cf; }
.toast.show{ opacity:1; pointer-events:auto; }

/* Diverse */
.muted{ color:#99a1b3; text-align:center; margin:15px 0; }
.muted:empty{ display:none; }

/* (Legacy) separater Loader unter dem Button – dauerhaft ausblenden */
.loader{ display:none !important; }

/* Scrim für Suggest */
.scrim{ position:fixed; inset:0; z-index:110; background:transparent; display:none; }
body.has-suggest .scrim{ display:block; }

/* Player-Footer */
.playerfoot{
  position:fixed; left:0; right:0; bottom:var(--brand-h); z-index:75;
  background:rgba(18,20,26,.95); backdrop-filter:saturate(120%) blur(6px);
  border-top:1px solid #232734; padding:10px 14px 12px; margin-bottom:5px;
}
.playerfoot .inner{ max-width:720px; margin:0 auto; }
.now{ display:none; align-items:center; gap:12px; margin:0; }
.now.show{ display:flex; }
.now .cover{ width:44px; height:44px; border-radius:8px; object-fit:cover; background:#1d2130; }
.now .meta{ flex:1; min-width:0; }
.now .title{ font-size:.94rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now .artist{ font-size:.8rem; color:#9aa3b5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.now .progress{ height:6px; background:#1a1f2b; border-radius:999px; overflow:hidden; margin-top:8px; }
.now .bar{ display:block; height:100%; background:var(--brand); width:0%; }
.now-actions{ display:flex; gap:8px; margin-left:8px; }
.qa{ border:1px solid #2a824a; background:#0f1511; color:#bff5cf; border-radius:10px; padding:8px 10px; font-weight:600; }
.qa:active{ transform:translateY(1px); }

/* Brand-Footer */
.brandfoot{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:linear-gradient(90deg,#0f1116,#12141a);
  border-top:1px solid #232734;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
}
.brandfoot .inner{ max-width:720px; margin:0 auto; display:flex; justify-content:center; }
.brand-link{ font-size:11px; color:#9db3ff; text-decoration:none; opacity:.95; }
.brand-link strong{ font-weight:700; }
.brand-link:hover{ opacity:1; text-decoration:underline; }

/* Scrollbar ausblenden in Suggest & Results */
.suggest, .results-panel{ scrollbar-width:none; -ms-overflow-style:none; }
.suggest::-webkit-scrollbar, .results-panel::-webkit-scrollbar{ width:0; height:0; }

/* Spinner Keyframes (global) */
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================
   prefers-reduced-motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  /* weniger/keine Übergänge */
  .btn, .wish, .toast{ transition:none; }
  /* Spinner langsamer statt „wild“ */
  .btn.loading::after,
  .wish.loading::after{ animation:spin 1.6s linear infinite; }
  /* Shake-Effekt aus */
  .wish.shake{ animation:none !important; }
}