.media-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  isolation: isolate;
  /* Size container: the playback layout steps down from the TILE's own box (see
     the @container ladder at the end of this file), not the viewport — a media
     tile shrunk on the grid, or nested in a tab group, has to reflow while the
     screen size never changes. Safe because the panel's height is always set
     from outside (DashboardGrid.css: .grid-stack-item-content > .panel and
     .tabgroup-body > .dashboard-widget both force height:100%), so size
     containment can't collapse it. */
  container-type: size;
  container-name: mediatile;
}

/* Media tile tabs (Riproduzione | Chat) + panes */
.media-tabs { position: relative; z-index: 2; flex: 0 0 auto; }
.media-pane { position: relative; z-index: 2; min-height: 0; flex: 1 1 auto; }

/* Class-based (not id) so a duplicated media tile — whose ids are stripped on
   clone — keeps the playback grid layout instead of collapsing. */
.media-pane-play:not([hidden]) {
  display: grid;
  /* `auto` (not a min floor): the cover sizes itself from the tile via the
     min() below, so a short/narrow tile shrinks the art instead of squeezing
     the text column to nothing and pushing the transport row out of view. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

#media-pane-chat:not([hidden]),
[data-chatf="pane"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#media-pane-chat .ai-chat,
[data-chatf="pane"] .ai-chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* "AI unavailable — add API key" notice (shown in the Chat tab when no key) */
.media-chat-nokey:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
}
.media-chat-nokey svg { width: 34px; height: 34px; color: var(--accent); opacity: 0.85; }
.media-chat-nokey p { font-size: 13px; max-width: 300px; line-height: 1.5; color: var(--muted-text); margin: 0; }

/* Chat tab while music plays: blurred album cover behind the chat */
.media-panel.media-chat-mode .media-bg {
  filter: blur(26px) brightness(0.5) saturate(1.25);
  transform: scale(1.18);
  opacity: 0.7;
}
.media-panel.media-chat-mode #media-pane-chat .ai-chat { background: transparent; }

/* Blurred album cover behind the Chat tab while music plays (restores the look
   the chat had when it lived inside the media tile). */
.chat-panel { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
.chat-bg {
  position: absolute;
  inset: -12%;            /* over-fill so blurred edges fall outside the tile */
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.5) saturate(1.25);
  transform: scale(1.35); /* push the blur's faded edges well past the corners */
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.chat-panel.has-cover .chat-bg { opacity: 0.7; }
.chat-panel > .media-pane { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; }

/* Mini now-playing preview at the top of the Chat tab */
.media-chat-np:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.media-chat-np-cover {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.4), rgba(var(--accent-rgb),0.15));
  background-size: cover;
  background-position: center;
}
.media-chat-np-info { flex: 1 1 auto; min-width: 0; }
.media-chat-np-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-chat-np-artist { font-size: 11px; color: var(--muted-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-chat-np-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Keep the mini-player compact — including the primary play/pause, which would
   otherwise inherit the full 54px size from .control-btn.primary. */
.media-chat-np-actions .control-btn,
.media-chat-np-actions .control-btn.primary { width: 32px; height: 32px; }
.media-chat-np-actions .control-btn svg,
.media-chat-np-actions .control-btn.primary svg { width: 15px; height: 15px; }

.media-panel.calendar-mode {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.media-panel.calendar-mode .media-art,
.media-panel.calendar-mode .media-content { display: none; }

.media-bg {
  position: absolute;
  inset: -40px;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.35) brightness(0.78);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Promote (and isolate) this heavy blur layer only while a cover is actually
   shown — keeping it on the compositor permanently (will-change/translateZ) left
   a full-size blur(34px) surface rasterized even with no music, which on hybrid
   Intel+NVIDIA laptops is exactly the kind of always-live GPU layer that makes
   Chromium flicker the whole window. Now it costs nothing when idle. */
.media-panel.has-image .media-bg { opacity: 1; will-change: opacity; }

/* Ambient fallback when there's no cover art */
.media-bg-fallback {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 18% 30%, rgba(var(--accent-rgb),0.10), transparent 60%),
    radial-gradient(55% 70% at 90% 75%, rgba(86,140,255,0.09), transparent 60%),
    radial-gradient(40% 60% at 65% 20%, rgba(180,120,255,0.07), transparent 65%);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.media-panel.has-image .media-bg-fallback { opacity: 0; }

.media-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(7,12,11,0.85) 0%, rgba(7,12,11,0.55) 45%, rgba(7,12,11,0.2) 100%),
    linear-gradient(180deg, rgba(10,15,14,0.4), rgba(10,15,14,0.65));
  pointer-events: none;
}

.media-art {
  position: relative;
  aspect-ratio: 1;
  /* Sized from the tile, capped at the original 170px so a full-size tile looks
     exactly as before. cqh is what keeps a SHORT tile from clipping: the cover
     is square, so its height is its width. */
  width: min(34cqw, 44cqh, 170px);
  border-radius: var(--radius);
  background: #101516;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}

.media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(var(--accent-rgb),0.18), transparent 55%),
    radial-gradient(120% 90% at 80% 90%, rgba(86,140,255,0.14), transparent 55%),
    linear-gradient(140deg, #14201c 0%, #0d1413 60%, #0a1010 100%);
  overflow: hidden;
}

.media-placeholder::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    conic-gradient(from 220deg at 50% 50%, rgba(var(--accent-rgb),0.10), transparent 40%, rgba(180,120,255,0.08) 70%, transparent 95%);
  filter: blur(20px);
  opacity: 0.85;
  /* Static glow. This placeholder only ever shows when NOTHING is playing, so
     there is no sound to visualise — it used to spin (and the bars below used to
     pulse) forever anyway, keeping the compositor busy for an empty state. Held
     still, it costs nothing and still reads as a soft music-widget backdrop. */
}

