/* Desktop labeled navigation and centered remaining workspace. Mobile rules remain in sidebar.css. */
@media (min-width: 761px){
  :root{
    --ksan-rail: 100px;
    --ksan-gap: 28px;
    --ksan-canvas: 980px;
    --ksan-group: calc(var(--ksan-rail) + var(--ksan-gap) + var(--ksan-canvas));
    --ksan-top: 96px;
  }

  /* Reset every legacy shell/grid rule to one deterministic desktop frame. */
  body.has-site-header .ksan-shell,
  body.has-site-header[data-view] .ksan-shell,
  body.has-site-header.ai-view-active .ksan-shell{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:20px 0 40px!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  /* All views share the center of the area to the right of navigation. */
  body.has-site-header .ksan-main,
  body.has-site-header[data-view] .ksan-main,
  body.has-site-header.ai-view-active .ksan-main{
    display:block!important;
    box-sizing:border-box!important;
    width:min(var(--ksan-canvas), calc(100% - 160px))!important;
    max-width:var(--ksan-canvas)!important;
    min-width:0!important;
    margin-left:max(144px,calc((100% - var(--ksan-group))/2 + 128px))!important;
    margin-right:auto!important;
    padding:0!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }

  /* Every mounted view starts from the same canvas and is centered inside it. */
  body.has-site-header .ksan-main > #personalView,
  body.has-site-header .ksan-main > #wall2010View,
  body.has-site-header .ksan-main > #aiWorkspace,
  body.has-site-header .ksan-main > #chatsView,
  body.has-site-header .ksan-main > #notificationsView,
  body.has-site-header .ksan-main > #loungeView,
  body.has-site-header .ksan-main > #communitiesView,
  body.has-site-header .ksan-main > #settingsView,
  body.has-site-header .ksan-main > #walletView,
  body.has-site-header .ksan-main > #walletHistoryView,
  body.has-site-header .ksan-main > #platinumBuyView,
  body.has-site-header .ksan-main > #paymentHistoryView,
  body.has-site-header .ksan-main > #voucherCreateView,
  body.has-site-header .ksan-main > #voucherHistoryView{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:var(--ksan-canvas)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
  }

  /* Efир is the reference reading width, centered inside the shared 860px canvas. */
  body[data-view="communities"] #communitiesView.efir-view{
    width:100%!important;
    max-width:760px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Profile can use the full shared canvas. */
  body[data-view="wall"] #wall2010View,
  body[data-view="personal"] #wall2010View{
    width:100%!important;
    max-width:860px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* AI iframe always occupies the exact same content column as other views. */
  body[data-view="ai"] #aiWorkspace,
  body.ai-view-active #aiWorkspace{
    display:block!important;
    width:100%!important;
    max-width:860px!important;
    min-width:0!important;
    height:calc(100dvh - var(--ksan-top) - 20px)!important;
    min-height:320px!important;
    margin:0 auto!important;
    position:relative!important;
    inset:auto!important;
    border:0!important;
    background:#000!important;
    transform:none!important;
  }


  body.has-site-header #appSidebar.ksan-sidebar {
    position:fixed!important; top:96px!important; bottom:16px!important;
    left:max(16px,calc((100% - 1108px)/2))!important; right:auto!important;
    width:100px!important; min-width:100px!important; max-width:100px!important;
    height:calc(100dvh - 112px)!important; min-height:0!important; max-height:none!important;
    display:block!important; margin:0!important; padding:0!important; transform:none!important;
    background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important;
    contain:none!important; overflow:visible!important; z-index:120!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__brand-logo-wrap,
  body.has-site-header #appSidebar .ksan-sidebar__market-widget,
  body.has-site-header #appSidebar .ksan-sidebar__followers,
  body.has-site-header #appSidebar .ksan-sidebar__divider,
  body.has-site-header #appSidebar .ksan-sidebar__logout,
  .ksan-sidebar-viewport-divider { display:none!important; }
  body.has-site-header #appSidebar .ksan-sidebar__dock {
    position:absolute!important; left:0!important; right:0!important; top:0!important; bottom:74px!important;
    width:100%!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important;
    margin:0!important; padding:0!important; display:block!important; transform:none!important;
    background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__nav {
    position:absolute!important; top:50%!important; left:0!important; right:auto!important; bottom:auto!important;
    transform:translateY(-50%)!important; width:100%!important; min-width:0!important; max-width:none!important;
    height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important;
    display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important;
    gap:8px!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__item,
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item,
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item:has(.ksan-sidebar__badge:not([hidden])) {
    position:relative!important; width:58px!important; min-width:58px!important; max-width:58px!important;
    height:clamp(38px,6.5vh,58px)!important; min-height:0!important; flex:0 0 auto!important;
    display:grid!important; place-items:center!important; margin:0!important; padding:0!important;
    border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
    color:#ddd!important; transform:none!important; outline:none!important; text-decoration:none!important;
  }
  /* Small groups retain the open rail while giving its spacing a clear rhythm. */
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item[data-key="ai"],
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item[data-key="communities"],
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item[data-key="communities"]:has(.ksan-sidebar__badge:not([hidden])) {
    margin-bottom:16px!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item.is-active,
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item.is-active:has(.ksan-sidebar__badge:not([hidden])),
  body.has-site-header #appSidebar .ksan-sidebar__bottom .ksan-sidebar__item.is-active {
    background:rgba(255,255,255,.045)!important; border-radius:14px!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__item::before,
  body.has-site-header #appSidebar .ksan-sidebar__item::after { display:none!important; }
  body.has-site-header #appSidebar .ksan-sidebar__item.is-active::before {
    content:""!important; display:block!important; position:absolute!important; left:4px!important; top:50%!important;
    right:auto!important; bottom:auto!important; width:2px!important; height:12px!important; transform:translateY(-50%)!important;
    border-radius:2px!important; background:#ffffffd1!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item[data-key="ai"]::after,
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item[data-key="communities"]::after {
    content:""!important; display:block!important; position:absolute!important;
    left:50%!important; right:auto!important; top:auto!important; bottom:-12px!important;
    width:28px!important; height:1px!important; transform:translateX(-50%)!important;
    background:rgba(255,255,255,.14)!important; border:0!important; box-shadow:none!important;
    pointer-events:none!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__icon,
  body.has-site-header #appSidebar .ksan-sidebar__icon img {
    position:static!important; inset:auto!important; transform:none!important; width:38px!important; height:38px!important;
    min-width:38px!important; min-height:38px!important; max-width:38px!important; max-height:38px!important;
    display:block!important; flex:0 0 38px!important; object-fit:contain!important; margin:0!important; padding:0!important;
    background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__icon img { opacity:.55!important; filter:none!important; }
  body.has-site-header #appSidebar .ksan-sidebar__item:hover .ksan-sidebar__icon img { opacity:.82!important; filter:none!important; }
  body.has-site-header #appSidebar .ksan-sidebar__item.is-active .ksan-sidebar__icon img { opacity:1!important; filter:brightness(1.08)!important; }
  body.has-site-header #appSidebar .ksan-sidebar__item[data-key="rating"] .ksan-sidebar__icon img,
  body.has-site-header #appSidebar .ksan-sidebar__item[data-key="lounge"] .ksan-sidebar__icon img {
    width:27px!important; height:27px!important; min-width:27px!important; min-height:27px!important;
    max-width:27px!important; max-height:27px!important; margin:5.5px!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item .ksan-sidebar__label,
  body.has-site-header #appSidebar .ksan-sidebar__nav .ksan-sidebar__item.is-active .ksan-sidebar__label,
  body.has-site-header #appSidebar .ksan-sidebar__bottom .ksan-sidebar__label { display:none!important; }
  body.has-site-header #appSidebar .ksan-sidebar__badge {
    position:absolute!important; top:3px!important; right:4px!important; left:auto!important; bottom:auto!important;
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    min-width:15px!important; height:15px!important; padding:0 4px!important; margin:0!important; transform:none!important;
    border:2px solid #000!important; border-radius:10px!important; background:#bd4663!important; color:#fff!important;
    box-shadow:none!important; font:700 9px/15px Geist,system-ui,sans-serif!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__bottom {
    position:absolute!important; top:auto!important; bottom:16px!important; left:0!important; right:0!important;
    width:100%!important; display:grid!important; justify-items:center!important; margin:0!important; padding:0!important;
    background:transparent!important; border:0!important;
  }
  body.has-site-header #appSidebar[data-input="keyboard"] .ksan-sidebar__item:focus-visible { outline:1px solid #999!important; outline-offset:2px!important; }
  body.has-site-header #appSidebar .ksan-sidebar__asset-branch--personal {
    position:absolute!important; left:100px!important; top:50%!important; bottom:auto!important;
    width:220px!important; margin:0!important; padding:12px!important; background:#141414!important;
    border:1px solid #ffffff20!important; border-radius:12px!important; z-index:3!important;
  }
  @media(max-height:650px) {
    body.has-site-header #appSidebar .ksan-sidebar__nav { gap:4px!important; }
  }
  @media(max-height:460px) {
    body.has-site-header #appSidebar .ksan-sidebar__dock { overflow-y:auto!important; }
    body.has-site-header #appSidebar .ksan-sidebar__nav { top:0!important; transform:none!important; }
  }
}
@media(max-width:760px) { #appSidebar .ksan-sidebar__bottom { display:none!important; } }

/* Supplied AI character keeps its original color in every state. */
body.has-site-header #appSidebar .ksan-sidebar__item[data-key="ai"] .ksan-sidebar__icon img,
body.has-site-header #appSidebar .ksan-sidebar__item[data-key="ai"]:hover .ksan-sidebar__icon img,
body.has-site-header #appSidebar .ksan-sidebar__item[data-key="ai"].is-active .ksan-sidebar__icon img {
  opacity:1!important; filter:none!important;
}
@media(min-width:761px) {
  body.has-site-header #appSidebar .ksan-sidebar__item[data-key="ai"] .ksan-sidebar__icon {
    display:flex!important; align-items:center!important; justify-content:center!important;
  }
  body.has-site-header #appSidebar .ksan-sidebar__item[data-key="ai"] .ksan-sidebar__icon img {
    width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important;
    max-width:46px!important; max-height:46px!important; margin:0!important;
  }
}

