/* =============================================================================
   Futurist icon tiles — global utility chrome (Sonara v4)
   Player bar transport/queue scaled up under .player-left; mini waveform capped in .player-center-main (max-width in styles.css).
   Metallic silver icons, subdued highlights.
   ============================================================================= */

:root {
  --futurist-metal: #aeb6c3;
  --futurist-metal-bright: #d4dae3;
  --futurist-metal-mid: #8e97a8;
  --futurist-metal-shine: rgba(240, 244, 250, 0.38);
  --futurist-metal-shadow: rgba(0, 0, 0, 0.45);
}

/* Strip default button chrome so inner tile is visible */
.futurist-icon-host {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.futurist-icon-host:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.futurist-icon-host.player-btn-icon,
.futurist-icon-host.player-btn-queue,
.futurist-icon-host.player-btn-transport {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Header + player transport — compact */
.icon-btn.futurist-icon-host {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.futurist-icon-host.player-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.futurist-icon-host.player-btn.player-btn-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
}

.futurist-icon-host.player-btn:hover {
  transform: none !important;
  background: transparent !important;
}

.futurist-icon-host.player-btn-icon:hover {
  transform: none !important;
  background: transparent !important;
  color: inherit;
}

.futurist-icon-host.player-btn-queue:hover,
.futurist-icon-host.player-btn-transport:hover {
  background: transparent !important;
}

/* Dock left cluster — prev / next / queue tiles (reference scale; does not affect header icons). */
.player-left .futurist-icon-host.player-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

.player-left .futurist-icon-host.player-btn .futurist-icon-tile {
  width: 36px !important;
  height: 36px !important;
  border-radius: 7px !important;
}

.player-left .futurist-icon-tile .queue-icon-img {
  width: 22px !important;
  height: 22px !important;
}

.player-left .futurist-icon-tile--transport {
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

.now-playing-modal-controls .futurist-icon-host.player-btn.player-btn-transport {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

.now-playing-modal-controls .futurist-icon-host.player-btn.player-btn-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* Original asset sizes (styles.css) inside tiles */
.futurist-icon-tile .notification-icon-img {
  width: 24px !important;
  height: 24px !important;
  max-width: none !important;
  max-height: none !important;
}

.futurist-icon-tile .settings-icon-img {
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  max-height: none !important;
}

.icon-btn-settings.futurist-icon-host .futurist-icon-tile .settings-icon-img {
  width: 18px !important;
  height: 18px !important;
}

.player-bar-settings-btn.futurist-icon-host .futurist-icon-tile .settings-icon-img {
  width: 11px !important;
  height: 11px !important;
}

.futurist-icon-tile .queue-icon-img {
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  max-height: none !important;
}

/* ── Player bar / modal: toggles ON (shuffle, repeat, lyrics/CC, queue open, volume popover open) ── */
.futurist-icon-host.player-btn-icon.active .futurist-icon-tile,
.futurist-icon-host.player-btn-queue.active .futurist-icon-tile {
  background: rgba(168, 85, 247, 0.14) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
  border-top: 1px solid rgba(237, 210, 255, 0.72) !important;
  border-left: 1px solid rgba(220, 180, 255, 0.38) !important;
  border-right: 1px solid rgba(88, 28, 135, 0.55) !important;
  border-bottom: 1px solid rgba(45, 12, 80, 0.6) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.4),
    0 8px 22px rgba(0, 0, 0, 0.52),
    0 0 20px rgba(168, 85, 247, 0.5),
    0 0 24px rgba(34, 211, 238, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.futurist-icon-host.player-btn-icon.active .futurist-icon-tile svg {
  color: #f3e8ff !important;
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.95)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.4)) !important;
}

.futurist-icon-host.player-btn-queue.active .futurist-icon-tile .queue-icon-img {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.9)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.45)) brightness(1.12) saturate(1.25) !important;
}

