/* ==========================================================================
   移动端适配
   覆盖：手机竖屏 / 大屏手机 / 平板 / 横屏 / 刘海屏安全区 / 键盘弹出
   设计原则：
     · 用 dvh/svh 替代 vh，避免移动浏览器地址栏导致底部被遮挡
     · 所有贴边元素考虑 safe-area，避免被刘海与home 条遮住
     · 触摸目标不小于 44px（iOS HIG / Material 建议）
     · 聊天区优先，输入区永远可见
   ========================================================================== */

/* --------------------------------------------------------------------------
   视口高度变量
   dvh：动态视口高度，地址栏收起/展开时自动变化（Chrome 108+ / Safari 16+）
   svh：最小视口高度，地址栏展开时的高度（作为不支持 dvh 时的兜底）
   -------------------------------------------------------------------------- */
:root {
    --vh: 1vh;
    --app-height: 100vh;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --tap: 44px;           /* 最小触摸目标 */
}

@supports (height: 100dvh) {
    :root { --app-height: 100dvh; }
}
@supports (height: 100svh) {
    :root { --app-height: 100svh; }
}

/* iOS 11.0-15.x 无 env() 支持时的静态兜底 */
@supports not (top: env(safe-area-inset-top)) {
    :root {
        --safe-t: 0px; --safe-b: 0px; --safe-l: 0px; --safe-r: 0px;
    }
}

/* 全局：移动端禁止橡皮筋横向滚动 */
html, body {
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ==========================================================================
   平板 / 中等屏幕（769px ~ 1024px）
   ========================================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    .chat-panel { width: 320px; right: 18px; }
    .input-dock { width: 520px; }
    .floating-nav { left: 16px; }
}

/* ==========================================================================
   大屏手机 / 小平板（≤ 768px）
   核心：聊天面板从右侧悬浮改为底部抽屉，输入区固定底部
   ========================================================================== */
