/* EMDR integrated session styles — extracted from emdr-integrated-session.html (Phase 1 refactor).
 * Load order: single file preserves original cascade. APP_VERSION cache-bust on <link> in HTML.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #000; /* Black background to match animation */
    min-height: 100vh;
    color: #333;
    overflow-x: hidden;
}

/* Theme toggle (default is dark, light mode is opt-in) */
body.theme-light {
    background: #f3f4f6;
    color: #1f2937;
}

/* Video Section - Below fixed controls */
.video-section {
    position: fixed;
    top: 100px; /* Position below fixed controls */
    left: 0;
    right: 0;
    height: 250px; /* Made taller for better video visibility */
    background: #000;
    z-index: 999;
    display: flex;
    gap: 10px;
    padding: 10px;
}

/* Twin video tiles hidden until first successful getUserMedia — avoids two dark bands behind/blurring through the Camera & Mic modal */
body:not(.session-media-ready) .video-section {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* [v2.5.112 + v2.5.113] Client-only render gate covering every layer that flashes during the admit window between getUserMedia() granting and performFullscreenToggle() finishing. Until `body.session-fullscreen-applied` is set (added in performFullscreenToggle's "Entered fullscreen video mode" branch), suppress: (a) the BLS-mode `.main-content` / `.emdr-canvas-container` so the EMDR canvas can't paint full-size for one frame; and (b) the `.video-section` itself so the BLS-mode corner PIPs (`body.client:not(:has(.video-section.fullscreen)) .video-container:first-child` bottom-left local + `.video-container:last-child` bottom-right remote, ~lines 121-185) can't render before performFullscreenToggle() reassigns them to pip-video / fullscreen-video. Once the sentinel is set the rule releases and normal BLS toggle behaviour resumes (visibility tracks `.video-section.fullscreen` thereafter). Therapist unaffected — gated on `body.client`. */
body.client:not(.session-fullscreen-applied) .main-content,
body.client:not(.session-fullscreen-applied) .emdr-canvas-container,
body.client:not(.session-fullscreen-applied) .video-section {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* [v2.8.182] Therapist: hide video tiles until first video-mode fullscreen (same `session-fullscreen-applied`
   sentinel as client). Prevents the brief BLS 70/30 column / white-frame flash after getUserMedia when
   initializeTherapistView() or BlsRailCollapse.init() run before attemptFullscreenInit() finishes. */
body.therapist:not(.session-fullscreen-applied) .video-section {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* [v2.8.188] Therapist startup/connect: stay in video mode until an intentional BLS toggle.
   If `.fullscreen` drops for a frame during WebRTC handshake, BLS 70/30 rules must not flash through.
   `session-video-mode-prefer` is cleared in performFullscreenToggle() when entering BLS. */
body.therapist.session-video-mode-prefer .video-section:not(.fullscreen) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Therapist Video→BLS: hide 70/30 grid until layout + drawer are painted (v2.8.189). */
body.therapist.bls-layout-entering .video-section {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Therapist View - Full screen layout with PIPs */
body.therapist .video-section {
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto; /* Full height */
    display: block; /* Not flex - use absolute positioning */
    padding: 0;
    background: #000;
}

/* Client layout - Full screen with PIP videos at bottom corners */
body.client .video-section {
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto; /* Full height */
    display: block; /* Not flex - use absolute positioning */
    padding: 0;
    background: transparent; /* Transparent so animation shows through */
    z-index: 1; /* Below main-content so animation is visible */
    pointer-events: none; /* Allow clicks to pass through to animation */
}

/* Re-enable pointer events for video containers and ensure they're visible */
body.client .video-section .video-container {
    pointer-events: auto;
    z-index: 1001 !important; /* Ensure videos are above animation */
}

/* Client View - Client Own Video (localVideo) as PIP (Bottom Left) - BLS mode only */
/* First video-container contains localVideo (client's own video) */
/* PIP defaults — match fullscreen self-PIP (200×150); keep in sync with JS resize clamps and initializeClientVideoPIP */
body.client:not(:has(.video-section.fullscreen)) .video-container:first-child,
body.client .video-section:not(.fullscreen) .video-container:first-child {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 200px !important;
    height: 150px !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    z-index: 1001 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    background: #000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 120px !important;
    min-height: 90px !important;
    max-width: 400px !important;
    max-height: 300px !important;
    resize: none !important; /* Disable browser native resize handle */
}

body.client .video-container:first-child video {
    object-fit: cover;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    transform: scaleX(-1); /* Mirror local video (self-view) for more intuitive experience */
}

/* Client self-view PiP: always above animation layer; opacity-only BLS transitions (bottom-left). */
body.client.client-bls-crossfade-active .video-section:not(.fullscreen) .video-container:first-child,
body.client.client-bls-running .video-section:not(.fullscreen) .video-container:first-child {
    z-index: 1125 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.52s ease-in-out !important;
}
body.client.client-bls-running .video-section:not(.fullscreen) .video-container:first-child[data-bls-dimmed="true"]:not([data-pinned="true"]) {
    opacity: 0.4 !important;
}

/* BLS enter: therapist PiP only — client self-view (first-child) stays in bottom-left, opacity via JS. */
body.client.client-bls-therapist-pip-hidden .video-section:not(.fullscreen) .video-container:last-child {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* During live BLS, therapist corner PiP sits above the animation layer and stays visible. */
body.client.client-bls-running .video-section:not(.fullscreen) .video-container:last-child {
    z-index: 1120 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
body.client.client-bls-running:not(.client-bls-therapist-pip-dimmed) .video-section:not(.fullscreen) .video-container:last-child {
    opacity: 1 !important;
}
body.client.client-bls-running.client-bls-therapist-pip-dimmed .video-section:not(.fullscreen) .video-container:last-child {
    opacity: 0.4 !important;
}

/* Client View - Therapist Video (remoteVideo) as PIP (Bottom Right) - BLS mode only */
/* Last video-container contains remoteVideo (therapist's video) */
body.client:not(:has(.video-section.fullscreen)) .video-container:last-child,
body.client .video-section:not(.fullscreen) .video-container:last-child {
    transition:
        top 1.04s cubic-bezier(0.32, 0.72, 0, 1),
        left 1.04s cubic-bezier(0.32, 0.72, 0, 1),
        right 1.04s cubic-bezier(0.32, 0.72, 0, 1),
        bottom 1.04s cubic-bezier(0.32, 0.72, 0, 1),
        width 1.04s cubic-bezier(0.32, 0.72, 0, 1),
        height 1.04s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.84s ease-in-out,
        border-radius 0.9s ease-in-out,
        box-shadow 0.9s ease-in-out,
        transform 1.04s cubic-bezier(0.32, 0.72, 0, 1) !important;
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 200px !important;
    height: 150px !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    z-index: 1001 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    background: #000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 120px !important;
    min-height: 90px !important;
    max-width: 400px !important;
    max-height: 300px !important;
    resize: none !important; /* Disable browser native resize handle */
}

body.client .video-container:last-child video {
    object-fit: cover;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    transition: object-fit 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

/* Client spotlight: therapist large between chats when BLS is idle (split / BLS layout only). */
body.client .main-content,
body.client .emdr-canvas-container {
    transition: opacity 0.96s ease-in-out;
}

/* Staged crossfade: animation vs therapist video (see refreshClientTherapistSpotlight / toggleClientVideosVisibility). */
body.client.client-bls-crossfade-active .main-content,
body.client.client-bls-crossfade-active .emdr-canvas-container {
    transition: opacity 0.96s ease-in-out !important;
}

/* BLS starting: brighten animation only — do NOT raise .main-content above .video-section (that hid corner PiPs). */
body.client.client-bls-reveal-animation .video-section:not(.fullscreen) ~ .main-content,
body.client.client-bls-reveal-animation .video-section:not(.fullscreen) ~ .main-content .emdr-canvas-container {
    opacity: 1 !important;
}
body.client.client-bls-reveal-animation .video-section:not(.fullscreen) .video-container:has(#remoteVideo) {
    z-index: 1120 !important;
}

/* BLS stopping: dim animation first, then fade therapist video in over it. */
body.client.client-bls-reveal-spotlight .video-section:not(.fullscreen) ~ .main-content,
body.client.client-bls-reveal-spotlight .video-section:not(.fullscreen) ~ .main-content .emdr-canvas-container {
    z-index: 0 !important;
}
body.client.client-bls-reveal-spotlight .video-section:not(.fullscreen) .video-container:has(#remoteVideo) {
    z-index: 1108 !important;
}
/* Use `.video-section:not(.fullscreen)` (not `:has()`) — reliable when a single `.video-section` may alternate layouts. */
body.client.client-bls-therapist-focus .video-section:not(.fullscreen) ~ .main-content,
body.client.client-bls-therapist-focus .video-section:not(.fullscreen) ~ .main-content .emdr-canvas-container {
    opacity: 0.28 !important;
    pointer-events: none;
}
/* Therapist tile: `:has(#remoteVideo)` beats `body.client:not(:has(...)) .video-container:last-child` PiP specificity. */
body.client.client-bls-therapist-focus .video-section:not(.fullscreen) .video-container:has(#remoteVideo) {
    position: fixed !important;
    top: clamp(72px, 11vh, 112px) !important;
    left: clamp(10px, 3vw, 28px) !important;
    right: clamp(10px, 3vw, 28px) !important;
    bottom: clamp(96px, 15vh, 148px) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 1108 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}
body.client.client-bls-therapist-focus .video-section:not(.fullscreen) .video-container:has(#remoteVideo) video {
    object-fit: contain !important;
    background: #000 !important;
}

/* BLS idle spotlight: therapist tile uses fixed inset (top/left/right/bottom). PiP resize sets left/top width/height and breaks that layout — hide resize handles. */
body.client .video-container.client-therapist-bls-spotlight .pip-resize-handle {
    display: none !important;
    pointer-events: none !important;
}

/* Spotlight therapist is a fixed stage, not an adjustable PiP — hide chrome that assumes draggable/minimizable PiP. */
body.client .video-container.client-therapist-bls-spotlight .pip-controls,
body.client .video-container.client-therapist-bls-spotlight .pip-drag-indicator {
    display: none !important;
    pointer-events: none !important;
}

body.client .main-content {
    position: fixed !important;
    top: 100px !important; /* Account for fixed controls at top */
    left: 0 !important;
    right: 0 !important;
    bottom: 120px !important; /* Full height, leaving space for videos at bottom */
    overflow: hidden !important; /* Prevent scrolling */
    display: flex !important;
    visibility: visible !important;
    z-index: 0 !important; /* Below video-section so videos are on top */
}

/* Client EMDR canvas should be larger */
body.client .emdr-canvas-container {
    flex: 1 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    position: relative !important;
    overflow: hidden !important; /* Prevent animation from extending beyond canvas */
    min-height: 200px !important; /* Minimum height */
    max-height: calc(100vh - 100px) !important; /* Maximum height (account for header) */
}

body.client .emdr-canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0;
    box-shadow: none;
    display: block !important;
    visibility: visible !important;
}

/* Legacy absolute client video must not apply when BLS rail owns the grid */
body.therapist.bls-rail-ui-active .video-section .video-container:has(#remoteVideo) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body.therapist.bls-rail-ui-active .video-section .video-container:has(#remoteVideo) video {
    max-width: 100% !important;
    width: auto !important;
    height: 100% !important;
}

/* Therapist View - Client Video as Main Focus (legacy pre-rail layout only) */
body.therapist:not(.bls-rail-ui-active) .video-section .video-container:last-child {
    /* Client video - main focus, full screen */
    position: absolute !important;
    top: 0 !important;
    left: 50% !important; /* Center horizontally */
    transform: translateX(-50%) !important; /* Center horizontally */
    right: auto !important; /* Override any right positioning */
    width: auto !important; /* Let container size based on video - override general rule */
    height: 100% !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    border: none !important; /* Remove border completely - override general rule */
    border-color: transparent !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* Allow video to determine container size */
    box-shadow: none !important; /* Remove any shadow */
    background: transparent !important; /* No background */
    resize: none !important; /* Disable resize */
    margin: 0 !important;
    padding: 0 !important;
    /* Override transition that might interfere */
    transition: none !important;
}

body.therapist .video-container:last-child:hover {
    border: none !important; /* No border on hover - override general hover rule */
    border-color: transparent !important;
}

body.therapist .video-container:last-child video {
    object-fit: contain; /* Maintain aspect ratio, show full video */
    /* Use aspect-ratio to maintain video proportions */
    /* Default video aspect ratio is typically 16:9 */
    aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
    height: 100%; /* Fill available height */
    width: auto; /* Let width adjust to maintain aspect ratio */
    max-width: 100vw; /* Don't exceed viewport width */
    max-height: 100%; /* Don't exceed container height */
    object-position: center;
    display: block; /* Block display to respect aspect ratio */
}

/* Therapist View - Therapist Own Video as PIP (Top Right) */
/* Keep visible from start to allow autoplay - browser treats hidden-then-shown videos as requiring user interaction */
/* Mirror therapist's local video (self-view) in PIP mode */
body.therapist .pip-video video {
    transform: scaleX(-1) !important; /* Mirror local video (self-view) for more intuitive experience */
}

/* Remote video should NOT be mirrored */
body.therapist .fullscreen-video video {
    transform: none !important; /* Remote video should not be mirrored */
}

/* Legacy corner therapist tile — not used when BLS collapsible rail is active */
body.therapist:not(.bls-rail-ui-active) .video-container:first-child {
    position: absolute !important;
    top: 110px !important;
    right: 20px !important;
    width: 400px !important;
    height: 300px !important;
    flex: none !important;
    z-index: 1001 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    background: #000 !important;
    display: block !important; /* Always visible - critical for autoplay to work */
    visibility: visible !important;
    opacity: 1 !important;
    resize: none !important; /* Disable browser native resize handle */
    /* Force GPU acceleration to ensure video rendering */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
}

/* Floating therapist PIP only (fullscreen / legacy corner tile) — not BLS right column */
body.therapist .video-container:first-child.pip-video .pip-media-stack {
    width: 100% !important;
    height: 100% !important;
}

body.therapist .video-container:first-child .pip-media-stack video {
    object-fit: cover;
    display: block !important; /* Ensure video element is visible */
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    /* Mirror local video (self-view) for more intuitive experience */
    transform: scaleX(-1) translateZ(0) !important;
}

/* Old flex rules removed - client videos now use PIP layout with fixed sizes */

.video-container {
    flex: 1;
    position: relative;
    background: #333;
    border-radius: 8px;
    overflow: hidden;
    min-width: 150px;
    min-height: 100px;
    resize: none;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.video-container:hover {
    border-color: #007bff;
}

/* Override hover border for therapist's main client video */
body.therapist .video-container:last-child:hover {
    border-color: transparent !important;
}

.video-container.resizing {
    border-color: #007bff;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure video containers return to normal size after fullscreen */
/* Exclude client PIP videos from this rule */
.video-container:not(.fullscreen-video):not(.pip-video) {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 150px !important;
    min-height: 100px !important;
    flex: 1 !important;
    overflow: hidden !important;
}

/* General rule for all PIP videos - disable browser native resize */
.video-container.pip-video {
    resize: none !important; /* Disable browser native resize handle */
}

/* Override for client PIP videos — default 200×150; fullscreen self-PIP overrides via `.video-section.fullscreen .pip-video` */
body.client .video-container.pip-video {
    position: absolute !important;
    width: 200px !important;
    height: 150px !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

/* Ensure videos show complete content in normal mode */
.video-container:not(.fullscreen-video):not(.pip-video) video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Resize handle styling - DISABLED: Using circular handles instead of blue striped indicators */
/* Hide blue striped indicators for ALL video containers - we use custom circular handles now */
.video-container::after,
.video-container::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    pointer-events: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

.video-container:hover::after,
.video-container:hover::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure PIP videos don't show blue striped indicators - use circular handles instead */
.video-container.pip-video::after,
.video-container.pip-video::before,
.video-container.pip-video:hover::after,
.video-container.pip-video:hover::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    pointer-events: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Blue striped indicators disabled - using circular handles instead */

/* Local PIP frame: keeps room/name label on the video, not the controls column below */
.pip-media-stack {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
}

.video-container.pip-video .pip-media-stack {
    width: 100%;
    height: 100%;
}

.video-label {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
}

/* Hide video labels in PIP videos by default, show on hover */
.video-container.pip-video .video-label,
body.client .video-container.pip-video .video-label,
body.therapist .video-container.pip-video .video-label,
.video-section.fullscreen .video-container.pip-video .video-label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.video-container.pip-video:hover .video-label,
body.client .video-container.pip-video:hover .video-label,
body.therapist .video-container.pip-video:hover .video-label,
.video-section.fullscreen .video-container.pip-video:hover .video-label {
    opacity: 1;
    visibility: visible;
}

/* Hide remote video label (client name) at bottom-left for therapists */
body.therapist .video-container:last-child .video-label#remoteVideoLabel,
body.therapist #remoteVideoLabel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Resize indicator - hidden for therapist view client video */
.video-container::before {
    content: 'Drag to resize';
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.video-container:hover::before {
    opacity: 1;
}

/* Hide drag to resize label for therapist view */
body.therapist .video-container::before {
    display: none !important;
}

/* Duplicate rules removed - already handled globally above */

.video-off-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 15;
}

.video-off-icon {
    font-size: 48px;
    color: #666;
    margin-bottom: 10px;
}

.video-off-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

/* Media Controls */
.media-controls {
    position: fixed;
    top: 110px; /* Just under the header (header is ~100px) */
    left: 20px; /* Position to the left */
    transform: none; /* Remove centering transform */
    display: flex;
    width: auto !important; /* Prevent stretching */
    max-width: none !important; /* Prevent stretching */
    gap: 10px;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 15px;
    border-radius: 25px;
    z-index: 1000;
}

/* Hide client-nav-controls for therapists */
body.therapist .client-nav-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Client Navigation Controls - Positioned below the "Bilateral Stimulation" heading, on the right */
/* Client navigation controls hidden - only Refresh button shown in media-controls */
.client-nav-controls {
    display: none !important;
    visibility: hidden !important;
}

/* CRITICAL: Ensure all direct children (buttons) are in normal flow, not absolute */
.client-nav-controls > * {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Style buttons inside client-nav-controls to match media-btn style */
.client-nav-controls button,
.client-nav-controls .btn-secondary,
.client-nav-controls #sendScreenshotBtn,
body.client .client-nav-controls button,
body.client .client-nav-controls .btn-secondary,
body.client .client-nav-controls #sendScreenshotBtn {
    display: flex !important; /* Match media-btn */
    align-items: center !important;
    gap: 8px !important; /* Match media-btn gap */
    white-space: nowrap !important;
    width: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    /* CRITICAL: Override all positioning styles - ensure relative positioning */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important; /* Remove any transforms */
    /* Match media-btn styling exactly - override .btn-secondary gray background */
    background: rgba(255, 255, 255, 0.1) !important; /* Subtle white background on black - matching media-btn */
    color: white !important; /* Override .btn-secondary gray text */
    border: none !important;
    padding: 8px 15px !important; /* Match media-btn padding */
    border-radius: 20px !important; /* Match media-btn border-radius */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: normal !important;
    text-align: center !important;
    justify-content: center !important;
    z-index: auto !important; /* Reset z-index */
}

/* Hover state matching media-btn */
.client-nav-controls button:hover,
.client-nav-controls .back-btn:hover,
.client-nav-controls .btn-secondary:hover,
.client-nav-controls #sendScreenshotBtn:hover {
    background: rgba(255, 255, 255, 0.2) !important; /* Match media-btn hover */
}

/* Style spans inside client-nav-controls buttons to match media-btn structure */
.client-nav-controls .media-icon,
.client-nav-controls .media-text {
    display: inline !important;
    line-height: normal !important;
    position: relative !important; /* Ensure spans don't have absolute positioning */
}

/* Ensure client-nav-controls is visible in both BLS and fullscreen modes */
body.client:not(:has(.video-section.fullscreen)) .client-nav-controls,
/* Client navigation controls hidden in all modes - only Refresh button shown in media-controls */
body.client:has(.video-section.fullscreen) .client-nav-controls {
    display: none !important;
    visibility: hidden !important;
}

/* Hide media-controls for client view (buttons moved to header) */
body.client .media-controls {
    display: none;
}

.media-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #444;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.media-btn:hover {
    background: #555;
    transform: translateY(-2px);
}

/* Video, Audio, and End Session buttons removed from top media-controls
   Functionality moved to bottom control bar and PIP menu */

.media-btn.muted {
    background: #dc3545;
}

.media-btn.muted:hover {
    background: #c82333;
}

.media-btn-danger {
    background: #ff3b30 !important;
    color: white !important;
}

.media-btn-danger:hover {
    background: #d70015 !important;
}

/* Bottom Video Control Bar */
.bottom-video-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(0, 0, 0, 0.2); /* Dimmed by default */
    padding: 12px 24px;
    border-radius: 50px;
    z-index: 2000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 0.7; /* Slightly transparent by default */
}

.bottom-video-controls:hover {
    background: rgba(0, 0, 0, 0.9); /* Fully visible on hover */
    opacity: 1; /* Full opacity on hover */
}

/* Therapist-only elapsed session clock — fullscreen + BLS (above centered bottom bar) */
body.therapist .therapist-session-timer.therapist-only {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    position: fixed;
    right: 16px;
    bottom: 88px;
    z-index: 2100;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    user-select: none;
}

body.therapist .therapist-session-timer .therapist-session-timer-label {
    opacity: 0.75;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.therapist .therapist-session-timer .therapist-session-timer-value {
    font-weight: 600;
    font-size: 14px;
}

body.theme-light.therapist .therapist-session-timer.therapist-only {
    background: rgba(248, 250, 252, 0.94);
    color: #1f2937;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

body.theme-light.therapist .therapist-session-timer .therapist-session-timer-label {
    color: #64748b;
}

.bottom-control-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    gap: 2px;
    pointer-events: auto !important; /* Ensure buttons are always clickable */
    z-index: 2001 !important; /* Above video containers */
}

.bottom-control-btn.active {
    background: rgba(0, 123, 255, 0.3);
}

.bottom-control-btn.active svg {
    stroke: #007bff;
}

.bottom-control-btn svg {
    stroke: #fff;
    fill: none;
}

.bottom-control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Removed audio-chevron styling - no longer used */

.bottom-control-btn.muted {
    opacity: 0.5;
}

.bottom-control-btn.muted svg {
    opacity: 0.5;
}

/* Microphone icon turns red when muted - applies to both therapist and client views */
.bottom-control-btn#bottomToggleAudio.muted svg:first-child,
body.client .bottom-control-btn#bottomToggleAudio.muted svg:first-child,
body.therapist .bottom-control-btn#bottomToggleAudio.muted svg:first-child {
    stroke: #ff3b30 !important; /* Red color when muted */
    opacity: 1 !important; /* Full opacity for visibility */
}

/* Receive-side noise filter (RNNoise) — beside mic; off by default */
.bottom-control-btn.receive-noise-filter-btn {
    min-width: 44px;
}

.bottom-control-btn.receive-noise-filter-btn.active {
    background: rgba(52, 199, 89, 0.28);
}

.bottom-control-btn.receive-noise-filter-btn.active svg {
    stroke: #34c759;
}

.bottom-control-btn.receive-noise-filter-btn.active .bottom-btn-text,
.bottom-control-btn.receive-noise-filter-btn.active .bottom-btn-label {
    color: #34c759;
}

body.theme-light .bottom-control-btn.receive-noise-filter-btn.active {
    background: rgba(52, 199, 89, 0.18);
}

/* Video icon turns red when muted - applies to both therapist and client views */
.bottom-control-btn#bottomToggleVideo.muted svg:first-child,
body.client .bottom-control-btn#bottomToggleVideo.muted svg:first-child,
body.therapist .bottom-control-btn#bottomToggleVideo.muted svg:first-child {
    stroke: #ff3b30 !important; /* Red color when muted */
    opacity: 1 !important; /* Full opacity for visibility */
}

/* BLS Control Group - visual grouping container for Audio, Tap USB, and Tap BLE buttons */
.bls-control-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin: 0 4px !important;
}

/* Hide BLS control group for therapists */
body.therapist .bls-control-group {
    display: none !important;
}

/* BLS group buttons - consistent styling within the group */
.bls-group-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
}

.bls-group-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Hide client-only BLS buttons for therapists (legacy support) */
body.therapist .bottom-control-btn.client-only#bottomBallAudio,
body.therapist .bottom-control-btn.client-only#bottomToggleBLS,
body.therapist .bottom-control-btn.client-only#bottomTapBLS,
body.therapist .bottom-control-btn.client-only#bottomTapBLE {
    display: none !important;
}

/* Show therapist-only BLS buttons for therapists */
body.therapist .bottom-control-btn.therapist-only#bottomTherapistBallAudio,
body.therapist .bottom-control-btn.therapist-only#bottomTherapistBLS {
    display: flex !important;
}

/* Hide therapist-only BLS buttons for clients */
body.client .bottom-control-btn.therapist-only#bottomTherapistBallAudio,
body.client .bottom-control-btn.therapist-only#bottomTherapistBLS {
    display: none !important;
}

/* Style for bottom button labels and text */
.bottom-control-btn .bottom-btn-label {
    font-size: 9px;
    line-height: 1;
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 1px;
}

.bottom-control-btn .bottom-btn-text {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    display: block;
    line-height: 1;
}

/* Make Fullscreen/BLS mode button more prominent for therapists */
.bottom-control-btn#bottomTherapistBLS {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    padding: 12px 20px !important;
    border-radius: 50px !important; /* Round pill shape */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
    min-width: 120px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.bottom-control-btn#bottomTherapistBLS .bottom-btn-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.bottom-control-btn#bottomTherapistBLS:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

.bottom-control-btn#bottomTherapistBLS:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4) !important;
}

