/* =========================================================
   ENCBYT MEDIA PLAYER STYLES v2.1
   Path: frontend/pwa/css/media-player.css
   Security: Strict CSP Compliant
   Target: media-player.js
   Features: Non-blocking, dragable, resizable-friendly, optimized
   ========================================================= */

/* =========================================================
   1. SHARED PLAYER STYLES
   ========================================================= */

.cv-media-audio-player,
.cv-media-video-player {
    position: fixed !important;
    z-index: 99999 !important;
    background: linear-gradient(145deg, #1e1e2f, #2d2d44) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    user-select: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    animation: cvMediaSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cv-media-audio-player.is-dragging,
.cv-media-video-player.is-dragging {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
    transition: none !important;
    cursor: grabbing !important;
}

@keyframes cvMediaSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   2. AUDIO PLAYER (Bottom-Right Mini Player)
   ========================================================= */

.cv-media-audio-player {
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    width: 280px !important;
    max-width: calc(100vw - 32px) !important;
}

/* =========================================================
   3. VIDEO PLAYER (Top-Right Dragable Modal)
   ========================================================= */

.cv-media-video-player {
    top: 40px !important;
    right: 40px !important;
    bottom: auto !important;
    left: auto !important;
    width: 480px !important;
    max-width: calc(100vw - 32px) !important;
}

/* =========================================================
   4. SHARED HEADER
   ========================================================= */

.cv-media-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    cursor: grab !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
}

.cv-media-header:active {
    cursor: grabbing !important;
}

.cv-media-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
}

.cv-media-icon-audio {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
}

.cv-media-icon-video {
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
}

.cv-media-meta {
    flex: 1 !important;
    min-width: 0 !important;
}

.cv-media-title {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

.cv-media-subtitle {
    color: #818cf8 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    margin-top: 1px !important;
}

.cv-media-close-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.cv-media-close-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

/* =========================================================
   5. AUDIO BODY & CONTROLS
   ========================================================= */

.cv-media-audio-body {
    padding: 12px 14px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.cv-media-audio-body audio {
    display: none !important;
}

.cv-media-progress-track {
    width: 100% !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.cv-media-progress-fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, #8b5cf6, #6366f1) !important;
    border-radius: 2px !important;
    transition: width 0.1s linear !important;
}

.cv-media-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
}

.cv-media-btn-icon {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}

.cv-media-btn-icon:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.cv-media-btn-play {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4) !important;
    transition: transform 0.1s ease, box-shadow 0.15s ease !important;
}

.cv-media-btn-play:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.55) !important;
    transform: translateY(-1px) !important;
}

.cv-media-btn-play:active {
    transform: translateY(0) !important;
}

.cv-media-time-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

.cv-media-time {
    font-variant-numeric: tabular-nums !important;
}

/* =========================================================
   6. VIDEO BODY
   ========================================================= */

.cv-media-video-body {
    padding: 0 !important;
    background: #000000 !important;
    overflow: hidden !important;
}

.cv-media-video-body video {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    display: block !important;
    outline: none !important;
    background: #000000 !important;
    object-fit: contain !important;
}

/* =========================================================
   7. RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .cv-media-audio-player {
        width: calc(100vw - 32px) !important;
        right: 16px !important;
        bottom: 16px !important;
    }

    .cv-media-video-player {
        width: calc(100vw - 32px) !important;
        right: 16px !important;
        top: 16px !important;
    }

    .cv-media-video-body video {
        max-height: 40vh !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — MEDIA PLAYER
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .cv-media-audio-player,
[data-theme="dark"] .cv-media-video-player,
body.dark-mode .cv-media-audio-player,
body.dark-mode .cv-media-video-player {
    background: linear-gradient(145deg, var(--bg-secondary), var(--card-bg)) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .cv-media-header,
body.dark-mode .cv-media-header {
    background: var(--bg-page) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .cv-media-title,
[data-theme="dark"] .cv-media-subtitle,
body.dark-mode .cv-media-title,
body.dark-mode .cv-media-subtitle {
    color: var(--text-main) !important;
}

[data-theme="dark"] .cv-media-close-btn,
body.dark-mode .cv-media-close-btn {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .cv-media-controls,
body.dark-mode .cv-media-controls {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .cv-media-btn,
body.dark-mode .cv-media-btn {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .cv-media-btn:hover,
body.dark-mode .cv-media-btn:hover {
    color: var(--text-main) !important;
}

[data-theme="dark"] .cv-media-time-row,
body.dark-mode .cv-media-time-row {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .cv-media-progress,
body.dark-mode .cv-media-progress {
    background: var(--bg-page) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .cv-media-progress-bar,
body.dark-mode .cv-media-progress-bar {
    background: var(--accent-primary) !important;
}

[data-theme="dark"] .cv-media-video-body,
body.dark-mode .cv-media-video-body {
    background: #000000 !important;
}