:root{--app-rail-width:clamp(96px,8vw,114px)}
:root[data-sidebar=compact]{--app-rail-width:64px}
.call-rail{position:relative}.sidebar-toggle{position:absolute;top:var(--sidebar-toggle-top,50%);right:-12px;z-index:12;width:28px;height:44px;display:grid;place-items:center;border:1px solid var(--theme-border-subtle,#323740);border-radius:8px;color:var(--theme-text-primary,#f1f3f9);background:var(--theme-surface-elevated,#101216);cursor:pointer;opacity:0;transition:opacity .15s}
.sidebar-toggle svg{width:16px;height:16px;transform:rotate(180deg)}:root[data-sidebar=compact] .sidebar-toggle svg{transform:none}.call-rail:hover>.sidebar-toggle,.sidebar-toggle:focus-visible{opacity:1}
.sidebar-toggle:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
:root[data-sidebar=compact] .call-rail-item>span{display:none!important}
:root[data-sidebar=compact] .call-rail-item{padding-left:4px;padding-right:4px;min-width:0}
:root[data-sidebar=compact] .call-rail-item>svg{width:25px;height:25px;flex:none}
.call-rail-item:disabled{opacity:.4;cursor:default}
@media(min-width:761px){.call-workspace{grid-template-columns:clamp(12px,2.8vw,40px) var(--app-rail-width) minmax(0,1fr) 20px}.call-workspace.panel-open{grid-template-columns:clamp(12px,2.8vw,40px) var(--app-rail-width) 14px 374px 14px minmax(0,1fr) 20px}}
@media(prefers-reduced-motion:reduce){.sidebar-toggle{transition:none}}

/* Compact call navigation, shared by Desktop and the matching Web surface. */
.call-rail {
 --rail-item-height:72px;
 align-self:start;
 height:min(100%,490px);
 padding:12px 8px;
 border:1px solid rgba(var(--theme-text-primary-rgb,244,244,246),.12);
 border-radius:20px;
 background:rgba(var(--theme-surface-card-rgb,12,12,14),.9);
 box-shadow:0 12px 30px rgba(var(--theme-shadow-rgb,0,0,0),.12);
}
:root[data-theme=dark] .call-rail {background:linear-gradient(160deg,rgba(12,12,14,.95),rgba(8,8,10,.92))}
.call-rail:has(a[href="/adminservernexo"]) {height:min(100%,568px)}
.call-rail-primary {gap:6px}
.call-rail-item {
 gap:6px;font-size:11px;font-weight:600;border-radius:14px;
 transition:background-color .18s,border-color .18s,color .18s;
}
.call-rail-item svg {width:24px;height:24px;transition:transform .18s}
.call-rail-item:not(:disabled):hover svg {transform:translateY(-1px)}
.call-rail-item:not(:disabled):hover {background:rgba(var(--theme-text-primary-rgb,244,244,246),.06)}
.call-rail-item.is-active {
 border-color:rgba(var(--theme-text-primary-rgb,244,244,246),.32);
 background:rgba(var(--theme-text-primary-rgb,244,244,246),.06);
 box-shadow:inset 0 1px rgba(var(--theme-text-primary-rgb,244,244,246),.05);
}
.call-rail-item.is-active::before {
 content:'';position:absolute;left:-1px;top:24%;bottom:24%;width:3px;
 border-radius:3px;background:var(--theme-text-primary,#f4f4f6);
}
.call-rail-item:focus-visible {outline:2px solid var(--theme-focus,var(--theme-accent));outline-offset:2px}
.call-rail-utility {padding-top:10px}
.call-rail-utility::before {background:rgba(var(--theme-text-primary-rgb,244,244,246),.13)}
.call-rail-utility .call-rail-item {height:72px;min-height:0}
.call-rail-item b.rail-signal {top:12px;right:18px;width:7px;min-width:7px;height:7px;border-radius:50%}
.call-rail-item b.rail-unread {background:var(--theme-info,#339cff)}
.call-rail-item b.rail-live {background:var(--theme-success,#29db91)}
.sidebar-toggle {right:-10px;width:28px;height:32px;border-radius:9px;opacity:0;pointer-events:none;background:var(--theme-surface-elevated,#101012);transition:opacity .15s,background-color .18s,border-color .18s}
.sidebar-toggle:hover {border-color:rgba(var(--theme-text-primary-rgb,244,244,246),.4)}
.sidebar-toggle svg {width:16px;height:16px;transform:none}
:root[data-sidebar=compact] .sidebar-toggle svg path {transform:scaleX(-1);transform-origin:12px 12px}
:root[data-sidebar=compact] .call-rail-item b.rail-signal {right:7px;top:11px}
@media(min-width:761px){.call-workspace,.home-conversations {transition:grid-template-columns .22s ease}}
@media(max-width:760px),(max-height:650px){
 .call-rail {--rail-item-height:48px;height:min(100%,348px);padding:8px 5px}
 .call-rail:has(a[href="/adminservernexo"]) {height:min(100%,402px)}
 .call-rail-utility .call-rail-item {height:48px}
 .call-rail-item {gap:3px;font-size:10px}
 .call-rail-item svg {width:21px;height:21px}
}
@media(max-height:460px){
 .call-rail {--rail-item-height:34px;height:100%;padding-block:4px}
 .call-rail-primary {gap:3px}
 .call-rail-item>span {display:none}
 .call-rail-utility {padding-top:4px}
 .call-rail-utility .call-rail-item {height:34px}
}
@media(prefers-reduced-motion:reduce){.call-workspace,.home-conversations,.call-rail-item,.call-rail-item svg,.sidebar-toggle {transition:none}.call-rail-item:hover svg {transform:none}}

@media(min-width:761px){
 .call-workspace.panel-open:has(> .voice-settings),.call-workspace.panel-open:has(> .video-settings) {grid-template-columns:40px var(--app-rail-width) 16px minmax(0,1fr) 20px}
}

.call-rail:hover>.sidebar-toggle,.sidebar-toggle:focus-visible {opacity:1;pointer-events:auto}
@media (hover:none) and (pointer:coarse) {.sidebar-toggle {opacity:1;pointer-events:auto}}

/* Keep presence counts and unread messages beside the glyph in every rail size. */
.call-rail-item .rail-icon-slot {position:relative;display:block;width:25px;height:25px;font-style:normal;line-height:0}
.call-rail-item .rail-icon-slot>svg {display:block;width:100%;height:100%}
.call-rail-item .rail-icon-slot b.rail-count,
.call-rail [data-social=friends] .rail-icon-slot .social-badge {
 position:absolute;top:30%;left:auto;transform:translateY(-50%);display:grid;place-items:center;
 min-width:16px;height:16px;padding:0 3px;border-radius:999px;font-size:9px;line-height:1;font-weight:650;
 pointer-events:none;
}
.call-rail-item .rail-icon-slot b.rail-count {right:calc(100% + 3px);color:var(--theme-surface-card,#0c0c0e);background:var(--theme-text-primary,#f3f4f6)}
.call-rail [data-social=friends] .rail-icon-slot .social-badge {left:calc(100% + 3px);right:auto}
:root[data-sidebar=compact] .call-rail-item .rail-icon-slot b,
:root[data-sidebar-hover=true] .call-shell .call-rail-item .rail-icon-slot b {min-width:14px;height:14px;padding:0 1px;font-size:8px;font-family:Arial,sans-serif}
:root[data-sidebar=compact] .call-rail-item .rail-icon-slot b.rail-count,
:root[data-sidebar-hover=true] .call-shell .call-rail-item .rail-icon-slot b.rail-count {right:calc(100% + 2px)}
:root[data-sidebar=compact] .call-rail [data-social=friends] .rail-icon-slot .social-badge,
:root[data-sidebar-hover=true] .call-shell .call-rail [data-social=friends] .rail-icon-slot .social-badge {left:calc(100% + 2px)}
@media(max-width:760px),(max-height:650px){.call-rail-item .rail-icon-slot {width:21px;height:21px}}

:root[data-sidebar=compact] .call-rail-primary,
:root[data-sidebar-hover=true] .call-shell .call-rail-primary {margin-inline:-6px;padding-inline:6px}

:root[data-theme=custom] .call-rail-item .rail-icon-slot b.rail-count {color:var(--theme-surface-elevated)}
:root[data-theme=custom] .call-rail-item:is(.is-active,:hover) .rail-icon-slot b.rail-count {color:var(--theme-surface-card)}