#setup-container 
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-body);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity 0.5s ease-out;
}

    #setup-container.hidden 
    {
        opacity: 0;
        pointer-events: none;
    }

.setup-box 
{
    background-color: var(--bg-chat);
    padding: 2rem 3rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 450px;
    text-align: center;
}

.setup-step h2 
{
    color: var(--text-sidebar-heading);
    margin-bottom: 0.5rem;
}

.setup-step p 
{
    color: var(--text-sidebar-section);
    margin-bottom: 1.5rem;
}

.setup-step input,
.setup-step select 
{
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-body);
    font-size: 1rem;
}

.setup-step button 
{
    width: 100%;
    padding: 0.8rem 1.5rem;
    border: none;
    background-color: var(--button-bg);
    color: var(--button-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

    .setup-step button:hover 
    {
        background-color: var(--button-hover-bg);
    }

.button-row 
{
    display: flex;
    gap: 0.75rem;
}

    .button-row button 
    {
        flex: 1;
    }

.setup-step button.secondary 
{
    background: transparent;
    color: var(--text-body);
    border: 1px solid var(--border-color);
}

    .setup-step button.secondary:hover 
    {
        background-color: var(--button-hover-bg);
        color: var(--button-text);
    }

/* --- form popup styles (used in sms-popup and admin-signin rules for example) --- */
.form-popup .input-control-container
{
    text-align: left;
    margin-bottom: 1rem;
}

    .form-popup .input-control-container:last-child
    {
        /* seserve space for the validator message */
        margin-bottom: 1.2em;
    }

.form-popup label
{
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-sidebar-section);
    margin-bottom: 0.25rem;
}

.form-popup input[type="text"],
.form-popup input[type="tel"],
.form-popup input[type="password"]
{
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-body);
    font-size: 1rem;
}

.form-popup input:focus
{
    outline: none;
    border-color: var(--border-focus);
}

#meeting-ended-popup
{
    background-color: var(--bg-chat);
    padding: 2rem 3rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 450px;
    text-align: center;
}

    #meeting-ended-popup .popup-header
    {
        background: none;
        border: none;
        padding: 0 0 1rem 0;
        position: relative;
    }

        #meeting-ended-popup .popup-header h3
        {
            color: var(--text-sidebar-heading);
        }

    #meeting-ended-popup .popup-body
    {
        padding: 1rem 0 0 0; /* adjust padding for simple text body */
        text-align: center;
    }

#meeting-ended-close-btn
{
    width: 100%;
    padding: 0.8rem 1.5rem;
    border: none;
    background-color: var(--button-bg);
    color: var(--button-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

    #meeting-ended-close-btn:hover
    {
        background-color: var(--button-hover-bg);
    }

.popup-validator-message
{
    font-size: 0.85rem;
    color: #ff9800; /* orange for visibility */
    margin-top: 0.5rem;
    text-align: left;
    height: 1.2em; /* reserve space to prevent layout shift */
}

.centered-popup
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    /* optional: add a max-height to prevent overflow on very small screens */
    max-height: 90vh;
}

/* basic reset & color variables */
:root
{
    /* light mode (default) */
    --bg-body: #f0f4f8;
    --bg-sidebar: #e9edf1;
    --bg-chat: #ffffff;
    --bg-chat-header: #4a90e2;
    --bg-chat-form: #f8f8f8;
    --bg-call-controls: #3a80d2;
    --bg-msg-user: #4a90e2;
    --bg-msg-remote: #e5e5ea;
    --bg-glass: rgba(255, 255, 255, 0.6);
    --text-body: #333;
    --text-sidebar: #444;
    --text-sidebar-heading: #333;
    --text-sidebar-section: #555;
    --text-chat-header: white;
    --text-msg-local: white;
    --text-msg-remote: #333;
    --border-color: #ccc;
    --border-glass: rgba(255, 255, 255, 0.6);
    --border-sidebar: #d1d9e0;
    --border-focus: #4a90e2;
    --button-bg: #4a90e2;
    --button-hover-bg: #357abd;
    --button-text: white;
    --speaker-highlight: #4a90e2;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --input-bg: white;
    --select-bg: white;
    --text-msg-status: #666;
    --connect-button-bg-disabled: #aaa;
    --button-enabled-secure-bg-start: #FF4136; /* bright red */
    --button-enabled-secure-bg-end: #A52A2A; /* brown (muted/dark red) */
    --button-enabled-secure-text: white;
    --button-enabled-secure-border: #802020; /* darker red/brown border */
    --button-disabled-secure-bg: #5A5; /* darkseagreen, a muted green */
    --button-disabled-secure-text: #030; /* white text on green */
    --button-disabled-secure-border: #7fa97f; /* slightly darker green border */
    --hr-subdued-color: #888; /* example: a light gray, closer to light bg */
    --text-color-devices: #FFF;
}

body.dark-mode
{
    /* dark mode overrides */
    --bg-body: #1a1d21;
    --bg-sidebar: #252a30;
    --bg-chat: #1f2327;
    --bg-chat-header: #2a5a8a;
    --bg-chat-form: #2c3138;
    --bg-call-controls: #1a4a7a;
    --bg-msg-user: #2a5a8a;
    --bg-msg-remote: #3a3f44;
    --bg-glass: rgba(25, 28, 33, 0.7);
    --text-body: #e0e0e0;
    --text-sidebar: #bdbdbd;
    --text-sidebar-heading: #e0e0e0;
    --text-sidebar-section: #cccccc;
    --text-chat-header: white;
    --text-msg-local: white;
    --text-msg-remote: #e0e0e0;
    --border-color: #55595f;
    --border-glass: rgba(255, 255, 255, 0.5);
    --border-sidebar: #40454a;
    --border-focus: #5a9ae2;
    --button-bg: #2a5a8a;
    --button-hover-bg: #3a7ac1;
    --button-text: white;
    --speaker-highlight: #4a90e2;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --input-bg: #3a3f44;
    --select-bg: #3a3f44;
    --text-msg-status: #aaa;
    --connect-button-bg-disabled: #555;
    --button-enabled-secure-bg-start: #FF4136; /* bright red */
    --button-enabled-secure-bg-end: #B22222; /* firebrick */
    --button-enabled-secure-text: white;
    --button-enabled-secure-border: #8B0000;
    --button-disabled-secure-bg: #5a8b5a; /* darker muted green for dark mode */
    --button-disabled-secure-text: #dddddd;
    --button-disabled-secure-border: #4a7a4a;
    --hr-subdued-color: #555; /* example: a dark gray, closer to dark bg */
    --text-color-devices: #BBB;
}

 /* --- animation definitions --- */

 /* background fade: hold bright red 0-33%, fade to dark 33-100% */
 @keyframes secureButtonBackgroundFade
 {
    0%, 33.33% { background-color: var(--button-enabled-secure-bg-start); }
    100%       { background-color: var(--button-enabled-secure-bg-end); }
 }

 /* text fade: hold initial text (opacity 1) 0-33%, fade out 33-100% */
 @keyframes secureButtonTextFadeOut
 {
    0%, 33.33% { opacity: 1; }
    100%       { opacity: 0; }
 }


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

html, body /* ensure html takes full height */
{
    height: 100%;
}

body
{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: grid;
    grid-template-columns: 1fr; /* single column since sidebar will be an overlay */
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden; /*auto;*/
    background-color: var(--bg-body); /* use variable */
    color: var(--text-body); /* use variable */
    transition: background-color 0.3s ease, color 0.3s ease; /* smooth transition */
}

/* sidebar - positioned as overlay with absolute */
/* --- sidebar sliding logic --- */
.sidebar
{
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    z-index: 1000;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-sidebar);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%); /* hidden by default */
    transition: transform 0.3s ease-in-out;
}
    /* visible state */
    .sidebar.open
    {
        transform: translateX(0); /* slide into view */
    }

