/* ═══════════════════════════════════════════════════
   UMBRA MUSIC PLAYER — FOCUS MODE INTEGRATION
   Añadir al final de umbra-music-player.css
   ═══════════════════════════════════════════════════ */

/* Solo visible en focus mode */
body:not(.focus-mode) #umbra-player {
  display: none !important;
}

/* En focus mode, el trigger desaparece — el control
   viene desde el botón de la pill del HUD */
body.focus-mode .ump-trigger {
  display: none !important;
}

/* Widget: posición fija abajo a la derecha, encima del HUD */
body.focus-mode #umbra-player {
  display: flex !important;
  pointer-events: none;
}

body.focus-mode #umbra-player[data-state="hidden"] .ump-widget {
  opacity: 0;
  transform: scale(0.88) translateY(12px);
  pointer-events: none;
}

body.focus-mode #umbra-player[data-state="visible"] .ump-widget {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

/* ── VOLUME CONTROL ──────────────────────────────── */
.ump-vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 14px;
  border-top: 0.5px solid rgba(255,255,255,0.07);
  padding-top: 10px;
}

.ump-vol-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  transition: color 0.15s;
  border: none;
  background: transparent;
  padding: 0;
}
.ump-vol-icon:hover { color: rgba(255,255,255,0.7); }

.ump-vol-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.ump-vol-fill {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  position: relative;
  pointer-events: none;
  transition: width 0.1s;
}

.ump-vol-thumb {
  position: absolute;
  right: -5px;
  top: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.ump-vol-track:hover .ump-vol-thumb { opacity: 1; }

.ump-vol-pct {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
  min-width: 26px;
  text-align: right;
  flex-shrink: 0;
}

/* Muted state */
.ump-vol-icon.ump-muted { color: rgba(255,255,255,0.2); }
.ump-vol-icon.ump-muted:hover { color: rgba(255,255,255,0.5); }

/* ── FOCUS PILL BUTTON ACTIVE STATE ─────────────── */
#ftSpotify.on {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* ── SIZE VARIANTS WITH VOLUME ───────────────────── */
#umbra-player[data-size="mini"] .ump-vol-row {
  display: none;
}