@media (max-width: 768px) {
    :root { --app-height: 100dvh; }

    body {
        height: var(--app-height);
        overflow: hidden;
    }

    /* ---- 顶栏：压缩高度，贴顶避开刘海 ---- */
    .top-bar {
        padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 10px calc(12px + var(--safe-l));
        gap: 8px;
    }
    /* 顶栏资源项可横向滚动，避免小屏挤爆 */
    .top-right {
        display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* 渐隐提示还有更多 */
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
        mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    .top-right::-webkit-scrollbar { display: none; }
    .resource-item {
        flex-shrink: 0;
        min-height: var(--tap);
        padding: 6px 11px;
        font-size: 11.5px;
        white-space: nowrap;
    }
    /* 登录入口在移动端保持可见（它是操作入口，不能被截断） */
    .resource-item.guest-cta { order: 99; }
    /* 数值徽章可适当缩小 */
    .top-right .resource-item:not(.guest-cta) i { margin: 0; }

    /* ---- 悬浮按钮组：移到底部左侧，避免与顶栏抢空间 ---- */
    .floating-nav {
        left: calc(12px + var(--safe-l));
        bottom: auto;
        top: calc(58px + var(--safe-t));
        gap: 10px;
    }
    .fab {
        width: var(--tap); height: var(--tap);
        border-radius: 14px;
    }
    .fab i { font-size: 16px; }
    /* 移动端 hover 无意义，标签常显 */
    .fab-label {
        display: none;
    }

    /* ---- 聊天面板：悬浮在待机形象上方（不再贴底）----
       只声明定位与外观，高度/显隐由文件末尾的 @media(max-width:768px)
       统一控制，避免两处规则互相覆盖。 */
    .chat-panel {
        position: fixed;
        left: calc(8px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        top: var(--chat-top, calc(var(--safe-t) + 62px));
  /* --chat-top 由 mobile.js 实测待机形象底边后写入，未测量时回落到顶栏下方 */
        bottom: auto;
        width: auto;
        height: auto;
        border-radius: 16px;
        z-index: 80;
  transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .3, 1);
    }
    /* 折叠状态：淡出上移，而不是 display:none（保留动画） */
    .chat-panel.collapsed {
   transform: translateY(-14px);
   opacity: 0;
    pointer-events: none;
    }
    .chat-head {
        padding: 9px 12px;
        gap: 9px;
        position: relative;
    }
    .chat-head .av { width: 30px; height: 30px; }
    .chat-body { padding: 10px 12px; gap: 10px; }
    .chat-foot { padding: 9px 12px; }

    /* ---- 输入区：固定底部，避让home 条 ---- */
    .input-dock {
        position: fixed;
        left: calc(8px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        bottom: calc(10px + var(--safe-b));
        width: auto;
        max-width: none;
        transform: none;
        gap: 7px;
        z-index: 95;
    }
    .input-bar {
        padding: 8px 10px;
        border-radius: 22px;
    }
    #msgInput {
        font-size: 16px;          /* ≥16px 可阻止 iOS 聚焦时自动放大 */
        padding: 9px 12px;
        min-height: var(--tap);
    }
    .icon-btn {
        width: var(--tap); height: var(--tap);
        min-width: var(--tap);
    }
    /* 快捷语横向滚动，露出下一张提示 */
    .quick-replies {
        justify-content: flex-start;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .quick-reply {
        flex-shrink: 0;
        min-height: 34px;
        padding: 7px 13px;
        font-size: 12px;
    }
    .ai-tag {
        font-size: 10px;
        text-align: center;
        line-height: 1.5;
    }
    /* 公告条在移动端限高，超出可滚动 */
    #sysNoticeBar {
        max-height: 3.2em;
        overflow-y: auto;
        font-size: 11px !important;
    }

    /* ---- 情绪控制台：横向滚动，不换行 ---- */
    .emotion-console {
        left: calc(8px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        bottom: auto;
        top: calc(104px + var(--safe-t));
        transform: none;
        width: auto;
        max-width: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 9px;
        border-radius: 18px;
    }
    .emotion-console::-webkit-scrollbar { display: none; }
    .emo-btn {
        flex-shrink: 0;
        min-height: 36px;
        padding: 7px 12px;
        font-size: 11.5px;
    }

    /* ---- 技能快捷面板 ---- */
    .skill-dock {
        left: calc(8px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        bottom: calc(96px + var(--safe-b));
        width: auto;
        max-height: 52dvh;
    }

    /* ---- 共同记忆面板 ---- */
    #memoryPanel {
        left: calc(8px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        bottom: calc(96px + var(--safe-b));
        top: auto;
        width: auto;
        max-height: 60dvh;
    }

    /* ---- 左侧游戏/通话区：移动端改为底部横排 ---- */
    .bottom-left {
        display: none;
    }

    /* ---- 角色切换器与各类弹窗 ---- */
    .modal {
        width: calc(100vw - 20px);
        max-width: none;
        max-height: calc(100dvh - 40px - var(--safe-t) - var(--safe-b));
        border-radius: 18px;
    }
    .modal-body { padding: 14px; }
    .modal-foot {
        position: sticky;
        bottom: 0;
        background: rgba(16, 16, 26, .96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding-bottom: calc(14px + var(--safe-b));
    }

    /* ---- 聊天气泡：手机上放宽宽度 ---- */
    .msg-row { max-width: 88%; }
    .msg-av { width: 30px; height: 30px; }
    .bubble { font-size: 13px; padding: 10px 12px; }

    /* ---- 通话球 ---- */
    .call-orb {
        width: 56px; height: 56px;
        bottom: calc(150px + var(--safe-b));
        right: calc(14px + var(--safe-r));
    }

    /* ---- 解锁提示改为顶部胶囊，避免遮挡内容 ---- */
    #unlock {
        top: calc(10px + var(--safe-t));
        bottom: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 9px 14px;
        border-radius: 22px;
        background: rgba(12, 12, 20, .88);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, .1);
        z-index: 600;
    }
    #unlock .orb {
        width: 32px; height: 32px; border-radius: 50%;
        font-size: 14px;
        animation: none;
        box-shadow: none;
    }
    #unlock h2 { font-size: 13px; letter-spacing: 0; }
    #unlock p { font-size: 10.5px; }

    /* ---- 录音浮层 ---- */
    .rec-overlay { padding: 20px; }
    .rec-wave { height: 64px; }

    /* ---- 表单元素加大触摸区 ---- */
    .input, .textarea, select.input {
        font-size: 16px;        /* 阻止 iOS 聚焦缩放 */
        min-height: var(--tap);
        padding: 11px 13px;
    }
    .btn { min-height: var(--tap); padding: 11px 16px; }
    .btn-sm { min-height: 36px; padding: 8px 12px; font-size: 12px; }
    .switch { width: 50px; height: 28px; }
}

/* ==========================================================================
   小屏手机（≤ 400px）：iPhone SE / 小屏安卓
   ========================================================================== */
@media (max-width: 400px) {
    :root { --tap: 40px; }

    .top-bar { padding-left: calc(8px + var(--safe-l)); padding-right: calc(8px + var(--safe-r)); }
    .resource-item { padding: 5px 9px; font-size: 11px; }

    .chat-panel {
        height: auto;
        left: calc(5px + var(--safe-l));
        right: calc(5px + var(--safe-r));
    }
    .input-dock {
        left: calc(5px + var(--safe-l));
        right: calc(5px + var(--safe-r));
        bottom: calc(8px + var(--safe-b));
    }
    .emotion-console {
        left: calc(5px + var(--safe-l));
        right: calc(5px + var(--safe-r));
        top: calc(98px + var(--safe-t));
    }
    /* 状态按钮文字进一步压缩 */
    .emo-btn { padding: 6px 10px; font-size: 11px; }

    .msg-row { max-width: 92%; }
    .msg-av { width: 27px; height: 27px; }
    .msg-sender { font-size: 10px; }
    .bubble { font-size: 12.5px; padding: 9px 11px; }

    .modal { width: calc(100vw - 12px); }
    .char-badge .av { width: 44px; height: 44px; }
    #charBadge .name { font-size: 15px; }
}

/* ==========================================================================
   超小屏 / 老设备（≤ 320px）
   ========================================================================== */
@media (max-width: 320px) {
    :root { --tap: 38px; }
    .chat-panel { height: auto; }
    .emo-btn span { display: none; }   /* 只留图标 */
    .fab { width: 38px; height: 38px; }
}

/* ==========================================================================
   横屏手机
   高度极其有限，布局需要改为「左右分栏」而非纵向堆叠
   ========================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --tap: 38px; }

    /* 顶栏更紧凑 */
    .top-bar { padding-top: calc(6px + var(--safe-t)); padding-bottom: 6px; }

    /* 悬浮按钮移到左侧竖排，占用最小宽度 */
    .floating-nav {
        top: calc(46px + var(--safe-t));
        left: calc(8px + var(--safe-l));
    }
    .fab { width: 38px; height: 38px; }

    /* 聊天面板：横屏时同样悬浮在待机上方，保持「一条消息」高度 */
    .chat-panel {
        left: calc(8px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        top: var(--chat-top, calc(46px + var(--safe-t)));
        bottom: auto;
        width: auto;
        height: auto;
        max-height: min(52dvh, 150px);
    }
    .chat-panel .chat-body { max-height: 70px; }
    .chat-panel.collapsed {
        transform: translateY(-12px);
    }

    /* 输入区贴底横向铺开 */
    .input-dock {
        left: calc(46px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        bottom: calc(6px + var(--safe-b));
    }

    /* 情绪控制台横向排布在输入上方 */
    .emotion-console {
        left: calc(46px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        top: auto;
        bottom: calc(64px + var(--safe-b));
    }

    /* 解锁提示改为右下角，避免遮挡 */
    #unlock {
        top: auto;
        bottom: calc(6px + var(--safe-b));
        left: auto;
        right: calc(8px + var(--safe-r));
    }
}

/* ==========================================================================
   触控设备：去掉 hover 依赖的效果，改为点击反馈
   （避免移动端 hover 状态「粘住」不消失）
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* 悬浮才出现的标签在触屏上没有意义，直接隐藏 */
    .fab-label { display: none !important; }
    .msg-time:hover .msg-time-text { display: inline; }

    /* 按钮按下反馈 */
    .btn:active,
    .icon-btn:active,
    .fab:active,
    .emo-btn:active {
        transform: scale(.96);
        opacity: .9;
    }
    /* 卡片点击反馈 */
    .switcher-item:active,
    .resource-item:active,
    .quick-reply:active {
        transform: scale(.985);
    }
    /* 禁用 hover 上浮 */
    .resource-item.guest-cta:hover { background: rgba(var(--accent-rgb), .16); color: var(--accent); transform: none; }
    .btn:hover, .icon-btn:hover { background: rgba(255, 255, 255, .07); }
}

/* ==========================================================================
   键盘弹出：避免输入区被顶出屏幕
   （iOS 会把 visualViewport 缩小，用 JS 配合 --kb-offset）
   ========================================================================== */
@media (max-width: 768px) {
    /* JS 检测软键盘后会给 body 加 .kb-open */
    body.kb-open .chat-panel {
        height: auto;
    }
    /* 键盘弹出时可视高度骤减，进一步压缩消息区 */
    body.kb-open .chat-panel .chat-body { max-height: 62px; }
    body.kb-open .emotion-console,
    body.kb-open .quick-replies {
        display: none;
    }
    body.kb-open #stageFallback img {
        max-height: 46%;
        width: min(34%, 200px);
    }
}

