.vl-mobile-heading,

.vl-mobile-record,

#vl-mobile-sheet-preview,

#vl-mobile-sheet-seek-controls,

#vl-mobile-tools { display: none; }



@media (max-width: 960px) {

    #video-lab-view { padding: 12px 12px 24px !important; }

    #video-lab-view .video-lab-container { max-width: 720px; gap: 12px; }

    #video-lab-view .video-lab-header { padding: 10px 12px; }

    #video-lab-view .video-lab-title { font-size: 0.85rem; }

    #video-lab-view .video-lab-subtitle { display: none; }

    #video-lab-view .vl-mobile-record { display: block; }

    #video-lab-view .video-lab-workbench { display: block; }

    #video-lab-view .video-lab-sidebar { display: none; }

    #video-lab-view .video-lab-stage-card { padding: 10px; gap: 10px; }

    #video-lab-view .video-lab-viewport-wrap { min-height: 260px; }

    #video-lab-empty-prompt { padding: 12px !important; overflow-y: auto; box-sizing: border-box; justify-content: flex-start !important; }

    #video-lab-empty-prompt .vl-empty-reticle, #video-lab-empty-prompt .vl-empty-capabilities { display: none !important; }

    #video-lab-empty-prompt .vl-empty-title { font-size: 0.8rem !important; letter-spacing: 1px !important; }

    #video-lab-view .vl-mobile-heading {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

    }

    .vl-mobile-heading strong { color: #f1f5f9; font-size: 1.15rem; }

    .vl-mobile-heading p { color: #94a3b8; font-size: 0.8rem; line-height: 1.5; margin: 4px 0; }

    .vl-mobile-heading button {

        flex-shrink: 0;

        padding: 10px 14px;

        color: #a5f3fc;

        background: #102b38;

        border: 1px solid #297083;

        border-radius: 10px;

        font-weight: bold;

    }

        #vl-mobile-tools {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;

        margin-top: 12px;

        margin-bottom: 6px;

    }

    #video-lab-view #vl-mobile-tools .vl-tool-launcher {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        min-width: 0;

        min-height: 72px;

        border-radius: 12px;

        padding: 10px 12px;

        text-align: left;

        white-space: normal;

        letter-spacing: 0;

        position: relative;

        overflow: hidden;

        cursor: pointer;

        transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

        -webkit-tap-highlight-color: transparent;

    }



    #video-lab-view #vl-mobile-tools .vl-tool-launcher:active {

        transform: scale(0.98);

    }



    .vl-tool-launcher .vl-tab-header {

        display: flex;

        align-items: center;

        gap: 7px;

        width: 100%;

        margin-bottom: 3px;

        min-width: 0;

    }



    .vl-tool-launcher .vl-tab-icon {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 22px;

        height: 22px;

        border-radius: 6px;

        flex-shrink: 0;

    }



    .vl-tool-launcher strong {

        font-size: 0.86rem;

        font-weight: 700;

        letter-spacing: 0.3px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    .vl-tool-launcher small {

        font-size: 0.72rem;

        line-height: 1.25;

        font-weight: normal;

        margin-left: 1px;

    }



    /* Distinct categorical color accents (Deep tactical dark theme - non-blinding at night) */



    /* 1. Video & case (Tactical Cyan) */

    #video-lab-view .vl-tab-source {

        background: linear-gradient(145deg, rgba(6, 182, 212, 0.12) 0%, rgba(13, 20, 30, 0.9) 100%);

        border: 1px solid rgba(6, 182, 212, 0.32);

        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

    }

    #video-lab-view .vl-tab-source .vl-tab-icon {

        background: rgba(6, 182, 212, 0.16);

        color: #22d3ee;

        border: 1px solid rgba(6, 182, 212, 0.35);

    }

    #video-lab-view .vl-tab-source strong { color: #38bdf8; }

    #video-lab-view .vl-tab-source small { color: #94a3b8; }

    #video-lab-view .vl-tab-source:hover,

    #video-lab-view .vl-tab-source[aria-expanded="true"] {

        border-color: #38bdf8 !important;

        box-shadow: 0 0 16px rgba(6, 182, 212, 0.3) !important;

    }



    /* 2. Annotate (Live Coral / Rose) */

    #video-lab-view .vl-tab-annotate {

        background: linear-gradient(145deg, rgba(239, 68, 68, 0.12) 0%, rgba(13, 20, 30, 0.9) 100%);

        border: 1px solid rgba(239, 68, 68, 0.32);

        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

    }

    #video-lab-view .vl-tab-annotate .vl-tab-icon {

        background: rgba(239, 68, 68, 0.16);

        color: #f87171;

        border: 1px solid rgba(239, 68, 68, 0.35);

    }

    #video-lab-view .vl-tab-annotate strong { color: #fca5a5; }

    #video-lab-view .vl-tab-annotate small { color: #94a3b8; }

    #video-lab-view .vl-tab-annotate:hover,

    #video-lab-view .vl-tab-annotate[aria-expanded="true"] {

        border-color: #f87171 !important;

        box-shadow: 0 0 16px rgba(239, 68, 68, 0.3) !important;

    }



    /* 3. Enhance (Warm Amber / Gold) */

    #video-lab-view .vl-tab-filters {

        background: linear-gradient(145deg, rgba(245, 158, 11, 0.12) 0%, rgba(13, 20, 30, 0.9) 100%);

        border: 1px solid rgba(245, 158, 11, 0.32);

        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

    }

    #video-lab-view .vl-tab-filters .vl-tab-icon {

        background: rgba(245, 158, 11, 0.16);

        color: #fbbf24;

        border: 1px solid rgba(245, 158, 11, 0.35);

    }

    #video-lab-view .vl-tab-filters strong { color: #fcd34d; }

    #video-lab-view .vl-tab-filters small { color: #94a3b8; }

    #video-lab-view .vl-tab-filters:hover,

    #video-lab-view .vl-tab-filters[aria-expanded="true"] {

        border-color: #fbbf24 !important;

        box-shadow: 0 0 16px rgba(245, 158, 11, 0.3) !important;

    }



    /* 4. Analyze - ON-DEVICE AI OPTICAL & MOTION (High-Tech Violet & AI Highlight) */

    #video-lab-view .vl-tab-triage {

        background: linear-gradient(145deg, rgba(168, 85, 247, 0.18) 0%, rgba(99, 102, 241, 0.12) 60%, rgba(13, 20, 30, 0.9) 100%);

        border: 1px solid rgba(168, 85, 247, 0.5);

        box-shadow: 0 4px 18px rgba(147, 51, 234, 0.22), inset 0 0 14px rgba(168, 85, 247, 0.1);

    }

    #video-lab-view .vl-tab-triage .vl-tab-icon {

        background: rgba(168, 85, 247, 0.24);

        color: #c084fc;

        border: 1px solid rgba(168, 85, 247, 0.45);

    }

    #video-lab-view .vl-tab-triage strong {

        color: #f3e8ff;

        text-shadow: 0 0 8px rgba(192, 132, 252, 0.35);

    }

    #video-lab-view .vl-tab-triage small { color: #cbd5e1; }

    #video-lab-view .vl-tab-triage .vl-tab-ai-badge {

        display: inline-flex;

        align-items: center;

        gap: 3px;

        margin-left: auto;

        font-size: 0.6rem;

        font-weight: 800;

        letter-spacing: 0.5px;

        padding: 1px 6px;

        border-radius: 9999px;

        background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.3));

        border: 1px solid rgba(192, 132, 252, 0.65);

        color: #fdf4ff;

        text-shadow: 0 0 6px rgba(192, 132, 252, 0.6);

        box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);

    }

    #video-lab-view .vl-tab-triage:hover,

    #video-lab-view .vl-tab-triage[aria-expanded="true"] {

        border-color: #c084fc !important;

        box-shadow: 0 0 22px rgba(168, 85, 247, 0.42), inset 0 0 16px rgba(168, 85, 247, 0.18) !important;

    }



    /* 5. Clips & findings (Vault Emerald) */

    #video-lab-view .vl-tab-library {

        background: linear-gradient(145deg, rgba(16, 185, 129, 0.12) 0%, rgba(13, 20, 30, 0.9) 100%);

        border: 1px solid rgba(16, 185, 129, 0.32);

        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

    }

    #video-lab-view .vl-tab-library .vl-tab-icon {

        background: rgba(16, 185, 129, 0.16);

        color: #34d399;

        border: 1px solid rgba(16, 185, 129, 0.35);

    }

    #video-lab-view .vl-tab-library strong { color: #6ee7b7; }

    #video-lab-view .vl-tab-library small { color: #94a3b8; }

    #video-lab-view .vl-tab-library:hover,

    #video-lab-view .vl-tab-library[aria-expanded="true"] {

        border-color: #34d399 !important;

        box-shadow: 0 0 16px rgba(16, 185, 129, 0.3) !important;

    }



    /* 6. Playback tools (Tactical Blue) */

    #video-lab-view .vl-tab-tools {

        background: linear-gradient(145deg, rgba(59, 130, 246, 0.12) 0%, rgba(13, 20, 30, 0.9) 100%);

        border: 1px solid rgba(59, 130, 246, 0.32);

        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

    }

    #video-lab-view .vl-tab-tools .vl-tab-icon {

        background: rgba(59, 130, 246, 0.16);

        color: #60a5fa;

        border: 1px solid rgba(59, 130, 246, 0.35);

    }

    #video-lab-view .vl-tab-tools strong { color: #93c5fd; }

    #video-lab-view .vl-tab-tools small { color: #94a3b8; }

    #video-lab-view .vl-tab-tools:hover,

    #video-lab-view .vl-tab-tools[aria-expanded="true"] {

        border-color: #60a5fa !important;

        box-shadow: 0 0 16px rgba(59, 130, 246, 0.3) !important;

    }



    /* Night-Vision "Red Mode" Compliance */

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tool-launcher,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tool-launcher {

        background: linear-gradient(145deg, rgba(220, 38, 38, 0.12) 0%, rgba(12, 2, 2, 0.88) 100%) !important;

        border-color: rgba(220, 38, 38, 0.35) !important;

        box-shadow: none !important;

    }

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tab-icon,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tab-icon {

        background: rgba(220, 38, 38, 0.18) !important;

        color: #f87171 !important;

        border-color: rgba(220, 38, 38, 0.4) !important;

    }

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tool-launcher strong,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tool-launcher strong {

        color: #fca5a5 !important;

        text-shadow: none !important;

    }

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tool-launcher small,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tool-launcher small {

        color: rgba(248, 113, 113, 0.65) !important;

    }



    /* AI button in Red Mode: highlighted with luminous ruby/crimson */

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tab-triage,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tab-triage {

        background: linear-gradient(145deg, rgba(255, 51, 102, 0.18) 0%, rgba(185, 28, 28, 0.12) 100%) !important;

        border-color: rgba(255, 77, 109, 0.55) !important;

        box-shadow: 0 0 16px rgba(255, 51, 102, 0.25) !important;

    }

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tab-triage strong,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tab-triage strong {

        color: #ffe4e6 !important;

    }

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tab-triage .vl-tab-icon,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tab-triage .vl-tab-icon {

        background: rgba(255, 51, 102, 0.25) !important;

        color: #ff4d6d !important;

        border-color: rgba(255, 77, 109, 0.5) !important;

    }

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tab-triage .vl-tab-ai-badge,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tab-triage .vl-tab-ai-badge {

        background: rgba(255, 51, 102, 0.3) !important;

        border-color: #ff4d6d !important;

        color: #ffe4e6 !important;

        text-shadow: 0 0 6px rgba(255, 77, 109, 0.6) !important;

        box-shadow: 0 0 8px rgba(255, 51, 102, 0.4) !important;

    }

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tool-launcher:hover,

    [data-theme="red"] #video-lab-view #vl-mobile-tools .vl-tool-launcher[aria-expanded="true"],

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tool-launcher:hover,

    body.red-mode #video-lab-view #vl-mobile-tools .vl-tool-launcher[aria-expanded="true"] {

        border-color: #ff4d6d !important;

        box-shadow: 0 0 14px rgba(239, 68, 68, 0.35) !important;

    }

    #video-lab-view button, #video-lab-view summary, #video-lab-view select,

    #video-lab-view input:not([type="range"]):not([type="checkbox"]):not([type="file"]) { min-height: 44px; }

    #video-lab-view .video-lab-transport-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 4px; }

    #video-lab-view .video-lab-transport-buttons button { min-width: 0; padding: 4px; font-size: 0.65rem; }

    #video-lab-view .video-lab-transport-bar { padding: 0; }

    #vl-mobile-sheet-content .video-sidebar-panel { display: flex !important; overflow: visible; max-height: none; padding: 0; }

    #vl-mobile-sheet-content .video-sidebar-panel > * { flex-shrink: 0; min-width: 0; }

    #vl-mobile-sheet-content .video-lab-header-actions { gap: 12px; }

    #vl-mobile-sheet-content #video-lab-mount-details > div > div { flex-wrap: wrap; flex-shrink: 1 !important; min-width: 0; }

    #vl-mobile-sheet-content .camera-mount-toggle-group { flex-wrap: wrap; }

    #vl-mobile-sheet-content .video-lab-drawing-bar { margin: 0; }

    #vl-mobile-sheet-content .video-color-chip { width: 44px; flex-shrink: 0; }

    #vl-mobile-sheet-content .video-lab-disclosure > summary { display: none; }

    #vl-mobile-sheet-content .video-speed-group { flex-wrap: wrap; }

    #vl-mobile-sheet-content .video-highlight-export-bar { padding: 12px; }

    #vl-mobile-sheet-content .video-highlight-export-bar > div { flex-wrap: wrap; }

    #vl-mobile-sheet-content #vl-cadence-controls,

    #vl-mobile-sheet-content #vl-speed-controls,

    #vl-mobile-sheet-content #vl-audio-controls,

    #vl-mobile-sheet-content .video-audio-control-cluster { flex-wrap: wrap; }

    #vl-mobile-sheet-content #video-lab-case-select { width: 100%; flex-basis: 100% !important; }

    #vl-mobile-sheet-player .video-lab-transport-buttons { margin: 0; }



    #vl-mobile-sheet-overlay:not([hidden]):not([data-tool="source"]) #vl-mobile-sheet-preview {

        display: block;

        height: clamp(100px, 26dvh, 240px);

        margin: 0 12px;

        flex-shrink: 0;

        background: #000;

    }

    #vl-mobile-sheet-overlay:not([hidden]):not([data-tool="source"]) #vl-mobile-sheet-seek-controls {

        display: flex;

        align-items: center;

        gap: 8px;

        flex-shrink: 0;

        padding: 0 12px;

        min-height: 44px;

        font-size: 0.75rem;

        color: #94a3b8;

    }

    #vl-mobile-sheet-seek { flex: 1; min-width: 0; min-height: 44px; }



    /* Keep the original media node playing in place, visually above the tools. */

    #video-lab-view:has(> #vl-mobile-sheet-overlay:not([hidden]):not([data-tool="source"])) #video-lab-viewport-container {

        position: fixed;

        top: var(--vl-preview-top);

        left: var(--vl-preview-left);

        width: var(--vl-preview-width);

        height: var(--vl-preview-height);

        min-height: 0;

        max-height: none;

        box-sizing: border-box;

        z-index: 2101;

        pointer-events: none;

    }

    #video-lab-view:has(> #vl-mobile-sheet-overlay:not([hidden]):not([data-tool="source"])) #video-lab-player {

        max-height: 100%;

    }

}



    body.red-mode #video-lab-view .vl-mobile-heading button,

    [data-theme="red"] #video-lab-view .vl-mobile-heading button {

        color: #ffe4e6 !important;

        background: rgba(220, 38, 38, 0.22) !important;

        border: 1px solid rgba(220, 38, 38, 0.5) !important;

    }