:root {
            --font-size: 16px;
            --vh: 1vh;
            /* 圆角体系 */
            --radius-xs: 4px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 14px;
            --radius-xl: 18px;
            --radius-pill: 999px;
            --radius-card: 16px;
            --radius-sheet: 18px;
            --radius-2xl: 24px;
            --bubble-user-sm: 4px;
            --bubble-user-lg: 20px;
            --bubble-ai-sm: 4px;
            --bubble-ai-lg: 20px;
            /* 动画 */
            --ease-standard: cubic-bezier(0.2, 0.9, 0.4, 1.1);
            --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
            --transition-base: 0.25s var(--ease-standard);
            --transition-ui: background var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
            /* 背景色 */
            --bg-body: #F7F7FB;
            --bg-header: #ffffff;
            --bg-sidebar: #fff;
            --bg-chat: linear-gradient(180deg, #F8F7FF 0%, #F3F4FA 50%, #F7F7FB 100%);
            --bg-input: #fff;
            --bg-bubble-assistant: #ffffff;
            --bg-bubble-user: var(--accent-400);
            --bg-hover: #f0f0f0;
            /* 文字色 */
            --text-primary: #333;
            --text-secondary: rgba(0,0,0,0.55);
            --text-tertiary: rgba(0,0,0,0.38);
            --text-user-bubble: white;
            /* 边框色 */
            --border-light: #e0e0e0;
            --border-lighter: #eee;
            /* 阴影 — 五层景深体系：硬边描边 + 彩色中层 + 环境光底 */
            --shadow-sm: 0 0 0 0.5px rgba(255,255,255,0.30), 0 1px 2px rgba(0,0,0,0.05);
            --shadow-card: 0 0 0 0.5px rgba(255,255,255,0.30), 0 2px 8px rgba(var(--accent-rgb),0.08), 0 1px 3px rgba(0,0,0,0.06);
            --shadow-elevated: 0 0 0 0.5px rgba(255,255,255,0.30), 0 4px 16px rgba(var(--accent-rgb),0.12), 0 2px 8px rgba(0,0,0,0.10);
            --shadow-float: 0 0 0 0.5px rgba(255,255,255,0.30), 0 8px 28px rgba(var(--accent-rgb),0.18), 0 4px 16px rgba(0,0,0,0.15);
            --shadow-deep: 0 0 0 0.5px rgba(255,255,255,0.30), 0 12px 40px rgba(var(--accent-rgb),0.22), 0 6px 24px rgba(0,0,0,0.20);
            --ring-subtle: 0 0 0 1px rgba(0,0,0,0.06);
            --focus-ring: inset 0 0 0 1px rgba(255,255,255,0.85), 0 0 0 3px rgba(var(--accent-rgb),0.35);
            --scroll-depth: 0;
            --input-spacing: 24px;
            --header-parallax: 0px;
            /* 玻璃质感 */
            --glass-edge-light: rgba(255,255,255,0.16);
            --glass-edge-dark: rgba(0,0,0,0.06);
            --glass-highlight: rgba(255,255,255,0.08);
            --glass-depth: rgba(0,0,0,0.03);
            /* 主题色 */
            --accent: #7C4DFF;
            --accent-hover: #5E35B1;
            --accent-rgb: 124, 77, 255;
            --accent-300: #9F6BFF;
            --accent-glow: rgba(var(--accent-rgb),0.15);
            /* 主题色阶 — 5级 (50-900)，JS动态计算覆盖 */
            --accent-50: hsl(258, 100%, 94%);
            --accent-100: hsl(258, 100%, 86%);
            --accent-400: #7C4DFF;
            --accent-700: hsl(258, 75%, 42%);
            --accent-900: hsl(258, 65%, 22%);
            --accent-light: var(--accent-100);
            /* 语义色 — 与主色饱和度/明度协调 */
            --color-success: hsl(145, 65%, 45%);
            --color-warning: hsl(36, 88%, 50%);
            --color-error: hsl(4, 78%, 50%);
            --color-info: hsl(220, 72%, 52%);
            /* 按钮色 */
            --btn-danger: var(--color-error);
            --btn-danger-hover: hsl(4, 70%, 42%);
            --btn-warning: var(--color-warning);
            --btn-warning-hover: hsl(36, 80%, 42%);
        }
        
        body.dark {
            /* #29 暗色极光渐变 — 色相跟随 --accent */
            background-color: var(--bg-body);
            background-image: linear-gradient(135deg,
                rgba(var(--accent-rgb), 0.05) 0%,
                rgba(var(--accent-rgb), 0.09) 25%,
                rgba(var(--accent-rgb), 0.03) 50%,
                rgba(var(--accent-rgb), 0.07) 75%,
                rgba(var(--accent-rgb), 0.05) 100%);
            background-size: 400% 400%;
            background-attachment: fixed;
            animation: auroraFlow 30s ease-in-out infinite;
            --bg-body: #0F0F1A;
            --bg-header: #141428;
            --bg-sidebar: #0E0E19;
            --bg-chat: linear-gradient(180deg, #0F0F1A 0%, #13132A 50%, #1A1A2E 100%);
            --bg-input: #141428;
            --bg-bubble-assistant: #1C1C34;
            --bg-bubble-user: var(--accent-300);
            --bg-hover: #1A1A2E;
            --text-primary: #ddd8d0;
            --text-secondary: rgba(240,232,220,0.52);
            --text-tertiary: rgba(240,232,220,0.35);
            --text-user-bubble: #ffffff;
            --border-light: #2a2a3a;
            --border-lighter: #333;
            --shadow-sm: 0 0 0 0.5px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.20);
            --shadow-card: 0 0 0 0.5px rgba(255,255,255,0.06), 0 2px 8px rgba(var(--accent-rgb),0.10), 0 1px 3px rgba(0,0,0,0.22);
            --shadow-elevated: 0 0 0 0.5px rgba(255,255,255,0.06), 0 4px 16px rgba(var(--accent-rgb),0.14), 0 2px 8px rgba(0,0,0,0.26);
            --shadow-float: 0 0 0 0.5px rgba(255,255,255,0.06), 0 8px 28px rgba(var(--accent-rgb),0.20), 0 4px 16px rgba(0,0,0,0.30);
            --shadow-deep: 0 0 0 0.5px rgba(255,255,255,0.06), 0 12px 40px rgba(var(--accent-rgb),0.25), 0 6px 24px rgba(0,0,0,0.35);
            --ring-subtle: 0 0 0 1px rgba(255,255,255,0.06);
            --focus-ring: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 3px rgba(158,122,255,0.40);
            --scroll-depth: 0;
            /* 玻璃质感 */
            --glass-edge-light: rgba(255,255,255,0.10);
            --glass-edge-dark: rgba(0,0,0,0.15);
            --glass-highlight: rgba(255,255,255,0.04);
            --glass-depth: rgba(0,0,0,0.08);
            --accent: #7C4DFF;
            --accent-hover: #5E35B1;
            --accent-rgb: 124, 77, 255;
            --accent-300: #A78BFA;
            --ripple-color: rgba(255,255,255,0.25);
            --accent-glow: rgba(var(--accent-rgb),0.2);
            --accent-50: hsl(258, 50%, 18%);
            --accent-100: hsl(258, 50%, 25%);
            --accent-400: #7C4DFF;
            --accent-700: hsl(258, 60%, 58%);
            --accent-900: hsl(258, 50%, 74%);
            --accent-light: var(--accent-100);
            --color-success: hsl(145, 55%, 52%);
            --color-warning: hsl(36, 75%, 55%);
            --color-error: hsl(4, 68%, 55%);
            --color-info: hsl(220, 60%, 58%);
            --btn-danger: var(--color-error);
            --btn-danger-hover: hsl(4, 60%, 48%);
            --btn-warning: var(--color-warning);
            --btn-warning-hover: hsl(36, 70%, 48%);
        }

        /* #31 暗色模式边缘高光: 0.5px极淡白边模拟物理玻璃反光 */
        body.dark .header,
        body.dark #sidebar,
        body.dark .bubble,
        body.dark .input-area,
        body.dark .code-block-wrapper,
        body.dark .settings-modal,
        body.dark .sp-role-card,
        body.dark .rules-panel,
        body.dark .multi-answer-panel,
        body.dark .answer-card,
        body.dark #scrollBottomBtn,
        body.dark .avatar-modal,
        body.dark .sp-popup-menu,
        body.dark .sp-preview-card,
        body.dark .msg-bottom-sheet,
        body.dark .onboarding-tooltip {
            outline: 0.5px solid rgba(255,255,255,0.04);
            outline-offset: -0.5px;
        }

        /* #33 侧边栏径向光斑 */
        #sidebar::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(
                circle 280px at calc(var(--spotlight-x, 0.5) * 100%) calc(var(--spotlight-y, 0.5) * 100%),
                rgba(var(--accent-rgb), 0.06) 0%,
                rgba(var(--accent-rgb), 0.02) 30%,
                transparent 60%
            );
            opacity: 0;
            transition: opacity 0.6s;
            border-radius: inherit;
        }
        #sidebar.spotlight-ready::before {
            opacity: 1;
        }
        body.dark #sidebar::before {
            background: radial-gradient(
                circle 280px at calc(var(--spotlight-x, 0.5) * 100%) calc(var(--spotlight-y, 0.5) * 100%),
                rgba(var(--accent-rgb), 0.10) 0%,
                rgba(var(--accent-rgb), 0.04) 30%,
                transparent 60%
            );
        }

        ::selection { background: rgba(var(--accent-rgb), 0.22); color: var(--text-primary); }
        body.dark ::selection { background: rgba(var(--accent-rgb), 0.30); }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        button {
            position: relative;
            overflow: hidden;
        }

        :where(button, a, input:not([type="checkbox"]):not([type="radio"]), textarea, select, [tabindex], [role="button"], summary):focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
            transition: box-shadow 0.2s ease;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
            font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 1;
            font-kerning: normal;
            /* #29 极光渐变背景: 3-4色混合, 周期30秒循环, 色彩取自主题色 */
            background-color: var(--bg-body);
            background-image: linear-gradient(135deg,
                rgba(var(--accent-rgb), 0.02) 0%,
                rgba(var(--accent-rgb), 0.05) 25%,
                rgba(var(--accent-rgb), 0.01) 50%,
                rgba(var(--accent-rgb), 0.04) 75%,
                rgba(var(--accent-rgb), 0.02) 100%);
            background-size: 400% 400%;
            background-attachment: fixed;
            animation: auroraFlow 30s ease-in-out infinite;
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* #28 极低饱和度呼吸动画 (light 2-4%, dark 5-8%) */

        /* 简化头部 */
        .header {
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            padding: 10px 16px;
            border-bottom: none;
            box-shadow:
                inset 0 1px 0 var(--glass-edge-light),
                inset 0 -1px 0 var(--glass-edge-dark),
                inset 0 0 30px var(--glass-depth),
                0 1px 0 rgba(0,0,0,0.02),
                0 2px 12px rgba(0,0,0,0.04);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            gap: 12px;
            position: relative;
        }
        /* #34 头部视差背景层 */
        .header::before {
            content: '';
            position: absolute;
            inset: -20px 0 -20px 0;
            background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 70%);
            transform: translateY(calc(var(--header-parallax, 0px) * 0.2));
            pointer-events: none;
            z-index: 0;
            will-change: transform;
        }

        .header h1 {
            font-size: 16px;
            color: var(--text-primary);
            font-weight: 500;
            flex: 1;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0;
        }
        .header-conv-title {
            font-size: 12px;
            color: var(--text-tertiary);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 18px;
            line-height: 1.4;
        }

        .hamburger-btn {
            background: none;
            border: none;
            font-size: 22px;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: var(--radius-md);
            color: var(--text-primary);
            flex-shrink: 0;
            transition: var(--transition-ui);
            line-height: 1;
            min-width: 38px;
            text-align: center;
            opacity: 0.55;
        }

        .hamburger-btn:hover {
            background: var(--bg-hover);
            opacity: 1;
            transform: none;
        }

        .hamburger-btn:active {
            transform: scale(0.95);
        }

        .new-chat-btn {
            font-size: 24px;
            font-weight: 300;
        }

        .header-rules-btn {
            font-size: 18px;
        }

        /* API 状态指示灯 */
        .api-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ccc;
            flex-shrink: 0;
            transition: background var(--transition-base), box-shadow var(--transition-base);
        }
        .api-status-dot.online {
            background: var(--color-success);
            box-shadow: 0 0 8px rgba(52,199,89,0.4);
        }
        .api-status-dot.generating {
            background: var(--accent);
            box-shadow: 0 0 12px var(--accent-glow);
            animation: statusPulse 1.5s ease-in-out infinite;
        }
        @keyframes statusPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.3); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        /* 侧边栏遮罩 */
        #sidebarOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1010;
            display: none;
            animation: fadeIn 0.25s var(--ease-emphasis);
        }
        
        #sidebarOverlay.show {
            display: block;
        }
        
        /* 侧边栏 */
        #sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 320px;
            height: 100vh;
            height: 100dvh;
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            z-index: 1020;
            display: flex;
            flex-direction: column;
            transform: translateX(-100%);
            opacity: 0;
            border-radius: 0 var(--radius-2xl) 0 0;
            transition: transform 0.5s var(--ease-emphasis),
                        opacity 0.35s var(--ease-standard);
            box-shadow:
                inset 0 1px 0 var(--glass-edge-light),
                inset 0 -1px 0 var(--glass-edge-dark),
                inset 0 0 30px var(--glass-depth),
                2px 0 24px rgba(0,0,0,0.12);
        }
        body.dark #sidebar {
            background: rgba(26,26,46,0.82);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow:
                inset 0 1px 0 var(--glass-edge-light),
                inset 0 -1px 0 var(--glass-edge-dark),
                inset 0 0 30px var(--glass-depth),
                inset 0 0 0 0.5px rgba(255,255,255,0.04),
                2px 0 28px rgba(0,0,0,0.30);
        }
        
        #sidebar.open {
            transform: translateX(0);
            opacity: 1;
        }
        
        .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            box-shadow: 0 1px 0 rgba(0,0,0,0.04);
            font-size: 16px;
            font-weight: 600;
            flex-shrink: 0;
        }
        
        .sidebar-close-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-tertiary);
            padding: 6px 10px;
            border-radius: var(--radius-md);
            transition: var(--transition-ui);
            position: relative;
            z-index: 1;
        }

        .sidebar-close-btn:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        .sidebar-close-btn:active {
            transform: scale(0.94);
        }

        .sidebar-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 12px 0;
        }
        
        .sidebar-section {
            padding: 16px 20px;
        }

        /* 图标导航栏（默认隐藏，>=1201px 显示） */
        .sidebar-icon-nav { display: none; }

        /* 移动端侧边栏拖拽手柄（默认隐藏，<=600px 显示） */
        .sidebar-drag-handle {
            display: none;
            width: 36px;
            height: 5px;
            border-radius: 3px;
            background: var(--border-light);
            margin: 8px auto 4px;
            flex-shrink: 0;
        }
        
        .sidebar-section-title {
            font-size: calc(var(--font-size) - 5px);
            color: var(--text-tertiary);
            font-weight: 500;
            letter-spacing: 0.5px;
            margin-bottom: 14px;
            opacity: 0.7;
        }
        
        .sidebar-divider {
            height: 1px;
            background: transparent;
            box-shadow: 0 1px 0 rgba(0,0,0,0.04);
            margin: 12px 20px;
            opacity: 0.6;
        }
        
        .sidebar-section input[type="text"] {
            width: 100%;
            padding: 11px 14px;
            border: none;
            border-radius: var(--radius-lg);
            font-size: var(--font-size);
            margin-bottom: 10px;
            background: var(--bg-body);
            box-shadow: 0 2px 10px rgba(0,0,0,.04),
                        inset 0 0 0 1px rgba(0,0,0,.05);
            transition: box-shadow var(--transition-base), background var(--transition-base);
            box-sizing: border-box;
        }

        .sidebar-section input[type="text"]:focus {
            outline: none;
            background: var(--bg-input);
            box-shadow: var(--focus-ring);
        }

        /* API Key 输入框包裹器 */
        .api-key-wrapper {
            position: relative;
            margin-bottom: 8px;
        }
        .api-key-wrapper input[type="password"],
        .api-key-wrapper input[type="text"] {
            width: 100%;
            padding: 11px 36px 11px 14px;
            border: none;
            border-radius: var(--radius-lg);
            font-size: var(--font-size);
            background: var(--bg-body);
            box-shadow: 0 2px 10px rgba(0,0,0,.04),
                        inset 0 0 0 1px rgba(0,0,0,.05);
            transition: box-shadow var(--transition-base), background var(--transition-base);
            box-sizing: border-box;
            color: var(--text-primary);
        }
        .api-key-wrapper input:focus {
            outline: none;
            background: var(--bg-input);
            box-shadow: var(--focus-ring);
        }
        .api-key-toggle {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 6px;
            line-height: 1;
            opacity: 0.5;
            transition: opacity 0.2s, background 0.2s;
        }
        .api-key-toggle:hover {
            opacity: 1;
            background: var(--bg-hover);
        }
        .api-key-copy {
            position: absolute;
            right: 34px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 14px;
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 6px;
            line-height: 1;
            opacity: 0.5;
            transition: opacity 0.2s, background 0.2s;
        }
        .api-key-copy:hover {
            opacity: 1;
            background: var(--bg-hover);
        }
        .api-key-copy.copied {
            opacity: 1;
            color: var(--color-success);
        }

        .verify-btn {
            margin-top: 6px;
            font-size: 12px;
            color: var(--accent);
        }

        .sidebar-section .sidebar-btn {
            width: 100%;
            padding: 9px 14px;
            border: none;
            border-radius: var(--radius-pill);
            font-size: calc(var(--font-size) - 3px);
            cursor: pointer;
            transition: var(--transition-ui);
            margin-bottom: 10px;
            background: var(--accent);
            color: var(--text-user-bubble);
            box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.2);
        }

        .sidebar-section .sidebar-btn:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.2);
        }

        .sidebar-section .sidebar-btn:active {
            transform: scale(0.96);
        }
        
        .sidebar-section .sidebar-btn.stop-btn {
            background: var(--btn-warning);
        }

        .sidebar-section .sidebar-btn.stop-btn:hover {
            background: var(--btn-warning-hover);
        }

        /* ===== 侧边栏头部操作按钮 ===== */
        .sidebar-header-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sidebar-settings-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-tertiary);
            padding: 6px 10px;
            border-radius: var(--radius-md);
            transition: var(--transition-ui);
            line-height: 1;
        }
        .sidebar-settings-btn:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }

        /* ===== 设置弹窗 ===== */
        .settings-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 1030;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s var(--ease-standard);
        }
        .settings-modal {
            background: var(--bg-sidebar);
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
            width: 460px;
            max-width: 92vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-elevated);
            animation: slideUp 0.25s var(--ease-standard);
        }
        .settings-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px 12px;
            font-weight: 600;
            font-size: 16px;
            box-shadow: 0 1px 0 rgba(0,0,0,0.04);
            flex-shrink: 0;
        }
        .settings-modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-tertiary);
            padding: 6px 10px;
            border-radius: var(--radius-md);
            transition: var(--transition-ui);
        }
        .settings-modal-close:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        .settings-modal-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 16px 20px;
        }
        .settings-section {
            margin-bottom: 24px;
        }
        .settings-section-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }

        /* 设置弹窗内 input/button 镜像 */
        .settings-section input[type="text"],
        .settings-section input[type="password"] {
            width: 100%;
            padding: 11px 14px;
            border: none;
            border-radius: var(--radius-lg);
            font-size: var(--font-size);
            margin-bottom: 10px;
            background: var(--bg-body);
            box-shadow: 0 2px 10px rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.05);
            transition: box-shadow var(--transition-base), background var(--transition-base);
            box-sizing: border-box;
        }
        .settings-section input[type="text"]:focus,
        .settings-section input[type="password"]:focus {
            outline: none;
            background: var(--bg-input);
            box-shadow: var(--focus-ring);
        }
        .settings-section .sidebar-btn {
            width: 100%;
            padding: 9px 14px;
            border: none;
            border-radius: var(--radius-pill);
            font-size: calc(var(--font-size) - 3px);
            cursor: pointer;
            transition: var(--transition-ui);
            margin-bottom: 10px;
            background: var(--accent);
            color: var(--text-user-bubble);
            box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.2);
        }
        .settings-section .sidebar-btn:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
        }        .settings-section .sidebar-btn.stop-btn {
            background: var(--btn-warning);
        }
        .settings-section .sidebar-btn.stop-btn:hover {
            background: var(--btn-warning-hover);
        }

        /* 更多功能下拉 */
        .more-arrow {
            display: inline-block;
            transition: transform 0.25s var(--ease-standard);
            font-size: 10px;
            vertical-align: middle;
        }
        .more-arrow.open {
            transform: rotate(180deg);
        }
        .more-features-dropdown {
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.3s var(--ease-standard);
        }
        .more-features-dropdown.open {
            max-height: 200px;
        }
        .more-feature-item {
            margin-bottom: 4px;
        }

        /* KnowledgeFlow toggle */
        .kf-toggle-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
        }
        .kf-toggle-label {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .kf-toggle-switch {
            position: relative;
            width: 44px;
            height: 24px;
            background: var(--border-light);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.2s;
            padding: 0;
            flex-shrink: 0;
        }
        .kf-toggle-switch.active {
            background: var(--accent);
        }
        .kf-toggle-track {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .kf-toggle-thumb {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.2s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .kf-toggle-switch.active .kf-toggle-thumb {
            transform: translateX(20px);
        }
        .kf-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border-light);
            flex-shrink: 0;
            transition: background 0.3s;
        }
        .kf-status-dot.online {
            background: #4ade80;
        }
        .kf-status-dot.offline {
            background: #f87171;
        }
        .kf-status-dot.checking {
            background: #fbbf24;
            animation: pulse 0.8s infinite;
        }
        .settings-hint {
            font-size: 11px;
            color: var(--text-tertiary);
            margin-top: 4px;
            line-height: 1.4;
        }

        /* KnowledgeFlow 文档管理 */
        .kf-doc-section {
            margin-top: 12px;
            border-top: 1px solid var(--border-light);
            padding-top: 10px;
        }
        .kf-doc-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .kf-doc-upload-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .kf-file-btn {
            font-size: 11px !important;
            padding: 4px 10px !important;
            flex-shrink: 0;
        }
        .kf-file-name {
            font-size: 11px;
            color: var(--text-secondary);
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .kf-splitter-select {
            font-size: 11px;
            padding: 3px 6px;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            background: var(--bg-header);
            color: var(--text-primary);
            flex-shrink: 0;
        }
        .kf-upload-btn {
            font-size: 11px !important;
            padding: 4px 10px !important;
            flex-shrink: 0;
        }
        .kf-doc-list {
            margin-top: 8px;
            max-height: 160px;
            overflow-y: auto;
        }
        .kf-doc-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 8px;
            border-radius: var(--radius-sm);
            font-size: 12px;
        }
        .kf-doc-item:hover {
            background: var(--hover-bg);
        }
        .kf-doc-name {
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        .kf-doc-delete-btn {
            background: none;
            border: none;
            color: var(--text-tertiary);
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
        }
        .kf-doc-delete-btn:hover {
            color: #ef4444;
            background: rgba(239,68,68,0.08);
        }
        .kf-doc-empty {
            font-size: 11px;
            color: var(--text-tertiary);
            padding: 8px;
            text-align: center;
        }
        .kf-doc-stats {
            margin-top: 6px;
            font-size: 11px;
            color: var(--text-tertiary);
        }

        /* 主容器 */
        #mainWrapper {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            will-change: margin-left;
            transition: margin-left 0.5s var(--ease-emphasis),
                        padding-bottom 0.2s ease-out;
        }

        /* ===== 首次加载页面入场 ===== */
        body:not(.app-ready) #mainWrapper {
            opacity: 0;
            transform: translateY(12px);
        }
        /* ===== 页面首次加载入场动画 ===== */
        @keyframes headerEnter {
            from { opacity: 0; transform: translateY(-14px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes sidebarEnter {
            from { opacity: 0; transform: translateX(-16px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes contentEnter {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes inputEnter {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes statusEnter {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* 加载前隐藏 */
        body:not(.app-ready) .header,
        body:not(.app-ready) .chat-messages,
        body:not(.app-ready) .input-area,
        body:not(.app-ready) .status { opacity: 0; }
        body:not(.app-ready) #sidebar {
            opacity: 0;
            transform: translateX(-16px);
        }

        /* 错落入场 — 头→侧栏→对话区→输入框→状态栏 */
        body.app-ready .header {
            animation: headerEnter 0.38s var(--ease-standard) 0s both;
        }
        body.app-ready #sidebar {
            animation: sidebarEnter 0.4s var(--ease-standard) 0.08s backwards;
        }
        body.app-ready .chat-messages {
            animation: contentEnter 0.45s var(--ease-standard) 0.16s both;
        }
        body.app-ready .input-area {
            animation: inputEnter 0.38s var(--ease-standard) 0.26s both;
        }
        body.app-ready .status {
            animation: statusEnter 0.3s var(--ease-standard) 0.34s both;
        }

        @media (prefers-reduced-motion) {
            body:not(.app-ready) .header,
            body:not(.app-ready) .chat-messages,
            body:not(.app-ready) .input-area,
            body:not(.app-ready) .status,
            body:not(.app-ready) #sidebar { opacity: 1; transform: none; }
            body.app-ready .header,
            body.app-ready .chat-messages,
            body.app-ready .input-area,
            body.app-ready .status,
            body.app-ready #sidebar { animation: none; }
        }

        /* 聊天消息容器 */
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 24px 24px var(--input-spacing, 24px) 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            background: transparent;
            width: 100%;
            max-width: min(900px, 92vw);
            margin: 0 auto;
            position: relative;
            contain: layout style;
            scrollbar-gutter: stable;
            overscroll-behavior: contain;
            transition: padding 0.3s ease;
        }

        /* ===== 桌面端图标侧边栏 (>=1201px) ===== */
        @media (min-width: 1201px) {
            /* 侧边栏：默认64px图标栏，悬浮展开320px */
            #sidebar {
                width: 64px;
                transform: translateX(0);
                opacity: 1;
                overflow: hidden;
                transition: width 0.35s var(--ease-emphasis) 0.1s;
            }
            #sidebar.expanded {
                width: 320px;
                overflow-y: auto;
                transition-delay: 0s;
            }

            /* 收起态：隐藏正常内容，显示图标导航 */
            #sidebar:not(.expanded) .sidebar-header,
            #sidebar:not(.expanded) .sidebar-scroll {
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s;
            }
            #sidebar.expanded .sidebar-header,
            #sidebar.expanded .sidebar-scroll {
                opacity: 1;
                pointer-events: auto;
                transition: opacity 0.25s 0.15s;
            }
            #sidebar.expanded .sidebar-icon-nav {
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.15s;
            }

            /* 隐藏遮罩和汉堡按钮 */
            #sidebarOverlay { display: none !important; }
            #hamburgerBtn { display: none; }
            #headerNewChatBtn { display: none; }

            /* 主容器：默认留出64px图标栏空间，展开时留320px */
            #mainWrapper {
                margin-left: 64px;
                transition: margin-left 0.35s var(--ease-emphasis);
            }
            #mainWrapper.sidebar-expanded {
                margin-left: 320px;
            }
            #mainWrapper.sidebar-open {
                margin-left: 320px;
            }

            /* 聊天区域居中 900px */
            .chat-messages {
                max-width: 900px;
            }

            /* 头部左侧内边距补偿（因为不再有汉堡按钮） */
            .header {
                padding-left: 20px;
            }

            /* 图标导航栏 */
            .sidebar-icon-nav {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                padding: 12px 8px;
                position: absolute;
                top: 56px;
                left: 0;
                right: 0;
                z-index: 2;
                opacity: 1;
                pointer-events: auto;
                transition: opacity 0.15s;
            }
            .sidebar-icon-btn {
                width: 48px;
                height: 48px;
                border-radius: var(--radius-md);
                border: none;
                background: transparent;
                font-size: 22px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-secondary);
                transition: var(--transition-ui);
                flex-shrink: 0;
            }
            .sidebar-icon-btn:hover {
                background: var(--bg-hover);
                color: var(--text-primary);
            }
            .sidebar-icon-btn:active {
                transform: scale(0.94);
            }

            /* 规则面板：下拉定位（JS 设置 top/right），body 前缀提权覆盖后方通用样式 */
            body .rules-panel {
                top: auto;
                right: auto;
                left: auto;
                border-radius: var(--radius-2xl);
                animation: rulesDropIn 0.25s var(--ease-standard);
                transform-origin: top right;
            }
            body .rules-panel::before {
                content: '';
                position: absolute;
                top: -6px;
                right: 24px;
                width: 12px;
                height: 12px;
                background: var(--bg-sidebar);
                transform: rotate(45deg);
                border-radius: 2px;
                box-shadow: -1px -1px 2px rgba(0,0,0,0.04);
            }
            @keyframes rulesDropIn {
                from { opacity: 0; transform: scale(0.92) translateY(-8px); }
                to   { opacity: 1; transform: scale(1) translateY(0); }
            }
        }

        /* 对话切换 — 退出动画 */
        body.app-ready .chat-messages.switch-out {
            animation: switchFadeOut 0.2s var(--ease-standard) forwards;
        }
        @keyframes switchFadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(10px); }
        }
        body.app-ready .chat-messages.switch-in {
            animation: switchFadeIn 0.25s var(--ease-standard) forwards;
        }
        @keyframes switchFadeIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* 聊天区底部虚拟环境光源 */
        .chat-messages::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 300px;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(
                ellipse 400px 180px at calc(var(--glass-lx, 0.5) * 100%) 90%,
                rgba(140, 135, 165, 0.03) 0%,
                rgba(140, 135, 165, 0.01) 40%,
                transparent 70%
            );
            opacity: 0;
            transition: opacity 0.6s;
        }
        .chat-messages.glass-ready::after {
            opacity: 1;
        }
        body.dark .chat-messages::after {
            background: radial-gradient(
                ellipse 400px 180px at calc(var(--glass-lx, 0.5) * 100%) 90%,
                rgba(130, 130, 145, 0.025) 0%,
                rgba(130, 130, 145, 0.008) 40%,
                transparent 70%
            );
        }

        /* ===== 欢迎界面 ===== */
        .welcome-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100%;
            padding: 48px 24px;
            text-align: center;
            animation: welcomeFadeIn 0.3s var(--ease-standard);
        }
        @keyframes welcomeFadeIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .welcome-icon {
            font-size: 52px;
            margin-bottom: 16px;
            animation: welcomeBounce 2s ease-in-out infinite;
        }
        @keyframes welcomeBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        .welcome-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .welcome-sub {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-bottom: 28px;
            line-height: 1.5;
        }
        .welcome-examples {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            max-width: 480px;
            margin-bottom: 24px;
        }
        .welcome-examples-label {
            width: 100%;
            font-size: 12px;
            color: var(--text-tertiary);
            margin-bottom: 4px;
        }
        .welcome-example-btn {
            padding: 8px 14px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-pill);
            background: var(--bg-input);
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .welcome-example-btn:hover {
            background: var(--bg-hover);
            color: var(--accent);
            box-shadow: 0 0 0 1px var(--accent);
        }
        .welcome-example-btn:active {
            transform: scale(0.97);
        }
        .welcome-examples .welcome-example-btn.skeleton-line {
            width: 120px;
            height: 32px;
            border-radius: var(--radius-pill);
            box-shadow: none;
            cursor: default;
            pointer-events: none;
        }
        .welcome-examples .welcome-example-btn.skeleton-line:nth-child(2) { width: 140px; }
        .welcome-examples .welcome-example-btn.skeleton-line:nth-child(3) { width: 105px; }
        .welcome-examples .welcome-example-btn.skeleton-line:nth-child(4) { width: 130px; }
        .welcome-examples .welcome-example-btn.skeleton-line:nth-child(5) { width: 115px; }
        .welcome-examples .welcome-example-btn.skeleton-line:nth-child(6) { width: 125px; }
        .welcome-hint {
            font-size: 11px;
            color: var(--text-tertiary);
            opacity: 0.7;
        }

        /* 消息气泡 */
        .message {
            display: flex;
            flex-direction: column;
            max-width: 85%;
            animation: slideIn 0.42s ease-out both;
            contain: layout style;
            content-visibility: auto;
            contain-intrinsic-size: auto 120px;
        }
        body.is-streaming .message {
            animation: none;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInLast {
            from { opacity: 0; transform: translateY(12px); }
            55%  { opacity: 1; transform: translateY(-5px); }
            80%  { transform: translateY(0); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .message.message-last {
            animation-name: slideInLast;
        }

        /* 版本切换动画 */
        .message.version-switch-out {
            animation: versionSwitchOut 0.22s var(--ease-standard) forwards;
            pointer-events: none;
        }
        @keyframes versionSwitchOut {
            from { opacity: 1; transform: scale(1) translateY(0); }
            to   { opacity: 0; transform: scale(0.95) translateY(-4px); }
        }
        .message.version-switch-in {
            animation: versionSwitchIn 0.28s var(--ease-standard);
        }
        @keyframes versionSwitchIn {
            from { opacity: 0; transform: scale(1.05) translateY(4px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        
        .user-message {
            align-self: flex-end;
        }
        
        .assistant-message {
            align-self: flex-start;
            width: 100%;
            max-width: 85%;
        }
        
        .role-label {
            font-size: calc(var(--font-size) - 4px);
            margin-bottom: 6px;
            margin-left: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .msg-time {
            font-size: calc(var(--font-size) - 5px);
            color: var(--text-tertiary);
            margin-left: 6px;
            font-weight: 400;
            opacity: 0.65;
        }
        .msg-thinking-time {
            font-size: calc(var(--font-size) - 5px);
            color: var(--accent);
            opacity: 0.55;
            margin-left: 4px;
            font-weight: 400;
        }
        body.dark .msg-thinking-time {
            opacity: 0.45;
        }
        /* 发送状态指示器 */
        .send-status {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-left: 4px;
            vertical-align: middle;
            position: relative;
        }
        .send-status.sending {
            width: 12px;
            height: 12px;
            border: 2px solid var(--text-tertiary);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: sendSpin 0.6s linear infinite;
        }
        @keyframes sendSpin {
            to { transform: rotate(360deg); }
        }
        .send-status.error {
            color: var(--color-error);
            cursor: pointer;
            font-size: 14px;
            line-height: 14px;
            font-weight: 700;
        }
        .send-status.error:hover {
            transform: scale(1.2);
        }
        .send-status.error:active {
            transform: scale(0.95);
        }
        .send-status.sent {
            color: var(--color-success);
            font-size: 12px;
            line-height: 14px;
            animation: sentFade 2s ease-out forwards;
        }
        @keyframes sentFade {
            0% { opacity: 1; }
            70% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* 推荐问题 — 玻璃拟态 + 序号徽章 + 渐进入场 */
        .suggested-group {
            align-self: flex-start;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-left: 12px;
            margin-top: 10px;
        }

        /* 分隔线/头部：渐变线 + 标签 + 渐变线 + 版本切换器 + 刷新 */
        .suggested-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 4px;
            opacity: 0;
            animation: sqFadeIn 0.35s ease-out 0.02s forwards;
        }
        .sq-divider-line {
            height: 1px;
            background: linear-gradient(to right, rgba(var(--accent-rgb), 0.35), transparent);
            border-radius: 1px;
        }
        .sq-divider-line:first-child { width: 48px; flex-shrink: 0; }
        .sq-divider-grow { flex: 1; }
        .sq-divider-label {
            font-size: 11px;
            color: var(--text-tertiary);
            white-space: nowrap;
            letter-spacing: 0.5px;
        }

        /* 版本切换器 + 刷新按钮 */
        .sq-version-switcher {
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }
        .sq-version-switcher.sq-single { display: none; }
        .sq-version-btn {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: none;
            background: rgba(0,0,0,0.04);
            color: var(--text-tertiary);
            font-size: 10px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: all 0.2s;
        }
        @media (hover: hover) {
            .sq-version-btn:hover:not(:disabled) {
                background: var(--accent-50);
                color: var(--accent);
            }
        }
        .sq-version-btn:active:not(:disabled) { transform: scale(0.9); }
        .sq-version-btn:disabled {
            opacity: 0.25;
            cursor: default;
        }
        .sq-version-counter {
            font-size: 10px;
            color: var(--text-tertiary);
            min-width: 26px;
            text-align: center;
            user-select: none;
        }
        .sq-refresh-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: color 0.2s, background 0.2s;
            flex-shrink: 0;
        }
        @media (hover: hover) {
            .sq-refresh-btn:hover {
                color: var(--accent);
                background: rgba(var(--accent-rgb), 0.08);
            }
        }
        .sq-refresh-btn:active { transform: scale(0.9); }
        .sq-refresh-btn.spinning {
            animation: sqSpin 0.6s linear infinite;
            pointer-events: none;
        }
        @keyframes sqSpin {
            to { transform: rotate(360deg); }
        }
        /* 暗色模式 */
        body.dark .sq-version-btn { background: rgba(255,255,255,0.06); }
        body.dark .sq-version-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.18); }

        /* 问题气泡 */
        .suggested-bubble {
            position: relative;
            padding: 11px 16px;
            border-radius: var(--radius-md);
            background: rgba(0, 0, 0, 0.015);
            border: 0.5px solid rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
            font-size: 13px;
            line-height: 1.55;
            cursor: pointer;
            max-width: 340px;
            align-self: flex-start;
            opacity: 0;
            animation: sqSlideIn 0.38s var(--ease-standard) forwards;
            transition: background 0.25s var(--ease-standard),
                        border-color 0.25s var(--ease-standard),
                        transform 0.25s var(--ease-standard),
                        box-shadow 0.25s var(--ease-standard);
        }


        @keyframes sqSlideIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes sqFadeIn {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes sqPopOut {
            0%   { opacity: 1; transform: scale(1); }
            20%  { opacity: 1; transform: scale(1.04); }
            100% { opacity: 0; transform: scale(0.7); }
        }
        .suggested-bubble.sq-popping {
            animation: sqPopOut 0.28s var(--ease-standard) forwards;
            pointer-events: none;
        }

        @media (hover: hover) {
            .suggested-bubble:hover {
                background: rgba(0, 0, 0, 0.035);
                border-color: rgba(0, 0, 0, 0.12);
                transform: translateX(3px);
                box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
            }
        }
        .suggested-bubble:active {
            transform: scale(0.98);
        }

        /* 暗色模式 */
        body.dark .suggested-bubble {
            background: rgba(255, 255, 255, 0.025);
            border-color: rgba(255, 255, 255, 0.06);
        }
        body.dark .suggested-bubble:hover {
            background: rgba(255, 255, 255, 0.045);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 2px 18px rgba(0, 0, 0, 0.15);
        }

        .msg-tokens {
            font-size: calc(var(--font-size) - 5px);
            color: var(--text-tertiary);
            margin-left: 4px;
            font-weight: 400;
        }
        
        .user-message .role-label {
            text-align: right;
            margin-right: 12px;
        }
        
        .bubble {
            padding: 14px 18px;
            border-radius: var(--bubble-user-lg);
            word-wrap: break-word;
            font-size: var(--font-size);
            line-height: 1.6;
            position: relative;
        }

        .user-message .bubble {
            background: linear-gradient(160deg, var(--accent) 0%, var(--accent-hover) 100%);
            color: var(--text-user-bubble);
            font-weight: 600;
            border-radius: var(--bubble-user-lg) var(--bubble-user-lg) var(--bubble-user-sm) var(--bubble-user-lg);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.22),
                0 0 0 0.5px rgba(255,255,255,0.25),
                0 2px 8px rgba(var(--accent-rgb),0.15),
                0 1px 3px rgba(0,0,0,0.10);
            border: 1px solid rgba(255,255,255,0.15);
            --gloss-x: calc(var(--glass-lx, 0.5) * 100%);
            --gloss-y: calc(var(--glass-ly, 0.5) * 100%);
            transition: --gloss-x 0.3s ease-out, --gloss-y 0.3s ease-out;
        }
        .user-message .bubble::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            z-index: 0;
            background: radial-gradient(
                ellipse 150px 100px at calc(var(--glass-lx, 0.5) * 100%) 130%,
                rgba(255, 255, 255, 0.10) 0%,
                transparent 55%
            );
        }
        .user-message .bubble::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            z-index: 0;
            background: radial-gradient(
                ellipse 80px 50px at var(--gloss-x, 50%) var(--gloss-y, 100%),
                rgba(255, 255, 255, 0.22) 0%,
                rgba(255, 255, 255, 0.06) 30%,
                transparent 60%
            );
        }

        .assistant-message .bubble {
            background: linear-gradient(160deg, rgba(250,250,252,0.55) 0%, rgba(250,250,252,0.92) 100%);
            color: var(--text-primary);
            font-weight: 400;
            border-radius: var(--bubble-ai-lg) var(--bubble-ai-lg) var(--bubble-ai-lg) var(--bubble-ai-sm);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.20),
                0 0 0 0.5px rgba(255,255,255,0.30),
                0 2px 8px rgba(var(--accent-rgb),0.08),
                0 1px 3px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.06);
            --gloss-x: calc(var(--glass-lx, 0.5) * 100%);
            --gloss-y: calc(var(--glass-ly, 0.5) * 100%);
            transition: --gloss-x 0.3s ease-out, --gloss-y 0.3s ease-out;
        }
        .assistant-message .bubble::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            z-index: 0;
            background: radial-gradient(
                ellipse 200px 140px at calc(var(--glass-lx, 0.5) * 100%) 130%,
                rgba(255, 255, 255, 0.08) 0%,
                transparent 65%
            );
        }
        .assistant-message .bubble::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            z-index: 0;
            background: radial-gradient(
                ellipse 100px 60px at var(--gloss-x, 50%) var(--gloss-y, 100%),
                rgba(255, 255, 255, 0.14) 0%,
                rgba(255, 255, 255, 0.04) 30%,
                transparent 55%
            );
        }
        
        /* Markdown 样式 */
        .bubble h1, .bubble h2, .bubble h3, .bubble h4 {
            margin: 12px 0 6px 0;
            font-weight: 600;
            position: relative;
            padding-left: 14px;
            line-height: 1.3;
        }
        
        .bubble h1 { font-size: 4.236em; }

        .bubble h1::before, .bubble h2::before, .bubble h3::before, .bubble h4::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            border-radius: 2px;
            animation: headingBarIn 0.5s var(--ease-standard) both;
        }

        .bubble h1::before { width: 4px; height: 70%; background: var(--accent); transform: translateY(-50%); animation-name: headingBarIn; }
        .bubble h2::before { width: 3px; height: 65%; background: var(--accent); opacity: 0.8; transform: translateY(-50%); animation-name: headingBarIn; }
        .bubble h3::before { width: 3px; height: 60%; background: var(--accent); opacity: 0.6; transform: translateY(-50%); animation-name: headingBarIn; }
        .bubble h4::before { width: 2px; height: 55%; background: var(--accent); opacity: 0.5; transform: translateY(-50%); animation-name: headingBarIn; }

        @keyframes headingBarIn {
            from { transform: translateY(-50%) scaleY(0); }
            to { transform: translateY(-50%) scaleY(1); }
        }
        .bubble h2 { font-size: 2.618em; }
        .bubble h3 { font-size: 1.618em; }
        
        .bubble p {
            margin: 6px 0;
            line-height: 1.65;
            hanging-punctuation: first last;
        }
        
        /* #17 图片模糊占位: 加载中模糊，完成后平滑锐化 */
        .bubble img.blur-loading {
            filter: blur(12px);
            background: var(--bg-hover);
            min-width: 80px;
            min-height: 40px;
            transition: filter 0.6s ease;
        }
        .bubble img.img-loaded {
            filter: none;
        }

        .bubble ul, .bubble ol {
            margin: 6px 0;
            padding-left: 20px;
        }
        
        .bubble li {
            margin: 3px 0;
        }
        
        .bubble blockquote {
            position: relative;
            border-left: none;
            padding: 10px 14px 10px 16px;
            margin: 10px 0;
            color: var(--text-secondary);
            background: linear-gradient(105deg,
                rgba(0, 0, 0, 0.02) 0%,
                rgba(0, 0, 0, 0.008) 40%,
                transparent 100%);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        }

        .bubble blockquote::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            border-radius: 3px 0 0 3px;
            background: linear-gradient(180deg,
                #9B8EC0 0%,
                rgba(145, 135, 170, 0.35) 50%,
                rgba(145, 135, 170, 0.10) 100%);
        }

        /* Nested blockquote — shifted hue */
        .bubble blockquote blockquote {
            background: linear-gradient(105deg,
                rgba(0, 0, 0, 0.015) 0%,
                transparent 100%);
        }
        .bubble blockquote blockquote::before {
            background: linear-gradient(180deg,
                rgba(145, 135, 170, 0.40) 0%,
                rgba(145, 135, 170, 0.20) 50%,
                rgba(145, 135, 170, 0.05) 100%);
        }
        
        .bubble table {
            border-collapse: separate;
            border-spacing: 0;
            margin: 10px 0;
            width: 100%;
            font-size: calc(var(--font-size) - 2px);
            border-radius: var(--radius-sm);
            overflow: hidden;
            box-shadow: var(--ring-subtle);
        }

        .bubble th, .bubble td {
            border-bottom: 1px solid rgba(0,0,0,0.06);
            border-right: 1px solid rgba(0,0,0,0.04);
            padding: 8px 10px;
            text-align: left;
        }
        .bubble th:last-child,
        .bubble td:last-child {
            border-right: none;
        }

        .bubble th {
            background: linear-gradient(180deg,
                rgba(145, 135, 170, 0.03) 0%,
                rgba(145, 135, 170, 0.01) 100%);
            font-weight: 600;
            color: var(--text-primary);
            position: sticky;
            top: 0;
            z-index: 1;
            border-bottom: 2px solid rgba(145, 135, 170, 0.06);
        }

        .bubble tr:nth-child(even) td {
            background: rgba(145, 135, 170, 0.02);
        }

        .bubble tbody tr {
            transition: background 0.15s ease;
        }
        .bubble tbody tr:hover td {
            background: rgba(145, 135, 170, 0.06);
        }

        .bubble thead tr th {
            background: linear-gradient(180deg,
                rgba(145, 135, 170, 0.03) 0%,
                rgba(145, 135, 170, 0.01) 100%);
        }
        
        .bubble a {
            color: var(--accent);
            text-decoration: none;
            background-image: linear-gradient(var(--accent), var(--accent));
            background-size: 0% 1px;
            background-position: 0% 100%;
            background-repeat: no-repeat;
            transition: background-size 0.3s ease;
        }

        .bubble a:hover {
            background-size: 100% 1px;
        }
        
        /* 代码块容器 */
        .code-block-wrapper {
            position: relative;
            margin: 10px 0;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-card);
        }
        .code-block-wrapper:hover {
            box-shadow: var(--shadow-elevated);
        }

        .code-block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            background: var(--bg-hover);
            padding: 6px 12px;
            font-size: calc(var(--font-size) - 3px);
        }

        .code-language {
            color: var(--text-secondary);
            font-weight: 500;
        }

        .code-line-count {
            color: var(--text-tertiary);
            font-size: calc(var(--font-size) - 4px);
            margin-left: auto;
            margin-right: 8px;
        }

        .copy-button {
            --ripple-color: rgba(255,255,255,0.35);
            background: var(--accent);
            color: var(--text-user-bubble);
            border: none;
            padding: 4px 12px;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: calc(var(--font-size) - 4px);
            opacity: 0;
            transform: translateX(6px);
            transition: opacity 0.2s var(--ease-standard),
                        transform 0.25s var(--ease-emphasis),
                        background var(--transition-ui);
            white-space: nowrap;
        }

        .code-block-wrapper:hover .copy-button {
            opacity: 1;
            transform: translateX(0);
        }

        .copy-button:hover {
            background: var(--accent-hover);
            transform: translateX(0) scale(1.04);
        }
        .copy-button:active {
            transform: translateX(0) scale(0.94);
        }

        .copy-button.copied {
            background: var(--color-success);
            opacity: 1;
            transform: translateX(0);
        }

        /* Code line numbers */
        .code-line {
            display: block;
            position: relative;
            padding-left: 3.2em;
            min-height: 1.2em;
        }
        .code-line:hover {
            background: rgba(var(--accent-rgb), 0.04);
        }
        .line-number {
            position: absolute;
            left: 0;
            top: 0;
            width: 2.4em;
            padding-right: 8px;
            text-align: right;
            color: var(--text-tertiary);
            user-select: none;
            pointer-events: none;
            opacity: 0.55;
        }
        .line-number::before {
            content: attr(data-line);
        }
        .code-line:hover .line-number {
            opacity: 0.85;
            color: var(--accent);
        }

        /* 流式传输时代码块打字机光条 */
        .streaming-message .code-block-wrapper::after {
            content: '';
            display: block;
            height: 2px;
            background: var(--accent);
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            animation: typewriterPulse 1.2s ease-in-out infinite;
            box-shadow: 0 0 6px var(--accent-glow);
        }
        @keyframes typewriterPulse {
            0%, 100% { opacity: 0.15; }
            50% { opacity: 0.85; }
        }
        
        .bubble pre {
            margin: 0;
            padding: 12px;
            background: #f8f8f8;
            overflow-x: auto;
            font-size: calc(var(--font-size) - 2px);
            line-height: 1.4;
        }
        
        .bubble code {
            font-family: 'SF Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
            background: #f0f0f0;
            padding: 2px 4px;
            border-radius: 3px;
            font-size: calc(var(--font-size) - 2px);
        }
        
        .bubble pre code {
            background: none;
            padding: 0;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "liga" 0, "calt" 0;
        }
        .bubble :not(pre) > code {
            font-feature-settings: "liga" 0, "calt" 0;
        }

        /* Custom cursors — desktop */
        @media (pointer: fine) {
            .code-block-wrapper,
            .code-block-wrapper pre,
            .code-block-wrapper code {
                cursor: copy;
            }
        }

        /* 内联代码 */
        .bubble :not(pre) > code {
            background: #f0f0f0;
            color: #e74c3c;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.9em;
            font-variant-numeric: tabular-nums;
        }
        
        /* 消息操作栏 */
        .message-actions {
            display: flex;
            gap: 6px;
            margin-top: 6px;
            margin-left: 14px;
            opacity: 0;
            transition: opacity var(--transition-base);
        }
        
        .assistant-message:hover .message-actions,
        .user-message:hover .message-actions,
        .message-actions.visible {
            opacity: 1;
        }
        
        .regenerate-btn, .edit-btn {
            background: rgba(0,0,0,0.03);
            border: none;
            color: var(--text-secondary);
            padding: 3px 10px;
            border-radius: var(--radius-pill);
            font-size: calc(var(--font-size) - 4px);
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .regenerate-btn:hover, .edit-btn:hover {
            background: var(--accent-50);
            color: var(--accent);
        }
        .regenerate-btn:active, .edit-btn:active {
            transform: scale(0.95);
        }

        .regenerate-btn:disabled, .edit-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* KnowledgeFlow 原始内容 */
        .raw-kf-content {
            margin: 8px 0 0 14px;
            border: 1px solid var(--border-color, #e0e0e0);
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .raw-kf-header {
            font-size: calc(var(--font-size) - 3px);
            color: var(--text-secondary);
            padding: 8px 12px;
            background: var(--bg-header);
            border-bottom: 1px solid var(--border-color, #e0e0e0);
        }
        .raw-kf-body {
            padding: 12px;
            font-size: var(--font-size);
            line-height: var(--line-height);
            color: var(--text-secondary);
            background: var(--bg-bubble-assistant);
            max-height: 50vh;
            overflow-y: auto;
        }

        /* 版本切换器 */
        .version-switcher {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 6px;
            margin-left: 14px;
            transition: opacity var(--transition-base);
        }
        .version-switcher.single-version {
            display: none;
        }
        .version-btn {
            background: rgba(0,0,0,0.03);
            border: none;
            color: var(--text-secondary);
            width: 26px;
            height: 26px;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .version-btn:hover:not(:disabled) {
            background: var(--accent-50);
            color: var(--accent);
        }
        .version-btn:active:not(:disabled) {
            transform: scale(0.92);
        }
        .version-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        .version-counter {
            font-size: calc(var(--font-size) - 3px);
            color: var(--text-tertiary);
            min-width: 32px;
            text-align: center;
            user-select: none;
            cursor: default;
            padding: 2px 4px;
            border-radius: 4px;
            transition: background 0.15s;
        }
        .version-counter:hover {
            background: rgba(0,0,0,0.04);
        }
        .version-delete-btn {
            background: none;
            border: none;
            color: var(--text-tertiary);
            font-size: 11px;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.2s;
        }
        .version-switcher:hover .version-delete-btn,
        .assistant-message:hover .version-delete-btn {
            opacity: 0.5;
        }
        .version-delete-btn:hover {
            opacity: 1 !important;
            color: var(--btn-danger);
            background: rgba(255,59,48,0.08);
        }
        .version-delete-btn:active {
            transform: scale(0.88);
        }
        /* 暗色模式适配 */
        body.dark .version-btn {
            background: rgba(255,255,255,0.04);
        }
        body.dark .version-btn:hover:not(:disabled) {
            background: rgba(var(--accent-rgb),0.15);
        }
        body.dark .version-counter:hover {
            background: rgba(255,255,255,0.04);
        }
        body.dark .version-delete-btn:hover {
            background: rgba(255,59,48,0.15);
        }
        /* 移动端版本切换器 */
        @media (max-width: 600px) {
            .version-switcher {
                gap: 4px;
                margin-left: 10px;
            }
            .version-switcher.single-version {
                display: none;
            }
            .version-btn {
                width: 30px;
                height: 30px;
                font-size: 14px;
            }
            .version-delete-btn {
                opacity: 0.5;
            }
        }

        /* AI消息编辑态 */
        .bubble.editing {
            border: 2px solid var(--accent);
            background: var(--bg-bubble-assistant);
            padding: 10px;
        }
        
        .edit-textarea {
            width: 100%;
            min-height: 80px;
            font-size: var(--font-size);
            line-height: 1.6;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-md);
            padding: 8px;
            resize: vertical;
            background: var(--bg-input);
            color: var(--text-primary);
        }
        
        .edit-textarea:focus {
            outline: none;
            box-shadow: var(--focus-ring);
        }
        
        .edit-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }
        
        .edit-actions button {
            font-size: calc(var(--font-size) - 4px);
            padding: 4px 12px;
            border-radius: var(--radius-md);
            border: none;
            box-shadow: var(--ring-subtle);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .edit-save-btn {
            background: var(--accent);
            color: var(--text-user-bubble);
            box-shadow: 0 0 0 1px var(--accent);
        }
        
        .edit-save-btn:hover {
            background: var(--accent-hover);
        }
        .edit-save-btn:active {
            transform: scale(0.95);
        }

        .edit-cancel-btn {
            background: var(--bg-input);
            color: var(--text-secondary);
        }
        
        .edit-cancel-btn:hover {
            background: var(--bg-hover);
        }
        .edit-cancel-btn:active {
            transform: scale(0.95);
        }

        /* ===== 头像系统样式 ===== */
        .avatar-icon {
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .avatar-header {
            width: 28px;
            height: 28px;
            vertical-align: middle;
            margin-right: 2px;
            cursor: pointer;
            transition: var(--transition-ui);
            animation: avatarPopIn 0.55s var(--ease-emphasis) both;
        }
        @keyframes avatarPopIn {
            from { opacity: 0; transform: scale(0.3); }
            to   { opacity: 1; transform: scale(1); }
        }
        .avatar-header:hover {
            transform: scale(1.1);
        }
        
        .avatar-settings {
            width: 32px;
            height: 32px;
        }
        
        .avatar-preview-large {
            width: 48px;
            height: 48px;
        }
        
        /* 设置栏头像预览 */
        .avatar-preview-wrapper {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px dashed var(--border-light);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: border-color 0.2s, background 0.2s;
            background: #fafafa;
            position: relative;
            overflow: hidden;
        }
        
        .avatar-preview-wrapper:hover {
            border-color: var(--accent);
            background: #f0f6ff;
        }
        
        .avatar-preview-wrapper .avatar-icon {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
        
        .avatar-placeholder {
            font-size: 18px;
            line-height: 1;
        }
        
        /* 头像 + 名称水平行 */
        .partner-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .partner-row .avatar-preview-wrapper {
            margin-bottom: 0;
        }
        
        /* 角色标签中的头像 */
        .label-avatar {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 2px;
            background-size: cover;
            background-position: center;
            background-color: #e0e0e0;
        }
        
        .label-avatar.has-avatar {
            background-color: transparent;
            animation: avatarPopIn 0.6s 0.15s var(--ease-emphasis) both;
        }
        .label-avatar-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            display: block;
        }
        
        /* 弹窗遮罩 */
        .avatar-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s var(--ease-standard);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 弹窗盒 */
        .avatar-modal {
            background: var(--bg-sidebar);
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
            width: 420px;
            max-width: 92vw;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-elevated);
            animation: slideUp 0.25s var(--ease-standard);
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes spScaleIn {
            from { opacity: 0; transform: scale(0); }
            to { opacity: 1; transform: scale(1); }
        }

        .avatar-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px 12px;
            font-weight: 600;
            font-size: 16px;
            box-shadow: 0 1px 0 rgba(0,0,0,0.04);
        }
        
        .avatar-modal-close {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: var(--text-tertiary);
            padding: 4px 8px;
            border-radius: 4px;
            transition: color 0.2s;
        }
        
        .avatar-modal-close:hover {
            color: var(--text-primary);
        }
        
        /* 选项卡 */
        .avatar-modal-tabs {
            display: flex;
            box-shadow: 0 1px 0 rgba(0,0,0,0.04);
            padding: 0 20px;
            gap: 4px;
        }
        
        .avatar-tab {
            background: none;
            border: none;
            padding: 10px 16px;
            font-size: 13px;
            cursor: pointer;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
            transition: color 0.2s, border-color 0.2s;
            margin-bottom: -1px;
        }
        
        .avatar-tab:hover {
            color: var(--accent);
        }
        
        .avatar-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            font-weight: 500;
        }
        
        /* 面板 */
        .avatar-modal-body {
            padding: 16px 20px;
            overflow-y: auto;
            flex: 1;
        }
        
        .avatar-panel {
            display: none;
        }
        
        .avatar-panel.active {
            display: block;
        }
        
        /* 上传区 */
        .avatar-upload-zone {
            border: 2px dashed var(--border-light);
            border-radius: var(--radius-md);
            padding: 28px 16px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            color: #888;
        }
        
        .avatar-upload-zone:hover {
            border-color: var(--accent);
            background: #f8faff;
        }
        
        .avatar-upload-zone.drag-over {
            border-color: var(--accent);
            background: #eef4ff;
        }
        
        .upload-icon {
            font-size: 36px;
            display: block;
            margin-bottom: 8px;
        }
        
        .avatar-upload-zone p {
            margin: 0;
            font-size: 13px;
        }
        
        /* URL 输入 */
        .avatar-url-input {
            width: 100%;
            padding: 8px 12px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-sm);
            font-size: 13px;
            margin-bottom: 8px;
            transition: border-color 0.2s;
        }
        
        .avatar-url-input:focus {
            outline: none;
            box-shadow: var(--focus-ring);
        }
        
        .avatar-url-preview-btn {
            background: var(--bg-hover);
            border: none;
            box-shadow: var(--ring-subtle);
            padding: 6px 16px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .avatar-url-preview-btn:hover {
            background: var(--border-light);
        }
        
        /* 预览区 */
        .avatar-preview-area {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 0 0;
            border-top: 1px solid rgba(128,128,128,0.1);
            margin-top: 12px;
            font-size: 14px;
            color: var(--text-primary);
        }
        
        /* 弹窗底部 */
        .avatar-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 12px 20px 16px;
            box-shadow: 0 -1px 0 rgba(0,0,0,0.04);
        }
        
        .avatar-btn-cancel,
        .avatar-btn-confirm {
            padding: 8px 20px;
            border-radius: var(--radius-pill);
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .avatar-btn-cancel {
            background: var(--bg-hover);
            border: none;
            box-shadow: var(--ring-subtle);
            color: var(--text-secondary);
        }
        
        .avatar-btn-cancel:hover {
            background: var(--border-light);
        }
        
        .avatar-btn-confirm {
            background: var(--accent);
            border: none;
            color: var(--text-user-bubble);
            font-weight: 500;
        }
        
        .avatar-btn-confirm:hover {
            background: var(--accent-hover);
        }
        
        /* 历史头像 */
        .avatar-history-section {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid rgba(128,128,128,0.1);
        }
        
        .avatar-history-label {
            font-size: 12px;
            color: #888;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .avatar-history-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .avatar-history-item {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            border: 2px solid transparent;
            transition: border-color 0.2s, transform 0.15s;
            flex-shrink: 0;
            overflow: visible;
        }
        
        .avatar-history-item:hover {
            border-color: var(--accent);
            transform: scale(1.1);
        }
        
        .avatar-history-item.selected {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.25);
        }
        
        .avatar-history-item img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .avatar-history-delete {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--color-error);
            color: #fff;
            border: none;
            font-size: 10px;
            line-height: 16px;
            text-align: center;
            cursor: pointer;
            display: none;
            z-index: 2;
        }
        
        .avatar-history-item:hover .avatar-history-delete {
            display: block;
        }
        
        /* 手机适配 */
        @media (max-width: 600px) {
            .avatar-modal {
                width: 100%;
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                border-radius: 0;
            }
            
            .avatar-modal-body {
                flex: 1;
            }
            
            .avatar-header {
                width: 24px;
                height: 24px;
            }
            
            .avatar-settings {
                width: 28px;
                height: 28px;
            }
            
            .avatar-preview-wrapper {
                width: 32px;
                height: 32px;
            }
        }
        
        /* 光标闪烁动画 */
        .cursor-blink {
            display: inline-block;
            width: 3px;
            height: 18px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--accent), var(--accent-300));
            margin-left: 2px;
            animation: cursorBreathe 1.6s ease-in-out infinite;
            vertical-align: middle;
        }
        
        @keyframes cursorBreathe {
            0%, 100% { opacity: 0.3; box-shadow: 0 0 4px rgba(var(--accent-rgb),0.2); }
            50% { opacity: 1; box-shadow: 0 0 8px rgba(var(--accent-rgb),0.5); }
        }
        
        /* 输入区域 */
        .input-area {
            position: relative;
            z-index: 50;
            background: rgba(255, 255, 255, 0.68);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            padding: 12px 16px;
            border-top: none;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-shrink: 0;
            box-shadow:
                inset 0 1px 0 var(--glass-edge-light),
                inset 0 -1px 0 var(--glass-edge-dark),
                inset 0 0 30px var(--glass-depth),
                0 -2px 10px rgba(0,0,0,0.04),
                0 0 30px 4px var(--breathe-glow);
        }

        /* 收起输入框按钮 — 桌面端隐藏，仅移动端展开时显示 */
        .input-collapse-btn {
            display: none;
        }

        /* 输入区按钮组 */
        .input-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-shrink: 0;
        }

        .input-area textarea {
            flex: 1;
            border: none;
            border-radius: var(--radius-xl);
            padding: 12px 18px;
            font-size: var(--font-size);
            font-family: inherit;
            resize: none;
            max-height: 200px;
            overflow-y: auto;
            background: var(--bg-body);
            box-shadow: 0 2px 12px rgba(0,0,0,0.04), inset 0 0 0 1px var(--border-light);
            transition: box-shadow var(--transition-base), background var(--transition-base), height 0.25s ease;
        }

        .input-area textarea:focus {
            outline: none;
            background: var(--bg-input);
            box-shadow: var(--focus-ring), 0 8px 32px rgba(var(--accent-rgb),0.06);
            transform: translateY(-1px);
        }
        @media (pointer: fine) {
            .input-area textarea:focus {
                animation: focusGlowPulse 0.7s ease-out forwards;
            }
        }
        /* #35 输入框聚焦: 从中心向外脉冲呼吸光晕 */
        @keyframes focusGlowPulse {
            0%   { box-shadow: var(--focus-ring), 0 2px 12px rgba(0,0,0,0.04), inset 0 0 0 1px var(--border-light); }
            25%  { box-shadow: var(--focus-ring), 0 0 0 6px rgba(var(--accent-rgb),0.18), 0 0 40px rgba(var(--accent-rgb),0.15), inset 0 0 20px rgba(var(--accent-rgb),0.04); }
            50%  { box-shadow: var(--focus-ring), 0 0 0 14px rgba(var(--accent-rgb),0.08), 0 0 80px rgba(var(--accent-rgb),0.12), inset 0 0 30px rgba(var(--accent-rgb),0.06); }
            75%  { box-shadow: var(--focus-ring), 0 0 0 8px rgba(var(--accent-rgb),0.12), 0 0 50px rgba(var(--accent-rgb),0.10), inset 0 0 15px rgba(var(--accent-rgb),0.03); }
            100% { box-shadow: var(--focus-ring), 0 8px 32px rgba(var(--accent-rgb),0.06); }
        }

        /* 输入区外圈呼吸光效 */
        @property --breathe-glow {
            syntax: '<color>';
            initial-value: transparent;
            inherits: false;
        }

        /* 玻璃光泽视差自定义属性 */
        @property --gloss-x {
            syntax: '<percentage>';
            initial-value: 50%;
            inherits: false;
        }
        @property --gloss-y {
            syntax: '<percentage>';
            initial-value: 100%;
            inherits: false;
        }


        .input-area:focus-within {
            animation: inputBreathe 3.5s ease-in-out infinite;
        }
        @keyframes inputBreathe {
            0%, 100% { --breathe-glow: rgba(var(--accent-rgb),0.06); }
            50%      { --breathe-glow: rgba(var(--accent-rgb),0.20); }
        }
        body.dark .input-area:focus-within {
            animation-name: inputBreatheDark;
        }
        @keyframes inputBreatheDark {
            0%, 100% { --breathe-glow: rgba(158,122,255,0.08); }
            50%      { --breathe-glow: rgba(158,122,255,0.25); }
        }

        .input-area button {
            --ripple-color: rgba(255,255,255,0.35);
            background: linear-gradient(135deg, var(--accent), var(--accent-300));
            color: var(--text-user-bubble);
            border: none;
            padding: 12px 22px;
            border-radius: var(--radius-pill);
            font-size: var(--font-size);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-ui);
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.2);
        }

        .input-area button:hover {
            background: linear-gradient(135deg, var(--accent-hover), var(--accent-300));
            transform: translateY(-2px);
            box-shadow: var(--shadow-float);
        }

        .input-area button:active {
            transform: scale(0.96);
            box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.3);
        }

        /* 首次使用轻提示 */
        .onboarding-tooltip {
            position: absolute;
            bottom: calc(100% + 12px);
            right: 0;
            background: var(--accent);
            color: #fff;
            padding: 8px 14px;
            border-radius: var(--radius-md);
            font-size: 13px;
            white-space: nowrap;
            pointer-events: none;
            z-index: 100;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.3s ease, transform 0.3s var(--ease-emphasis);
            box-shadow: var(--shadow-float);
        }
        .onboarding-tooltip.show {
            opacity: 1;
            transform: translateY(0);
        }
        .onboarding-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            right: 16px;
            border: 6px solid transparent;
            border-top-color: var(--accent);
        }

        /* 发送/停止合并按钮 */
        #sendBtn {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--accent), var(--accent-300));
            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, width 0.3s ease, height 0.3s ease;
        }
        body.is-streaming #sendBtn {
            background: var(--color-error);
            border-radius: var(--radius-sm);
            box-shadow: 0 0 0 0 rgba(255,59,48,0.5);
            animation: stopGlow 2s ease-in-out infinite, stopEnter 0.35s ease-out;
        }
        body.is-streaming #sendBtn:hover {
            background: #e0352b;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255,59,48,0.35);
        }
        body.is-streaming #sendBtn:active {
            transform: scale(0.94);
        }
        @keyframes stopGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.4); }
            50% { box-shadow: 0 0 0 6px rgba(255,59,48,0); }
        }
        @keyframes stopEnter {
            0% { transform: scale(1); }
            40% { transform: scale(1.12); }
            100% { transform: scale(1); }
        }

        /* 发送按钮呼吸反馈 */
        @keyframes sendBreathe {
            0%   { transform: scale(1); }
            30%  { transform: scale(0.88); }
            60%  { transform: scale(1.04); }
            100% { transform: scale(1); }
        }
        #sendBtn.breathe {
            animation: sendBreathe 0.45s var(--ease-emphasis);
        }

        /* 取消编辑按钮（输入框内，桌面+移动端通用） */
        .cancel-edit-btn {
            background: transparent !important;
            color: var(--text-secondary) !important;
            border: 1px solid var(--border-light) !important;
            padding: 6px 14px !important;
            font-size: 12px !important;
            font-weight: 400 !important;
            border-radius: var(--radius-md) !important;
            cursor: pointer;
            flex-shrink: 0;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
        }
        @media (hover: hover) {
            .cancel-edit-btn:hover {
                color: var(--color-error) !important;
                border-color: var(--color-error) !important;
                background: rgba(255,59,48,0.05) !important;
            }
        }
        .cancel-edit-btn:active {
            transform: scale(0.96);
        }

        /* 按钮点击涟漪 */
        .btn-ripple {
            position: absolute;
            border-radius: 50%;
            background: var(--ripple-color, rgba(0,0,0,0.10));
            transform: scale(0);
            animation: btnRipple 0.5s ease-out forwards;
            pointer-events: none;
            z-index: 1;
        }
        @keyframes btnRipple {
            to { transform: scale(3); opacity: 0; }
        }

        #inputStopBtn { display: none !important; }
        .stop-btn { display: none !important; }

        /* 输入焦点态 — 页面级沉浸感 */
        body.input-focus .chat-messages {
            opacity: 0.92;
            transition: opacity 0.4s;
        }
        body.input-focus .header {
            opacity: 0.7;
            transition: opacity 0.4s;
        }
        body.input-focus #sidebar {
            opacity: 0.8;
            transition: opacity 0.4s;
        }

        /* 输入展开遮罩 */
        .input-expand-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.3);
            z-index: 40;
            display: none;
        }
        
        .input-expand-overlay.show {
            display: block;
        }
        
        /* 一键滚到底部按钮 */
        #scrollBottomBtn {
            position: fixed;
            bottom: 100px;
            right: 16px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            border: none;
            font-size: 20px;
            cursor: pointer;
            z-index: 60;
            display: none;
            transition: var(--transition-ui);
            line-height: 40px;
            text-align: center;
            padding: 0;
            box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.2);
        }

        #scrollBottomBtn:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-float);
        }

        #scrollBottomBtn:active {
            transform: scale(0.9);
        }
        #scrollBottomBtn.pop-in {
            animation: scrollBtnPopIn 0.45s var(--ease-emphasis);
        }
        @keyframes scrollBtnPopIn {
            0%   { transform: rotate(-120deg) scale(0); opacity: 0; }
            60%  { transform: rotate(8deg) scale(1.08); opacity: 1; }
            80%  { transform: rotate(-3deg) scale(0.95); }
            100% { transform: rotate(0deg) scale(1); opacity: 1; }
        }

        /* 新消息闪光 */
        .bubble.flash-highlight {
            animation: messageFlash 0.8s ease-out;
        }
        @keyframes messageFlash {
            0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5), 0 0 24px 4px rgba(var(--accent-rgb), 0.3); }
            60%  { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.1), 0 0 12px 2px rgba(var(--accent-rgb), 0.15); }
            100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0), 0 0 0 0 rgba(var(--accent-rgb), 0); }
        }
        
        .input-area button:disabled {
            background: var(--border-light);
            box-shadow: none;
            cursor: not-allowed;
            color: var(--text-tertiary);
        }
        .input-area button:disabled:hover {
            transform: none;
            box-shadow: none;
        }
        
        /* 模型切换按钮组 */
        .model-toggle {
            display: flex;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: none;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
            flex-shrink: 0;
            opacity: 0.55;
            transition: opacity 0.2s;
        }
        .model-toggle:hover {
            opacity: 1;
        }

        .model-toggle .mt-option {
            padding: 5px 10px;
            font-size: 11px;
            border: none;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            white-space: nowrap;
            font-weight: 500;
        }
        
        .model-toggle .mt-option:first-child {
            border-right: 1px solid var(--border-light);
        }
        
        .model-toggle .mt-option.active {
            background: var(--accent);
            color: var(--text-user-bubble);
        }
        
        .model-toggle .mt-option:not(.active):hover {
            background: var(--bg-hover);
        }
        .model-toggle .mt-option:active {
            transform: scale(0.96);
        }

        #sidebarModelToggle {
            width: 100%;
        }
        #sidebarModelToggle .mt-option {
            flex: 1;
            text-align: center;
        }

        /* Temperature 滑块 */
        .temp-slider-container {
            margin-bottom: 14px;
        }
        
        .temp-label {
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 4px;
            text-align: center;
            transition: color 0.2s;
            white-space: nowrap;
        }
        
        .temp-slider-container input[type="range"] {
            width: 100%;
            -webkit-appearance: none;
            appearance: none;
            height: 8px;
            background: linear-gradient(90deg,var(--accent),#B388FF);
            border-radius: 999px;
            outline: none;
            cursor: pointer;
            margin: 0;
        }
        
        .temp-slider-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            background: var(--bg-input);
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid var(--accent);
            box-shadow: 0 4px 12px rgba(var(--accent-rgb),.3);
        }
        
        .temp-slider-container input[type="range"]::-moz-range-thumb {
            width: 22px;
            height: 22px;
            background: var(--bg-input);
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid var(--accent);
            box-shadow: 0 4px 12px rgba(var(--accent-rgb),.3);
        }
        
        /* 回复长度下拉 */
        .max-tokens-container {
            margin-bottom: 14px;
        }
        
        .max-tokens-container label {
            font-size: 11px;
            color: var(--text-tertiary);
            display: block;
            margin-bottom: 4px;
        }
        
        .max-tokens-container select {
            width: 100%;
            padding: 6px 8px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-md);
            font-size: 12px;
            box-sizing: border-box;
            background: var(--bg-input);
        }

        /* 高级设置折叠区 */
        /* 深度思考开关 - 使用ID选择器提升特异性，防止被.input-area button覆盖 */
        #thinkToggleBtn {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            flex-shrink: 0;
            user-select: none;
            padding: 4px !important;
            border-radius: var(--radius-pill) !important;
            transition: background 0.2s;
            border: none;
            background: transparent !important;
            color: inherit !important;
            font-weight: normal !important;
            font-size: inherit !important;
            outline: none;
            font-family: inherit;
            white-space: nowrap;
            min-width: auto;
            line-height: 1;
        }
        
        #thinkToggleBtn:hover {
            background: var(--bg-hover) !important;
        }
        
        
        .think-track {
            width: 36px;
            height: 20px;
            border-radius: var(--radius-sm);
            background: #ccc;
            position: relative;
            transition: background 0.25s;
            flex-shrink: 0;
        }
        
        .think-toggle-on .think-track {
            background: var(--accent);
        }
        
        .think-thumb {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: left 0.25s;
        }
        
        .think-toggle-on .think-thumb {
            left: 18px;
        }
        
        .think-label {
            font-size: 16px;
            line-height: 1;
        }

        /* 优化输入按钮 */
        #optimizeBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            cursor: pointer;
            background: transparent !important;
            color: var(--text-secondary) !important;
            border: 1px solid var(--border-light) !important;
            padding: 7px 14px !important;
            border-radius: var(--radius-pill) !important;
            font-size: 15px !important;
            font-weight: 400 !important;
            box-shadow: none !important;
            white-space: nowrap;
            min-width: auto;
            line-height: 1;
            transition: all 0.2s ease !important;
            font-family: inherit;
            outline: none;
        }
        @media (hover: hover) {
            #optimizeBtn:hover {
                background: var(--bg-hover) !important;
                border-color: var(--accent) !important;
                color: var(--accent) !important;
                transform: none !important;
                box-shadow: none !important;
            }
        }
        #optimizeBtn:active {
            transform: scale(0.94) !important;
            box-shadow: none !important;
        }
        #optimizeBtn:disabled {
            background: transparent !important;
            color: var(--text-tertiary) !important;
            cursor: not-allowed !important;
            border-color: var(--border-light) !important;
            box-shadow: none !important;
            opacity: 0.5;
        }
        #optimizeBtn.loading {
            animation: optimize-pulse 0.8s ease-in-out infinite;
            border-color: var(--accent) !important;
            color: var(--accent) !important;
        }
        @keyframes optimize-pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }

        /* 思考过程折叠块 */
        .reasoning-block {
            margin-bottom: 10px;
            border: none;
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: #fef9f0;
            box-shadow: 0 0 0 1px rgba(232, 213, 183, 0.5), 0 1px 3px rgba(0,0,0,0.03);
        }
        
        .reasoning-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            color: #8b7355;
            transition: background 0.15s;
        }
        
        .reasoning-header:hover {
            background: #fdf3e3;
        }
        
        .reasoning-arrow {
            display: inline-block;
            transition: transform 0.2s;
            font-size: 11px;
            font-family: monospace;
        }
        
        .reasoning-arrow.open {
            transform: rotate(90deg);
        }
        
        .reasoning-content {
            padding: 0 12px 10px 12px;
            font-size: 12px;
            color: #8b7355;
            line-height: 1.6;
            border-top: 1px solid #e8d5b7;
        }
        
        .reasoning-content p {
            margin: 6px 0;
        }
        
        .reasoning-content pre {
            background: #f5ead5;
            border: 1px solid #e0d0b0;
            font-size: 11px;
        }
        
        .reasoning-content code {
            background: #f5ead5;
            font-size: 11px;
        }
        
        .reasoning-content pre code {
            background: transparent;
        }

        /* ===== 垂直对话列表（侧边栏内） ===== */
        .conv-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-bottom: 8px;
        }
        
        .conv-item {
            padding: 10px 12px;
            border-radius: var(--radius-lg);
            cursor: pointer;
            font-size: 13px;
            color: var(--text-primary);
            transition: background 0.15s;
            display: flex;
            align-items: flex-start;
            user-select: none;
            position: relative;
        }
        
        .conv-text {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        
        .conv-title {
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
        }
        
        .conv-item.active .conv-title {
            font-weight: 600;
        }
        
        .conv-summary {
            font-size: 11px;
            color: var(--text-tertiary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
            margin-top: 2px;
        }
        
        .conv-item.active .conv-summary {
            color: var(--text-secondary);
        }

        .conv-item:hover {
            background: var(--bg-hover);
        }
        .conv-item:active {
            transform: scale(0.98);
        }

        .conv-item.active {
            background: rgba(var(--accent-rgb),.08);
            color: var(--text-primary);
            font-weight: 500;
            box-shadow: inset 3px 0 0 var(--accent);
        }
        
        .conv-item .conv-delete {
            font-size: 14px;
            color: var(--text-tertiary);
            padding: 2px 6px;
            border-radius: 4px;
            flex-shrink: 0;
            display: none;
            margin-left: 6px;
        }
        
        .conv-item:hover .conv-delete {
            display: block;
        }
        
        .conv-item .conv-delete:hover {
            color: var(--color-error);
            background: rgba(0,0,0,0.08);
        }
        .conv-item .conv-delete:active {
            transform: scale(0.9);
        }

        /* 会话列表骨架屏 */
        .conv-skeleton-item {
            padding: 11px 16px;
            display: flex;
            flex-direction: column;
            gap: 7px;
            opacity: 0;
            animation: skeletonFadeIn 0.3s ease-out forwards;
        }
        @keyframes skeletonFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .conv-skeleton-line {
            height: 13px;
            border-radius: 6px;
            background: var(--sk-rainbow);
            background-size: 260% 100%;
            animation: skeletonShimmer 2.2s ease-in-out infinite;
        }
        .conv-skeleton-line.short {
            height: 10px;
            opacity: 0.55;
        }
        body.dark .conv-skeleton-line {
            background: var(--sk-rainbow-dark);
            background-size: 260% 100%;
        }

        .conv-new-btn {
            width: 100%;
            padding: 8px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-pill);
            background: transparent;
            font-size: 13px;
            color: var(--accent);
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 8px;
        }
        
        .conv-new-btn:hover {
            background: #e8f0ff;
            box-shadow: 0 0 0 1px var(--accent);
        }

        .conv-group-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-tertiary);
            padding: 8px 4px 4px;
            letter-spacing: 0.5px;
        }
        .conv-group-label:first-child {
            padding-top: 0;
        }

        .conv-search-wrap {
            position: relative;
            margin-bottom: 8px;
        }
        .conv-search-input {
            width: 100%;
            padding: 8px 32px 8px 10px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-input);
            font-size: 13px;
            color: var(--text-primary);
            outline: none;
            transition: box-shadow 0.2s;
        }
        .conv-search-input:focus {
            box-shadow: var(--focus-ring);
        }
        .conv-search-input::placeholder {
            color: var(--text-tertiary);
        }
        .conv-search-clear {
            display: none;
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            background: var(--bg-tertiary, #ddd);
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            padding: 0;
        }
        .conv-search-clear.visible {
            display: block;
        }
        .conv-search-empty {
            font-size: 12px;
            color: var(--text-tertiary);
            text-align: center;
            padding: 16px 0;
        }
        .conv-highlight {
            background: #FFD54F;
            color: #333;
            border-radius: 2px;
            padding: 0 1px;
        }
        body.dark .conv-highlight {
            background: #B8860B;
            color: #fff;
        }

        .status {
            font-size: 11px;
            padding: 6px 12px;
            color: var(--text-tertiary);
            background: transparent;
            text-align: center;
            flex-shrink: 0;
            border-top: none;
            opacity: 0.8;
        }

        /* 波形跳动 Loading 指示器 */
        .status-waveform {
            display: inline-flex;
            align-items: flex-end;
            gap: 3px;
            height: 18px;
            vertical-align: middle;
        }
        .status-waveform .wf-bar {
            width: 3px;
            border-radius: 2px;
            background: var(--accent);
            animation: waveformBounce 0.85s ease-in-out infinite;
        }
        .status-waveform .wf-bar:nth-child(1) { height: 10px; animation-delay: 0s; }
        .status-waveform .wf-bar:nth-child(2) { height: 16px; animation-delay: 0.1s; }
        .status-waveform .wf-bar:nth-child(3) { height: 8px;  animation-delay: 0.2s; }
        .status-waveform .wf-bar:nth-child(4) { height: 14px; animation-delay: 0.3s; }
        .status-waveform .wf-bar:nth-child(5) { height: 6px;  animation-delay: 0.4s; }

        @keyframes waveformBounce {
            0%, 100% { transform: scaleY(1); opacity: 0.45; }
            50% { transform: scaleY(2.4); opacity: 1; }
        }
        body.dark .status-waveform .wf-bar {
            box-shadow: 0 0 8px rgba(var(--accent-rgb),0.5);
        }
        
        /* 侧边栏响应式：桌面端推挤布局 */
        @media (min-width: 601px) {
            #mainWrapper.sidebar-open {
                margin-left: 320px;
            }
        }
        
        /* 移动端响应式 */
        @media (max-width: 600px) {
            #sidebar {
                width: 85vw;
            }
            .sidebar-drag-handle {
                display: block;
            }

            #mainWrapper {
                margin-left: 0 !important;
            }
            
            .header h1 {
                font-size: 14px;
            }

            .message {
                animation-duration: 0.28s;
            }
            @keyframes slideIn {
                from { opacity: 0; transform: translateY(8px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            @keyframes slideInLast {
                from { opacity: 0; transform: translateY(8px); }
                55%  { opacity: 1; transform: translateY(-3px); }
                80%  { transform: translateY(0); }
                to   { opacity: 1; transform: translateY(0); }
            }
            
            /* 🧠 深度思考按钮缩小 */
            #thinkToggleBtn {
                width: 28px;
                height: 28px;
                min-width: 28px;
                justify-content: center;
            }
            #thinkToggleBtn .think-track {
                display: none;
            }
            .think-toggle-on .think-label {
                filter: grayscale(0);
            }
            .think-toggle-off .think-label {
                filter: grayscale(1);
            }

            /* 移动端输入区换行布局 — 现代IM风格底部操作栏 */
            .input-area {
                flex-wrap: wrap;
                gap: 0;
                padding: 8px 12px 0;
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                box-shadow: 0 -1px 0 rgba(0,0,0,0.05), 0 -4px 16px rgba(0,0,0,0.06);
            }
            body.dark .input-area {
                background: rgba(30,30,50,0.82);
            }
            #userInput {
                flex: 1 1 100%;
                order: 1;
                margin-bottom: 8px;
                border-radius: var(--radius-sheet);
                padding: 10px 16px;
                font-size: 15px;
                min-height: 40px;
                max-height: 120px;
                transition: height 0.3s var(--ease-standard);
            }
            #inputCollapseBtn {
                order: 0;
            }
            .input-actions {
                width: 100%;
                order: 2;
                justify-content: space-between;
                padding: 4px 0 8px;
                gap: 8px;
                border-top: 1px solid var(--border-light);
            }
            #thinkToggleBtn {
                margin-right: auto;
            }

            #sendBtn {
                width: 44px;
                height: 44px;
                padding: 0 !important;
                border-radius: 50%;
                font-size: 20px;
                min-width: 44px;
                min-height: 44px;
            }

            /* 移动端优化按钮：圆形 */
            #optimizeBtn {
                width: 44px;
                height: 44px;
                padding: 0 !important;
                border-radius: 50% !important;
                font-size: 18px !important;
                min-width: 44px;
                min-height: 44px;
            }

            /* 移动端停止按钮：圆形 */
            #inputStopBtn {
                width: 44px;
                height: 44px;
                padding: 0 !important;
                border-radius: 50% !important;
                font-size: 16px !important;
                min-width: 44px;
                min-height: 44px;
            }

            /* 收起输入框按钮 */
            .input-collapse-btn {
                display: none;
                width: 100%;
                padding: 8px 0;
                border: none;
                background: transparent;
                color: var(--text-tertiary);
                font-size: 12px;
                cursor: pointer;
                transition: background 0.2s, color 0.2s, opacity 0.2s;
                border-radius: var(--radius-sm);
            }
            .input-area.expanded .input-collapse-btn {
                display: block;
            }
            @media (hover: hover) {
                .input-collapse-btn:hover {
                    background: var(--bg-hover);
                    color: var(--text-primary);
                }
            }
            .input-collapse-btn:active {
                background: var(--accent);
                color: var(--text-user-bubble);
                transform: scale(0.94);
            }

            /* 输入框展开态 */
            .input-area.expanded textarea {
                height: 80px;
                overflow-y: auto;
            }
            
            /* 滚底按钮位置适配 */
            #scrollBottomBtn {
                bottom: 90px;
                right: 10px;
            }

            .chat-messages {
                max-width: 100vw;
                padding: 16px 12px;
            }

            /* 推荐问题气泡 — 移动端适配 */
            .suggested-group {
                padding-left: 8px;
                max-width: 100%;
                gap: 8px;
            }
            .sq-divider-line:first-child { width: 36px; }
            .sq-divider-label { font-size: 10px; }
            .sq-version-btn {
                width: 26px;
                height: 26px;
                font-size: 12px;
            }
            .sq-refresh-btn {
                width: 28px;
                height: 28px;
            }
            .suggested-bubble {
                max-width: 280px;
                font-size: 12px;
                padding: 10px 14px;
            }

            /* ===== Touch Targets (44x44px minimum) ===== */
            .model-toggle .mt-option,
            .dark-toggle .dt-option,
            .prompt-toggle .pt-option,
            .avatar-toggle .at-option,
            .section-toggle .st-option,
            .section-toggle .im-option {
                min-height: 44px;
                min-width: 44px;
                padding: 10px 14px;
                font-size: 13px;
            }
            #scrollBottomBtn {
                min-width: 44px;
                min-height: 44px;
                width: 44px;
                height: 44px;
                line-height: 44px;
                bottom: 100px;
            }
            .hamburger-btn {
                min-height: 44px;
                min-width: 44px;
                padding: 10px 14px;
            }
            .sidebar-close-btn,
            .sidebar-settings-btn,
            .settings-modal-close {
                min-width: 44px;
                min-height: 44px;
                padding: 12px 16px;
            }
            .sidebar-section .sidebar-btn {
                min-height: 44px;
                padding: 12px 16px;
            }
            .api-key-toggle,
            .api-key-copy {
                min-width: 44px;
                min-height: 44px;
                padding: 10px 14px;
                font-size: 18px;
            }
            .welcome-example-btn {
                min-height: 44px;
                padding: 10px 16px;
                font-size: 14px;
            }
            .conv-item {
                min-height: 44px;
                padding: 12px;
            }
            #thinkToggleBtn {
                min-width: 44px;
                min-height: 44px;
                padding: 8px !important;
            }
            .answer-select-btn {
                min-height: 44px;
                padding: 10px 24px;
            }
            .multi-answer-banner {
                min-height: 44px;
                padding: 10px 14px;
            }
            .reasoning-header {
                min-height: 44px;
                padding: 10px 14px;
            }
            .la-primary-btn, .la-secondary-btn, .la-warning-btn {
                min-height: 44px;
                padding: 12px 20px;
            }
            .la-model-option {
                min-height: 44px;
                padding: 10px 18px;
            }
            .la-close-btn {
                min-width: 44px;
                min-height: 44px;
                padding: 12px 16px;
            }
            .sp-new-tmpl-btn, .sp-cr-btn {
                min-height: 44px;
                padding: 0 18px;
            }
        }

        /* ===== AI角色中心（新UI） ===== */
        
        /* 模块头部 */
        .sp-header-new {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
        }
        .sp-header-left {
            min-width: 0;
            flex: 1;
        }
        .sp-title-new {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            display: block;
        }
        .sp-subtitle-new {
            font-size: 11px;
            color: var(--text-tertiary);
            display: block;
            margin-top: 2px;
        }
        /* 新建模板按钮 */
        .sp-new-tmpl-btn {
            flex-shrink: 0;
            height: 30px;
            padding: 0 12px;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(0,0,0,0.06);
            box-shadow: none;
            background: rgba(255,255,255,.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-size: 11px;
            font-weight: 600;
            color: var(--accent);
            cursor: pointer;
            transition: all .2s;
            white-space: nowrap;
            margin-top: 2px;
        }
        .sp-new-tmpl-btn:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        
        /* ===== 当前角色卡片（核心） ===== */
        .sp-current-role-card {
            background: var(--bg-bubble-assistant);
            border-radius: var(--radius-lg);
            padding: 16px;
            box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(0,0,0,0.03);
            border: none;
            margin-bottom: 14px;
            transition: var(--transition-ui);
        }
        .sp-current-role-card.has-role {
            background: linear-gradient(135deg,var(--accent),var(--accent-300));
            color: #fff;
            border-color: transparent;
            box-shadow: var(--shadow-elevated);
        }
        /* 展示区 */
        .sp-cr-display {
            display: block;
        }
        .sp-cr-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-current-role-card:not(.has-role) .sp-cr-name {
            color: var(--text-tertiary);
        }
        .sp-current-role-card.has-role .sp-cr-name {
            color: #fff;
        }
        .sp-cr-desc {
            font-size: 12px;
            color: var(--text-tertiary);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 10px;
            min-height: 18px;
        }
        .sp-current-role-card.has-role .sp-cr-desc {
            color: rgba(255,255,255,.7);
        }
        .sp-cr-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sp-cr-badge {
            font-size: 10px;
            font-weight: 600;
            color: #22c55e;
            flex-shrink: 0;
        }
        .sp-cr-btn {
            height: 30px;
            padding: 0 12px;
            border-radius: var(--radius-pill);
            border: none;
            box-shadow: var(--ring-subtle);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-ui);
            color: var(--text-secondary);
            background: var(--bg-input);
        }
        .sp-cr-btn:hover {
            background: var(--bg-hover);
            color: var(--accent);
            box-shadow: 0 0 0 1px var(--accent);
        }
        .sp-current-role-card.has-role .sp-cr-badge {
            color: #a5f3c4;
        }
        .sp-current-role-card.has-role .sp-cr-btn {
            color: #fff;
            background: rgba(255,255,255,.2);
            box-shadow: 0 0 0 1px rgba(255,255,255,.25);
        }
        .sp-current-role-card.has-role .sp-cr-btn:hover {
            background: rgba(255,255,255,.35);
            color: #fff;
            box-shadow: 0 0 0 1px rgba(255,255,255,.4);
        }
        /* 编辑区 */
        .sp-cr-editor {
            display: block;
        }
        .sp-cr-name-input {
            width: 100%;
            padding: 8px 10px;
            margin-bottom: 8px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            background: var(--bg-input);
            box-sizing: border-box;
            transition: box-shadow .2s;
        }
        .sp-cr-name-input:focus {
            outline: none;
            box-shadow: var(--focus-ring);
        }
        .sp-cr-editor textarea {
            width: 100%;
            min-height: 100px;
            padding: 10px 12px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-family: inherit;
            line-height: 1.7;
            resize: vertical;
            box-sizing: border-box;
            background: var(--bg-input);
            color: var(--text-primary);
            transition: box-shadow .2s;
        }
        .sp-cr-editor textarea:focus {
            outline: none;
            box-shadow: var(--focus-ring);
        }
        .sp-cr-editor-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;
        }
        .sp-cr-editor-actions {
            display: flex;
            gap: 8px;
        }
        .sp-cr-cancel-btn {
            height: 32px;
            padding: 0 14px;
            border-radius: var(--radius-pill);
            border: none;
            box-shadow: var(--ring-subtle);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
        }
        .sp-cr-cancel-btn:hover {
            background: var(--bg-hover);
        }
        
        /* ===== 角色卡片网格 ===== */
        .sp-role-cards-label {
            font-size: 10px;
            color: var(--text-tertiary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        .sp-role-cards-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }
        .sp-role-card {
            background: rgba(255,255,255,.72);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: var(--radius-lg);
            padding: 10px 14px;
            cursor: pointer;
            transition: all .3s var(--ease-standard);
            border: 1px solid rgba(0,0,0,0.06);
            box-shadow: var(--shadow-card);
            position: relative;
            min-width: 0;
            flex: 1 1 calc(50% - 4px);
            max-width: calc(50% - 4px);
            box-sizing: border-box;
        }
        .sp-role-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-float);
            border-color: rgba(var(--accent-rgb),0.2);
        }
        .sp-role-card:active:not(.active) {
            transform: scale(0.97);
        }
        .sp-role-card.active {
            background: linear-gradient(135deg,var(--accent),var(--accent-300));
            color: #fff;
            border-color: transparent;
            cursor: default;
        }
        .sp-role-card.active:hover {
            transform: none;
            box-shadow: var(--shadow-float);
        }
        .sp-role-card-name {
            font-size: 12px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-role-card .sp-card-menu-btn {
            position: absolute;
            top: 6px;
            right: 8px;
            background: none;
            border: none;
            font-size: 14px;
            cursor: pointer;
            color: var(--text-tertiary);
            padding: 2px 4px;
            border-radius: 6px;
            line-height: 1;
            opacity: 0;
            transition: opacity .15s, background .15s;
        }
        .sp-role-card:hover .sp-card-menu-btn {
            opacity: 1;
        }
        .sp-role-card .sp-card-menu-btn:hover {
            background: rgba(0,0,0,.08);
        }
        .sp-role-card.active .sp-card-menu-btn {
            color: rgba(255,255,255,.7);
        }
        .sp-role-card.active .sp-card-menu-btn:hover {
            background: rgba(255,255,255,.15);
        }
        
        /* ===== 弹出菜单（卡片操作） ===== */
        .sp-popup-menu {
            position: fixed;
            z-index: 1050;
            background: #fff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-deep);
            padding: 6px 0;
            min-width: 120px;
            animation: spMenuIn .2s var(--ease-standard);
        }
        @keyframes spMenuIn {
            from { opacity: 0; transform: scale(.9); }
            to { opacity: 1; transform: scale(1); }
        }
        .sp-popup-menu-item {
            display: block;
            width: 100%;
            padding: 8px 16px;
            border: none;
            background: none;
            font-size: 12px;
            cursor: pointer;
            text-align: left;
            color: var(--text-primary);
            transition: background .1s;
            white-space: nowrap;
        }
        .sp-popup-menu-item:hover {
            background: var(--bg-hover);
        }
        .sp-popup-menu-item.danger {
            color: var(--color-error);
        }
        .sp-popup-menu-overlay {
            position: fixed;
            inset: 0;
            z-index: 1045;
        }

        /* ===== 移动端底部操作面板（长按菜单） ===== */
        .msg-bottom-sheet-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.35);
            z-index: 1050;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            animation: fadeIn 0.2s var(--ease-standard);
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .msg-bottom-sheet {
            background: var(--bg-sidebar);
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
            width: 100%;
            max-width: 100vw;
            max-height: 60vh;
            overflow-y: auto;
            padding: 8px 0 20px;
            box-shadow: var(--shadow-deep);
            animation: sheetSlideUp 0.3s var(--ease-standard);
            z-index: 1051;
        }
        @keyframes sheetSlideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        .msg-bottom-sheet-section {
            padding: 4px 20px;
        }
        .msg-bottom-sheet-title {
            font-size: 11px;
            color: var(--text-tertiary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 8px 0 4px;
        }
        .msg-bottom-sheet-item {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 15px 20px;
            border: none;
            background: none;
            font-size: 15px;
            cursor: pointer;
            text-align: left;
            color: var(--text-primary);
            transition: background 0.15s;
            border-radius: var(--radius-md);
            margin: 2px 0;
        }
        .msg-bottom-sheet-item:hover {
            background: var(--bg-hover);
        }
        .msg-bottom-sheet-item:active {
            background: var(--bg-hover);
            transform: scale(0.97);
        }
        .msg-bottom-sheet-item.danger {
            color: var(--btn-danger);
        }
        .msg-bottom-sheet-cancel {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(100% - 40px);
            margin: 8px 20px 0;
            padding: 14px;
            border: none;
            background: var(--bg-hover);
            border-radius: var(--radius-pill);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            color: var(--text-secondary);
            transition: background 0.15s;
        }
        .msg-bottom-sheet-cancel:hover {
            background: var(--border-light);
        }
        .msg-bottom-sheet-cancel:active {
            background: var(--border-light);
            transform: scale(0.97);
        }
        body.dark .msg-bottom-sheet {
            background: rgba(26,26,46,0.97);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        /* ===== 规则卡面板 ===== */
        .rules-panel-overlay {
            position: fixed;
            inset: 0;
            z-index: 960;
            background: transparent;
        }
        .rules-panel {
            position: fixed;
            top: 56px;
            right: 16px;
            width: 380px;
            max-width: calc(100vw - 32px);
            max-height: 70vh;
            background: var(--bg-sidebar);
            border-radius: var(--radius-2xl);
            box-shadow: var(--shadow-elevated);
            z-index: 965;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: rulesDropIn 0.25s var(--ease-standard);
        }
        .rules-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(128,128,128,0.1);
            flex-shrink: 0;
        }
        .rules-panel-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .rules-panel-close {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: var(--text-tertiary);
            padding: 4px;
            border-radius: var(--radius-xs);
            transition: var(--transition-ui);
        }
        .rules-panel-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .rules-panel-body {
            flex: 1;
            overflow-y: auto;
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .rules-panel-footer {
            padding: 8px 16px 12px;
            border-top: 1px solid rgba(128,128,128,0.1);
            flex-shrink: 0;
        }

        /* 规则添加行 */
        .rules-add-row {
            display: flex;
            gap: 8px;
            padding: 8px 12px;
            border-bottom: 1px solid rgba(128,128,128,0.1);
            flex-shrink: 0;
            align-items: flex-start;
        }
        .rules-add-row.hidden {
            display: none;
        }
        .rules-add-input {
            flex: 1;
            padding: 8px 12px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-md);
            font-size: 13px;
            font-family: inherit;
            background: var(--bg-input);
            color: var(--text-primary);
            resize: none;
            min-height: 36px;
            max-height: 72px;
            transition: box-shadow 0.2s;
        }
        .rules-add-input:focus {
            outline: none;
            box-shadow: var(--focus-ring);
        }
        .rules-add-input.warn {
            box-shadow: 0 0 0 2px rgba(255,149,0,0.2);
        }
        .rules-add-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
        }
        .rules-add-confirm,
        .rules-add-cancel {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            padding: 4px;
            border-radius: var(--radius-xs);
            transition: background 0.15s;
            line-height: 1;
        }
        .rules-add-confirm:hover {
            background: rgba(52,199,89,0.15);
        }
        .rules-add-cancel:hover {
            background: rgba(255,59,48,0.12);
        }
        .rules-char-hint {
            font-size: 10px;
            color: var(--text-tertiary);
            text-align: center;
        }
        .rules-char-hint.warn {
            color: var(--btn-warning);
            font-weight: 600;
        }

        /* 添加规则按钮 */
        .rules-add-btn {
            width: 100%;
            padding: 8px;
            border: none;
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-pill);
            background: none;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 13px;
            font-family: inherit;
            transition: box-shadow 0.2s, color 0.2s, background 0.2s;
        }
        .rules-add-btn:hover {
            box-shadow: 0 0 0 1px var(--accent);
            color: var(--accent);
            background: rgba(var(--accent-rgb),0.04);
        }
        .rules-add-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            box-shadow: var(--ring-subtle);
            color: var(--text-tertiary);
        }

        /* 规则卡片 */
        .rule-card {
            background: var(--bg-input);
            box-shadow: var(--ring-subtle);
            border-radius: var(--radius-md);
            display: grid;
            grid-template-rows: auto 0fr;
            transition: grid-template-rows 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                        box-shadow 0.2s, opacity 0.2s,
                        margin-top 0.3s var(--ease-emphasis),
                        margin-bottom 0.3s var(--ease-emphasis),
                        transform 0.3s var(--ease-emphasis);
            will-change: grid-template-rows;
            cursor: pointer;
            user-select: none;
        }
        .rule-card.expanded {
            grid-template-rows: auto 1fr;
        }
        .rule-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-float);
        }
        .rule-card:active {
            transform: scale(0.98);
        }
        .rule-card.expanded {
            box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(0,0,0,0.06);
        }
        .rule-card.dragging {
            opacity: 0.35;
            transform: scale(0.96);
        }
        .rule-card.drag-gap-before {
            margin-top: 52px;
            position: relative;
        }
        .rule-card.drag-gap-before::before {
            content: '';
            position: absolute;
            top: -38px;
            left: 4px;
            right: 4px;
            height: 24px;
            border-radius: var(--radius-md);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%);
            box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255,255,255,0.3);
            pointer-events: none;
        }
        .rule-card.drag-gap-after {
            margin-bottom: 52px;
            position: relative;
        }
        .rule-card.drag-gap-after::after {
            content: '';
            position: absolute;
            bottom: -38px;
            left: 4px;
            right: 4px;
            height: 24px;
            border-radius: var(--radius-md);
            background: linear-gradient(0deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%);
            box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255,255,255,0.3);
            pointer-events: none;
        }
        .rule-card.disabled {
            opacity: 0.5;
        }
        .rule-card.disabled .rule-card-number {
            color: var(--text-tertiary);
        }
        .rule-card.disabled .rule-card-summary {
            text-decoration: line-through;
            color: var(--text-tertiary);
        }

        /* 卡片头部 */
        .rule-card-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 10px;
            min-height: 40px;
        }
        .rule-card-drag-handle {
            display: inline-block;
            cursor: grab;
            padding: 0 4px;
            color: var(--text-tertiary);
            font-size: 12px;
            opacity: 0.5;
            transition: opacity 0.2s;
            flex-shrink: 0;
        }
        .rule-card:hover .rule-card-drag-handle {
            opacity: 1;
        }
        .rule-card-number {
            font-size: 11px;
            font-weight: 700;
            color: var(--accent);
            min-width: 18px;
            flex-shrink: 0;
        }
        .rule-card-summary {
            flex: 1;
            font-size: 13px;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
        }

        /* 卡片操作按钮 */
        .rule-card-actions {
            display: flex;
            gap: 2px;
            flex-shrink: 0;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .rule-card:hover .rule-card-actions {
            opacity: 1;
        }
        .rule-card-action-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 3px 6px;
            font-size: 13px;
            border-radius: var(--radius-xs);
            color: var(--text-tertiary);
            transition: background 0.15s, color 0.15s;
            line-height: 1;
        }
        .rule-card-action-btn:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .rule-card-action-btn.delete-btn:hover {
            background: rgba(255,59,48,0.12);
            color: var(--btn-danger);
        }

        /* ===== Rule Card Toggle 开关 ===== */
        .rule-card-toggle {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            flex-shrink: 0;
            position: relative;
        }
        .rule-card-toggle-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }
        .rule-card-toggle-track {
            width: 38px;
            height: 22px;
            border-radius: 11px;
            background: #d1d1d6;
            transition: background 0.25s;
        }
        .rule-card-toggle-knob {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: left 0.4s var(--ease-emphasis), transform 0.4s var(--ease-emphasis);
        }
        .rule-card-toggle-input:checked + .rule-card-toggle-track {
            background: var(--accent);
        }
        .rule-card-toggle-input:checked + .rule-card-toggle-track .rule-card-toggle-knob {
            left: 18px;
            animation: toggleBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes toggleBounce {
            0% { transform: scale(1); }
            30% { transform: scale(1.25); }
            55% { transform: scale(0.9); }
            75% { transform: scale(1.06); }
            90% { transform: scale(0.96); }
            100% { transform: scale(1); }
        }

        /* 展开内容区（手风琴动画） */
        .rule-card-body {
            overflow: hidden;
            min-height: 0;
            padding: 0 10px 10px 10px;
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        }

        /* 展开箭头 */
        .rule-card-expand-arrow {
            font-size: 11px;
            color: var(--text-tertiary);
            flex-shrink: 0;
            user-select: none;
            transition: transform 0.35s var(--ease-emphasis);
        }
        .rule-card.expanded .rule-card-expand-arrow {
            transform: rotate(90deg);
        }

        /* 编辑模式 */
        .rule-card-edit-input {
            width: 100%;
            padding: 6px 8px;
            border: none;
            box-shadow: 0 0 0 1px var(--accent);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-family: inherit;
            background: var(--bg-input);
            color: var(--text-primary);
            resize: vertical;
            min-height: 48px;
            box-sizing: border-box;
        }
        .rule-card-edit-input.warn {
            box-shadow: 0 0 0 1px var(--btn-warning);
        }
        .rule-card-edit-actions {
            display: flex;
            justify-content: flex-end;
            gap: 6px;
            margin-top: 6px;
        }
        .rule-card-edit-save,
        .rule-card-edit-cancel {
            padding: 4px 12px;
            border-radius: var(--radius-pill);
            border: none;
            font-size: 12px;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s;
        }
        .rule-card-edit-save {
            background: var(--accent);
            color: #fff;
        }
        .rule-card-edit-save:hover {
            background: var(--accent-hover);
        }
        .rule-card-edit-cancel {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }
        .rule-card-edit-cancel:hover {
            background: var(--border-light);
        }

        /* 编辑器共享元素 */
        .sp-char-count {
            font-size: 10px;
            color: var(--text-tertiary);
        }
        .sp-char-count-wrap {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .sp-char-ring {
            flex-shrink: 0;
        }
        .sp-char-ring-fill {
            transition: stroke-dashoffset 0.25s ease, stroke 0.25s ease;
        }
        .sp-save-btn {
            position: relative;
            overflow: visible;
            height: 32px;
            padding: 0 14px;
            border-radius: var(--radius-pill);
            border: none;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            background: var(--accent);
            color: #fff;
            transition: var(--transition-ui);
        }
        .sp-save-btn:hover {
            background: var(--accent-hover);
        }
        .sp-save-particle {
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            will-change: transform, opacity;
        }
        .rule-drag-particle {
            pointer-events: none;
        }

        /* ===== 预览卡片（覆盖层） ===== */
        .sp-preview-overlay {
            position: fixed;
            inset: 0;
            z-index: 1060;
            background: rgba(0,0,0,.3);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn .2s var(--ease-standard);
        }
        .sp-preview-card {
            background: var(--bg-sidebar);
            border-radius: var(--radius-xl);
            padding: 20px;
            width: 90%;
            max-width: 340px;
            max-height: 70vh;
            overflow-y: auto;
            box-shadow: var(--shadow-elevated);
            animation: slideUp .25s var(--ease-standard);
        }
        .sp-preview-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .sp-preview-content {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.7;
            background: var(--bg-chat);
            border-radius: var(--radius-md);
            padding: 12px;
            margin: 10px 0;
            max-height: 35vh;
            overflow-y: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .sp-preview-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 12px;
        }
        .sp-preview-btn {
            height: 36px;
            padding: 0 18px;
            border-radius: var(--radius-pill);
            border: none;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s;
        }
        .sp-preview-btn.primary {
            background: linear-gradient(135deg,var(--accent),var(--accent-300));
            color: #fff;
        }
        .sp-preview-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(var(--accent-rgb),.3);
        }
        .sp-preview-btn.cancel {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }
        .sp-preview-btn.cancel:hover {
            background: var(--border-light);
        }

        /* ===== 多答案并列面板（嵌入聊天流顶部，sticky吸附） ===== */
        .multi-answer-panel {
            position: sticky;
            top: 0;
            z-index: 20;
            margin: 0 0 10px 0;
            border-radius: var(--radius-md);
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(128,128,128,0.12);
            will-change: transform;
            transition: background 0.35s var(--ease-standard),
                        border-radius 0.3s var(--ease-standard),
                        box-shadow 0.3s var(--ease-standard),
                        transform 0.3s var(--ease-standard);
            animation: panelFadeIn 0.25s var(--ease-standard);
        }
        @keyframes panelFadeIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Scrolled state: shrink to thin strip */
        .multi-answer-panel.scrolled {
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-card);
            background: rgba(255,255,255,0.55);
        }
        .multi-answer-panel.scrolled .multi-answer-cards {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            gap: 0;
        }
        .multi-answer-panel.scrolled .multi-answer-banner {
            padding: 6px 14px;
            font-size: 12px;
        }

        body.dark .multi-answer-panel {
            background: rgba(30,30,40,0.75);
            border-color: rgba(255,255,255,0.08);
            box-shadow: var(--shadow-card);
        }
        body.dark .multi-answer-panel.scrolled {
            background: rgba(30,30,40,0.55);
        }

        /* Banner — always visible */
        .multi-answer-banner {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            transition: padding 0.3s var(--ease-standard),
                        font-size 0.3s var(--ease-standard);
        }
        .ma-banner-icon {
            font-size: 16px;
            flex-shrink: 0;
        }
        .ma-banner-text {
            flex: 1;
        }
        .ma-banner-chevron {
            font-size: 12px;
            color: var(--text-tertiary);
            transition: transform 0.25s;
            flex-shrink: 0;
        }
        .multi-answer-panel.expanded .ma-banner-chevron {
            transform: rotate(90deg);
        }

        /* Cards container */
        .multi-answer-cards {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 10px 10px;
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.35s var(--ease-standard),
                        opacity 0.25s var(--ease-standard),
                        padding 0.3s var(--ease-standard),
                        gap 0.3s var(--ease-standard);
        }
        .multi-answer-panel:not(.expanded) .multi-answer-cards {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            overflow: hidden;
        }

        /* Answer card */
        .answer-card {
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(128,128,128,0.06);
            will-change: transform;
            transition: opacity 0.28s var(--ease-standard),
                        transform 0.28s var(--ease-standard),
                        max-height 0.28s var(--ease-standard),
                        margin 0.28s var(--ease-standard),
                        padding 0.28s var(--ease-standard),
                        box-shadow 0.25s var(--ease-standard),
                        border-color 0.25s var(--ease-standard);
            max-height: 600px;
        }
        @media (hover: hover) {
            .answer-card:hover {
                transform: translateY(-3px);
                box-shadow: var(--shadow-float);
                border-color: var(--accent);
            }
        }
        .answer-card.selecting {
            opacity: 0;
            transform: scale(0.96);
            max-height: 0;
            margin: 0;
            padding: 0;
            pointer-events: none;
        }
        .answer-card.dismissing {
            opacity: 0;
            transform: translateY(-6px);
            pointer-events: none;
        }
        .multi-answer-panel.dismissed {
            opacity: 0;
            transform: translateY(-4px);
            margin: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.32s var(--ease-standard),
                        transform 0.32s var(--ease-standard),
                        margin 0.32s var(--ease-standard),
                        max-height 0.32s var(--ease-standard);
        }
        .answer-card:active {
            transform: scale(0.97);
        }
        body.dark .answer-card {
            background: rgba(40,40,55,0.8) !important;
            border-color: rgba(255,255,255,0.05);
        }

        .answer-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(128,128,128,0.06);
        }
        .answer-card-header .answer-letter {
            font-size: 18px;
            flex-shrink: 0;
            line-height: 1;
        }
        .answer-card-header .answer-label-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .answer-status {
            margin-left: auto;
            font-size: 11px;
            color: var(--text-tertiary);
            flex-shrink: 0;
        }
        .answer-status.done {
            color: var(--color-success);
        }
        .answer-status.error {
            color: var(--color-error);
        }

        /* Card body */
        .answer-card-body {
            padding: 10px 14px 14px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-primary);
        }
        .answer-card-body .answer-content-area {
            min-height: 20px;
        }
        .answer-card-body .reasoning-block {
            margin-bottom: 8px;
        }
        .answer-card-body .reasoning-content {
            font-size: 11px;
        }

        /* Card footer */
        .answer-card-footer {
            margin-top: 8px;
        }
        .answer-select-btn {
            display: inline-block;
            padding: 7px 20px;
            background: var(--accent);
            color: var(--text-user-bubble);
            border: none;
            border-radius: var(--radius-pill);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
        }
        @media (hover: hover) {
            .answer-select-btn:hover {
                background: var(--accent-hover);
            }
        }
        .answer-select-btn:active {
            transform: scale(0.97);
        }

        /* ===== Rainbow skeleton shimmer =====
           Low-saturation multi-hue gradient sweeps L→R:
           accent(purple) → blue → teal → green → amber → transparent */
        --sk-rainbow: linear-gradient(90deg,
            rgba(128,128,128,0.05) 0%,
            rgba(128,128,128,0.05) 30%,
            rgba(var(--accent-rgb),0.05)       36%,
            rgba(140,160,255,0.04)    40%,
            rgba(120,200,210,0.04)    44%,
            rgba(130,200,150,0.04)    48%,
            rgba(210,185,130,0.05)    52%,
            rgba(var(--accent-rgb),0.05)       56%,
            rgba(128,128,128,0.05) 60%,
            rgba(128,128,128,0.05) 100%
        );
        --sk-rainbow-dark: linear-gradient(90deg,
            rgba(255,255,255,0.015) 0%,
            rgba(255,255,255,0.015) 30%,
            rgba(var(--accent-rgb),0.07)       36%,
            rgba(150,170,255,0.06)    40%,
            rgba(130,210,220,0.06)    44%,
            rgba(140,210,160,0.06)    48%,
            rgba(220,195,140,0.07)    52%,
            rgba(var(--accent-rgb),0.07)       56%,
            rgba(255,255,255,0.015) 60%,
            rgba(255,255,255,0.015) 100%
        );

        /* ---- Skeleton line (generic, backward compatible) ---- */
        .skeleton-line {
            position: relative;
            z-index: 0;
            height: 12px;
            border-radius: 6px;
            background: var(--sk-rainbow);
            background-size: 260% 100%;
            animation: skeletonShimmer 2.2s ease-in-out infinite;
        }
        .skeleton-line.short { width: 60%; }
        .skeleton-line.medium { width: 80%; }
        .skeleton-line.long { width: 94%; }

        /* ---- Skeleton text — subtle wave shape ---- */
        .skeleton-text {
            height: 12px;
            border-radius: 11px 3px 11px 3px / 58% 42% 60% 40%;
            background: var(--sk-rainbow);
            background-size: 260% 100%;
            animation: skeletonShimmer 2.2s ease-in-out infinite;
        }
        .skeleton-text:nth-child(odd) {
            border-radius: 3px 12px 3px 12px / 38% 62% 42% 58%;
        }
        .skeleton-text.short { width: 60%; }
        .skeleton-text.medium { width: 80%; }
        .skeleton-text.long { width: 94%; }

        /* ---- Skeleton code block — rectangle + diagonal stripes ---- */
        .skeleton-code {
            position: relative;
            z-index: 0;
            height: 56px;
            border-radius: var(--radius-sm);
            background: var(--sk-rainbow);
            background-size: 260% 100%;
            animation: skeletonShimmer 2.2s ease-in-out infinite;
            overflow: hidden;
        }
        .skeleton-code::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: repeating-linear-gradient(
                -35deg,
                transparent,
                transparent 6px,
                rgba(255,255,255,0.03) 6px,
                rgba(255,255,255,0.03) 12px
            );
        }
        body.dark .skeleton-code::after {
            background: repeating-linear-gradient(
                -35deg,
                transparent,
                transparent 6px,
                rgba(255,255,255,0.025) 6px,
                rgba(255,255,255,0.025) 12px
            );
        }

        /* ---- Skeleton list row — dot + line ---- */
        .skeleton-list-row {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 14px;
        }
        .skeleton-list-row::before {
            content: '';
            flex-shrink: 0;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(128,128,128,0.12);
            animation: skeletonDotPulse 2.2s ease-in-out infinite;
        }
        .skeleton-list-row::after {
            content: '';
            flex: 1;
            height: 10px;
            border-radius: 5px;
            background: var(--sk-rainbow);
            background-size: 260% 100%;
            animation: skeletonShimmer 2.2s ease-in-out infinite;
        }
        @keyframes skeletonDotPulse {
            0%, 100% { background: rgba(128,128,128,0.12); }
            50%      { background: rgba(var(--accent-rgb),0.20); }
        }

        /* #28/#29 极光渐变流动: 30秒循环，通过 background-position 在 400% 画布上缓缓漂移 */
        @keyframes auroraFlow {
            0%   { background-position: 0% 50%; }
            25%  { background-position: 100% 25%; }
            50%  { background-position: 100% 75%; }
            75%  { background-position: 0% 75%; }
            100% { background-position: 0% 50%; }
        }

        /* ---- Skeleton card overlay (diagonal gloss sweep) ---- */
        .answer-skeleton,
        .streaming-skeleton,
        .gc-streaming-skeleton {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 4px 0 12px;
            position: relative;
            overflow: hidden;
        }
        .answer-skeleton::before,
        .streaming-skeleton::before,
        .gc-streaming-skeleton::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-sm);
            background: linear-gradient(115deg,
                transparent 0%,
                transparent 38%,
                rgba(var(--accent-rgb),0.03) 44%,
                rgba(150,180,240,0.06) 48%,
                rgba(120,200,180,0.04) 50%,
                rgba(200,180,140,0.05) 52%,
                rgba(var(--accent-rgb),0.03) 56%,
                transparent 62%,
                transparent 100%
            );
            background-size: 250% 100%;
            animation: skeletonCardGloss 3.2s ease-in-out infinite;
            z-index: 1;
            pointer-events: none;
        }

        /* ---- Legacy skeleton-block (backward compat, now thin rainbow) ---- */
        .skeleton-block {
            position: relative;
            z-index: 0;
            height: 56px;
            border-radius: var(--radius-sm);
            background: var(--sk-rainbow);
            background-size: 260% 100%;
            animation: skeletonShimmer 2.2s ease-in-out infinite;
            overflow: hidden;
        }
        .skeleton-block::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(105deg,
                transparent 40%,
                rgba(var(--accent-rgb),0.06) 46%,
                rgba(180,200,240,0.08) 50%,
                rgba(var(--accent-rgb),0.06) 54%,
                transparent 60%
            );
            background-size: 260% 100%;
            animation: skeletonGlint 3s ease-in-out infinite;
        }

        /* ---- Dark mode variants ---- */
        body.dark .skeleton-line {
            background: var(--sk-rainbow-dark);
            background-size: 260% 100%;
        }
        body.dark .skeleton-text {
            background: var(--sk-rainbow-dark);
            background-size: 260% 100%;
        }
        body.dark .skeleton-code {
            background: var(--sk-rainbow-dark);
            background-size: 260% 100%;
        }
        body.dark .skeleton-list-row::after {
            background: var(--sk-rainbow-dark);
            background-size: 260% 100%;
        }
        body.dark .skeleton-block {
            background: var(--sk-rainbow-dark);
            background-size: 260% 100%;
        }
        body.dark .skeleton-block::after {
            background: linear-gradient(105deg,
                transparent 40%,
                rgba(158,122,255,0.06) 46%,
                rgba(160,180,240,0.08) 50%,
                rgba(158,122,255,0.06) 54%,
                transparent 60%
            );
            background-size: 260% 100%;
        }
        body.dark .answer-skeleton::before,
        body.dark .streaming-skeleton::before,
        body.dark .gc-streaming-skeleton::before {
            background: linear-gradient(115deg,
                transparent 0%,
                transparent 38%,
                rgba(158,122,255,0.04) 44%,
                rgba(140,170,240,0.07) 48%,
                rgba(120,200,180,0.05) 50%,
                rgba(200,180,140,0.06) 52%,
                rgba(158,122,255,0.04) 56%,
                transparent 62%,
                transparent 100%
            );
        }
        body.dark .skeleton-list-row::before {
            animation: skeletonDotPulseDark 2.2s ease-in-out infinite;
        }
        @keyframes skeletonDotPulseDark {
            0%, 100% { background: rgba(255,255,255,0.08); }
            50%      { background: rgba(var(--accent-rgb),0.25); }
        }

        @keyframes skeletonShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @keyframes skeletonGlint {
            0% { background-position: 200% 0; opacity: 0; }
            25% { opacity: 1; }
            45% { opacity: 0; }
            100% { background-position: -200% 0; opacity: 0; }
        }
        @keyframes skeletonCardGloss {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @keyframes messageGrowIn {
            0% { opacity: 0; transform: translateY(8px) scale(0.96); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .message.grow-in {
            animation: messageGrowIn 0.38s var(--ease-standard) forwards;
        }

        /* 长时间思考提示 */
        .thinking-indicator {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            color: var(--text-tertiary);
            font-size: 13px;
            margin-left: 4px;
            vertical-align: middle;
        }
        .thinking-indicator .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            animation: dotBounce 0.6s ease-in-out infinite;
        }
        .thinking-indicator .dot:nth-child(1) { animation-delay: 0s; }
        .thinking-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
        .thinking-indicator .dot:nth-child(3) { animation-delay: 0.3s; }
        @keyframes dotBounce {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
            40% { transform: translateY(-6px); opacity: 1; }
        }

        .streaming-skeleton .skeleton-block {
            width: 100%;
        }

        /* 推理骨架屏 — 迷你线 + 块 */
        .reasoning-skeleton {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 8px 0 4px;
        }
        .reasoning-skeleton .skeleton-line {
            height: 8px;
            border-radius: 4px;
        }

        /* Error message */
        .answer-error-msg {
            color: var(--color-error);
            font-size: 13px;
        }

        /* 可展开错误详情 */
        .error-summary {
            color: var(--color-error);
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1.5;
        }
        .error-details {
            margin-top: 6px;
        }
        .error-details summary {
            color: var(--text-tertiary);
            font-size: 12px;
            cursor: pointer;
            user-select: none;
            padding: 4px 0;
        }
        .error-details summary:hover {
            color: var(--text-secondary);
        }
        .error-detail-text {
            margin-top: 6px;
            padding: 8px 12px;
            background: rgba(0,0,0,0.04);
            border-radius: var(--radius-sm);
            font-size: 11px;
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 180px;
            overflow-y: auto;
            line-height: 1.5;
        }
        body.dark .error-detail-text {
            background: rgba(255,255,255,0.04);
        }
        .error-hint {
            margin-top: 10px;
            color: var(--text-tertiary);
            font-size: 12px;
            line-height: 1.6;
        }

        /* Mobile */
        @media (max-width: 600px) {
            .multi-answer-panel {
                margin: 0 0 6px 0;
                border-radius: var(--radius-sm);
            }
            .multi-answer-banner {
                padding: 6px 10px;
                font-size: 12px;
            }
            .multi-answer-cards {
                gap: 6px;
                padding: 0 8px 8px;
                max-height: 40vh;
            }
            .answer-card-header {
                padding: 8px 10px;
            }
            .answer-card-body {
                padding: 8px 10px 10px;
                font-size: 13px;
            }
            .answer-select-btn {
                padding: 6px 16px;
                font-size: 12px;
            }
        }
        
        /* ===== 暗色模式切换按钮 ===== */
        .dark-toggle {
            display: flex;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: none;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .dark-toggle .dt-option {
            flex: 1;
            padding: 7px 10px;
            font-size: 13px;
            border: none;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            white-space: nowrap;
            text-align: center;
        }
        .dark-toggle .dt-option:first-child {
            border-right: 1px solid var(--border-light);
        }
        .dark-toggle .dt-option.active {
            background: var(--accent);
            color: var(--text-user-bubble);
        }
        .dark-toggle .dt-option:not(.active):hover {
            background: var(--bg-hover);
        }

        .accent-picker-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }
        .accent-picker-label {
            font-size: 13px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        .accent-color-input {
            width: 32px;
            height: 32px;
            padding: 0;
            border: 2px solid var(--border-light);
            border-radius: 50%;
            cursor: pointer;
            background: none;
        }
        .accent-color-input::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        .accent-color-input::-webkit-color-swatch {
            border: none;
            border-radius: 50%;
        }
        .accent-color-input::-moz-color-swatch {
            border: none;
            border-radius: 50%;
        }

        /* ===== 聊天背景自定义 ===== */
        .bg-picker-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 0;
            gap: 8px;
            font-size: 13px;
        }
        .bg-picker-row label {
            color: var(--text-secondary);
            white-space: nowrap;
            min-width: 48px;
            font-weight: 500;
        }
        .bg-type-toggle {
            display: flex;
            border-radius: var(--radius-sm);
            overflow: hidden;
            flex-shrink: 0;
        }
        .bg-type-toggle button {
            padding: 5px 10px;
            font-size: 11px;
            border: none;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            font-weight: 500;
        }
        .bg-type-toggle button:active {
            transform: scale(0.94);
        }
        .bg-type-toggle button.active {
            background: var(--accent);
            color: #fff;
        }
        .bg-type-toggle button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
        .bg-type-toggle button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
        .bg-color-inputs {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .bg-color-inputs input[type="color"] {
            width: 28px;
            height: 28px;
            padding: 0;
            border: 2px solid var(--border-light);
            border-radius: 50%;
            cursor: pointer;
            background: none;
        }
        .bg-color-inputs input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
        .bg-color-inputs input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
        .bg-color-inputs input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
        .bg-image-upload-btn {
            padding: 5px 10px;
            font-size: 11px;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-primary);
            transition: var(--transition-ui);
            font-weight: 500;
        }
        .bg-image-upload-btn:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .bg-opacity-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
        }
        .bg-opacity-row label {
            color: var(--text-secondary);
            white-space: nowrap;
            min-width: 48px;
            font-size: 13px;
            font-weight: 500;
        }
        .bg-opacity-row input[type="range"] {
            flex: 1;
            accent-color: var(--accent);
        }
        .bg-opacity-row span {
            color: var(--text-tertiary);
            font-size: 12px;
            min-width: 36px;
            text-align: right;
        }
        .bg-reset-btn {
            padding: 5px 12px;
            font-size: 12px;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            font-weight: 500;
        }
        .bg-reset-btn:hover {
            border-color: var(--btn-danger);
            color: var(--btn-danger);
        }
        .bg-picker-hint {
            font-size: 11px;
            color: var(--text-tertiary);
            margin-top: 2px;
        }

        /* ===== 提示词开关按钮 ===== */
        .prompt-toggle {
            display: flex;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: none;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
            flex-shrink: 0;
        }
        .prompt-toggle .pt-option {
            flex: 1;
            padding: 5px 8px;
            font-size: 11px;
            border: none;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            white-space: nowrap;
            text-align: center;
        }
        .prompt-toggle .pt-option:first-child {
            border-right: 1px solid var(--border-light);
        }
        .prompt-toggle .pt-option.active {
            background: var(--accent);
            color: var(--text-user-bubble);
        }
        .prompt-toggle .pt-option:not(.active):hover {
            background: var(--bg-hover);
        }

        /* 提示词禁用态 — 折叠隐藏 */
        #spBody.disabled {
            max-height: 0;
            overflow: hidden;
            margin-top: 0;
            margin-bottom: 0;
            opacity: 0;
            pointer-events: none;
            transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
        }
        #spBody:not(.disabled) {
            max-height: 800px;
            overflow: hidden;
            opacity: 1;
            transition: max-height 0.35s ease, opacity 0.25s ease;
        }

        /* ===== 头像名称开关 ===== */
        .avatar-toggle {
            display: flex;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: none;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
            flex-shrink: 0;
            margin-bottom: 8px;
        }
        .avatar-toggle .at-option {
            flex: 1;
            padding: 5px 8px;
            font-size: 11px;
            border: none;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            white-space: nowrap;
            text-align: center;
        }
        .avatar-toggle .at-option:first-child {
            border-right: 1px solid var(--border-light);
        }
        .avatar-toggle .at-option.active {
            background: var(--accent);
            color: var(--text-user-bubble);
        }
        .avatar-toggle .at-option:not(.active):hover {
            background: var(--bg-hover);
        }

        /* 通用 section 折叠 */
        #avatarNameSectionBody.disabled,
        #apiKeySectionBody.disabled {
            max-height: 0;
            overflow: hidden;
            margin-top: 0;
            margin-bottom: 0;
            opacity: 0;
            pointer-events: none;
            transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
        }
        #avatarNameSectionBody:not(.disabled),
        #apiKeySectionBody:not(.disabled) {
            max-height: 200px;
            overflow: hidden;
            opacity: 1;
            transition: max-height 0.35s ease, opacity 0.25s ease;
        }

        /* 通用 section 开关按钮 */
        .section-toggle {
            display: flex;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: none;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
            flex-shrink: 0;
            margin-bottom: 8px;
        }
        .section-toggle .st-option {
            flex: 1;
            padding: 5px 8px;
            font-size: 11px;
            border: none;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            white-space: nowrap;
            text-align: center;
        }
        .section-toggle .st-option:first-child {
            border-right: 1px solid var(--border-light);
        }
        .section-toggle .st-option.active {
            background: var(--accent);
            color: var(--text-user-bubble);
        }
        .section-toggle .st-option:not(.active):hover {
            background: var(--bg-hover);
        }
        .section-toggle .im-option {
            flex: 1;
            padding: 5px 8px;
            font-size: 11px;
            border: none;
            cursor: pointer;
            background: var(--bg-input);
            color: var(--text-secondary);
            transition: var(--transition-ui);
            white-space: nowrap;
            text-align: center;
        }
        .section-toggle .im-option:first-child {
            border-right: 1px solid var(--border-light);
        }
        .section-toggle .im-option.active {
            background: var(--accent);
            color: var(--text-user-bubble);
        }
        .section-toggle .im-option:not(.active):hover {
            background: var(--bg-hover);
        }

        /* 关闭时 header 显示对话标题为主标题（绝对居中），左侧按钮靠左 */
        body.hide-avatar-name .header {
            justify-content: flex-start;
        }
        body.hide-avatar-name .header h1 {
            display: none;
        }
        body.hide-avatar-name .header-conv-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
            max-width: 55%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ===== 确认删除弹窗 ===== */
        .confirm-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.35);
            backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center;
            z-index: 10000;
            animation: confirmFadeIn 0.2s ease;
        }
        @keyframes confirmFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .confirm-dialog {
            background: var(--bg-header);
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
            padding: 28px 24px 20px;
            max-width: 320px; width: 90%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            animation: confirmScaleIn 0.25s var(--ease-standard);
        }
        @keyframes confirmScaleIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .confirm-title {
            font-size: 17px; font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .confirm-msg {
            font-size: 14px; color: var(--text-secondary);
            line-height: 1.5; margin-bottom: 20px;
        }
        .confirm-actions {
            display: flex; gap: 10px;
        }
        .confirm-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: var(--radius-pill);
            border: none;
            font-size: 14px; font-weight: 600;
            cursor: pointer;
            transition: var(--transition-ui);
        }
        .confirm-btn:active {
            transform: scale(0.96);
        }
        .confirm-btn-cancel {
            background: var(--bg-input);
            color: var(--text-primary);
        }
        .confirm-btn-cancel:hover {
            background: var(--bg-hover);
        }
        .confirm-btn-delete {
            background: var(--color-error);
            color: #fff;
        }
        .confirm-btn-delete:hover {
            background: #e0352b;
        }


        /* ===== 滚动条美化 ===== */
        ::-webkit-scrollbar {
            width: 6px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(var(--accent-rgb),.25);
            border-radius: 999px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--accent-rgb),.4);
        }
        
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        
        /* 移动端字体默认稍大 */
        @media (max-width: 600px) {
            :root {
                --font-size: 16px;
                --radius-card: 24px;
                --radius-sheet: 24px;
            }
            /* 新建模板按钮缩小 */
            .sp-new-tmpl-btn {
                height: 28px;
                padding: 0 8px;
                font-size: 14px;
                border-radius: var(--radius-pill);
                min-width: 28px;
            }
            .settings-modal {
                width: 100%;
                max-width: 100%;
                max-height: 100vh;
                max-height: 100dvh;
                border-radius: 0;
            }
            .settings-modal-scroll {
                padding: 12px 16px;
            }
        }


        /* ===== 玻璃态伪元素（双层质感 + 边缘描边 + 动态环境光） ===== */
        .header::before,
        #sidebar::before,
        .input-area::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            border-radius: inherit;
            border: 1px solid rgba(255,255,255,0.15);
            box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
        }

        .header::after,
        #sidebar::after,
        .input-area::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            border-radius: inherit;
            background:
                radial-gradient(
                    ellipse 400px 300px at calc(var(--glass-lx, 0.5) * 100%) calc(var(--glass-ly, 0.5) * 100%),
                    rgba(255,240,220, 0.05) 0%,
                    transparent 70%
                ),
                radial-gradient(
                    ellipse 400px 300px at calc(var(--glass-lx, 0.5) * 100%) calc(var(--glass-ly, 0.5) * 100%),
                    var(--glass-highlight) 0%,
                    transparent 70%
                );
            opacity: 0;
            transition: opacity 0.6s;
        }

        .header.glass-ready::after,
        #sidebar.glass-ready::after,
        .input-area.glass-ready::after {
            opacity: 1;
        }

        /* 暗色模式微调 */
        body.dark .header::before,
        body.dark #sidebar::before,
        body.dark .input-area::before {
            border-color: rgba(255,255,255,0.10);
            box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }

        @media (prefers-reduced-motion: reduce) {
            body {
                animation: none !important;
            }
            .header::after,
            #sidebar::after,
            .input-area::after,
            .chat-messages::after {
                display: none;
            }
            .user-message .bubble::after,
            .assistant-message .bubble::after {
                display: none;
            }
        }

        /* ===== 暗色模式专用覆盖 ===== */
        body.dark .bubble pre {
            background: #1e1e2e;
        }
        body.dark .bubble code {
            background: #2a2a3e;
        }
        body.dark .bubble :not(pre) > code {
            background: #2a2a3e;
        }
        body.dark .bubble th {
            background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.03) 0%,
                rgba(255, 255, 255, 0.01) 100%);
        }
        body.dark .bubble th, body.dark .bubble td {
            border-color: rgba(255,255,255,0.05);
        }
        body.dark .bubble tr:nth-child(even) td {
            background: rgba(255, 255, 255, 0.015);
        }
        body.dark .bubble tbody tr:hover td {
            background: rgba(255, 255, 255, 0.04);
        }
        body.dark .bubble blockquote {
            background: linear-gradient(105deg,
                rgba(255, 255, 255, 0.025) 0%,
                rgba(255, 255, 255, 0.01) 40%,
                transparent 100%);
        }
        body.dark .code-block-header {
            background: var(--bg-hover);
        }
        body.dark .assistant-message .bubble {
            background: linear-gradient(160deg, rgba(42,42,50,0.36) 0%, rgba(42,42,50,0.88) 100%);
            border-color: rgba(255,255,255,0.06);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.06),
                inset 0 0 0 0.5px rgba(255,255,255,0.04),
                0 0 0 0.5px rgba(255,255,255,0.06),
                0 2px 8px rgba(var(--accent-rgb),0.08),
                0 1px 3px rgba(0,0,0,0.20);
        }
        body.dark .assistant-message .bubble::before {
            background: radial-gradient(
                ellipse 200px 140px at calc(var(--glass-lx, 0.5) * 100%) 130%,
                rgba(255, 255, 255, 0.04) 0%,
                transparent 65%
            );
        }
        body.dark .assistant-message .bubble::after {
            background: radial-gradient(
                ellipse 100px 60px at var(--gloss-x, 50%) var(--gloss-y, 100%),
                rgba(255, 255, 255, 0.07) 0%,
                transparent 55%
            );
        }
        body.dark .user-message .bubble {
            background: linear-gradient(160deg, var(--accent-300) 0%, var(--accent-hover) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.10),
                inset 0 0 0 0.5px rgba(255,255,255,0.04),
                0 0 0 0.5px rgba(255,255,255,0.08),
                0 2px 8px rgba(var(--accent-rgb),0.18),
                0 1px 3px rgba(0,0,0,0.25);
        }
        body.dark .user-message .bubble::after {
            background: radial-gradient(
                ellipse 80px 50px at var(--gloss-x, 50%) var(--gloss-y, 100%),
                rgba(255, 255, 255, 0.14) 0%,
                transparent 60%
            );
        }
        body.dark .input-area {
            background: rgba(30, 30, 50, 0.75);
            box-shadow:
                inset 0 1px 0 var(--glass-edge-light),
                inset 0 -1px 0 var(--glass-edge-dark),
                inset 0 0 30px var(--glass-depth),
                inset 0 0 0 0.5px rgba(255,255,255,0.04),
                0 -2px 10px rgba(0,0,0,0.15);
        }
        body.dark .input-area textarea {
            color: var(--text-primary);
            -webkit-text-fill-color: var(--text-primary);
            background: var(--bg-body);
            box-shadow: 0 2px 12px rgba(0,0,0,0.12), inset 0 0 0 1px var(--border-light);
        }
        body.dark .input-area textarea:focus {
            background: var(--bg-input);
            box-shadow: var(--focus-ring), 0 8px 32px rgba(var(--accent-rgb),0.12);
        }
        @media (pointer: fine) {
            body.dark .input-area textarea:focus {
                animation: focusGlowPulseDark 0.7s ease-out forwards;
            }
        }
        @keyframes focusGlowPulseDark {
            0%   { box-shadow: var(--focus-ring), 0 2px 12px rgba(0,0,0,0.04), inset 0 0 0 1px var(--border-light); }
            30%  { box-shadow: var(--focus-ring), 0 0 0 10px rgba(var(--accent-rgb),0.18), 0 0 60px rgba(var(--accent-rgb),0.16); }
            100% { box-shadow: var(--focus-ring), 0 8px 32px rgba(var(--accent-rgb),0.12); }
        }
        body.dark .input-area textarea:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 30px var(--bg-body) inset !important;
        }
        body.dark .header {
            background: rgba(30,30,50,0.78);
            box-shadow:
                inset 0 1px 0 var(--glass-edge-light),
                inset 0 -1px 0 var(--glass-edge-dark),
                inset 0 0 30px var(--glass-depth),
                inset 0 0 0 0.5px rgba(255,255,255,0.04),
                0 1px 0 rgba(0,0,0,0.12),
                0 2px 12px rgba(0,0,0,0.15);
        }
        body.dark .header h1 {
            color: #d0d0d0;
        }
        body.dark .hamburger-btn {
            color: #b0b0b0;
        }
        body.dark .hamburger-btn:hover {
            color: #e0e0e0;
        }
        body.dark .rules-panel {
            background: #1e1e32;
            box-shadow: var(--shadow-elevated);
        }
        body.dark .rule-card-toggle-track {
            background: #636366;
        }
        body.dark .rule-card-toggle-input:checked + .rule-card-toggle-track {
            box-shadow: 0 0 8px var(--accent-glow);
        }
        body.dark .sidebar-divider {
            box-shadow: 0 1px 0 rgba(255,255,255,0.04);
        }
        body.dark .regenerate-btn, body.dark .edit-btn {
            background: rgba(255,255,255,0.05);
        }
        body.dark .reasoning-block {
            background: #2a2a20;
            box-shadow: 0 0 0 1px rgba(74, 74, 48, 0.5), 0 1px 3px rgba(0,0,0,0.1);
        }
        body.dark .reasoning-header {
            color: #c0b090;
        }
        body.dark .reasoning-header:hover {
            background: #3a3a28;
        }
        body.dark .reasoning-content {
            color: #c0b090;
            border-top-color: #4a4a30;
        }
        body.dark .reasoning-content pre,
        body.dark .reasoning-content code {
            background: #3a3a28;
            border-color: #4a4a30;
        }

        /* 推理块活跃流式脉冲光晕 */
        .reasoning-block.reasoning-streaming {
            animation: reasoningGlow 2s ease-in-out infinite;
        }
        @keyframes reasoningGlow {
            0%, 100% { box-shadow: 0 0 0 1px rgba(232,213,183,0.5), 0 1px 3px rgba(0,0,0,0.03), 0 0 8px rgba(var(--accent-rgb),0.06); }
            50% { box-shadow: 0 0 0 1px rgba(232,213,183,0.5), 0 1px 3px rgba(0,0,0,0.03), 0 0 20px rgba(var(--accent-rgb),0.16); }
        }
        body.dark .reasoning-block.reasoning-streaming {
            animation: reasoningGlowDark 2s ease-in-out infinite;
        }
        @keyframes reasoningGlowDark {
            0%, 100% { box-shadow: 0 0 0 1px rgba(74,74,48,0.5), 0 1px 3px rgba(0,0,0,0.1), 0 0 8px rgba(var(--accent-rgb),0.08); }
            50% { box-shadow: 0 0 0 1px rgba(74,74,48,0.5), 0 1px 3px rgba(0,0,0,0.1), 0 0 22px rgba(var(--accent-rgb),0.2); }
        }
        body.dark .conv-new-btn:hover {
            background: #2a2a3a;
        }
        body.dark .answer-error-msg {
            color: var(--color-error);
        }
        body.dark .avatar-preview-wrapper {
            background: #2a2a3a;
        }
        body.dark .avatar-preview-wrapper:hover {
            background: #2a2a40;
        }
        body.dark .avatar-upload-zone:hover {
            background: #2a2a3a;
        }
        body.dark .avatar-upload-zone.drag-over {
            background: #2a2a3a;
        }
        body.dark .label-avatar {
            background-color: #3a3a50;
        }
        body.dark .input-area button:disabled {
            background: #3a3a4a;
            box-shadow: none;
            color: #777;
        }
        body.dark #thinkToggleBtn .think-track {
            background: #555;
        }
        body.dark #optimizeBtn {
            color: #a0a0b0 !important;
            border-color: #3a3a50 !important;
            background: transparent !important;
        }
        @media (hover: hover) {
            body.dark #optimizeBtn:hover {
                color: var(--accent) !important;
                border-color: var(--accent) !important;
                background: rgba(124, 77, 255, 0.08) !important;
            }
        }
        body.dark #optimizeBtn:disabled {
            color: #555 !important;
            border-color: #2a2a3a !important;
        }
        body.dark .api-key-wrapper input {
            background: #1e1e32;
            color: #e0e0e0;
        }
        
        /* AI角色中心暗色适配 */
        body.dark .sp-current-role-card {
            background: rgba(30,30,50,.8);
            box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(255,255,255,0.04);
        }
        body.dark .sp-current-role-card.has-role {
            background: linear-gradient(135deg,var(--accent),var(--accent-300));
            box-shadow: var(--shadow-elevated), 0 0 0 1px transparent;
        }
        body.dark .sp-cr-btn {
            background: rgba(255,255,255,.06);
            color: #a0a0a0;
            border-color: rgba(255,255,255,.08);
        }
        body.dark .sp-cr-btn:hover {
            background: rgba(255,255,255,.1);
            color: var(--accent);
        }
        body.dark .sp-cr-name-input {
            background: #1e1e32;
            border-color: #2a2a3a;
            color: #e0e0e0;
        }
        body.dark .sp-cr-editor textarea {
            background: #1e1e32;
            border-color: #2a2a3a;
        }
        body.dark .sp-cr-cancel-btn {
            background: rgba(255,255,255,.06);
            color: #a0a0a0;
            border-color: rgba(255,255,255,.08);
        }
        body.dark .sp-cr-cancel-btn:hover {
            background: rgba(255,255,255,.1);
            color: #e0e0e0;
        }
        body.dark .sp-role-card {
            background: rgba(30,30,50,.8);
            border-color: rgba(255,255,255,0.06);
            box-shadow: var(--shadow-card);
        }
        body.dark .sp-role-card:hover {
            box-shadow: var(--shadow-float);
            border-color: rgba(var(--accent-rgb),0.3);
        }
        body.dark .sp-role-card.active {
            background: linear-gradient(135deg,var(--accent),var(--accent-300));
        }
        body.dark .settings-section-title {
            border-bottom-color: rgba(255,255,255,0.06);
        }
        body.dark .sp-popup-menu {
            background: #2a2a40;
            box-shadow: var(--shadow-deep);
        }
        body.dark .sp-popup-menu-item {
            color: #e0e0e0;
        }
        body.dark .sp-popup-menu-item:hover {
            background: #3a3a50;
        }
        body.dark .sp-preview-card {
            background: #1e1e32;
        }
        body.dark .sp-preview-content {
            background: #16162a;
        }
        body.dark .sp-new-tmpl-btn {
            background: rgba(30,30,50,.8);
            border-color: rgba(255,255,255,.08);
        }
        
        
        /* 暗色模式滚动条 */
        body.dark ::-webkit-scrollbar-thumb {
            background: rgba(160,160,200,.35);
        }
        body.dark ::-webkit-scrollbar-thumb:hover {
            background: rgba(160,160,200,.55);
        }