/* ==========================================================================
   降低动效偏好：尊重系统设置
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    #stage .vid-fallback img { animation: none; }
    #stage .vid { transition: opacity .12s linear; }
}

/* ==========================================================================
   高对比度模式
   ========================================================================== */
@media (prefers-contrast: more) {
    .bubble.left,
    .msg-row.left .msg-av { border-color: rgba(255, 255, 255, .35); }
    .input-bar { border-color: rgba(255, 255, 255, .3); }
}

/* ==========================================================================
   打印（不常用，但避免错乱）
   ========================================================================== */
@media print {
    #stage, .top-bar, .floating-nav, .input-dock, .floating-nav { display: none !important; }
    .chat-panel { position: static; width: 100%; height: auto; border: none; }
}

/* ==========================================================================
   管理后台移动端增强
   ========================================================================== */
@media (max-width: 820px) {
    /* 顶部横向导航条：贴顶避让刘海，触摸区放大 */
    .adm-sidebar {
        position: sticky;
        top: 0;
        z-index: 50;
        padding-top: var(--safe-t);
        background: rgba(12, 12, 20, .96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .adm-sidebar::-webkit-scrollbar { display: none; }
    .adm-nav { padding: 8px calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l)); }
    .adm-nav-item {
        min-height: var(--tap);
        padding: 10px 13px;
        font-size: 13px;
        flex-shrink: 0;
    }

    /* 内容区留出底部安全区 */
    .adm-main {
        padding: 14px calc(12px + var(--safe-r)) calc(20px + var(--safe-b)) calc(12px + var(--safe-l));
    }
    /* 统计卡两列而非一列，信息密度更合适 */
    .adm-stats { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .adm-stat { padding: 12px; }
    .adm-stat .v { font-size: 20px; }
    .adm-stats.sm-row { grid-template-columns: repeat(2, 1fr); }

    /* 表格横向滚动，避免列被压扁 */
    .adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .adm-table { min-width: 560px; }

    /* 弹窗表单单列化 */
    .adm-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 30px - var(--safe-t) - var(--safe-b)); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .input, .textarea, select.input { font-size: 16px; min-height: var(--tap); }
    .btn { min-height: var(--tap); }

    /* 图表容器加高，避免手机上图表挤压得看不清 */
    .box { height: auto; min-height: 220px; }
    #mapBox { height: 340px !important; }
    .vid-preview-stage { height: 200px; }
}

