/* Desktop sticky & mobile fullscreen */
#d7aa-sticky-player.glass{
  position: fixed; left: 16px; right: 16px; bottom: 16px; padding: 12px; display:none; z-index:99999;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
@media (max-width: 768px){
  #d7aa-sticky-player.glass{ left:0; right:0; bottom:0; top:0; padding:20px; }
}
#d7aa-sticky-player .d7aa-player-inner{
  max-width: 900px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
  border: 1px solid rgba(255,255,255,0.35); border-radius: 18px;
  box-shadow: 0 16px 48px rgba(2,6,23,0.45);
  display:flex; align-items:center; justify-content:center; gap: var(--d7aa-gap); padding: 14px;
}
@media (max-width: 768px){
  #d7aa-sticky-player .d7aa-player-inner{ flex-direction:column; text-align:center; }
}
#d7aa-sticky-player .d7aa-art{ width:var(--d7aa-art-size); height:var(--d7aa-art-size); border-radius:14px; overflow:hidden; flex:0 0 auto; }
#d7aa-sticky-player .d7aa-art img{ width:100%; height:100%; object-fit:cover; display:block; }
#d7aa-sticky-player .d7aa-main{ flex:1; display:flex; flex-direction:column; align-items:center; gap: var(--d7aa-gap); }
#d7aa-sticky-player .d7aa-info{ width:100%; display:flex; align-items:center; justify-content:space-between; max-width:720px; }
#d7aa-sticky-player .d7aa-title{ font-weight:800; color:var(--d7aa-title-color); font-size:var(--d7aa-title-size); }
#d7aa-sticky-player .d7aa-time{ font-size:12px; opacity:.85; color:#0b1220; }
#d7aa-sticky-player .d7aa-preload{ width:100%; max-width:720px; display:flex; flex-direction:column; gap:6px; }
#d7aa-sticky-player .d7aa-preload-text{ font-size:12px; opacity:.85; }
#d7aa-sticky-player .d7aa-preload-track{ width:100%; height:8px; background:rgba(15,18,35,.15); border-radius:10px; overflow:hidden; }
#d7aa-sticky-player .d7aa-preload-fill{ width:0%; height:100%; background:linear-gradient(90deg,#a78bfa,#22d3ee); }

#d7aa-sticky-player .d7aa-controls{ display:flex; gap: var(--d7aa-gap); flex-wrap:wrap; align-items:center; justify-content:center; }
#d7aa-sticky-player .d7aa-controls button{
  background: linear-gradient(180deg,#111827,#0b1220); color:#fff; border:0; border-radius:14px; padding:12px 14px;
  font-weight:800; cursor:pointer; box-shadow: 0 10px 22px rgba(15,18,35,.45); font-size:var(--d7aa-control-size); transition: transform .06s ease;
}
#d7aa-sticky-player .d7aa-controls .d7aa-playtoggle.playing{
  background:linear-gradient(180deg,#0b1220,#111827); box-shadow: 0 10px 22px rgba(16,185,129,.45);
}
#d7aa-sticky-player .d7aa-controls button:active{ transform: scale(.97); }

