/**
 * aMeeting - Africa CRM Video Conferencing
 * Complete UI overhaul - Zoom-like simplicity
 *
 * Design principles:
 * 1. Minimal button count - only essential controls
 * 2. Clean dark theme - professional look
 * 3. Floating control bar - centered bottom
 * 4. No clutter - hide what doesn't matter
 */

/* ============================================
   RESET & BASE STYLES
   ============================================ */

:root {
    /* Africa CRM color system */
    --africa-bg: #0f0f0f;
    --africa-surface: #1a1a1a;
    --africa-surface-hover: #252525;
    --africa-border: rgba(255, 255, 255, 0.1);
    --africa-text: #ffffff;
    --africa-text-muted: #a0a0a0;

    /* Control colors */
    --africa-red: #ef4444;
    --africa-red-hover: #dc2626;
    --africa-green: #22c55e;
    --africa-green-hover: #16a34a;
    --africa-blue: #3b82f6;
    --africa-blue-hover: #2563eb;

    /* Glass effect */
    --africa-glass: rgba(30, 30, 30, 0.85);
    --africa-glass-border: rgba(255, 255, 255, 0.08);
}

html, body {
    background: var(--africa-bg) !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}


/* ============================================
   HIDE ALL UNNECESSARY ELEMENTS
   ============================================ */

/* Left sidebar buttons - COMPLETELY HIDDEN */
#buttonsBar {
    display: none !important;
}

/* Individual buttons to hide */
#shareRoomBtn,
#hideMeBtn,
#fullScreenBtn,
#roomEmojiPickerBtn,
#captionBtn,
#whiteboardBtn,
#snapshotRoomBtn,
#fileShareBtn,
#documentPiPBtn,
#aboutBtn,
#swapCameraBtn,
#myHandBtn,
#transcriptBtn,
#pitchBarBtn,
#toggleExtraBtn,
#qrRoomPopupContainer,
#webRTCSeo {
    display: none !important;
}

/* Hide loading div */
#loadingDiv {
    display: none !important;
}

/* Hide fullscreen button in bottom bar */
#bottomButtons #fullScreenBtn {
    display: none !important;
}


/* ============================================
   BOTTOM CONTROL BAR - ZOOM STYLE
   ============================================ */

#bottomButtons {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    background: var(--africa-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    padding: 12px 16px !important;
    border-radius: 16px !important;
    border: 1px solid var(--africa-glass-border) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
}

/* Control button base */
#bottomButtons button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: none !important;
    background: transparent !important;
    color: var(--africa-text) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

#bottomButtons button:hover {
    background: var(--africa-surface-hover) !important;
}

#bottomButtons button:active {
    transform: scale(0.95) !important;
}

/* Mic/Video off state - red background */
#bottomButtons #audioBtn.fa-microphone-slash,
#bottomButtons #videoBtn.fa-video-slash {
    background: var(--africa-red) !important;
    color: white !important;
}

#bottomButtons #audioBtn.fa-microphone-slash:hover,
#bottomButtons #videoBtn.fa-video-slash:hover {
    background: var(--africa-red-hover) !important;
}

/* Screen share active - green */
#bottomButtons #screenShareBtn.active,
#bottomButtons #screenShareBtn.fa-stop-circle {
    background: var(--africa-green) !important;
    color: white !important;
}

/* Chat active - blue */
#bottomButtons #chatRoomBtn.active {
    background: var(--africa-blue) !important;
    color: white !important;
}

/* Record button - special styling */
#bottomButtons #recordStreamBtn {
    color: var(--africa-red) !important;
}

#bottomButtons #recordStreamBtn.active,
#bottomButtons #recordStreamBtn.blink {
    background: var(--africa-red) !important;
    color: white !important;
    animation: pulse-record 1.5s ease-in-out infinite !important;
}

@keyframes pulse-record {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { opacity: 0.9; box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* Leave button - always red */
#bottomButtons #leaveRoomBtn {
    background: var(--africa-red) !important;
    color: white !important;
    margin-left: 8px !important;
}

#bottomButtons #leaveRoomBtn:hover {
    background: var(--africa-red-hover) !important;
}