@media (max-width: 400px) {
    .adm-stats { grid-template-columns: 1fr 1fr; }
    .adm-stat .v { font-size: 18px; }
    .adm-stat .l { font-size: 10px; }
}

/* ==========================================================================
   登录页移动端
   ========================================================================== */
@media (max-width: 768px) {
    body.auth-page {
        padding: calc(14px + var(--safe-t)) calc(12px + var(--safe-r))
                 calc(20px + var(--safe-b)) calc(12px + var(--safe-l));
        align-items: flex-start;
        min-height: 100dvh;
    }
    .auth-page .wrap { max-width: 100%; gap: 12px; }
    .auth-page .card {
        padding: 22px 18px 18px;
        border-radius: 18px;
    }
    .auth-page .logo { width: 48px; height: 48px; font-size: 20px; border-radius: 16px; }
    .auth-page h1 { font-size: 17px; }
    .auth-page .sub { font-size: 11.5px; margin-bottom: 16px; }
    /* 输入框 16px 防止 iOS 聚焦缩放 */
    .auth-page .input { font-size: 16px; padding: 12px 13px; min-height: var(--tap); }
    .auth-page .btn { min-height: var(--tap); padding: 13px 16px; font-size: 14px; }
    .auth-page .tab { padding: 11px 0; font-size: 13px; min-height: var(--tap); }
    .auth-page .code-row { flex-direction: column; gap: 8px; }
    /* 验证码按钮改为整行，竖屏下横向空间不够 */
    .auth-page .code-row .btn { width: 100%; }
    .auth-page .tips { padding: 13px 14px; gap: 8px; }
    .auth-page .tip { font-size: 11px; }
    /* 说明区在手机上是次要的，收起以突出表单 */
    .auth-page .tips { display: none; }
}

