/* ==========================================================================
   Helsuo 全站浮动导航菜单 · 唯一权威样式（float-menu.css）
  --------------------------------------------------------------------------
   由 styles.css 抽取而来：菜单由 script.js 的 initFloatMenu 动态创建，
   而部分页面（ai.html / legal.html / forum.html 等）不加载 styles.css，
   过去各自维护一份内联副本导致样式漂移。现改为全站统一引用本文件。
   规则：所有页面只保留此一处定义，页面内不要再写.float-menu-* 样式。
   非线性缓动令牌来自 motion.css（--ease-*），并自带fallback。
   ========================================================================== */
        /* ==================== 导航按钮样式 ====================
       尺寸/圆角由 --fm-size、--fm-radius 决定（float-menu.js 的 syncTriggerSize
       会测量同排控件后写入），默认值与 styles.css 的 .mode-btn 保持一致：
       36px 圆形图标按钮，保证与主题/头像等按钮同高。 */
        .float-menu-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: var(--fm-size, 36px);
            height: var(--fm-size, 36px);
            min-height: var(--fm-size, 36px);
            padding: 0;
            border-radius: var(--fm-radius, 50%);
            border: 1px solid rgba(255,255,255,0.10);
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: rgba(255,255,255,0.85);
            font-size: 16px;
            cursor: pointer;
            z-index: 9998;
            line-height: 1;
            transition: background .3s var(--ease-smooth, ease), color .3s, border-color .3s,
                        box-shadow .3s, transform .35s var(--ease-spring-soft, ease);
            white-space: nowrap;
            user-select: none;
        }
        .float-menu-trigger:focus { outline: none; }
        .float-menu-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        /* 顶栏里的「回到首页」图标按钮：与菜单按钮同一尺寸变量，保证同排等高 */
        .fm-home-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: var(--fm-size, 36px);
            height: var(--fm-size, 36px);
            min-height: var(--fm-size, 36px);
            padding: 0;
            border-radius: var(--fm-radius, 50%);
            border: 1px solid var(--border-color, rgba(255,255,255,0.12));
            background: rgba(255,255,255,0.06);
            color: var(--text-secondary, rgba(255,255,255,0.85));
            font-size: 16px;
            line-height: 1;
            text-decoration: none;
            transition: background .3s var(--ease-smooth, ease), color .3s, border-color .3s, transform .35s var(--ease-spring-soft, ease);
        }
        .fm-home-btn:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .float-menu-trigger svg { transition: transform .45s var(--ease-spring, ease); }
        .float-menu-trigger:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            box-shadow: 0 2px 12px rgba(73,177,245,0.3);
            transform: translateY(-1px);
        }
        /* 打开态：图标旋转 90° 变形，按钮点亮 */
        .float-menu-trigger.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            box-shadow: 0 2px 14px rgba(73,177,245,0.4);
        }
        .float-menu-trigger.active svg { transform: rotate(90deg); }

        /* 无导航栏页面（ai.html 等）的悬浮入口样式由 script.js 注入
           （这些页面不加载 styles.css，且 body 为 flex，需 fixed 脱离文档流） */
        .navbar.scrolled .float-menu-trigger {
            color: var(--text-primary);
            border-color: var(--border-color);
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .navbar.scrolled .float-menu-trigger:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        [data-mode="light"] .float-menu-trigger {
            border-color: var(--border-color);
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--text-secondary);
        }
        [data-mode="light"] .float-menu-trigger:hover {
            background: var(--accent);
            color: #fff;
        }
        [data-mode="dark"] .float-menu-trigger {
            border-color: var(--border-color);
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--text-secondary);
        }
        [data-mode="dark"] .float-menu-trigger:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        /* 「回到首页」图标按钮必须与 .float-menu-trigger / .hs-bell-btn 一样有主题覆盖：
           基础规则是白色 currentColor 图标 + 近白背景，缺亮色规则时白天模式下
           图标与白色导航栏融为一体只剩一圈淡边框（曾出现的「白天看不到」问题）。 */
        [data-mode="light"] .fm-home-btn {
            border-color: var(--border-color);
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--text-secondary);
        }
        [data-mode="light"] .fm-home-btn:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        [data-mode="dark"] .fm-home-btn {
            border-color: var(--border-color);
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--text-secondary);
        }
        [data-mode="dark"] .fm-home-btn:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        /* 菜单面板 */
        .float-menu-panel {
            position: fixed;
            /* 收起态用 transform 移出屏幕（不再用负 right）：
               定位在视口外会撑出横向滚动区域，移动端可把整页拖向右侧 */
            right: 0;
            transform: translateX(100%);
            visibility: hidden;
            top: 0;
            /* 250px：兼顾「不遮挡内容」与描述文字完整（最长描述约 121px） */
            width: 250px;
            max-width: 86vw;
            height: 100vh;
            background:
                radial-gradient(130% 90px at 50% 0%, rgba(73,177,245,0.12), transparent 70%),
                rgba(30,30,35,0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            z-index: 9997;
            /* 非线性：指数减速滑入 */
            transition: transform .5s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)), visibility 0s linear .5s;
            display: flex;
            flex-direction: column;
            border-radius: 20px 0 0 20px;
            box-shadow: -4px 0 32px rgba(0,0,0,0.3);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding: 18px 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.18) transparent;
        }
        .float-menu-panel::-webkit-scrollbar { width: 6px; }
        .float-menu-panel::-webkit-scrollbar-track { background: transparent; }
        .float-menu-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }
        .float-menu-panel.open {
            transform: translateX(0);
            visibility: visible;
            /* 打开用柔性回弹：轻微过冲后收敛，抽屉手感 */
            transition: transform .55s var(--ease-spring-soft, cubic-bezier(0.22,1.2,0.36,1)), visibility 0s;
            box-shadow: -8px 0 48px rgba(0,0,0,0.45);
        }
        [data-mode="light"] .float-menu-panel {
            background:
                radial-gradient(130% 90px at 50% 0%, rgba(73,177,245,0.08), transparent 70%),
                rgba(255,255,255,0.97);
            box-shadow: -4px 0 32px rgba(0,0,0,0.1);
        }
        [data-mode="light"] .float-menu-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); }

        /* 菜单头部 */
        .float-menu-header {
            text-align: center;
            flex: 0 0 auto;
            padding: 20px 20px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 6px;
        }
        [data-mode="light"] .float-menu-header {
            border-bottom-color: rgba(0,0,0,0.08);
        }
        .float-menu-header .menu-logo {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 2px;
            /* 渐变流光文字（背景裁切到字形） */
            background: linear-gradient(100deg, #49b1f5, #a78bfa 35%, #f472b6 65%, #49b1f5);
            background-size: 220% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: var(--accent);
            animation: fmLogoFlow 5s linear infinite;
        }
        @keyframes fmLogoFlow { to { background-position: 220% center; } }
        .float-menu-header .menu-sub {
            font-size: 11px;
            color: #888;
            margin-top: 4px;
            letter-spacing: 1px;
        }
        [data-mode="light"] .float-menu-header .menu-sub { color: #8a94a6; }

        /* 菜单项：图标块 + 标题/描述双行 + 右侧滑入箭头
           行距疏朗（上下留白充足），内容超出时面板上下滑动 */
        .float-menu-item {
            position: relative;
            display: flex;
            /* 关键：面板是 flex column 容器，必须禁止项被压缩，
               否则高度不足时整列菜单会被挤扁（图标/文字被 overflow 裁掉） */
            flex: 0 0 auto;
            align-items: center;
            gap: 12px;
            margin: 7px 12px;
            padding: 13px 14px;
            border-radius: 12px;
            overflow: hidden;
            color: #bbb;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            letter-spacing: 1px;
            transition: background .3s var(--ease-smooth, ease),
                        color .3s,
                        transform .4s var(--ease-spring-soft, ease);
        }
        /* 左侧主题色高亮条：hover 时以弹簧曲线展开 */
        .float-menu-item::before {
            content: '';
            position: absolute;
            left: 0; top: 50%;
            width: 3px; height: 0;
            border-radius: 0 4px 4px 0;
            background: var(--fm-color, var(--accent));
            box-shadow: 0 0 8px var(--fm-color, var(--accent));
            transform: translateY(-50%);
            transition: height .4s var(--ease-spring, ease);
        }
        .float-menu-item:hover {
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--fm-color, #49b1f5) 15%, transparent),
                color-mix(in srgb, var(--fm-color, #49b1f5) 5%, transparent) 72%,
                transparent);
            color: #fff;
            transform: translateX(3px);
        }
        .float-menu-item:hover::before { height: 56%; }
        .float-menu-item:active { transform: translateX(3px) scale(0.98); }
        .float-menu-item i {
            width: 20px;
            text-align: center;
            font-size: 15px;
            color: var(--accent);
            opacity: 0.8;
            transition: opacity 0.25s;
        }
        .float-menu-item:hover i {
            opacity: 1;
        }
        .float-menu-item .fm-icon {
            flex: 0 0 auto;
            width: 34px; height: 34px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            background: color-mix(in srgb, var(--fm-color, #49b1f5) 16%, transparent);
            color: var(--fm-color, var(--accent));
            font-size: 15px;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fm-color, #49b1f5) 22%, transparent);
            transition: background .3s, box-shadow .3s, transform .45s var(--ease-spring, ease);
        }
        .float-menu-item .fm-icon img { width: 20px; height: 20px; object-fit: contain; }
        .float-menu-item:hover .fm-icon {
            background: color-mix(in srgb, var(--fm-color, #49b1f5) 28%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fm-color, #49b1f5) 45%, transparent),
                        0 4px 14px color-mix(in srgb, var(--fm-color, #49b1f5) 35%, transparent);
            transform: scale(1.1) rotate(-6deg);
        }
        .float-menu-item .fm-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .float-menu-item .fm-label {
            font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .5px;
            transition: transform .4s var(--ease-spring-soft, ease);
        }
        .float-menu-item:hover .fm-label { transform: translateX(2px); }
        .float-menu-item .fm-desc {
            font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
            opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            transition: opacity .3s;
        }
        .float-menu-item:hover .fm-desc { opacity: .85; }
        /* 右侧箭头：hover 时滑入 */
        .float-menu-item .fm-arrow {
            margin-left: auto;
            flex: 0 0 auto;
            width: 14px; height: 14px;
            color: var(--fm-color, var(--accent));
            opacity: 0;
            transform: translateX(-8px);
            transition: opacity .3s, transform .45s var(--ease-spring-soft, ease);
        }
        .float-menu-item:hover .fm-arrow { opacity: .9; transform: translateX(0); }
        [data-mode="light"] .float-menu-item {
            color: #555;
        }
        [data-mode="light"] .float-menu-item:hover {
            color: #2c3e50;
        }

        /* 打开时逐项错落入场（translate 为独立变换属性，不与 hover 的 transform 冲突） */
        .float-menu-panel.open .float-menu-header,
        .float-menu-panel.open .float-menu-item,
        .float-menu-panel.open .float-menu-divider,
        .float-menu-panel.open .float-menu-footer {
            animation: fmItemIn .55s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
            animation-delay: calc(min(var(--i, 0), 10) * 45ms + 60ms);
        }
        @keyframes fmItemIn {
            from { opacity: 0; translate: 28px 0; filter: blur(4px); }
            to   { opacity: 1; translate: 0 0; filter: blur(0); }
        }

        .float-menu-divider {
            height: 1px;
            flex: 0 0 auto;
            background: rgba(255,255,255,0.06);
            margin: 13px 22px;
        }
        [data-mode="light"] .float-menu-divider {
            background: rgba(0,0,0,0.06);
        }

        /* 菜单底部 */
        .float-menu-footer {
            margin-top: auto;
            flex: 0 0 auto;
            padding: 13px 24px;
            border-top: 1px solid rgba(255,255,255,0.08);
            text-align: center;
            font-size: 11px;
            color: #666;
        }
        [data-mode="light"] .float-menu-footer {
            border-top-color: rgba(0,0,0,0.08);
            color: #8a94a6;
        }

        /* 遮罩层：淡入同时渐增背景模糊
           注意：z-index 必须低于 .navbar(999)，否则菜单打开后遮罩会盖住
           导航栏里的触发按钮，导致无法再次点击关闭（只能点遮罩/Esc） */
        .float-menu-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.35);
            z-index: 998;
            opacity: 0;
            pointer-events: none;
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            transition: opacity .4s var(--ease-smooth, ease),
                        backdrop-filter .4s var(--ease-smooth, ease),
                        -webkit-backdrop-filter .4s var(--ease-smooth, ease);
        }
        .float-menu-overlay.show {
            opacity: 1;
            pointer-events: auto;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }

/* ---------- 无导航栏页面的顶部入口 ----------
   优先级：.nav-right → [data-fm-slot] → 本容器（视口右上角）。
   外观完全复用 .float-menu-trigger 胶囊样式，保证全站视觉统一。
   固定定位必须存在：这些页面 body 常是 display:flex（如 ai.html），
   直接挂 body 会变成「全高细条」把主内容挤窄。 */
.float-menu-fab {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9996;
    display: flex;
    line-height: 0;
    /* 运行时避让会改right，用弹簧曲线平滑让位，避免瞬移 */
    transition: opacity .3s var(--ease-smooth, ease),
                right .45s var(--ease-spring-soft, cubic-bezier(0.22,1.2,0.36,1));
}
.float-menu-fab .float-menu-trigger {
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
/* 菜单打开时淡出，避免压在面板之上 */
.float-menu-fab:has(.float-menu-trigger.active) { opacity: 0; pointer-events: none; }

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .float-menu-panel { width: 84vw; max-width: 320px; }
    .float-menu-trigger,
    .fm-home-btn { width: var(--fm-size, 32px); height: var(--fm-size, 32px); min-height: var(--fm-size, 32px); font-size: 14px; }
    .float-menu-item { margin: 6px 10px; padding: 12px 12px; }
    .float-menu-fab { top: 10px; right: 10px; }
}