.nav{position:fixed;top:0;left:0;width:65px;height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:10px;border-radius:0 10px 10px 0;background:#0a0a0ceb;backdrop-filter:blur(10px) saturate(50%);border:var(--border);border-left:none;z-index:100;transition:width .5s ease;overflow:hidden}#sidebar{view-transition-name:sidebar}::view-transition-group(sidebar),::view-transition-old(sidebar),::view-transition-new(sidebar){animation:none!important}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open),.nav:is(.nav--picker-open,.nav--mobile-open){width:250px}.nav.nav--collapsing{width:65px!important;transition:width .2s ease!important;-webkit-transition:width .2s ease!important;-moz-transition:width .2s ease!important;-ms-transition:width .2s ease!important;-o-transition:width .2s ease!important}#content{transition:opacity .5s,filter .5s,background-color .5s;width:calc(100vw - 65px);margin-left:65px;background-color:#0000;-webkit-transition:opacity .5s,filter .5s,background-color .5s;-moz-transition:opacity .5s,filter .5s,background-color .5s;-ms-transition:opacity .5s,filter .5s,background-color .5s;-o-transition:opacity .5s,filter .5s,background-color .5s}#content.full{margin-left:0;width:100%}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open)~#content,.nav:is(.nav--picker-open,.nav--mobile-open)~#content{filter:blur(5px);opacity:.8;background-color:#00000080}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open)~#content.has-overlay-floatbar{filter:none;opacity:1;background-color:#00000040}.nav.nav--collapsing~#content,.nav.nav--collapsing~#content.has-overlay-floatbar{filter:none!important;opacity:1!important;background-color:#0000!important}.nav-logo-container{width:100%;max-width:50px;height:50px;display:flex;align-items:center;justify-content:center}.nav-logo{width:100%;filter:drop-shadow(0px 0px 2px var(--accent-color1)) drop-shadow(0px 0px 5px var(--accent-color1))}.nav-show-hover{opacity:0}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-show-hover{opacity:1}.nav-items{overflow:hidden;overflow-y:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;width:65px;gap:10px;padding:0 10px;flex:1;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s}.nav-divider{width:100%;height:1px;border:1px solid #202020}.nav-item{display:flex;width:100%;align-items:center;justify-content:flex-start;padding:10px;transition:.3s;gap:20px;cursor:var(--cursor-pointer);touch-action:manipulation;border:1px solid transparent;border-radius:8px;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s}.nav-item.disabled,.nav-group.disabled>.nav-group-toggle{opacity:.45;cursor:var(--cursor-no)}.nav-item.disabled:hover,.nav-group.disabled>.nav-group-toggle:hover{background:transparent;border:1px solid transparent}.nav-group{width:100%}.nav-group .nav-group-toggle{justify-content:flex-start}.nav-chevron{margin-left:auto;opacity:0;transform:rotate(-90deg);transition:transform .3s,opacity .3s}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-chevron{opacity:1}.nav-badge{margin-left:auto;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.16);background:#ffffff14;color:#ffffffe6;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-badge{opacity:1}.nav-badge.is-beta{color:#8fd3ff;background:#2878ff2e;border-color:#78b4ff59}.nav-badge.is-new{color:#60ff60;background:#60b4602e;border-color:#60ff6059}.nav-badge.is-soon{color:#ffd68f;background:#ffaa002e;border-color:#ffd27859}.nav-badge.is-closed{color:#ff6060;background:#d660602e;border-color:#ff606059}.nav-badge.is-count{opacity:1;min-width:18px;text-align:center;text-transform:none;letter-spacing:normal;color:var(--accent-color1);background:color-mix(in srgb,var(--accent-color1) 20%,transparent);border-color:color-mix(in srgb,var(--accent-color1) 45%,transparent)}.nav-group.expanded>.nav-group-toggle .nav-chevron{transform:rotate(0)}.nav-group-children{display:flex;flex-direction:column;gap:5px;max-height:0;overflow:hidden;transition:max-height .3s ease;-webkit-transition:max-height .3s ease;-moz-transition:max-height .3s ease;-ms-transition:max-height .3s ease;-o-transition:max-height .3s ease}.nav-group-children>.nav-item:first-child{margin-top:10px}.nav-group.active:not(.expanded)>.nav-group-children{max-height:120px}.nav-group.active:not(.expanded)>.nav-group-children>*{display:none}.nav-group.active:not(.expanded)>.nav-group-children>.nav-item.in-active-path{display:flex;margin-top:10px}.nav-group.active:not(.expanded)>.nav-group-children>.nav-group.in-active-path{display:block}.nav-group.expanded>.nav-group-children{max-height:600px}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-group-children .nav-item{padding:5px 10px}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-group-children[data-depth="1"] .nav-item{padding-left:20px}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-group-children[data-depth="2"] .nav-item{padding-left:28px}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-group-children[data-depth="3"] .nav-item{padding-left:36px}.nav-item.red:hover,.nav-item.red.active{border:1px solid #ff0000;background:#ff000040}.nav-item.red p,.nav-item.red .material-symbols-rounded{text-shadow:0px 0px 3px #ff3030,0px 0px 10px #ff0000,0px 0px 20px #ff0000}.nav-item.gold:hover,.nav-item.gold.active{border:1px solid #ffb300;background:#ffb30040}.nav-item.gold p,.nav-item.gold .material-symbols-rounded{text-shadow:0px 0px 3px #ffb300,0px 0px 10px #ffb300,0px 0px 20px #ffb300}.nav-item p{pointer-events:none;opacity:0;transition:.3s;transform:translate(10px);white-space:nowrap;text-overflow:ellipsis}.nav-item .material-symbols-rounded{text-shadow:0px 0px 3px var(--text),0px 0px 10px var(--accent-color1),0px 0px 20px var(--accent-color1);pointer-events:none;transition:.3s}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-item:hover p{transform:translate(5px)}.nav-item:hover .material-symbols-rounded:not(.nav-chevron){transform:scale(1.2)}.nav-item:hover,.nav-item.active{background:var(--accent-color-transparent);border:1px solid var(--accent-color1)}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-item p{opacity:1;transform:translate(0)}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-items{width:250px;overflow-y:auto}.nav-user{display:flex;align-items:center;justify-content:center;flex-direction:column;width:65px;padding:0 10px 10px;margin-bottom:-10px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s}.nav-user .nav-buttons{display:flex;align-items:center;justify-content:space-between;gap:10px;height:0px;width:100%;overflow:hidden;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-user{width:250px}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-buttons{height:50px}.nav-info{display:flex;width:100%;align-items:center;justify-content:flex-start;padding:0;transition:.3s;border:1px solid transparent;border-radius:8px;cursor:var(--cursor-pointer);-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s}.nav-info *{pointer-events:none}.nav-avatar-wrap{position:relative;flex-shrink:0;height:45px;width:45px}.nav-avatar-dot{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:6px;background:#0a0a0ceb;border:2.5px solid rgba(10,10,12,.92);-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px}.nav-avatar-dot.online{background:#43b581}.nav-avatar-dot.away{background:#faa61a}.nav-avatar-dot.dnd{background:#f04747}.nav-avatar-dot.invisible{background:#747f8d}.nav-user-text{display:flex;flex-direction:column;overflow:hidden;min-width:0;flex:1;padding:6px 10px}.nav-info p{opacity:0;white-space:nowrap;text-overflow:ellipsis;text-align:left;overflow:hidden;margin:0;padding:0;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open) .nav-info p{opacity:1;transform:translate(0)}.nav-info:hover{background:var(--accent-color-transparent);border-color:var(--accent-color1);cursor:var(--cursor-pointer)}.nav-user img{width:45px;height:45px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.nav-user .nav-button{width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:var(--cursor-pointer);transition:.3s;border-radius:5px;padding:20px;border:1px solid transparent;position:relative}.nav-user .nav-button:hover{background:var(--accent-color-transparent);border:1px solid var(--accent-color1)}.nav-user .nav-button .material-symbols-rounded{pointer-events:none;text-shadow:0px 0px 3px var(--text),0px 0px 10px var(--accent-color1),0px 0px 20px var(--accent-color1)}.nav-status-row{display:flex;align-items:center;width:100%;padding:5px 10px;border-radius:8px;border:1px solid transparent;cursor:var(--cursor-pointer);transition:.3s;overflow:hidden;min-height:24px}.nav-status-row:hover{background:var(--accent-color-transparent);border-color:var(--accent-color1)}.nav-status-label{text-align:left;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffffff80}.nav-status-message-preview{font-size:.75rem;color:#ffffff80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-show-hover{opacity:1}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-items{width:250px;overflow-y:auto}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-user{width:250px}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-buttons{height:50px}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-item p{opacity:1;transform:translate(0)}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-info p{opacity:1}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-chevron{opacity:1}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-badge{opacity:1}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-group-children .nav-item{padding:5px 10px}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-group-children[data-depth="1"] .nav-item{padding-left:20px}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-group-children[data-depth="2"] .nav-item{padding-left:28px}.nav:is(.nav--picker-open,.nav--mobile-open) .nav-group-children[data-depth="3"] .nav-item{padding-left:36px}.mobile-tabbar{display:none}@media screen and (max-width:768px){.nav{width:100vw;padding-left:calc(10px + env(safe-area-inset-left,0px));padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translate(-100%);transition:transform .3s ease}.nav.nav--mobile-open{width:100vw;height:calc(100vh - 56px - env(safe-area-inset-bottom,0px));transform:translate(0)}.nav.nav--mobile-open .nav-items,.nav.nav--mobile-open .nav-user{width:100%}#content,#content.full{margin-left:0;width:100%;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}.nav:not(.nav--collapsing):hover:not(.nav--mobile-open)~#content{filter:none;opacity:1;background-color:#0000}.mobile-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#0a0a0ceb;backdrop-filter:blur(10px) saturate(50%);border-top:var(--border);z-index:101}body:has(.chat-shell #chat-conversation:not(.hidden)) .mobile-tabbar{display:none}body:has(.chat-shell #chat-conversation:not(.hidden)) #content,body:has(.chat-shell #chat-conversation:not(.hidden)) #content.full{padding-bottom:0}.mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:var(--cursor-pointer);touch-action:manipulation;color:#ffffff8c}.mobile-tab .material-symbols-rounded{font-size:22px}.mobile-tab p{margin:0;padding:0;font-size:.65rem;text-shadow:none}.mobile-tab.active,.mobile-tab#mobile-tabbar-more[aria-expanded=true]{color:var(--text)}.mobile-tab.active .material-symbols-rounded,.mobile-tab#mobile-tabbar-more[aria-expanded=true] .material-symbols-rounded{text-shadow:0px 0px 3px var(--text),0px 0px 10px var(--accent-color1),0px 0px 20px var(--accent-color1)}}.profile-status-row--editable{cursor:var(--cursor-pointer);border-radius:6px;padding:4px 6px;margin:-4px -6px;transition:background .2s}.profile-status-row--editable:hover{background:var(--accent-color-transparent)}