.d7aa-progress{ width:100%; max-width:720px; height:var(--d7aa-progress-h); background:rgba(15,18,35,.15); border-radius:10px; overflow:hidden; position:relative; cursor:pointer; }
.d7aa-progress-bar{ width:0%; height:100%; background:linear-gradient(90deg,#22d3ee,#10b981); }

/* Card area: CTA + status */
.d7aa-cta-status{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.d7aa-cta-status .btn-cta{
  background: var(--d7aa-cta-bg); color: var(--d7aa-cta-text); border-radius: var(--d7aa-cta-radius);
  padding: 8px 12px; text-decoration:none; font-weight:800; box-shadow: 0 10px 22px rgba(14,165,233,.35);
}
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; }
.badge--green{ background:rgba(16,185,129,.18); color:#065f46; border:1px solid rgba(16,185,129,.45); }
.badge--amber{ background:rgba(245,158,11,.18); color:#92400e; border:1px solid rgba(245,158,11,.45); }

/* Card styles */
.d7aa-center-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; }
.d7aa-card.glass.ios{
  width: var(--d7aa-card-w); height: var(--d7aa-card-h); border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
  box-shadow: 0 12px 34px rgba(15,18,35,.35), inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255,255,255,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; user-select:none; position:relative;
}
.d7aa-card-art{ border-radius:14px; overflow:hidden; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.d7aa-card-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.d7aa-card-title{ font-weight:800; color:var(--d7aa-title-color); font-size:var(--d7aa-title-size); text-shadow: 0 1px rgba(255,255,255,.5); max-width:calc(var(--d7aa-card-w) - 50px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d7aa-card-play{ width:var(--d7aa-play-size); height:var(--d7aa-play-size); border-radius:50%; background: linear-gradient(180deg,#0ea5e9,#22d3ee); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow: 0 16px 32px rgba(14,165,233,.45); font-size:18px; }

/* --- v1.7.5 UI patch --- */
#d7aa-sticky-player .d7aa-time{
  font-weight: 900 !important;
  color: var(--d7aa-time-color, #0b1220) !important;
  text-shadow: 0 1px rgba(255,255,255,.65);
}
#d7aa-sticky-player .d7aa-controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: var(--d7aa-gap, 12px);
}
@media (max-width: 768px){
  .d7aa-progress{ margin-top: 20px !important; margin-bottom: 24px !important; height: calc(var(--d7aa-progress-h, 12px) + 4px) !important; }
  #d7aa-sticky-player .d7aa-close{ right:10px !important; left:auto !important; top:10px !important; position:absolute; }
  #d7aa-sticky-player .d7aa-minimize{ right:56px !important; left:auto !important; top:10px !important; position:absolute; }
}
@media (min-width: 769px){
  #d7aa-sticky-player .d7aa-close{ left:10px !important; right:auto !important; top:10px !important; position:absolute; }
  #d7aa-sticky-player .d7aa-minimize{ left:56px !important; right:auto !important; top:10px !important; position:absolute; }
}

/* --- v1.7.6 UI patch --- */
/* 1) Timer: pure white for clarity */
#d7aa-sticky-player .d7aa-time{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* 2) Keep controls centered even with larger sizes */
#d7aa-sticky-player .d7aa-controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: var(--d7aa-gap, 12px);
}

/* 3) Mobile: more finger space for progress + move close/minimize INSIDE the glass box (top-right of inner card) */
@media (max-width:768px){
  .d7aa-progress{
    margin-top:22px !important;
    margin-bottom:26px !important;
    height: calc(var(--d7aa-progress-h, 12px) + 6px) !important;
  }
  #d7aa-sticky-player .d7aa-player-inner{ position:relative; }
  #d7aa-sticky-player .d7aa-close{ position:absolute; right:12px !important; left:auto !important; top:12px !important; z-index:2; }
  #d7aa-sticky-player .d7aa-minimize{ position:absolute; right:56px !important; left:auto !important; top:12px !important; z-index:2; }
}

/* 4) Desktop: place close/minimize top-left above timer */
@media (min-width:769px){
  #d7aa-sticky-player .d7aa-close{ position:absolute; left:12px !important; right:auto !important; top:12px !important; z-index:2; }
  #d7aa-sticky-player .d7aa-minimize{ position:absolute; left:56px !important; right:auto !important; top:12px !important; z-index:2; }
}

/* 5) CTA + status strictly vertical and centered */
.d7aa-cta-status{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important; width:100%; }

/* --- v1.7.7 UI patch --- */
/* Timer: pure white & bold */
#d7aa-sticky-player .d7aa-time{
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
  font-weight: 900 !important;
}

/* Controls stay centered neatly */
#d7aa-sticky-player .d7aa-controls{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--d7aa-gap, 12px) !important;
}

/* CTA + status strictly vertical and centered */
.d7aa-cta-status,
.d7aa-cta-status.vertical{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
}

/* Mobile: more touch space for progress; put close/minimize INSIDE glass box (top-right of inner card) */
@media (max-width:768px){
  .d7aa-progress{
    margin-top: 28px !important;
    margin-bottom: 28px !important;
    height: calc(var(--d7aa-progress-h, 12px) + 6px) !important;
  }
  #d7aa-sticky-player .d7aa-player-inner{ position: relative !important; }
  #d7aa-sticky-player .d7aa-close{
    position: absolute !important;
    right: 12px !important; left: auto !important; top: 12px !important; z-index: 3 !important;
  }
  #d7aa-sticky-player .d7aa-minimize{
    position: absolute !important;
    right: 60px !important; left: auto !important; top: 12px !important; z-index: 3 !important;
  }
}

/* Desktop: close/minimize on top-left */
@media (min-width:769px){
  #d7aa-sticky-player .d7aa-close{
    position: absolute !important;
    left: 12px !important; right: auto !important; top: 12px !important; z-index: 3 !important;
  }
  #d7aa-sticky-player .d7aa-minimize{
    position: absolute !important;
    left: 60px !important; right: auto !important; top: 12px !important; z-index: 3 !important;
  }
}

/* === v1.8.0 Assistive Bubble === */
.d7aa-bubble{
  position:fixed; z-index:99999; width:var(--d7aa-bubble-size-d,56px); height:var(--d7aa-bubble-size-d,56px);
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.35); box-shadow:0 14px 36px rgba(0,0,0,.35); font-weight:900; color:#fff; cursor:pointer; user-select:none;
  background: linear-gradient(175deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
}
@media(max-width:768px){ .d7aa-bubble{ width:var(--d7aa-bubble-size-m,64px); height:var(--d7aa-bubble-size-m,64px);} }
.d7aa-bubble.is-guest{ background: linear-gradient(175deg, rgba(251,191,36,.45), rgba(251,146,60,.35)); }
.d7aa-bubble.is-buyer{ background: linear-gradient(175deg, rgba(16,185,129,.45), rgba(5,150,105,.35)); }
.d7aa-bubble.top-left{ left:16px; top:16px; } .d7aa-bubble.top-right{ right:16px; top:16px; }
.d7aa-bubble.bottom-left{ left:16px; bottom:16px; } .d7aa-bubble.bottom-right{ right:16px; bottom:16px; }
.d7aa-bubble.middle-left{ left:16px; top:50%; transform:translateY(-50%);} .d7aa-bubble.middle-right{ right:16px; top:50%; transform:translateY(-50%);}