/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* --- CSS Custom Properties (Variables) --- */
:root {
    --primary-color: #1877F2;
    --primary-hover: #166FE5;
    --danger-color: #fa3e3e;
    --danger-hover: #d43333;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --error-color: #e74c3c;

    --background-main: #F0ECE3; /* Updated Cream Color */
    --background-container: #FFFFFF;
    --background-input: #F5F6F7;
    --background-ui-light: #F0F2F5;
    --background-ui-medium: #E4E6EB;
    --background-ui-hover: #D8DCE1;

    --text-dark: #333;
    --text-light: #606770;
    --text-white: #FFFFFF;
    --text-primary-contrast: #FFFFFF;

    --border-color-light: #DADDE1;
    --border-color-medium: #ccd0d5;

    --font-family-main: 'Poppins', Arial, sans-serif;
}

/* ========================================= */
/* Z-INDEX HIERARCHY MAP                     */
/* ========================================= */
/* Background Particles : -1
   Video Elements       : 10 - 20
   Control Buttons      : 30
   Header               : 100
   Mobile Chat Area     : 2000
   Modals & Popups      : 2005 - 2999
   Friends Sidebar      : 3000
   Toasts/Notifications : 3000+
   Incoming Call Alert  : 9999
*/

/* --- General Body & Layout Styling --- */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow-x: hidden; /* Stop horizontal scroll globally */
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box; /* Critical for mobile sizing */
}

body {
    font-family: var(--font-family-main);
    background: transparent;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    position: relative;
    height: 100dvh; /* Mobile viewport height fix */
}

/* --- Particle Background Container --- */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--background-main);
}

#particles-js canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Header --- */
header {
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    background: var(--background-container);
    border-bottom: 1px solid var(--border-color-light);
    z-index: 10;
}

header img {
    height: 30px;
    position: absolute;
    left: 2rem;
    opacity: 0.8;
}

header h1 {
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
    color: #1c1e21;
}

/* --- Main Content Area --- */
main {
    flex: 1;
    width: 100%;
    max-width: 100%;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 100%; 
    min-height: 0; 
}

/* --- Animation Wrapper & Selection Area --- */
#lobbyWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    overflow-y: auto;
    height: 100%;
    padding-right: 5px; 
}

#lobbyWrapper.fall-into-singularity {
    transform: scale(0);
}

#selectionArea {
    background: var(--background-container);
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    padding: 2.2rem 3rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 95%;
    max-width: 800px;
    transition: box-shadow 0.3s ease;
    flex-shrink: 0;
}

#selectionArea:focus-within {
    box-shadow: 0 4px 20px rgba(24, 119, 242, 0.2);
}

#settingsBtn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}

#settingsBtn:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ========================================= */
/* SETTINGS AREA & AUDIO FIXES               */
/* ========================================= */

#settingsArea {
    background: var(--background-container);
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    padding: 1rem;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

/* [FIX] 3 Items on ONE Line (Mic | Test | Speaker) */
#settingsArea .selection-container {
    display: grid;
    /* Change from 2 columns to 3 columns so they fit on one line */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 1.5rem;
    
    /* Align bottoms so the bar lines up with inputs */
    align-items: start; 
    
    /* Reduce the bottom space */
    margin-bottom: 1rem; 
}

/* [FIX] Reset the weird ordering that forced the gap */
#settingsArea .selection-container > div {
    order: unset !important;
    grid-column: auto !important;
    width: 100% !important;
    margin: 0 !important;
}

/* [FIX] Make the Audio Bar the same height as the dropdowns */
#settingsArea .audio-level-container {
    width: 100%;
    /* 1. Make it thin again */
    height: 12px !important; 
    border-radius: 6px;
    
    /* 2. Add margin to push it down to the middle of the dropdowns */
    margin-top: 16px !important; 
    
    background-color: #e4e6eb;
    border: 1px solid #ccc;
    overflow: hidden;
    display: block;
}

#audioLevelBar {
    height: 100%;
    width: 0%;
    background-color: var(--success-color);
    border-radius: 6px;
    transition: width 0.1s ease;
}
.selection-bubble {
    flex: 1 1 30%;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#settingsArea .selection-container > div:nth-child(2) {
    order: 3;
    grid-column: 1 / -1; /* Span across both columns */
    width: 80%;          /* Nice and wide */
    margin: 15px auto 0 auto;
}
.selection-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.selection-bubble label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* [FIX] Ensure Dropdowns are Visible */
#usernameInput, #micSelect, #speakerSelect {
    width: 100%;
    font-size: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color-medium);
    outline: none;
    background-color: var(--background-input);
    color: var(--text-dark);
    transition: all 0.2s ease;
    display: block; /* Ensure it takes space */
}

/* [FIX] Force Speaker Selector to Display */
#speakerSelector {
    display: flex !important;
    flex-direction: column;
    margin-bottom: 15px;
    width: 100%;
}

/* [FIX] Audio Level Bar Container (The Grey Track) */
.audio-level-container {
    width: 100%;
    height: 12px;
    background-color: #e4e6eb; /* Light Grey Track */
    border-radius: 6px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
}

/* [FIX] Audio Level Bar Fill (The Green Bar) */
#audioLevelBar {
    height: 100%;
    width: 0%;
    background-color: var(--success-color);
    border-radius: 6px;
    transition: width 0.1s ease;
}

/* ----------------------------------------- */

#selectionArea #usernameInput {
    border-color: var(--primary-color);
}

.skill-selection-area label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

.skill-tags-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.skill-tags-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.skill-tag {
    background-color: rgba(24, 119, 242, 0.05);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    transform-origin: center center;
}

.skill-tag:hover {
    background-color: var(--background-ui-medium);
    border-color: #bec3c9;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(24, 119, 242, 0.3);
}

.skill-tag.selected {
    background-color: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(24, 119, 242, 0.5);
    animation: jump-select 0.3s ease-out;
}

.skill-tag[data-skill="group_jam"].selected {
    background-color: #9b59b6 !important;
    border-color: #9b59b6 !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.5);
}

@keyframes jump-select {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

#connectBtn {
    width: 30%;
    margin-left: 0;
    margin-top: 2rem;
    font-size: 1.1rem;
    padding: 0.8rem 1.8rem;
    background: var(--primary-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-white);
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0);
}

#connectBtn:not(:disabled) {
    animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 4px 15px rgba(24, 119, 242, 0.2); }
    50% { box-shadow: 0 4px 20px rgba(24, 119, 242, 0.4); }
    100% { box-shadow: 0 4px 15px rgba(24, 119, 242, 0.2); }
}

#connectBtn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

#connectBtn:disabled {
    background-color: var(--background-ui-medium);
    color: #BCC0C4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    animation: none;
}

#connectBtn .spinner {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--text-white);
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

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

#statusMessage {
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    min-height: 1.4rem;
    color: var(--text-light);
    flex-shrink: 0;
}

/* --- Loading Overlay Styling --- */
#loadingOverlay {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.loading-logo {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0;
    animation:
        emerge-from-singularity 0.5s 0.4s cubic-bezier(0.5, 1.5, 0.8, 1) forwards,
        spin 3s linear infinite;
    transform-origin: center center;
}

@keyframes emerge-from-singularity {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- In-Call View (Desktop Default) --- */
#call-container {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden; 
    position: relative; 
    background: var(--background-main);
}

/* --- VIDEO AREA CONTAINER --- */
#videoArea {
    flex: 1;           
    min-height: 0;     
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;  
}

/* --- VIDEO GRID (Desktop) --- */
/* ========================================= */
/* UPDATED DESKTOP VIDEO GRID               */
/* ========================================= */

/* Prevent users from pausing video by clicking on it */
video {
    pointer-events: none !important;
}

/* ========================================= */
/* HYBRID VIDEO GRID (Best of both worlds)   */
/* ========================================= */

#video-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 15px;
    padding: 5px 20px;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
    /* Default Fallback (Waiting/1-on-1) uses flexible columns */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* --- LAYOUT 1 (Solo) & LAYOUT 2 (1-on-1) --- */
/* These layouts use standard widescreen aspect ratios */
#video-grid.layout-1 {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr); /* FORCES the row to stop stretching */
    max-width: 1200px;
    margin: 0 auto;
}

#video-grid.layout-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr); /* FORCES the row to stop stretching */
    max-width: 100%;
}

/* Forces 3+ users into rigid quadrants to PREVENT OVERLAP */
/* ========================================= */
/* UNIVERSAL GROUP GRID (2x2 on ALL Screens) */
/* ========================================= */