.ph-eq {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38%;
  z-index: 1;
}

.ph-eq span {
  display: block;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--green), var(--green) 60%, var(--green));
  box-shadow: 0 0 10px rgba(var(--accent-rgb),0.45);
}
/* Fixed bar heights — a clean, still equaliser glyph (no per-frame animation;
   see the note on .media-placeholder::before above). */
.ph-eq span:nth-child(1) { height: 60%; }
.ph-eq span:nth-child(2) { height: 90%; }
.ph-eq span:nth-child(3) { height: 45%; }
.ph-eq span:nth-child(4) { height: 75%; }
.ph-eq span:nth-child(5) { height: 55%; }

.ph-label {
  position: absolute;
  bottom: 10%;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.6px;
  color: rgba(220, 235, 230, 0.55);
  text-transform: uppercase;
  z-index: 1;
}

.media-art.has-image .media-placeholder { display: none; }

.media-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.media-app-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,20,19,0.55);
  backdrop-filter: blur(10px);
  color: #d3ddd9;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.app-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px currentColor;
}

.media-panel.spotify .app-indicator { background: var(--green); color: var(--green); }
.media-panel.youtube .app-indicator { background: var(--red); color: var(--red); }
.media-panel.twitch .app-indicator { background: #9146ff; color: #9146ff; }

.media-source-picker {
  display: inline-flex;
  min-width: 0;
  max-width: min(230px, 100%);
}

.media-source-picker[hidden] { display: none !important; }

.media-source-picker .cs-wrap {
  min-width: 0;
  max-width: 100%;
}

.media-source-picker .cs-trigger {
  height: 26px;
  min-width: 110px;
  max-width: 230px;
  border-radius: 999px;
  padding: 0 9px 0 11px;
  background: rgba(15,20,19,0.48);
  border-color: rgba(255,255,255,0.12);
  color: #c7d3cf;
  font-size: 11.5px;
  font-weight: 800;
}

.media-source-picker .cs-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-source-picker .cs-panel {
  left: auto;
  right: 0;
  max-width: 280px;
}

.media-source-picker .cs-option {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-chip,
.calendar-mini-btn {
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(16,22,22,0.62);
  color: #dce7e2;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  padding: 0 10px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
}

.calendar-chip:hover,
.calendar-mini-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),0.34);
  background: rgba(24,34,32,0.78);
}

.media-title {
  min-width: 0;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 850;
  color: #f3f7f5;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-bottom: 0.05em;
}

.media-artist {
  min-width: 0;
  margin-top: 4px;
  font-size: 15.5px;
  line-height: 1.25;
  color: #c1ccc7;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.control-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,20,19,0.55);
  backdrop-filter: blur(10px);
  color: #e4ebe8;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease;
}

.control-btn:hover { background: rgba(30,40,38,0.7); border-color: rgba(255,255,255,0.2); }