@media (max-width: 400px) {
    .auth-page .card { padding: 18px 14px 14px; }
    .auth-page .sub { display: none; }
}

/* 横屏手机：登录页改为左右两栏，避免滚动 */
@media (max-height: 480px) and (orientation: landscape) {
    body.auth-page { align-items: center; padding-top: calc(8px + var(--safe-t)); }
    .auth-page .card { padding: 16px 18px; }
    .auth-page .logo { width: 38px; height: 38px; font-size: 16px; }
    .auth-page h1 { font-size: 15px; margin-bottom: 3px; }
    .auth-page .sub { display: none; }
    .auth-page .field { margin-bottom: 9px; }
    .auth-page .tips { display: none; }
}

/* ==========================================================================
   移动端：隐藏悬浮按钮组，聊天框改为「待机区上方的悬浮条」
   —— 手机屏幕小，完整聊天框会盖住角色形象。
   改为：默认常驻显示，只占「一条信息」的高度，悬浮在待机形象上方；
        消息区内部可滚动，新消息自动滚到底部。
   ========================================================================== */
@media (max-width: 768px) {
    /* 桌面悬浮按钮组整体隐藏（快捷技能/共同记忆/角色切换） */
    .floating-nav { display: none; }

    /* 聊天记录入口：仅移动端可见，固定在右下角安全区内 */
    .fab-chat-toggle {
        display: flex;
        position: fixed;
        right: calc(14px + var(--safe-r));
        bottom: calc(112px + var(--safe-b));
  width: 46px; height: 46px;
    border-radius: 50%;
        background: rgba(var(--accent-rgb), .9);
        color: #16161f;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
        z-index: 88;
        align-items: center;
     justify-content: center;
    }
    .fab-chat-toggle i { color: #16161f; font-size: 17px; }
    .fab-chat-toggle .fab-label { display: none; }
    /* 已展开聊天时按钮变为「收起」语义 */
    .fab-chat-toggle.open {
        background: rgba(255, 255, 255, .16);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .fab-chat-toggle.open i { color: #fff; }

    /* 音乐按钮：.floating-nav 在移动端整体隐藏，
       这里让它单独可见，固定在聊天按钮上方，避免功能不可达。 */
    #fabMusic {
        display: flex !important;
        position: fixed;
        right: calc(14px + var(--safe-r));
        bottom: calc(168px + var(--safe-b));
        width: 42px; height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .16);
        box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
        z-index: 88;
        align-items: center; justify-content: center;
    }
    #fabMusic i { color: #fff; font-size: 15px; }
    #fabMusic .fab-label { display: none; }
    #fabMusic.active { background: rgba(var(--accent-rgb), .92); }
    #fabMusic.active i { color: #16161f; }
    /* 播放中时图标轻微律动，暗示正在放歌 */
    #fabMusic.playing i { animation: musicPulse 2.4s ease-in-out infinite; }
    @keyframes musicPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.16); opacity: .72; }
    }

    /* ---- 聊天框：默认显示，悬浮在屏幕垂直居中 ---- */
    .chat-panel {
 display: flex;
        position: fixed;
        /* --chat-top 由 mobile.js 按「(屏高 - 面板高) / 2」实测写入，
           未测量前（JS 未跑/极早期）回落到顶栏下方。
           不能直接用 top:50% —— 面板高度随消息内容变化，会导致整体偏上。 */
        top: var(--chat-top, calc(var(--safe-t) + 62px));
        left: calc(8px + var(--safe-l));
        right: calc(8px + var(--safe-r));
        bottom: auto;
        width: auto;
  height: auto;
        /* 只显示「一条信息」的高度，不占满半屏，角色画面完整可见 */
        max-height: min(42dvh, 320px);
 border-radius: 16px;
        z-index: 80;
        transform: none;

     /* 30% 透明：让待机形象透过聊天框可见。
      注意：整体 opacity 会连文字一起变淡到几乎不可读，
          因此这里只降低「背板与边框」的不透明度，
  文字保持全不透明 —— 视觉上同样是半透明玻璃，但内容清晰可辨。 */
        background: rgba(18, 18, 28, var(--chat-glass, .3));
        border: 1px solid rgba(255, 255, 255, .08);
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .28);

        transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .3, 1);
    }
    /* 文字与头像不参与透明，保证可读性 */
.chat-panel .chat-head,
    .chat-panel .chat-body { opacity: 1; }
    /* 气泡底色同步降低透明度，形成整体通透感 */