/* 1. Define the 2x2 Grid Structure */
#video-grid.layout-3 {
    display: grid !important;
    /* Force exactly 2 columns and 2 rows */
    grid-template-columns: 50% 50% !important;
    grid-template-rows: 50% 50% !important;
    
    /* Take up the full container height */
    height: 100% !important;
    width: 100% !important;
    
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;

    background: #c7dcfe !important;
    border-radius: 20px !important; 
    overflow: hidden !important; 
}

/* 2. Round the Outer Corners (The "Big Screen" Look) */
#video-grid.layout-3 .video-wrapper:nth-child(1) { border-top-left-radius: 20px !important; }
#video-grid.layout-3 .video-wrapper:nth-child(2) { border-top-right-radius: 20px !important; }
#video-grid.layout-3 .video-wrapper:nth-child(3) { border-bottom-left-radius: 20px !important; }
#video-grid.layout-3 .video-wrapper:nth-child(4) { border-bottom-right-radius: 20px !important; }

/* 3. Style the Video Wrappers inside the slots */
#video-grid.layout-3 .video-wrapper {
    width: 100% !important;
    height: 100% !important;
    
    aspect-ratio: unset !important;
    max-height: none !important;
    border-radius: 0 !important;
    
    background: #c7dcff !important; 
    border: none !important; 
}

/* 4. Ensure Video fits inside the slot without stretching */
#video-grid.layout-3 .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain !important; 
    background-color: transparent !important;
}

/* 5. Fix "Camera Off" placeholder corners in this mode */
#video-grid.layout-3 .video-off-placeholder {
    border-radius: 0 !important;
}
#video-grid.layout-3 .video-placeholder {
    border-radius: 0 !important;
}


/* ========================================= */
/* UNIFIED GROUP BORDER RADIUS (The "Big Screen" Look) */
/* ========================================= */

/* 1. Top-Left Video: Round Top-Left corner only */
#video-grid.layout-3 .video-wrapper:nth-child(1) {
    border-top-left-radius: 20px !important;
}

/* 2. Top-Right Video: Round Top-Right corner only */
#video-grid.layout-3 .video-wrapper:nth-child(2) {
    border-top-right-radius: 20px !important;
}

/* 3. Bottom-Left Video: Round Bottom-Left corner only */
#video-grid.layout-3 .video-wrapper:nth-child(3) {
    border-bottom-left-radius: 20px !important;
}

/* 4. Bottom-Right Video: Round Bottom-Right corner only */
#video-grid.layout-3 .video-wrapper:nth-child(4) {
    border-bottom-right-radius: 20px !important;
}

/* ========================================= */
/* VIDEO WRAPPER STYLING                     */
/* ========================================= */

.video-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- SCENARIO A: 1-on-1 & Waiting --- */
#video-grid:not(.layout-3) .video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 1. Take up the maximum safe space allowed by the grid cell */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    
    /* 2. Create the professional black video player background */
    background: #c7ddff;
    
    border-radius: 16px;
    border: 4px solid #ffffff; 
    background-clip: padding-box; /* Stops the black background from bleeding */
    
    /* I softened the shadow slightly so the white border pops beautifully */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    overflow: hidden; 
}

#video-grid:not(.layout-3) .video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    
    /* 3. THE FIX: 'contain' guarantees the camera will NEVER zoom or crop */
    object-fit: contain !important; 
    
    background: transparent;
}

/* Protect the placeholder since it has no video to dictate its size */
#video-grid:not(.layout-3) .video-placeholder {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    
    /* ✅ THE FIX: Force it to stretch vertically to match your camera */
    height: 100% !important; 
    
    /* ✅ THE FIX: Remove the forced 16:9 so it can match tall camera rectangles */
    aspect-ratio: auto !important; 
}

/* --- SCENARIO B: Groups (The "Strict" Look) --- */
/* Applies ONLY when 3+ people are connected */
#video-grid.layout-3 .video-wrapper {
    width: 100% !important;
    height: 100% !important;
    
    aspect-ratio: unset !important;
    max-height: none !important;
    border-radius: 0 !important;
    
    background: #c7dcff !important; 
    
    /* CHANGE THIS: Remove the border to kill the black lines */
    border: none !important; 
    
    /* ADD THIS: Ensure no outline creates gaps */
    outline: none !important;
    box-shadow: none !important; 
}

#video-grid.layout-3 .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* 'Cover' zooms to fill. Use 'contain' if you want black bars. */
    background-color: transparent !important;
}

/* 4. Fix the "Camera Off" placeholder corners in this mode */
#video-grid.layout-3 .video-off-placeholder {
    border-radius: 0 !important;
}

/* --- PLACEHOLDER --- */
.video-placeholder {
    /* Match the dark group slot gradient exactly */
    background: #e3f2fd !important;    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important; /* Let the container handle the corners */
    
    /* Remove borders so it blends seamlessly */
    border: 2px solid rgba(24, 119, 242, 0.2) !important; 
    box-shadow: none !important;
}

#video-grid.layout-3 .video-placeholder {
    border-radius: 0 !important;
}

.video-placeholder .placeholder-text {
    color: #1565c0 !important; /* Darker Blue text */
    text-shadow: none !important;
}

@keyframes placeholder-pulse {
    0% { border-color: rgba(24, 119, 242, 0.3); }
    50% { border-color: rgba(24, 119, 242, 0.8); }
    100% { border-color: rgba(24, 119, 242, 0.3); }
}

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

.placeholder-text {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    color: #666 !important;
    margin-top: 15px; /* Spacing from spinner */
}

.placeholder-content .spinner-ring {
    border: 4px solid rgba(24, 119, 242, 0.1) !important;
    border-top: 4px solid var(--primary-color) !important;
}

.video-placeholder .dots .dot {
    color: var(--primary-color) !important;
    font-size: 2rem;
    animation: note-bounce 0.8s infinite alternate;
}
.video-placeholder .dots .dot:nth-child(1) { animation-delay: 0s; }
.video-placeholder .dots .dot:nth-child(2) { animation-delay: 0.2s; }
.video-placeholder .dots .dot:nth-child(3) { animation-delay: 0.4s; }

/* Speaking Highlight */
.video-wrapper.speaking {
    border-color: #38bdf8 !important; 
    /* Enhance the shadow into a glow instead of removing it */
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4) !important; 
}

.name-tag {
    position: absolute;
    bottom: 11px;
    left: 14px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 10;
}

#localVideo {
    transform: scaleX(-1);
    object-fit: cover !important;
}

/* --- UPDATED: Chat Area Styling --- */
#chatArea {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    background: var(--background-container);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    height: 170px; 
    flex-shrink: 0; 
}

#chatHeader {
    background: var(--background-ui-light);
    color: var(--text-dark);
    padding: 10px 15px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--border-color-light);
    font-size: 0.95rem;
}

#chatCloseBtn {
    display: none;
}

/* --- Chat Bubbles --- */
#messages {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: transparent; 
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

.message-wrapper:not(.my-wrapper) {
    align-self: flex-start;
}

.message-wrapper.my-wrapper {
    align-self: flex-end;
    align-items: flex-end; 
}

.message-username {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 2px;
    margin-left: 12px;
    font-weight: 600;
}

.message {
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ========================================= */
/* SMS-STYLE MESSAGE STACKING                */
/* ========================================= */

/* 1. Pull consecutive messages closer (counters the 12px gap) */
.message-wrapper.my-wrapper + .message-wrapper.my-wrapper,
.message-wrapper:not(.my-wrapper) + .message-wrapper:not(.my-wrapper) {
    margin-top: -12px !important; 
}

/* 2. Hide username for stacked messages (so it only shows on the first one) */
.message-wrapper:not(.my-wrapper) + .message-wrapper:not(.my-wrapper) .message-username {
    display: none;
}

/* 3. Adjust Corners for "My" Messages (Right Side) */
/* If I send a message and then another, the second one gets a flat top-right corner */
.message-wrapper.my-wrapper + .message-wrapper.my-wrapper .message {
    border-top-right-radius: 4px !important;
}

/* 4. Adjust Corners for "Partner" Messages (Left Side) */
/* If they send a message and then another, the second one gets a flat top-left corner */
.message-wrapper:not(.my-wrapper) + .message-wrapper:not(.my-wrapper) .message {
    border-top-left-radius: 4px !important;
}

.message:not(.my-message):not(.system-message) {
    background-color: #F0F2F5; 
    color: #050505;
    border-bottom-left-radius: 4px;
}

.message.my-message {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.system-message {
    align-self: center;
    background: transparent;
    box-shadow: none;
    color: var(--text-light);
    font-style: italic;
    font-size: 0.8rem;
    text-align: center;
    margin: 5px 0;
    max-width: 90%;
}

#typingIndicator {
    font-style: italic;
    color: var(--text-light);
    font-size: 0.85rem;
    height: 20px;
    padding: 0 0.75rem 4px;
}

#chatForm {
    display: flex;
    border-top: 1px solid var(--border-color-light);
}