/* v943 — supplied 4×4 atlas, desktop left menu only. No layout animation. */
#appSidebar .ksan-ai-sprite { display:none; }
@media(min-width:761px) {
  body.has-site-header #appSidebar .ksan-sidebar__item[data-key="ai"].has-ai-sprite .ksan-sidebar__icon img { display:none!important; }
  #appSidebar .has-ai-sprite .ksan-ai-sprite {
    display:block; width:52px; height:52px; flex:0 0 52px;
    background:url('../images/nav/ai-orb-sprite.webp') 0 100% / 400% 400% no-repeat;
    animation:ksan-orb-idle 3.6s steps(1,end) infinite;
    pointer-events:none;
  }
  #appSidebar .has-ai-sprite:hover .ksan-ai-sprite,
  #appSidebar[data-input="keyboard"] .has-ai-sprite:focus-visible .ksan-ai-sprite {
    animation:ksan-orb-greet 1.8s steps(1,end) infinite;
  }
}
@keyframes ksan-orb-idle {
  0%,100% { background-position:0 100%; }
  25% { background-position:33.333333% 100%; }
  50% { background-position:66.666667% 100%; }
  75% { background-position:100% 100%; }
}
@keyframes ksan-orb-greet {
  0%,100% { background-position:0 33.333333%; }
  15% { background-position:33.333333% 33.333333%; }
  30% { background-position:66.666667% 33.333333%; }
  45% { background-position:100% 33.333333%; }
  60% { background-position:0 66.666667%; }
  75% { background-position:33.333333% 66.666667%; }
  90% { background-position:66.666667% 66.666667%; }
}
@media(prefers-reduced-motion:reduce) {
  #appSidebar .has-ai-sprite .ksan-ai-sprite,
  #appSidebar .has-ai-sprite:hover .ksan-ai-sprite,
  #appSidebar[data-input="keyboard"] .has-ai-sprite:focus-visible .ksan-ai-sprite { animation:none; }
}

/* v950: a quiet white outline around the desktop navigation group. */
@media(min-width:761px) {
  body.has-site-header #appSidebar .ksan-sidebar__nav::before {
    content:""; display:block; position:absolute; inset:-12px 10px;
    border:1px solid rgba(255,255,255,.22); border-radius:24px;
    background:transparent; box-shadow:none; pointer-events:none;
  }
}
@media(min-width:761px) and (max-height:460px) {
  body.has-site-header #appSidebar .ksan-sidebar__nav::before { top:0; bottom:0; }
}