/* Divider between button groups */
#bottomButtons #screenShareBtn {
    margin-left: 8px !important;
    padding-left: 8px !important;
    border-left: 1px solid var(--africa-border) !important;
    border-radius: 12px !important;
}

#bottomButtons #mySettingsBtn {
    margin-left: 8px !important;
}


/* ============================================
   VIDEO CONTAINER STYLING
   ============================================ */

#videoMediaContainer {
    background: var(--africa-bg) !important;
}

.Camera,
.videoContainer {
    background: var(--africa-surface) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--africa-border) !important;
}

/* Video element */
video {
    background: var(--africa-surface) !important;
    object-fit: cover !important;
}

/* Name badge on video */
.videoPeerName,
.videoAvatarName,
[id*="Name"] {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: white !important;
    bottom: 12px !important;
    left: 12px !important;
}

/* Video controls overlay - COMPLETELY HIDDEN */
.videoNavBar,
.videoAvatarBar,
.navbar,
[class*="navBar"],
[class*="NavBar"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Never show on hover either */
.Camera:hover .videoNavBar,
.videoContainer:hover .videoNavBar,
.Camera:hover .videoAvatarBar,
.videoContainer:hover .videoAvatarBar,
.Camera:hover .navbar,
.videoContainer:hover .navbar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide specific video buttons - keep only essential */
[id*="toggleMirror"],
[id*="VideoMirror"],
[id*="ZoomIn"],
[id*="ZoomOut"],
[id*="zoomIn"],
[id*="zoomOut"],
[id*="snapShot"],
[id*="SnapShot"],
[id*="geoLocation"],
[id*="GeoLocation"],
[id*="fileShare"],
[id*="FileShare"],
[id*="videoAudioUrl"],
[id*="VideoAudioUrl"],
.fa-arrow-right-arrow-left,
.fa-magnifying-glass-plus,
.fa-magnifying-glass-minus {
    display: none !important;
}


/* ============================================
   SETTINGS MODAL - COMPLETE REDESIGN
   Zoom-like clean design with stacked layout
   ============================================ */

#mySettings {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000 !important;

    /* Clean dark background */
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;

    /* Size */
    width: 90vw !important;
    max-width: 520px !important;
    min-height: auto !important;
    max-height: 85vh !important;
    overflow: hidden !important;

    /* Animation */
    animation: settingsSlideIn 0.2s ease-out !important;
}

@keyframes settingsSlideIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* CRITICAL: Force column layout - remove the sidebar completely */
#mySettings .mySettingsMain,
#mySettings > .mySettingsMain,
.mySettingsMain {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(85vh - 60px) !important;
    width: 100% !important;
}

/* Kill any row/side-by-side layouts */
#mySettings .mySettingsMain > *,
.mySettingsMain > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Header */
#mySettingsHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #0a0a0a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: default !important;
    height: auto !important;
}

#mySettingsHeader::before {
    content: 'Settings' !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

#mySettingsCloseBtn {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

#mySettingsCloseBtn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Tab Navigation - Horizontal Scrolling Pills */
#mySettings .tab,
.mySettingsMain > .tab,
#mySettings > .mySettingsMain > .tab {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 16px 20px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    /* Kill the vertical layout */
    height: auto !important;
    max-height: 60px !important;
    min-height: 52px !important;
}

#mySettings .tab::-webkit-scrollbar {
    display: none !important;
}

#mySettings .tab button,
#mySettings .tab .tablinks,
.tab button,
.tab .tablinks {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    /* Kill any vertical text */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    height: auto !important;
    min-height: 36px !important;
    max-height: 40px !important;
}

#mySettings .tab button:hover,
#mySettings .tab .tablinks:hover,
.tab button:hover,
.tab .tablinks:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

#mySettings .tab button.active,
#mySettings .tab .tablinks.active,
#mySettings .tab button[style*="background"],
#mySettings .tab .tablinks[style*="background"],
.tab button.active,
.tab .tablinks.active {
    background: #3b82f6 !important;
    color: #fff !important;
}

#mySettings .tab button i,
#mySettings .tab .tablinks i,
.tab button i,
.tab .tablinks i {
    font-size: 14px !important;
    width: auto !important;
    margin: 0 !important;
}

