:root {
    --sidebar-width: 64px;
    --sidebar-mobile-height: 250px;
}

/* --- DESKTOP SIDEBAR --- */
.left-sidebar {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--sidebar-width)); 
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 15px;
    gap: 15px;
    z-index: 1000; /* Increased to render over video embed and main content */
    transition: left 0.3s ease;
}

body.sidebar-open-squish { padding-left: var(--sidebar-width); }
body.sidebar-open-squish .left-sidebar { left: 0; }

.sidebar-header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
    z-index: 10;
}
.sidebar-header:hover { z-index: 100; }

.sidebar-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto; /* This forces it to the absolute bottom of the sidebar */
    position: relative;
    z-index: 10;
}
.sidebar-footer:hover { z-index: 100; }

.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    -ms-overflow-style: none; scrollbar-width: none;
}
.sidebar-content::-webkit-scrollbar { display: none; }



/* ADD THIS ANYWHERE IN YOUR CSS TO FIX THE YOUTUBE BOUNCE */
#player-wrapper, #ytplayer {
    transition: none !important;
}

/* Avatar Styling & Z-Index Tooltip Fix */
.sidebar-avatar-wrapper {
    position: relative; width: 36px; height: 36px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    z-index: 10;
}
/* Pop the hovered item to the front so its tooltip renders over the item below it */
.sidebar-avatar-wrapper:hover {
    z-index: 100; /* Pops the hovered avatar tooltip over the header and other avatars */
}

.sidebar-avatar-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; z-index: 2; }
.sidebar-avatar-fallback {
    position: absolute; width: 30px; height: 30px; border-radius: 50%;
    background: var(--gray); color: white; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px; text-transform: uppercase; z-index: 1;
}

/* Live Indicators */
.live-twitch { border: 2px solid var(--purple); }
.live-youtube { border: 2px solid var(--red); }
.live-kick { border: 2px solid var(--green); }
.offline { border: 2px solid transparent; opacity: 0.5; filter: grayscale(100%); }
.offline:hover { opacity: 1; filter: grayscale(0%); }

/* --- MOBILE BOTTOM GRID --- */
@media (max-width: 768px) {
    body.sidebar-open-squish {
        padding-left: 0; 
        padding-bottom: var(--sidebar-mobile-height); 
    }
    
    /* Move Open Button to Bottom Left */
	#openSidebarBtn {
        top: auto !important;
        bottom: 15px !important;
        left: 15px !important;
        z-index: 1000 !important;
    }

    .left-sidebar {
        top: auto; 
        bottom: calc(-1 * var(--sidebar-mobile-height)); 
        left: 0;
        width: 100%; 
        height: var(--sidebar-mobile-height);
        border-right: none; 
        border-top: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        transition: bottom 0.3s ease;
    }
    body.sidebar-open-squish .left-sidebar { bottom: 0; left: 0; }
    
    /* Header stays visible but moves to top-left of the panel */
    .sidebar-header { 
        display: flex;
        justify-content: flex-start;
        padding: 10px 15px 0 15px;
        border-bottom: none;
    }
	.sidebar-footer { 
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 10px 15px 15px 15px;
        border-top: none;
    }
    
    .sidebar-content { 
        flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 15px; 
        padding: 10px 15px 15px 15px;
    }
    .sidebar-avatar-wrapper { width: 48px; height: 48px; }
    .sidebar-avatar-img, .sidebar-avatar-fallback { width: 42px; height: 42px; font-size: 18px; }
}