/* SoundSwift Connect — meeting room chrome with exact colored icons from reference */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

html, body {
    background: linear-gradient(165deg, #0A0A0A 0%, #141414 45%, #1A1A1A 100%) !important;
    color: #f5f5f5;
}

/* ---- SoundSwift meeting header ---- */
#ssRoomHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 72px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px 0 20px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0A0A0A 0%, #141414 55%, #1A1A1A 100%) !important;
    border-bottom: 1px solid #E8A23C;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.ss-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    min-width: 0;
}

.ss-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ss-logo {
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 10px rgba(232, 162, 60, 0.2));
}

.ss-header-divider {
    width: 1px;
    height: 34px;
    background: #E8A23C;
    opacity: 0.85;
    flex: 0 0 auto;
}

.ss-speaker {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 8px rgba(232, 162, 60, 0.45));
}

#ssRoomTimer,
.ss-room-timer {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.08em;
    color: #ffffff !important;
    background: rgba(10, 10, 10, 0.85) !important;
    border: 1.5px solid #E8A23C !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    min-width: 108px;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 0 12px rgba(232, 162, 60, 0.18);
}

/* Gold expand arrow beside timer */
.ss-expand-btn {
    background: linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%) !important;
    border: 1.5px solid #E8A23C !important;
    color: #E8A23C !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(232, 162, 60, 0.35) !important;
    transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ss-expand-btn i {
    color: #E8A23C !important;
    font-size: 13px !important;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(232, 162, 60, 0.8));
}

.ss-expand-btn.expanded i {
    transform: rotate(180deg);
}

.ss-expand-btn:hover {
    background: rgba(232, 162, 60, 0.16) !important;
    box-shadow: 0 0 16px rgba(232, 162, 60, 0.55) !important;
}

.ss-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

/* Controls live INSIDE the header, right-aligned */
#ssRoomHeader #actionButtons,
#actionButtons {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    z-index: 1 !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Expanded Drawer container for hidden extra controls */
.ss-expanded-drawer {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.4s ease, opacity 0.3s ease;
    background: linear-gradient(180deg, #141414 0%, #1f1f1f 100%);
    padding: 0;
    border-radius: 999px;
}

.ss-expanded-drawer.open {
    max-width: 500px;
    opacity: 1;
    padding: 0 6px;
}

/* ---- Core controls: dark disc + POPPING neon icon colors ---- */
#actionButtons button.ss-ctrl,
#actionButtons button:not(#exitButton):not(#stopButton),
#actionButtonMobileMenu button {
    position: relative;
    background: linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 60%, #050505 100%) !important;
    border: 1.5px solid #E8A23C !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 10px rgba(232, 162, 60, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

#actionButtons button.ss-core-ctrl i,
#actionButtons button.ss-expand-btn i,
#actionButtons button.ss-extra-ctrl i {
    font-size: 15px !important;
    line-height: 1;
    transition: transform 0.25s ease, filter 0.2s ease, color 0.2s ease;
}

#actionButtons button.ss-ctrl:hover,
#actionButtons button:not(#exitButton):not(#stopButton):hover,
#actionButtonMobileMenu button:hover {
    background: linear-gradient(160deg, #262626 0%, #121212 100%) !important;
    transform: translateY(-2px) scale(1.07);
    filter: brightness(1.15);
}

#actionButtons button.ss-core-ctrl.activeControl {
    background: linear-gradient(160deg, #222 0%, #111 100%) !important;
}

/* 1 Video — electric cyan */
#actionButtons button#startVideoButton,
#actionButtons button#stopVideoButton {
    border-color: #00E5FF !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button#startVideoButton i,
#actionButtons button#stopVideoButton i {
    color: #00E5FF !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.9));
}

/* 2 Mic — hot lime */
#actionButtons button#startAudioButton,
#actionButtons button#stopAudioButton {
    border-color: #B8FF3C !important;
    box-shadow: 0 0 14px rgba(184, 255, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button#startAudioButton i,
#actionButtons button#stopAudioButton i {
    color: #B8FF3C !important;
    filter: drop-shadow(0 0 6px rgba(184, 255, 60, 0.85));
}

/* 3 Chat — vivid violet */
#actionButtons button#chatButton {
    border-color: #C84BFF !important;
    box-shadow: 0 0 14px rgba(200, 75, 255, 0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button#chatButton i {
    color: #C84BFF !important;
    filter: drop-shadow(0 0 6px rgba(200, 75, 255, 0.9));
}

/* 4 Layout / breakout — tangerine (in drawer) */
#actionButtons button#breakoutButton {
    border-color: #FF9F1C !important;
    box-shadow: 0 0 14px rgba(255, 159, 28, 0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button#breakoutButton i {
    color: #FF9F1C !important;
    filter: drop-shadow(0 0 6px rgba(255, 159, 28, 0.9));
}

/* 5 Screen share — sky blue */
#actionButtons button#startScreenButton,
#actionButtons button#stopScreenButton {
    border-color: #4DA3FF !important;
    box-shadow: 0 0 14px rgba(77, 163, 255, 0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button#startScreenButton i,
#actionButtons button#stopScreenButton i {
    color: #4DA3FF !important;
    filter: drop-shadow(0 0 6px rgba(77, 163, 255, 0.9));
}

/* 6 Whiteboard — mint (in drawer) */
#actionButtons button#whiteboardButton {
    border-color: #2EE6A6 !important;
    box-shadow: 0 0 14px rgba(46, 230, 166, 0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button#whiteboardButton i {
    color: #2EE6A6 !important;
    filter: drop-shadow(0 0 6px rgba(46, 230, 166, 0.9));
}

/* 7 Record — neon red pulse */
#recordingButton i,
#stopRecordingButton i,
#actionButtons button.ss-record i {
    color: #FF1744 !important;
    font-size: 16px !important;
    filter: drop-shadow(0 0 8px rgba(255, 23, 68, 1));
}
#actionButtons button.ss-record {
    border-color: #FF1744 !important;
    box-shadow: 0 0 16px rgba(255, 23, 68, 0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button.ss-record.activeControl {
    background: linear-gradient(160deg, #3a1018 0%, #120608 100%) !important;
    box-shadow: 0 0 22px rgba(255, 23, 68, 0.75) !important;
}
#actionButtons button.ss-record.activeControl i {
    color: #FF1744 !important;
    animation: ss-rec-pulse 1.1s ease-in-out infinite;
}
@keyframes ss-rec-pulse {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 23, 68, 1)); }
    50% { opacity: 0.65; filter: drop-shadow(0 0 16px rgba(255, 23, 68, 1)); }
}

/* 8 Reactions — hot pink (in drawer) */
#actionButtons button#reActionButtons {
    border-color: #FF4D9E !important;
    box-shadow: 0 0 14px rgba(255, 77, 158, 0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#actionButtons button#reActionButtons i {
    color: #FF4D9E !important;
    filter: drop-shadow(0 0 6px rgba(255, 77, 158, 0.95));
}

/* 9 Settings — soft gold (brand) */
#actionButtons button#settingsButton {
    border-color: #E8A23C !important;
    box-shadow: 0 0 14px rgba(232, 162, 60, 0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    margin-right: 6px !important;
}
#actionButtons button#settingsButton i {
    color: #E8A23C !important;
    filter: drop-shadow(0 0 6px rgba(232, 162, 60, 0.9));
}

/* ---- Expanded extras: more neon accents ---- */
#actionButtons button#swapCameraButton {
    border-color: #00FFD5 !important;
    box-shadow: 0 0 14px rgba(0, 255, 213, 0.45) !important;
}
#actionButtons button#swapCameraButton i {
    color: #00FFD5 !important;
    filter: drop-shadow(0 0 6px rgba(0, 255, 213, 0.9));
}

#actionButtons button#getSnapshot {
    border-color: #FF6B35 !important;
    box-shadow: 0 0 14px rgba(255, 107, 53, 0.5) !important;
}
#actionButtons button#getSnapshot i {
    color: #FF6B35 !important;
    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.95));
}