#sidebar-close-btn
{
    display: block;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-sidebar);
    background: none;
    border: none;
    cursor: pointer;
}

.sidebar h2
{
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-sidebar-heading); /* use variable */
    font-size: 1.3rem;
    transition: color 0.3s ease;
}

/* style the horizontal rule separator */
.sidebar hr
{
    width: 100%; /* span the sidebar */
    border: none; /* remove default 3d border */
    border-top: 1px solid var(--hr-subdued-color); /* use theme border color */
    margin-top: 0.5rem; /* adjust spacing relative to button */
    margin-bottom: 0.5rem; /* space before controls below */
}

/* sidebar structure styles */
.sidebar-header 
{
    flex-shrink: 0; /* prevent header from shrinking */
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--border-sidebar);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .sidebar-header h2 
    {
        margin: 0;
        font-size: 1.3rem;
        color: var(--text-sidebar-heading);
    }

.sidebar-body 
{
    flex-grow: 1; /* allow body to fill remaining space */
    overflow-y: auto; /* make ONLY the body scrollable */
    min-height: 0; /* constrains the element within the flex container */
    padding: 0 1rem;
}

.sidebar[hidden], .chat-area-wrapper[hidden] 
{
    display: none;
}

/* ensure [hidden] attribute always hides elements, overriding other display properties */
[hidden]
{
    display: none !important;
}

/* --- styles for the collapsible Go Secure button area in sidebar --- */

#secure-area-container,
#call-area-container 
{
    padding-bottom: 0rem;
}

.secure-area-toggle,
.call-area-toggle 
{
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
    user-select: none;
}

    .secure-area-toggle:focus,
    .call-area-toggle:focus
    {
        /* outline: 2px solid var(--accent-focus-shadow, rgba(0, 123, 255, 0.5));  */
        /* outline-offset: 2px;  */
        color: var(--accent-color);
    }

