/* Four compact Workspace destinations; loaded after surface typography. */
.sidebar-primary-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 6px;
    margin-top: 12px;
    padding: 4px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg-page);
}
.sidebar-primary-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 48px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 160ms ease-out, color 160ms ease-out, transform 120ms ease-out;
}
.app-container:not([data-sidebar-collapsed='true']) .sidebar-primary-link > .ui-icon,
.sidebar-primary-link > .ui-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: currentColor;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-primary-link > .sidebar-primary-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.sidebar-primary-label::before { content: none; }
@media (hover: hover) {
    .sidebar-primary-link:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
    .sidebar-primary-link:hover > .ui-icon { transform: translateY(-2px); }
    #settingsBtn:hover > .ui-icon { transform: rotate(25deg); }
}
.sidebar-primary-link[aria-current='page'] {
    background: var(--color-accent-soft);
    box-shadow: inset 0 -2px var(--color-accent);
    color: var(--color-text-primary);
}
.sidebar-primary-link:active { transform: scale(.94); }
.sidebar-primary-link:active > .ui-icon { transform: scale(.92); }
.sidebar-primary-link:focus-visible,
.account-menu button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sidebar-primary-link .actions-entry-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 9px;
    box-shadow: none;
}
.sidebar-primary-link .actions-entry-badge--new { right: auto; left: 1px; border: 1px solid var(--color-border-strong); }
.account-menu { max-height: calc(100dvh - 110px); overflow-y: auto; }
.account-menu button[aria-current='page'] { background: var(--color-accent-soft); color: var(--color-text-primary); }
.account-menu button.account-menu-danger { color: var(--color-danger); }
.account-menu button.account-menu-danger .ui-icon { color: currentColor; }
@media (prefers-reduced-motion: reduce) {
    .sidebar-primary-link { transition: background-color 120ms ease-out, color 120ms ease-out; }
    .sidebar-primary-link > .ui-icon { transition: none; }
    .sidebar-primary-link:active,
    .sidebar-primary-link:hover > .ui-icon,
    #settingsBtn:hover > .ui-icon,
    .sidebar-primary-link:active > .ui-icon { transform: none; }
}


/* One sidebar layout. Collapse clips its details; it never lays out new avatars. */
.sidebar-collapse-toggle {
    border: 1px solid var(--color-border-subtle); border-radius: 9px;
    background: var(--color-bg-surface-raised); color: var(--color-text-secondary);
    cursor: pointer; font: 24px/1 var(--font-sans); min-width: 32px; min-height: 36px;
}
.sidebar-collapse-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chat-compact-unread { display: none; }
.chat-compact-presence { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--color-bg-app); background: var(--color-text-muted); z-index: 3; }
.chat-compact-presence[data-state="online"] { background: var(--color-success); }
.chat-compact-presence[data-state="dnd"] { background: var(--color-danger); }
.chat-compact-presence[data-state="dnd"]::after { content: ''; position: absolute; height: 2px; left: 1px; right: 1px; top: 3px; background: var(--color-bg-app); }
@media (min-width: 769px) {
    .sidebar-primary-nav { display: flex; }
    .sidebar-primary-link { flex: 1; }
    .sidebar { --sidebar-rail-width: 92px; overflow: clip; }
    .sidebar-account-row { width: var(--sidebar-width, 420px); flex-shrink: 0; }
    .sidebar-chat-search {
        width: calc(var(--sidebar-width, 420px) - 2 * var(--space-3) - 1px);
        flex-shrink: 0;
        margin-top: var(--space-3);
    }
    .chat-list-section { width: calc(var(--sidebar-width, 420px) - 2 * var(--space-2)); }
    .chat-item-avatar { position: relative; overflow: visible; }
    .app-container[data-sidebar-collapsed="true"] { grid-template-columns: 92px minmax(0, 1fr); }
    .app-container[data-sidebar-collapsed="true"] .sidebar { width: var(--sidebar-rail-width); min-width: var(--sidebar-rail-width); max-width: var(--sidebar-rail-width); flex-basis: var(--sidebar-rail-width); }
    .app-container[data-sidebar-collapsed="true"] .sidebar-primary-nav,
    .app-container[data-sidebar-collapsed="true"] .sidebar-chat-search,
    .app-container[data-sidebar-collapsed="true"] .user-info-side,
    .app-container[data-sidebar-collapsed="true"] .account-menu-chevron,
    .app-container[data-sidebar-collapsed="true"] .chat-item-body { visibility: hidden; pointer-events: none; }
    .app-container[data-sidebar-collapsed="true"] .sidebar-resizer,
    .app-container[data-sidebar-collapsed="true"] .sidebar-add-chat-fab { display: none; }
    .app-container[data-sidebar-collapsed="true"] .chat-compact-unread:not(:empty) {
        display: block; position: absolute; right: -3px; top: -4px; z-index: 4;
        min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
        border-radius: var(--radius-pill); background: var(--color-accent-action); color: var(--color-text-inverse);
        text-align: center; font: 700 11px/18px var(--font-sans); box-shadow: 0 0 0 2px var(--color-bg-app);
    }
}
@media (max-width: 768px) { .sidebar-collapse-toggle { display: none; } }