#actionButtons button#raiseHandButtonMain {
    border-color: #FFE566 !important;
    box-shadow: 0 0 14px rgba(255, 229, 102, 0.5) !important;
}
#actionButtons button#raiseHandButtonMain i {
    color: #FFE566 !important;
    filter: drop-shadow(0 0 6px rgba(255, 229, 102, 0.95));
}

#actionButtons button#lowerHandButtonMain {
    border-color: #9B7BFF !important;
    box-shadow: 0 0 14px rgba(155, 123, 255, 0.5) !important;
}
#actionButtons button#lowerHandButtonMain i {
    color: #9B7BFF !important;
    filter: drop-shadow(0 0 6px rgba(155, 123, 255, 0.95));
}

#actionButtons button#chatSpeechStartButton {
    border-color: #5CE1FF !important;
    box-shadow: 0 0 14px rgba(92, 225, 255, 0.5) !important;
}
#actionButtons button#chatSpeechStartButton i {
    color: #5CE1FF !important;
    filter: drop-shadow(0 0 6px rgba(92, 225, 255, 0.95));
}

#actionButtons button#stopButton {
    border-color: #FF5C7A !important;
    box-shadow: 0 0 14px rgba(255, 92, 122, 0.5) !important;
}
#actionButtons button#stopButton i {
    color: #FF5C7A !important;
    filter: drop-shadow(0 0 6px rgba(255, 92, 122, 0.95));
}

#actionButtons .ss-extra-ctrl:hover {
    transform: translateY(-2px) scale(1.08);
    filter: brightness(1.18);
}

/* LEAVE — gold gradient pill + black phone (reference) */
#exitButton,
#actionButtons button#exitButton,
#actionButtons button.ss-leave {
    background: linear-gradient(180deg, #F0C060 0%, #E8A23C 45%, #D4892A 100%) !important;
    border: none !important;
    color: #0A0A0A !important;
    width: auto !important;
    min-width: 118px !important;
    height: 44px !important;
    border-radius: 999px !important;
    padding: 0 22px 0 16px !important;
    margin-left: 2px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    box-shadow: 0 6px 18px rgba(232, 162, 60, 0.4), 0 0 16px rgba(232, 162, 60, 0.3) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

#exitButton i,
#actionButtons button.ss-leave i {
    color: #0A0A0A !important;
    font-size: 15px !important;
    transform: rotate(225deg);
}

.ss-leave-label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #0A0A0A !important;
}

#exitButton::after {
    content: none !important;
}

#exitButton:hover,
#actionButtons button.ss-leave:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(232, 162, 60, 0.55), 0 0 22px rgba(232, 162, 60, 0.4) !important;
}

#actionButtonMobileMenu {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 55 !important;
}

@media (max-width: 1100px) {
    .ss-logo { height: 36px; max-width: 160px; }
    #actionButtons { gap: 7px; }
    #actionButtons button.ss-ctrl,
    #actionButtons button:not(#exitButton):not(#stopButton) {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
}

.ss-logo-link--mobile {
    display: none;
}
.ss-logo-static {
    display: none;
    align-items: center;
    user-select: none;
}

@media (max-width: 820px) {
    .ss-logo-link--desktop {
        display: none !important;
    }
    .ss-logo-link--mobile,
    .ss-logo-static.ss-logo-link--mobile {
        display: inline-flex !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        text-decoration: none !important;
    }
    #ssRoomHeader {
        height: 52px !important;
        min-height: 52px;
        padding: 4px 6px !important;
        gap: 4px !important;
        overflow: visible;
    }
    .ss-header-left {
        flex: 0 0 auto;
        gap: 4px !important;
        max-width: none;
        min-width: 0;
        align-items: center;
    }
    .ss-logo {
        height: 22px !important;
        max-width: 72px !important;
    }
    .ss-speaker,
    .ss-header-divider,
    #ssRoomTimer {
        display: none !important;
    }
    #ssExpandToggle {
        display: inline-flex !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        margin: 0 !important;
        flex: 0 0 auto;
    }
    #ssExpandToggle i {
        font-size: 11px !important;
    }
    .ss-header-right {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #E8A23C transparent;
        touch-action: pan-x;
    }
    #ssRoomHeader #actionButtons,
    #actionButtons {
        gap: 4px !important;
        justify-content: flex-start !important;
        width: max-content !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-wrap: nowrap !important;
        padding: 3px 4px !important;
        display: flex !important;
    }
    #ssRoomHeader #actionButtons button.ss-ctrl,
    #ssRoomHeader #actionButtons button.ss-core-ctrl,
    #ssRoomHeader #actionButtons button.ss-extra-ctrl,
    #ssRoomHeader #actionButtons button:not(#exitButton):not(#stopButton) {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }
    #ssRoomHeader #actionButtons .ss-emoji {
        font-size: 14px !important;
    }
    .ss-leave-label { display: none !important; }
    #exitButton, #actionButtons button.ss-leave {
        min-width: 36px !important;
        width: 36px !important;
        height: 30px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        margin-left: 2px !important;
    }
    #ssRoomHeader .ss-expanded-drawer {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(42vh, 280px) !important;
        display: none !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 16px !important;
        z-index: 80 !important;
        padding: 12px !important;
        gap: 12px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%) !important;
        border: 1px solid rgba(232, 162, 60, 0.35) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #ssRoomHeader .ss-expanded-drawer.open {
        display: flex !important;
        max-width: none !important;
        height: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    #ssRoomHeader .ss-expanded-drawer .ss-extra-ctrl,
    #ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
    #ssRoomHeader .ss-expanded-drawer .ss-emoji {
        font-size: 18px !important;
    }
    #actionButtonMobileMenu {
        display: none !important;
    }
    .ss-footer-brand img {
        height: 22px;
        max-width: 140px;
        object-fit: contain;
    }
    .ss-vb-devices-row {
        display: block !important;
        margin-top: 10px !important;
    }
    .ss-vb-devices-inner {
        display: flex;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    .ss-vb-icon {
        flex: 0 0 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #151515;
        border: 1px solid rgba(232, 162, 60, 0.3);
        border-right: none;
        border-radius: 12px 0 0 12px;
        color: #E8A23C;
    }
    .ss-vb-icon i {
        color: #E8A23C !important;
        font-size: 14px;
    }
    .ss-vb-devices-body {
        flex: 1 1 auto;
        min-width: 0;
        background: #1a1a1a;
        border: 1px solid rgba(232, 162, 60, 0.3);
        border-radius: 0 12px 12px 0;
        padding: 8px 10px;
    }
    .ss-vb-devices-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #E8A23C;
        margin-bottom: 8px;
        text-transform: uppercase;
    }
    #ssDevicesBackgroundHost #backgroundImagesSettings,
    #ssDevicesBackgroundHost .control-virtual-images {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        max-height: none !important;
        height: auto !important;
        padding: 0 0 4px !important;
        margin: 0 !important;
    }
    #ssDevicesBackgroundHost .handleBackgroundButtons,
    #ssDevicesBackgroundHost img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        border: 1.5px solid rgba(232, 162, 60, 0.45) !important;
        flex: 0 0 auto !important;
        cursor: pointer;
        margin: 0 !important;
    }
    #ssDevicesBackgroundHost img.ss-vb-selected {
        border-color: #E8A23C !important;
        box-shadow: 0 0 0 2px rgba(232, 162, 60, 0.35);
    }
}

@media (min-width: 821px) {
    .ss-vb-devices-row {
        display: none !important;
    }
}

/* ---- Video stage: 3×3 featured grid + overflow panel ---- */
#ssVideoStage {
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 80px;
    bottom: 78px;
    display: block;
    padding: 10px 12px 8px;
    box-sizing: border-box;
    transition: right 0.3s ease;
    /* Do not block pre-join / green room clicks until meeting is active */
    pointer-events: none;
    visibility: hidden;
}

