/* ============================================================================
   aim-sidebar-immersive.css — 沉浸式全屏页面的桌面端左侧导航栏
   ----------------------------------------------------------------------------
   适用：页面为「沉浸式全屏布局」——
         html/body overflow:hidden + galaxy-canvas + 全绝对定位元素
         （.top-bar / .brand-hero / .orb-stage / .subtitle-area / .bottom-hint）
   与通用版 aim-sidebar.css 的区别：
         通用版用 body{padding-left} 给文档流让位（普通滚动页）。
         本版**不能**那么做——沉浸式页面的元素全是绝对定位，body 加 padding 不生效，
         必须逐个挪元素位置（left 与 right 成对覆盖）。
   隔离：全部规则在 @media (min-width:1025px) 内，平板/手机沿用原顶部样式。
   回滚：目标页删掉本文件的 <link> 即恢复。
   ============================================================================ */

@media (min-width: 1025px) {

    :root {
        --imm-side-w: 220px;
    }

    /* ------------------------------------------------------------------
       1) 侧栏本体：顶部横条 → 左侧竖栏
       ------------------------------------------------------------------ */
    body .menu-wrap,
    body #menu-wrap {
        width: var(--imm-side-w) !important;
        min-width: var(--imm-side-w) !important;
        max-width: var(--imm-side-w) !important;
        height: 100vh !important;
        min-height: 0 !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        padding: 18px 0 12px !important;
        margin: 0 !important;
        text-align: left !important;
        position: fixed !important;
        box-sizing: border-box !important;
        background: rgba(11, 32, 58, .82) !important;
        backdrop-filter: blur(16px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(124, 196, 255, .16) !important;
        box-shadow: 2px 0 28px rgba(8, 24, 48, .5) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1000 !important;
    }
    body .menu-wrap::-webkit-scrollbar { width: 6px; }
    body .menu-wrap::-webkit-scrollbar-track { background: transparent; }
    body .menu-wrap::-webkit-scrollbar-thumb {
        background: rgba(124, 196, 255, .22); border-radius: 3px;
    }
    body .menu-wrap::-webkit-scrollbar-thumb:hover { background: rgba(124, 196, 255, .38); }

    body .menu-wrap-layer2 {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* ------------------------------------------------------------------
       2) 列表：横排 → 纵排
       ------------------------------------------------------------------ */
    body .menu-wrap .aim-nav-scroll,
    body .menu-wrap .js-menu-list,
    body .menu-wrap .menu-list {
        overflow: visible !important;
        white-space: normal !important;
        cursor: default !important;
        user-select: auto !important;
        padding: 0 12px !important;
        width: 100% !important;
        height: auto !important;
    }
    body .menu-wrap .aim-nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }
    body .menu-wrap .aim-nav-item {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* ------------------------------------------------------------------
       3) 链接：胶囊 → 左对齐行
       ------------------------------------------------------------------ */
    body .menu-wrap .aim-nav-link,
    body .menu-wrap .aim-nav-link-help {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 11px 14px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        border: 1px solid transparent !important;
        font-size: .95rem !important;
        white-space: normal !important;
        color: rgba(234, 244, 255, .82) !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: background .18s ease, color .18s ease, border-color .18s ease !important;
    }

    body .menu-wrap .aim-nav-link .aim-nav-icon,
    body .menu-wrap .aim-nav-link-help .aim-nav-icon {
        flex: 0 0 22px !important;
        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        flex-shrink: 0 !important;
        font-size: 1.05rem !important;
        color: rgba(159, 195, 232, .75) !important;
        text-align: center !important;
        /* 有些项在图标里叠了第二个小角标（如「智能体协作」= fa-robot + fa-users），
           必须允许溢出，否则叠加图标撑破 22px 宽度、压到右侧文字 */
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    body .menu-wrap .aim-nav-link .aim-nav-icon i,
    body .menu-wrap .aim-nav-link-help .aim-nav-icon i {
        flex: 0 0 auto !important;
    }

    body .menu-wrap .aim-nav-link .aim-nav-text,
    body .menu-wrap .aim-nav-link-help .aim-nav-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: .9rem !important;
        font-weight: 500 !important;
        color: inherit !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 悬停 / 当前项 —— 与页面蓝色调一致 */
    body .menu-wrap .aim-nav-link:hover,
    body .menu-wrap .aim-nav-link-help:hover {
        background: rgba(44, 124, 182, .22) !important;
        color: #ffffff !important;
        border-color: rgba(124, 196, 255, .3) !important;
    }
    body .menu-wrap .aim-nav-link:hover .aim-nav-icon,
    body .menu-wrap .aim-nav-link-help:hover .aim-nav-icon {
        color: #7cc4ff !important;
    }
    body .menu-wrap .aim-nav-item.active .aim-nav-link,
    body .menu-wrap .aim-nav-item.active .aim-nav-link-help {
        background: linear-gradient(100deg, rgba(31, 99, 146, .85), rgba(44, 124, 182, .7)) !important;
        color: #ffffff !important;
        border-color: rgba(124, 196, 255, .35) !important;
        box-shadow: 0 2px 12px rgba(44, 124, 182, .35) !important;
        font-weight: 600 !important;
    }
    body .menu-wrap .aim-nav-item.active .aim-nav-icon,
    body .menu-wrap .aim-nav-item.active .aim-nav-link-help .aim-nav-icon {
        color: #ffffff !important;
    }

    /* ------------------------------------------------------------------
       4) ★ 页面主体右移，避开侧栏
          —— 沉浸式页面元素全是绝对定位，body padding 无效，
             必须逐个挪。注意 left 与 right 必须**成对覆盖**：
             .top-bar / .brand-hero / .bottom-hint 原本是 left:0; right:0 撑满视口
             再靠 text-align/flex 居中；只改 left 会留下 right:0 把容器拉宽，居中点偏移。
       ------------------------------------------------------------------ */
    body .top-bar {
        top: max(14px, env(safe-area-inset-top)) !important;
        left: var(--imm-side-w) !important;
        right: 0 !important;
    }
    body .brand-hero {
        top: max(26px, 4vh) !important;
        left: var(--imm-side-w) !important;
        right: 0 !important;
    }
    body .bottom-hint {
        left: var(--imm-side-w) !important;
        right: 0 !important;
    }
    /* 圆球舞台原 left:50% 居中于整视口，现补偿侧栏宽度，使其居中于剩余区域 */
    body .orb-stage {
        left: calc(50% + var(--imm-side-w) / 2) !important;
    }
    /* 字幕区原 left:50% + translateX(-50%) 居中于整视口，同样补偿侧栏宽度 */
    body .subtitle-area {
        left: calc(50% + var(--imm-side-w) / 2) !important;
    }
    /* 角落按钮组：原为避开顶部导航栏，现贴到侧栏右侧顶部 */
    body .corner-nav {
        top: 14px !important;
        left: calc(var(--imm-side-w) + 12px) !important;
        right: auto !important;
        z-index: 900 !important;   /* 降到侧栏(1000)之下，避免压住导航 */
    }
    body .lg-badge {
        top: 56px !important;
    }
    /* 星空画布保持全屏（圆球居中已按侧栏宽度补偿） */
    body #galaxy-canvas {
        left: 0 !important;
    }
}