#mySettings .tab .tabButtonText,
.tab .tabButtonText {
    display: inline !important;
    margin: 0 !important;
    font-size: 13px !important;
}

/* Hide unnecessary tabs - only show Video and Audio */
#tabRoomBtn,
#tabRecordingBtn,
#tabVideoShareBtn,
#tabShortcutsBtn,
#tabNetworkBtn,
#tabStylingBtn,
#tabLanguagesBtn,
#tabProfileBtn,
#tabParticipantsBtn {
    display: none !important;
}

/* Fix broken icons in settings tabs - ensure FontAwesome icons display correctly */
#mySettings .tab button i,
#mySettings .tab .tablinks i,
.tab button i,
.tab .tablinks i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* Fix specific broken icon classes */
#tabVideoBtn i.fa-video::before,
#tabVideoBtn i.fas.fa-video::before {
    content: "\f03d" !important; /* fa-video */
}

#tabAudioBtn i.fa-microphone::before,
#tabAudioBtn i.fas.fa-microphone::before {
    content: "\f130" !important; /* fa-microphone */
}

#tabRoomBtn i.fa-home::before,
#tabRoomBtn i.fas.fa-home::before {
    content: "\f015" !important; /* fa-home */
}

#tabRecordingBtn i.fa-record-vinyl::before,
#tabRecordingBtn i.fas.fa-record-vinyl::before {
    content: "\f8d9" !important; /* fa-record-vinyl */
}

/* Hide MiroTalk settings button in iframe mode - use React SettingsDialog instead */
#bottomButtons #mySettingsBtn {
    display: none !important;
}

/* NUCLEAR OPTION: Hide the vertical tab sidebar that MiroTalk creates */
/* This targets the sidebar container that holds the vertical tabs */
#mySettings .mySettingsSidebar,
#mySettings .sidebar,
#mySettings .settingsSidebar,
#mySettings .verticalTabs,
#mySettings > div:first-child:not(.mySettingsMain):not(#mySettingsHeader),
.mySettingsMain > div[style*="flex-direction: column"][style*="border-right"],
.mySettingsMain > div[style*="border-right"],
.mySettingsMain > .tab[style*="flex-direction: column"] {
    display: none !important;
}

/* If the tab has vertical layout from inline styles, override it */
.tab[style*="column"],
#mySettings .tab[style*="column"] {
    flex-direction: row !important;
}

/* Hide the grey sidebar background element */
#mySettings > .mySettingsMain > *:first-child:not(.tab):not(.tabActions):not(#mySettingsHeader) {
    display: none !important;
}

/* Tab Content Area */
#mySettings .tabActions {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

#mySettings .tabcontent {
    padding: 20px !important;
    overflow-y: auto !important;
    max-height: calc(80vh - 140px) !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Hide room tab content initially visible elements */
#tabRoom,
#tabRoomSecurity,
#tabEmailInvitation {
    display: none !important;
}

/* Section Titles */
#mySettings .title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

#mySettings .title i {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 14px !important;
    width: 16px !important;
}

#mySettings .title p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Select Dropdowns */
#mySettings select {
    width: 100% !important;
    padding: 12px 14px !important;
    padding-right: 36px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    transition: all 0.15s ease !important;
}

#mySettings select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

#mySettings select option {
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 12px !important;
}

/* Toggle Switches */
#mySettings .toggle,
#mySettings input[type="checkbox"].toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 44px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
}

#mySettings .toggle::after,
#mySettings input[type="checkbox"].toggle::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

#mySettings .toggle:checked,
#mySettings input[type="checkbox"].toggle:checked {
    background: #22c55e !important;
}

#mySettings .toggle:checked::after,
#mySettings input[type="checkbox"].toggle:checked::after {
    transform: translateX(20px) !important;
}

/* Settings Tables */
#mySettings table,
#mySettings .mySettingsTable,
#mySettingsTable {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

#mySettings table tr,
#mySettings .mySettingsTable tr,
#mySettingsTable tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#mySettings table tr:last-child,
#mySettings .mySettingsTable tr:last-child,
#mySettingsTable tr:last-child {
    border-bottom: none !important;
}

#mySettings table td,
#mySettings .mySettingsTable td,
#mySettingsTable td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#mySettings table td:first-child,
#mySettings .mySettingsTable td:first-child,
#mySettingsTable td:first-child {
    flex: 1 !important;
}