#ssVideoStage.ss-active {
    pointer-events: auto;
    visibility: visible;
}

/* Pre-join screens must sit above the video stage */
#greenRoom,
#protectedRoom,
#simpleRoom,
#initialScreen {
    position: relative;
    z-index: 60;
}

/* Main area always fills the stage (nav/overflow are absolutely positioned,
   so display:none on those controls can never collapse the video into a 44px strip) */
#ssVideoMain {
    position: absolute !important;
    top: 10px;
    left: 12px;
    right: 12px;
    bottom: 8px;
    min-width: 0;
    min-height: 0;
    z-index: 1;
}

#ssVideoStage.ss-has-overflow #ssVideoMain {
    right: 200px;
}

#ssVideoStage #videoMediaContainer,
#ssVideoStage #videoPinMediaContainer {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#ssVideoStage #videoMediaContainer {
    display: grid !important;
    gap: 12px !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
}

#ssVideoStage #videoMediaContainer > .videoContainerElement,
#ssVideoStage #videoMediaContainer > .videoContainerElementProducer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: none !important;
    align-self: stretch !important;
    border-radius: 14px !important;
    border: 1px solid rgba(232, 162, 60, 0.28) !important;
    background: #0d0d0d !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
    z-index: 1 !important;
}

#ssVideoStage #videoMediaContainer > .videoContainerElement video,
#ssVideoStage #videoMediaContainer > .videoContainerElementProducer video,
#ssOverflowScroll > .videoContainerElement video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

@media (min-width: 821px) {
    #ssVideoStage #videoMediaContainer > .videoContainerElement[data-ss-remote-portrait="1"] > video,
    #ssVideoStage #videoMediaContainer > .videoContainerElementProducer[data-ss-remote-portrait="1"] > video,
    #ssOverflowScroll > .videoContainerElement[data-ss-remote-portrait="1"] > video,
    #ssVideoStage #videoPinMediaContainer [data-ss-remote-portrait="1"] > video {
        object-fit: contain !important;
        background: #0a0a0a;
    }
}

/* Mobile framing: honor --ssMobileVideoFit (contain = zoom out / show surroundings) */
@media (max-width: 820px) {
    #ssVideoStage #videoMediaContainer > .videoContainerElement video,
    #ssVideoStage #videoMediaContainer > .videoContainerElementProducer video,
    #ssOverflowScroll > .videoContainerElement video {
        object-fit: var(--ssMobileVideoFit, contain) !important;
        background: #0a0a0a;
    }
}

.ss-mobile-framing-row {
    display: none;
}

@media (max-width: 820px) {
    .ss-mobile-framing-row {
        display: block !important;
        margin-top: 6px;
    }
    .ss-hw-zoom-wrap {
        margin-top: 10px;
        padding: 0 2px;
    }
    .ss-hw-zoom-label {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #E8A23C;
        margin-bottom: 6px;
    }
    .ss-hw-zoom {
        width: 100%;
        accent-color: #E8A23C;
    }
}

@media (min-width: 821px) {
    .ss-mobile-framing-row {
        display: none !important;
    }
}

.ss-grid-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid #E8A23C;
    background: rgba(10, 10, 10, 0.85);
    color: #E8A23C;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 0 14px rgba(232, 162, 60, 0.3);
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.ss-grid-prev { left: 8px; }
.ss-grid-next { right: 8px; }

#ssVideoStage.ss-has-overflow .ss-grid-next {
    right: 196px;
}

.ss-grid-nav.is-visible {
    display: inline-flex;
}

.ss-grid-nav:hover:not(:disabled) {
    background: rgba(232, 162, 60, 0.18);
    transform: translateY(-50%) scale(1.06);
}

.ss-grid-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

#ssVideoOverflow {
    display: none;
    position: absolute;
    top: 10px;
    right: 12px;
    bottom: 8px;
    width: 176px;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    z-index: 2;
    border: 1px solid rgba(232, 162, 60, 0.22);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(10, 10, 10, 0.96));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

#ssVideoOverflow.is-visible {
    display: flex;
}

.ss-overflow-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8A23C;
    padding: 10px 10px 6px;
    flex: 0 0 auto;
}

#ssOverflowScroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 6px 10px 12px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: #E8A23C #1a1a1a;
}

#ssOverflowScroll > .videoContainerElement,
#ssOverflowScroll > .ss-overflow-tile {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 64px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(232, 162, 60, 0.45) !important;
    background: #111 !important;
    overflow: hidden !important;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(232, 162, 60, 0.18) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#ssOverflowScroll > .videoContainerElement:hover {
    transform: scale(1.04);
    border-color: #E8A23C !important;
    box-shadow: 0 0 16px rgba(232, 162, 60, 0.45) !important;
}

#ssOverflowScroll > .videoContainerElement .userMenuBar {
    padding: 2px !important;
    justify-content: center;
}

#ssOverflowScroll > .videoContainerElement .userMenuBar span {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ssOverflowScroll > .videoContainerElement .videoMenuBar {
    display: none !important;
}

/* Pin mode: stage still hosts containers; LiveSmart sizes pin strip */
#ssVideoStage.ss-pin-mode #ssVideoMain {
    left: 12px;
    right: 12px;
}

#ssVideoStage.ss-pin-mode .ss-grid-nav,
#ssVideoStage.ss-pin-mode #ssVideoOverflow {
    display: none !important;
}

/* Breakout rooms: dock as right panel (Image 2) without covering tiles */
body.ss-breakout-open #ssVideoStage {
    right: 360px;
}

body.ss-breakout-open #breakoutRoomsModal.show-modal {
    background-color: transparent !important;
    pointer-events: none !important;
    transform: none !important;
}

body.ss-breakout-open #breakoutRoomsModal .modal-dialog {
    position: fixed !important;
    top: 80px !important;
    right: 12px !important;
    bottom: 78px !important;
    left: auto !important;
    margin: 0 !important;
    width: 340px !important;
    max-width: 340px !important;
    height: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: stretch !important;
}

body.ss-breakout-open #breakoutRoomsModal .modal-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: auto !important;
    border: 1px solid rgba(232, 162, 60, 0.28) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

@media (max-width: 1100px) {
    #ssVideoStage.ss-has-overflow #ssVideoMain {
        right: 168px;
    }
    #ssVideoOverflow {
        width: 148px;
    }
    #ssVideoStage.ss-has-overflow .ss-grid-next {
        right: 164px;
    }
    body.ss-breakout-open #ssVideoStage {
        right: 300px;
    }
    body.ss-breakout-open #breakoutRoomsModal .modal-dialog {
        width: 280px !important;
        max-width: 280px !important;
    }
}

@media (max-width: 900px) {
    #ssVideoStage {
        top: 70px;
        bottom: 64px;
        padding: 8px;
    }
    #ssVideoMain {
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
    #ssVideoStage.ss-has-overflow #ssVideoMain {
        right: 8px;
        bottom: 128px;
    }
    .ss-grid-nav {
        display: none !important;
    }
    #ssVideoOverflow {
        top: auto;
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        height: 112px;
        border-radius: 12px;
    }
    #ssVideoOverflow.is-visible {
        max-height: 120px;
    }
    #ssOverflowScroll {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 72px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Mobile tiles: landscape-ish cards, not tall thin columns */
    #ssVideoStage.ss-mobile-layout #videoMediaContainer {
        align-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #ssVideoStage.ss-mobile-layout #videoMediaContainer > .videoContainerElement,
    #ssVideoStage.ss-mobile-layout #videoMediaContainer > .videoContainerElementProducer {
        width: 100% !important;
        height: auto !important;
        max-height: 38vh !important;
        aspect-ratio: 16 / 10 !important;
        min-height: 140px !important;
    }

    /* Two participants: stacked full-width cards */
    #ssVideoStage.ss-mobile-pair #videoMediaContainer {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-content: center !important;
        gap: 10px !important;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    #ssVideoStage.ss-mobile-pair #videoMediaContainer > .videoContainerElement,
    #ssVideoStage.ss-mobile-pair #videoMediaContainer > .videoContainerElementProducer {
        max-height: 34vh !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 150px !important;
    }

    /* Breakout: visible mobile sheet above videos/header chrome */
    body.ss-breakout-open #ssVideoStage {
        right: 0;
    }

    body.ss-breakout-open #breakoutRoomsModal.show-modal {
        background-color: rgba(0, 0, 0, 0.62) !important;
        pointer-events: auto !important;
        z-index: 80 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    body.ss-breakout-open #breakoutRoomsModal .modal-dialog {
        position: fixed !important;
        top: 72px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 72px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        z-index: 81 !important;
        pointer-events: auto !important;
        display: flex !important;
        align-items: stretch !important;
    }

    body.ss-breakout-open #breakoutRoomsModal .modal-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 16px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
    }
}