@media (max-width: 600px) {
    /* 移动端：规则面板改为底部弹出 sheet */
    .rules-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 55vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: sheetSlideUp 0.3s var(--ease-standard);
    }
    .rules-panel-overlay {
        background: rgba(0,0,0,0.35);
    }
}

/* ===== #30 景深层次 — 3级阴影区分远近 ===== */
/* 最近消息 — 阴影增强20-30% */
.message:last-child .user-message .bubble,
.message:last-child .assistant-message .bubble {
    filter: drop-shadow(0 5px 22px rgba(0,0,0,0.12));
}
/* 中间层 — 正常阴影 */
.message:nth-last-child(2) .user-message .bubble,
.message:nth-last-child(2) .assistant-message .bubble {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.05));
}
/* 远处消息 — 阴影降低 */
.message:not(:nth-last-child(1)):not(:nth-last-child(2)) .user-message .bubble,
.message:not(:nth-last-child(1)):not(:nth-last-child(2)) .assistant-message .bubble {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.02));
}
body.dark .message:last-child .user-message .bubble,
body.dark .message:last-child .assistant-message .bubble {
    filter: drop-shadow(0 5px 26px rgba(0,0,0,0.42));
}
body.dark .message:nth-last-child(2) .user-message .bubble,
body.dark .message:nth-last-child(2) .assistant-message .bubble {
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.16));
}
body.dark .message:not(:nth-last-child(1)):not(:nth-last-child(2)) .user-message .bubble,
body.dark .message:not(:nth-last-child(1)):not(:nth-last-child(2)) .assistant-message .bubble {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.05));
}

