/* ==========================================
   SalmasFlix — Gallery · Inline video player modal
   Extracted from gallery.css in Phase 7 CSS refactor.

   The inline solo-player surface that opens when a user taps
   a movie/episode card (the duo-capable sync-tab player lives
   in media.css). Covers every piece of chrome inside and
   around that lightbox:
     - .modal-overlay backdrop, .media-disconnect-overlay
       partner-dropout state, .modal-header + .close-modal +
       .subtitle-select + .header-controls
     - .video-hint, .video-wrapper, #video-player native tag
     - .video-watching-together sync pill
     - .video-add-to-sync-btn "sync this" entry point
     - .video-invite-toast prompt
     - .video-chat-toggle + .video-mini-chat* (overlay chat)
     - .video-reactions-overlay + .video-floating-emoji +
       .video-reaction-bar + .video-reaction-btn
     - .video-fullscreen-btn, video::cue, video::-webkit-*
     - .custom-controls, .video-controls, .control-btn,
       .progress-*, .time-display, .volume-*, .speed-select,
       .download-btn, .video-loading, .loading-spinner
     - Fullscreen + iOS fake-fullscreen variants

   Scoped entirely to the .video-modal / .video-* /
   .modal-content / .media-disconnect-* / .modal-overlay /
   .modal-header / .close-modal / .subtitle-* / .video-wrapper
   / #video-player / .custom-controls / .video-controls /
   .control-btn / .progress-* / .volume-* / .speed-select /
   .download-btn / .video-loading / .loading-spinner /
   video:: / *:fullscreen surfaces — zero overlap with card
   chrome, detail modal, or book reader.

   NOTE: tests/modals.test.js pins 4 snippets in gallery.css
   (the scoped .video-modal .modal-content base + 769px desktop
   + 768px mobile `width: 90%` + the literal 1400px string).
   Those kept-in-main snippets live in gallery.css; everything
   else moved here. This file is loaded AFTER gallery.css so
   on cascade any duplicate property wins from here.

   All accent colors use theme tokens so each surface retints
   with the active theme.
   ========================================== */

@layer features {

/* Backdrop + disconnect overlay */
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Media disconnect overlay */
.media-disconnect-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.media-disconnect-overlay.hidden { display: none; }
.media-disconnect-content {
    text-align: center;
    color: rgba(255,255,255,0.9);
}
.media-disconnect-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    animation: pulse-dot 2s infinite;
}
.media-disconnect-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.media-disconnect-sub {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid rgba(var(--secondary-rgb),0.2);
    flex-shrink: 0;
    gap: var(--spacing-sm);
}

.modal-header h2 {
    font-size: clamp(0.75rem, 3vw, 1.25rem);
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left;
    min-width: 0;
}

.close-modal {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.close-modal:hover,
.close-modal:active {
    background: var(--accent-secondary);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.subtitle-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    background: #222;
    border: 1px solid rgba(var(--secondary-rgb),0.3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.subtitle-select option {
    color: #fff;
    background: #222;
}

.subtitle-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.video-hint {
    text-align: center;
    padding: var(--spacing-xs);
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.8);
}

.video-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16/9;
}

#video-player {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: contain;
}

/* Watching Together indicator */
.video-watching-together {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    animation: watchingPulse 2s ease-in-out infinite;
}
.video-watching-together::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
}
.video-watching-together.hidden { display: none; }

@keyframes watchingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Video Sync Button */
/* Add to Sync button */
.video-add-to-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 16px;
    border: 1px solid rgba(var(--primary-rgb),0.3);
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.14), rgba(var(--secondary-rgb),0.1));
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.video-add-to-sync-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.26), rgba(var(--secondary-rgb),0.2));
    border-color: rgba(var(--primary-rgb),0.55);
    color: var(--primary-light);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),0.22);
}
.video-add-to-sync-btn svg { stroke: currentColor; }

/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .video-add-to-sync-btn .sync-btn-label { display: none; }
    .video-add-to-sync-btn { padding: 6px 8px; }
}

