/* ==========================================================================
   Aksh Niti - Google Material You Ultra-Premium Video Player Styles
   ========================================================================== */

/* Main Modal Overlay */
.quantum-video-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(9, 12, 20, 0.86);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    z-index: 9999999;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}

/* Glass Modal Shell Container - Google Material You Premium
   `position: relative` makes this the containing block for the poll and
   settings sheets, which are now its direct children. */
.quantum-video-modal-container {
    position: relative;
    width: 95%;
    max-width: 1040px;
    max-height: 94vh;
    background: #0f1420;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.12);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

/* Header Bar - Google Minimalist */
.quantum-video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #121826;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* The header title is a button: tapping it opens the question playlist. */
.quantum-video-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 4px 8px;
    margin: -4px -8px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.quantum-video-titlebar:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.28);
}

.quantum-video-titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* "Q56 • Video 56 of 100" — the old footer pill, now the header subtitle. */
.quantum-video-substatus {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #38bdf8;
    margin-top: 2px;
    min-width: 0;
}

.quantum-video-substatus > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quantum-video-substatus i {
    flex: 0 0 auto;
    font-size: 0.66rem;
    opacity: 0.85;
}

.quantum-title-caret {
    flex: 0 0 auto;
    font-size: 0.68rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.quantum-video-titlebar:hover .quantum-title-caret {
    color: #38bdf8;
}

.quantum-video-src-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 0.88rem;
}

.quantum-video-titletext {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quantum-video-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.quantum-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #38bdf8;
    font-size: 0.72rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quantum-header-icon-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.45);
}

.quantum-video-title {
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.3px;
}

.quantum-video-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

.quantum-video-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
}

/* Canvas Workspace (16:9 Aspect Ratio) */
.quantum-video-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(96vh - 65px);
    background: #000;
    overflow: hidden;
    flex: 1;
}

.quantum-video-canvas iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 🛡 Interaction shield over the iframe.
   Transparent, but it eats every pointer event so YouTube never renders its
   hover chrome (title bar / progress bar / centre play button) into the frame,
   and keyboard focus stays on our document. */
.quantum-video-shield {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ▶ Seek bar row (replaces YouTube's own progress bar) */
.quantum-seek-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 2px 6px 4px;
    box-sizing: border-box;
}

.quantum-time-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    min-width: 34px;
    text-align: center;
}

.quantum-seek-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.quantum-seek-bar {
    --seek-progress: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    position: relative;
    z-index: 2;
}

.quantum-seek-bar::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right,
        #38bdf8 0%, #38bdf8 var(--seek-progress),
        rgba(255, 255, 255, 0.18) var(--seek-progress), rgba(255, 255, 255, 0.18) 100%);
}

.quantum-seek-bar::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
}

.quantum-seek-bar::-moz-range-progress {
    height: 5px;
    border-radius: 3px;
    background: #38bdf8;
}

.quantum-seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -4px;
    border-radius: 50%;
    background: #38bdf8;
    border: 2px solid #0d121d;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
    transition: transform 0.15s ease;
}

.quantum-seek-bar::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #38bdf8;
    border: 2px solid #0d121d;
}

.quantum-seek-bar:hover::-webkit-slider-thumb,
.quantum-seek-bar:active::-webkit-slider-thumb {
    transform: scale(1.25);
}

/* Ticks marking where each playlist question starts in this video. */
.quantum-seek-marks {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 5px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.quantum-seek-marks i {
    position: absolute;
    top: 0;
    width: 2px;
    height: 5px;
    margin-left: -1px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.55);
}

/* Footer Controls Bar - Google Unified Single Pill Layout.
   `position: relative` anchors the volume popover; overflow must stay visible
   so that popover can sit above the bar. */