/* Legacy absolute offsets no longer apply to stage children */
#videoMediaContainer,
#videoPinMediaContainer {
    top: 80px !important;
    bottom: 78px !important;
    height: auto !important;
    padding: 12px 16px 8px;
    box-sizing: border-box;
    gap: 12px;
}

#ssVideoStage #videoMediaContainer,
#ssVideoStage #videoPinMediaContainer {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    padding: 0 !important;
}

.videoContainerElement,
.videoContainerElementProducer {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #111 !important;
    overflow: hidden !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.videoContainerElement.speaking,
.videoContainerElementProducer.speaking,
.videoContainerElement.active-speaker,
.videoContainerElement[data-speaking="true"],
.videoContainerElement:has(.fa-volume-high),
.videoContainerElementProducer:has(.fa-volume-high) {
    border-color: #E8A23C !important;
    box-shadow: 0 0 0 2px #E8A23C, 0 0 22px rgba(232, 162, 60, 0.45) !important;
}

.userMenuBar {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)) !important;
    border: none !important;
    padding: 8px 10px !important;
}

.userMenuBar span {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(10, 10, 10, 0.72) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 600;
}

.userMenuBar span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
}

/* ---- Side / chat / breakout ---- */
#chatRoom,
.chat-app,
.modal-content {
    background: #141414 !important;
    color: #f0f0f0 !important;
    border: 1px solid rgba(232, 162, 60, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Fixed right-side chat dock — solid width (avoid shrink-to-fit collapse). */
#chatRoom,
#chatRoom.ss-chat-dock,
#chatRoom.container {
    position: fixed !important;
    top: 78px !important;
    right: 12px !important;
    left: auto !important;
    bottom: 90px !important;
    width: 380px !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 280px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 120 !important;
    overflow: hidden !important;
}

#chatRoom.ss-chat-dock .chat-app {
    position: relative !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* Message pane uses full dock width (do not reserve 280px for attendees). */
#chatRoom.ss-chat-dock #chatContent.chat,
#chatRoom.ss-chat-dock #chatContent {
    margin-left: 0 !important;
    border-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#chatRoom.ss-chat-dock .chat-header {
    flex: 0 0 auto !important;
}

#chatRoom.ss-chat-dock .chat-history,
#chatRoom.ss-chat-dock #chatHistory {
    flex: 1 1 auto !important;
    max-height: none !important;
    height: auto !important;
    min-height: 120px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

#chatRoom.ss-chat-dock .chat-message {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    background: #121212 !important;
    border-top: 1px solid rgba(232, 162, 60, 0.28) !important;
    z-index: 5 !important;
    position: relative !important;
}

#chatRoom.ss-chat-dock .chat-message .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
}

#chatRoom.ss-chat-dock .chat-message .input-group-text {
    margin-top: 0 !important;
    background: #E8A23C !important;
    border: 1px solid #E8A23C !important;
    color: #0A0A0A !important;
    cursor: pointer !important;
    width: 42px !important;
    min-width: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#chatRoom.ss-chat-dock #chatMessage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    margin-top: 0 !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(232, 162, 60, 0.35) !important;
    color: #fff !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 8px 12px !important;
}

#chatRoom.ss-chat-dock .chat-about,
#chatRoom.ss-chat-dock #attendeeName {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    max-width: calc(100% - 9rem) !important;
    writing-mode: horizontal-tb !important;
}

/* Attendees overlay only when opened; otherwise keep the compose box usable. */
#chatRoom.ss-chat-dock .people-list,
#chatRoom.ss-chat-dock #plist {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #141414 !important;
    z-index: 8 !important;
    overflow: auto !important;
    display: none !important;
}

#chatRoom.ss-chat-dock #plist.ss-open,
#chatRoom.ss-chat-dock .people-list.ss-open {
    display: block !important;
}

.people-list img,
#chatAttendees img,
.chat-list img {
    border-radius: 50% !important;
    border: 2px solid rgba(232, 162, 60, 0.35);
}

#breakoutRoomsModal .modal-content,
#settings .modal-content {
    background: #121212 !important;
}

#breakoutRoomsModal .btn,
#breakoutRoomsSubmit,
.login-btn,
.btn-primary {
    background: #E8A23C !important;
    border-color: #E8A23C !important;
    color: #0A0A0A !important;
    border-radius: 999px !important;
    font-weight: 700;
}

#breakoutRoomsModal .form-control,
#settings .form-control,
#settings .form-select {
    background: #1a1a1a !important;
    border: 1px solid rgba(232, 162, 60, 0.3) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

.close, .btn-close {
    color: #E8A23C !important;
    opacity: 1 !important;
}

/* ---- Pre-join / waiting ---- */
#greenRoom .gray-background,
#initialScreen {
    background: linear-gradient(160deg, #0A0A0A, #1A1A1A) !important;
}

#greenRoom .left-border,
#greenRoom .card-body {
    background: transparent !important;
    color: #fff !important;
}

#greenRoom input,
#greenRoom select,
#greenRoom .form-control {
    background: #151515 !important;
    border: 1px solid rgba(232, 162, 60, 0.3) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

#initVideoButton,
#initAudioButton,
#initBackground {
    background: transparent !important;
    border: 1.5px solid #E8A23C !important;
    color: #E8A23C !important;
    border-radius: 50% !important;
    width: 48px;
    height: 48px;
}

/* ---- Brand footer ---- */
#ssRoomFooter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    background:
        radial-gradient(120% 90% at 50% 120%, rgba(232, 162, 60, 0.18), transparent 55%),
        linear-gradient(0deg, rgba(8, 8, 8, 0.98), rgba(16, 16, 16, 0.9));
    border-top: 1px solid rgba(232, 162, 60, 0.22);
    pointer-events: none;
}

.ss-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
}

.ss-footer-brand img {
    height: 28px;
    width: auto;
}

.ss-footer-wave {
    flex: 1;
    height: 28px;
    max-width: 420px;
    margin: 0 auto;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 4px,
            rgba(232, 162, 60, 0.15) 4px 5px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q30 4 60 20 T120 20 T180 20 T240 20 T300 20 T360 20 T420 20 T480 20 T540 20 T600 20' fill='none' stroke='%23E8A23C' stroke-width='2'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    opacity: 0.9;
}

.ss-footer-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8A23C;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ss-footer-tagline { display: none; }
    #ssVideoStage {
        top: 70px;
        bottom: 64px;
    }
    #chatRoom {
        top: 70px !important;
        right: 8px !important;
        left: auto !important;
        bottom: 72px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   SoundSwift 2026 header control refinement
   Reference goal: premium black/gold circular controls with colorful emoji glyphs.
   Existing button IDs and Font Awesome icons remain in the DOM for app logic.
   ========================================================================== */

/* Keep the primary row compact like the supplied reference image. */
#ssRoomHeader #actionButtons {
    gap: 8px !important;
}

/* Uniform reference-style black discs + gold rings. Color comes from the emoji,
   with only a restrained accent halo so the header stays premium, not rainbow. */
