/* The same compact, right-hand server rail on every signed-in app surface. */
.workspace-app {
    padding-inline-start: calc(var(--workspace-rail-width) + env(safe-area-inset-right, 0px));
}
.workspace-app .workspace-rail {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: calc(var(--workspace-rail-width) + env(safe-area-inset-right, 0px));
    height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom)) 10px;
    gap: 10px;
    background: #000;
    border: 0;
    border-left: 1px solid #303030;
    z-index: 70;
}
.workspace-rail :is(a, button) {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-height: 48px;
    min-width: 48px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid #303030;
    border-radius: 16px;
    background: #111;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms;
}
.workspace-rail :is(a, button):hover,
.workspace-rail [aria-current="page"],
.workspace-rail [aria-expanded="true"] {
    background: #0060ff;
    border-color: #0060ff;
}
.workspace-rail [aria-current="page"]::before {
    content: "";
    position: absolute;
    right: -10px;
    width: 3px;
    height: 24px;
    border-radius: 3px;
    background: #fff;
}
.workspace-rail :is(a, button):focus-visible,
.workspace-more :is(a, button):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.workspace-rail .workspace-server-list {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #454545 #000;
    padding: 14px 2px;
}
.workspace-server-list::-webkit-scrollbar,
.workspace-more::-webkit-scrollbar { width: 4px; }
.workspace-server-list::-webkit-scrollbar-thumb,
.workspace-more::-webkit-scrollbar-thumb { background: #454545; border-radius: 4px; }
.workspace-server-list::-webkit-scrollbar-track,
.workspace-more::-webkit-scrollbar-track { background: #000; }
.workspace-rail-bottom { flex: 0 0 auto; }
.workspace-server { overflow-wrap: anywhere; }
.workspace-server > span { max-width: 100%; overflow: hidden; white-space: nowrap; }
.workspace-rail-empty { padding: 6px 0; line-height: 1.6; }
.workspace-app .hub-sidebar,
.workspace-app .workspace-mobile-nav,
.workspace-app .hub-utility-menu { display: none !important; }
.workspace-app .lobby-layout { display: block; min-width: 0; direction: rtl; }
.workspace-app .hub-content { width: 100%; min-width: 0; }
.workspace-more {
    position: fixed;
    right: calc(var(--workspace-rail-width) + env(safe-area-inset-right, 0px) + 8px);
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 100;
    width: min(264px, calc(100vw - var(--workspace-rail-width) - env(safe-area-inset-right, 0px) - 16px));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #454545 #111;
    border: 1px solid #303030;
    border-radius: 16px;
    color: #fff;
    background: #111;
    box-shadow: 0 12px 32px #0009;
}
.workspace-more[hidden], .workspace-rail-tooltip[hidden] { display: none; }
.workspace-more :is(a, button) {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    text-align: start;
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    color: #eee;
    background: transparent;
    cursor: pointer;
}
.workspace-more :is(a, button):hover,
.workspace-more [aria-current="page"] { background: #0060ff; color: #fff; }
.workspace-more i { width: 20px; text-align: center; flex-shrink: 0; }
.workspace-more .workspace-more-account {
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid #303030;
    border-radius: 10px 10px 0 0;
}
.workspace-more-account img { width: 36px; height: 36px; border-radius: 12px; object-fit: cover; }
.workspace-more-account strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-more form { margin-top: 6px; padding-top: 6px; border-top: 1px solid #303030; }
.workspace-more form button { color: #ff8181; }
.workspace-more form button:hover { background: #401717; color: #fff; }
.workspace-rail-tooltip {
    position: fixed;
    z-index: 110;
    max-width: min(240px, calc(100vw - var(--workspace-rail-width) - 32px));
    padding: 10px 14px;
    border: 1px solid #303030;
    border-radius: 10px;
    color: #fff;
    background: #111;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    pointer-events: none;
    box-shadow: 0 6px 18px #0008;
}
@media (max-width: 900px) {
    :root { --workspace-rail-width: 64px; }
    .workspace-app .workspace-rail {
        padding-inline: calc(7px + env(safe-area-inset-right, 0px)) 7px;
        gap: 8px;
    }
    .workspace-rail-bottom { gap: 8px; }
    .workspace-app .hub-content { padding: 20px 12px calc(24px + env(safe-area-inset-bottom)); }
    .workspace-app .room-shell,
    .workspace-app.workspace-members-hidden .room-shell { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
    .workspace-app .control-panel {
        right: calc(var(--workspace-rail-width) + env(safe-area-inset-right, 0px) + 8px);
        bottom: max(8px, env(safe-area-inset-bottom));
        width: min(292px, calc(100vw - var(--workspace-rail-width) - env(safe-area-inset-right, 0px) - 16px));
    }
    .workspace-app .sidebar {
        right: calc(var(--workspace-rail-width) + env(safe-area-inset-right, 0px) + 8px);
        bottom: max(8px, env(safe-area-inset-bottom));
        max-width: calc(100vw - var(--workspace-rail-width) - env(safe-area-inset-right, 0px) - 16px);
    }
    .workspace-app .server-member-panel.mobile-open {
        max-width: calc(100vw - var(--workspace-rail-width) - env(safe-area-inset-right, 0px) - 16px);
    }
    .workspace-app :is(.dm-emoji-panel, .chat-extras-panel) {
        position: fixed;
        left: 8px;
        right: calc(var(--workspace-rail-width) + env(safe-area-inset-right, 0px) + 8px);
        width: auto;
        max-height: min(420px, calc(100dvh - 180px));
        overflow-y: auto;
    }
    .workspace-app .dm-emoji-panel { bottom: calc(86px + env(safe-area-inset-bottom)); }
    .workspace-app .dm-emoji-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .workspace-app .dm-emoji-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 500px) {
    .workspace-app .workspace-rail { gap: 4px; padding-block: 4px; }
    .workspace-rail-bottom { gap: 4px; }
    .workspace-rail .workspace-server-list { padding-block: 6px; }
    .workspace-rail :is(a, button) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .workspace-rail :is(a, button) { transition: none; }
}