/* style for the lock image in sidebar toggle */
    .toggle-icon
    {
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

.toggle-indicator
{
    display: inline-block;
    margin-right: 0.5rem;
    font-weight: bold;
    transition: transform 0.3s ease-out;
    transform-origin: center;
}

.toggle-text
{
    font-size: 0.9em;
    color: var(--text-color-muted, #666);
    transition: color 0.2s ease;
    flex-grow: 1;
}

.secure-area-toggle:hover .toggle-text,
.call-area-toggle:hover .toggle-text 
{
    color: var(--accent-color);
}

.secure-area-content,
.call-area-content 
{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* styles applied when the area is expanded */
.secure-area-toggle.expanded .toggle-indicator,
.call-area-toggle.expanded .toggle-indicator 
{
    transform: rotate(90deg); /* rotate the '>' ONLY */
}

.secure-area-content.expanded
{
    max-height: 15em;
    padding-top: 0.25rem;
}

.call-area-content.expanded 
{
    max-height: 30em; /* give more space for video */
    padding-top: 0.25rem;
}

#call-area-content 
{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-label-padding 
{
    padding-top: 0.5rem;
}

.radio-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.radio-inline 
{
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    font-size: .95rem;
}

/* header animation constants */
:root
{
    --status-height: 28px; /* matching the visual height of the status row */
    --title-status-gap: 4px; /* gap between h1 and status row */
}

/* --- header (single layout for all platforms) --- */
#app-header
{
    position: fixed; /* keep header above scroll on ios safari */
    top: calc(12px + env(safe-area-inset-top));
    left: 24px;
    right: 24px;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--text-chat-header);
    background-color: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* safari support */
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    #app-header h1
    {
        font-size: 1.1rem;
        line-height: 1; /* more compact */
        margin: 0;
        transition: transform .25s ease; /* animate position when call is toggled */
        white-space: nowrap;
    }

    /* when a call is active, title sits “up” and status fades in */
    #app-header.call-active h1
    {
        transform: translateY(0); /* up position (baseline) */
    }

    #app-header.call-active .status-cell-wrapper
    {
        opacity: 1;
        visibility: visible;
    }

    /* when no call: cut status away instantly (no fade), title animates down to center */
    #app-header.no-call h1
    {
        /* downshift by half of (status height + gap) to visually center when status is gone */
        transform: translateY(calc((var(--status-height) + var(--title-status-gap)) / 2));
    }

    #app-header.no-call .status-cell-wrapper
    {
        opacity: 0;
        visibility: hidden;
        transition: none; /* cut away (no fade) per requirement */
    }

.header-center-content
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* small gap between title and status */
    justify-content: flex-start; /* moving the title with transform instead of changing this */
    height: calc(1.6rem + var(--title-status-gap) + var(--status-height));
}

#header-logo
{
    height: 28px;
    width: auto;
    /* The hamburger button provides a symmetric spacer on the left */
    justify-self: end; /* align this logo grid item to the end (right) of its column */
    flex-shrink: 0; /* prevent logo from shrinking if space is tight */
}

/* sidebar toggle button shown on all platforms */
#sidebar-toggle-btn
{
    background: none;
    border: none;
    color: var(--text-chat-header);
    font-size: 1.5rem;
    cursor: pointer;
    justify-self: start; /* align this button grid item to the start (left) of its column */
}


#localVideoPreview 
{
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 4px;
    background-color: #000;
    border: 1px solid var(--border-color);
}

#call-controls-container
{
    position: fixed; /* keep controls above ios bottom toolbar */
    bottom: calc(12px + env(safe-area-inset-bottom)); /* accounts for mobile address bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: auto; /* allow the container to size to its content */
    padding: 0.75rem 1.25rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass);
    border-radius: 16px; /* more rounded for a pill shape */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#start-call-button
{
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: max-content;
    overflow-wrap: normal;
    hyphens: none;
    width: auto;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--button-bg);
    border-radius: 4px;
    background-color: var(--button-bg);
    color: var(--button-text);
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    #start-call-button:hover
    {
        background-color: var(--button-hover-bg);
    }

#join-call-button
{
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: max-content;
    overflow-wrap: normal;
    hyphens: none;
    width: auto;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--button-bg);
    border-radius: 4px;
    background-color: var(--button-bg);
    color: var(--button-text);
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    #join-call-button:hover
    {
        background-color: var(--button-hover-bg);
    }

#copy-call-url 
{
    position: relative;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--button-bg);
    border-radius: 4px;
    background-color: var(--button-bg);
    color: var(--button-text);
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    #copy-call-url:hover 
    {
        background-color: var(--button-hover-bg);
    }

    #copy-call-url[hidden] 
    {
        display: none;
    }

    /* the ::before pseudo-element holds the "Copied!" text for overlay
       layered on top of the button but is initially invisible (opacity: 0). */
    #copy-call-url::before 
    {
        content: 'Copied!';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* style to match the button but with a success color */
        background-color: #28a745; /* success green */
        color: var(--button-text);
        /* center the text */
        display: flex;
        align-items: center;
        justify-content: center;
        /* animation properties for fade */
        opacity: 0;
        transition: opacity 0.3s ease-in-out; /* fade effect */
    }

    /* when the button gets the .is-copied class, the ::before element fades in. */
    #copy-call-url.is-copied::before 
    {
        opacity: 1;
    }

#copy-connect-link
{
    position: relative;
    min-width: 6.75rem; /* wide enough that it doesn't change size with "Copied" toast word */
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--button-bg);
    border-radius: 4px;
    background-color: var(--button-bg);
    color: var(--button-text);
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    #copy-connect-link:hover 
    {
        background-color: var(--button-hover-bg);
    }

    #copy-connect-link[hidden] 
    {
        display: none;
    }

    #copy-connect-link::before 
    {
        content: 'Copied!';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #28a745; /* success green */
        color: var(--button-text);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    #copy-connect-link.is-copied::before 
    {
        opacity: 1;
    }

/* button/hr styles INSIDE .secure-area-content */
#secure-area-content
{
    width: 100%;
    padding: 0.8rem 1rem;
    margin-bottom: 0.75rem;
    /* Ensure other button styles (animations, disabled state) apply */
}

#go-secure-button
{
    position: relative; /* needed for absolute positioning of ::before */
    overflow: hidden; /* recommended with absolute pseudo-elements */
    display: inline-block; /* or block, depending on layout needs */
    width: 100%; /* make button span the sidebar width */
    padding: 0.8rem 1rem; /* essential for size */
    margin-bottom: 0.75rem; /* consistent margin */
    font-size: 1em; /* consistent text size */
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px; /* consistent corners */
    border-style: solid; /* ensure border style is set */
    border-width: 1px; /* ensure border width is set */
    box-sizing: border-box; /* ensures padding/border are inside width */
    /* transition for properties *not* handled by keyframe animation */
    transition: opacity 0.2s ease;
}

/* styles for the button when ENABLED */
#go-secure-button:not(:disabled)
{
    /* set the final background color (state after animation) */
    background-color: var(--button-enabled-secure-bg-end);
    color: var(--button-enabled-secure-text);
    border-color: var(--button-enabled-secure-border);
    cursor: pointer;
    
   /* apply the background animation */
   animation-name: secureButtonBackgroundFade;
   animation-duration: 3s; /* 1s hold + 2s fade */
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
    
    /* other consistent styles */
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1em;
    font-weight: bold;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    
    /* add transitions for other properties if needed, e.g., opacity on hover */
    transition: opacity 0.2s ease;
}

/* pseudo-element for initial text ("not secure") */
#go-secure-button:not(:disabled)::before
{
    content: "Not Secure"; /* the initial text */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* use flex to easily center text like the button */
    align-items: center;
    justify-content: center;
    /* style to match button text exactly */
    font-size: inherit;
    font-weight: inherit;
    color: var(--button-enabled-secure-text); /* same text color */
    /* important: start with the initial bright red background */
    /* this makes the initial appearance correct before animation takes over button */
    background-color: var(--button-enabled-secure-bg-start);
    /* apply the opacity fade-out animation */
    animation-name: secureButtonTextFadeOut;
    animation-duration: 3s; /* same total duration as background */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards; /* stay hidden after fade */
    animation-iteration-count: 1;
}

/* optional: hover/focus for ENABLED state (adjusts the final red) */
#go-secure-button:not(:disabled):hover,
#go-secure-button:not(:disabled):focus 
{
    opacity: 0.85; /* example: slightly fade */
    /* or slightly change the dark red background */
    /* background-color: hsl(0, 59%, 50%); */ /* slightly lighter brown/red */
}

/* styles for the button when DISABLED (overrides enabled styles/animation) */
#go-secure-button:disabled,
#go-secure-button:disabled:hover /* ensure hover style doesn't apply when disabled */
{
    background-color: var(--button-disabled-secure-bg); /* muted green */
    color: var(--button-disabled-secure-text);
    border-color: var(--button-disabled-secure-border);
    cursor: not-allowed; /* indicate non-interactive state */
    opacity: 0.7; /* slightly fade it (optional) */
    /* explicitly stop the red animation if it was somehow running */
    animation: none;
}

/* hide pseudo-element when disabled too */
#go-secure-button:disabled::before
{
    content: ""; /* remove content when disabled */
    display: none;
}

/* styles for the username and channel inputs and buttons */
.input-control-container 
{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

    .input-control-container label
    .sidebar-section > label[for="select-rts"] 
    {
        font-weight: bold;
        font-size: 0.9rem;
        color: var(--text-sidebar-section);
    }

.input-with-actions 
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.input-action-icon 
{
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: none; /* hidden by default */
    transition: opacity 0.2s ease;
}

.input-action-icon.visible 
{
    display: block; /* shown programmatically */
}

.input-action-icon:hover 
{
    opacity: 0.7;
}

/* styles for the sidebar input */
#sidebar-username-input,
#sidebar-channel-input 
{
    /* - width: calc(100% - 1.2rem); Fill width minus padding */
    flex-grow: 1; /* allow input to take up available horizontal space */
    min-width: 40px; /* prevent input from becoming too small */
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background-color: var(--input-bg); /* Use CSS variable */
    color: var(--text-color); /* Use CSS variable */
    font-size: 0.8em;
    /* add transition for smooth dark mode changes */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    /* style for when the input is focused */
    #sidebar-username-input:focus,
    #sidebar-channel-input:focus
    {
        outline: none; /* remove default outline */
        border-color: var(--accent-color); /* use accent color for focus border */
        /* optional: add a subtle glow */
        box-shadow: 0 0 0 2px var(--accent-focus-shadow, rgba(0, 123, 255, 0.25));
    }

/* specific style for dark mode toggle section */
.dark-mode-toggle 
{
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--border-sidebar); /* separator */
    display: flex; /* align items nicely */
    align-items: center;
}
.dark-mode-toggle label 
{
    margin-left: 0.5rem; /* slightly more space */
    font-weight: bold;
}


.sidebar-section 
{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

    .sidebar-section p
    {
        font-weight: bold;
        margin-top: 1rem;
        margin-bottom: 0.1rem;
        font-size: 0.9rem;
        color: var(--text-sidebar-section); /* use variable */
        transition: color 0.3s ease;
    }

.sidebar label 
{
    margin-left: 0.4rem;
    vertical-align: middle;
    font-size: 0.95rem;
    color: var(--text-sidebar); /* use variable */
    transition: color 0.3s ease;
}

.sidebar label[for="user-status"]
{
    display: block; /* label above select */
    margin-left: 0;
    margin-bottom: 0.1rem;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-sidebar-section); /* use variable */
}

.sidebar input[type="radio"],
.sidebar input[type="checkbox"]
{
    vertical-align: middle;
    margin-right: 0.1rem;
    cursor: pointer; /* indicate clickable */
}

.sidebar select {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid var(--border-color); /* use variable */
    border-radius: 4px;
    font-size: 0.95rem;
    background-color: var(--select-bg); /* use variable */
    color: var(--text-sidebar); /* use variable */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* new wrapper for the chat area */
.chat-area-wrapper
{
    grid-column: 1 / 2; /* single-column layout; sidebar floats over */
    display: grid;
    place-items: start;
    justify-items: center; /* keep horizontal centering */


    padding: 1rem; /* padding around the centered chat container */
    overflow: hidden; /* allow scrolling if chat container is too big */
    height: 100%; /* take full grid row height */
    background-color: var(--bg-body); /* inherit body background */
    transition: background-color 0.3s ease;
}


/* chat container - sized and styled, centered by wrapper */
.chat-container 
{
    width: 95%;
    max-width: 700px;
    height: 90vh;
    min-height: 90vh;
    max-height: 750px;
    background-color: var(--bg-chat);
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

    .chat-container h1 
    {
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0;
        font-size: 1.2rem;
        background-color: var(--bg-chat-header);
        color: var(--text-chat-header);
        flex-shrink: 0; /* prevent header from shrinking */
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    h1 .version-span
    {
        font-size: 0.75rem;
        font-weight: 300; /* Lighter font weight */
        opacity: 0.6;
        margin-left: 0.5em;
        vertical-align: middle;
    }

    .h1-cell-wrapper 
    {
        display: table-cell;
        padding: 0rem;
        text-align: center;
        vertical-align: middle; /* for table cells */
    }

#primary-video-row-container
{
    position: fixed; /* position fixed to avoid the page owning the scroll instead of this container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* ios momentum scroll */

    padding-left: 12px;
    padding-right: 12px;
}

.video-row
{
    display: grid;
    gap: 0.5rem;
}

/* let tiles fully fill their grid cell */
.participant-container
{
    position: absolute; /* all vid slots are now absolutely positioned in JS */
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
    display: none;
    /* all layout (top, left, width, height) will/must be set in JS for these vid slot containers */
}

    /* style for the currently speaking participant */
    .participant-container.is-speaker
    {
        outline: 3px solid var(--speaker-highlight);
        /* add a subtle glow to make it stand out */
        box-shadow: 0 0 12px 3px var(--speaker-highlight);
        /* inset the outline slightly to follow the rounded corners */
        outline-offset: -3px;
    }

    /* overlay the expanded tile; JS handles all sizing and positioning */
    .participant-container.expanded
    {
        /* make the container a flexbox grid that fills the parent's safe area */
        display: grid;
        place-items: center;
        position: absolute;
        z-index: 5;
    }

/* when one slot is expanded, hide the others in the same row */
.call-container:has(.participant-container.expanded) .video-row.primary .participant-container:not(.expanded)
{
    display: none !important;
}

.call-container:has(.participant-container.expanded) .video-row.primary .participant-container:not(.expanded)
{
    display: none !important;
}

/* --- Allocate height to the primary row when a slot is expanded --- */
/* Give the primary row all remaining vertical space… */
.call-container:has(.participant-container.expanded) #primary-video-row-container
{
    flex: 1 1 auto;
    min-height: 0; /* allow the abs-positioned expanded tile to size correctly */
}

/* …and suppress other vertical consumers while expanded */
.call-container:has(.participant-container.expanded) .message-display
{
    display: none;
}

.participant-feed 
{
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop image to fill the container without distortion */
    background-color: #000; /* force solid black backgrdound for applying translucent images on iPhone/Safari primary-video-row*/
}

/* --- expanded-state override (must come AFTER the generic .participant-feed rule) --- */
.participant-container.expanded > .participant-feed
{
    width: 100% !important; /* fill the sized container */
    height: 100% !important; /* fill the sized container */
    object-fit: contain !important; /* no crop, honor source aspect ratio */
    display: block;
    vertical-align: top;
}

.input-with-button 
{
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space between select and button */
}

.input-with-button select 
{
    flex-grow: 1;
    margin-top: 0; /* override default margin */
}

.control-icon 
{
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0; /* prevent the icon from shrinking */
    transition: opacity 0.2s ease;
}

.control-icon:hover 
{
    opacity: 0.7;
}

#video-overlay-controls 
{
    position: absolute;
    bottom: 2px;
    left: 2px;
    z-index: 10;
    display: flex;
    gap: 0.75rem;
    background-color: rgba(0, 0, 0, 0.25);
    padding: 3px 5px;
    border-radius: 12px;
}


/* call source menu */
.call-source-menu 
{
    position: fixed; /* detach from clipped parent */
    top: 0; /* js will set */
    left: 0; /* js will set */
    z-index: 9999; /* topmost */
    visibility: hidden; /* avoid flash pre-position */
    min-width: 220px;
    border-radius: 10px;
    background-color: rgba(20,20,20,0.95);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    padding: 6px 0;
    color: #fff;
    backdrop-filter: blur(4px);
}

    /* Position submenus relative to parent items */
    .call-source-menu .has-submenu
    {
        position: relative;
    }

    .call-source-menu .menu-list 
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .call-source-menu .menu-item
    {
        position: relative;
        background-clip: padding-box; /* prevents tiny anti-aliased gaps when two menu items abut with the same bg */
        padding: 8px 14px;
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .call-source-menu .menu-separator
    {
        height: 1px;
        margin: 6px 8px;
        background-color: rgba(255,255,255,0.12);
        border: 0;
        list-style: none;
        pointer-events: none;
    }

    .call-source-menu .menu-item:hover
    {
        background-color: rgba(255,255,255,0.08);
    }

    .call-source-menu .menu-item .checkmark
    {
        margin-right: 6px;
    }

    .call-source-menu .menu-item .menu-label
    {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    .call-source-menu .menu-item.has-submenu::after
    {
        content: '▸';
        opacity: 0.7;
    }

    /* unified hover for the display-name label + input rows */
    .call-source-menu .menu-item.group-hover
    {
        background-color: rgba(255,255,255,0.08);
    }

    .call-source-menu #username-label-menu-item.group-hover
    {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        /* remove radius on the touching edge so the two rows look like one block */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .call-source-menu #username-edit-menu-item.group-hover
    {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* remove radius on the touching edge */
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* remove the small gap between the two rows when hovered together */
    .call-source-menu #username-label-menu-item.group-hover + #username-edit-menu-item.group-hover
    {
        /* pull up slightly more to eliminate the bright seam */
        margin-top: -0px;
    }

    /* username inline editor */
    .call-source-menu .username-display
    {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px; /* match input padding */
        border-radius: 8px; /* match input radius */
        border: 1px solid transparent; /* match input border thickness */
        background-color: rgba(255,255,255,0.08);
        cursor: text;
        font: inherit;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
    }

        /* make sure the browser actually hides inputs/spans when toggled */
        .call-source-menu .username-input[hidden],
        .call-source-menu .username-display[hidden]
        {
            display: none !important;
        }

    .call-source-menu .username-input
    {
        padding: 8px 10px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 8px; /* match display radius */
        border: 1px solid rgba(255,255,255,0.16);
        background-color: #000; /* darker to telegraph edit mode */
        color: #fff;
        caret-color: var(--bg-chat-header); /* equals #4a90e2 */
        outline: none;
        /* match display chip typography so text doesn't jump */
        font: inherit;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
    }

    /* username editor row spacing: keep label tight and give input row breathing room */
    .call-source-menu #username-edit-menu-item
    {
        padding: 8px 12px;
    }

    .call-source-menu #username-label-menu-item
    {
        padding-bottom: 4px;
    }

    .call-source-menu .username-input::placeholder
    {
        color: rgba(255,255,255,0.5);
    }

    .call-source-menu.editing-username .menu-item.has-submenu > .submenu
    {
        display: none;
    }

    .call-source-menu .menu-item.open > .submenu
    {
        display: block;
    }

/* global styling for detached submenu's */
.submenu.submenu-active
{
    display: block;
    z-index: 9999;
}


/* hard enforce single-view state while editing in menu */
#username-edit-menu-item.editing .username-display
{
    display: none !important;
}

#username-edit-menu-item.editing .username-input
{
    display: block !important;
    width: 100%;
}


/* --- invite menu --- */
.controls-menu
{
    position: fixed; /* detach from clipped parent */
    z-index: 100; /* above other controls */
    min-width: 240px;
    border-radius: 10px;
    background-color: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    padding: 6px 0;
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

    .controls-menu .menu-list
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .controls-menu .menu-item
    {
        position: relative;
        padding: 8px 14px;
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .controls-menu .menu-item:hover
        {
            background-color: rgba(255, 255, 255, 0.08);
        }

    .controls-menu .menu-label
    {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    .controls-menu .menu-separator
    {
        height: 1px;
        margin: 6px 8px;
        background-color: rgba(255, 255, 255, 0.12);
        border: 0;
        list-style: none;
        pointer-events: none;
    }

.slot-actions
{
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 10;
    display: flex;
    gap: 0.75rem;
    background-color: rgba(0, 0, 0, 0.25);
    padding: 3px 5px;
    border-radius: 12px;
}

.remote-status-icons 
{
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
}

.status-icon 
{
    width: 20px;
    height: 20px;
    display: none; /* icons are hidden by default */
}
    .status-icon.visible /* this class is added with JS to show an icon when remote muted */ 
    {
        display: block;
    }

#admin-label, .participant-label 
{
    display: none; /* hidden by default, controlled by JS */
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white; /* orange; yellow; */
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
    z-index: 15; /* on top of the video but below other controls if needed */
}

#security-status-container 
{
    text-align: center;
    font-size: 0.85em;
    background-color: var(--bg-chat-header);
    min-height: 1.2em;
    margin-top: 0;
    flex-shrink: 0; /* prevent status bar from shrinking */
}

.status-cell-wrapper
{
    padding: 0; /* padding handled by header and gap */
    height: var(--status-height);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--status-height); /* keep header height stable even when this wrapper is hidden */
    opacity: 0; /* start hidden */
    visibility: hidden;
    transition: opacity .25s ease; /* fade in on connect */
    white-space: nowrap;
}

    /* invisible but layout-preserving state */
    .status-cell-wrapper.is-hidden-preserve
    {
        visibility: hidden;
        pointer-events: none;
    }

/* subtle styling for the call id text */
.status-call-id
{
    margin-right: 2rem;
    opacity: .75;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* call id label + read-only input */
.status-call-id-label
{
    opacity: .8;
    margin-right: .35rem;
    user-select: none;
}

.status-call-id-input
{
    width: auto; /* 7.25ch; room for 6 chars plus a touch of padding */
    padding: 2px 6px;
    margin-right: 2rem;
    border: 1px solid var(--border-glass);
    border-radius: 4px;
    background: transparent;
    color: var(--text-chat-header);
    font: 600 .95rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: .04em;
    caret-color: transparent; /* no caret since it's read-only */
    white-space: nowrap;
}

    .status-call-id-input:read-only
    {
        outline: none;
    }

    /* allow easy selection on touch without changing look */
    .status-call-id-input::selection
    {
        background: rgba(255,255,255,.15);
    }

.status-label
{
    /* style for the static "status: " text */
    color: var(--text-color-devices);
    font-style: italic;
    white-space: nowrap;
}

#security-status-value /* target by id for js, can style via id or class */ {
    /* style for the dynamic value part */
    font-weight: bold; /* make it bold */
    color: var(--text-color-devices); /* use default text color to stand out slightly */
    margin-left: 0.25em; /* add a small space after the label */
    border-bottom: 1rem solid transparent;
}

#settings-boxes  
{
    margin-bottom: 1.0em; /* add a small space after the label */
}


/* message display area - unchanged */
.message-display 
{
    flex-grow: 1; /* allow this area to fill all available vertical space */
    min-height: 0; /* CRITICAL: allows the child to scroll properly */
    padding: 1rem;
}

.scrolling-message-content 
{
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
    min-height: 0;
}

/* individual messages - unchanged */
.message 
{
    padding: 0.6rem 0.9rem;
    border-radius: 18px; /* rounded corners */
    max-width: 75%; /* max width for messages */
    word-wrap: break-word; /* wrap long words */
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.local-message 
{
    background-color: var(--bg-msg-user); /* use variable */
    color: var(--text-msg-local); /* use variable */
    margin-left: auto;
    border-bottom-right-radius: 4px; /* slightly different corner */
    transition: background-color 0.3s ease;
    /* disable text selection */
    user-select: none; /* standard */
    -webkit-user-select: none; /* safari */
    -ms-user-select: none; /* old edge */
    cursor: default;
}

.remote-message 
{
    background-color: var(--bg-msg-remote); /* use variable */
    color: var(--text-msg-remote); /* use variable */
    margin-right: auto;
    border-bottom-left-radius: 4px; /* slightly different corner */
    transition: background-color 0.3s ease;
    /* disable text selection */
    user-select: none; /* standard */
    -webkit-user-select: none; /* safari */
    -ms-user-select: none; /* old edge */
    cursor: default;
}

.message-status 
{
    display: block; /* ensure it takes block space */
    font-size: 0.75em; /* smaller font size */
    color: var(--text-msg-status); /* use variable */
    margin-top: 0.3em; /* space above the status line */
    /* text-align: right; */ /* optional: align to right if desired */
    transition: color 0.3s ease; /* smooth color transition */
    /* disable text selection */
    user-select: none; /* standard */
    -webkit-user-select: none; /* safari */
    -ms-user-select: none; /* old edge */
    cursor: default;
}

/* override status color specifically for user messages in light mode for better contrast */
.local-message .message-status
{
    color: #e0f7ff;
}

/* message input form - unchanged */
.message-form
{
    display: flex;
    padding: 1rem;
    background-color: var(--bg-chat-form); /* use variable */
    flex-shrink: 0; /* prevent form from shrinking */
    gap: 0.5rem; /* space between input and button */
    transition: background-color 0.3s ease;
}

#message-input
{
    flex-grow: 1; /* input takes available space */
    padding: 0.75rem;
    border: 1px solid var(--border-color); /* use variable */
    border-radius: 20px; /* pill shape */
    font-size: 1rem;
    outline: none; /* remove default outline */
    background-color: var(--input-bg); /* use variable */
    color: var(--text-body); /* use variable */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#message-input:focus
{
    border-color: var(--border-focus); /* use variable */
}

button[type="submit"]
{
    padding: 0.75rem 1.25rem;
    border: none;
    background-color: var(--button-bg); /* use variable */
    color: var(--button-text); /* use variable */
    border-radius: 20px; /* pill shape */
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

button[type="submit"]:hover
{
    background-color: var(--button-hover-bg); /* use variable */
}

.message-text 
{
    /* styles for the main text bubble if needed - currently none */
    display: block; /* ensure it takes block space */
}


/* default layout for the overlay on ALL screen sizes which is overriden for mobile below */
/* it's invisible and removed from the layout flow by default */
#sidebar-overlay 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Below the sidebar but above everything else */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.sidebar.open + #sidebar-overlay
{
    opacity: 1;
    visibility: visible;
}


/* ===== Full-width/height Call Area ===== */
.call-area-wrapper.call-container
{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    background-color: var(--bg-chat);
    box-shadow: 0 4px 15px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    border-radius: 0; /* No rounded corners for full screen */
}

#security-value
{
    font-weight: bold;
    color: var(--text-color-devices);
    margin-left: 0.25em;
    border-bottom: 1rem solid transparent;
}


/* mobile specific layout adjustments */
@media screen and (max-width: 768px), screen and (orientation: landscape) and (max-height: 500px) 
{
    .chat-area-wrapper 
    {
        /* make chat area take up the full grid space on mobile*/
        grid-column: 1 / 2;
        padding: 0;
    }

    .chat-container 
    {
        /* make chat container fill the entire screen on mobile */
        width: 100%;
        height: 100svh; /* use small viewport height (svh) to avoid mobile browser UI */
        max-width: 100vw;
        max-height: 100svh;
        border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom, 1rem); /* add padding to account for the browser's bottom UI bar */
    }

    /* --- content adjustments --- */
    .video-wrapper 
    {
        /* make the video wider on mobile */
        width: 90%;
    }
}

@media screen and (max-width: 479.98px) and (orientation: portrait)
{
    #header-logo
    {
        display: none;
    }
}

/* --- participant default sizing (restore intrinsic 16:9 height) --- */
.video-row.primary .participant-container
{
    /* makes the container have a real height so the <video> height:100% works */
    aspect-ratio: 16 / 9;
}

/* --- participant list popup styles --- */
.status-label .link-style
{
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
}

    .status-label .link-style:hover
    {
        color: var(--button-hover-bg);
    }

.popup-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1999;
}

.popup-panel
{
    position: fixed;
    background-color: var(--bg-sidebar);
    color: var(--text-body);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    width: 90%;
    max-width: 320px;
    border: 1px solid var(--border-sidebar);
}

.popup-header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-sidebar);
}

    .popup-header h3
    {
        margin: 0;
        font-size: 1.1rem;
    }

.popup-close-btn
{
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text-body);
    cursor: pointer;
    padding: 0;
}

.popup-body
{
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

    .popup-body ol
    {
        padding-left: 1.5rem;
        margin: 0;
    }

    .popup-body li
    {
        padding: 0.25rem 0;
        word-break: break-word;
    }

:root
{
    /* fallback for older browsers */
    --vvh: 100vh; /* will be overridden by JS on iOS Safari */
}

/* prefer modern small viewport unit when available */
@supports (height: 100svh)
{
    :root { --vvh: 100svh; } /* iOS 16.4+ */
}


/* subtle, overlay-style scrollbars (webkit + firefox) */
*
{
    scrollbar-width: thin; /* firefox */
    scrollbar-color: rgba(128,128,128,.35) transparent;
}

/* webkit/blink (safari, chrome, edge) */
#primary-video-row-container::-webkit-scrollbar,
.sidebar-body::-webkit-scrollbar
{
    width: 8px;
}

#primary-video-row-container::-webkit-scrollbar-track,
.sidebar-body::-webkit-scrollbar-track
{
    background: transparent;
}

#primary-video-row-container::-webkit-scrollbar-thumb,
.sidebar-body::-webkit-scrollbar-thumb
{
    background-color: rgba(128,128,128,.35);
    border-radius: 8px;
    border: 2px solid transparent; /* makes the thumb thinner */
    background-clip: content-box;
}

    #primary-video-row-container::-webkit-scrollbar-thumb:hover,
    .sidebar-body::-webkit-scrollbar-thumb:hover
    {
        background-color: rgba(128,128,128,.55);
    }


.submenu
{
    position: absolute;
    display: none;
    top: 0;
    left: 100%;
    padding: 5px 0;
    margin: 0;
    z-index: 10001;
    min-width: 200px;
    list-style: none; /* Removes bullets */
    overflow-y: auto;
    overscroll-behavior: contain; /* Prevents scroll chaining */
    max-height: 90vh;
    white-space: nowrap;
    background-color: rgba(20,20,20,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

    .submenu.submenu-active
    {
        display: block;
    }

    .submenu.flip-left
    {
        left: 0 !important;
        right: auto !important;
    }

    .submenu .submenu-item
    {
        padding: 8px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

        .submenu .submenu-item:hover
        {
            background-color: rgba(255,255,255,0.08);
        }