/* Video invite toast */
.video-invite-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 2500;
    background: rgba(20, 15, 30, 0.95);
    border: 1px solid rgba(var(--secondary-alt-rgb),0.4);
    border-radius: 16px;
    padding: 24px 28px;
    text-align: center;
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    max-width: 320px;
    width: 90vw;
}
.video-invite-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.video-invite-toast h3 {
    color: var(--accent-primary, var(--secondary-alt));
    margin: 0 0 6px;
    font-size: 1rem;
}
.video-invite-toast p {
    color: rgba(255,255,255,0.7);
    margin: 0 0 16px;
    font-size: 0.85rem;
}
.video-invite-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.video-invite-actions button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
    font-family: inherit;
}
.video-invite-join {
    background: linear-gradient(135deg, var(--secondary-alt), var(--secondary-dark));
    color: #fff;
}
.video-invite-join:hover { filter: brightness(1.15); }
.video-invite-decline {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.video-invite-decline:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Video chat toggle in reaction bar */
.video-chat-toggle {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    margin-left: auto;
}
.video-chat-toggle:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); }
.video-chat-toggle.active { background: rgba(var(--secondary-alt-rgb),0.3); }

/* Mini chat inside video modal */
.video-mini-chat {
    display: flex;
    flex-direction: column;
    max-height: 180px;
    background: rgba(0,0,0,0.85);
    border-top: 1px solid rgba(var(--secondary-rgb),0.2);
    flex-shrink: 0;
}
.video-mini-chat.hidden { display: none; }

.video-mini-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--secondary-rgb),0.3) transparent;
}
.video-mini-chat-messages::-webkit-scrollbar { width: 4px; }
.video-mini-chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--secondary-rgb),0.3); border-radius: 2px; }

.video-mini-msg {
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(255,255,255,0.85);
    padding: 2px 0;
}
.video-mini-msg .vm-name {
    font-weight: 600;
    color: var(--secondary-alt);
    margin-right: 6px;
}
.video-mini-msg.vm-mine .vm-name { color: var(--primary); }

.video-mini-chat-input {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.video-mini-chat-input input {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 6px 12px;
    color: #fff;
    font-size: 0.8rem;
    outline: none;
    font-family: inherit;
}
/* Phase 8.5 contrast — 0.35 → 0.55 on dark bg for placeholder text. */
.video-mini-chat-input input::placeholder { color: var(--text-placeholder); }
.video-mini-chat-input input:focus { border-color: rgba(var(--secondary-alt-rgb),0.4); }
.video-mini-chat-input button {
    background: linear-gradient(135deg, var(--secondary-alt), var(--secondary-dark));
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.2s;
}
.video-mini-chat-input button:hover { filter: brightness(1.15); }

.video-reactions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.video-floating-emoji {
    position: absolute;
    font-size: 2rem;
    animation: floatUpEmoji 2s ease-out forwards;
    pointer-events: none;
}

@keyframes floatUpEmoji {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-120px) scale(1.5); }
}

.video-reaction-bar {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background: rgba(0,0,0,0.6);
    flex-wrap: wrap;
}

.video-reaction-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 20px;
    padding: 6px 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.video-reaction-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.2);
}

/* Hide download and native fullscreen button in video controls */
video::-webkit-media-controls-download-button {
    display: none !important;
}
video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

/* Custom fullscreen button */
.video-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.video-fullscreen-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

/* Transparent subtitle background */
video::cue {
    background: transparent;
    color: white;
    font-size: clamp(0.9rem, 2.5vw, 1.8rem);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), -1px -1px 2px rgba(0, 0, 0, 0.9);
}

/* Larger subtitles in fullscreen / landscape */
video:fullscreen::cue,
*:fullscreen video::cue {
    font-size: clamp(1.2rem, 3vw, 2.5rem);
}

/* Portrait mobile - smaller subtitles */
@media (orientation: portrait) and (max-width: 768px) {
    video::cue {
        font-size: clamp(0.75rem, 3.5vw, 1.2rem);
    }
}

/* Custom Video Controls */
.custom-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.9);
    border-top: 1px solid rgba(var(--secondary-rgb),0.2);
    flex-wrap: wrap;
}