/* Therapist BLS button - match client button styling (simple layout, no special styling) */
/* Removed special styling - now uses default bottom-control-btn styling like client button */

/* Buttons with only SVG (no label) should center the icon */
.bottom-control-btn:not(:has(.bottom-btn-label)):not(:has(.bottom-btn-text)) {
    flex-direction: row;
}

/* Style BLS button when active/running */
.bottom-control-btn#bottomToggleBLS.running {
    background: rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

.bottom-control-btn#bottomToggleBLS.running .bottom-btn-text {
    color: #dc3545;
}

/* Style for disabled BLS button (client view when BLS is off) */
body.client .bottom-control-btn#bottomToggleBLS:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(128, 128, 128, 0.2);
}

body.client .bottom-control-btn#bottomToggleBLS:disabled .bottom-btn-text {
    color: #999;
}

/* Ball Audio button - show strikethrough when disabled (red) */
/* BLS Audio button - match Tap button styling */
.bottom-control-btn#bottomBallAudio:not(.active) .bottom-btn-text {
    color: #dc3545; /* Red when off */
}

.bottom-control-btn#bottomBallAudio.active .bottom-btn-text {
    color: #28a745; /* Green when on (matches Tap buttons) */
}

/* Audio label always white to match Tap buttons */
.bottom-control-btn#bottomBallAudio .bottom-btn-label {
    color: #fff !important; /* White to match Tap button labels */
}

.bottom-control-btn#bottomBallAudio:not(.active) svg {
    stroke: #dc3545; /* Red icon when off */
}

.bottom-control-btn#bottomBallAudio.active svg {
    stroke: #28a745; /* Green icon when on */
}

.bottom-control-btn#bottomBallAudio:not(.active) {
    background: rgba(220, 53, 69, 0.15) !important; /* Light red background when off */
    border-color: rgba(220, 53, 69, 0.4) !important;
}

.bottom-control-btn#bottomBallAudio.active {
    background: rgba(40, 167, 69, 0.15) !important; /* Light green background when on */
    border-color: rgba(40, 167, 69, 0.4) !important;
}

/* Tap USB button - show red when inactive, green when active */
.bottom-control-btn#bottomTapBLS:not(.active) .bottom-btn-text {
    color: #dc3545; /* Red when off */
}

.bottom-control-btn#bottomTapBLS.active .bottom-btn-text {
    color: #28a745; /* Green when on */
}

.bottom-control-btn#bottomTapBLS:not(.active) svg {
    stroke: #dc3545; /* Red icon when off */
}

.bottom-control-btn#bottomTapBLS.active svg {
    stroke: #28a745; /* Green icon when on */
}

.bottom-control-btn#bottomTapBLS:not(.active) {
    background: rgba(220, 53, 69, 0.15) !important; /* Light red background when off */
    border-color: rgba(220, 53, 69, 0.4) !important;
}

.bottom-control-btn#bottomTapBLS.active {
    background: rgba(40, 167, 69, 0.15) !important; /* Light green background when on */
    border-color: rgba(40, 167, 69, 0.4) !important;
}

/* Tap BLE button - show red when inactive, green when active */
.bottom-control-btn#bottomTapBLE:not(.active) .bottom-btn-text {
    color: #dc3545; /* Red when off */
}

.bottom-control-btn#bottomTapBLE.active .bottom-btn-text {
    color: #28a745; /* Green when on */
}

.bottom-control-btn#bottomTapBLE:not(.active) svg {
    stroke: #dc3545; /* Red icon when off */
}

.bottom-control-btn#bottomTapBLE.active svg {
    stroke: #28a745; /* Green icon when on */
}

.bottom-control-btn#bottomTapBLE:not(.active) {
    background: rgba(220, 53, 69, 0.15) !important; /* Light red background when off */
    border-color: rgba(220, 53, 69, 0.4) !important;
}

.bottom-control-btn#bottomTapBLE.active {
    background: rgba(40, 167, 69, 0.15) !important; /* Light green background when on */
    border-color: rgba(40, 167, 69, 0.4) !important;
}

.bottom-control-btn#bottomToggleAudio.muted svg:first-child path,
.bottom-control-btn#bottomToggleAudio.muted svg:first-child line,
body.client .bottom-control-btn#bottomToggleAudio.muted svg:first-child path,
body.client .bottom-control-btn#bottomToggleAudio.muted svg:first-child line,
body.therapist .bottom-control-btn#bottomToggleAudio.muted svg:first-child path,
body.therapist .bottom-control-btn#bottomToggleAudio.muted svg:first-child line {
    stroke: #ff3b30 !important; /* Red color for all paths and lines */
}

.bottom-control-btn#bottomToggleAudio svg:first-child {
    position: relative;
}

.bottom-control-btn#bottomToggleAudio svg:first-child path:first-child {
    fill: rgba(255, 255, 255, 0.3);
}

.bottom-control-end-call {
    background: #ff3b30 !important;
    border-radius: 8px;
    padding: 8px;
}

.bottom-control-end-call .end-call-handset-icon {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
    pointer-events: none;
}

.bottom-control-end-call:hover {
    background: #d70015 !important;
}

/* [v2.5.109] Therapist hang-up button during WebRTC `connecting`: the red
   tile reads like 'End Session' to therapists during handshake while the
   header pill already says Connecting…. Hide until ICE reaches something
   other than strict `connecting` — visibility keeps bottom-bar layout stable.
   Failed/disconnected paths restore the button so they can always bail out. */
body.therapist #bottomEndCall.bottom-end-call-hidden-connecting {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Text Chat UI */
.chat-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    max-height: 400px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 1002;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.chat-panel.collapsed {
    transform: translateY(calc(100% - 50px));
}

/* Hide chat panel completely when hidden class is present - must override all other rules */
.chat-panel.hidden,
.chat-panel.hidden.collapsed,
body.therapist .chat-panel.hidden,
body.client .chat-panel.hidden,
.video-section.fullscreen ~ .chat-panel.hidden,
body:has(.video-section.fullscreen) .chat-panel.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
}