.control-btn.primary {
  width: 54px;
  height: 54px;
  background: #f1f5f3;
  color: #07100d;
  border-color: #f1f5f3;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.control-btn.primary:hover { background: #fff; }

.control-btn:active { transform: scale(0.92); }
.control-btn svg { width: 18px; height: 18px; fill: currentColor; }
.control-btn.primary svg { width: 22px; height: 22px; }

.media-header {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.media-panel.calendar-mode .media-header { display: none; }

.calendar-entry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.40);
  background: rgba(var(--accent-rgb), 0.12);
  color: #d6ffe6;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.calendar-entry:hover {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(var(--accent-rgb), 0.6);
}
.calendar-entry:active { transform: scale(0.94); }
.calendar-entry svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Source brand icon (inside the app pill) ─────────────────── */
.media-app-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}
.media-app-icon svg { width: 16px; height: 16px; fill: currentColor; }
.media-app-icon.has-img { width: 17px; height: 17px; }
.media-app-icon img {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  object-fit: contain;
  display: block;
}
.media-app-icon.brand-spotify { color: #1ed760; }
.media-app-icon.brand-youtube { color: #ff3d3d; }
.media-app-icon.brand-twitch { color: #9146ff; }
.media-app-icon.brand-soundcloud { color: #ff5500; }

/* ── Per-app volume of the current source ────────────────────── */
.media-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  max-width: 340px;
}
.media-volume[hidden] { display: none !important; }
.media-vol-mute {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--floating-ui-border);
  background: var(--floating-ui-bg);
  color: var(--muted-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.media-vol-mute:hover { color: var(--text); background: rgba(255,255,255,0.10); }
.media-vol-mute:active { transform: scale(0.94); }
.media-vol-mute svg { width: 15px; height: 15px; fill: currentColor; }
.media-vol-mute.active { color: var(--color-danger); border-color: rgba(var(--danger-rgb),0.42); }
.media-volume.muted .media-vol-slider { opacity: 0.4; }
.media-volume.muted .media-vol-val { color: #6a7672; }

.media-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  outline: none;
  cursor: pointer;
}
.media-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.45);
  cursor: pointer;
}
.media-vol-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  cursor: pointer;
}
.media-vol-val {
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted-text);
}

/* ── Playback polish: lift the artwork ───────────────────────── */
.media-pane-play .media-art {
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.46), inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* ── Spotify enrichment (media-spotify.js) ─────────────────────
   Shown only when the source is Spotify AND the API is linked: a seek bar,
   ♥ like, shuffle, repeat, and collapsible playlists/devices. Restrained —
   the Media panel already carries the cover + transport; green is used only
   for active states and the progress fill so it stays glanceable. */
.msp { --msp-green: #1ed760; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-width: 340px; }
.msp[hidden] { display: none !important; }

.msp-seek { display: flex; align-items: center; gap: 9px; }
.msp-time { flex: 0 0 auto; min-width: 30px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted-text); }
.msp-time.msp-tot { text-align: right; }
.msp-range {
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0;
  height: 5px; border-radius: 999px; background: transparent; outline: none; cursor: pointer; margin: 0; --msp-fill: 0%;
}
.msp-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(to right, var(--msp-green) 0 var(--msp-fill), rgba(255,255,255,0.14) var(--msp-fill) 100%);
}
.msp-range::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.14); }
.msp-range::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--msp-green); }
.msp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -4px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity .15s ease;
}
.msp-range::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.msp-seek:hover .msp-range::-webkit-slider-thumb, .msp-range:active::-webkit-slider-thumb, .msp-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.msp-range:disabled { opacity: 0.5; cursor: default; }

.msp-row { display: flex; align-items: center; gap: 8px; }
.msp-spacer { flex: 1 1 auto; }
.msp-ctl {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; position: relative;
  border: 1px solid var(--floating-ui-border); background: var(--floating-ui-bg); color: var(--muted-text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.msp-ctl:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,0.10); }
.msp-ctl:active:not(:disabled) { transform: scale(0.92); }
.msp-ctl svg { width: 15px; height: 15px; }
.msp-ctl.is-on { color: var(--msp-green); border-color: rgba(30,215,96,0.42); }
.msp-ctl.err { color: var(--color-danger); border-color: rgba(var(--danger-rgb),0.42); }
.msp-repeat.is-one::before { content: "1"; position: absolute; top: 2px; right: 4px; font-size: 8px; font-weight: 900; color: var(--msp-green); line-height: 1; }