/* Repeat all — a bit more emphasis than repeat-one */
.futurist-icon-host.player-btn-icon.active[data-repeat-mode="all"] .futurist-icon-tile {
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(168, 85, 247, 0.62),
    0 0 30px rgba(34, 211, 238, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

a.profile-btn.futurist-icon-tile.futurist-icon-profile {
  border-radius: 7px !important;
}

.futurist-icon-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 6px !important;
  cursor: inherit;
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;

  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;

  border: 1px solid rgba(170, 180, 195, 0.14) !important;
  border-top: 1px solid var(--futurist-metal-shine) !important;
  border-left: 1px solid rgba(200, 210, 225, 0.18) !important;

  box-shadow:
    0 10px 28px var(--futurist-metal-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.futurist-icon-host.player-btn-icon .futurist-icon-tile {
  width: 26px !important;
  height: 26px !important;
  border-radius: 5px !important;
}

.now-playing-modal-controls .futurist-icon-host.player-btn-icon .futurist-icon-tile {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
}

.now-playing-modal-controls .futurist-icon-host.player-btn-transport .futurist-icon-tile {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
}

.nav-item > .futurist-icon-tile {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
}

.futurist-icon-tile.futurist-icon-tile--search-glyph {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
}

.player-bar-settings-btn.futurist-icon-host .futurist-icon-tile {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
}

a.futurist-icon-tile,
button.futurist-icon-tile {
  pointer-events: auto;
  cursor: pointer;
}

.futurist-icon-tile:hover,
.futurist-icon-host:hover .futurist-icon-tile {
  transform: translateY(-2px) scale(1.04);
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(185, 195, 210, 0.28) !important;
  border-top: 1px solid rgba(235, 240, 248, 0.42) !important;
  border-left: 1px solid rgba(210, 218, 230, 0.26) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(200, 210, 225, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.futurist-icon-tile svg {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0;
  transition: color 0.25s ease, filter 0.25s ease;
  color: var(--futurist-metal);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.futurist-icon-tile--search-glyph svg {
  width: 15px !important;
  height: 15px !important;
}

.futurist-icon-host.player-btn-icon .futurist-icon-tile svg {
  width: 15px !important;
  height: 15px !important;
}

.now-playing-modal-controls .futurist-icon-host.player-btn-icon .futurist-icon-tile svg {
  width: 17px !important;
  height: 17px !important;
}

.futurist-icon-tile:hover svg,
.futurist-icon-host:hover .futurist-icon-tile svg {
  color: var(--futurist-metal-bright) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42)) !important;
}

.futurist-icon-tile img {
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: filter 0.25s ease;
  filter: brightness(0.98) contrast(1.05);
}

.futurist-icon-tile:hover img,
.futurist-icon-host:hover .futurist-icon-tile img {
  filter: brightness(1.06) contrast(1.06);
}

.futurist-icon-tile--transport {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--futurist-metal);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14),
    0 -1px 0 rgba(0, 0, 0, 0.35);
}

.now-playing-modal-controls .futurist-icon-tile--transport {
  font-size: 1.1rem;
}

.futurist-icon-host:hover .futurist-icon-tile--transport {
  color: var(--futurist-metal-bright);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 -1px 0 rgba(0, 0, 0, 0.3);
}

.futurist-icon-tile--search-glyph {
  pointer-events: none;
}

.futurist-icon-tile--search-glyph svg {
  color: var(--futurist-metal-mid);
}

.search-bar:hover .futurist-icon-tile--search-glyph {
  transform: translateY(-2px) scale(1.04);
  background: rgba(255, 255, 255, 0.07) !important;
  border-top: 1px solid rgba(230, 236, 244, 0.4) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.52),
    0 0 8px rgba(200, 210, 225, 0.05) !important;
}

.search-bar:hover .futurist-icon-tile--search-glyph svg {
  color: var(--futurist-metal-bright);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) !important;
}

.nav-item:hover .futurist-icon-tile {
  transform: translateY(-2px) scale(1.03);
  background: rgba(255, 255, 255, 0.07) !important;
  border-top: 1px solid rgba(228, 234, 242, 0.38) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 8px rgba(200, 210, 225, 0.05) !important;
}

.nav-item:hover .futurist-icon-tile svg {
  color: var(--futurist-metal-bright) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.38)) !important;
}

.nav-item.active .futurist-icon-tile {
  background: rgba(140, 130, 165, 0.22) !important;
  border-color: rgba(190, 180, 215, 0.32) !important;
  border-top: 1px solid rgba(220, 210, 240, 0.45) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.42),
    0 0 12px rgba(150, 140, 180, 0.1) !important;
}

.nav-item.active .futurist-icon-tile svg {
  color: var(--futurist-metal-bright) !important;
}

/* Header profile: circular “crystal ring” (reference: solid purple frame) + quantum glass inner */
a.futurist-icon-profile.futurist-icon-tile {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 3px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  pointer-events: auto;
  cursor: pointer;
  box-sizing: border-box !important;
  /* Aurora crystal rim */
  background:
    conic-gradient(
      from 200deg,
      #c084fc 0deg,
      #a855f7 55deg,
      #7c3aed 110deg,
      #22d3ee 165deg,
      #818cf8 220deg,
      #d946ef 285deg,
      #9333ea 360deg
    ) !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(168, 85, 247, 0.42),
    0 0 36px rgba(34, 211, 238, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: box-shadow 0.4s ease, transform 0.25s ease !important;
}

a.futurist-icon-profile.futurist-icon-tile:hover {
  transform: scale(1.04) !important;
  background:
    conic-gradient(
      from 160deg,
      #e9d5ff 0deg,
      #c084fc 50deg,
      #a855f7 100deg,
      #22d3ee 155deg,
      #a78bfa 210deg,
      #f0abfc 280deg,
      #9333ea 360deg
    ) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(168, 85, 247, 0.55),
    0 0 40px rgba(34, 211, 238, 0.28) !important;
}

a.futurist-icon-profile.futurist-icon-tile:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.75) !important;
  outline-offset: 3px !important;
}

/* Quantum crystal lens — circular glass over the photo */
a.futurist-icon-profile.futurist-icon-tile .quantum-slab--header {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(12, 8, 24, 0.12) 100%
  ) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28),
    0 2px 10px rgba(0, 0, 0, 0.25) !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
}

a.futurist-icon-profile.futurist-icon-tile:hover .quantum-slab--header {
  border-color: rgba(236, 220, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 8px rgba(0, 0, 0, 0.32),
    0 0 14px rgba(168, 85, 247, 0.25) !important;
}

a.futurist-icon-profile.futurist-icon-tile img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 50% !important;
  filter: saturate(1.06) contrast(1.03);
}

/* styles.css .player-bar-settings-btn — tight to waveform */
.player-bar-settings-btn.futurist-icon-host {
  width: auto !important;
  height: auto !important;
  right: -26px !important;
  background: transparent !important;
}

.player-bar-settings-btn.futurist-icon-host:hover {
  transform: translateY(-50%) !important;
}


/* ── MOBILE: Queue button smaller than prev/next ── */
@media (max-width: 768px) {
  .player-left .futurist-icon-host.player-btn.player-btn-queue {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
  .player-left .futurist-icon-host.player-btn.player-btn-queue .futurist-icon-tile {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
  }
  .player-left .player-btn-queue .queue-icon-img {
    width: 11px !important;
    height: 11px !important;
  }
}