/* Collapsible desktop Chat/Profile sidebar — layout-only, game logic untouched */
:root {
    --chat-sidebar-width: 280px;
    --chat-sidebar-transition: 320ms cubic-bezier(.22,.61,.36,1);
}

.right-sidebar {
    transition: transform var(--chat-sidebar-transition), box-shadow var(--chat-sidebar-transition) !important;
    box-shadow: -12px 0 35px rgba(0,0,0,.18);
}

.desktop-chat-toggle {
    position: absolute;
    z-index: 1005;
    top: 50%;
    left: -42px;
    width: 42px;
    min-width: 42px;
    height: 104px;
    padding: 0;
    border: 1px solid rgba(104,216,255,.26);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, rgba(23,31,51,.98), rgba(10,16,29,.98));
    color: #dce8f8;
    box-shadow: -8px 0 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    outline: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.desktop-chat-toggle:hover,
.desktop-chat-toggle:focus-visible {
    color: #fff;
    border-color: rgba(91,207,247,.7);
    background: linear-gradient(180deg, rgba(32,46,74,.99), rgba(13,23,40,.99));
    box-shadow: -10px 0 28px rgba(0,0,0,.34), 0 0 18px rgba(65,196,238,.12);
}

.desktop-chat-toggle__chevron {
    font: 700 30px/1 Arial, sans-serif;
    transition: transform var(--chat-sidebar-transition);
}

.desktop-chat-toggle__label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: .82;
}

@media (min-width: 821px) {
    .wrapper .page,
    .header,
    .header.sticky {
        transition: padding-right var(--chat-sidebar-transition), width var(--chat-sidebar-transition) !important;
    }

    body.chat-sidebar-collapsed .right-sidebar {
        transform: translateX(100%) !important;
        box-shadow: none;
    }

    body.chat-sidebar-collapsed .wrapper .page {
        padding-right: 0 !important;
    }

    body.chat-sidebar-collapsed .desktop-chat-toggle {
        left: -42px;
    }

    body.chat-sidebar-collapsed .desktop-chat-toggle__chevron {
        transform: rotate(180deg);
    }

    /* Existing themes reserve space for the sidebar in the fixed header. */
    body.chat-sidebar-collapsed .wrapper .page > .header,
    body.chat-sidebar-collapsed .header,
    body.chat-sidebar-collapsed .header.sticky {
        padding-right: 30px !important;
    }
}

@media (max-width: 1366px) and (min-width: 1021px) {
    :root { --chat-sidebar-width: 250px; }
}

@media (max-width: 1020px) and (min-width: 970px) {
    :root { --chat-sidebar-width: 240px; }
}

@media (max-width: 969px) and (min-width: 821px) {
    :root { --chat-sidebar-width: 210px; }
}

@media (max-width: 820px) {
    .desktop-chat-toggle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .right-sidebar,
    .desktop-chat-toggle__chevron,
    .wrapper .page,
    .header,
    .header.sticky {
        transition-duration: 0.01ms !important;
    }
}