/*
 * Motion tokens + shared animated surfaces (Spec 9).
 *
 * Tokens let every panel/menu transition in the SPA share a consistent
 * feel. `--motion-duration-standard` is the default for opening/closing
 * overlays, filter panels, and modals; `--motion-duration-short` for
 * micro-interactions like hover/active pulses; `--motion-ease` a cubic
 * that plays well at both durations (Material 3-ish).
 *
 * Any CSS rule writing a raw `transition: ... 250ms ...` is a bug — use
 * the tokens so the feel stays coordinated.
 */

:root {
    --motion-duration-short: 180ms;
    --motion-duration-standard: 240ms;
    /* Long duration reserved for large spatial transitions (page pushes,
       hero element reveals). Avoid for most UI — it feels sluggish. */
    --motion-duration-long: 500ms;
    --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect prefers-reduced-motion — honour user accessibility preference. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration-short: 0ms;
        --motion-duration-standard: 0ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------
 * Toast — non-blocking status message system.
 * Used for recording started, source sync complete, favourite toggled,
 * playback errors, etc. Drop-in replacement for alert() calls.
 * ------------------------------------------------------------------ */

.toast-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10100;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 48px));
}

.toast {
    pointer-events: auto;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--color-bg-primary, #0d0f14);
    color: var(--color-text-primary, #f0f0f0);
    border: 1px solid var(--color-border, #333);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    font-size: 0.92rem;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transform: translateY(16px);
    opacity: 0;
    transition: transform var(--motion-duration-standard) var(--motion-ease),
                opacity var(--motion-duration-standard) var(--motion-ease);
}

.toast.visible {
    transform: translateY(0);
    opacity: 1;
}

.toast.toast-success { border-left: 3px solid #4caf50; }
.toast.toast-warning { border-left: 3px solid #ffb300; }
.toast.toast-error   { border-left: 3px solid #e53935; }
.toast.toast-info    { border-left: 3px solid var(--color-accent, #7c5cff); }

.toast-close {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin-left: auto;
}

/* ------------------------------------------------------------------
 * Skeleton — shimmer placeholder during data fetches.
 * Usage:
 *   <div class="skeleton skeleton-card"></div>
 *   <div class="skeleton skeleton-row"></div>
 * ------------------------------------------------------------------ */

.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: skeleton-shimmer 1.3s linear infinite;
}

@keyframes skeleton-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.skeleton-card {
    width: 100%;
    aspect-ratio: 2 / 3;
}

.skeleton-row {
    height: 60px;
    margin-bottom: 8px;
}

.skeleton-text {
    height: 12px;
    margin: 6px 0;
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

/* ------------------------------------------------------------------
 * LAN Cast modal (Spec 8)
 * ------------------------------------------------------------------ */

.lan-cast-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}

.lan-cast-overlay.visible { display: flex; }

.lan-cast-modal {
    background: var(--color-bg-primary, #0d0f14);
    color: var(--color-text-primary, #f0f0f0);
    border: 1px solid var(--color-border, #333);
    border-radius: 10px;
    max-width: 540px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lan-cast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border, #333);
}

.lan-cast-header h2 { margin: 0; font-size: 1.05rem; }

.lan-cast-close {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.lan-cast-body { padding: 16px 18px 18px; }

.lan-cast-desc { margin: 0 0 12px; color: var(--color-text-secondary, #a0a0a0); font-size: 0.95rem; }

.lan-cast-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.lan-cast-url {
    flex: 1;
    padding: 8px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    border: 1px solid var(--color-border, #333);
    border-radius: 6px;
    overflow-x: auto;
}

.lan-cast-hint { margin-top: 10px; }

.lan-cast-qr {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    min-height: 0;
}

.lan-cast-qr svg {
    background: #fff;
    border-radius: 4px;
    padding: 4px;
}

/* ------------------------------------------------------------------
 * Recordings page (Spec 7)
 * ------------------------------------------------------------------ */

.recordings-header { padding: 16px 20px 8px; }
.recordings-header h2 { margin: 0 0 4px; }

.recordings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 20px 24px;
}

.recordings-day-header {
    margin-top: 14px;
    padding: 4px 2px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #a0a0a0);
    border-bottom: 1px solid var(--color-border, #333);
}

.recording-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border, #333);
    border-radius: 8px;
}

.recording-info { flex: 1; min-width: 0; }
.recording-title { font-weight: 500; }
.recording-meta { font-size: 0.85rem; color: var(--color-text-secondary, #a0a0a0); }
.recording-error { color: #e53935; }
.recording-active { color: #ffb300; font-weight: 600; }
.recording-actions { flex-shrink: 0; }

.recording-badge-cloud {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.18);
    color: var(--color-accent, #7c5cff);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.hint-warn { color: #ffb300 !important; }

/* ------------------------------------------------------------------
 * Chromecast active-session pill (Spec 8.2)
 * ------------------------------------------------------------------ */

.cast-active-overlay {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    animation: cast-pill-pulse 2.4s ease-in-out infinite;
}

@keyframes cast-pill-pulse {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 0.6; }
}

/* ------------------------------------------------------------------
 * Live rewind active badge (Spec 7.2)
 * ------------------------------------------------------------------ */

.player-rewind-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 15;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.22);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    pointer-events: none;
    backdrop-filter: blur(2px);
}