.quantum-video-footer {
    position: relative;
    display: flex;
    /* Column so the seek bar gets its own row above the control pill. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 14px 6px;
    background: #0d121d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    margin-top: auto;
}

/* Unified Single Control Pill Bar */
.quantum-controls-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    padding: 4px 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* On desktop the two groups are transparent wrappers, so the toolbar stays one
   flat flex row exactly as it was. The mobile block below turns them into a
   fixed transport row + a scrolling rail. */
.quantum-primary-controls,
.quantum-secondary-controls {
    display: contents;
}

.quantum-toolbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 4px;
}

.quantum-ctrl-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.quantum-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #38bdf8;
}

.quantum-ctrl-btn-active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.15) !important;
}

/* Poll sits in the rail with the other icons but keeps its purple identity. */
.quantum-ctrl-poll {
    color: #c084fc;
}

.quantum-ctrl-poll:hover {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
}

.quantum-ctrl-poll.active {
    background: rgba(168, 85, 247, 0.3) !important;
    color: #e9d5ff !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.quantum-volume-slider {
    width: 60px;
    accent-color: #38bdf8;
    cursor: pointer;
    height: 3px;
    vertical-align: middle;
}

/* 🔊 Volume popover.
   Lives in the FOOTER, above the control rail. It cannot live inside the rail:
   that element scrolls (overflow-x:auto/overflow-y:hidden), which clipped the
   popover completely — it opened but was invisible. */
.quantum-volume-panel {
    display: none;
    position: absolute;
    bottom: calc(100% - 6px);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 22px;
    background: rgba(12, 18, 32, 0.97);
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1300;
    white-space: nowrap;
    animation: quantumPopUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.quantum-volume-panel.open {
    display: flex;
}

.quantum-volume-panel .quantum-volume-slider {
    width: 110px;
    height: 20px;
}

.quantum-volume-mute-btn {
    background: transparent;
    border: none;
    color: #e2e8f0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    flex: 0 0 auto;
    transition: all 0.16s ease;
}

.quantum-volume-mute-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #38bdf8;
}

.quantum-volume-mute-btn.muted {
    color: #f87171;
}

.quantum-volume-value {
    font-size: 0.72rem;
    font-weight: 800;
    color: #94a3b8;
    min-width: 26px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}


.quantum-video-btn-compact-primary {
    padding: 5px 14px;
    font-size: 0.78rem;
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    border: none;
    color: #0f172a;
    cursor: pointer;
    border-radius: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.35);
    transition: all 0.2s ease;
}

.quantum-video-btn-compact-primary:hover {
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.55);
    transform: translateY(-1px);
}

.quantum-video-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quantum-video-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

/* ⚙️ Player Settings panel — speed, quality, captions, volume, shortcuts.
   Anchored just above the control bar so the controls stay visible while it is
   open. */
.quantum-settings-popup {
    display: none;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    bottom: 62px;
    right: 16px;
    width: 280px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 130px);
    overflow-y: auto;
    background: rgba(12, 18, 32, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6);
    z-index: 1200;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: quantumPopUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.quantum-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #f8fafc;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quantum-settings-head i {
    color: #38bdf8;
    margin-right: 6px;
}

.quantum-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quantum-settings-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #94a3b8;
}

.quantum-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quantum-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quantum-chip {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 32px;
}

.quantum-chip:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.4);
    color: #fff;
}