#chatInput {
    flex-grow: 1;
    min-width: 0;       /* Allows the input to shrink so the button fits */
    width: 100%;        /* Ensures it fills available space properly */
    background: transparent;
    border: none;
    outline: none;
    padding: 0.75rem;
    color: var(--text-dark);
    font-size: 1rem;
    font-family: var(--font-family-main);
}

#chatForm button {
    background: var(--primary-color);
    border: none;
    color: var(--text-white);
    font-weight: 600;
    padding: 0 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    min-width: 80px; /* Forces the button to stay at least this wide */
}

#chatForm button:hover {
    background: var(--primary-hover);
}

/* --- Control Buttons (Desktop) --- */
#controlArea {
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    margin-top: auto; 
}

/* Updated Class Name: .control-btn */
.control-btn {
    background-color: var(--background-container);
    border: 1px solid var(--border-color-medium);
    color: var(--text-dark);
    padding: 10px 20px;
    border-radius: 30px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text if both exist */
    min-width: 50px;
    height: 50px;
}

.control-btn:hover {
    background-color: var(--background-ui-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Icon sizing for Desktop */
.control-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
}

.control-btn.toggled {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: var(--text-white) !important;
}

/* Ensure the SVG icon inside turns white to contrast with the red background */
.control-btn.toggled svg {
    stroke: var(--text-white) !important;
}

/* 1. Circle Buttons (Icons only) */
#muteBtn, #cameraBtn, #chatToggleBtn {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%; 
}

/* 2. Report Button (Pill shape to fit text) */
#reportBtn {
    background-color: var(--danger-color);
    color: white;
    width: auto;
    height: 50px;
    padding: 0 25px; /* Add padding for text */
    border-radius: 30px; /* Pill shape */
    display: inline-flex !important;
    flex-direction: row !important; /* Forces them side-by-side */
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1; /* Stops the text's natural line-height from pushing it down */
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

#reportBtn svg {
    display: block;
    margin-top: -2px; /* A slight optical nudge to perfectly match the text baseline */
    flex-shrink: 0; /* Stops the icon from getting squished */
    margin-top: -1px; /* Tiny optical tweak to match the text baseline */
}

.report-btn {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--text-white);
}
.report-btn:hover {
    background-color: var(--danger-hover);
}
.report-btn:disabled {
    background-color: var(--background-ui-medium) !important;
    border-color: var(--background-ui-medium) !important;
    color: #BCC0C4 !important;
    transform: none !important;
}

/* --- User Count --- */
.header-right {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
}

#userCountContainer {
    position: relative;
}

#userCountContainer:not(.in-call) {
    cursor: pointer;
}

#userCountDisplay {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-light);
    padding: 0.5rem 1rem;
    background: var(--background-ui-light);
    border-radius: 20px;
}

#userCountDisplay .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--success-color);
    margin-right: 8px;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

#userCountNum {
    display: inline;
    font-weight: 600;
    margin-right: 4px;
}

.dropdown-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: var(--text-light);
    transition: transform 0.2s ease;
}

#userCountContainer.open .dropdown-arrow {
    transform: rotate(180deg);
}

#userCountContainer.in-call .dropdown-arrow {
    display: none;
}

#liveSummaryDropdown {
    position: absolute;
    top: 120%;
    right: 0;
    background-color: var(--background-container);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    z-index: 100;
    text-align: left;
    width: 180px;
}

.summary-entry {
    font-size: 0.85rem;
    line-height: 1.4;
}

.summary-entry:not(:last-child) {
    margin-bottom: 0.5rem;
}

.summary-entry strong {
    color: var(--text-dark);
    display: block;
}

.summary-entry span {
    color: var(--text-light);
    font-size: 0.8rem;
}

@keyframes pulse-dot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgb(27, 54, 255); }
    70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.overlay-icons {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 12;
}

.mute-icon, .cam-off-icon {
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--text-white);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mute-icon svg, .cam-off-icon svg {
    width: 20px;
    height: 20px;
}

/* --- Connection Status --- */
.connection-indicator {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 12;
    display: none;
}

.connection-indicator svg {
    stroke-width: 3;
    transition: stroke 0.5s ease;
}

.status-good svg { stroke: var(--success-color); }
.status-average svg { stroke: var(--warning-color); }
.status-poor svg { stroke: var(--error-color); }

/* --- UNIVERSAL WAITING SCREEN (Desktop Default) --- */
body.waiting-mode #waitingMessage {
    display: flex !important; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 280px;
    height: auto;
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 30px 40px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 1000;
    pointer-events: none;
    animation: float-pulse 3s ease-in-out infinite;
}

@keyframes float-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -55%) scale(1.02); }
}

body.waiting-mode .waiting-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

body.waiting-mode .dots .dot {
    color: #1877F2 !important; 
    font-size: 2.5rem;
    text-shadow: 0 0 15px rgba(24, 119, 242, 0.6);
    display: inline-block;
    animation: note-bounce 0.8s infinite alternate;
}

body.waiting-mode .dots .dot:nth-child(1) { animation-delay: 0s; }
body.waiting-mode .dots .dot:nth-child(2) { animation-delay: 0.2s; }
body.waiting-mode .dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes note-bounce {
    from { transform: translateY(0); opacity: 0.6; }
    to { transform: translateY(-10px); opacity: 1; }
}

/* --- Footer & Cookies --- */
.selection-footer {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-light);
    flex-shrink: 0;
}

.selection-footer a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.selection-footer a:hover {
    text-decoration: underline;
}

#cookieBanner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--text-dark);
    color: var(--text-white);
    padding: 1rem;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

#cookieBanner p {
    margin: 0;
    color: #f5f5f5;
    font-size: 0.9rem;
}

#cookieBanner a {
    color: #82B1FF;
    text-decoration: underline;
}

#acceptCookiesBtn {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

#acceptCookiesBtn:hover {
    background: var(--primary-hover);
}

.footer-links {
    position: fixed;
    bottom: 1rem;
    right: 1.5rem;
    display: flex;
    gap: 1.5rem; /* Creates perfect spacing between the links */
    z-index: 1001;
}

.footer-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--primary-color);
}

/* --- Modal Styling --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: var(--background-container);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    text-align: center;
}

.modal-content h2 {
    margin-top: 0;
    color: #1c1e21;
}

.modal-content p {
    color: var(--text-light);
    margin-bottom: 1rem;
}

#feedbackComment, #reportReason {
    width: 100%;
    height: 80px;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color-medium);
    background-color: var(--background-input);
    font-family: var(--font-family-main);
    font-size: 1rem;
    resize: vertical;
    box-sizing: border-box;
    margin-top: 1rem;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.modal-btn {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-btn.cancel {
    background-color: var(--background-ui-medium);
    color: var(--text-dark);
}

.modal-btn.cancel:hover {
    background-color: var(--background-ui-hover);
}

.modal-btn.submit {
    background-color: var(--primary-color);
    color: var(--text-white);
}
.modal-btn.submit-report {
    background-color: var(--danger-color);
    color: var(--text-white);
}

.modal-btn.submit:hover {
    background-color: var(--primary-hover);
}
.modal-btn.submit-report:hover {
    background-color: var(--danger-hover);
}

.stars {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.star {
    font-size: 2.5rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s ease;
}

.star.hovered, .star.selected {
    color: #ffc107;
}

/* [FIX] Level Indicator Removed/Replaced by audio-level-container above */
/* If you have .level-indicator elsewhere, this styling handles it */
.level-indicator {
    width: 100%;
    height: 12px;
    background-color: var(--background-ui-medium);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 5px;
}

.level-bar {
    height: 100%;
    width: 0%;
    background-color: var(--success-color);
    border-radius: 4px; 
    transition: width 0.05s linear, background-color 0.2s ease;
}

.level-bar.danger {
    background-color: var(--danger-color) !important;
    box-shadow: 0 0 10px var(--danger-color);
}

#toastContainer {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.toast {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;

    /* ✅ THE FIX: Force long toasts to wrap into two lines on small screens */
    max-width: 90vw;
    text-align: center;
    word-wrap: break-word;
}

.toast.toast-success { background-color: var(--success-color); }
.toast.toast-error { background-color: var(--danger-color); }
.toast.toast-info { background-color: var(--primary-color); }

#waitingMessage .join-general-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 1000;
}

/* ========================================= */
/* NEW FEATURES (METRONOME, SCREEN SHARE, LINKS) */
/* ========================================= */

/* Add a nice hover effect to the new Private Link generator button */
#generateLinkBtn {
    transition: all 0.2s ease;
    background: transparent;
}

#generateLinkBtn:hover {
    background: rgba(24, 119, 242, 0.1) !important;
    transform: translateY(-2px);
}