.control-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(145deg, #4a4a6a, #3a3a5a);
    border: 1px solid rgba(var(--secondary-rgb),0.3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.control-btn:hover {
    background: linear-gradient(145deg, #5a5a7a, #4a4a6a);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.speed-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(145deg, #4a4a6a, #3a3a5a);
    border: 1px solid rgba(var(--secondary-rgb),0.3);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.speed-select:focus {
    outline: none;
    border-color: var(--primary);
}

.download-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #0d0b1e;
}

.download-btn:hover {
    box-shadow: 0 4px 15px rgba(var(--primary-rgb),0.5);
}


/* Video Loading Overlay */
.video-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    gap: var(--spacing-md);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Custom Video Controls */
.video-controls {
    display: flex;
    align-items: center;
    gap: clamp(4px, 2vw, var(--spacing-md));
    padding: var(--spacing-sm) var(--spacing-md);
    padding-bottom: calc(var(--spacing-sm) + var(--safe-area-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7));
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Hide controls on touch devices until tapped */
@media (hover: none) and (pointer: coarse) {
    .video-controls {
        transition: opacity var(--transition-normal);
    }

    .video-controls.visible {
        opacity: 1;
    }
}

.control-btn {
    width: clamp(32px, 10vw, 44px);
    height: clamp(32px, 10vw, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 4vw, 1.25rem);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.control-btn:hover,
.control-btn:active {
    background: var(--accent-primary);
    color: #0d0b1e;
}

.progress-container {
    flex: 1;
    min-width: 100px;
    height: clamp(6px, 2vw, 10px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    order: 10;
    width: 100%;
    margin-top: var(--spacing-xs);
}

/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (min-width: 768px) {
    .progress-container {
        order: 0;
        width: auto;
        margin-top: 0;
    }
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 5px;
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none;
}

.progress-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    left: 0%;
    box-shadow: 0 0 10px var(--accent-glow);
    pointer-events: none;
}

.time-display {
    font-size: clamp(0.7rem, 2.5vw, 0.875rem);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: fit-content;
    text-align: center;
    white-space: nowrap;
}

.volume-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Hide volume slider on mobile */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .volume-slider {
        display: none;
    }
}

.volume-slider {
    width: clamp(50px, 10vw, 80px);
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.speed-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: inherit;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.speed-select:hover,
.speed-select:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* Hide less essential controls on very small screens */
/* breakpoint snap 400px -> 480px (Phase 7.6 ladder) */
@media (max-width: 480px) {

    #pip-btn,
    #rewind-btn,
    #forward-btn {
        display: none;
    }
}

/* ==========================================
   FULLSCREEN STYLES
   ========================================== */

.modal-content:fullscreen,
.modal-content:-webkit-full-screen {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.modal-content:fullscreen .video-wrapper,
.modal-content:-webkit-full-screen .video-wrapper {
    flex: 1;
}

.modal-content:fullscreen #video-player,
.modal-content:-webkit-full-screen #video-player {
    max-height: 100%;
}

.modal-content:fullscreen .video-reaction-bar,
.modal-content:-webkit-full-screen .video-reaction-bar {
    position: relative;
    z-index: 10;
}

.modal-content:fullscreen .video-mini-chat,
.modal-content:-webkit-full-screen .video-mini-chat {
    max-height: 200px;
    z-index: 10;
}

.modal-content:fullscreen .video-reactions-overlay,
.modal-content:-webkit-full-screen .video-reactions-overlay {
    z-index: 10;
}

/* iOS fake fullscreen (no Fullscreen API support for divs) */
.modal-content.ios-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
}
.modal-content.ios-fullscreen .video-wrapper { flex: 1; }
.modal-content.ios-fullscreen #video-player { max-height: 100%; }
.modal-content.ios-fullscreen .video-reaction-bar { position: relative; z-index: 10; }
.modal-content.ios-fullscreen .video-mini-chat { max-height: 200px; z-index: 10; }
.modal-content.ios-fullscreen .video-reactions-overlay { z-index: 10; }

} /* end @layer features */