.quantum-chip.active {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #06131f;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

/* CC on/off switch */
.quantum-switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.quantum-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quantum-switch.on {
    background: rgba(56, 189, 248, 0.45);
    border-color: #38bdf8;
}

.quantum-switch.on .quantum-switch-knob {
    transform: translateX(20px);
    background: #38bdf8;
}

.quantum-settings-linkbtn {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.18s ease;
}

.quantum-settings-linkbtn:hover {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.quantum-settings-popup .quantum-volume-slider {
    width: 150px;
}

/* Shortcuts Modal */
.quantum-shortcuts-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(5, 8, 15, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000000;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.quantum-shortcuts-container {
    width: 95%;
    max-width: 720px;
    background: #111622;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    color: #f1f5f9;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    font-family: 'Inter', sans-serif;
}

.quantum-kbd {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-family: monospace;
}

/* Container Fullscreen Mode with Controls */
.quantum-video-modal-container:fullscreen,
.quantum-video-modal-container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
}

.quantum-video-modal-container:fullscreen .quantum-video-canvas,
.quantum-video-modal-container:-webkit-full-screen .quantum-video-canvas {
    flex: 1;
    padding-top: 0 !important;
    height: calc(100vh - 110px) !important;
    height: calc(100dvh - 110px) !important;
}

/* Floating Corner Mini Player Mode */
.quantum-video-modal-overlay.quantum-mini-mode {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

.quantum-video-modal-overlay.quantum-mini-mode .quantum-video-modal-container {
    position: fixed !important;
    bottom: 24px;
    right: 24px;
    width: 440px;
    max-width: 95vw;
    height: 250px;
    max-height: 90vh;
    min-width: 240px;
    min-height: 140px;
    z-index: 9999999 !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), 0 0 25px rgba(3, 218, 198, 0.35) !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(3, 218, 198, 0.4) !important;
    pointer-events: auto !important;
    background: #000 !important;
    resize: both;
    overflow: hidden;
    animation: quantumMiniSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Corner Resize Handle for Mini Player */
.quantum-mini-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    cursor: nwse-resize;
    z-index: 9999;
    display: none;
    touch-action: none;
}

.quantum-video-modal-overlay.quantum-mini-mode .quantum-mini-resize-handle {
    display: block;
}

.quantum-mini-resize-handle::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    border-right: 3px solid #03dac6;
    border-bottom: 3px solid #03dac6;
    border-bottom-right-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.quantum-mini-resize-handle:hover::after {
    border-color: #38bdf8;
    transform: scale(1.2);
}

/* Hide Header & Footer in Mini Player Mode for pure 100% video display */
.quantum-video-modal-overlay.quantum-mini-mode .quantum-video-header,
.quantum-video-modal-overlay.quantum-mini-mode .quantum-video-footer {
    display: none !important;
}

/* Make Video Canvas & Iframe 100% full width and height in Mini Player Mode */
.quantum-video-modal-overlay.quantum-mini-mode .quantum-video-canvas {
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: none !important;
    flex: 1 !important;
    position: relative !important;
    background: #000 !important;
}

.quantum-video-modal-overlay.quantum-mini-mode #youtubeIframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
}

/* Mini Player Hover Action Bar (only visible on hover over mini container) */
.quantum-mini-hover-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    cursor: move;
}

.quantum-video-modal-overlay.quantum-mini-mode .quantum-mini-hover-bar {
    display: flex;
}

.quantum-video-modal-overlay.quantum-mini-mode .quantum-video-modal-container:hover .quantum-mini-hover-bar {
    opacity: 1;
    pointer-events: auto;
}

.quantum-mini-drag-handle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 600;
    user-select: none;
}

.quantum-mini-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quantum-mini-icon-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.quantum-mini-icon-btn:hover {
    background: rgba(3, 218, 198, 0.3);
    border-color: #03dac6;
    color: #03dac6;
    transform: scale(1.1);
}

@keyframes quantumMiniSlideIn {
    from { transform: translateY(40px) scale(0.92); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* 📸 Camera Flash Overlay */
.quantum-flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 99999999;
    pointer-events: none;
    animation: quantumFlashAnim 0.35s ease-out forwards;
}

@keyframes quantumFlashAnim {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* 🍞 Quantum Toast Notification */
.quantum-toast-notification {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #f8fafc;
    padding: 10px 22px;
    border-radius: 24px;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100000000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quantum-toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 📜 Floating Popover Playlist Drawer (~1/3 size floating above status tag) */
.quantum-playlist-popover {
    position: absolute;
    top: 16px !important;
    bottom: 54px !important;
    left: 16px !important;
    width: 360px !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;
    max-height: calc(100% - 70px) !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.25) !important;
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: quantumPopUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes quantumPopUp {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.quantum-playlist-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.85);
}

.quantum-playlist-popover-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantum-playlist-popover-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quantum-playlist-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    color: #cbd5e1;
    font-size: 0.82rem;
}

.quantum-playlist-item:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
}