.chat-panel .bubble {
   background: rgba(255, 255, 255, .06);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .chat-panel .bubble.right {
        background: rgba(var(--accent-rgb), .34);
    }
    /* 文字颜色略微提亮，抵消背板透明带来的对比度损失 */
    .chat-panel .bubble,
.chat-panel .chat-head .info b { color: rgba(255, 255, 255, .95); }
    .chat-panel .chat-head .info span { color: rgba(255, 255, 255, .68); }

    /* 收起态：淡出并微微上移，而不是 display:none（保留动画） */
    .chat-panel.collapsed {
        transform: translateY(-14px);
        opacity: 0;
        pointer-events: none;
    }
    /* 展开态：右下角按钮点开，可查看完整聊天记录 */
    .chat-panel.expanded {
        max-height: min(62dvh, 460px);
    }
    .chat-panel.expanded .chat-body {
  max-height: calc(min(62dvh, 460px) - 58px);
    }
    /* 展开时不再显示聊天框头部多余的折叠箭头（FAB 已接管） */
    .chat-panel.expanded .chat-head::after { content: none; }

    .chat-panel .chat-body {
        /* flex 子项默认 min-height:auto 会被内容撑开，
           必须显式压缩，否则「只显示一条高度」不生效。 */
        flex: 0 1 auto;
        min-height: 0;
      /* 一条消息 ≈ 头像行 + 气泡两行 ≈ 78px */
        max-height: 92px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* 最新消息对齐到底部（配合 JS 自动滚动） */
.chat-panel .chat-body > .msg-row:last-child { scroll-margin-bottom: 8px; }

    /* 隐藏聊天框底部的「清空 / 技能」按钮：
       手机上操作空间有限，这两个入口已分别由设置页与 FAB 承担。 */
    .chat-panel .chat-foot { display: none; }
    /* 移动端顶栏不再有「折叠」按钮（由右下角 FAB 接管） */
    .chat-head #chatToggle { display: none; }
}

/* 平板（769~1024）空间尚可，保留悬浮按钮但缩小 */
@media (min-width: 769px) and (max-width: 1024px) {
    .floating-nav .fab { width: 40px; height: 40px; }
    .floating-nav { display: flex; }
    .fab-chat-toggle { display: none; }
}

/* 桌面端不显示移动端专用按钮 */
@media (min-width: 769px) {
    .fab-chat-toggle { display: none !important; }
}

/* ==========================================================================
   PWA 安装引导条 / 更新提示
   ========================================================================== */
.pwa-install-bar,
.pwa-update-bar {
    position: fixed;
    left: calc(50% );
    transform: translateX(-50%);
    bottom: calc(96px + var(--safe-b));
    z-index: 700;
    display: none;
    align-items: center;
    gap: 11px;
    width: min(94vw, 480px);
    padding: 11px 13px;
    border-radius: 16px;
    background: rgba(18, 18, 28, .96);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
    animation: pwaSlideUp .34s cubic-bezier(.2, .8, .3, 1);
}
.pwa-install-bar.ready,
.pwa-install-bar.ios,
.pwa-update-bar { display: flex; }
@keyframes pwaSlideUp {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.pwa-install-bar img {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
}
.pwa-txt { flex: 1; min-width: 0; line-height: 1.5; }
.pwa-txt b { display: block; font-size: 13px; color: #fff; }
.pwa-txt span {
    font-size: 10.5px; color: var(--text-dim);
    display: block; margin-top: 2px;
}
.pwa-btn {
    flex-shrink: 0; padding: 8px 15px; border: none; border-radius: 11px;
    background: var(--accent); color: #16161f;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: opacity .2s;
}
.pwa-btn:disabled { opacity: .5; cursor: not-allowed; }
.pwa-x {
    flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 9px;
    background: rgba(255, 255, 255, .08); color: var(--text-dim);
    cursor: pointer; font-size: 12px; font-family: inherit;
}
.pwa-update-bar { bottom: calc(20px + var(--safe-b)); }
.pwa-update-bar > i { color: var(--accent); font-size: 15px; }
.pwa-update-bar > span { flex: 1; font-size: 12px; color: var(--text-sub); }

/* 桌面端：提示条放右下角，不挡视线 */
@media (min-width: 769px) {
    .pwa-install-bar,
    .pwa-update-bar {
        left: auto; right: 22px; bottom: 22px; transform: none;
        width: 400px;
    }
    @keyframes pwaSlideUp {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}