.msp-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  border: 1px solid var(--floating-ui-border); background: var(--floating-ui-bg); color: var(--muted-text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.msp-pill svg { width: 15px; height: 15px; flex: 0 0 auto; }
.msp-pill:hover { color: var(--text); background: rgba(255,255,255,0.10); }
.msp-pill.is-open { color: var(--msp-green); border-color: rgba(30,215,96,0.45); background: rgba(30,215,96,0.12); }

/* Playlists/Devices open as an overlay sheet bounded to the pane (position:relative
   host) so the list always has room and scrolls, instead of overflowing the tile. */
.media-pane-play { position: relative; --msp-green: #1ed760; }
.msp-sheet {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px; border-radius: 16px;
  background: rgba(9,13,11,0.9); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid rgba(30,215,96,0.24); box-shadow: 0 18px 46px rgba(0,0,0,0.5);
  animation: msp-sheet-in .18s ease;
}
.msp-sheet[hidden] { display: none; }
@keyframes msp-sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msp-sheet-head { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.msp-sheet-ico { display: inline-flex; flex: 0 0 auto; color: var(--msp-green); }
.msp-sheet-ico svg { width: 17px; height: 17px; }
.msp-sheet-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msp-sheet-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--floating-ui-border); background: var(--floating-ui-bg); color: var(--muted-text);
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
.msp-sheet-close:hover { color: var(--text); background: rgba(255,255,255,0.10); }
.msp-sheet-close:active { transform: scale(0.92); }
.msp-sheet-close svg { width: 15px; height: 15px; }
.msp-sheet-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 3px;
  scrollbar-width: thin; scrollbar-color: rgba(30,215,96,0.5) transparent;
}
.msp-sheet-list::-webkit-scrollbar { width: 6px; }
.msp-sheet-list::-webkit-scrollbar-thumb { background: rgba(30,215,96,0.5); border-radius: 999px; }
.msp-sheet-list::-webkit-scrollbar-track { background: transparent; }
.msp-hint { font-size: 12px; font-weight: 600; color: var(--muted-text); opacity: 0.75; padding: 6px 2px; }

.msp-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 7px; border-radius: 9px;
  cursor: pointer; text-align: left; font: inherit;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
  transition: background .15s ease, border-color .15s ease;
}
.msp-item:hover:not(.is-active):not(:disabled) { background: rgba(30,215,96,0.12); border-color: rgba(30,215,96,0.35); }
.msp-item.is-active { border-color: rgba(30,215,96,0.5); background: rgba(30,215,96,0.14); cursor: default; }
.msp-item.ok { border-color: rgba(30,215,96,0.6); }
.msp-item.err { border-color: rgba(var(--danger-rgb),0.6); }
.msp-item-art { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 6px; background: rgba(255,255,255,0.07) center / cover no-repeat; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.msp-item-ico { flex: 0 0 auto; display: inline-flex; color: var(--muted-text); }
.msp-item.is-active .msp-item-ico { color: var(--msp-green); }
.msp-item-ico svg { width: 18px; height: 18px; }
.msp-item-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.msp-item-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msp-item.is-active .msp-item-name { color: #7ff0a6; }
.msp-item-sub { font-size: 11px; font-weight: 600; color: var(--muted-text); }
.msp-item-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #06210f; background: var(--msp-green); opacity: 0; transform: scale(0.8); transition: opacity .15s ease, transform .15s ease; }
.msp-item-go svg { width: 13px; height: 13px; margin-left: 1px; }
.msp-item:hover .msp-item-go { opacity: 1; transform: scale(1); }
.msp-item-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--msp-green); box-shadow: 0 0 0 3px rgba(30,215,96,0.22); }

@media (prefers-reduced-motion: reduce) {
  .msp-ctl, .msp-item-go, .msp-range::-webkit-slider-thumb { transition: none; }
}

/* ── Tile size ladder ────────────────────────────────────────────────────────
   The media tile is resizable on the grid and can also be dropped into a tab
   group, so its available box changes with no viewport change at all — the
   `breakpoints.css` @media rules never fire for it. These @container steps read
   the tile's own box (container-name: mediatile, declared on .media-panel at the
   top of this file).

   Two independent axes, deliberately kept apart:
     · HEIGHT scales things DOWN (type, controls, gaps). Losing height alone
       never removes anything except the two optional rows, because a short but
       WIDE tile has plenty of room — it just needs a different shape, which is
       the strip layout below.
     · WIDTH is what actually removes things, and only once the horizontal room
       for them is genuinely gone.
   Getting this wrong is what made a wide, short tile look empty while hiding the
   provider chip and the artist for lack of vertical space it did not need.

   Order matters: steps are additive and later ones win at equal specificity, so
   the strip restores what the height steps compressed. Nothing here applies at
   full size — a large tile renders exactly as before.

   Note: an element can't be styled by its OWN container query, so .media-panel's
   padding/gap stay fixed; every rule below targets a descendant. */

/* ── Height: scale down ───────────────────────────────────────────────────── */

/* The per-app volume row and the Spotify strip are extras stacked below the
   transport — they are the only things height alone removes, and the title stops
   taking a second line. */