.quantum-playlist-item.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(14, 165, 233, 0.2) 100%) !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
}

.quantum-playlist-tag-btn {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.quantum-playlist-tag-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

/* 📊 Ultra-Premium Glassmorphism Poll Overlay (Base of Video Canvas) */
.quantum-poll-overlay {
    /* Anchored above the control bar (62px) rather than at the very bottom, so
       opening the poll never hides the player controls. */
    position: absolute;
    bottom: 62px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    max-width: min(580px, 94%) !important;
    min-width: 320px !important;
    background: linear-gradient(135deg, rgba(20, 25, 45, 0.45) 0%, rgba(10, 15, 30, 0.4) 100%) !important;
    backdrop-filter: blur(24px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(210%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 16px !important;
    padding: 8px 12px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 25px rgba(168, 85, 247, 0.25) !important;
    z-index: 999;
    display: none;
    flex-direction: column;
    gap: 6px !important;
    box-sizing: border-box;
    animation: quantumPollSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes quantumPollSlideUp {
    from { opacity: 0; transform: translate(-50%, 15px) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.quantum-poll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    margin-bottom: 2px;
}

.quantum-poll-title {
    display: flex;
    align-items: center;
}

.quantum-poll-badge {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(126, 34, 206, 0.35)) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
    color: #e9d5ff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3) !important;
}

.quantum-poll-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.quantum-poll-close-btn:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

.quantum-poll-options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
}

@media (max-width: 520px) {
    .quantum-poll-options-grid {
        grid-template-columns: 1fr !important;
    }
}

.quantum-poll-option-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: #f1f5f9 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.quantum-poll-option-btn:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.25) !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.35) !important;
}

.quantum-poll-opt-label {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(168, 85, 247, 0.25) !important;
    color: #d8b4fe !important;
    font-weight: 800 !important;
    font-size: 0.68rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
}

.quantum-poll-opt-text {
    flex: 1 !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}

.quantum-poll-opt-status {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Glassmorphism Feedback Glow States */
.quantum-poll-option-btn.correct {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.38) 0%, rgba(21, 128, 61, 0.3) 100%) !important;
    border-color: #22c55e !important;
    color: #f0fdf4 !important;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.45) !important;
}

.quantum-poll-option-btn.correct .quantum-poll-opt-label {
    background: #22c55e !important;
    color: #052e16 !important;
    border-color: #22c55e !important;
}

.quantum-poll-option-btn.wrong {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.38) 0%, rgba(185, 28, 28, 0.3) 100%) !important;
    border-color: #ef4444 !important;
    color: #fef2f2 !important;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.45) !important;
}

.quantum-poll-option-btn.wrong .quantum-poll-opt-label {
    background: #ef4444 !important;
    color: #450a0a !important;
    border-color: #ef4444 !important;
}

/* ==========================================================================
   👆 TOUCH GESTURE ZONES
   Double-tap the left/right third to jump 10s, the way the YouTube app does.
   Hidden on pointer-precise devices so a mouse never loses access to the
   iframe. They stop at 78% height on purpose: YouTube's own control strip
   lives below that and must stay tappable.
   ========================================================================== */