#copyLinkBtn:hover {
    background: var(--primary-hover) !important;
}

/* Ensure the Metronome input removes default browser arrows */
#bpmInput::-webkit-inner-spin-button, 
#bpmInput::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
#bpmInput {
    -moz-appearance: textfield;
}

/* --- MOBILE SAFETY --- */
/* Hides the Screen Share and Metronome buttons on mobile devices */
@media (max-width: 768px) {
     
    /* Ensure the private link input doesn't break the container width on small screens */
    #privateLinkDisplay {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    #privateLinkInput {
        width: 100% !important;
    }
    #copyLinkBtn {
        width: 100% !important;
    }
}

/* ========================================= */
/* MOBILE OVERRIDES (MAX-WIDTH: 768px)  */
/* ========================================= */
@media (max-width: 768px) {

    /* --- 1. GLOBAL LAYOUT --- */
    html, body { overflow: hidden; width: 100%; height: 100%; }
    main { width: 100%; padding: 0; overflow: hidden; }
    .footer-links { display: none !important; }

    /* --- 2. SETTINGS --- */
    #settingsArea {
        /* Make it a floating card instead of fullscreen */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        width: 90% !important;
        max-width: 350px !important;
        height: auto !important;
        max-height: 85vh !important;
        
        /* Visuals */
        border-radius: 20px !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        padding: 25px 20px !important;
        background: var(--background-container) !important;
        z-index: 5000 !important;
        
        /* Layout Fixes */
        display: flex;
        flex-direction: column;
        gap: 15px;
        overflow-y: auto;
    }

    /* ✅ THE FIX: Disable screen sharing on ALL mobile devices */
    #screenShareBtn.desktop-only {
        display: none !important;
    }
    #metronomeToggleBtn.desktop-only {
        display: none !important; /* Metronome UI is too complex for mobile calls too */
    }

    /* ✅ THE FIX: PDF Mobile Readability */
    #pdfViewerContainer {
        overflow: auto !important; /* Allow X and Y scrolling */
        align-items: flex-start !important; /* Stop flex from aggressively centering and cutting off the left edge */
    }
    
    #pdfCanvas {
        max-width: none !important; /* Override the inline max-width: 100% */
        width: 180% !important; /* Force the canvas wider than the phone screen */
        touch-action: pan-x pan-y; /* Allow smooth native finger panning */
    }

    #settingsArea .selection-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* Space between Mic, Test, and Speaker */
        width: 100% !important;
        margin: 0 !important;
    }

    #settingsArea .selection-bubble {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Align labels to left */
    }

    /* Fix Label Styling */
    #settingsArea label {
        font-size: 0.9rem !important;
        color: #555 !important;
        margin-bottom: 8px !important;
        text-align: left !important;
        width: 100%;
    }

    #settingsArea select {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1rem !important; /* 16px prevents iOS zoom */
        border: 1px solid #ddd !important;
        background-color: #f9f9f9 !important;
        border-radius: 10px !important;
    }

    /* --- MOBILE TOAST FIX --- */
    #toastContainer {
        bottom: auto !important;
        top: 60px !important; /* Drop from the top to avoid keyboard */
    }
    
    .toast {
        transform: translateY(-20px); /* Adjusts the popup animation for top-down */
    }

   /* --- MOBILE GROUP JAM FIX (Strict 2x2 Grid) --- */
    #video-grid.layout-3 {
        display: grid !important; 
        grid-template-columns: 50% 50% !important;
        grid-template-rows: 50% 50% !important;
        
        /* Forces the grid to fit exactly between the header and the controls */
        height: calc(100vh - 150px) !important; 
        height: calc(100dvh - 150px) !important;
        
        overflow: hidden !important; /* Prevents scrolling */
        padding-bottom: 0 !important;
        
        /* ✅ THE FIX: Kills the default 15px padding to move the whole 2x2 block up */
        padding-top: 0 !important; 
        
        /* ✅ THE FIX: Changed from 2px to 0 to remove the gaps between video feeds */
        gap: 0 !important; 

        /* ✅ THE FIX: Force the grid to snap to the top, ignoring the parent's centering */
        align-self: flex-start !important;
        margin-top: 17px !important;
    }
    
    #video-grid.layout-3 .video-wrapper:not(.local-wrapper) {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 0 !important; 
        margin-bottom: 0 !important;

        /* ✅ THE FIX: Remove the thick white borders creating the 'gaps' */
        border: none !important; 
        box-shadow: none !important;
    }

    /* Fix the Audio Bar Container on Mobile */
    #settingsArea .audio-level-container {
        width: 100% !important;
        height: 15px !important; /* Slightly thicker */
        margin-top: 5px !important;
        background-color: #eee !important;
        border: none !important;
    }

    #settingsArea > div:last-child {
        margin-top: 10px !important;
        width: 100% !important;
    }
    
    #closeSettingsBtn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1rem !important;
    }
    #settingsArea .selection-bubble select { padding: 14px; font-size: 1.1rem; }

    /* --- 3. HOME & LOBBY --- */
    #selectionArea { width: 94%; margin: 10px auto; padding: 15px 10px; box-shadow: none; }
    .selection-footer { text-align: center !important; width: 100%; padding: 0 10px 40px 10px; font-size: 0.75rem; }
    header { padding: 0.5rem 1rem; }
    header h1 { font-size: 1.1rem; white-space: nowrap; }
    .header-right { right: 10px; }
    #userCountText, .dropdown-arrow { display: none !important; }
    #userCountDisplay { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(0,0,0,0.05); border-radius: 20px; }
    .skill-selection-area label { margin-bottom: 5px; font-size: 0.9rem; }
    .skill-tags-row { display: flex; flex-wrap: wrap !important; justify-content: center; gap: 6px; width: 100%; margin-bottom: 6px; }
    .skill-tag { font-size: 0.7rem; padding: 8px 4px; min-height: 36px; flex-grow: 1; width: 30%; max-width: 32%; display: flex; align-items: center; justify-content: center; }

    /* --- 4. CALL CONTAINER --- */
    #call-container {
        padding: 0; width: 100%; height: 100%; padding-top: 35px !important;
        
        /* FIX: Change background to transparent so particles show through */
        background-color: transparent !important; 
        
        position: fixed; top: 0; left: 0;
        box-sizing: border-box;
    }
    /* --- 5. VIDEO GRID --- */
    #video-grid {
        display: flex; 
        flex-direction: column; 
        
        /* THE FIX: Pushes the main video up instead of perfectly centering it */
        justify-content: flex-start !important; 
        padding-top: 15px !important; 
        
        width: 100%; height: 100%; margin: 0; 
        background: transparent !important;
    }
    
    /* --- LOCAL CAMERA (Moved Down) --- */
    /* --- LOCAL CAMERA (Mobile Rounded & Filled Fix) --- */
    /* --- LOCAL CAMERA (Mobile Aspect Ratio Fix) --- */
    /* --- LOCAL CAMERA (Mobile Rounded & Filled Fix) --- */
    .video-wrapper.local-wrapper { 
        position: absolute !important; 
        
        /* THE FIX: Removed !important so our JavaScript can move it around */
        top: max(60px, env(safe-area-inset-top) + 10px);
        right: 15px; 
        
        width: 115px !important; 
        height: 205px !important;
        
        border-radius: 16px !important; 
        overflow: hidden !important; 
        -webkit-mask-image: -webkit-radial-gradient(white, black); 
        mask-image: radial-gradient(white, black);
        border: 2px solid rgba(255,255,255,0.3) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; 
        background: #9bb2d6 !important; 
        z-index: 200; /* Ensure it floats above the chat */
        
        /* Smooth animation when snapping to corners */
        transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1), left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Shrink the camera specifically for smaller mobile phones */
    @media (max-width: 480px) {
        .video-wrapper.local-wrapper {
            width: 90px !important; 
            height: 160px !important;
        }
    }

    #localVideo {
        width: 100% !important; 
        height: 100% !important; 
        
        /* Force video to fill the new narrow shape */
        object-fit: cover !important; 
        
        /* Mirror selfie view */
        transform: scaleX(-1);
        
        border: none !important;
        border-radius: 0 !important; 
        background: transparent !important;
    }
    .video-wrapper.local-wrapper.speaking #localVideo {
        /* UPDATE: Remove border from here, apply to wrapper or just color if applied to wrapper */
        /* Actually, for local video, you likely applied the border to the VIDEO element, not the wrapper. */
        /* Let's stick to the pattern: */
        border-color: #38bdf8 !important;
    }
    .video-wrapper.local-wrapper .name-tag { display: none; }

    /* --- PARTNER CAMERA (Mobile Fix) --- */
    .video-wrapper:not(.local-wrapper) {
        position: relative !important;
        
        width: 100% !important; 
        height: 100% !important;
        
        max-width: 100% !important;
        max-height: calc(100dvh - 150px) !important; 
        
        /* THE FIX: Pushes the video up. Top is 0, bottom is 'auto' (absorbs empty space) */
        margin: 0 auto auto auto !important; 
        
        border-radius: 16px !important; 
        overflow: hidden !important; 
        
        /* THE FIX: Premium Soft Midnight Slate background */
        background: #c7dbff !important; 
        
        z-index: 1; 
        border: 4px solid #ffffff !important;
        background-clip: padding-box !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
    
    .video-wrapper:not(.local-wrapper) video { 
        /* THE FIX: 'contain' guarantees the camera will NEVER zoom or crop */
        object-fit: cover !important; 
        
        width: 100% !important; 
        height: 100% !important;
        background: transparent !important;
    }
    
    /* Name Tag */
    .video-wrapper:not(.local-wrapper) .name-tag {
        top: 10px; left: 10px; bottom: auto;
        background: rgba(0,0,0,0.5); padding: 4px 10px;
        border-radius: 15px; font-size: 0.8rem;
    }

    .video-wrapper:not(.local-wrapper).speaking {
        border-color: #38bdf8 !important;
    }

    /* --- 6. WAITING MESSAGE (White Theme) --- */
    body.waiting-mode #waitingMessage {
        position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 80%; max-width: 300px; padding: 2rem;
        
        /* NEW WHITE THEME */
        background: rgba(255, 255, 255, 0.95); 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 1px solid rgba(0,0,0,0.05);
        
        backdrop-filter: blur(8px);
        border-radius: 20px; z-index: 9999;
        display: flex !important; flex-direction: column; align-items: center;
    }
    
    body.waiting-mode .waiting-text { 
        font-size: 1.1rem; 
        color: #333; /* Dark text for white background */
        text-align: center; display: block; 
    }
    body.waiting-mode .dots { display: block; }

    /* --- 7. CONTROLS --- */
    #controlArea {
        position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; 
        width: max-content !important; 
        max-width: 94% !important; 
        
        /* INCREASED bottom padding slightly from 12px to 16px to give the scrollbar breathing room */
        padding: 12px 15px 16px 15px !important; 
        
        background: rgba(0, 0, 0, 0.85); 
        border-radius: 30px !important;
        display: flex !important; 
        flex-wrap: nowrap !important; 
        justify-content: flex-start !important; 
        align-items: center; 
        gap: 15px !important; 
        min-height: 60px; 
        z-index: 2005 !important;
        
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        
        /* THE FIX: Allow Firefox to show a thin scrollbar */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    }
    
    /* THE FIX: A beautiful, minimal iOS-style scrollbar to indicate swiping */
    #controlArea::-webkit-scrollbar {
        display: block;
        height: 4px; /* Ultra-thin horizontal bar */
    }
    
    #controlArea::-webkit-scrollbar-track {
        background: transparent; 
        margin: 0 25px; /* Keeps the track safely inside the rounded corners */
    }
    
    #controlArea::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2); /* Subtle translucent white thumb */
        border-radius: 10px;
    }
    
    #controlArea::-webkit-scrollbar-thumb:active {
        background: rgba(255, 255, 255, 0.6); /* Gets brighter when the user's thumb touches it */
    }


    /* 👇 PASTE THE NEW STUFF RIGHT HERE 👇 */

    /* --- MOBILE CAROUSEL BUTTON ORDER & CLEANUP --- */
    
    /* Pull Disconnect to the absolute front */
    #disconnectBtn {
        order: -2 !important; 
    }
    
    /* Pull Next to be second in line */
    #nextBtn {
        order: -1 !important; 
    }
    
    #screenShareBtn,
    #pianoToggleBtn,
    #recordBtn {
        display: none !important;
    }



    /* --- MOBILE METRONOME & SCREEN SHARE FIX --- */
    #metronomeUI {
        /* Pushes it safely below the phone's notch/camera cutout */
        top: max(80px, env(safe-area-inset-top) + 20px) !important;
        width: max-content !important;
        transform: translateX(-50%) scale(0.9) !important; /* Scales down slightly for phones */
    }
    

    #messages {
        padding-bottom: 80px !important; 
    }
    #localConnectionStatus { display: none; } 

    .control-btn {
        width: 44px !important; height: 44px !important; min-width: 44px !important;
        padding: 0 !important; border-radius: 50% !important; flex-shrink: 0 !important;
        font-size: 0; margin: 0 2px;
        display: flex; align-items: center; justify-content: center; gap: 0 !important;
    }
    #reportBtn { width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important; }
    
    .control-btn svg { width: 22px; height: 22px; margin: 0; display: block; stroke: #333 !important; }
    .control-btn.toggled svg { stroke: white !important; } 

    /* --- MOBILE ACCEPT FRIEND FIX --- */
    /* Allows the Accept button to break the circular rule and show text */
    #addFriendBtn.is-accepting {
        width: auto !important;
        min-width: max-content !important;
        padding: 0 15px !important;
        border-radius: 25px !important;
        font-size: 14px !important; /* Brings the text back! */
    }

    /* Make sure the floating button doesn't hide behind the mobile chat */
    #openFriendsBtn {
        z-index: 3000 !important;
    }

    #disconnectBtn {
        background-color: var(--danger-color) !important; color: white !important; border: none !important; font-weight: 700;
    }
    #nextBtn { width: auto !important; min-width: auto !important; padding: 0 15px !important; border-radius: 25px !important; font-size: 14px !important; height: 40px !important; }
    
    /* --- 8. CHAT --- */
    #chatToggleBtn { position: relative; }
    #chatToggleBtn.has-unread::after {
        content: ''; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
        background-color: #1877F2; border: 2px solid white; border-radius: 50%;
        z-index: 10; animation: pulse-blue 2s infinite;
    }
    @keyframes pulse-blue { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

    /* --- 8. CHAT (Mobile Updates) --- */
    /* --- 8. CHAT (Mobile Updates - Frosted Glass) --- */
    #chatArea {
        position: fixed !important; /* ✅ changed from absolute */
        height: 60vh !important;    /* Use viewport height instead of % */
        bottom: var(--keyboard-offset, 0px) !important;
        left: 0 !important;
        width: 100% !important;
        
        background: rgba(255, 255, 255, 0.85) !important; 
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        border-radius: 20px 20px 0 0;
        z-index: 2000; 
        
        padding-top: 40px; 
        /* Safe Area Inset handles the iPhone home bar */
        padding-bottom: env(safe-area-inset-bottom) !important;
        
        transform: translateY(110%);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    #chatArea.show-mobile-chat { transform: translateY(0); }

    #chatCloseBtn {
        display: block !important; position: absolute; top: 10px; right: 15px;
        background: #f0f0f0; border: none; width: 30px; height: 30px;
        border-radius: 50%; font-size: 20px; line-height: 30px; color: #333;
        z-index: 2001; cursor: pointer;
    }

    /* --- THE FIX: Make the Disconnect Icon White --- */
    #disconnectBtn svg,
    #disconnectBtn svg path {
        fill: #ffffff !important;
        stroke: transparent !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: auto !important;
    }

    /* Ensure the text is hidden but the layout remains centered */
    #disconnectBtn span {
        display: none; /* Hide the text "Disconnect" on mobile */
    }

    /* THE FIX: Expand the button to a pill and show text when in a DM / Text Mode */
    body.text-only-mode #disconnectBtn {
        width: auto !important;
        min-width: max-content !important;
        padding: 0 15px !important;
        border-radius: 25px !important;
        white-space: nowrap !important; /* ✅ THE FIX: Prevent button shape from breaking */
    }
    
    body.text-only-mode #disconnectBtn span {
        display: inline-block !important; /* Brings the text back */
        font-size: 14px !important;
        margin-left: 6px;
        white-space: nowrap !important; /* ✅ THE FIX: Prevent button shape from breaking */
    }

    #chatForm {
        width: 100%; box-sizing: border-box; padding: 10px;
    }
    #chatInput { flex: 1; min-width: 0; }
    #chatForm button { flex-shrink: 0; margin-left: 8px; }

    /* --- Fix Waiting Box Height on Mobile --- */
    /* --- Fix Waiting Box Height (Safe Mobile Version) --- */
    .video-wrapper.video-placeholder {
        aspect-ratio: 3 / 4 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 150px) !important;
        margin: auto !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* ========================================= */
    /* MOBILE: Force Friendly Blue Backgrounds   */
    /* ========================================= */

    /* Target both 1v1 and Group placeholders on Mobile */
    .video-wrapper.video-placeholder,
    .video-wrapper.group-slot {
        /* Override the default mobile black background */
        background: #e3f2fd !important; 
        
        /* Ensure border matches desktop style */
        border: 2px solid rgba(24, 119, 242, 0.2) !important;
    }

    /* Ensure Text is Dark Blue (readable against light bg) */
    .video-wrapper.video-placeholder .placeholder-text,
    .video-wrapper.group-slot span {
        color: #1565c0 !important; 
        text-shadow: none !important;
    }

    /* Ensure Spinners are Blue (not white) */
    .spinner-small, 
    .placeholder-content .spinner-ring {
        border-color: rgba(24, 119, 242, 0.2) !important;
        border-top-color: #1877F2 !important;
    }

    /* ========================================= */
    /* MOBILE GROUP JAM FIXES                    */
    /* ========================================= */

    /* CRITICAL: Force Local Camera to join the grid in Group Mode */
    #video-grid.layout-3 .video-wrapper.local-wrapper {
        position: relative !important; /* Stop floating */
        
        /* THE FIX: Neutralize ALL draggable inline styles */
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 !important;
        
        /* Reset dimensions to fill the grid slot */
        width: 100% !important;
        height: 100% !important;
        
        /* Remove the "Selfie" masking */
        mask-image: none !important;
        -webkit-mask-image: none !important;
        border-radius: 0 !important; /* Let grid handle corners */
        
        /* Reset borders and shadows */
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        z-index: 1 !important; /* Reset z-index so it doesn't overlap controls */
    }

    /* THE FIX: Force ALL remote partner videos to completely fill their square slots */
    #video-grid.layout-3 .video-wrapper video {
        object-fit: cover !important;
    }

    /* Fix the local video element inside the grid to match */
    #video-grid.layout-3 .video-wrapper.local-wrapper #localVideo {
        object-fit: cover !important; /* Replaced 'contain' with 'cover' */
        transform: scaleX(-1); /* Keep it mirrored */
    }

    /* Show the name tag for local user in grid mode so you know which one is you */
    #video-grid.layout-3 .video-wrapper.local-wrapper .name-tag {
        display: block !important;
    }
}