#ssRoomHeader #actionButtons button.ss-ctrl,
#ssRoomHeader #actionButtons button.ss-core-ctrl,
#ssRoomHeader #actionButtons button.ss-extra-ctrl {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border: 1.5px solid rgba(232, 162, 60, 0.92) !important;
    background:
        radial-gradient(circle at 36% 28%, rgba(255,255,255,0.08), transparent 34%),
        linear-gradient(160deg, #202020 0%, #0d0d0d 58%, #050505 100%) !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.7),
        0 0 10px rgba(232, 162, 60, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    overflow: visible;
}

#ssRoomHeader #actionButtons button.ss-ctrl:hover,
#ssRoomHeader #actionButtons button.ss-core-ctrl:hover,
#ssRoomHeader #actionButtons button.ss-extra-ctrl:hover {
    border-color: #ffd36a !important;
    transform: translateY(-2px) scale(1.06);
    background:
        radial-gradient(circle at 36% 28%, rgba(255,255,255,0.12), transparent 36%),
        linear-gradient(160deg, #292929 0%, #111 62%, #070707 100%) !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.75),
        0 0 16px rgba(232, 162, 60, 0.38),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Emoji becomes the visible glyph. Font Awesome stays present but visually hidden,
   avoiding removal of any element that existing meeting JavaScript may expect. */
#ssRoomHeader #actionButtons .ss-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 19px;
    line-height: 1;
    width: 24px;
    height: 24px;
    transform: translateY(0.5px);
    filter: saturate(1.16) contrast(1.04) drop-shadow(0 1px 2px rgba(0,0,0,.75));
    transition: transform .2s ease, filter .2s ease;
    pointer-events: none;
}

#ssRoomHeader #actionButtons button:hover .ss-emoji {
    transform: translateY(0) scale(1.12);
    filter: saturate(1.28) contrast(1.08) drop-shadow(0 0 5px rgba(255,255,255,.14));
}

#ssRoomHeader #actionButtons button .ss-emoji + i,
#ssRoomHeader #actionButtons #exitButton .ss-leave-emoji + i {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Subtle per-control light bloom. The gold ring remains consistent with SoundSwift. */
#ssRoomHeader #actionButtons .ss-accent-cyan   { --ss-accent: 0,229,255; }
#ssRoomHeader #actionButtons .ss-accent-lime   { --ss-accent: 184,255,60; }
#ssRoomHeader #actionButtons .ss-accent-violet { --ss-accent: 200,75,255; }
#ssRoomHeader #actionButtons .ss-accent-orange { --ss-accent: 255,159,28; }
#ssRoomHeader #actionButtons .ss-accent-blue   { --ss-accent: 77,163,255; }
#ssRoomHeader #actionButtons .ss-accent-mint   { --ss-accent: 46,230,166; }
#ssRoomHeader #actionButtons .ss-accent-red    { --ss-accent: 255,23,68; }
#ssRoomHeader #actionButtons .ss-accent-pink   { --ss-accent: 255,77,158; }
#ssRoomHeader #actionButtons .ss-accent-gold   { --ss-accent: 232,162,60; }
#ssRoomHeader #actionButtons .ss-accent-teal   { --ss-accent: 0,255,213; }
#ssRoomHeader #actionButtons .ss-accent-yellow { --ss-accent: 255,229,102; }
#ssRoomHeader #actionButtons .ss-accent-purple { --ss-accent: 155,123,255; }
#ssRoomHeader #actionButtons .ss-accent-sky    { --ss-accent: 92,225,255; }

#ssRoomHeader #actionButtons button[class*="ss-accent-"]::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ss-accent), .12), transparent 70%);
    opacity: .7;
    pointer-events: none;
}

#ssRoomHeader #actionButtons button[class*="ss-accent-"]:hover {
    box-shadow:
        0 0 0 1px rgba(0,0,0,.75),
        0 0 12px rgba(232,162,60,.32),
        0 0 17px rgba(var(--ss-accent), .18),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Record gets a controlled pulse while active, matching the red dot in reference. */
#ssRoomHeader #actionButtons .ss-record-emoji {
    font-size: 17px;
}
#ssRoomHeader #actionButtons .ss-record.activeControl .ss-record-emoji {
    animation: ss-emoji-record-pulse 1.15s ease-in-out infinite;
}
@keyframes ss-emoji-record-pulse {
    0%,100% { transform: scale(1); filter: saturate(1.15) drop-shadow(0 0 3px rgba(255,23,68,.35)); }
    50% { transform: scale(.86); filter: saturate(1.4) drop-shadow(0 0 8px rgba(255,23,68,.85)); }
}

/* The expansion button visually mirrors the left/back-style circle in the reference. */
#ssExpandToggle.ss-expand-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin-left: 2px !important;
    border-color: #E8A23C !important;
    background: linear-gradient(160deg, #1e1e1e, #080808) !important;
}
#ssExpandToggle.ss-expand-btn::after {
    content: "•••";
    color: #E8A23C;
    font-family: Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    transform: translateY(-2px);
}
#ssExpandToggle.ss-expand-btn i {
    display: none !important;
}
#ssExpandToggle.ss-expand-btn.expanded::after {
    content: "×";
    font-size: 23px;
    line-height: 1;
    transform: none;
}

/* Secondary controls open as a floating mini-toolbar below the header instead of
   squeezing or shifting the primary controls. */
#ssRoomHeader .ss-expanded-drawer {
    position: absolute !important;
    top: 62px;
    right: 150px;
    z-index: 80;
    display: flex !important;
    align-items: center;
    gap: 8px;
    max-width: none !important;
    width: max-content;
    padding: 7px 9px !important;
    border: 1px solid rgba(232,162,60,.44);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(28,28,28,.98), rgba(8,8,8,.98)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.52), 0 0 18px rgba(232,162,60,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.97);
    transform-origin: top right;
    transition: opacity .2s ease, transform .24s ease, visibility .2s ease !important;
    overflow: visible !important;
}
#ssRoomHeader .ss-expanded-drawer.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Leave matches the screenshot's gold pill while adding a colored emoji handset. */
#ssRoomHeader #exitButton,
#ssRoomHeader #actionButtons button.ss-leave {
    min-width: 112px !important;
    height: 42px !important;
    padding: 0 18px 0 13px !important;
    gap: 8px !important;
}
#ssRoomHeader #exitButton .ss-leave-emoji {
    display: inline-flex;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 18px;
    line-height: 1;
    filter: saturate(1.15) contrast(1.05);
}

/* Wide-screen spacing tuned to resemble the uploaded reference. */
@media (min-width: 1400px) {
    #ssRoomHeader { padding-left: 18px; padding-right: 18px; gap: 14px; }
    #ssRoomHeader #actionButtons { gap: 9px !important; }
}

/* Preserve ten-action concept while gracefully compressing on typical laptops. */
@media (max-width: 1280px) {
    #ssRoomHeader { gap: 10px; padding-left: 12px; padding-right: 12px; }
    .ss-header-left { gap: 9px; }
    .ss-logo { height: 34px; max-width: 145px; }
    .ss-speaker { width: 27px; height: 27px; }
    #ssRoomTimer { min-width: 86px; padding: 7px 10px !important; font-size: .76rem !important; }
    #ssRoomHeader #actionButtons { gap: 5px !important; }
    #ssRoomHeader #actionButtons button.ss-ctrl,
    #ssRoomHeader #actionButtons button.ss-core-ctrl,
    #ssRoomHeader #actionButtons button.ss-extra-ctrl {
        width: 37px !important;
        height: 37px !important;
        min-width: 37px !important;
    }
    #ssRoomHeader #actionButtons .ss-emoji { font-size: 17px; }
    #ssRoomHeader #exitButton,
    #ssRoomHeader #actionButtons button.ss-leave {
        min-width: 86px !important;
        height: 37px !important;
        padding: 0 12px !important;
    }
    .ss-leave-label { font-size: .72rem !important; }
    #ssRoomHeader .ss-expanded-drawer { top: 58px; right: 105px; }
}