@container mediatile (max-height: 360px) {
  .media-panel .media-volume,
  .media-panel .msp { display: none; }
  .media-panel .media-title { -webkit-line-clamp: 1; }
}

@container mediatile (max-height: 270px) {
  .media-panel .media-pane-play:not([hidden]) { gap: 13px; }
  .media-panel .media-content { gap: 9px; }
  .media-panel .media-title { font-size: 22px; }
  .media-panel .media-artist { font-size: 13px; margin-top: 2px; }
  .media-panel .media-actions { gap: 9px; }
  .media-panel .control-btn { width: 36px; height: 36px; }
  .media-panel .control-btn.primary { width: 44px; height: 44px; }
  .media-panel .control-btn svg { width: 16px; height: 16px; }
  .media-panel .control-btn.primary svg { width: 19px; height: 19px; }
  .media-panel .app-pill { height: 23px; padding: 0 8px; font-size: 11.5px; }
}

@container mediatile (max-height: 200px) {
  .media-panel .media-content { gap: 7px; }
  .media-panel .media-title { font-size: 19px; }
  .media-panel .media-artist { font-size: 12px; }
  .media-panel .control-btn { width: 32px; height: 32px; }
  .media-panel .control-btn.primary { width: 38px; height: 38px; }
  .media-panel .control-btn svg { width: 14px; height: 14px; }
  .media-panel .control-btn.primary svg { width: 17px; height: 17px; }
}

@container mediatile (max-height: 150px) {
  .media-panel .media-title { font-size: 17px; }
  .media-panel .media-actions { gap: 7px; }
  .media-panel .control-btn { width: 28px; height: 28px; }
  .media-panel .control-btn.primary { width: 34px; height: 34px; }
  .media-panel .control-btn.primary svg { width: 15px; height: 15px; }
}

/* ── Short but wide: lay the content out as a strip ───────────────────────────
   The default content column stacks chip / title / transport vertically, which
   is what runs out of height first. With this much width the same pieces fit on
   one line beside each other, so the tile uses the space it has instead of
   dropping content and leaving the right half empty. The title block takes the
   slack, pushing the transport to the far end. */
@container mediatile (max-height: 300px) and (min-width: 430px) {
  .media-panel .media-content { flex-direction: row; align-items: center; gap: 16px; }
  .media-panel .media-textblock { flex: 1 1 auto; min-width: 0; }
  .media-panel .media-app-row,
  .media-panel .media-actions { flex: 0 0 auto; }
  /* Restore what the height steps above gave up: there is room for both now. */
  .media-panel .media-app-row { display: flex; }
  .media-panel .media-artist { display: block; }
  /* Two lines fit here even when the tile is short, and a track title is what
     the space should go to. */
  .media-panel .media-title { -webkit-line-clamp: 2; }
}

/* Very wide strip: give the title back its full weight — at this width it is
   the tile's headline, not a label squeezed next to the buttons. */
@container mediatile (max-height: 300px) and (min-width: 620px) {
  .media-panel .media-content { gap: 20px; }
  .media-panel .media-title { font-size: 26px; }
  .media-panel .media-artist { font-size: 14px; }
  .media-panel .control-btn { width: 38px; height: 38px; }
  .media-panel .control-btn.primary { width: 46px; height: 46px; }
  .media-panel .control-btn svg { width: 17px; height: 17px; }
  .media-panel .control-btn.primary svg { width: 20px; height: 20px; }
}

/* ── Width: start removing ────────────────────────────────────────────────── */

/* Too narrow for the strip AND too short to stack: the provider chip goes, then
   the artist line. The cover already says which app is playing. */
@container mediatile (max-height: 200px) and (max-width: 430px) {
  .media-panel .media-app-row { display: none; }
}
@container mediatile (max-height: 150px) and (max-width: 430px) {
  .media-panel .media-artist { display: none; }
}

/* Below this the cover and the text column can't share a row without one of them
   becoming unreadable, so the cover yields — the title and the transport are
   what the tile is for. */
@container mediatile (max-width: 330px) {
  .media-panel .media-pane-play:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .media-panel .media-art { display: none; }
  .media-panel .media-title { font-size: 21px; -webkit-line-clamp: 2; }
}

@container mediatile (max-width: 240px) {
  .media-panel .media-app-row { display: none; }
  .media-panel .media-title { font-size: 18px; }
  .media-panel .media-actions { gap: 8px; }
  .media-panel .control-btn { width: 32px; height: 32px; }
  .media-panel .control-btn.primary { width: 38px; height: 38px; }
}