#mySettings table td:last-child,
#mySettings .mySettingsTable td:last-child,
#mySettingsTable td:last-child {
    flex-shrink: 0 !important;
    margin-left: 16px !important;
}

/* Buttons inside settings */
#mySettings .tabcontent button:not(.toggle):not(.tablinks),
#mySettings button.orange,
#mySettings button.red {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin: 8px 4px 8px 0 !important;
    width: auto !important;
    text-align: center !important;
}

#mySettings .tabcontent button:not(.toggle):not(.tablinks):hover,
#mySettings button.orange:hover,
#mySettings button.red:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Volume meter */
#mySettings #myAudioMeter,
#mySettings .volume-container {
    display: flex !important;
    gap: 2px !important;
    height: 4px !important;
    margin: 12px 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

#mySettings .volume-bar {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transition: background 0.1s ease !important;
}

#mySettings .volume-bar.active {
    background: #22c55e !important;
}

/* Participants list */
#tabRoomParticipants button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 4px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 13px !important;
}

/* Mobile responsive */
@media (max-width: 500px) {
    #mySettings {
        width: 95vw !important;
        max-height: 85vh !important;
        border-radius: 12px !important;
    }

    #mySettings .tab {
        padding: 10px 12px !important;
    }

    #mySettings .tab button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    #mySettings .tabcontent {
        padding: 16px !important;
        max-height: calc(85vh - 130px) !important;
    }
}


/* ============================================
   CHAT PANEL - PREMIUM REDESIGN
   ============================================ */

.msger-draggable,
#msgerDraggable {
    background: rgba(18, 18, 18, 0.95) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 32px 64px -12px rgba(0, 0, 0, 0.75) !important;
    overflow: hidden !important;
}

.msger-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px 20px !important;
}

.msger-header-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

.msger-header-options button {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-left: 6px !important;
    font-size: 11px !important;
}

.msger-header-options button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

.msger-chat {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 20px !important;
}

.msger-inputarea {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px !important;
}

