/* Media dock: Now Playing / On Repeat / Now Watching */
.material-symbols-outlined { font-size: 22px; vertical-align: middle; }
.dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; padding: clamp(1rem, 3vw, 1.8rem); border-radius: 28px; background: radial-gradient(120% 100% at 0% 0%, #2b1d4d 0%, #14122b 55%, #0d0d1a 100%); box-shadow: 0 24px 60px rgba(20, 18, 43, .35); color: #fff; font-family: "Ubuntu", system-ui, sans-serif; }
.dock-col { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.dcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; min-width: 0; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.dcard:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.dcard-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.dcard-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: #fff; flex: 1; }
.dcard-head .material-symbols-outlined { color: #c4b5fd; margin: 0; }
.dcard-body { border-radius: 12px; overflow: hidden; min-height: 60px; }
.dcard-body iframe { max-width: 100%; border: 0; }
.skeleton { background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.04) 70%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.chip { font-size: .78rem; font-weight: 500; padding: .25rem .7rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #e9e5ff; text-decoration: none; transition: background .2s ease; }
.chip:hover { background: rgba(255,255,255,.22); }
.live { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 500; color: #86efac; padding: .25rem .7rem; border-radius: 999px; background: rgba(34,197,94,.14); }
.live b { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.eq i { width: 3px; background: #1ed760; border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(1) { animation-delay: -.2s; } .eq i:nth-child(2) { animation-delay: -.6s; } .eq i:nth-child(3) { animation-delay: -.4s; } .eq i:nth-child(4) { animation-delay: -.8s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 18px; } }

.now-playing { grid-column: 1 / -1; }
.dcard-note { margin: .8rem .2rem 0; font-size: .85rem; color: rgba(233,229,255,.65); }
.watch-frame { position: relative; display: block; aspect-ratio: 16 / 9; flex: none; border-radius: 14px; overflow: hidden; background: #0d0d1a; }
.watch-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }
.watch-frame:hover img { transform: scale(1.05); }
.watch-cta { position: absolute; right: .8rem; top: .8rem; padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 500; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
.watch-frame:hover .watch-cta, .watch-frame:focus-visible .watch-cta { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .dock { grid-template-columns: 1fr; }
    .watch-cta { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .skeleton, .live b, .eq i { animation: none !important; } .eq i { height: 12px; } }

.chip, .watch-cta { display: inline-flex; align-items: center; gap: .2rem; }
.chip-ico { font-size: 16px !important; line-height: 1; margin: 0 -.15rem 0 0 !important; color: inherit !important; transition: transform .2s ease; }
.chip:hover .chip-ico, .watch-frame:hover .chip-ico { transform: translate(2px, -2px); }

/* now-playing header reflects live state */
.now-playing .eq i { animation: none; height: 4px; opacity: .55; }
.now-playing[data-state="playing"] .eq i { animation: eq 1s ease-in-out infinite; opacity: 1; }
.now-playing[data-state="paused"] .eq i { height: 9px; }
.now-playing[data-state="idle"] .live, .now-playing[data-state="paused"] .live { color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
.now-playing[data-state="paused"] .live { color: #fcd34d; background: rgba(245,158,11,.14); }
.now-playing[data-state="idle"] .live b, .now-playing[data-state="paused"] .live b { animation: none; background: #8b8b99; }
.now-playing[data-state="paused"] .live b { background: #f59e0b; }
.now-playing:hover { transform: none; box-shadow: none; }

/* now watching: live state from Floppy (image is a landscape backdrop) */
.watch-live { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.1rem 1.3rem; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; background: #0d0d1a; overflow: hidden; }
.now-watching[data-state="playing"] .watch-live, .now-watching[data-state="paused"] .watch-live { opacity: 1; visibility: visible; }
.wl-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; animation: wl-pan 18s ease-in-out infinite alternate; }
.wl-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,18,.95) 0%, rgba(8,8,18,.7) 38%, rgba(8,8,18,.05) 75%); }
.now-watching[data-state="paused"] .wl-bg { animation: none; filter: grayscale(.5) brightness(.8); }
@keyframes wl-pan { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.watch-frame .wl-poster { display: none; }
.wl-info { position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0; width: 100%; color: #fff; }
.wl-title { font-size: 1.25rem; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-sub { font-size: .85rem; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; margin-top: .35rem; }
.wl-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #ed1c24; transition: width 1s linear; }
.wl-time { font-size: .75rem; color: rgba(255,255,255,.65); }
.watch-live-badge { color: #fca5a5; background: rgba(237,28,36,.18); }
.watch-live-badge b { background: #ed1c24; box-shadow: 0 0 0 0 rgba(237,28,36,.7); }
.now-watching[data-state="paused"] .watch-live-badge { color: #fcd34d; background: rgba(245,158,11,.14); }
.now-watching[data-state="paused"] .watch-live-badge b { background: #f59e0b; animation: none; }
.watch-live-badge[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wl-bg { animation: none; } }
.wl-logo { max-width: 68%; max-height: 3.4rem; width: auto; height: auto; object-fit: contain; object-position: left center; align-self: flex-start; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.wl-logo[hidden] { display: none; }
.wl-info.has-logo .wl-title { display: none; }

/* Now Watching fills the card height beside On Repeat */
.now-watching .watch-frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.now-watching .watch-frame::before { content: ""; position: absolute; inset: -24px; background: var(--bg) center / cover; filter: blur(28px) brightness(.55) saturate(1.2); }
.now-watching .watch-frame > img:not(.wl-poster):not(.wl-logo) { z-index: 1; }
.now-watching .watch-live { z-index: 2; }
@media (max-width: 860px) { .now-watching .watch-frame { flex: none; aspect-ratio: 16 / 9; } }
/* logo must not inherit the full-bleed .watch-frame img rule */
.watch-frame .wl-logo { position: static; inset: auto; width: auto; height: auto; max-width: 70%; max-height: 3.6rem; transform: none; transition: none; margin-bottom: .2rem; }
.watch-frame:hover .wl-logo { transform: none; }
.watch-frame .wl-bg { filter: brightness(.7); }
.now-watching[data-state="paused"] .wl-bg { filter: grayscale(.5) brightness(.6); }
.wl-bg::after { background: linear-gradient(to top, rgba(8,8,18,.96) 0%, rgba(8,8,18,.82) 30%, rgba(8,8,18,.35) 62%, rgba(8,8,18,.1) 100%); }
.wl-time { align-self: flex-end; text-align: right; }
/* idle: plain centred Trakt card, no blurred backdrop */
.now-watching .watch-frame::before { display: none; }
.now-watching .watch-frame { background: rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; }
.now-watching .watch-frame > img:not(.wl-poster):not(.wl-logo) { position: static; inset: auto; width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 10px; }

/* ---- dock: light mode ---- */
[data-theme="light"] .dock { background: radial-gradient(120% 100% at 0% 0%, #ede7ff 0%, #e4e8fb 55%, #dde3f4 100%); box-shadow: 0 24px 60px rgba(60, 50, 120, .18); color: #1d1b2e; }
[data-theme="light"] .dcard { background: rgba(255,255,255,.62); border-color: rgba(60,50,120,.12); }
[data-theme="light"] .dcard:hover { border-color: rgba(60,50,120,.28); box-shadow: 0 14px 34px rgba(60,50,120,.16); }
[data-theme="light"] .dcard-head h3 { color: #1d1b2e; }
[data-theme="light"] .dcard-head .material-symbols-outlined { color: #6d4fd6; }
[data-theme="light"] .chip { background: rgba(60,50,120,.09); color: #3b2d85; }
[data-theme="light"] .chip:hover { background: rgba(60,50,120,.18); }
[data-theme="light"] .live { color: #15803d; background: rgba(34,197,94,.16); }
[data-theme="light"] .watch-live-badge { color: #b91c1c; background: rgba(237,28,36,.12); }
[data-theme="light"] .now-watching[data-state="paused"] .watch-live-badge { color: #a16207; background: rgba(245,158,11,.18); }
[data-theme="light"] .now-playing[data-state="idle"] .live, [data-theme="light"] .now-playing[data-state="paused"] .live { color: #4b4b63; background: rgba(60,50,120,.09); }
[data-theme="light"] .now-playing[data-state="paused"] .live { color: #a16207; background: rgba(245,158,11,.18); }
[data-theme="light"] .now-watching .watch-frame { background: rgba(60,50,120,.07); }
[data-theme="light"] .dcard-note { color: rgba(29,27,46,.65); }
/* idle Trakt card: no panel background, no zoom (zoom clipped the edges) */
.now-watching .watch-frame, [data-theme="light"] .now-watching .watch-frame { background: transparent; overflow: visible; }
.now-watching .watch-frame:hover > img:not(.wl-poster):not(.wl-logo) { transform: none; }
.now-watching .watch-frame > img:not(.wl-poster):not(.wl-logo) { transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.now-watching .watch-frame:hover > img:not(.wl-poster):not(.wl-logo) { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.now-watching .watch-live { border-radius: 14px; overflow: hidden; }

/* Now Playing header: spinning vinyl */
.vinyl-ico { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.now-playing .vinyl-ico { opacity: .6; }
.now-playing[data-state="playing"] .vinyl-ico { opacity: 1; animation: vinyl-spin 2.4s linear infinite; }
.now-playing[data-state="paused"] .vinyl-ico { opacity: .85; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .now-playing[data-state="playing"] .vinyl-ico { animation: none; } }
[data-theme="light"] .vinyl-ico { filter: drop-shadow(0 2px 4px rgba(60,50,120,.3)); }

/* hide the idle Trakt image while live (its corners showed through as white) */
.now-watching[data-state="playing"] .watch-frame > img:not(.wl-poster):not(.wl-logo),
.now-watching[data-state="paused"] .watch-frame > img:not(.wl-poster):not(.wl-logo) { visibility: hidden; }

/* header icons: On Repeat arrows flow around the loop, Now Watching is a TV that lights up while something plays */
.dcard-head .hd-ico { width: 24px; height: 24px; flex: none; color: #c4b5fd; overflow: visible; }
[data-theme="light"] .dcard-head .hd-ico { color: #6d4fd6; }
/* On Repeat: each arrow draws itself, the head lands, then the other arrow chases it round the loop */
.repeat-ico path { stroke-dasharray: 1; }
.repeat-ico .rp-head { stroke-dasharray: none; opacity: 0; }
.repeat-ico path:nth-of-type(1) { animation: rp-draw 3.2s cubic-bezier(.4, 0, .2, 1) infinite; }
.repeat-ico path:nth-of-type(2) { animation: rp-land 3.2s ease infinite; }
.repeat-ico path:nth-of-type(3) { animation: rp-draw 3.2s cubic-bezier(.4, 0, .2, 1) -1.6s infinite; }
.repeat-ico path:nth-of-type(4) { animation: rp-land 3.2s ease -1.6s infinite; }
@keyframes rp-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 32% { stroke-dashoffset: 0; } 58% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rp-land { 0%, 24% { opacity: 0; transform: translateX(-2px); } 34% { opacity: 1; transform: translateX(1px); } 42%, 58% { opacity: 1; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(0); } }
.repeat-ico path:nth-of-type(4) { animation-name: rp-land-back; }
@keyframes rp-land-back { 0%, 24% { opacity: 0; transform: translateX(2px); } 34% { opacity: 1; transform: translateX(-1px); } 42%, 58% { opacity: 1; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(0); } }
.tv-ico { transition: color .3s ease; }
.tv-ico .tv-scan { opacity: 0; }
.now-watching[data-state="playing"] .tv-ico { color: #a78bfa; }
.now-watching[data-state="paused"] .tv-ico { color: #f59e0b; }
[data-theme="light"] .now-watching[data-state="playing"] .tv-ico { color: #7c3aed; }
[data-theme="light"] .now-watching[data-state="paused"] .tv-ico { color: #d97706; }
/* like the HA monitor card: a light bar sweeps down the screen, and the card gets a soft purple wash while on */
.now-watching[data-state="playing"] .tv-ico .tv-scan { opacity: 1; animation: tv-sweep 1.1s linear infinite; }
@keyframes tv-sweep { from { transform: translateY(0); } to { transform: translateY(9px); } }
.now-watching[data-state="playing"] { box-shadow: inset 0 0 0 999px rgba(139,92,246,.14); }
@media (prefers-reduced-motion: reduce) { .repeat-ico *, .tv-ico * { animation: none !important; } .repeat-ico .rp-head { opacity: 1; } }
.now-watching[data-state="playing"]:hover { box-shadow: inset 0 0 0 999px rgba(139,92,246,.14), 0 14px 34px rgba(0,0,0,.35); }

/* On Repeat: the embed stretches to fill the card (it is cross-origin, so only its frame can be styled) */
.on-repeat { flex: 1 1 auto; position: relative; }
.repeat-body { flex: 1 1 auto; display: flex; border-radius: 16px; background-color: rgba(0,0,0,.25); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.spotify-frame { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 352px; border-radius: 16px; color-scheme: normal; }
[data-theme="light"] .repeat-body { background-color: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(60,50,120,.12); }
@media (max-width: 860px) { .spotify-frame { height: 352px; flex: none; } }

/* dark mode: tint Spotify's neutral grey player toward the dock purple (an overlay on top of the iframe, nothing inside it is touched) */
[data-theme="dark"] .repeat-body { position: relative; isolation: isolate; box-shadow: 0 0 0 1px rgba(196,181,253,.16); }
[data-theme="dark"] .repeat-body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #5b3fc4; mix-blend-mode: color; opacity: .42; pointer-events: none; }
[data-theme="dark"] .repeat-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(76,52,150,.22); mix-blend-mode: soft-light; pointer-events: none; z-index: 1; }