.quantum-gesture-zone {
    display: none;
    position: absolute;
    top: 8%;
    bottom: 22%;
    width: 32%;
    z-index: 40;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.quantum-gesture-left { left: 0; }
.quantum-gesture-right { right: 0; }

.quantum-gesture-ripple {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}

.quantum-gesture-ripple b {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.quantum-gesture-zone.gesture-active .quantum-gesture-ripple {
    animation: quantumGesturePulse 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes quantumGesturePulse {
    0% { opacity: 0; transform: scale(0.6); }
    35% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 0; transform: scale(1.2); }
}

/* Coarse pointer (finger / stylus) → gestures on. */
@media (pointer: coarse) {
    .quantum-gesture-zone { display: flex; }
}

/* ==========================================================================
   📱 MOBILE / TABLET LAYOUT
   The player was built for a 1040px desktop shell: on a phone the toolbar
   overflowed, the drawer covered the video, and the mini player was unusable.
   Below 900px it becomes a full-bleed sheet with scrollable control rails and
   touch-sized targets.
   ========================================================================== */
@media (max-width: 900px) {
    .quantum-video-modal-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .quantum-video-modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        /* Respect the notch / home indicator. */
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }

    /* ---- Header: title on top, actions on a swipeable rail below ---- */
    .quantum-video-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px 8px;
        position: relative;
    }

    /* Grab affordance for the swipe-down-to-minimise gesture. */
    .quantum-video-header::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.22);
    }

    .quantum-video-header > div:first-child {
        padding-top: 6px;
        padding-right: 40px;
        min-width: 0;
    }

    .quantum-video-title {
        font-size: 0.8rem;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Title block is the playlist trigger — give it a real tap target. */
    .quantum-video-titlebar {
        padding: 8px;
        margin: 0;
        min-height: 46px;
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .quantum-video-substatus { font-size: 0.68rem; }

    .quantum-video-header-actions {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        gap: 6px !important;
    }

    .quantum-video-header-actions::-webkit-scrollbar { display: none; }

    .quantum-video-btn-compact {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 0.74rem;
        min-height: 36px;
    }

    /* Close button pinned to the header's top-right corner. */
    .quantum-video-header .quantum-video-close-btn {
        position: absolute;
        top: 10px;
        right: 12px;
        width: 34px;
        height: 34px;
    }

    /* ---- Canvas ----
       `margin: auto 0` lets the free space split evenly above and below the
       video, so it sits centred between the header and the controls. Without it
       the footer's `margin-top: auto` shoved every spare pixel below the video
       and left a tall dead black band in the middle of the screen. */
    .quantum-video-canvas {
        max-height: none;
        /* Shrinkable: when the Poll or Settings panel opens it needs room, and
           the video giving some back is far better than the control bar being
           pushed off the bottom of the screen. min-height keeps it watchable. */
        flex: 0 1 auto;
        min-height: 140px;
        margin: auto 0;
    }

    /* ---- Footer: fixed transport row + scrolling secondary rail ----
       overflow stays visible so the volume popover can escape upward. */
    .quantum-video-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        margin-top: 0;
        overflow: visible;
    }

    /* Bigger scrub target for a finger. */
    .quantum-seek-row { padding: 2px 2px 0; gap: 8px; }
    .quantum-seek-bar { height: 24px; }
    .quantum-seek-bar::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; }
    .quantum-seek-bar::-moz-range-thumb { width: 16px; height: 16px; }

    .quantum-controls-toolbar {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        border-radius: 20px;
        padding: 8px;
        overflow: visible;
    }

    /* Primary transport: always on screen, centred, never scrolls away. */
    .quantum-primary-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        order: 1;
    }

    /* Everything else shares one horizontally scrollable rail. */
    .quantum-secondary-controls {
        display: flex;
        align-items: center;
        gap: 6px;
        order: 2;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .quantum-secondary-controls::-webkit-scrollbar { display: none; }

    /* Both secondary chunks sit on the same rail, split by the tail marker. */
    .quantum-secondary-tail { order: 3; }

    .quantum-ctrl-btn {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    /* Play/Pause is the primary action — make it unmistakable. */
    .quantum-ctrl-play {
        width: 54px;
        height: 54px;
        font-size: 1.25rem;
        background: #38bdf8;
        color: #06131f;
    }

    .quantum-ctrl-play:hover,
    .quantum-ctrl-play:active {
        background: #7dd3fc;
        color: #06131f;
    }

    .quantum-playlist-tag-btn {
        flex: 0 0 auto;
        min-height: 34px;
        margin-left: 0 !important;
    }

    .quantum-toolbar-divider { flex: 0 0 auto; }

    /* Volume popover: wider slider and a bigger thumb for a finger. */
    .quantum-volume-panel {
        padding: 10px 14px;
        gap: 10px;
    }

    .quantum-volume-panel .quantum-volume-slider {
        width: 130px;
        height: 26px;
    }

    .quantum-volume-mute-btn { width: 34px; height: 34px; }

    /* ---- Playlist drawer becomes a bottom sheet ---- */
    .quantum-playlist-popover {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 68vh !important;
        max-height: 68vh !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: none !important;
        background: rgba(12, 18, 32, 0.97) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: quantumSheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes quantumSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .quantum-playlist-popover-header {
        padding: 14px 16px 12px;
        position: relative;
    }

    .quantum-playlist-popover-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.22);
    }

    .quantum-playlist-item {
        padding: 14px 14px;
        font-size: 0.88rem;
        border-radius: 14px;
    }

    /* ---- Poll: in the flex flow, directly above the controls ----
       As a fixed bottom sheet it sat ON TOP of the control bar, so answering a
       poll meant losing play/pause, next, everything. In normal flow it takes
       its own slice of the column and the controls stay put. */
    .quantum-poll-overlay {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 16px !important;
        margin: 0 10px 4px !important;
        width: calc(100% - 20px) !important;
        padding: 10px 12px !important;
        max-height: 46vh;
        overflow-y: auto;
        flex: 0 0 auto;
        animation: quantumSheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .quantum-poll-option-btn {
        padding: 11px 12px !important;
        font-size: 0.86rem !important;
        min-height: 44px;
    }

    .quantum-poll-opt-label {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.76rem !important;
    }

    /* ---- Settings: in the flex flow, exactly like the poll ----
       Pinned to the bottom of the screen it would sit on top of the control bar
       — the same problem the poll had. In flow it takes its own band between
       the video and the controls, so speed/quality/CC can be changed while the
       transport buttons stay right there. */
    .quantum-settings-popup {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin: 0 10px 4px;
        max-height: 42vh;
        overflow-y: auto;
        flex: 0 0 auto;
        border-radius: 16px;
        padding: 14px;
        gap: 14px;
        animation: quantumSheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .quantum-chip {
        padding: 10px 14px;
        font-size: 0.82rem;
        min-height: 40px;
    }

    .quantum-settings-popup .quantum-volume-slider {
        width: 55%;
        height: 24px;
    }

    /* ---- Shortcuts modal stacks ---- */
    .quantum-shortcuts-container {
        padding: 18px;
        max-height: 88vh;
        overflow-y: auto;
    }

    .quantum-shortcuts-container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ---- Mini player sized for a phone ---- */
    .quantum-video-modal-overlay.quantum-mini-mode .quantum-video-modal-container {
        width: 62vw;
        height: auto;
        aspect-ratio: 16 / 9;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        min-width: 180px;
        padding: 0;
    }

    /* On touch there is no hover, so the mini bar has to stay visible. */
    .quantum-video-modal-overlay.quantum-mini-mode .quantum-mini-hover-bar {
        opacity: 1;
        pointer-events: auto;
    }

    .quantum-mini-icon-btn {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .quantum-mini-resize-handle {
        width: 34px;
        height: 34px;
    }

    .quantum-toast-notification {
        top: calc(12px + env(safe-area-inset-top, 0px));
        max-width: 92vw;
        text-align: center;
        font-size: 0.8rem;
        padding: 10px 16px;
    }
}

/* Small phones: tighten the icon rail so all of it fits without scrolling. */
@media (max-width: 560px) {
    .quantum-video-badge { display: none; }

    /* 10 icons + 2 dividers have to fit a 375–440px rail — the Poll button
       joined this row, which pushed it over the edge. */
    .quantum-ctrl-btn { width: 35px; height: 35px; font-size: 0.9rem; }
    .quantum-ctrl-play { width: 48px; height: 48px; }
    .quantum-secondary-controls { gap: 3px; }
    .quantum-controls-toolbar { padding: 7px 5px; }

    /* If the rail still cannot fit everything, fade its right edge so it is
       obvious there is more to swipe to rather than looking clipped. */
    .quantum-secondary-controls {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    }

    .quantum-playlist-popover { height: 74vh !important; max-height: 74vh !important; }
}

/* Narrow phones (iPhone SE/13 mini class): squeeze the icon rail so all ten
   controls sit on screen instead of needing a swipe. */
@media (max-width: 400px) {
    .quantum-ctrl-btn { width: 32px; height: 32px; font-size: 0.85rem; }
    .quantum-ctrl-play { width: 44px; height: 44px; font-size: 1.05rem; }
    .quantum-secondary-controls { gap: 2px; }
    .quantum-controls-toolbar { padding: 6px 3px; }
    .quantum-toolbar-divider { margin: 0 1px; }
    .quantum-time-label { min-width: 30px; font-size: 0.66rem; }
    .quantum-seek-row { gap: 6px; padding: 2px 0 0; }
}

/* ==========================================================================
   ↔️ LANDSCAPE PHONE / FULLSCREEN
   In landscape the video is the whole point, so the chrome collapses to a
   single compact row above and below it and the video takes the rest.
   ========================================================================== */
@media (max-width: 950px) and (orientation: landscape) {
    /* A landscape phone can be wider than the 900px portrait breakpoint, so the
       full-bleed shell has to be restated here. Without it the container kept
       its desktop `height: auto`, the canvas had no space to flex into, and the
       video collapsed to zero height. */
    .quantum-video-modal-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .quantum-video-modal-container {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }

    .quantum-video-header {
        flex-direction: row;
        align-items: center;
        padding: 4px 10px;
        gap: 8px;
    }

    .quantum-video-header::before { display: none; }
    .quantum-video-header .quantum-video-close-btn { position: static; width: 30px; height: 30px; }
    .quantum-video-title { font-size: 0.74rem; }
    .quantum-video-titlebar { min-height: 34px; padding: 4px 8px; }
    .quantum-video-substatus { font-size: 0.64rem; }

    /* Video absorbs everything that is left. min-height is a floor so the
       canvas can never be flexed away to nothing. */
    .quantum-video-canvas {
        flex: 1 1 auto;
        margin: 0;
        aspect-ratio: auto;
        min-height: 45vh;
        max-height: none;
    }

    /* One compact row: transport + icons side by side, not stacked. */
    .quantum-video-footer { padding: 2px 8px calc(4px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
    .quantum-seek-row { padding: 0 2px; }
    .quantum-seek-bar { height: 18px; }
    .quantum-time-label { font-size: 0.64rem; min-width: 30px; }

    .quantum-controls-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        padding: 4px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .quantum-controls-toolbar::-webkit-scrollbar { display: none; }

    .quantum-primary-controls,
    .quantum-secondary-controls {
        order: 0;
        overflow: visible;
        gap: 5px;
    }

    .quantum-ctrl-btn { width: 34px; height: 34px; font-size: 0.85rem; }
    .quantum-ctrl-play { width: 40px; height: 40px; font-size: 0.95rem; }
    .quantum-playlist-tag-btn { min-height: 28px; font-size: 0.68rem !important; }
    .quantum-toolbar-divider { margin: 0 2px; }

    /* Sheets stay clear of the controls and use the extra width. */
    .quantum-playlist-popover { height: 86vh !important; max-height: 86vh !important; width: 380px !important; left: 0 !important; right: auto !important; }
    .quantum-settings-popup { max-height: 80vh; }
    .quantum-poll-overlay { max-height: 52vh; }
    .quantum-poll-options-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* True fullscreen: the container fills the screen, so drop the rounded shell. */
.quantum-video-modal-container:fullscreen .quantum-video-canvas,
.quantum-video-modal-container:-webkit-full-screen .quantum-video-canvas {
    flex: 1 1 auto;
    margin: 0;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none !important;
}