.msger-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: #ffffff !important;
    resize: none !important;
    font-size: 14px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.msger-input:focus {
    outline: none !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.msger-input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.msger-input-buttons {
    background: transparent !important;
    padding: 10px 0 0 0 !important;
    gap: 6px !important;
    display: flex !important;
}

.msger-input-buttons button {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-size: 12px !important;
}

.msger-input-buttons button:hover {
    background: rgba(59, 130, 246, 0.8) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* Send button special style */
.msger-input-buttons #msgerSendBtn {
    background: rgba(59, 130, 246, 0.9) !important;
    color: #ffffff !important;
}

.msger-input-buttons #msgerSendBtn:hover {
    background: rgba(59, 130, 246, 1) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Chat bubbles */
.msg-bubble,
.msg-caption-bubble {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.right-msg .msg-bubble {
    background: rgba(59, 130, 246, 0.85) !important;
    border-radius: 16px 16px 4px 16px !important;
}

.left-msg .msg-bubble {
    border-radius: 16px 16px 16px 4px !important;
}

/* Message info */
.msg-info {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.msg-info-name {
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Hide unnecessary chat buttons */
#msgerMarkdownBtn,
#msgerGPTBtn,
#msgerShareFileBtn,
#msgerVideoUrlBtn {
    display: none !important;
}


/* ============================================
   INIT USER MODAL (Pre-join screen) - PREMIUM
   ============================================ */

.init-user,
#initUser {
    background: rgba(18, 18, 18, 0.95) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 28px !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 32px 64px -12px rgba(0, 0, 0, 0.75) !important;
    animation: settingsAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.init-user video,
#initUser video {
    border-radius: 16px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.init-video-container {
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.initComands,
.init-user .initComands {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 16px !important;
}

.init-user button,
#initUser button {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.init-user button:hover,
#initUser button:hover {
    background: rgba(59, 130, 246, 0.8) !important;
    border-color: rgba(59, 130, 246, 0.9) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
}

.init-user select,
#initUser select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    width: 100% !important;
    max-width: 300px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.init-user select:focus,
#initUser select:focus {
    outline: none !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}


/* ============================================
   SWEETALERT2 OVERRIDES - PREMIUM
   ============================================ */

.swal2-popup {
    background: rgba(18, 18, 18, 0.98) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 32px 64px -12px rgba(0, 0, 0, 0.75) !important;
    padding: 28px !important;
}

.swal2-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
}

.swal2-html-container {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.swal2-input,
.swal2-select,
.swal2-textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
    outline: none !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.swal2-confirm {
    background: rgba(59, 130, 246, 0.9) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swal2-confirm:hover {
    background: rgba(59, 130, 246, 1) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-1px) !important;
}

.swal2-cancel {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swal2-cancel:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px) !important;
}

.swal2-deny {
    background: rgba(239, 68, 68, 0.9) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.swal2-deny:hover {
    background: rgba(239, 68, 68, 1) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
}

/* SweetAlert icon styles */
.swal2-icon {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.swal2-icon.swal2-success {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
    background-color: #22c55e !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.swal2-icon.swal2-error {
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
    background-color: #ef4444 !important;
}

.swal2-icon.swal2-warning {
    border-color: rgba(234, 179, 8, 0.4) !important;
    color: #eab308 !important;
}

.swal2-icon.swal2-info {
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #3b82f6 !important;
}

.swal2-icon.swal2-question {
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #a855f7 !important;
}


/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    #bottomButtons {
        bottom: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 32px) !important;
        padding: 10px 14px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    #bottomButtons button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Hide screen share on mobile - not commonly used */
    #bottomButtons #screenShareBtn {
        display: none !important;
    }

    /* Hide dividers on mobile for cleaner look */
    #bottomButtons #screenShareBtn + .h-6,
    #bottomButtons #screenShareBtn + .h-8 {
        display: none !important;
    }

    #mySettings {
        width: 95vw !important;
        max-height: 85vh !important;
        border-radius: 12px !important;
    }

    .tab button {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .tabcontent {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    #bottomButtons {
        bottom: env(safe-area-inset-bottom, 12px) !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 8px 12px !important;
        gap: 6px !important;
        border-radius: 14px !important;
    }

    #bottomButtons button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    /* Hide less important buttons on small mobile */
    #bottomButtons #recordStreamBtn,
    #bottomButtons #mySettingsBtn {
        display: none !important;
    }

    /* Make leave button more prominent on mobile */
    #bottomButtons #leaveRoomBtn {
        margin-left: 6px !important;
    }
}

/* Extra small screens (iPhone SE, etc) */
@media (max-width: 375px) {
    #bottomButtons {
        padding: 6px 10px !important;
        gap: 4px !important;
    }

    #bottomButtons button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
}


/* ============================================
   FIX VIDEO TRANSFORM/MIRROR ISSUES
   ============================================ */

/* Ensure video transforms don't conflict */
video {
    transform-origin: center center !important;
}

/* Mirror class - only for local preview */
video.mirror {
    transform: scaleX(-1) !important;
}

/* When zoomed, use scale instead of transform to avoid conflicts */
video[style*="scale"] {
    transform: none !important;
}

/* Prevent transform conflicts on video containers */
.Camera video,
.videoContainer video {
    will-change: transform !important;
}


/* ============================================
   PERFORMANCE & POLISH
   ============================================ */

/* Smooth animations */
* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Focus states */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--africa-blue) !important;
    outline-offset: 2px !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--africa-surface-hover) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--africa-text-muted) !important;
}


/* ============================================
   PARTICIPANT LIST IN SETTINGS
   ============================================ */

#tabParticipants .title {
    margin-bottom: 16px !important;
}

#tabRoomParticipants button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 4px !important;
}


/* ============================================
   RECORDING INDICATOR
   ============================================ */

#recImage {
    display: none !important;
}

#recordingTime {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--africa-red) !important;
}


/* ============================================
   AVATAR STYLING
   ============================================ */

.videoAvatarImage,
[id*="Avatar"] img {
    border-radius: 50% !important;
    border: 2px solid var(--africa-border) !important;
}


/* ============================================
   TOOLTIPS
   ============================================ */

.tippy-box {
    background: var(--africa-surface) !important;
    border: 1px solid var(--africa-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

.tippy-arrow {
    color: var(--africa-surface) !important;
}