/* ========================================= */
/* TEXT ONLY MODE OVERRIDES                  */
/* ========================================= */

/* 1. PC: Stretch the chat box vertically */
body.text-only-mode #chatArea {
    height: auto !important;       /* Override fixed height */
    flex: 1;                       /* Grow to fill empty space left by hidden video */
    margin-bottom: 1rem;           /* Add space before control buttons */
    max-height: 80vh;              /* Ensure it doesn't overflow screen */
}

/* 2. Mobile: Disable the "Drawer" animation and make it always visible */
@media (max-width: 768px) {
    body.text-only-mode #chatArea {
        position: relative !important; /* Stop floating absolute */
        transform: none !important;    /* Remove slide-down animation */
        width: 100% !important;        /* Full width */
        height: auto !important;       /* Auto height to fill space */
        flex: 1 !important;            /* Grow to fill the screen */
        border-radius: 0 !important;   /* Remove top corners */
        box-shadow: none !important;   /* Flat look */
        padding-top: 0 !important;     /* Remove padding reserved for close button */
        bottom: auto !important;
        left: auto !important;
    }

    /* Hide the 'Open Chat' button since chat is already open */
    body.text-only-mode #chatToggleBtn {
        display: none !important;
    }

    /* Hide the 'Close' X button inside chat */
    body.text-only-mode #chatCloseBtn {
        display: none !important;
    }

    /* Adjust controls to sit naturally at the bottom, not floating */
    body.text-only-mode #controlArea {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding-bottom: 20px;
        margin-top: 0 !important;
    }
}