@media (max-width: 980px) {
    /* On smaller screens, let the application's existing mobile menu take over;
       keep the floating drawer safely within the viewport if it is opened. */
    #ssRoomHeader .ss-expanded-drawer {
        right: 12px;
        max-width: calc(100vw - 24px) !important;
        flex-wrap: wrap;
        border-radius: 18px;
        justify-content: flex-end;
    }
}

/* ========================================================================== 
   SoundSwift header refinement v2 — inline left expansion + embossed control deck
   ========================================================================== */

/* The whole control pack gets a raised/embossed black deck, while each control
   keeps its individual SoundSwift gold ring. */
#ssRoomHeader #actionButtons {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(232, 162, 60, .38) !important;
    background:
        linear-gradient(180deg, rgba(36,36,36,.97) 0%, rgba(15,15,15,.985) 46%, rgba(5,5,5,.99) 100%) !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,.58),
        0 0 14px rgba(232,162,60,.10),
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 -2px 4px rgba(0,0,0,.78),
        inset 0 0 0 1px rgba(255,255,255,.025) !important;
    overflow: visible !important;
}

/* A subtle inner bevel line makes the black deck look stamped/embossed. */
#ssRoomHeader #actionButtons::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    border-top: 1px solid rgba(255,255,255,.055);
    border-bottom: 1px solid rgba(0,0,0,.82);
    pointer-events: none;
    z-index: 0;
}

#ssRoomHeader #actionButtons > * {
    position: relative;
    z-index: 1;
}

/* Give each round button a more dimensional, raised face without losing the
   thin gold ring requested for the SoundSwift reference look. */
#ssRoomHeader #actionButtons button.ss-ctrl,
#ssRoomHeader #actionButtons button.ss-core-ctrl,
#ssRoomHeader #actionButtons button.ss-extra-ctrl {
    border: 1.5px solid #E8A23C !important;
    background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,.13), transparent 30%),
        linear-gradient(155deg, #292929 0%, #111 48%, #050505 100%) !important;
    box-shadow:
        0 3px 7px rgba(0,0,0,.72),
        0 0 8px rgba(232,162,60,.20),
        inset 1px 1px 0 rgba(255,255,255,.10),
        inset -2px -2px 4px rgba(0,0,0,.82) !important;
}

#ssRoomHeader #actionButtons button.ss-ctrl:hover,
#ssRoomHeader #actionButtons button.ss-core-ctrl:hover,
#ssRoomHeader #actionButtons button.ss-extra-ctrl:hover {
    border-color: #FFD36A !important;
    transform: translateY(-2px) scale(1.07);
    box-shadow:
        0 5px 10px rgba(0,0,0,.78),
        0 0 13px rgba(232,162,60,.42),
        0 0 16px rgba(var(--ss-accent, 232,162,60), .16),
        inset 1px 1px 0 rgba(255,255,255,.14),
        inset -2px -2px 4px rgba(0,0,0,.82) !important;
}

/* IMPORTANT: extra controls now expand INLINE through the header. Because the
   full action group is right-aligned, opening the drawer makes the pack grow
   toward the LEFT, just like the original implementation. */
#ssRoomHeader .ss-expanded-drawer {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transform: none !important;
    transition: max-width .42s cubic-bezier(.22,.8,.24,1), opacity .20s ease, visibility .20s ease !important;
}

#ssRoomHeader .ss-expanded-drawer.open {
    max-width: 340px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-left: 14px !important;
    padding: 0 2px 0 4px !important;
    overflow: visible !important;
    transform: none !important;
}

/* The extra buttons slide/fade in from the right edge of the drawer so the
   visual motion reads as the toolbar extending left across the header. */
#ssRoomHeader .ss-expanded-drawer .ss-extra-ctrl {
    opacity: 0;
    transform: translateX(14px) scale(.92);
    transition: opacity .18s ease, transform .28s cubic-bezier(.22,.8,.24,1) !important;
}
#ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl {
    opacity: 1;
    transform: translateX(0) scale(1);
}
#ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl:nth-child(1) { transition-delay: .03s !important; }
#ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl:nth-child(2) { transition-delay: .06s !important; }
#ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl:nth-child(3) { transition-delay: .09s !important; }
#ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl:nth-child(4) { transition-delay: .12s !important; }
#ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl:nth-child(5) { transition-delay: .15s !important; }
#ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl:nth-child(6) { transition-delay: .18s !important; }

/* Keep the Leave button visually integrated into the embossed pack. */
#ssRoomHeader #exitButton,
#ssRoomHeader #actionButtons button.ss-leave {
    box-shadow:
        0 4px 10px rgba(0,0,0,.55),
        0 0 14px rgba(232,162,60,.28),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -2px 4px rgba(126,69,9,.32) !important;
}

/* Laptop-width safety: still expands inline, but with slightly tighter spacing. */
@media (max-width: 1280px) and (min-width: 821px) {
    #ssRoomHeader #actionButtons { gap: 5px !important; padding: 5px 6px !important; }
    #ssRoomHeader .ss-expanded-drawer { gap: 5px !important; height: 37px !important; }
    #ssRoomHeader .ss-expanded-drawer.open { max-width: 285px !important; }
}

/* Mobile must win over laptop drawer height/cram rules above */
@media (max-width: 820px) {
    #ssRoomHeader .ss-expanded-drawer,
    #ssRoomHeader .ss-expanded-drawer.open {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(42vh, 280px) !important;
        gap: 12px !important;
        padding: 12px !important;
        flex-wrap: wrap !important;
        overflow-y: auto !important;
    }
    #ssRoomHeader .ss-expanded-drawer:not(.open) {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #ssRoomHeader .ss-expanded-drawer.open {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    #ssRoomHeader .ss-expanded-drawer .ss-extra-ctrl,
    #ssRoomHeader .ss-expanded-drawer.open .ss-extra-ctrl {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        opacity: 1 !important;
        transform: none !important;
        transition-delay: 0s !important;
    }
    /* Compact Leave — match other mobile control size (desktop pill stays) */
    #ssRoomHeader #exitButton,
    #ssRoomHeader #actionButtons button.ss-leave,
    #ssRoomHeader #actionButtons button#exitButton {
        min-width: 30px !important;
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
        margin-left: 2px !important;
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.45),
            0 0 8px rgba(232, 162, 60, 0.25) !important;
    }
    #ssRoomHeader #exitButton .ss-leave-emoji,
    #ssRoomHeader .ss-leave-label {
        display: none !important;
    }
    #ssRoomHeader #exitButton i,
    #ssRoomHeader #actionButtons button.ss-leave i {
        font-size: 12px !important;
        margin: 0 !important;
    }
    #ssRoomHeader #exitButton::before,
    #ssRoomHeader #actionButtons button.ss-leave::before {
        content: "" !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        border-style: solid !important;
        border-width: 4px 0 4px 7px !important;
        border-color: transparent transparent transparent #000 !important;
        margin: 0 !important;
        position: relative !important;
        left: 1px;
    }
}

/* ==========================================================================
   Green room (pre-join) — iPhone: speaker row + Safari chrome hide Join
   Desktop layout unchanged.
   ========================================================================== */