.chat-header {
    background: rgba(0, 123, 255, 0.8);
    color: white;
    padding: 12px 15px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.chat-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.chat-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-body {
    display: flex;
    flex-direction: column;
    height: 300px;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.chat-message {
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 85%;
    word-wrap: break-word;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
}

.chat-message.sent {
    background: rgba(0, 123, 255, 0.3);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-message.received {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-message-time {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
}

.chat-message img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: 4px;
    margin-top: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1) !important;
    min-width: 150px !important;
    min-height: 100px !important;
    object-fit: contain;
    z-index: 1;
    position: relative !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.chat-message img.screenshot-image {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

.chat-input-container {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.5);
}

.chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 13px;
    outline: none;
}

.chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.chat-input:focus {
    border-color: rgba(0, 123, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
}

.chat-send-btn {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.chat-send-btn:hover {
    background: #0056b3;
}

.chat-send-btn:disabled {
    background: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
}

.chat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 20px;
}

/* Therapist view - position chat differently */
body.therapist .chat-panel {
    bottom: 20px;
    right: 20px;
}

/* Client view - ensure chat doesn't block EMDR animation */
body.client .chat-panel {
    bottom: 20px;
    right: 20px;
    z-index: 1002;
}

/* Ensure chat panel is visible in fullscreen mode - above video (2000) but below header (2004) */
.video-section.fullscreen ~ .chat-panel:not(.hidden),
body:has(.video-section.fullscreen) .chat-panel:not(.hidden) {
    z-index: 2005 !important;
    display: flex !important;
    visibility: visible !important;
}

/* Fullscreen Video Mode */
.video-section.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2000 !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* Therapist fullscreen video should fill entire viewport like client */
/* Header and media controls overlay the video with higher z-index */
body.therapist .video-section.fullscreen {
    top: 0 !important; /* Start at top of viewport */
    height: 100vh !important; /* Fill entire viewport height */
}

.video-section.fullscreen .video-container {
    position: relative !important;
    height: 100% !important; /* Use 100% of video-section height, not viewport */
    width: auto !important; /* Let container size based on content */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.video-section.fullscreen .video-container.fullscreen-video {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important; /* Center horizontally */
    transform: translateX(-50%) !important; /* Center horizontally */
    right: auto !important;
    bottom: 0 !important;
    z-index: 2001 !important;
    width: auto !important; /* Let container size based on video aspect ratio */
    height: 100% !important; /* Use 100% of video-section height */
    margin: 0 !important;
    padding: 0 !important;
    resize: none !important; /* Not resizable in fullscreen */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
}

/* Therapist fullscreen video should fill viewport like client */
body.therapist .video-section.fullscreen .video-container.fullscreen-video {
    height: 100vh !important; /* Fill entire viewport height */
    top: 0 !important; /* Start at top of video-section */
}

/* Hide resize handles on fullscreen video */
.video-section.fullscreen .video-container.fullscreen-video .pip-resize-handle {
    display: none !important;
}

.video-section.fullscreen .video-container.fullscreen-video video {
    width: auto !important; /* Let width adjust to maintain aspect ratio */
    height: 100% !important; /* Fill container height */
    aspect-ratio: 16 / 9 !important; /* Maintain 16:9 aspect ratio */
    object-fit: contain !important; /* Show full video without cropping */
    max-width: 100% !important; /* Don't exceed container width */
    max-height: 100% !important; /* Don't exceed container height */
    margin: 0 !important;
    padding: 0 !important;
    object-position: center !important;
}

/* Therapist fullscreen video element should fill viewport like client */
body.therapist .video-section.fullscreen .video-container.fullscreen-video video {
    height: 100vh !important; /* Fill entire viewport height */
    width: auto !important; /* Let width scale to maintain aspect ratio */
    max-width: 100vw !important; /* Allow full viewport width */
    max-height: 100vh !important; /* Don't exceed viewport height */
    object-fit: contain !important; /* Show full video without cropping */
}

.video-section.fullscreen .video-container.pip-video {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 400px !important;
    height: 300px !important;
    min-width: 240px !important;
    min-height: 180px !important;
    max-width: 800px !important;
    max-height: 600px !important;
    z-index: 2002 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    resize: none !important;
    cursor: move !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Client view: self-PIP in fullscreen — match therapist compact size (inline JS also sets 200×150; CSS keeps layout if inline cleared) */
body.client .video-section.fullscreen .video-container.pip-video {
    top: 160px !important; /* Below header (~100px) + media controls (~40px) + spacing */
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    width: 200px !important;
    height: 150px !important;
    min-width: 120px !important;
    min-height: 90px !important;
    max-width: 400px !important;
    max-height: 300px !important;
}

/* Client view: Ensure therapist video is fullscreen - override all client video styles */
body.client .video-section.fullscreen .video-container.fullscreen-video,
body.client .video-section.fullscreen .video-container:last-child.fullscreen-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2001 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
    flex: none !important;
    resize: none !important; /* Disable browser native resize handle */
}

body.client .video-section.fullscreen .video-container.fullscreen-video video,
body.client .video-section.fullscreen .video-container:last-child.fullscreen-video video {
    width: auto !important; /* Let width adjust to maintain aspect ratio */
    height: 100vh !important; /* Fill available height */
    aspect-ratio: 16 / 9 !important; /* Maintain 16:9 aspect ratio */
    object-fit: contain !important; /* Show full video without cropping */
    max-width: 100vw !important; /* Don't exceed viewport width */
    max-height: 100vh !important; /* Don't exceed viewport height */
    margin: 0 !important;
    padding: 0 !important;
    object-position: center !important;
}

/* Therapist Video Mode PIP — tuned 200×150, top-right below header + media controls */
body.therapist .video-section.fullscreen .video-container.pip-video {
    position: absolute !important;
    top: 160px !important; /* video-section is full viewport (top:0); clears ~100px header + ~40px controls */
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 200px !important;
    height: 150px !important;
    min-width: 120px !important;
    min-height: 90px !important;
    max-width: 400px !important;
    max-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    resize: none !important;
    cursor: move !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2010 !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
}

/* BLS collapsed rail — fixed to viewport (matches Video Mode 160px / 20px; section is top:0 in BLS) */
body.bls-rail-collapse-enabled.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) > .video-container.bls-rail-floated-pip {
    position: fixed !important;
    top: 160px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 200px !important;
    height: 150px !important;
    min-width: 120px !important;
    min-height: 90px !important;
    max-width: 400px !important;
    max-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    resize: none !important;
    cursor: move !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2010 !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
}

body.therapist .video-section.fullscreen .video-container.pip-video .emdr-header,
body.bls-rail-collapse-enabled.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) > .video-container.bls-rail-floated-pip .emdr-header {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) > .video-container.bls-rail-floated-pip .pip-media-stack {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    flex-grow: 1 !important;
    margin: 0 !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) > .video-container.bls-rail-floated-pip video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* PIP Controls */
.pip-controls {
    position: absolute !important;
    top: -30px !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 6px !important;
    padding: 4px !important;
    display: none !important;
    z-index: 2003 !important;
    backdrop-filter: blur(10px) !important;
}

.video-section.fullscreen .video-container.pip-video:hover .pip-controls {
    display: flex !important;
}

.pip-controls button {
    background: transparent !important;
    border: none !important;
    color: white !important;
    padding: 6px 8px !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: background 0.2s ease !important;
}

.pip-controls button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* 3-Dot Menu Button for PIP Videos */
.pip-menu-button {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2010 !important;
    transition: background 0.2s ease !important;
}

.pip-menu-button:hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

.pip-menu-button svg {
    width: 18px !important;
    height: 18px !important;
    fill: #fff !important;
}

/* PIP Dropdown Menu - Similar to chat-panel positioning */
.pip-dropdown-menu {
    position: fixed !important; /* Fixed to viewport - same as chat-panel */
    background: #2d2d2d !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    min-width: 220px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 10050 !important; /* Above fullscreen header/chrome so menu is usable */
    display: none !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.pip-dropdown-menu.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pip-menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    font-size: 14px !important;
    gap: 12px !important;
}

.pip-menu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.pip-menu-item svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #fff !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex-shrink: 0 !important;
}

.pip-menu-item .menu-text {
    flex: 1 !important;
}

.pip-menu-separator {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    margin: 4px 0 !important;
}

/* Show menu button on all video containers */
.video-container .pip-menu-button {
    display: flex !important;
    pointer-events: auto !important;
}

/* Always show on video containers with video */
.video-container:has(video) .pip-menu-button {
    display: flex !important;
    pointer-events: auto !important;
}

/* Ensure button is clickable even if parent has pointer-events: none */
.video-container .pip-menu-button,
.video-container .pip-dropdown-menu {
    pointer-events: auto !important;
}

/* Resize handles for PIP - Multiple handles like client video */
.pip-resize-handle {
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    z-index: 2010 !important;
    pointer-events: auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* Show handles on hover (mouse) or while actively resizing */
.video-container.pip-video:hover .pip-resize-handle,
.emdr-canvas-container:hover .pip-resize-handle {
    opacity: 1 !important;
}

.video-container.pip-video.pip-reveal-resize-handles .pip-resize-handle,
.video-container.pip-video.resizing .pip-resize-handle,
.emdr-canvas-container.pip-reveal-resize-handles .pip-resize-handle,
.emdr-canvas-container.resizing .pip-resize-handle {
    opacity: 1 !important;
}

/* Corner handles */
.pip-resize-handle.corner-se {
    bottom: -2px !important;
    right: -2px !important;
    cursor: se-resize !important;
}

/* Therapist fullscreen PIP: corner handles positioned 4px inside */
body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-se {
    bottom: 4px !important;
    right: 4px !important;
}

.pip-resize-handle.corner-sw {
    bottom: -2px !important;
    left: -2px !important;
    cursor: sw-resize !important;
}

body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-sw {
    bottom: 4px !important;
    left: 4px !important;
}

.pip-resize-handle.corner-ne {
    top: -2px !important;
    right: -2px !important;
    cursor: ne-resize !important;
}

body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-ne {
    top: 4px !important;
    right: 4px !important;
}

.pip-resize-handle.corner-nw {
    top: -2px !important;
    left: -2px !important;
    cursor: nw-resize !important;
}

body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-nw {
    top: 4px !important;
    left: 4px !important;
}

/* Edge handles for easier resizing */
.pip-resize-handle.edge-top {
    top: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    border-radius: 2px !important;
    cursor: n-resize !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Hide edge handles for therapist fullscreen PIP */
body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.edge-top,
body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.edge-bottom,
body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.edge-left,
body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.edge-right {
    display: none !important;
}

.pip-resize-handle.edge-bottom {
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    border-radius: 2px !important;
    cursor: s-resize !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.pip-resize-handle.edge-left {
    top: 50% !important;
    left: -2px !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 80px !important;
    border-radius: 2px !important;
    cursor: w-resize !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.pip-resize-handle.edge-right {
    top: 50% !important;
    right: -2px !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 80px !important;
    border-radius: 2px !important;
    cursor: e-resize !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.pip-resize-handle:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.pip-resize-handle.edge-top:hover {
    transform: translateX(-50%) scale(1.1) !important;
}
.pip-resize-handle.edge-bottom:hover {
    transform: translateX(-50%) scale(1.1) !important;
}
.pip-resize-handle.edge-left:hover {
    transform: translateY(-50%) scale(1.1) !important;
}
.pip-resize-handle.edge-right:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

/* Touch / coarse pointer: center ⋮ on top edge; larger hit targets. Handles stay hidden until tap/hover (see `.pip-reveal-resize-handles` JS). */
@media (hover: none), (pointer: coarse) {
    .video-container.pip-video .pip-menu-button {
        left: 50% !important;
        right: auto !important;
        top: 8px !important;
        transform: translateX(-50%) !important;
    }

    .video-container.pip-video .pip-resize-handle,
    .emdr-canvas-container .pip-resize-handle {
        touch-action: none !important;
    }

    .video-container.pip-video .pip-resize-handle.corner-nw,
    .video-container.pip-video .pip-resize-handle.corner-ne,
    .video-container.pip-video .pip-resize-handle.corner-sw,
    .video-container.pip-video .pip-resize-handle.corner-se,
    .emdr-canvas-container .pip-resize-handle.corner-nw,
    .emdr-canvas-container .pip-resize-handle.corner-ne,
    .emdr-canvas-container .pip-resize-handle.corner-sw,
    .emdr-canvas-container .pip-resize-handle.corner-se {
        width: 28px !important;
        height: 28px !important;
    }

    .video-container.pip-video .pip-resize-handle.corner-se,
    .emdr-canvas-container .pip-resize-handle.corner-se {
        bottom: -8px !important;
        right: -8px !important;
    }
    .video-container.pip-video .pip-resize-handle.corner-sw,
    .emdr-canvas-container .pip-resize-handle.corner-sw {
        bottom: -8px !important;
        left: -8px !important;
    }
    .video-container.pip-video .pip-resize-handle.corner-ne,
    .emdr-canvas-container .pip-resize-handle.corner-ne {
        top: -8px !important;
        right: -8px !important;
    }
    .video-container.pip-video .pip-resize-handle.corner-nw,
    .emdr-canvas-container .pip-resize-handle.corner-nw {
        top: -8px !important;
        left: -8px !important;
    }

    body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-se {
        bottom: 2px !important;
        right: 2px !important;
    }
    body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-sw {
        bottom: 2px !important;
        left: 2px !important;
    }
    body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-ne {
        top: 2px !important;
        right: 2px !important;
    }
    body.therapist .video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-nw {
        top: 2px !important;
        left: 2px !important;
    }

    .video-container.pip-video .pip-resize-handle.edge-top,
    .video-container.pip-video .pip-resize-handle.edge-bottom,
    .emdr-canvas-container .pip-resize-handle.edge-top,
    .emdr-canvas-container .pip-resize-handle.edge-bottom {
        width: 120px !important;
        height: 12px !important;
        border-radius: 6px !important;
    }
    .video-container.pip-video .pip-resize-handle.edge-left,
    .video-container.pip-video .pip-resize-handle.edge-right,
    .emdr-canvas-container .pip-resize-handle.edge-left,
    .emdr-canvas-container .pip-resize-handle.edge-right {
        width: 12px !important;
        height: 120px !important;
        border-radius: 6px !important;
    }
}

/* Client video resizing in EMDR session - FIXED */
.video-section:not(.fullscreen) .video-container.client-resizable {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px !important;
    height: 300px !important;
    min-width: 250px !important;
    min-height: 200px !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    z-index: 1000 !important;
    border: 3px solid #007bff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 40px rgba(0, 123, 255, 0.4) !important;
    cursor: move !important;
    flex: none !important;
    resize: none !important;
    overflow: visible !important;
    background: #000 !important;
}

/* Hide the other video container when client is resizable */
.video-section:not(.fullscreen) .video-container.client-resizable ~ .video-container {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

/* Prevent the other video from expanding when one is resizable */
/* Note: JavaScript handles this more reliably for both directions */
.video-section:not(.fullscreen) .video-container.client-resizable ~ .video-container {
    flex: 0 0 auto !important;
}

/* Resize handles on all corners - larger and more accessible */
.client-video-resize-handle {
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    background: rgba(0, 123, 255, 0.3) !important;
    border: 1px solid rgba(0, 123, 255, 0.5) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3) !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* Show handles on container hover */
.video-container.client-resizable:hover .client-video-resize-handle {
    opacity: 1 !important;
}

/* Corner handles */
.client-video-resize-handle.corner-se {
    bottom: -2px !important;
    right: -2px !important;
    cursor: se-resize !important;
}

.client-video-resize-handle.corner-sw {
    bottom: -2px !important;
    left: -2px !important;
    cursor: sw-resize !important;
}

.client-video-resize-handle.corner-ne {
    top: -2px !important;
    right: -2px !important;
    cursor: ne-resize !important;
}

.client-video-resize-handle.corner-nw {
    top: -2px !important;
    left: -2px !important;
    cursor: nw-resize !important;
}

/* Edge handles for easier resizing */
.client-video-resize-handle.edge-top {
    top: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    border-radius: 2px !important;
    cursor: n-resize !important;
    background: rgba(0, 123, 255, 0.2) !important;
}

.client-video-resize-handle.edge-bottom {
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    border-radius: 2px !important;
    cursor: s-resize !important;
    background: rgba(0, 123, 255, 0.2) !important;
}

.client-video-resize-handle.edge-left {
    top: 50% !important;
    left: -2px !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 80px !important;
    border-radius: 2px !important;
    cursor: w-resize !important;
    background: rgba(0, 123, 255, 0.2) !important;
}

.client-video-resize-handle.edge-right {
    top: 50% !important;
    right: -2px !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 80px !important;
    border-radius: 2px !important;
    cursor: e-resize !important;
    background: rgba(0, 123, 255, 0.2) !important;
}

.client-video-resize-handle:hover {
    background: rgba(0, 123, 255, 0.5) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4) !important;
}

.client-video-resize-handle.edge-top:hover {
    transform: translateX(-50%) scale(1.1) !important;
}

.client-video-resize-handle.edge-bottom:hover {
    transform: translateX(-50%) scale(1.1) !important;
}

.client-video-resize-handle.edge-left:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

.client-video-resize-handle.edge-right:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

/* Improved drag indicator */
.client-video-drag-indicator {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 6px !important;
    background: #007bff !important;
    border-radius: 3px !important;
    cursor: move !important;
    z-index: 1002 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.client-video-drag-indicator:hover {
    background: #0056cc !important;
    transform: translateX(-50%) scale(1.1);
}

/* Make the entire top area draggable */
.client-video-drag-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    cursor: move !important;
    z-index: 1002 !important;
    background: transparent !important;
}

/* Visual feedback */
.video-container.client-resizable.dragging {
    opacity: 0.95;
    box-shadow: 0 12px 50px rgba(0, 123, 255, 0.6) !important;
}

.video-container.client-resizable.resizing {
    border-color: #0056cc !important;
    box-shadow: 0 12px 50px rgba(0, 123, 255, 0.8) !important;
}

/* Make video label more prominent */
.video-container.client-resizable .video-label {
    background: rgba(0, 123, 255, 0.95) !important;
    z-index: 1003 !important;
    font-weight: bold !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
}

/* Minimized PIP state */
.video-section.fullscreen .video-container.pip-video.minimized {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    top: 20px !important;
    right: 20px !important;
}

.video-section.fullscreen .video-container.pip-video.minimized .pip-controls {
    top: -25px !important;
}

/* Therapist self PiP — collapse to camera-off chip when preview hidden */
.pip-preview-restore-btn {
    display: none;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(28, 28, 30, 0.92);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2012;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}

.pip-preview-restore-btn svg {
    width: 26px;
    height: 26px;
    display: block;
}

.pip-preview-restore-btn:hover {
    background: rgba(44, 44, 48, 0.96);
    transform: scale(1.04);
}

/* Unified hidden-preview chip for self PiP (#localVideo) in video mode */
body.therapist .video-container.pip-preview-collapsed:has(#localVideo),
body.client .video-container.pip-preview-collapsed:has(#localVideo) {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: rgba(28, 28, 30, 0.92) !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
    cursor: default !important;
    overflow: hidden !important;
}

body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .pip-preview-restore-btn,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .pip-preview-restore-btn {
    display: flex !important;
}

body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .pip-menu-button,
body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .pip-controls,
body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .pip-resize-handle,
body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .pip-drag-indicator,
body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .video-label,
body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .pip-media-stack,
body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .connection-quality-indicator,
body.therapist .video-container.pip-preview-collapsed:has(#localVideo) .emdr-header,
body.therapist .video-container:has(video).pip-preview-collapsed:has(#localVideo) .pip-menu-button,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .pip-menu-button,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .pip-controls,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .pip-resize-handle,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .pip-drag-indicator,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .video-label,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .pip-media-stack,
body.client .video-container.pip-preview-collapsed:has(#localVideo) .connection-quality-indicator,
body.client .video-container:has(video).pip-preview-collapsed:has(#localVideo) .pip-menu-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* PIP drag indicator */
.pip-drag-indicator {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 20px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 2px !important;
    cursor: move !important;
    z-index: 2004 !important;
}

/* Disable dragging in fullscreen mode - buttons need to be clickable */
.video-section.fullscreen .video-container.pip-video {
    cursor: default !important;
}


.video-section.fullscreen .video-container.pip-video:hover {
    cursor: default !important;
}

/* Ensure buttons are clickable in fullscreen */
.video-section.fullscreen .fullscreen-controls {
    pointer-events: auto !important;
    z-index: 2003 !important;
}

.video-section.fullscreen .fullscreen-controls button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure resize handles override container's move cursor with their own resize cursors */
/* Allow resize handles to work in fullscreen - enable cursor and pointer-events */
.video-section.fullscreen .video-container.pip-video .pip-resize-handle {
    pointer-events: auto !important;
    cursor: inherit !important; /* Let the handle's own cursor style work */
}

/* Ensure corner handles have proper cursors in fullscreen */
.video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-se {
    cursor: se-resize !important;
}
.video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-sw {
    cursor: sw-resize !important;
}
.video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-ne {
    cursor: ne-resize !important;
}
.video-section.fullscreen .video-container.pip-video .pip-resize-handle.corner-nw {
    cursor: nw-resize !important;
}

.video-section.fullscreen .video-container.pip-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.video-section.fullscreen .video-label {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    bottom: 5px;
    top: auto;
}

/* Ensure fullscreen PIP video labels also follow hover behavior */
.video-section.fullscreen .video-container.pip-video .video-label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.video-section.fullscreen .video-container.pip-video:hover .video-label {
    opacity: 1;
    visibility: visible;
}

/* Keep fullscreen (non-PIP) video labels always visible */
.video-container.fullscreen-video .video-label,
.video-section.fullscreen .video-container.fullscreen-video .video-label {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide other elements when in fullscreen video mode, but show media controls for client */
.video-section.fullscreen ~ .nav-buttons,
.video-section.fullscreen ~ .status-info {
    display: none !important;
}

/* Hide media controls in fullscreen by default, but we'll override for both therapist and client */
.video-section.fullscreen ~ .media-controls {
    display: none !important;
}

/* Override: Show media controls for client in fullscreen */
/* Hide media-controls in fullscreen for client (button moved to header) */
body.client:has(.video-section.fullscreen) .media-controls,
body.client .video-section.fullscreen ~ .media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide main-content in fullscreen mode, but keep EMDR header visible for therapist */
/* For clients, hide main-content in fullscreen but show it in BLS mode */
.video-section.fullscreen ~ .main-content {
    display: none !important;
}

/* Ensure therapist main-content is visible when NOT in fullscreen */
body.therapist:not(:has(.video-section.fullscreen)) .main-content,
body.therapist .video-section:not(.fullscreen) ~ .main-content {
    display: flex !important;
}

/* Ensure client animation container is visible when NOT in fullscreen */
body.client:not(:has(.video-section.fullscreen)) .main-content,
body.client .video-section:not(.fullscreen) ~ .main-content {
    display: flex !important;
    bottom: 120px !important; /* Full height, leaving space for video bar at bottom */
}

/* Ensure client animation container is visible and properly sized in BLS mode */
body.client:not(:has(.video-section.fullscreen)) .emdr-canvas-container,
body.client .video-section:not(.fullscreen) ~ .main-content .emdr-canvas-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Therapist BLS Mode - 2-column layout (70/30) */
body.therapist:not(:has(.video-section.fullscreen)) .video-section,
body.therapist .video-section:not(.fullscreen) {
    display: grid !important;
    grid-template-columns: 70% 30% !important;
    gap: 0 !important;
    background: white !important;
    position: fixed !important;
    top: 0 !important; /* Start at top - header is in right column now */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    visibility: visible !important;
}

/* Left column: Client video (70%) */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child,
body.therapist .video-section:not(.fullscreen) .video-container:last-child {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important; /* Black background for client video in BLS mode */
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Right column: Therapist PIP + Controls (30%) */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child,
body.therapist .video-section:not(.fullscreen) .video-container:first-child {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: white !important;
    padding: 10px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    /* Remove any absolute positioning that might interfere */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    /* Disable drag in BLS mode */
    cursor: default !important;
    gap: 10px !important; /* Add small gap between video and controls */
    align-items: stretch !important; /* Stretch children to container width */
}

/* Disable PIP drag handlers in BLS mode */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child[data-bls-mode="true"],
body.therapist .video-section:not(.fullscreen) .video-container:first-child[data-bls-mode="true"] {
    pointer-events: auto !important;
}

/* Therapist PIP video in right column (stack bounds the room label to the preview) */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .pip-media-stack,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .pip-media-stack {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 30vh !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
    background: #000 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: flex-start !important;
    overflow: hidden !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .pip-media-stack #localVideoLabel,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .pip-media-stack #localVideoLabel {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    right: auto !important;
    top: auto !important;
    z-index: 12 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .pip-media-stack video,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .pip-media-stack video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 8px !important;
}

/* Media controls at top of screen above columns - centered */
body.therapist:not(:has(.video-section.fullscreen)) .media-controls,
body.therapist .video-section:not(.fullscreen) ~ .media-controls,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child .media-controls,
body.therapist .video-section:not(.fullscreen) .video-container:last-child .media-controls {
    position: fixed !important;
    top: 60px !important; /* Just below header (header is ~50px + 10px spacing) */
    left: 8px !important; /* Position on the left with 8px margin */
    right: auto !important;
    transform: none !important; /* Remove center transform */
    z-index: 2000 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    padding: 10px 15px !important;
    border-radius: 25px !important;
    display: flex !important;
    flex-direction: row !important; /* Horizontal arrangement */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    bottom: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: fit-content !important; /* Ensure all buttons fit */
    max-width: none !important; /* Remove max-width constraint */
    flex-wrap: nowrap !important; /* Keep all buttons in one row */
    overflow: visible !important; /* Don't clip buttons */
}

/* Hide therapist-only container inside media-controls in fullscreen mode (buttons moved to header) */
/* But show it in BLS mode so refresh button is visible */
body.therapist:has(.video-section.fullscreen) .media-controls .therapist-only {
    display: none !important;
    visibility: hidden !important;
}

/* Show therapist-only container in BLS mode (not fullscreen) */
body.therapist:not(:has(.video-section.fullscreen)) .media-controls .therapist-only,
body.therapist .video-section:not(.fullscreen) ~ .media-controls .therapist-only {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure all media buttons are visible in BLS mode */
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button,
body.therapist .video-section:not(.fullscreen) ~ .media-controls button,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child .media-controls button,
body.therapist .video-section:not(.fullscreen) .video-container:last-child .media-controls button,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#toggleVideo,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#toggleAudio,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#fullscreenToggle,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#clientResizeToggle,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#recoveryBtn,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#therapistRecoveryBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hide media controls at top level when in BLS mode (they should be inside client video) */
body.therapist:not(:has(.video-section.fullscreen)) .video-section ~ .media-controls:not(.video-container .media-controls),
body.therapist .video-section:not(.fullscreen) ~ .media-controls:not(.video-container .media-controls) {
    display: none !important;
}

/* Ensure media controls inside client video are visible */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child .media-controls,
body.therapist .video-section:not(.fullscreen) .video-container:last-child .media-controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide media controls at top when in BLS mode (sibling selector) */
body.therapist:not(:has(.video-section.fullscreen)) .video-section ~ .media-controls,
body.therapist .video-section:not(.fullscreen) ~ .media-controls {
    display: none !important;
}

/* Animation window (PIP) superimposed on client video (bottom-left).
   Canvas lives as a direct child of `.video-section` after `initializeTherapistView()` (videoSection.appendChild); not inside `.video-container:last-child`. */
body.therapist:not(:has(.video-section.fullscreen)) .video-section:not(.fullscreen) > .emdr-canvas-container,
body.therapist .video-section:not(.fullscreen) > .emdr-canvas-container {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 240px !important;
    height: 180px !important;
    z-index: 1002 !important; /* Below media controls */
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    cursor: move !important;
    min-width: 240px !important;
    min-height: 180px !important;
    max-width: 500px !important;
    max-height: 375px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Therapist BLS: after a few seconds, dim animation PiP so client video shows through */
body.therapist .video-section:not(.fullscreen) > .emdr-canvas-container.therapist-animation-canvas-dimmed {
    opacity: 0.5 !important;
    transition: opacity 0.6s ease !important;
}

/* EMDR controls in right column, below therapist PIP */
body.therapist:not(:has(.video-section.fullscreen)) .video-section ~ .main-content .emdr-header,
body.therapist .video-section:not(.fullscreen) ~ .main-content .emdr-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 5px 15px 10px 15px !important;
    border-radius: 12px !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    background: transparent !important;
    margin-top: 0 !important;
    display: flex !important;
    visibility: visible !important;
}

/* Move EMDR header into right column container */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 15px 10px 15px !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    visibility: visible !important;
    flex: 0 0 auto !important; /* Don't grow, don't shrink, use auto height */
    overflow-y: visible !important; /* Don't need scrolling */
}

/* Position title container at top - minimal spacing */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-title-container,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-title-container {
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid #ddd !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Make EMDR controls stack vertically in right column - directly under title */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-controls,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    /* Match preset rows: col1 = label (natural width inside fixed track), col2 = slider/buttons align with swatches */
    --bls-preset-col: 5.75rem;
}
/* Grid rows: same x-origin for controls as Ball/Background swatches (therapist BLS right rail).
   Exclude: client-only (role-gated visibility), #debugControls (dev panel; see show-session-debug-controls),
   .therapist-controls (has its own flex column layout). A blanket grid !important here was
   overriding display:none and exposing duplicate ← Back + dev test buttons for therapists. */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-controls > .control-group:not(.bls-inline-color-presets):not(.bls-inline-sound-profile):not(.client-only):not(.therapist-controls):not(#debugControls),
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-controls > .control-group:not(.bls-inline-color-presets):not(.bls-inline-sound-profile):not(.client-only):not(.therapist-controls):not(#debugControls) {
    display: grid !important;
    grid-template-columns: var(--bls-preset-col) 1fr;
    column-gap: 8px;
    align-items: center;
    width: 100% !important;
}
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-controls .bls-control-suffix,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-controls .bls-control-suffix {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-controls .start-bls-container .bls-control-suffix,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-controls .start-bls-container .bls-control-suffix {
    gap: 15px;
}

/* Dev-only Test EMDR/Video/Audio — must stay hidden unless Ctrl+Shift+D (avoids accidental show from any stray display:!important) */
#debugControls {
    display: none !important;
}
body.show-session-debug-controls #debugControls {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Ensure no gap between PIP preview and header in flex container */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child > .pip-media-stack + .emdr-header,
body.therapist .video-section:not(.fullscreen) .video-container:first-child > .pip-media-stack + .emdr-header {
    margin-top: 0 !important; /* No gap - header directly after video */
}

/* Reduce PIP preview spacing */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child > .pip-media-stack,
body.therapist .video-section:not(.fullscreen) .video-container:first-child > .pip-media-stack {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Preset block stays column stack; inner rows use same grid as above (inherits --bls-preset-col) */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-controls .control-group.bls-inline-color-presets,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-controls .control-group.bls-inline-color-presets,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-controls .control-group.bls-inline-sound-profile,
body.therapist .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-controls .control-group.bls-inline-sound-profile {
    width: 100% !important;
}

/* Ensure therapist animation container is visible in video-section (PIP) when NOT in fullscreen */
body.therapist:not(:has(.video-section.fullscreen)) .video-section .emdr-canvas-container:not(.therapist-animation-canvas-dimmed),
body.therapist .video-section:not(.fullscreen) .emdr-canvas-container:not(.therapist-animation-canvas-dimmed) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide animation container in fullscreen mode for therapist */
body.therapist .video-section.fullscreen .emdr-canvas-container,
body.therapist .video-section.fullscreen ~ .emdr-canvas-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Therapist BLS animation PiP — on document.body, always viewport-fixed when visible */
body.therapist .emdr-canvas-container.therapist-animation-pip-visible {
    position: fixed !important;
    left: 20px !important;
    bottom: 20px !important;
    top: auto !important;
    right: auto !important;
    width: 240px !important;
    height: 180px !important;
    min-width: 240px !important;
    min-height: 180px !important;
    max-width: 500px !important;
    max-height: 375px !important;
    z-index: 1005 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    background: #000 !important;
    cursor: move !important;
}

body.therapist .emdr-canvas-container.therapist-animation-pip-visible .emdr-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    visibility: visible !important;
}

.therapist-bls-preview-overlay {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 6 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 6px;
    text-align: center;
    pointer-events: none !important;
    box-sizing: border-box;
}

.therapist-bls-preview-label {
    margin: 0;
    max-width: 76px;
    padding: 6px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

body.therapist .emdr-canvas-container.therapist-animation-pip-visible.therapist-animation-preview-stopped .therapist-bls-preview-overlay {
    display: flex !important;
}

body.therapist .emdr-canvas-container.therapist-animation-pip-visible:not(.therapist-animation-preview-stopped) .therapist-bls-preview-overlay {
    display: none !important;
    visibility: hidden !important;
}

body.therapist .emdr-canvas-container.therapist-animation-preview-stopped .therapist-client-view-pip-hints {
    display: none !important;
}

/* Show media controls in fullscreen mode for therapist - top left, just below header */
/* Hide entire media-controls container for therapists (in all modes) - ULTRA SPECIFIC */
body.therapist .media-controls,
body.therapist:has(.video-section.fullscreen) .media-controls,
body.therapist .video-section.fullscreen ~ .media-controls,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls,
body.therapist .video-section:not(.fullscreen) ~ .media-controls,
body.therapist body > .media-controls,
body.therapist .video-section .video-container .media-controls,
body.therapist div.media-controls,
body.therapist[class*="therapist"] .media-controls,
html body.therapist .media-controls,
html body.therapist div.media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Show ALL buttons in fullscreen mode for therapist */
body.therapist:has(.video-section.fullscreen) .media-controls button,
body.therapist .video-section.fullscreen ~ .media-controls button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure End Session button is visible for therapists in all modes */
body.therapist .media-controls button#endSessionBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide End Session button for clients */
body.client .media-controls button#endSessionBtn {
    display: none !important;
    visibility: hidden !important;
}

/* Show all buttons in BLS mode (not fullscreen) - with multiple selector variations */
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#clientResizeToggle,
body.therapist .video-section:not(.fullscreen) ~ .media-controls button#clientResizeToggle,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child .media-controls button#clientResizeToggle,
body.therapist .video-section:not(.fullscreen) .video-container:last-child .media-controls button#clientResizeToggle,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#recoveryBtn,
body.therapist .video-section:not(.fullscreen) ~ .media-controls button#recoveryBtn,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child .media-controls button#recoveryBtn,
body.therapist .video-section:not(.fullscreen) .video-container:last-child .media-controls button#recoveryBtn,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#therapistRecoveryBtn,
body.therapist .video-section:not(.fullscreen) ~ .media-controls button#therapistRecoveryBtn,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child .media-controls button#therapistRecoveryBtn,
body.therapist .video-section:not(.fullscreen) .video-container:last-child .media-controls button#therapistRecoveryBtn,
body.therapist:not(:has(.video-section.fullscreen)) .media-controls button#endSessionBtn,
body.therapist .video-section:not(.fullscreen) ~ .media-controls button#endSessionBtn,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .video-container:last-child .media-controls button#endSessionBtn,
body.therapist .video-section:not(.fullscreen) .video-container:last-child .media-controls button#endSessionBtn,
/* Also target when media-controls is directly on body (after JavaScript move) */
body.therapist:not(:has(.video-section.fullscreen)) body > .media-controls button#clientResizeToggle,
body.therapist .video-section:not(.fullscreen) ~ body > .media-controls button#clientResizeToggle,
body.therapist:not(:has(.video-section.fullscreen)) body > .media-controls button#recoveryBtn,
body.therapist .video-section:not(.fullscreen) ~ body > .media-controls button#recoveryBtn,
body.therapist:not(:has(.video-section.fullscreen)) body > .media-controls button#therapistRecoveryBtn,
body.therapist .video-section:not(.fullscreen) ~ body > .media-controls button#therapistRecoveryBtn,
body.therapist:not(:has(.video-section.fullscreen)) body > .media-controls button#endSessionBtn,
body.therapist .video-section:not(.fullscreen) ~ body > .media-controls button#endSessionBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hide media controls in fullscreen mode for client (refresh button moved to header) */
body.client:has(.video-section.fullscreen) .media-controls,
body.client .video-section.fullscreen ~ .media-controls,
body.client:has(.video-section.fullscreen) body > .media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Hide client-only container in media-controls for fullscreen mode (button moved to header) */
body.client:has(.video-section.fullscreen) .media-controls .client-only,
body.client .video-section.fullscreen ~ .media-controls .client-only,
body.client:has(.video-section.fullscreen) body > .media-controls .client-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide BLS mode button for clients - only show Refresh button */
/* This rule must come after other visibility rules to ensure it takes precedence */
body.client .media-controls .client-only button#clientFullscreenToggle,
body.client:has(.video-section.fullscreen) .media-controls .client-only button#clientFullscreenToggle,
body.client .video-section.fullscreen ~ .media-controls .client-only button#clientFullscreenToggle,
body.client:has(.video-section.fullscreen) body > .media-controls .client-only button#clientFullscreenToggle,
body.client:not(:has(.video-section.fullscreen)) .media-controls .client-only button#clientFullscreenToggle,
body.client .video-section:not(.fullscreen) ~ .media-controls .client-only button#clientFullscreenToggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Hide old recoveryBtn in media-controls for fullscreen (button moved to header) */
body.client:has(.video-section.fullscreen) .media-controls .client-only button#recoveryBtn,
body.client .video-section.fullscreen ~ .media-controls .client-only button#recoveryBtn,
body.client:has(.video-section.fullscreen) body > .media-controls .client-only button#recoveryBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Ensure clientResizeToggle button in client-only container is styled like other buttons in fullscreen mode */
body.client:has(.video-section.fullscreen) .media-controls .client-only button#clientResizeToggle,
body.client .video-section.fullscreen ~ .media-controls .client-only button#clientResizeToggle,
body.client:has(.video-section.fullscreen) body > .media-controls .client-only button#clientResizeToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
}

/* Ensure all media buttons are visible in client fullscreen mode (matching BLS screen) */
/* Note: clientFullscreenToggle and recoveryBtn are hidden (recoveryBtn moved to header), only clientResizeToggle is shown */
body.client:has(.video-section.fullscreen) .media-controls .client-only button:not(#clientFullscreenToggle):not(#recoveryBtn),
body.client .video-section.fullscreen ~ .media-controls .client-only button:not(#clientFullscreenToggle):not(#recoveryBtn),
body.client:has(.video-section.fullscreen) body > .media-controls .client-only button:not(#clientFullscreenToggle):not(#recoveryBtn),
body.client:has(.video-section.fullscreen) .media-controls button#toggleVideo,
body.client:has(.video-section.fullscreen) .media-controls button#toggleAudio,
body.client:has(.video-section.fullscreen) .media-controls .client-only button#clientResizeToggle,
body.client .video-section.fullscreen ~ .media-controls .client-only button#clientResizeToggle,
body.client:has(.video-section.fullscreen) body > .media-controls .client-only button#clientResizeToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Keep EMDR header visible in fullscreen for therapist - override main-content hiding */
/* Since header is inside main-content, we need to show it even when parent is hidden */
/* Make therapist fullscreen header EXACTLY match client fullscreen header */
body.therapist:has(.video-section.fullscreen) .main-content .emdr-header,
body.therapist:has(.video-section.fullscreen) .emdr-header,
body.therapist .video-section.fullscreen ~ .emdr-header {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2004 !important;
    opacity: 1 !important;
    /* Match client exactly - same background, padding, everything */
    background: linear-gradient(135deg, #34c759 0%, #28a745 100%) !important; /* Same as client */
    color: white !important;
    padding: 10px 15px !important; /* Explicit - same as base */
    border-bottom: 1px solid #ddd !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    /* Remove any height constraints */
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
}

/* Fullscreen therapist green header: P2P/TURN chips need opaque contrast (yellow-on-yellow was illegible). */
body.therapist:has(.video-section.fullscreen) .connection-type-indicator.p2p,
body.therapist .video-section.fullscreen ~ .emdr-header .connection-type-indicator.p2p {
    background: rgba(0, 0, 0, 0.48);
    color: #fde047;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
body.therapist:has(.video-section.fullscreen) .connection-type-indicator.turn,
body.therapist .video-section.fullscreen ~ .emdr-header .connection-type-indicator.turn {
    background: rgba(0, 0, 0, 0.42);
    color: #bbf7d0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}

/* Make emdr-title-container only take needed space - title on left */
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-title-container,
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-title-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: auto !important;
    /* Title on left, not full width */
}

/* Ensure title matches client */
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-title,
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Position controls to the right - match client button positioning */
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls,
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    /* Buttons on right side */
}

/* Style therapist Ball Audio button to match client - with border frame */
body.therapist:has(.video-section.fullscreen) .emdr-header #therapistBallAudioBtn,
body.therapist .video-section.fullscreen ~ .emdr-header #therapistBallAudioBtn {
    font-size: 14px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* White border for visibility */
    /* Background color controlled by JavaScript - don't force it */
    color: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body.therapist:has(.video-section.fullscreen) .emdr-header #therapistBallAudioBtn:hover,
body.therapist .video-section.fullscreen ~ .emdr-header #therapistBallAudioBtn:hover {
    filter: brightness(0.9) !important; /* Darken on hover for any color */
    transform: translateY(-1px) !important;
}

/* Hide speed control in fullscreen mode for therapist */
/* Ensure speed slider and EMDR controls are always interactive */
#speedSlider,
.emdr-header,
.emdr-controls,
.control-group,
#speedSlider *,
.emdr-controls * {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#speedSlider),
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#speedSlider),
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#speedValue),
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#speedValue) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide pattern selection in fullscreen mode for therapist */
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(.pattern-btn),
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(.pattern-btn) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .random-quick-controls,
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .random-quick-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .bls-inline-color-presets,
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .bls-inline-color-presets,
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .bls-inline-sound-profile,
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .bls-inline-sound-profile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide Start BLS button in fullscreen mode for therapist */
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#startStopBtn),
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#startStopBtn),
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .start-bls-container,
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .start-bls-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Keep only Ball Audio and Test button visible in fullscreen for therapist (Quick Settings hidden) */
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#therapistBallAudioBtn),
body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#testBtn),
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#therapistBallAudioBtn),
body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#testBtn) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important; /* Vertically center the button */
}

/* Show client refresh button in header for fullscreen mode */
body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#clientRefreshBtn),
body.client .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#clientRefreshBtn) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important; /* Vertically center the button */
}

/* Show client refresh button in header for BLS mode (consistent with fullscreen) */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-controls .control-group:has(#clientRefreshBtn) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
}

/* Hide Quick Settings button for therapists (always hidden) */
body.therapist .emdr-header .emdr-controls .control-group:has(.dropdown-trigger),
body.therapist .emdr-header .emdr-controls .control-group .dropdown-trigger {
    display: none !important;
    visibility: hidden !important;
}

/* Keep EMDR header visible in fullscreen for client - same as therapist */
body.client:has(.video-section.fullscreen) .main-content .emdr-header {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2004 !important; /* Above fullscreen video */
    opacity: 1 !important;
}

/* Also target it directly if it's moved outside main-content */
body.client:has(.video-section.fullscreen) .emdr-header {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2004 !important;
    opacity: 1 !important;
    padding: 6px 15px !important; /* Reduced padding for narrower height */
    flex-wrap: nowrap !important; /* Prevent wrapping to keep single line */
    align-items: center !important;
}

/* Ensure title container is compact in client fullscreen */
body.client:has(.video-section.fullscreen) .emdr-header .emdr-title-container,
body.client .video-section.fullscreen ~ .emdr-header .emdr-title-container {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ensure title text is compact */
body.client:has(.video-section.fullscreen) .emdr-header .emdr-title,
body.client .video-section.fullscreen ~ .emdr-header .emdr-title {
    font-size: 16px !important; /* Slightly smaller font */
    line-height: 1.2 !important; /* Tighter line height */
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Ensure client header controls are visible and properly aligned in fullscreen */
body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls,
body.client .video-section.fullscreen ~ .emdr-header .emdr-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important; /* Prevent wrapping to keep single line */
    margin-left: auto !important; /* Push controls to the right */
}

/* Hide other control groups in client header for fullscreen (only show refresh button) */
body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#speedSlider),
body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#speedValue),
body.client .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#speedSlider),
body.client .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#speedValue),
body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(.pattern-btn),
body.client .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(.pattern-btn),
body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls .control-group:has(#startStopBtn),
body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls .start-bls-container,
body.client .video-section.fullscreen ~ .emdr-header .emdr-controls .control-group:has(#startStopBtn),
body.client .video-section.fullscreen ~ .emdr-header .emdr-controls .start-bls-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure fullscreen mode overrides all container constraints */
body:has(.video-section.fullscreen) {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.video-section.fullscreen * {
    box-sizing: border-box !important;
}

/* Fullscreen-controls removed - using single unified media-controls for all modes */

.media-icon {
    font-size: 16px;
}

.media-text {
    font-weight: 500;
}

/* Navigation Buttons */
.nav-buttons {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}

.back-btn, .leave-btn {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.back-btn:hover, .leave-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.leave-btn {
    background: rgba(220, 53, 69, 0.8);
}

.leave-btn:hover {
    background: rgba(220, 53, 69, 1);
}

/* Main content area - below video and controls */
.main-content {
    position: fixed;
    top: 380px; /* Position below fixed controls + video */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent scrolling */
}

/* Therapist View - Show controls but hide canvas container (canvas is in PIP) */
body.therapist .main-content {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 100px; /* Below header */
    left: 0;
    right: 0;
    bottom: 0;
}

/* Hide the original canvas container in main-content (canvas is moved to video-section as PIP) */
body.therapist .main-content .emdr-canvas-container {
    display: none !important;
}

/* Waiting Room Indicator - Top-right corner (therapist only, consistent in both modes) */
.waiting-room-indicator {
    position: fixed;
    top: 10px; /* Top of viewport */
    right: 15px; /* Right side with margin */
    left: auto; /* Override any left positioning */
    z-index: 10001; /* Above client name display (10000) and header (2004), but below critical overlays */
    background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    display: none; /* Hidden by default, shown only when .visible class is added */
    font-weight: 500;
    max-width: 300px;
    animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.waiting-room-indicator.visible {
    display: block;
}

.waiting-room-indicator .indicator-icon {
    margin-right: 6px;
    font-size: 14px;
}

.waiting-room-indicator .waiting-count {
    font-weight: 600;
    margin-right: 4px;
}

.waiting-room-indicator .waiting-names {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.95;
    line-height: 1.4;
}

.waiting-room-indicator .waiting-names .name-item {
    margin: 2px 0;
}

/* Consistent positioning for both fullscreen and BLS modes */
body.therapist:has(.video-section.fullscreen) .waiting-room-indicator,
body.therapist:not(:has(.video-section.fullscreen)) .waiting-room-indicator {
    top: 10px !important;
    right: 15px !important;
    left: auto !important;
}

/* Ensure emdr-header is visible for therapist */
body.therapist .emdr-header {
    display: flex !important;
    visibility: visible !important;
}

/* Fixed EMDR controls at top of screen */
.emdr-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Connection Type Indicator (Therapist only) */
.connection-details-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* P2P / TURN strip under “Request Client View” (BLS sidebar + fullscreen therapist chrome) */
.therapist-connection-strip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.therapist-connection-strip .connecting-pill {
    margin-left: 0;
    align-self: flex-start;
}

.therapist-connection-strip .connection-details-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px 10px;
    width: 100%;
}

.therapist-connection-strip .connection-type-indicator {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px 8px;
    width: 100%;
}

.therapist-connection-strip .connection-details-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0 !important;
    right: auto;
    width: min(100%, 320px);
    z-index: 10003;
}

body.therapist:has(.video-section.fullscreen) .emdr-header .therapist-connection-strip,
body.therapist .video-section.fullscreen ~ .emdr-header .therapist-connection-strip {
    width: auto;
    min-width: min(288px, 92vw);
    margin-top: 0;
    align-items: flex-end;
}

body.therapist:has(.video-section.fullscreen) .therapist-connection-strip .connecting-pill,
body.therapist .video-section.fullscreen ~ .therapist-connection-strip .connecting-pill {
    align-self: flex-end;
}

body.therapist:has(.video-section.fullscreen) .therapist-connection-strip .connection-details-wrapper,
body.therapist .video-section.fullscreen ~ .therapist-connection-strip .connection-details-wrapper {
    justify-content: flex-end;
}

body.therapist:has(.video-section.fullscreen) .therapist-controls.control-group,
body.therapist .video-section.fullscreen ~ .emdr-header .therapist-controls.control-group {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

body.therapist:has(.video-section.fullscreen) .therapist-connection-strip .connection-details-panel,
body.therapist .video-section.fullscreen ~ .therapist-connection-strip .connection-details-panel {
    left: auto !important;
    right: 0 !important;
}

/* Fullscreen: dim corner quality dots until hover/focus (therapist + client) */
.video-section.fullscreen .video-container .connection-quality-indicator {
    opacity: 0.38;
    transition: opacity 0.22s ease;
}

.video-section.fullscreen .video-container .connection-quality-indicator:hover,
.video-section.fullscreen .video-container .connection-quality-indicator:focus-within {
    opacity: 1;
}

/* Fullscreen therapist: dim P2P / Details strip until hover (stay bright when Details is open) */
body.therapist:has(.video-section.fullscreen) .emdr-header .therapist-connection-strip,
body.therapist .video-section.fullscreen ~ .emdr-header .therapist-connection-strip {
    opacity: 0.2;
    transition: opacity 0.22s ease;
}

body.therapist:has(.video-section.fullscreen) .emdr-header .therapist-connection-strip:hover,
body.therapist .video-section.fullscreen ~ .emdr-header .therapist-connection-strip:hover,
body.therapist:has(.video-section.fullscreen) .emdr-header .therapist-connection-strip:focus-within,
body.therapist .video-section.fullscreen ~ .emdr-header .therapist-connection-strip:focus-within,
body.therapist:has(.video-section.fullscreen) .emdr-header .therapist-connection-strip.connection-details-panel-open,
body.therapist .video-section.fullscreen ~ .emdr-header .therapist-connection-strip.connection-details-panel-open {
    opacity: 1;
}

/* BLS mode (therapist): dim corner quality monitors until hover/focus */
body.therapist .video-section:not(.fullscreen) .video-container .connection-quality-indicator {
    opacity: 0.28;
    transition: opacity 0.22s ease;
}

body.therapist .video-section:not(.fullscreen) .video-container .connection-quality-indicator:hover,
body.therapist .video-section:not(.fullscreen) .video-container .connection-quality-indicator:focus-within {
    opacity: 1;
}

/* BLS mode (client): dim corner quality monitors until hover/focus */
body.client .video-section:not(.fullscreen) .video-container .connection-quality-indicator {
    opacity: 0.28;
    transition: opacity 0.22s ease;
}

body.client .video-section:not(.fullscreen) .video-container .connection-quality-indicator:hover,
body.client .video-section:not(.fullscreen) .video-container .connection-quality-indicator:focus-within {
    opacity: 1;
}

/* BLS mode (therapist): dim P2P / quality / Details strip until hover (bright when Details open) */
body.therapist:not(:has(.video-section.fullscreen)) .therapist-connection-strip,
body.therapist .video-section:not(.fullscreen) .therapist-connection-strip {
    opacity: 0.2;
    transition: opacity 0.22s ease;
}

body.therapist:not(:has(.video-section.fullscreen)) .therapist-connection-strip:hover,
body.therapist .video-section:not(.fullscreen) .therapist-connection-strip:hover,
body.therapist:not(:has(.video-section.fullscreen)) .therapist-connection-strip:focus-within,
body.therapist .video-section:not(.fullscreen) .therapist-connection-strip:focus-within,
body.therapist:not(:has(.video-section.fullscreen)) .therapist-connection-strip.connection-details-panel-open,
body.therapist .video-section:not(.fullscreen) .therapist-connection-strip.connection-details-panel-open {
    opacity: 1;
}

/* [v2.5.108] Connecting pill — initial-connect hint (placed under Request Client View).
   Deferred show ~1500ms; full-bleed overlay still handles errors and mid-session connects. */
.connecting-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 152, 0, 0.12);
    color: #d6831a;
    border: 1px solid rgba(255, 152, 0, 0.25);
    transition: opacity 0.25s ease;
}

.connecting-pill .connecting-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9800;
    animation: connecting-pill-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes connecting-pill-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1.0; transform: scale(1.0); }
}

.connection-type-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.1);
    color: #333;
    transition: all 0.3s ease;
}

.connection-type-indicator #connectionTypeText {
    font-size: 15px;
    letter-spacing: 0.02em;
}

.connection-type-indicator.turn {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.connection-type-indicator.p2p {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.connection-type-indicator.unknown {
    background: rgba(128, 128, 128, 0.2);
    color: #666;
}

.health-badge {
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

.health-badge.good {
    background: #0a0a0a;
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.35);
}

.health-badge.warning {
    background: #0a0a0a;
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.45);
}

.health-badge.poor {
    background: #0a0a0a;
    color: #fb7185;
    border-color: rgba(251, 113, 133, 0.45);
}

.connection-details-toggle {
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    cursor: pointer;
}

.connection-details-panel {
    position: absolute;
    top: 30px;
    left: 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    min-width: 220px;
    z-index: 1002;
}

.connection-details-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}

.connection-details-label {
    color: #666;
}

.btn-switch-turn {
    margin-left: 8px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-switch-turn:hover {
    background: rgba(0, 123, 255, 0.2);
    border-color: #007bff;
}

.btn-switch-turn:active {
    transform: scale(0.95);
}

/* Therapist controls adjustment for enlarged video */
body.therapist .main-content {
    transition: margin-top 0.3s ease;
}

/* When video section is enlarged, push content down */
body.therapist .video-section.enlarged {
    height: 250px;
}

body.therapist .video-section.enlarged ~ .main-content {
    top: 430px; /* Adjusted for fixed controls + enlarged video */
}

/* Controls are now fixed at top, no need for dynamic positioning */

/* Client video/audio controls - top right, horizontal layout (matching fullscreen style) */
/* Hide media controls in BLS mode for client (refresh button moved to header) */
body.client:not(:has(.video-section.fullscreen)) .media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Override any width rules that might stretch the container */
body.client:not(:has(.video-section.fullscreen)) .media-controls,
body.client:not(:has(.video-section.fullscreen)) .media-controls .client-only {
    width: auto !important;
    max-width: none !important;
    min-width: fit-content !important;
}

/* Style media buttons in header to match fullscreen styling (horizontal layout) */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .media-controls .media-btn {
    background: rgba(255, 255, 255, 0.1) !important; /* Subtle white background on black */
    padding: 8px 15px !important;
    font-size: 14px !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: auto !important; /* Auto width for horizontal layout */
    min-width: fit-content !important;
    max-width: none !important;
    flex-grow: 0 !important; /* Don't allow buttons to grow */
    flex-shrink: 0 !important; /* Don't allow buttons to shrink */
    flex-basis: auto !important; /* Use content size */
    justify-content: center !important;
    white-space: nowrap !important; /* Prevent text wrapping */
}

body.client:not(:has(.video-section.fullscreen)) .emdr-header .media-controls .media-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.client:not(:has(.video-section.fullscreen)) .emdr-header .media-controls .media-btn.muted {
    background: rgba(220, 53, 69, 0.3) !important; /* Red for muted */
}

/* Ensure header stays at top for client BLS mode */
body.client:not(:has(.video-section.fullscreen)) .emdr-header {
    position: fixed !important; /* Keep header fixed at top */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 6px 15px !important; /* Reduced padding for narrower height */
    flex-wrap: nowrap !important; /* Prevent wrapping to keep single line */
    align-items: center !important;
}

/* Ensure title container is compact in client BLS mode */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-title-container {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ensure title text is compact in BLS mode */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-title {
    font-size: 16px !important; /* Slightly smaller font */
    line-height: 1.2 !important; /* Tighter line height */
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Hide media-controls in header for BLS mode (using emdr-controls instead) */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove margin from emdr-controls since media controls are now centered */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-controls {
    margin-right: 0 !important;
}

/* Hide media-controls container in BLS mode for client (refresh button moved to header) */
body.client:not(:has(.video-section.fullscreen)) .video-section ~ .media-controls,
body.client:not(:has(.video-section.fullscreen)) body > .media-controls:not(.emdr-header .media-controls) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Hide client-only container inside media-controls for BLS mode (button moved to header) */
body.client:not(:has(.video-section.fullscreen)) .video-section ~ .media-controls .client-only,
body.client:not(:has(.video-section.fullscreen)) body > .media-controls .client-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Buttons in media-controls are hidden in BLS mode (moved to header) - rules removed */

/* Ensure header controls are visible and properly aligned for BLS mode (consistent with fullscreen) */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important; /* Prevent wrapping to keep single line */
    margin-left: auto !important; /* Push controls to the right */
}

/* Hide media-controls in header (using emdr-controls instead) */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Removed: client-only container inside media-controls (using emdr-controls instead) - button moved to header */

/* Hide client header buttons container at bottom (buttons moved to emdr-controls area) */
body.client .header-buttons {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide room indicator since it's now in video label */
body.client .header-buttons .room-info {
    display: none !important;
}

/* Room indicator in white area */
body.client .header-buttons .room-info {
    color: #333;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 0 10px;
    border-right: 1px solid rgba(0,0,0,0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Navigation buttons in horizontal row */
body.client .header-buttons .nav-buttons-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    flex: 1;
    justify-content: flex-end; /* Align buttons to the right */
    align-items: center; /* Align buttons vertically */
}

/* Style Send My View button in header buttons */
body.client .header-buttons .nav-buttons-row #sendScreenshotBtn {
    font-size: 10px !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    margin: 0 !important;
    min-width: auto;
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.client .header-buttons .btn,
body.client .header-buttons .back-btn,
body.client .header-buttons .leave-btn {
    font-size: 10px !important;
    padding: 8px 12px !important; /* Override general button padding */
    white-space: nowrap;
    margin: 0 !important;
    min-width: auto;
    height: auto !important;
    line-height: 1.4 !important; /* Consistent line height */
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    position: relative !important; /* Override any absolute positioning */
    top: auto !important; /* Remove any top positioning */
    left: auto !important; /* Remove any left positioning */
    right: auto !important; /* Remove any right positioning */
    bottom: auto !important; /* Remove any bottom positioning */
}

/* Ensure button spans have consistent styling */
body.client .header-buttons .back-btn span,
body.client .header-buttons .leave-btn span {
    display: inline-block;
    line-height: 1.4;
    vertical-align: middle;
}

/* Hide original navigation for client */
body.client .nav-buttons {
    display: none !important;
}

body.client .status-info {
    display: none !important;
}

/* EMDR Controls Header */
.emdr-header {
    background: white;
    padding: 10px 15px; /* Reduced padding to minimize white space */
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Covers the post-camera / pre-fullscreen-layout gap (therapist + client). Below permission/device-check modals (100000), below sandbox banner (99999). */
#sessionStartupSplash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    padding-top: max(24px, env(safe-area-inset-top));
    background: #0b0b0f;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Instant show — no fade-in — avoids flashing session chrome before paint */
}

#sessionStartupSplash.session-startup-splash--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.theme-light #sessionStartupSplash {
    background: #f3f4f6;
}

.session-startup-splash__inner {
    text-align: center;
    max-width: 320px;
}

.session-startup-splash__logo {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0 auto 20px;
}

.session-startup-splash__msg {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f3f4f6;
    letter-spacing: 0.02em;
    line-height: 1.45;
}

body.theme-light .session-startup-splash__msg {
    color: #1f2937;
}

.session-startup-splash__hint {
    margin: 14px 0 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(243, 244, 246, 0.65);
}

body.theme-light .session-startup-splash__hint {
    color: rgba(31, 41, 55, 0.6);
}

.session-startup-splash__progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px auto 0;
    min-height: 10px;
}

.session-startup-splash__progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(243, 244, 246, 0.75);
    animation: sessionStartupProgressPulse 1.1s ease-in-out infinite;
}

.session-startup-splash__progress-dot:nth-child(2) {
    animation-delay: 0.16s;
}

.session-startup-splash__progress-dot:nth-child(3) {
    animation-delay: 0.32s;
}

body.theme-light .session-startup-splash__progress-dot {
    background: rgba(31, 41, 55, 0.5);
}

.session-startup-splash__spinner {
    width: 28px;
    height: 28px;
    margin: 22px auto 0;
    border: 3px solid rgba(243, 244, 246, 0.2);
    border-top-color: rgba(243, 244, 246, 0.85);
    border-radius: 50%;
    animation: sessionStartupSplashSpin 0.85s linear infinite;
}

body.theme-light .session-startup-splash__spinner {
    border-color: rgba(31, 41, 55, 0.15);
    border-top-color: rgba(31, 41, 55, 0.55);
}

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

@keyframes sessionStartupProgressPulse {
    0%, 80%, 100% { opacity: 0.32; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

.sandbox-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #d32f2f;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 4px 0;
    letter-spacing: 0.4px;
    pointer-events: none;
}

.emdr-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.emdr-home-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    border-radius: 4px;
}

.emdr-home-logo-link:hover {
    opacity: 0.85;
}

.emdr-home-logo-link:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.emdr-logo-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
}

.version-number {
    font-size: 11px;
    font-weight: 400;
    color: #666;
    margin-left: 8px;
    opacity: 0.7;
}

.theme-toggle-btn {
    margin-left: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(20, 20, 28, 0.7);
    color: #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    background: rgba(20, 20, 28, 0.92);
    border-color: rgba(255, 255, 255, 0.35);
}

body.theme-light .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    border-color: #cbd5e1;
}

body.theme-light .theme-toggle-btn:hover {
    background: #ffffff;
    border-color: #94a3b8;
}

body.theme-light .video-section {
    background: #e5e7eb;
}

/* Client BLS: canvas lives under `.video-section` (z-index layering). A solid
   light-theme background replaces the client's transparent pane and hides the animation. */
body.theme-light.client:not(:has(.video-section.fullscreen)) .video-section,
body.theme-light.client .video-section:not(.fullscreen) {
    background: transparent !important;
}

body.theme-light .video-container {
    background: #d1d5db;
}

body.theme-light .emdr-header {
    background: rgba(248, 250, 252, 0.95) !important;
    border-bottom: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

body.theme-light .emdr-title-text,
body.theme-light .control-group label,
body.theme-light #speedValue,
body.theme-light .random-quick-label,
body.theme-light .bls-inline-color-label {
    color: #1f2937 !important;
}

body.theme-light .version-number {
    color: #475569 !important;
    opacity: 0.85 !important;
}

body.theme-light .bottom-video-controls {
    background: rgba(248, 250, 252, 0.92) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14) !important;
}

body.theme-light .bottom-control-btn {
    color: #1f2937 !important;
}

body.theme-light .bottom-control-btn svg {
    stroke: #1f2937 !important;
}

body.theme-light .chat-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #d1d5db !important;
}

body.theme-light .chat-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-light .chat-header h3 {
    color: #1f2937 !important;
}

body.theme-light .chat-messages {
    background: #ffffff !important;
}

body.theme-light .chat-input {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
}

body.theme-light .connection-details-panel {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Dark theme (default): charcoal panels instead of white session chrome */
body:not(.theme-light) .emdr-header {
    background: rgba(45, 47, 54, 0.98) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

body:not(.theme-light) .emdr-title,
body:not(.theme-light) .emdr-title-text {
    color: #e8e9ed !important;
}

body:not(.theme-light) .version-number {
    color: rgba(203, 213, 225, 0.9) !important;
    opacity: 1 !important;
}

body:not(.theme-light) .control-group label,
body:not(.theme-light) #speedValue,
body:not(.theme-light) .random-quick-label,
body:not(.theme-light) .bls-inline-color-label {
    color: #ffffff !important;
}

body:not(.theme-light) .connection-type-indicator:not(.turn):not(.p2p) {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

body:not(.theme-light) .connection-details-toggle {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

body:not(.theme-light) .connection-details-panel {
    background: #2d2f36 !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body:not(.theme-light) .connection-details-label {
    color: #9ca3af !important;
}

body:not(.theme-light) .btn-switch-turn {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd !important;
}

/* Therapist BLS split column: therapist + controls sidebar (mobile / narrow) */
body.therapist:not(.theme-light):not(:has(.video-section.fullscreen)) .video-section,
body.therapist:not(.theme-light) .video-section:not(.fullscreen) {
    background: #2d2f36 !important;
}

body.therapist:not(.theme-light):not(:has(.video-section.fullscreen)) .video-section .video-container:first-child,
body.therapist:not(.theme-light) .video-section:not(.fullscreen) .video-container:first-child {
    background: #2d2f36 !important;
}

body.therapist:not(.theme-light):not(:has(.video-section.fullscreen)) .video-section .video-container:first-child .emdr-header .emdr-title-container,
body.therapist:not(.theme-light) .video-section:not(.fullscreen) .video-container:first-child .emdr-header .emdr-title-container {
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

body:not(.theme-light) .cycle-counter {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f3f4f6 !important;
}

/* Client Name Display (Therapist only, positioned at top below header) */
body.therapist .video-container:last-child #clientNameDisplay,
body.therapist .video-container:last-child .client-name-display,
body.therapist .video-container.fullscreen-video #clientNameDisplay,
body.therapist .video-container.fullscreen-video .client-name-display,
body.therapist #clientNameDisplay {
    position: fixed !important; /* Fixed to viewport so it's below header */
    top: 60px !important; /* Will be updated dynamically based on header height */
    bottom: auto !important; /* Ensure it's never at the bottom */
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    z-index: 10000 !important; /* Above header (2004), media-controls (9999 in fullscreen), PIP (2002), fullscreen video (2001) */
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important; /* Don't interfere with video interactions */
    display: block !important; /* Show by default for therapists */
    visibility: visible !important;
    opacity: 1 !important;
}

body.therapist:has(.video-section.fullscreen) .video-container:last-child #clientNameDisplay,
body.therapist:has(.video-section.fullscreen) .video-container:last-child .client-name-display,
body.therapist .video-section.fullscreen .video-container:last-child #clientNameDisplay,
body.therapist .video-section.fullscreen .video-container:last-child .client-name-display,
body.therapist:has(.video-section.fullscreen) .video-container.fullscreen-video #clientNameDisplay,
body.therapist .video-section.fullscreen .video-container.fullscreen-video #clientNameDisplay {
    z-index: 10000 !important; /* Above header (2004) and media-controls (9999) */
}

/* Ensure client name is at top in BLS mode (not fullscreen) for therapist */
body.therapist:not(:has(.video-section.fullscreen)) .video-container:last-child #clientNameDisplay,
body.therapist .video-section:not(.fullscreen) .video-container:last-child #clientNameDisplay,
body.therapist:not(:has(.video-section.fullscreen)) #clientNameDisplay,
body.therapist .video-section:not(.fullscreen) ~ * #clientNameDisplay {
    position: fixed !important;
    top: 10px !important; /* At top of viewport in BLS mode (will be updated dynamically if needed) */
    bottom: auto !important; /* Ensure it's not at bottom - always at top */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10000 !important;
}

.emdr-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    flex-direction: row; /* Default to horizontal layout */
    align-items: center;
    gap: 5px;
}

/* Force client-only control-group to be horizontal (override any column rules) */
body.client .control-group.client-only,
body.client .emdr-controls .control-group.client-only,
body.client .emdr-header .emdr-controls .control-group.client-only {
    flex-direction: row !important;
    display: flex !important;
}

/* CRITICAL OVERRIDE: Force ALL client control-groups to be row layout, no exceptions */
body.client .control-group,
body.client .emdr-controls .control-group,
body.client .emdr-header .emdr-controls .control-group {
    flex-direction: row !important;
}

/* Exception: Only therapist-controls should be column, not client-only */
body.client .control-group:not(.therapist-controls) {
    flex-direction: row !important;
}

.control-group label {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

.control-group input[type="range"] {
    width: 100px;
}

/* Speed value display - make it visible and prominent */
#speedValue {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    min-width: 35px;
    text-align: left;
    display: inline-block;
}

.control-group button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.random-quick-controls {
    gap: 6px;
    align-items: center;
    width: 100%;
}

.random-quick-label {
    font-size: 14px;
    font-weight: 600;
    margin-right: 2px;
}

.random-quick-btn {
    padding: 7px 10px !important;
    min-width: 0;
    font-size: 12px !important;
    line-height: 1.1;
    border: 1px solid #e2e8f0 !important;
}

.random-quick-btn.active {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.22);
}

.random-quick-btn.active::before {
    content: "✓ ";
    font-weight: 700;
}

.random-quick-suffix {
    align-items: flex-start !important;
}

.random-quick-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
}

.random-quick-interval {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 2px 2px;
    min-width: 118px;
}

.random-quick-interval[hidden] {
    display: none !important;
}

.random-mini-slider {
    flex: 1;
    min-width: 72px;
    max-width: 120px;
    height: 4px;
    margin: 0;
}

.random-mini-value {
    font-size: 11px;
    font-weight: 600;
    min-width: 1.1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.random-mini-unit {
    font-size: 10px;
    opacity: 0.75;
}

body.theme-light .random-mini-value,
body.theme-light .random-mini-unit {
    color: #334155;
}

body:not(.theme-light) .random-mini-value,
body:not(.theme-light) .random-mini-unit {
    color: #cbd5e1;
}

/* Therapist BLS header: tone + fixed swatches (Quick Settings parity) */
.bls-inline-sound-profile {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 4px 0 0 !important;
}
.bls-sound-profile-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #fff;
    color: #1e293b;
    cursor: pointer;
}
body:not(.theme-light) .bls-sound-profile-select {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
}

.bls-inline-color-presets {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
}
.bls-inline-color-row {
    display: grid;
    grid-template-columns: var(--bls-preset-col, 5.75rem) 1fr;
    column-gap: 8px;
    align-items: center;
}
.bls-inline-color-label {
    font-size: 13px;
    font-weight: 600;
    justify-self: start;
    text-align: left;
    min-width: 0;
}
.bls-inline-color-swatches {
    margin-top: 0 !important;
    min-width: 0;
}
.bls-inline-color-row.bls-inline-bg-photo-row {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.bls-inline-color-row.bls-inline-bg-photo-row .bls-inline-color-label {
    font-weight: 500;
}

/* Quick Settings: photo backdrops below solid background swatches */
.bg-photo-presets-block {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
}
.bg-photo-presets-label {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    padding-top: 4px;
}
.color-presets.color-presets-bg-photo-only {
    margin-top: 0;
    flex: 1 1 180px;
}

/* Therapist controls - vertical layout with spacing (BLS mode only, not fullscreen) */
body.therapist:not(:has(.video-section.fullscreen)) .therapist-controls.control-group,
body.therapist .video-section:not(.fullscreen) ~ * .therapist-controls.control-group,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .therapist-controls.control-group,
body.therapist .video-section:not(.fullscreen) .therapist-controls.control-group,
body.therapist:not(:has(.video-section.fullscreen)) .control-group.therapist-controls,
body.therapist .video-section:not(.fullscreen) ~ * .control-group.therapist-controls,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .control-group.therapist-controls,
body.therapist .video-section:not(.fullscreen) .control-group.therapist-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .therapist-controls.control-group button,
body.therapist .video-section:not(.fullscreen) ~ * .therapist-controls.control-group button,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .therapist-controls.control-group button,
body.therapist .video-section:not(.fullscreen) .therapist-controls.control-group button,
body.therapist:not(:has(.video-section.fullscreen)) .control-group.therapist-controls button,
body.therapist .video-section:not(.fullscreen) ~ * .control-group.therapist-controls button,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .control-group.therapist-controls button,
body.therapist .video-section:not(.fullscreen) .control-group.therapist-controls button {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Connection strip sits under Request Client View: keep compact controls (not full-width) */
body.therapist:not(:has(.video-section.fullscreen)) .therapist-controls .therapist-connection-strip .btn-switch-turn,
body.therapist .video-section:not(.fullscreen) ~ * .therapist-controls .therapist-connection-strip .btn-switch-turn,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .therapist-controls .therapist-connection-strip .btn-switch-turn,
body.therapist .video-section:not(.fullscreen) .therapist-controls .therapist-connection-strip .btn-switch-turn,
body.therapist:not(:has(.video-section.fullscreen)) .therapist-controls .therapist-connection-strip .connection-details-toggle,
body.therapist .video-section:not(.fullscreen) ~ * .therapist-controls .therapist-connection-strip .connection-details-toggle,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .therapist-controls .therapist-connection-strip .connection-details-toggle,
body.therapist .video-section:not(.fullscreen) .therapist-controls .therapist-connection-strip .connection-details-toggle {
    width: auto !important;
}

body.therapist:has(.video-section.fullscreen) .therapist-controls .therapist-connection-strip .btn-switch-turn,
body.therapist .video-section.fullscreen ~ * .therapist-controls .therapist-connection-strip .btn-switch-turn,
body.therapist:has(.video-section.fullscreen) .therapist-controls .therapist-connection-strip .connection-details-toggle,
body.therapist .video-section.fullscreen ~ * .therapist-controls .therapist-connection-strip .connection-details-toggle {
    width: auto !important;
}        
body.therapist:not(:has(.video-section.fullscreen)) .therapist-controls #requestScreenshotBtn,
body.therapist .video-section:not(.fullscreen) ~ * .therapist-controls #requestScreenshotBtn,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .therapist-controls #requestScreenshotBtn,
body.therapist .video-section:not(.fullscreen) .therapist-controls #requestScreenshotBtn {
    margin-top: 50px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hide Request Client View button in fullscreen mode */
body.therapist:has(.video-section.fullscreen) #requestScreenshotBtn,
body.therapist .video-section.fullscreen ~ * #requestScreenshotBtn,
body.therapist:has(.video-section.fullscreen) .emdr-header #requestScreenshotBtn {
    display: none !important;
    visibility: hidden !important;
}

#refreshClientBtn {
    display: none !important;
    visibility: hidden !important;
}


.btn-primary {
    background: #007aff;
    color: white;
}

.btn-primary:hover {
    background: #0056cc;
}

.btn-secondary {
    background: #f0f0f0;
    color: #333;
}

.btn-secondary:hover {
    background: #e0e0e0;
}

.btn-success {
    background: #34c759;
    color: white;
}

.btn-success:hover {
    background: #28a745;
}

.btn-danger {
    background: #ff3b30;
    color: white;
}

.btn-danger:hover {
    background: #d70015;
}

/* Start BLS Button - Round, Centered, Prominent (BLS mode only, not fullscreen) */
body.therapist:not(:has(.video-section.fullscreen)) .start-bls-container,
body.therapist .video-section:not(.fullscreen) ~ * .start-bls-container,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .start-bls-container,
body.therapist .video-section:not(.fullscreen) .start-bls-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 20px 0 !important;
    gap: 15px !important;
}

/* Cycle Counter - Text field next to Start BLS button */
.cycle-counter {
    width: 60px !important;
    height: 40px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #333 !important;
    padding: 0 8px !important;
    cursor: default !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .cycle-counter,
body.therapist .video-section:not(.fullscreen) ~ * .cycle-counter,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .cycle-counter,
body.therapist .video-section:not(.fullscreen) .cycle-counter {
    display: block !important;
    visibility: visible !important;
}

/* Hide cycle counter in fullscreen */
body.therapist:has(.video-section.fullscreen) .cycle-counter,
body.therapist .video-section.fullscreen ~ * .cycle-counter {
    display: none !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .start-bls-btn,
body.therapist .video-section:not(.fullscreen) ~ * .start-bls-btn,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .start-bls-btn,
body.therapist .video-section:not(.fullscreen) .start-bls-btn {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    box-shadow: 0 4px 15px rgba(52, 199, 89, 0.4) !important;
    transition: all 0.3s ease !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
}

.start-bls-btn-label {
    line-height: 1.1;
}

.start-bls-btn-counter {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 0.72em !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    opacity: 0.92;
    color: inherit !important;
    cursor: inherit !important;
    pointer-events: none;
}

body.therapist:not(:has(.video-section.fullscreen)) .start-bls-container .cycle-counter:not(.start-bls-btn-counter),
body.therapist .video-section:not(.fullscreen) .start-bls-container .cycle-counter:not(.start-bls-btn-counter) {
    display: none !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .start-bls-btn:hover,
body.therapist .video-section:not(.fullscreen) ~ * .start-bls-btn:hover,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .start-bls-btn:hover,
body.therapist .video-section:not(.fullscreen) .start-bls-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.6) !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .start-bls-btn.running,
body.therapist .video-section:not(.fullscreen) ~ * .start-bls-btn.running,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .start-bls-btn.running,
body.therapist .video-section:not(.fullscreen) .start-bls-btn.running {
    box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4) !important;
}

body.therapist:not(:has(.video-section.fullscreen)) .start-bls-btn.running:hover,
body.therapist .video-section:not(.fullscreen) ~ * .start-bls-btn.running:hover,
body.therapist:not(:has(.video-section.fullscreen)) .video-section .start-bls-btn.running:hover,
body.therapist .video-section:not(.fullscreen) .start-bls-btn.running:hover {
    box-shadow: 0 6px 20px rgba(255, 59, 48, 0.6) !important;
}

/* In fullscreen mode, reset button to normal style */
body.therapist:has(.video-section.fullscreen) .start-bls-btn,
body.therapist .video-section.fullscreen ~ * .start-bls-btn,
body.therapist:has(.video-section.fullscreen) .emdr-header .start-bls-btn {
    width: auto !important;
    height: auto !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    box-shadow: none !important;
    border: none !important;
}

.btn-warning {
    background-color: #ffc107;
    color: #000;
}

.btn-warning:hover {
    background-color: #e0a800;
}

.btn.running {
    background: #ff3b30 !important;
    color: white !important;
}

/* EMDR Canvas Container */
.emdr-canvas-container {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: #000;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Therapist View - Animation Canvas as PIP (Bottom Left) */
body.therapist .emdr-canvas-container {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 240px !important;
    height: 180px !important;
    flex: none !important;
    z-index: 1001 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    cursor: move !important;
    min-width: 240px !important;
    min-height: 180px !important;
    max-width: 600px !important;
    max-height: 450px !important;
    display: flex !important;
    visibility: visible !important;
}

/* PIP resize handles for canvas container - inherit from main pip-resize-handle styles */
/* Handles automatically inherit from .pip-resize-handle and show on .emdr-canvas-container:hover */

body.therapist .emdr-canvas-container .pip-drag-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: move;
    z-index: 1002;
}

/* Client gets larger canvas area */
body.client .emdr-canvas-container {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000;
}

.emdr-canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    visibility: visible !important;
    background: #000;
    margin: 0;
    padding: 0;
    /* Force GPU acceleration for smoother rendering on older systems */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    /* Optimize rendering performance */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Therapist View - Canvas in PIP maintains aspect */
body.therapist .emdr-canvas {
    object-fit: contain;
}

/* Therapist BLS: schematic PiP corners on the client-animation preview (approximate; not pixel-accurate). */
body.therapist .therapist-client-view-pip-hints {
    display: none;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
}

/* Show on animation PiP in BLS (canvas may live in .video-section or on body after v2.8.108) */
body.therapist:not(:has(.video-section.fullscreen)) .emdr-canvas-container .therapist-client-view-pip-hints,
body.therapist:not(:has(.video-section.fullscreen)) .video-section:not(.fullscreen) .emdr-canvas-container .therapist-client-view-pip-hints {
    display: block;
}

body.client .therapist-client-view-pip-hints {
    display: none !important;
}

body.therapist:has(.video-section.fullscreen) .therapist-client-view-pip-hints {
    display: none !important;
}

body.therapist .therapist-client-view-pip-hints__tile {
    position: absolute;
    bottom: 5px;
    width: 22%;
    max-width: 94px;
    min-width: 42px;
    height: auto;
    min-height: 34px;
    max-height: 74px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(20, 24, 32, 0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: rgba(255, 255, 255, 0.82);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    padding: 3px 4px;
    box-sizing: border-box;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    pointer-events: none;
    overflow-wrap: break-word;
}

body.therapist .therapist-client-view-pip-hints__tile--them {
    left: 5px;
}

body.therapist .therapist-client-view-pip-hints__tile--you {
    right: 5px;
}

/* Status and Info */
.status-info {
    position: fixed;
    top: 120px; /* Below the fixed controls */
    right: 20px;
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 998;
    display: block !important; /* Ensure it's always visible */
}

.status-info .status-item {
    margin-bottom: 5px;
}

.status-info .status-item:last-child {
    margin-bottom: 0;
}

/* Connection Status Overlay on Video */
.connection-status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000 !important;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
}

.connection-status-overlay.show {
    display: flex !important;
}

.connection-status-overlay.warning {
    background: rgba(128, 128, 128, 0.9); /* Greyish instead of yellow */
    color: #fff;
}

.connection-status-overlay.connecting {
    background: rgba(128, 128, 128, 0.9); /* Same greyish background as warning */
    color: #fff;
}

.connection-status-overlay.error {
    background: rgba(220, 53, 69, 0.9);
    color: white;
}

.connection-status-overlay .status-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

/* Spinning wheel animation for reconnecting */
.connection-status-overlay .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.connection-status-overlay.warning .spinner {
    border-color: rgba(0, 0, 0, 0.3);
    border-top-color: #000;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.connection-status-overlay .status-message {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.connection-status-overlay .status-details {
    font-size: 14px;
    opacity: 0.9;
}

.connection-status-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.therapist-reconnect-btn {
    margin-top: 8px;
}

/* Ensure video container can show overlay */
.video-container {
    position: relative;
}

/* Ensure overlay is visible on therapist's client video */
body.therapist .video-container:last-child {
    overflow: visible !important; /* Allow overlay to be visible */
}

/* Hide last client frame when peer disconnects (e.g. client page refresh) */
body.therapist .video-container.peer-disconnected-mask #remoteVideo,
body.therapist #remoteVideo.peer-disconnected-mask {
    visibility: hidden !important;
}

body.therapist .video-container:last-child .connection-status-overlay {
    z-index: 10001 !important; /* Very high z-index to ensure visibility */
    position: absolute !important;
    display: flex !important;
    pointer-events: auto !important;
}

/* Make sure overlay is visible even when video container has special positioning */
body.therapist .video-section .video-container:last-child .connection-status-overlay {
    z-index: 10001 !important;
}

/* Ensure overlay is visible on client's therapist video (consistent with therapist view) */
body.client .video-container:last-child {
    overflow: visible !important; /* Allow overlay to be visible */
}

body.client .video-container:last-child .connection-status-overlay {
    z-index: 10001 !important; /* Very high z-index to ensure visibility */
    position: absolute !important;
    display: flex !important;
    pointer-events: auto !important;
}

/* Make sure overlay is visible even when video container has special positioning */
body.client .video-section .video-container:last-child .connection-status-overlay {
    z-index: 10001 !important;
}

/* Connection Quality Indicator */
.connection-quality-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 0;
    backdrop-filter: blur(4px);
}

.quality-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
}

.quality-bar {
    width: 3px;
    background: #666;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.quality-bar:nth-child(1) { height: 5px; }
.quality-bar:nth-child(2) { height: 7px; }
.quality-bar:nth-child(3) { height: 9px; }
.quality-bar:nth-child(4) { height: 11px; }

.quality-bar.active {
    background: #4CAF50; /* Green */
}

.quality-bar.active.fair {
    background: #FFC107; /* Yellow */
}

.quality-bar.active.poor {
    background: #FF9800; /* Orange */
}

.quality-bar.active.bad {
    background: #F44336; /* Red */
}

.quality-text {
    display: none; /* Hide text labels */
}

/* Recovery Button in Media Controls */
/* Recovery button now uses media-btn styling - removed recovery-media-btn green styling */
/* Recovery button is now in media-controls container and matches other media buttons */

/* Back button */
.back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    z-index: 1001;
}

/* Override absolute positioning for client header buttons */
body.client .header-buttons .back-btn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

.back-btn:hover {
    background: rgba(0,0,0,0.9);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-section {
        height: 150px;
        flex-direction: column;
    }
    
    .main-content {
        position: fixed;
        top: 270px; /* Account for fixed controls + taller video */
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    
    .emdr-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .emdr-controls {
        justify-content: center;
    }
}

/* Handset / narrow phone: therapist + client header & chrome (≤480px) */
@media (max-width: 480px) {
    body.therapist:has(.video-section.fullscreen) .emdr-header,
    body.therapist .video-section.fullscreen ~ .emdr-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-title-container,
    body.therapist .video-section.fullscreen ~ .emdr-header .emdr-title-container {
        width: 100% !important;
        max-width: 100%;
    }

    body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-title,
    body.therapist .video-section.fullscreen ~ .emdr-header .emdr-title {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    body.therapist:has(.video-section.fullscreen) .emdr-header .emdr-controls,
    body.therapist .video-section.fullscreen ~ .emdr-header .emdr-controls {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body.therapist:has(.video-section.fullscreen) .emdr-header .therapist-connection-strip,
    body.therapist .video-section.fullscreen ~ .emdr-header .therapist-connection-strip {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }

    body.therapist:has(.video-section.fullscreen) .therapist-controls.control-group,
    body.therapist .video-section.fullscreen ~ .emdr-header .therapist-controls.control-group {
        align-items: stretch !important;
        width: 100%;
    }

    body.therapist:has(.video-section.fullscreen) .therapist-connection-strip .connection-details-wrapper,
    body.therapist .video-section.fullscreen ~ .therapist-connection-strip .connection-details-wrapper {
        width: 100%;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    body.therapist .therapist-connection-strip .connection-type-indicator {
        margin-left: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    body.therapist .therapist-connection-strip .connection-type-indicator #connectionTypeText {
        font-size: 13px !important;
    }

    body.therapist .therapist-connection-strip .health-badge {
        margin-left: 4px !important;
        padding: 3px 7px !important;
        font-size: 11px !important;
    }

    body.therapist .therapist-connection-strip .btn-switch-turn,
    body.therapist .therapist-connection-strip .connection-details-toggle {
        font-size: 11px !important;
        padding: 5px 8px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: center;
    }

    body.therapist .therapist-connection-strip .connecting-pill {
        margin-left: 0 !important;
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    body.therapist:has(.video-section.fullscreen) .therapist-connection-strip .connection-details-panel,
    body.therapist .video-section.fullscreen ~ .therapist-connection-strip .connection-details-panel {
        left: 0 !important;
        right: auto !important;
        width: calc(100vw - 16px) !important;
        max-width: none !important;
    }

    /* BLS (non-fullscreen video): connection panel width on narrow phones */
    body.therapist:not(:has(.video-section.fullscreen)) .therapist-connection-strip .connection-details-panel {
        width: min(100%, calc(100vw - 24px));
        max-width: none;
        left: 0 !important;
        right: auto !important;
    }

    /* Waiting-queue pill: avoid crowding notch edge */
    body.therapist:has(.video-section.fullscreen) .waiting-room-indicator,
    body.therapist:not(:has(.video-section.fullscreen)) .waiting-room-indicator {
        right: 8px !important;
        max-width: min(280px, 92vw);
    }

    /* Therapist BLS: animation preview PiP — bottom-left, smallest resize size (240×180) */
    body.therapist:not(:has(.video-section.fullscreen)) .video-section:not(.fullscreen) > .emdr-canvas-container,
    body.therapist .video-section:not(.fullscreen) > .emdr-canvas-container {
        width: 240px !important;
        height: 180px !important;
        min-width: 240px !important;
        min-height: 180px !important;
        max-width: 500px !important;
        max-height: 375px !important;
        bottom: 12px !important;
        left: 12px !important;
    }

    /* ----- Client: fullscreen video header (green bar) ----- */
    body.client:has(.video-section.fullscreen) .emdr-header,
    body.client .video-section.fullscreen ~ .emdr-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }

    body.client:has(.video-section.fullscreen) .emdr-header .emdr-title-container,
    body.client .video-section.fullscreen ~ .emdr-header .emdr-title-container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    body.client:has(.video-section.fullscreen) .emdr-header .emdr-title,
    body.client .video-section.fullscreen ~ .emdr-header .emdr-title {
        font-size: 15px !important;
    }

    body.client:has(.video-section.fullscreen) .emdr-header .emdr-controls,
    body.client .video-section.fullscreen ~ .emdr-header .emdr-controls {
        margin-left: 0 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    body.client:has(.video-section.fullscreen) .client-header-controls,
    body.client .video-section.fullscreen ~ .client-header-controls {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    body.client .client-header-controls .media-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    /* Client: BLS mode header + Back row */
    body.client:not(:has(.video-section.fullscreen)) .emdr-header {
        flex-wrap: wrap !important;
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-controls {
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-title {
        font-size: 14px !important;
    }

    /* Client Back / header buttons: allow wrap */
    body.client .client-only.control-group,
    body.client .emdr-controls .client-only.control-group,
    body.client:not(:has(.video-section.fullscreen)) .emdr-controls .client-only.control-group,
    body.client:has(.video-section.fullscreen) .emdr-controls .client-only.control-group,
    body.client .emdr-header .emdr-controls .client-only.control-group {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    body.client:not(:has(.video-section.fullscreen)) .emdr-controls .client-only.control-group button,
    body.client:has(.video-section.fullscreen) .emdr-controls .client-only.control-group button,
    body.client .emdr-header .emdr-controls .client-only.control-group .back-btn {
        font-size: 12px !important;
        padding: 7px 10px !important;
        white-space: normal !important;
    }

    /* BLS: slightly more room below fixed header when controls wrap */
    body.client:not(:has(.video-section.fullscreen)) .main-content {
        top: 300px;
    }

    /* Bottom control bar: full-width inset on handset (both roles) */
    .bottom-video-controls {
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        border-radius: 22px !important;
        justify-content: center !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Narrow phones: omit overflow controls — PiP/menu / Quick Settings elsewhere */
    .bottom-video-controls #bottomMoreOptions,
    .bottom-video-controls #bottomTherapistBallAudio {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    /* Client BLS group: BLS Audio, Tap USB, Tapper Settings */
    .bottom-video-controls .bls-control-group {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Quality signal dots: keep inside PiP corners */
    .connection-quality-indicator {
        top: 6px;
        right: 6px;
        padding: 4px 6px;
    }

    .quality-bar:nth-child(1) { height: 4px; }
    .quality-bar:nth-child(2) { height: 6px; }
    .quality-bar:nth-child(3) { height: 8px; }
    .quality-bar:nth-child(4) { height: 10px; }
}
.therapist-only {
    display: none;
}

.client-only {
    display: none;
}

body.therapist .therapist-only {
    display: block;
}

body.client .client-only {
    display: block;
}

/* OVERRIDE: Client-only control-group must use flex (not block) for horizontal button layout */
body.client .client-only.control-group,
body.client .emdr-controls .client-only.control-group,
body.client:not(:has(.video-section.fullscreen)) .emdr-controls .client-only.control-group,
body.client:has(.video-section.fullscreen) .emdr-controls .client-only.control-group,
body.client .emdr-header .emdr-controls .client-only.control-group {
    display: flex !important; /* Override the display: block from .client-only */
    flex-direction: row !important; /* Horizontal layout - buttons side by side */
    align-items: center !important;
    gap: 10px !important; /* Spacing between buttons */
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: nowrap !important; /* Keep buttons in one row */
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    justify-content: flex-start !important;
}

/* CRITICAL: Ensure buttons in client-only control-group are horizontal and properly sized */
/* Override any width: 100% rules that might be making buttons stack */
body.client .emdr-controls .client-only.control-group button,
body.client:not(:has(.video-section.fullscreen)) .emdr-controls .client-only.control-group button,
body.client:has(.video-section.fullscreen) .emdr-controls .client-only.control-group button,
body.client .emdr-controls .client-only.control-group .back-btn,
body.client .emdr-controls .client-only.control-group #sendScreenshotBtn,
body.client .emdr-header .emdr-controls .client-only.control-group button,
body.client .emdr-header .emdr-controls .client-only.control-group .back-btn,
body.client .emdr-header .emdr-controls .client-only.control-group #sendScreenshotBtn,
body.client .control-group.client-only button,
body.client .control-group.client-only .back-btn,
body.client .control-group.client-only #sendScreenshotBtn {
    display: inline-flex !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    width: auto !important; /* Auto width based on content - CRITICAL */
    max-width: none !important; /* Prevent stretching */
    min-width: auto !important;
    flex-shrink: 0 !important; /* Don't shrink buttons */
    flex-grow: 0 !important; /* Don't grow buttons */
    flex-basis: auto !important;
    margin: 0 !important;
}

/* Change Back to Waiting Room button color to blue for testing */
body.client .emdr-controls .client-only.control-group .back-btn,
body.client:not(:has(.video-section.fullscreen)) .emdr-controls .client-only.control-group .back-btn,
body.client:has(.video-section.fullscreen) .emdr-controls .client-only.control-group .back-btn,
body.client .emdr-header .emdr-controls .client-only.control-group .back-btn,
body.client .control-group.client-only .back-btn {
    background: #007AFF !important; /* Blue color for testing */
    color: white !important;
}

/* Change Back to Waiting Room button color to blue for testing */
body.client .emdr-controls .client-only.control-group .back-btn,
body.client:not(:has(.video-section.fullscreen)) .emdr-controls .client-only.control-group .back-btn,
body.client:has(.video-section.fullscreen) .emdr-controls .client-only.control-group .back-btn,
body.client .emdr-header .emdr-controls .client-only.control-group .back-btn {
    background: #007AFF !important; /* Blue color for testing */
    color: white !important;
}

/* Client-only media buttons should use flex display */
body.client .media-controls .client-only.media-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.therapist .client-only {
    display: none;
}

/* Hide client-only media buttons for therapists */
body.therapist .media-controls .client-only.media-btn {
    display: none !important;
    visibility: hidden !important;
}

body.client .therapist-only {
    display: none;
}

/* Role-based visual differences */
body.therapist .emdr-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

body.client .emdr-header {
    background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
    color: white;
}

body.therapist .emdr-title::before,
body.therapist:has(.video-section.fullscreen) .emdr-title::before,
body.therapist .video-section.fullscreen ~ .emdr-title::before,
body.client .emdr-title::before {
    content: "";
}

/* Client-only styling - hide disabled controls, but show client-only control-groups */
body.client .emdr-controls {
    display: flex !important; /* Show emdr-controls for clients so client-only buttons are visible */
    flex-direction: row !important; /* Horizontal layout for control-groups */
    flex-wrap: nowrap !important; /* Keep control-groups in one row */
    align-items: center !important;
    gap: 10px !important;
}

/* CRITICAL: Ensure emdr-controls doesn't force column layout on control-groups */
body.client .emdr-controls .control-group,
body.client .emdr-controls .client-only.control-group {
    flex-direction: row !important; /* Force horizontal layout */
}

/* Hide specific control-groups for clients (speed, patterns) but keep client-only visible */
body.client .emdr-controls .control-group:not(.client-only) {
    display: none !important;
}

/* Title container styling */
.emdr-title-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

/* For client view, ensure title container doesn't expand to push media-controls */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-title-container {
    padding-right: 0 !important; /* Don't add padding that might push content */
    min-width: 0 !important; /* Allow shrinking if needed */
}

/* Ensure title itself doesn't expand unnecessarily */
body.client:not(:has(.video-section.fullscreen)) .emdr-header .emdr-title {
    flex-shrink: 1 !important; /* Allow title to shrink if needed */
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Client header controls - BLS mode and Refresh buttons (Ball Audio moved to bottom control bar) */
/* Hide in BLS mode - buttons are in media-controls container instead */
body.client:not(:has(.video-section.fullscreen)) .client-header-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Show in fullscreen mode */
body.client:has(.video-section.fullscreen) .client-header-controls,
body.client .video-section.fullscreen ~ .client-header-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    border-top: 1px solid #eee !important;
    background: rgba(0, 0, 0, 0.05) !important;
    margin-top: 0 !important;
}

/* Ensure buttons don't stack vertically and don't expand to full width */
body.client .client-header-controls > * {
    display: inline-block !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
}

body.client .client-header-controls .media-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    background: #444 !important;
    color: white !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    width: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

body.client .client-header-controls .media-btn:hover {
    background: #555 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Client audio button styling */
.client-audio-btn {
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid #ddd;
    background: #28a745;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.client-audio-btn:hover {
    background: #218838;
    transform: translateY(-1px);
}


/* Quick Settings Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 99999; /* Ensure dropdown parent is in high stacking context */
}

.dropdown-trigger {
    cursor: pointer;
    border: 1px solid #ddd;
    background: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.dropdown-trigger:hover {
    background: #f5f5f5;
}

.dropdown-content {
    display: none !important;
    visibility: hidden !important; /* Ensure hidden on initial load */
    position: fixed !important; /* Changed from absolute to fixed for better z-index control */
    background-color: white;
    min-width: 300px;
    max-width: 400px;
    max-height: 80vh; /* Limit height to 80% of viewport */
    overflow-y: auto; /* Make it scrollable */
    overflow-x: hidden;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99999 !important; /* Much higher than any video element (PIP is 2002, fullscreen might be higher) */
    border-radius: 8px;
    padding: 16px;
    /* Position will be set by JavaScript for fixed positioning */
    pointer-events: auto;
}

/* When near bottom of screen, show dropdown above button */
@media (max-height: 800px) {
    .dropdown-content {
        bottom: 100%;
        top: auto;
        margin-top: 0;
        margin-bottom: 4px;
    }
}

.dropdown-content.show {
    display: block !important;
    visibility: visible !important;
}

/* Dropdown is now click-based, not hover-based */

.dropdown-section {
    margin-bottom: 20px;
}

.dropdown-section:last-child {
    margin-bottom: 0;
}

.dropdown-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.dropdown-control {
    margin-bottom: 12px;
}

.dropdown-control label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.dropdown-control-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: #888;
}

.dropdown-section-lead {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    line-height: 1.4;
    color: #888;
}

.quick-settings-state-anchors {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dropdown-control .slider {
    width: 100%;
    margin: 4px 0;
}

.dropdown-control .color-picker {
    width: 100%;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

/* Toggle Switch Styles (from original) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch.ios-style .toggle-slider {
    background-color: #e0e0e0;
}

.toggle-switch.ios-style input:checked + .toggle-slider {
    background-color: #4CAF50;
}

.toggle-switch.ios-style input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #2196F3;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* Settings Group */
.settings-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* Color Presets */
.color-presets {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.color-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.color-control-row input[type="color"] {
    flex: 0 0 auto;
}

.color-control-row .color-presets {
    margin-top: 0;
    flex: 1 1 180px;
}

.color-preset {
    width: 25px;
    height: 25px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-preset:hover {
    border-color: #007bff;
    transform: scale(1.1);
}

.color-preset.selected {
    border-color: #111 !important;
    outline: 3px solid #fff;
    box-shadow: 0 0 0 5px #111, 0 2px 8px rgba(0, 0, 0, 0.35);
}

.color-preset:active {
    transform: scale(0.95);
}

/* Optional photo swatch — BLS backdrop image preset (fills like object-fit: cover on canvas) */
.color-preset.color-preset-bg-photo {
    border: 2px solid #94a3b8;
}

/* Permission Request Modal */
.permission-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    pointer-events: none; /* Don't block clicks when hidden */
}

.permission-modal.active {
    display: flex;
    pointer-events: auto; /* Allow clicks when visible */
}

.permission-modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideIn 0.3s ease-out;
}

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

.permission-modal-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.permission-modal h2 {
    color: #333;
    margin-bottom: 16px;
    font-size: 24px;
}

.permission-modal p {
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 16px;
}

.permission-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.permission-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.permission-btn-primary {
    background: #007bff;
    color: white;
}

.permission-btn-primary:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.permission-btn-primary:active {
    transform: translateY(0);
}

.permission-btn-secondary {
    background: #f0f0f0;
    color: #333;
}

.permission-btn-secondary:hover {
    background: #e0e0e0;
}

.permission-loading {
    display: none;
    margin-top: 20px;
}

.permission-loading.active {
    display: block;
}

.permission-loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Device Check Modal */
.device-check-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    pointer-events: none;
}

.device-check-modal.active {
    display: flex;
    pointer-events: auto;
}

.device-check-content {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 560px;
    width: 92%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideIn 0.3s ease-out;
}

.device-check-preview {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin: 16px 0;
}

#deviceCheckPreviewVideo {
    width: 100%;
    height: auto;
    display: block;
    transform: scaleX(-1);
}

.device-check-badges {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.device-check-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #e9ecef;
    color: #495057;
}

.device-check-badge.ok {
    background: #d1f3df;
    color: #1e7e34;
}

.device-check-badge.warn {
    background: #fff3cd;
    color: #856404;
}

.device-check-badge.error {
    background: #f8d7da;
    color: #721c24;
}

/* Tapper Settings Modal */
.tapper-settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.tapper-settings-modal.active {
    display: flex;
    pointer-events: auto;
}

.tapper-settings-content {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    max-width: 780px;
    width: 92%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.2s ease-out;
}

.tapper-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tapper-settings-header h2 {
    margin: 0;
    font-size: 20px;
    color: #222;
}

.tapper-settings-close {
    border: none;
    background: transparent;
    font-size: 26px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.tapper-settings-status {
    font-size: 13px;
    color: #555;
    background: #f4f5f7;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 16px;
}

.tapper-settings-status.connected {
    background: #e6f6ee;
    color: #1e7e34;
}

.tapper-settings-section {
    margin-bottom: 16px;
}

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

.tapper-settings-label {
    font-weight: 600;
    color: #333;
}

.tapper-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.tapper-setting-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fafafa;
}

.tapper-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
    color: #222;
}

.tapper-setting-controls input[type="range"] {
    width: 100%;
}

.tapper-setting-label {
    font-size: 12px;
    color: #666;
    display: block;
    margin-top: 6px;
}

.tapper-setting-value {
    font-size: 12px;
    text-align: right;
    color: #333;
    margin-top: 2px;
}

.tapper-mode-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.tapper-mode-btn {
    flex: 1;
    padding: 6px 0;
    border-radius: 6px;
    border: 1px solid #d0d5dd;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #444;
}

.tapper-mode-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.device-check-meter {
    background: #e9ecef;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 10px 0 6px;
}

.device-check-meter-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    transition: width 0.1s ease;
}

.device-check-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.device-check-hint {
    font-size: 12px;
    color: #6c757d;
}

.device-check-error {
    background: #f8d7da;
    color: #721c24;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    display: none;
}

.device-check-error.show {
    display: block;
}

/* USB Data Popup */
#usbDataPopup {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    max-height: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 99998;
    border: 2px solid #28a745;
    overflow: hidden;
}

#usbDataPopupHeader {
    background: #28a745;
    color: white;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#usbDataPopupClose {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
}

#usbDataPopupClose:hover {
    background: rgba(255, 255, 255, 0.2);
}

#usbDataPopupContent {
    padding: 12px 16px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f8f9fa;
    color: #333;
    line-height: 1.5;
}

/* FINAL OVERRIDE: Force client control-group buttons to be horizontal - highest priority */
body.client .emdr-controls .client-only.control-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

body.client .emdr-controls .client-only.control-group > *,
body.client .emdr-controls .client-only.control-group button,
body.client .emdr-controls .client-only.control-group .back-btn,
body.client .emdr-controls .client-only.control-group #sendScreenshotBtn {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* ==========================================================================
   Therapist — collapsible BLS rail + Start/timer on animation PiP
   ========================================================================== */

.bls-rail-collapse-tab {
    display: none;
    position: fixed;
    z-index: 2601;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 36px;
    min-height: 72px;
    padding: 8px 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: rgba(255, 255, 255, 0.98);
    color: #333;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: -2px 0 14px rgba(0, 0, 0, 0.14);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.bls-rail-collapse-tab__arrow {
    font-size: 14px;
    line-height: 1;
}

.bls-rail-collapse-tab__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

.bls-rail-collapse-tab__line {
    display: block;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.bls-rail-collapse-tab__line--sub {
    font-size: 8px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    opacity: 0.88;
}

/* Collapsed: descriptive tab; open: arrow only (panel is obvious) */
.bls-rail-collapse-tab--drawer-closed {
    width: 40px;
    min-height: 88px;
    padding: 8px 5px;
}

.bls-rail-collapse-tab--drawer-open {
    width: 32px;
    min-height: 48px;
    padding: 8px 4px;
}

.bls-rail-collapse-tab--drawer-open .bls-rail-collapse-tab__label {
    display: none !important;
}

.bls-rail-collapse-tab.bls-rail-collapse-tab--drawer-open {
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.bls-rail-collapse-tab[hidden] {
    display: none !important;
}

.bls-rail-collapse-tab:hover,
.bls-rail-collapse-tab:focus-visible {
    background: #eef3ff;
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Drawer open: red tab = slide/hide settings panel (easier to spot) */
.bls-rail-collapse-tab--drawer-open {
    background: #dc3545;
    color: #fff;
    border-color: #b02a37;
    box-shadow: -2px 0 14px rgba(220, 53, 69, 0.45);
}

.bls-rail-collapse-tab--drawer-open:hover,
.bls-rail-collapse-tab--drawer-open:focus-visible {
    background: #c82333;
    color: #fff;
    outline-color: #fff;
}

/* BLS settings rail: ← Back stands out on dark drawer */
body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-controls #testBtn {
    background: #dc3545 !important;
    color: #fff !important;
    border: 1px solid #b02a37 !important;
    font-weight: 600;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-controls #testBtn:hover {
    background: #c82333 !important;
}

/* Owner-only session tools (request client view, manual video quality, connection details) */
body.therapist:not(.session-owner) #requestScreenshotBtn,
body.therapist:not(.session-owner) #videoQualityBtn,
body.therapist:not(.session-owner) #clientVideoQualityBtn,
body.therapist:not(.session-owner) #connectionDetailsToggle,
body.therapist:not(.session-owner) #connectionDetailsPanel {
    display: none !important;
}

/* Non-owner therapists: use End Call only (hide redundant ← Back controls) */
body.therapist:not(.session-owner) #testBtn,
body.therapist:not(.session-owner) .emdr-controls .control-group:has(#testBtn),
body.therapist:not(.session-owner) #therapistRecoveryBtn,
body.therapist:not(.session-owner) .nav-buttons .back-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .bls-rail-collapse-tab:not([hidden]) {
    display: flex;
}

/* BLS settings — push layout: client video shrinks, panel slides off right (sandbox) */
body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section {
    transition: grid-template-columns 0.65s cubic-bezier(0.32, 0.72, 0, 1) !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 32vw) !important;
    background: #000 !important;
}

/* First BLS entry per session: fade controls in while the drawer column slides (no 1s JS delay). */
body.bls-rail-drawer-fade-in:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-header,
body.bls-rail-drawer-fade-in:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-controls {
    opacity: 0;
    transition: opacity 0.52s ease-in-out;
}
body.bls-rail-drawer-fade-in.bls-rail-drawer-fade-in-active:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-header,
body.bls-rail-drawer-fade-in.bls-rail-drawer-fade-in-active:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-controls {
    opacity: 1;
}

/* Tab close: fade controls out while drawer slides. */
body.bls-rail-drawer-fade-out.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-header,
body.bls-rail-drawer-fade-out.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-controls {
    opacity: 1;
    transition: opacity 0.52s ease-in-out;
}
body.bls-rail-drawer-fade-out.bls-rail-drawer-fade-out-active.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-header,
body.bls-rail-drawer-fade-out.bls-rail-drawer-fade-out-active.bls-rail-ui-active.bls-rail-collapsed .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .emdr-controls {
    opacity: 0;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active.bls-rail-collapsed .video-section {
    grid-template-columns: minmax(0, 1fr) 0px !important;
}

/* Client video fills left column — override legacy absolute centering */
body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section:not(.fullscreen) .video-container:has(#remoteVideo) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background: #000 !important;
    isolation: isolate;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section:not(.fullscreen) .video-container:has(#remoteVideo) video {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section .video-container:has(#localVideo):not(.bls-rail-floated-pip) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 2 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(0) !important;
    transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1) !important;
    will-change: transform;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active.bls-rail-collapsed .video-section .video-container:has(#localVideo):not(.bls-rail-floated-pip) {
    transform: translateX(100%) !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Animated close: keep drawer visible for slide (must follow collapsed snap-hide rule above). */
body.bls-rail-collapse-enabled.bls-rail-drawer-fade-out.bls-rail-ui-active.bls-rail-collapsed .video-section .video-container:has(#localVideo):not(.bls-rail-floated-pip) {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Therapist self-view in open settings column (not the floated overlay) */
body.bls-rail-collapse-enabled.bls-rail-ui-active:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .pip-media-stack {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 28vh !important;
    aspect-ratio: 16 / 9 !important;
    flex-shrink: 0 !important;
    margin: 0 0 8px 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: #000 !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip) .pip-media-stack video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: scaleX(-1) !important;
}

/* Hide my preview in BLS settings drawer: keep 16:9 slot, black out (no chip shrink) */
body.bls-rail-collapse-enabled.bls-rail-ui-active:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip).pip-preview-drawer-muted .pip-media-stack {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #000 !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active:not(.bls-rail-collapsed) .video-section:not(.fullscreen) .video-container:has(#localVideo):not(.bls-rail-floated-pip).pip-preview-drawer-muted .pip-media-stack video {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* BLS animation preview PiP — fixed bottom-left (immune to rail grid placement) */
body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section:not(.fullscreen) > .emdr-canvas-container,
body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section:not(.fullscreen) .emdr-canvas-container {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    top: auto !important;
    right: auto !important;
    width: 240px !important;
    height: 180px !important;
    min-width: 240px !important;
    min-height: 180px !important;
    max-width: 500px !important;
    max-height: 375px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    z-index: 1003 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    background: #000 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    cursor: move !important;
}

@media (prefers-reduced-motion: reduce) {
    body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section,
    body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section .video-container:has(#localVideo) {
        transition-duration: 0.01ms !important;
    }
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-controls .start-bls-container {
    display: none !important;
}

/* Start/Stop — top-right of animation canvas */
body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .start-bls-container.bls-animation-start {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1015 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    gap: 0 !important;
    pointer-events: auto;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .bls-animation-start .start-bls-btn {
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 3px 12px rgba(52, 199, 89, 0.45) !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .bls-animation-start .start-bls-btn.running {
    box-shadow: 0 3px 12px rgba(255, 59, 48, 0.45) !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .bls-animation-start .start-bls-btn-counter {
    font-size: 11px !important;
}

/* Session timer: top-left of therapist animation PiP (sandbox BLS mode) */
body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .therapist-session-timer.bls-animation-timer {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1010 !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    gap: 6px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    pointer-events: none;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .therapist-session-timer.bls-animation-timer .therapist-session-timer-label {
    font-size: 9px !important;
}

body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .therapist-session-timer.bls-animation-timer .therapist-session-timer-value {
    font-size: 12px !important;
}

body.theme-light.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .therapist-session-timer.bls-animation-timer {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-dark.bls-rail-collapse-enabled .bls-rail-collapse-tab {
    background: rgba(30, 30, 30, 0.98);
    color: #eee;
    border-color: rgba(255, 255, 255, 0.15);
}

body.theme-dark.bls-rail-collapse-enabled .bls-rail-collapse-tab:hover,
body.theme-dark.bls-rail-collapse-enabled .bls-rail-collapse-tab:focus-visible {
    background: rgba(45, 45, 55, 0.98);
}

/* Mobile / narrow: BLS push drawer + animation PiP controls */
@media (max-width: 768px) {
    body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 42vw) !important;
    }

    body.bls-rail-collapse-enabled.bls-rail-ui-active.bls-rail-collapsed .video-section {
        grid-template-columns: minmax(0, 1fr) 0px !important;
    }

    .bls-rail-collapse-tab {
        width: 32px;
        min-height: 68px;
    }

    body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .bls-animation-start .start-bls-btn {
        width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        font-size: 11px !important;
    }

    body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .bls-animation-start .start-bls-btn-counter {
        font-size: 9px !important;
    }

    body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .therapist-session-timer.bls-animation-timer {
        top: 6px !important;
        left: 6px !important;
        padding: 3px 8px !important;
        max-width: calc(50% - 8px);
    }

    body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .start-bls-container.bls-animation-start {
        top: 6px !important;
        right: 6px !important;
        max-width: calc(50% - 4px);
    }

}

@media (max-width: 480px) {
    body.bls-rail-collapse-enabled.bls-rail-ui-active .video-section {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 78vw) !important;
    }

    body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .bls-animation-start .start-bls-btn {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        font-size: 10px !important;
    }

    body.bls-rail-collapse-enabled.bls-rail-ui-active .emdr-canvas-container .therapist-session-timer.bls-animation-timer .therapist-session-timer-label {
        display: none;
    }
}