/* ===== #31 暗色模式边缘高光 — 0.5px 极淡白边 ===== */
/* header / #sidebar / .bubble / .input-area 已在上方 box-shadow 中叠加 inset 0 0 0 0.5px */
body.dark .code-block-wrapper {
    box-shadow: var(--shadow-card), inset 0 0 0 0.5px rgba(255,255,255,0.04);
}
body.dark .settings-modal {
    box-shadow: var(--shadow-elevated), inset 0 0 0 0.5px rgba(255,255,255,0.04);
}

/* ===== 沉浸模式（放在最后以覆盖暗色模式） ===== */
body.immersive-mode .assistant-message .bubble,
body.immersive-mode .user-message .bubble {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    filter: none;
    outline: none;
    border-radius: 0;
}
body.immersive-mode .user-message .bubble {
    color: var(--text-primary);
}
body.immersive-mode .assistant-message {
    max-width: 100%;
}
body.immersive-mode .user-message {
    max-width: 100%;
}
body.immersive-mode .message {
    gap: 4px;
}
body.immersive-mode .bubble {
    padding: 0;
}
body.immersive-mode .bubble::before,
body.immersive-mode .bubble::after {
    display: none;
}

/* ===== 发送飞入动画 ===== */
.send-fly-text {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    color: var(--text-primary);
    background: var(--bg-input);
    box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.15), 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    animation: sendFlyUp 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes sendFlyUp {
    0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
    20%  { opacity: 1; transform: translateY(-40px) scale(1.05) rotate(var(--fly-sway, 1.5deg)); }
    60%  { opacity: 0.6; transform: translateY(-140px) scale(0.96) rotate(var(--fly-sway, -1deg)); }
    100% { opacity: 0; transform: translateY(-240px) scale(0.85) rotate(var(--fly-sway, -2.5deg)); }
}