/* The row keeps its layout width, but its state frame fits the visible rail. */
@media (min-width: 769px) {
    .app-container[data-sidebar-collapsed="true"] .chat-item,
    .app-container[data-sidebar-collapsed="true"] .user-profile-btn {
        position: relative; background: transparent !important; border-color: transparent !important;
        box-shadow: none !important; outline: none !important;
    }
    .app-container[data-sidebar-collapsed="true"] .chat-item::before,
    .app-container[data-sidebar-collapsed="true"] .user-profile-btn::before {
        content: ''; position: absolute; inset: 0 auto 0 0;
        width: calc(var(--sidebar-rail-width) - 2 * var(--space-2));
        box-sizing: border-box; border: 1px solid transparent; border-radius: inherit;
        pointer-events: none;
    }
    .app-container[data-sidebar-collapsed="true"] .user-profile-btn::before {
        width: calc(var(--sidebar-rail-width) - 2 * var(--space-3));
    }
    .app-container[data-sidebar-collapsed="true"] .chat-item:hover::before,
    .app-container[data-sidebar-collapsed="true"] .user-profile-btn:hover::before {
        background: var(--color-bg-hover); border-color: var(--color-border-subtle);
    }
    .app-container[data-sidebar-collapsed="true"] .chat-item.active::before {
        background: var(--color-bg-selected); border-color: var(--color-border-strong);
        box-shadow: inset 2px 0 var(--color-accent);
    }
    .app-container[data-sidebar-collapsed="true"] .chat-item:focus-visible::before,
    .app-container[data-sidebar-collapsed="true"] .user-profile-btn:focus-visible::before {
        outline: 2px solid var(--color-accent); outline-offset: -2px;
    }
}

@media (min-width: 769px) {
    .app-container[data-sidebar-collapsed="true"] .chats-list { scrollbar-width: none; }
    .app-container[data-sidebar-collapsed="true"] .chats-list::-webkit-scrollbar { display: none; }
}

/* Reposition the existing live voice-room badge, without a second renderer. */
@media (min-width: 769px) {
    .app-container[data-sidebar-collapsed="true"] .sidebar .chat-effect-token.is-voice-active {
        visibility: visible; position: absolute; left: -7px; top: 50%;
        transform: translateY(-50%); z-index: 5;
        width: 18px; min-width: 18px; max-width: 18px; height: 22px;
        color: var(--color-success); background: var(--list-bg, var(--color-bg-app));
        border: 0; border-radius: 6px; box-shadow: none;
        pointer-events: none;
    }
    .app-container[data-sidebar-collapsed="true"] .sidebar .chat-effect-token.is-voice-active .chat-effect-icon {
        visibility: visible; width: 16px; height: 16px; color: inherit;
    }
    .app-container[data-sidebar-collapsed="true"] .sidebar .chat-effect-token.is-voice-active .chat-effect-text { display: none; }
}