/* Hide Mic, Camera, and Chat Toggle buttons globally in text-only mode */
body.text-only-mode #muteBtn,
body.text-only-mode #cameraBtn,
body.text-only-mode #chatToggleBtn {
    display: none !important;
}

/* --- Camera Off Visuals --- */
.video-off-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Sleek Dark Gradient */
    background: linear-gradient(135deg, #1a1c20 0%, #0f1012 100%);
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Sit above the video tag */
    border-radius: 16px;
    transition: opacity 0.3s ease;
}

.video-off-content {
    text-align: center;
    color: rgba(255, 255, 255, 0.3); /* Subtle text color */
}

.video-off-icon {
    font-size: 3.5rem;
    margin-bottom: 10px;
    display: inline-block;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
    /* Gentle floating animation */
    animation: float-off-icon 4s ease-in-out infinite;
}

.video-off-text {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@keyframes float-off-icon {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50% { transform: translateY(-8px) scale(1.05); opacity: 0.8; }
}

body.text-only-mode .message-username {
    display: none !important;
}

/* Optional: Adjust spacing since the name is gone */
body.text-only-mode .message-wrapper {
    margin-bottom: 2px; /* Pull bubbles slightly closer if you want */
}

/* ========================================================= */
/* PC GROUP MODE LAYOUT (Chat on Left, Video on Right)       */
/* ========================================================= */

@media (min-width: 769px) {
    
    /* 1. Turn the main container into a Grid */
    body.group-mode #call-container {
        display: grid !important;
        
        /* ✅ THE FIX: minmax(0, 1fr) stops the buttons from blowing out the grid width */
        grid-template-columns: 400px minmax(0, 1fr); 
        
        /* ✅ THE FIX: 'auto' allows the controls to grow to two lines if needed */
        grid-template-rows: 1fr auto; 
        
        grid-template-areas: 
            "chat video"
            "chat controls";
            
        width: 100% !important; 
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        background: var(--background-main);
        gap: 0; 
        align-items: stretch !important;
    }

    #chatToggleBtn {
        display: none !important;
    }

    /* 2. Style the Vertical Chat Bar (Left Side) */
    body.group-mode #chatArea {
        grid-area: chat;
        width: auto !important; 
        margin: 20px 0 20px 20px; 
        
        /* Forces chat to stretch from top to bottom */
        height: auto !important; 
        align-self: stretch !important; 
        max-height: none !important;
        
        border-radius: 20px !important;
        border: 2px solid var(--primary-color) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        background: var(--background-container);
        position: relative !important;
        transform: none !important;
    }

    /* 2. Style the Vertical Chat Bar (Left Side) */
   /* 4. Style the Controls */
    body.group-mode #controlArea {
        grid-area: controls;
        position: relative;
        margin: 0;
        padding: 15px; /* ✅ Added padding for breathing room */
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* ✅ THE FIX: Allows buttons to stack cleanly on small laptops */
        gap: 10px; /* ✅ Keeps buttons cleanly separated */
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        min-height: 80px; /* ✅ Maintains standard height if wrapping isn't needed */
    }
    
    body.group-mode #messages {
        height: 100%;
    }

    /* 3. Style the Video Area (Right Side) */
    body.group-mode #videoArea {
        grid-area: video;
        width: 100%;
        height: 100%;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Ensure the container doesn't force items off screen */
        overflow: hidden; 
    }

    /* 4. Style the Controls */
    body.group-mode #controlArea {
        grid-area: controls;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    
    /* 5. Ensure the 16:9 Grid fits perfectly inside the box */
    body.group-mode #video-grid.layout-3 {
        /* FIX 3: Reset explicit width/height to auto */
        width: auto !important;
        height: auto !important;

        /* Constrain by BOTH width and height so it never overflows */
        max-width: 100% !important;
        max-height: 100% !important;
        
        /* Force 16:9 shape */
        aspect-ratio: 16/9 !important;
        
        /* Center it */
        margin: auto !important;
    }
}

/* ========================================= */
/* IPAD / TABLET FIXES (768px - 1180px)      */
/* ========================================= */

@media screen and (min-width: 768px) and (max-width: 1180px) {
    
    /* 1. Force 1v1 Calls to Stack Vertically (Like Mobile) */
    /* This prevents videos from being squashed side-by-side on portrait iPads */
    #video-grid.layout-2 {
        grid-template-columns: 1fr !important; /* Stack videos on top of each other */
        align-content: center !important;
        gap: 20px !important;
        height: auto !important;
        overflow-y: auto !important; /* Allow scrolling if they don't fit */
    }

    /* 2. Shrink the Container to Fit the Video */
    #video-grid:not(.layout-3) .video-wrapper {
        width: 90% !important;
        height: auto !important;
        max-height: 45vh !important; /* Keeps stacked videos from getting too tall */
        margin: 0 auto !important;
        background: #000 !important; /* Gives empty space a black background */
        border-radius: 20px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
    }

    /* 3. Ensure the video fits perfectly inside the bounds */
    #video-grid:not(.layout-3) .video-wrapper video {
        object-fit: contain !important;
        width: 100%;
        height: 100%;
        border-radius: 20px !important;
        background: transparent !important;
        max-height: 45vh !important;
    }   
}