/* 发送粒子散射 */
.send-particle {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    border-radius: var(--particle-radius, 50%);
    box-shadow: 0 0 8px var(--particle-glow);
    opacity: 0.85;
    animation: particleScatter var(--dur, 0.4s) var(--ease-standard) forwards;
}
@keyframes particleScatter {
    0%   { opacity: 0.95; transform: translate(0, 0) scale(1) rotate(0deg); }
    60%  { opacity: 0.4; transform: translate(calc(var(--dx, 0) * 0.6), calc(var(--dy, 0) * 0.6)) scale(0.5); }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.1) rotate(var(--spin, 60deg)); }
}

/* 消息落地光晕 */
.bubble-landed {
    animation: bubbleLandGlow 0.8s var(--ease-standard) forwards;
}
@keyframes bubbleLandGlow {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.6); }
    30%  { box-shadow: 0 0 28px 10px rgba(var(--accent-rgb),0.35), 0 0 56px 3px rgba(var(--accent-rgb),0.15); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}

/* ===== 移动端阴影降级（两层）+ 按压下沉动效 ===== */
@media (max-width: 600px) {
    :root {
        --shadow-sm: 0 1px 3px rgba(var(--accent-rgb),0.09), 0 1px 2px rgba(0,0,0,0.07);
        --shadow-card: 0 2px 6px rgba(var(--accent-rgb),0.10), 0 1px 2px rgba(0,0,0,0.06);
        --shadow-elevated: 0 4px 12px rgba(var(--accent-rgb),0.12), 0 1px 3px rgba(0,0,0,0.08);
        --shadow-float: 0 6px 20px rgba(var(--accent-rgb),0.14), 0 1px 3px rgba(0,0,0,0.10);
    }
    body.dark {
        --shadow-sm: 0 1px 3px rgba(var(--accent-rgb),0.11), 0 1px 2px rgba(0,0,0,0.26);
        --shadow-card: 0 2px 6px rgba(var(--accent-rgb),0.13), 0 1px 2px rgba(0,0,0,0.22);
        --shadow-elevated: 0 4px 12px rgba(var(--accent-rgb),0.15), 0 1px 3px rgba(0,0,0,0.26);
        --shadow-float: 0 6px 20px rgba(var(--accent-rgb),0.17), 0 1px 3px rgba(0,0,0,0.30);
    }

    /* 按压下沉 + 阴影收缩 */
    .input-area button:active {
        transform: scale(0.96) translateY(1px);
        box-shadow: 0 1px 2px rgba(var(--accent-rgb),0.15);
        transition: transform 0.08s ease, box-shadow 0.08s ease;
    }
    .sp-role-card:active:not(.active) {
        transform: scale(0.97) translateY(1px);
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(var(--accent-rgb),0.06);
    }
    .rule-card:active {
        transform: scale(0.98) translateY(1px);
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(var(--accent-rgb),0.06);
    }
    .answer-card:active {
        transform: scale(0.97) translateY(1px);
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(var(--accent-rgb),0.06);
    }
    .welcome-example-btn:active {
        transform: scale(0.97) translateY(1px);
    }
    #scrollBottomBtn:active {
        transform: scale(0.96) translateY(1px);
        box-shadow: 0 1px 2px rgba(var(--accent-rgb),0.12);
    }
}