@media (max-width: 820px) {
    #greenRoom {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: 100vh;
        max-height: 100dvh;
    }

    /* flex center + min-vh-100 clips tall forms on iOS — start from top + scroll */
    #greenRoom main,
    #greenRoom main.gray-background {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        padding: 10px 0 calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #greenRoom main .container {
        max-width: 100% !important;
        width: 100% !important;
        align-items: stretch !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #greenRoom .row.no-gutters {
        margin: 0 !important;
    }

    #greenRoom #videoContainer,
    #greenRoom .videoholder {
        max-height: 22vh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 4px !important;
    }

    #greenRoom #initVideo {
        max-height: 22vh !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
        object-fit: contain;
    }

    #greenRoom .card-body.text-center {
        padding: 2px 0 6px !important;
    }

    #greenRoom #initVideoButton,
    #greenRoom #initAudioButton,
    #greenRoom #initBackground {
        width: 36px !important;
        height: 36px !important;
    }

    #greenRoom .left-border {
        border-left: none !important;
    }

    #greenRoom .card-body {
        padding: 6px 2px 12px !important;
    }

    #greenRoom .input-group,
    #greenRoom .input-group-text,
    #greenRoom select,
    #greenRoom input.form-control,
    #greenRoom .waiting-fields {
        margin-top: 6px !important;
    }

    /* Keep Join Meeting visible above Safari’s bottom bar */
    #greenRoomForm .form-group.text-center {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 30 !important;
        margin-bottom: 0 !important;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: linear-gradient(
            180deg,
            rgba(10, 10, 10, 0) 0%,
            rgba(10, 10, 10, 0.92) 28%,
            rgba(10, 10, 10, 0.98) 100%
        );
    }

    #greenRoom #joinMeeting,
    #greenRoom input#joinMeeting {
        width: 100% !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Hide ONLY inactive mic/cam/screen twins. Specificity must beat
   `#actionButtons button:not(#exitButton):not(#stopButton)` (IDs inside
   :not() inflate that rule). Do not blanket-hide other .hidden features.
   ------------------------------------------------------------------------- */
#ssRoomHeader #actionButtons button#startAudioButton.hidden,
#ssRoomHeader #actionButtons button#stopAudioButton.hidden,
#ssRoomHeader #actionButtons button#startVideoButton.hidden,
#ssRoomHeader #actionButtons button#stopVideoButton.hidden,
#ssRoomHeader #actionButtons button#startScreenButton.hidden,
#ssRoomHeader #actionButtons button#stopScreenButton.hidden,
#actionButtonMobileMenu button#startAudioButton.hidden,
#actionButtonMobileMenu button#stopAudioButton.hidden,
#actionButtonMobileMenu button#startVideoButton.hidden,
#actionButtonMobileMenu button#stopVideoButton.hidden,
#actionButtonMobileMenu button#startScreenButton.hidden,
#actionButtonMobileMenu button#stopScreenButton.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Mic-off control: keep a mic glyph (not 🔇 speaker) with a clear slash */
#ssRoomHeader #actionButtons .ss-emoji--mic-off {
    position: relative;
}
#ssRoomHeader #actionButtons .ss-emoji--mic-off::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 48%;
    height: 2px;
    background: #ff4d4d;
    transform: rotate(-28deg);
    border-radius: 2px;
    pointer-events: none;
}

/* ========================================================================== 
   SoundSwift Connect — premium pre-join lobby restoration
   Additive only: scoped to #greenRoom so in-meeting stage/chrome is untouched.
   ========================================================================== */
#greenRoom.ss-prejoin-lobby {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    background:
        radial-gradient(circle at 16% 18%, rgba(232,162,60,.10), transparent 30%),
        radial-gradient(circle at 84% 38%, rgba(232,162,60,.05), transparent 26%),
        linear-gradient(145deg, #080808 0%, #111 48%, #090909 100%) !important;
}
#greenRoom .ss-lobby-shell {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 24px 30px !important;
    background: transparent !important;
}
#greenRoom .ss-lobby-wrap { width: min(1180px, 100%); margin: 0 auto; }
#greenRoom .ss-lobby-brand { text-align: center; margin: 0 auto 26px; }
#greenRoom .ss-lobby-brand-kicker,
#greenRoom .ss-lobby-brand-tagline {
    color: #9d9d9d; font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
}
#greenRoom .ss-lobby-brand-kicker span,
#greenRoom .ss-lobby-brand-tagline span { color: #DFA82C; padding: 0 5px; }
#greenRoom .ss-lobby-brand-title {
    margin: 8px 0 6px; color: #fff; font-size: clamp(28px, 3.2vw, 46px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1;
}
#greenRoom .ss-lobby-brand-title strong { color: #FFD166; font-weight: 800; }
#greenRoom .ss-lobby-grid {
    display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap: 24px; align-items: stretch;
}
#greenRoom .ss-preview-panel,
#greenRoom .ss-join-panel {
    min-width: 0; border: 1px solid rgba(255,209,102,.20); border-radius: 24px;
    background: linear-gradient(155deg, rgba(27,27,27,.96), rgba(10,10,10,.98));
    box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035);
}
#greenRoom .ss-preview-panel { padding: 14px; }
#greenRoom .ss-preview-frame {
    height: 100%; min-height: 465px; display: flex; flex-direction: column; position: relative; overflow: hidden;
    border-radius: 17px; background: #050505; border: 1px solid rgba(255,255,255,.07);
}
#greenRoom .ss-live-preview {
    position: absolute; z-index: 4; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 10px; border-radius: 999px; color: #fff; background: rgba(5,5,5,.72);
    border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); font-size: 9px; font-weight: 800; letter-spacing: .14em;
}
#greenRoom .ss-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #40d97b; box-shadow: 0 0 9px rgba(64,217,123,.8); }
#greenRoom .ss-preview-video { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #050505; }
#greenRoom #initVideo {
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    min-height: 360px; object-fit: cover; display: block; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
}
#greenRoom .ss-preview-controls {
    flex: 0 0 auto; min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 42px;
    padding: 12px 18px; background: linear-gradient(180deg, #151515, #0b0b0b); border-top: 1px solid rgba(255,255,255,.07);
}
#greenRoom .ss-preview-control { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c7c7c7; font-size: 10px; font-weight: 700; }
#greenRoom .ss-preview-control button,
#greenRoom #initVideoButton,
#greenRoom #initAudioButton,
#greenRoom #initBackground {
    width: 42px !important; height: 42px !important; min-width: 42px !important; margin: 0 !important; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important;
    border: 1.5px solid #DFA82C !important; background: #121212 !important; color: #FFD166 !important;
    box-shadow: 0 0 14px rgba(223,168,44,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#greenRoom .ss-preview-control button:hover { background: #201b10 !important; transform: translateY(-1px); }
#greenRoom .ss-join-panel { padding: 32px 32px 26px; display: flex; flex-direction: column; justify-content: center; }
#greenRoom .ss-join-heading { margin-bottom: 20px; }
#greenRoom .ss-join-eyebrow { color: #DFA82C; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
#greenRoom .ss-join-heading h1 { margin: 7px 0 7px; color: #fff; font-size: 29px; line-height: 1.1; font-weight: 800; }
#greenRoom .ss-join-heading p { margin: 0; color: #8f8f8f; font-size: 12px; line-height: 1.6; }
#greenRoom .ss-device-row {
    display: grid; grid-template-columns: 38px minmax(0,1fr) 10px; align-items: center; gap: 11px;
    min-height: 60px; margin: 0 0 10px; padding: 8px 13px; border: 1px solid #2a2a2a; border-radius: 13px;
    background: linear-gradient(145deg,#171717,#101010); transition: border-color .2s ease, background .2s ease;
}
#greenRoom .ss-device-row:focus-within { border-color: rgba(223,168,44,.7); background: #17150f; }
#greenRoom .ss-device-icon {
    position: relative;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    color: #FFD166; border: 1px solid rgba(223,168,44,.55); background: #0d0d0d;
}
#greenRoom .ss-device-icon .inlineicons,
#greenRoom .ss-device-icon i {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    color: inherit !important;
}
#greenRoom .ss-device-copy { min-width: 0; }
#greenRoom .ss-device-copy > span { display: block; margin: 0 0 1px; color: #777; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#greenRoom .ss-device-copy select,
#greenRoom #greenRoomVideoSelect,
#greenRoom #greenRoomMicSelect,
#greenRoom #greenRoomSpeakerSelect {
    width: 100% !important; height: 25px !important; min-height: 25px !important; padding: 0 24px 0 0 !important; margin: 0 !important;
    border: 0 !important; outline: 0 !important; box-shadow: none !important; background-color: transparent !important;
    color: #f0f0f0 !important; font-size: 11px !important; font-weight: 600;
}
#greenRoom .ss-device-copy select option { background: #171717; color: #fff; }
#greenRoom .ss-device-status { width: 7px; height: 7px; border-radius: 50%; background: #40d97b; box-shadow: 0 0 8px rgba(64,217,123,.55); }
#greenRoom .ss-device-group { margin: 0 !important; }
#greenRoom .ss-name-group { margin: 15px 0 12px !important; }
#greenRoom .ss-name-group > label { display: block; margin: 0 0 7px; color: #b8b8b8; font-size: 10px; font-weight: 700; }
#greenRoom .ss-name-field { position: relative; }
#greenRoom .ss-name-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #DFA82C; font-size: 12px; z-index: 2; }
#greenRoom .ss-name-field #joinerName,
#greenRoom input#joinerName {
    width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 14px 0 38px !important;
    color: #fff !important; background: #101010 !important; border: 1px solid #2c2c2c !important; border-radius: 12px !important;
    box-shadow: none !important; font-size: 12px !important;
}
#greenRoom input#joinerName:focus { border-color: #DFA82C !important; box-shadow: 0 0 0 3px rgba(223,168,44,.09) !important; }
#greenRoom .ss-join-action { margin: 0 !important; padding: 0 !important; position: static !important; background: none !important; }
#greenRoom #joinMeeting,
#greenRoom input#joinMeeting {
    width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 20px !important; border: 0 !important;
    border-radius: 12px !important; color: #15120B !important; background: linear-gradient(180deg,#FFD166,#DFA82C) !important;
    font-size: 12px !important; font-weight: 800 !important; letter-spacing: .02em; box-shadow: 0 10px 24px rgba(223,168,44,.18) !important;
}
#greenRoom #joinMeeting:hover { background: #E4B93F !important; transform: translateY(-1px); }
#greenRoom .ss-lobby-note { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 11px; color: #696969; font-size: 9px; text-align: center; }
#greenRoom .ss-lobby-note i { color: #8b6b2a; }
#greenRoom .ss-lobby-footer {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 18px; padding: 15px 18px;
    border-top: 1px solid rgba(255,255,255,.06); color: #777;
}
#greenRoom .ss-lobby-footer > div { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; }
#greenRoom .ss-lobby-footer i { color: #A77C27; font-size: 14px; }
#greenRoom .ss-lobby-footer span { display: flex; flex-direction: column; min-width: 0; }
#greenRoom .ss-lobby-footer strong { color: #aaa; font-size: 9px; font-weight: 700; white-space: nowrap; }
#greenRoom .ss-lobby-footer small { color: #5e5e5e; font-size: 7px; white-space: nowrap; }