/* ========================================= */
/* GROUP SLOT PLACEHOLDER (Waiting...)       */
/* ========================================= */

/* ========================================= */
/* GROUP SLOT PLACEHOLDER (Friendly Style)   */
/* ========================================= */

.video-wrapper.group-slot {
    /* Same Friendly Blue Gradient */
    background: #e3f2fd !important;    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Remove old black styles */
    border: 1px solid rgba(24, 119, 242, 0.1) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Update the "Waiting..." text in group slots */
.video-wrapper.group-slot span {
    color: #1976d2; /* Medium Blue */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 15px;
}

/* Update the small spinner color */
.spinner-small {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ========================================= */
/* WiFi CONNECTION INDICATOR (SVG Bars)      */
/* ========================================= */

#localConnectionStatus {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 50;
    width: 20px;
    height: 20px;
    display: none; /* Hidden until JS activates it */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    
    /* Reset any inherited borders/backgrounds */
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#localConnectionStatus svg {
    width: 100%;
    height: 100%;
    display: block; /* Removes tiny layout gaps */
}

/* --- Default State (All Bars Gray) --- */
#localConnectionStatus path {
    fill: rgba(255, 255, 255, 0.3); /* Translucent White */
    transition: fill 0.3s ease;
}

/* --- Status Colors --- */

/* 1. POOR (Red): Only the Dot lights up */
#localConnectionStatus.status-poor .wifi-1 {
    fill: #e74c3c; 
}

/* 2. AVERAGE (Orange): Dot + Middle Bar light up */
#localConnectionStatus.status-average .wifi-1,
#localConnectionStatus.status-average .wifi-2 {
    fill: #f39c12; 
}

/* 3. GOOD (Green): All 3 parts light up */
#localConnectionStatus.status-good .wifi-1,
#localConnectionStatus.status-good .wifi-2,
#localConnectionStatus.status-good .wifi-3 {
    fill: #2ecc71; 
}

/* --- Mobile Adjustment --- */
@media (max-width: 768px) {
    #localConnectionStatus {
        width: 18px;
        height: 18px;
        top: 8px;
        left: 8px;
    }
}

/* --- Age Gate Popup Styling --- */
.entry-modal {
    max-width: 400px;
    text-align: left;
    
    /* CHANGED: Full Blue Ring */
    border: 2px solid var(--primary-color); 
    border-radius: 16px; /* Rounded corners for the ring */
    
    background-color: var(--background-container);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); /* Add shadow for depth */
    
    animation: popIn 0.3s ease-out;
    padding: 2rem; /* Ensure inner spacing */
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.warning-text {
    color: var(--danger-color);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-align: center;
    background: #fff5f5;
    padding: 10px;
    border-radius: 6px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.custom-checkbox {
    display: flex;
    align-items: flex-start; /* Aligns checkbox with top line of text */
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-dark);
    user-select: none;
    gap: 12px;
}

.custom-checkbox input { display: none; }

.checkmark {
    width: 22px;
    height: 22px;
    background-color: var(--background-ui-light);
    border: 2px solid var(--border-color-medium);
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark::after { display: block; }

#enterSiteBtn:disabled {
    background-color: var(--background-ui-medium);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Center the Title Text inside the popup */
.entry-modal h2 {
    text-align: center;
    width: 100%;
}

/* --- AUTH & FRIENDS STYLES --- */
.auth-container {
    background: #f0f2f5;
    padding: 15px;
    border-radius: 12px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
.auth-tabs { display: flex; gap: 10px; margin-bottom: 10px; }
.auth-tabs button { flex: 1; padding: 6px; border: none; background: #ddd; cursor: pointer; border-radius: 6px; font-weight:600; color:#555; }
.auth-tabs button.active { background: var(--primary-color); color: white; }
.auth-container input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; }

/* Sidebar */
.friends-sidebar {
    position: fixed; top: 0; right: -320px;
    width: 300px; height: 100%;
    background: white;
    box-shadow: -2px 0 15px rgba(0,0,0,0.1);
    z-index: 3000; padding: 20px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
.friends-sidebar.open { right: 0; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.sidebar-section h4 { font-size: 0.8rem; color: #888; text-transform: uppercase; margin-bottom: 10px; font-weight:700; }

/* Friend Items */
.friend-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f9f9f9; border-radius: 8px; margin-bottom: 8px; }
.friend-status { width: 10px; height: 10px; border-radius: 50%; background: #ccc; margin-right: 10px; display:inline-block; }
.friend-status.online { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
.friend-req-btn { background: var(--primary-color); color: white; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.call-friend-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--success-color); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Floating Button */
#openFriendsBtn {
    position: fixed; bottom: 20px; right: 20px;
    width: 56px; height: 56px;
    background: var(--primary-color); color: white;
    border: none; border-radius: 50%;
    font-size: 24px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 2900; transition: transform 0.2s;
}
#openFriendsBtn:hover { transform: scale(1.1); }

/* --- NEW FRIEND UI FIXES --- */
.call-friend-btn.call-btn {
    background: var(--primary-color) !important;
}

.call-friend-btn.remove-btn {
    background: var(--danger-color) !important;
    font-size: 14px;
}

/* Ensure the inline accept button transitions smoothly */
#addFriendBtn {
    transition: all 0.3s ease !important;
}

/* --- LOBBY SPLIT LAYOUT --- */
.lobby-layout-wrapper {
    position: relative; 
    display: flex;
    justify-content: center; /* GUARANTEES PERFECT CENTERING */
    align-items: flex-start;
    width: 100%; 
    max-width: 100%; 
    margin: 8vh auto 0 auto; 
}

#selectionArea {
    width: 100%;
    max-width: 800px;
    margin: 0;
    z-index: 2; 
    transition: max-width 0.3s ease; /* Smoothly shrinks on smaller screens */
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#authSidePanel {
    position: absolute;
    right: 15px; 
    top: 0;
    width: 320px;
    background: var(--background-container);
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    min-height: 240px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centers the login inputs vertically */
}

#authSidePanel .auth-container {
    background: transparent; 
    padding: 0;
    width: 100%;
}

/* --- LAPTOP FIX (Keeps them side-by-side, shrinks center box to prevent overlap) --- */
@media (max-width: 1550px) {
    #selectionArea, #settingsArea {
        max-width: 720px; /* Widens the selection box significantly and matches the settings box */
    }
}

/* Extra safety for smaller 13-inch laptops */
@media (max-width: 1400px) {
    #selectionArea, #settingsArea {
        max-width: 640px; /* Keeps both boxes matching perfectly in width */
    }
}

/* --- THE REAL STACKING BREAKPOINT (For iPads, Tablets, and Mobile) --- */
@media (max-width: 1250px) {
    .lobby-layout-wrapper {
        flex-direction: column;
        align-items: center;
        margin-top: 4vh; 
    }

    #selectionArea, #settingsArea {
        max-width: 800px; /* Can expand to full desktop size since the side box drops below */
    }

    #authSidePanel {
        position: relative; /* Stops floating */
        right: auto;
        top: auto;
        width: 100%;
        max-width: 400px;
        margin-top: 20px; 
    }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .lobby-layout-wrapper {
        flex-direction: column; 
        align-items: center;
    }
    
    #selectionArea, #authSidePanel {
        /* THE FIX: Pulled in slightly from 100% to 96% to create a neat 2-3px gap on the edges */
        width: 98%;
        max-width: 98%;
        
        /* 'auto' on the left and right ensures it stays perfectly centered */
        margin: 0 auto 15px auto;
    }
}

