/* ── Widget container ───────────────────────────────────── */
.sp-widget {
    --sp-surface:     #1a1a1a00;
    --sp-green:       #b91d8d;
    --sp-text:        #fff;
    --sp-subtext:     #aaa;
    --sp-radius:      0px;
    --sp-art-size:    125px;
    --sp-transition:  0.4s ease;

    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 12px;
    background: var(--sp-surface);
    border-radius: var(--sp-radius);
    margin: 0 auto;
    /* border: 1px solid rgba(255,255,255,0.07); */
    /* box-shadow: 0 4px 24px rgba(0,0,0,0.4); */
    min-width: 280px;
    max-width: 410px;
    width: auto;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none;
    color: var(--sp-text);
    transition: box-shadow var(--sp-transition), border-color var(--sp-transition);
    position: relative;
    overflow: hidden;
}

  /* .sp-widget:hover {
    box-shadow: 0 6px 32px rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.13);
  } */

  /* Subtle animated green glow when playing */
  /* .sp-widget.sp-playing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 0% 100%, rgba(29,185,84,0.08) 0%, transparent 65%);
    pointer-events: none;
  } */

  /* ── Album art ──────────────────────────────────────────── */
  .sp-art-wrap {
    position: relative;
    flex-shrink: 0;
    width: var(--sp-art-size);
    height: var(--sp-art-size);
    border-radius: 0px;
    overflow: hidden;
    background: #222;
  }

  .sp-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1s ease;
  }

  .sp-art.sp-hidden { 
    opacity: 0; 
  }

  /* Pause icon overlay */
  .sp-art-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E")
      center/40% no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0px;
  }
  .sp-widget:not(.sp-playing) .sp-art-wrap::after { 
    opacity: 1; 
  }

  /* ── Text area ──────────────────────────────────────────── */
  .sp-info {
    flex: 1;
    min-width: 0; /* allow truncation */
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .sp-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sp-green);
    margin-bottom: 2px;
  }

  /* Pulsing dot (not really pulsing anymore, only shows when paused) */
  .sp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-green);
    flex-shrink: 0;
  }
  .sp-playing .sp-dot {
    /* animation: sp-pulse 2s ease-in-out infinite; */
    display: none;
  }
  /* @keyframes sp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
  } */

  .sp-track {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sp-text);
    line-height: 1.2;
  }

  .sp-artist {
    font-size: 12px;
    color: var(--sp-subtext);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

/* ── Progress bar ───────────────────────────────────────── */
.sp-progress-bar {
  height: 100%;
  background: var(--sp-green);
  border-radius: 2px;
  transform-origin: left;
  /* JS drives this via width + transition */
  transition: width 1s linear;
}
.sp-progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.sp-progress-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.sp-time {
  font-size: 10px;
  color: var(--sp-subtext);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  display: inline-block;
  width: 28px;
}

#sp-time-total {
  text-align: right;
}

  /* ── "Not playing" idle state ───────────────────────────── */
  .sp-idle {
    font-size: 12px;
    color: var(--sp-subtext);
  }

  /* ── Spotify logo (top-right) ───────────────────────────── */
  .sp-logo {
    position: absolute;
    top: 10px;
    right: 12px;
    opacity: 0.25;
    flex-shrink: 0;
  }
  .sp-logo svg { display: block; }