@media (max-width: 820px) {
    #greenRoom.ss-prejoin-lobby { max-height: 100vh; max-height: 100dvh; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
    #greenRoom .ss-lobby-shell { display: block !important; min-height: auto !important; height: auto !important; padding: 18px 14px calc(28px + env(safe-area-inset-bottom,0px)) !important; overflow: visible !important; }
    #greenRoom .ss-lobby-brand { margin-bottom: 15px; }
    #greenRoom .ss-lobby-brand-kicker { display: none; }
    #greenRoom .ss-lobby-brand-title { font-size: 27px; }
    #greenRoom .ss-lobby-brand-tagline { font-size: 8px; letter-spacing: .17em; }
    #greenRoom .ss-lobby-grid { display: block; }
    #greenRoom .ss-preview-panel { padding: 9px; border-radius: 18px; margin-bottom: 13px; }
    #greenRoom .ss-preview-frame { min-height: 0; border-radius: 13px; overflow: visible; }
    #greenRoom .ss-preview-video,
    #greenRoom .ss-preview-video#videoContainer,
    #greenRoom.ss-prejoin-lobby #videoContainer {
        min-height: 0;
        height: min(38vh, 280px) !important;
        max-height: none !important;
        overflow: hidden;
        border-radius: 13px 13px 0 0;
    }
    #greenRoom #initVideo { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; }
    #greenRoom .ss-live-preview { top: 10px; left: 10px; padding: 5px 8px; font-size: 8px; }
    #greenRoom .ss-preview-controls {
        display: flex !important;
        visibility: visible !important;
        align-items: flex-start;
        justify-content: space-evenly;
        min-height: 68px;
        gap: 8px !important;
        padding: 8px 6px 10px !important;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }
    #greenRoom .ss-preview-control {
        flex: 1 1 0;
        min-width: 0;
    }
    #greenRoom .ss-waiting-audio-control {
        display: flex !important;
        visibility: visible !important;
        flex: 1 1 0;
    }
    #greenRoom .ss-preview-control button,
    #greenRoom #initVideoButton,
    #greenRoom #initAudioButton,
    #greenRoom #initBackground { width: 38px !important; height: 38px !important; min-width: 38px !important; }
    #greenRoom .ss-preview-control { font-size: 9px; }
    #greenRoom .ss-join-panel { padding: 22px 16px 16px; border-radius: 18px; }
    #greenRoom .ss-join-heading { margin-bottom: 15px; }
    #greenRoom .ss-join-heading h1 { font-size: 23px; }
    #greenRoom .ss-device-row { min-height: 55px; margin-bottom: 8px; }
    #greenRoom #greenRoomForm {
        display: flex;
        flex-direction: column;
    }
    #greenRoom #greenRoomForm .ss-name-group { order: 1; margin-top: 0 !important; margin-bottom: 12px !important; }
    #greenRoom #greenRoomForm > .ss-device-row:nth-of-type(1) { order: 2; }
    #greenRoom #greenRoomForm > .ss-device-row:nth-of-type(2) { order: 3; }
    #greenRoom #greenRoomForm .ss-device-group { order: 4; }
    #greenRoom #greenRoomForm .ss-join-action { order: 5; }
    #greenRoom #greenRoomForm #termsContainer { order: 6; }
    #greenRoom #greenRoomForm #agreeContainer { order: 7; }
    #greenRoom #greenRoomForm .ss-lobby-note { order: 8; }
    #greenRoom .ss-join-action { position: static !important; bottom: auto !important; z-index: auto !important; padding: 0 !important; background: none !important; }
    #greenRoom .ss-lobby-footer { grid-template-columns: repeat(2,1fr); gap: 14px 8px; padding: 16px 4px 0; }
    #greenRoom .ss-lobby-footer > div { justify-content: flex-start; }
}

@media (max-width: 430px) {
    #greenRoom .ss-preview-video,
    #greenRoom .ss-preview-video#videoContainer { height: min(31vh, 220px) !important; min-height: 160px; }
    #greenRoom .ss-join-panel { padding: 19px 13px 14px; }
    #greenRoom .ss-lobby-footer small { display: none; }
}

/* ==========================================================================
   SoundSwift waiting-room audio control — Phase 2
   Browser soundtrack only; isolated from meeting audio/WebRTC.
   ========================================================================== */
#greenRoom .ss-waiting-audio-control #ssWaitingAudioToggle {
    border-color: #DFA82C !important;
    color: #FFD166 !important;
    box-shadow: 0 0 14px rgba(223,168,44,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#greenRoom .ss-waiting-audio-control #ssWaitingAudioToggle.ss-muted {
    color: #9a9a9a !important;
    border-color: #6e6e6e !important;
    box-shadow: none !important;
}
#greenRoom .ss-waiting-audio-control #ssWaitingAudioLabel {
    white-space: nowrap;
}
@media (max-width: 820px) {
    #greenRoom .ss-waiting-audio-control #ssWaitingAudioLabel {
        font-size: 8px;
        white-space: normal;
        max-width: 4.8em;
        line-height: 1.15;
        text-align: center;
    }
}