/* ========================================= */
/* TABLET LANDSCAPE FIXES (SIDEBAR LAYOUT)   */
/* ========================================= */
@media (min-width: 769px) and (max-width: 1250px) and (orientation: landscape) {
    
    /* 1. Turn the entire screen into a Grid */
    #call-container[style*="display: flex"] {
        display: grid !important;
        
        /* ✅ THE FIX for Tablets */
        grid-template-columns: 340px minmax(0, 1fr) !important; 
        grid-template-rows: 1fr auto !important;     
        
        grid-template-areas: 
            "chat video"
            "chat controls" !important;
            
        width: 100% !important; 
        height: 100vh !important;
        height: 100dvh !important; 
        overflow: hidden !important;
        gap: 0 !important; 
    }

    /* 2. Lock the Chat Box to the Left Sidebar */
    #chatArea {
        grid-area: chat !important;
        display: flex !important;
        position: relative !important;
        
        /* Reset mobile transform/floating */
        bottom: auto !important;
        transform: none !important; 
        
        width: auto !important; 
        height: calc(100% - 40px) !important; 
        margin: 20px 0 20px 20px !important; /* Top, Right, Bottom, Left */
        
        border-radius: 20px !important;
        border: 2px solid var(--primary-color) !important;
        background: var(--background-container) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    }

    /* ADD THIS to move the local camera up into the video area */
    .video-wrapper.local-wrapper {
        top: 30px !important;
        right: 30px !important;
    }

    /* 3. Put the Video Area on the Right */
    #videoArea {
        grid-area: video !important;
        padding: 20px 20px 0 20px !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 4. Put the Controls neatly under the Videos */
    #controlArea {
        grid-area: controls !important;
        position: relative !important;
        bottom: auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        
        /* ✅ THE FIX for Tablets */
        padding: 15px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        min-height: 80px !important;
    }

    /* 5. Stack the Cameras Vertically inside the Video Area */
    #video-grid:not(.layout-3) {
        display: flex !important;
        flex-direction: column !important; /* Stack top and bottom */
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        gap: 15px !important;
    }

    /* 6. Style the Camera Wrappers to share the space equally */
    #video-grid:not(.layout-3) .video-wrapper {
        flex: 1 1 50% !important; /* Both get 50% of the height */
        width: 100% !important;
        height: 100% !important; 
        
        /* Remove strict aspect ratios so they fill the box perfectly */
        aspect-ratio: auto !important; 
        max-height: 100% !important; 
        max-width: 600px !important; /* Stop them from stretching infinitely wide */
        
        background: #c7dcff !important; 
        margin: 0 auto !important;
        border: 4px solid #ffffff !important;
    }
    
    #video-grid:not(.layout-3) .video-wrapper video {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}

.unread-badge {
    background: var(--danger-color);
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: bold;
    animation: pulse-glow 2s infinite ease-in-out;
}

/* ========================================= */
/* COLLABORATIVE CHORD BOARD                 */
/* ========================================= */
.chord-board {
    position: absolute;
    right: -400px; /* Hidden off-screen by default */
    top: 20px;
    width: 350px;
    height: calc(100% - 120px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    box-shadow: -5px 5px 20px rgba(0,0,0,0.15);
    z-index: 1500;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chord-board.open {
    right: 20px; /* Slides in! */
}

.chord-board-header {
    background: var(--primary-color);
    color: white;
    padding: 12px 15px;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

#chordBoardInput {
    flex: 1;
    width: 100%;
    border: none;
    padding: 15px;
    font-family: 'Courier New', Courier, monospace; /* Monospace is CRITICAL for guitar tabs! */
    font-size: 0.9rem;
    resize: none;
    outline: none;
    background: transparent;
    color: #333;

    /* ✅ THE FIX: Stop native word wrapping so strings don't jumble */
    white-space: pre !important; 
    overflow-x: auto !important; 
    word-wrap: normal !important;
}

.chord-board-handle {
    width: 40px;
    height: 5px;
    background: #ccc;
    border-radius: 10px;
    margin: 8px auto 0 auto;
    display: none; /* Hidden on Desktop */
}
@media (max-width: 768px) {
    .chord-board-handle {
        display: block;
    }
    .chord-board-header {
        padding-top: 5px; /* Adjust padding to accommodate the handle */
    }
}

/* ✅ NEW: Drag Handle for PC Resizing */
.board-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize; /* Shows the left/right arrow cursor */
    background: transparent;
    z-index: 10;
}
.board-resize-handle:hover {
    background: rgba(24, 119, 242, 0.3); /* Subtle blue glow when hovering */
}

.catalogue-select {
    background: white;
    color: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 3px 5px; /* Reduced padding */
    font-size: 0.8rem; /* Slightly smaller text */
    font-weight: bold;
    outline: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transform: translateZ(0); 
    
    /* ✅ THE FIX: Force the dropdown to stay thin */
    max-width: 125px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

/* Mobile Layout for the Board */
@media (max-width: 768px) {
    .chord-board {
        right: 0;
        bottom: -100%;
        top: auto;
        width: 100%;
        height: 60vh;
        border-radius: 20px 20px 0 0;
        transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .chord-board.open {
        right: 0;
        bottom: 0;
    }
}

/* ========================================= */
/* MODERN PILL BUTTONS (Logout / Admit)      */
/* ========================================= */

.modern-pill-btn {
    padding: 6px 18px;
    border-radius: 20px; /* Gives it the sleek pill shape */
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle resting shadow */
}

/* Hover Animation: Lift up and glow slightly */
.modern-pill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Specific Button Colors */
.logout-btn {
    background-color: var(--background-ui-medium);
    color: var(--text-dark);
}

.logout-btn:hover {
    background-color: #ff4757; /* Changes to a soft warning red when hovered */
    color: white;
}

.admit-btn {
    background-color: var(--success-color);
    color: white;
}

.deny-btn {
    background-color: var(--danger-color);
    color: white;
}

/* ========================================= */
/* PHASE 1: MODERN UI UPGRADES               */
/* ========================================= */

/* 1. Frosted Glass Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;

    will-change: transform, backdrop-filter;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 2. Radar Pulse Animation */
.pulse-ring {
    width: 60px;
    height: 60px;
    margin: 20px auto;
    background-color: var(--primary-color);
    border-radius: 50%;
    animation: pulseFade 1.5s infinite ease-out;
}

@keyframes pulseFade {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(24, 119, 242, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 20px rgba(24, 119, 242, 0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(24, 119, 242, 0); }
}

/* 3. Active Speaker Glow */
.video-box {
    border: 3px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.video-box.active-speaker {
    border-color: var(--success-color);
    box-shadow: 0 0 15px var(--success-color);
}

/* ========================================= */
/* ✅ NEW: VIRTUAL PIANO STYLES              */
/* ========================================= */

.piano-key {
    width: 40px; 
    height: 150px; 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 0 0 5px 5px;
    cursor: pointer; 
    transition: background 0.1s;
    box-sizing: border-box;
    z-index: 1;
    position: relative; 
}
.piano-key:active, .piano-key.active { background: #3498db; }

.piano-key.black {
    width: 25px; 
    height: 90px; 
    background: #111;
    position: relative;  /* ✅ Changed from absolute! */
    margin-left: -12.5px;  /* ✅ Pulls it left over the white key */
    margin-right: -12.5px; /* ✅ Pulls the next white key left under this black key */
    z-index: 2; /* Forces it to sit on top */
    border-radius: 0 0 3px 3px; 
    border: 1px solid #000;
}
.piano-key.black:active, .piano-key.black.active { background: #2980b9; }

#pianoContainer {
    position: absolute; 
    bottom: 85px; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 2000;
    max-width: 95vw; 
}

#keyboard {
    display: flex;
    position: relative;
    justify-content: center;
    background: #222;
    padding: 10px 10px 15px 10px; 
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow-x: auto; 
    overflow-y: hidden;
}

/* Make the scrollbar sleek */
#keyboard::-webkit-scrollbar { height: 8px; }
#keyboard::-webkit-scrollbar-track { background: #111; border-radius: 4px; }
#keyboard::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }


/* ✅ NEW: Piano Key Label Styling */
.key-label {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    color: #888; /* Subtle grey so it isn't distracting */
    pointer-events: none; /* Prevents the text from blocking your mouse clicks */
    user-select: none; /* Stops the text from being accidentally highlighted */
    font-family: 'Poppins', Arial, sans-serif;
}

/* Make the text turn white when the key is pressed and turns blue! */
.piano-key:active .key-label, 
.piano-key.active .key-label {
    color: white !important;
}

/* --- Music Mode Button Fix --- */
#studioModeBtn {
    width: auto !important; 
    min-width: max-content !important;
    padding: 0 20px !important; 
    border-radius: 30px !important; 
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.9rem !important; /* Ensures text is visible */
}

/* Mobile override so the text doesn't disappear */
@media (max-width: 768px) {
    #studioModeBtn {
        height: 44px !important;
        padding: 0 15px !important;
        font-size: 0.8rem !important; /* Overrides the mobile font-size: 0 rule */
    }
}

/* ========================================= */
/* PC HOVER TOOLTIPS FOR BUTTONS             */
/* ========================================= */
@media (min-width: 769px) {
    button[data-tooltip] {
        position: relative;
        overflow: visible !important; /* Ensures the tooltip can break outside the button */
    }

    /* The Text Box */
    button[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 12px); /* Floats safely above the button */
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        
        /* Premium Frosted Glass Look */
        background: rgba(15, 16, 18, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
        
        color: #fff;
        padding: 8px 14px;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: 8px;
        white-space: nowrap;
        pointer-events: none; /* Stops the mouse from glitching it */
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 9999;
    }

    /* The Little Pointing Triangle */
    button[data-tooltip]::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        border-width: 6px;
        border-style: solid;
        border-color: rgba(15, 16, 18, 0.95) transparent transparent transparent;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 9999;
    }

    /* Trigger the Animation on Hover */
    button[data-tooltip]:hover::after,
    button[data-tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}