/* ========== 设计令牌 ========== */
        :root {
            --sidebar-width: 248px;
            --sidebar-collapsed-width: 68px;

            /* 黑白中性色阶（纯灰阶，无色相偏移） */
            --bg-body: #fafafa;
            --bg-card: #ffffff;
            --bg-sidebar: #f5f5f5;
            --bg-input: #f0f0f0;
            --text-primary: #1a1a1a;
            --text-secondary: #525252;
            --text-muted: #8a8a8a;
            --border-color: #e6e6e6;
            --border-strong: #d6d6d6;

            /* 唯一强调色：近黑。渐变全部退化为单色 */
            --brand-1: #1a1a1a;
            --brand-2: #1a1a1a;
            --brand-3: #1a1a1a;
            --brand-grad: #1a1a1a;
            --brand-grad-soft: rgba(0, 0, 0, .04);
            --accent-color: #1a1a1a;
            --accent-hover: #000000;
            --accent-soft: rgba(0, 0, 0, .05);

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .03);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .05);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, .10), 0 24px 60px rgba(0, 0, 0, .08);
            --shadow-brand: 0 1px 3px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .08);

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 26px;
            --radius-full: 50%;

            --transition: .28s cubic-bezier(.32, .72, 0, 1);
            --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

            /* UI 无衬线：对标 Claude 的 Styrene（以 Inter 近似）
               文本衬线：对标 Claude 的 Tiempos（以 Source Serif 4 / 思源宋体近似） */
            --font-sans: 'Styrene B', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            --font-serif: 'Tiempos Text', 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', 'Songti SC', 'Noto Serif SC', 'STSong', SimSun, serif;
        }

        /* 暗色模式：改为切换根 class，而非行内覆写 */
        html.dark {
            --bg-body: #0a0a0a;
            --bg-card: #161616;
            --bg-sidebar: #101010;
            --bg-input: #1f1f1f;
            --text-primary: #f2f2f2;
            --text-secondary: #a6a6a6;
            --text-muted: #6f6f6f;
            --border-color: #262626;
            --border-strong: #3a3a3a;
            --accent-soft: rgba(255, 255, 255, .07);
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .35);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, .55), 0 24px 60px rgba(0, 0, 0, .45);
            --shadow-brand: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
        }

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

        html {
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-body);
            color: var(--text-primary);
            overflow: hidden;
            height: 100vh;
            height: 100dvh; /* 移动端动态视口，避免地址栏遮挡 */
            transition: background var(--transition);
        }

        #app { display: flex; height: 100vh; height: 100dvh; }

        ::selection { background: rgba(0, 0, 0, .12); }
        html.dark ::selection { background: rgba(255, 255, 255, .22); }

        button { font-family: inherit; }

        /* ========== 侧边栏 ========== */
        .sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            height: 100dvh;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            transition: width var(--transition), background var(--transition), border-color var(--transition);
            overflow: hidden;
            position: relative;
            z-index: 100;
        }
        .sidebar.collapsed { width: var(--sidebar-collapsed-width); }

        .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            flex-shrink: 0;
            height: 62px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--text-primary);
            font-weight: 600;
            font-size: 17px;
            white-space: nowrap;
            letter-spacing: -0.2px;
            cursor: default;
        }
        .logo-icon {
            width: 30px;
            height: 30px;
            flex-shrink: 0;
            border-radius: 9px;
            color: var(--text-primary);
            box-shadow: none;
        }
        .logo-icon svg { width: 30px; height: 30px; display: block; border-radius: 9px; }
        .sidebar.collapsed .logo-text { display: none; }

        .sidebar-toggle {
            width: 28px; height: 28px;
            border: none; background: transparent;
            border-radius: 8px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: var(--text-muted);
            transition: background var(--transition), color var(--transition);
            flex-shrink: 0; padding: 0;
        }
        .sidebar-toggle:hover { background: rgba(0, 0, 0, .05); color: var(--text-secondary); }
        html.dark .sidebar-toggle:hover { background: rgba(255, 255, 255, .06); }
        .sidebar-toggle svg { width: 17px; height: 17px; stroke: currentColor; transition: transform var(--transition); }
        .sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

        /* 新建对话按钮 */
        .new-chat-btn {
            margin: 8px 14px 10px;
            padding: 10px 14px;
            background: var(--brand-grad);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
            flex-shrink: 0;
            white-space: nowrap;
            box-shadow: var(--shadow-sm);
            letter-spacing: .2px;
        }
        .new-chat-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
        .new-chat-btn:active { transform: translateY(0) scale(.98); }
        .new-chat-btn svg { width: 16px; height: 16px; flex-shrink: 0; stroke: #fff; }
        html.dark .new-chat-btn { background: #1a1a1a; border: 1px solid var(--border-strong); }
        html.dark .new-chat-btn:hover { background: #242424; }
        .sidebar.collapsed .new-chat-btn span { display: none; }
        .sidebar.collapsed .new-chat-btn { justify-content: center; padding: 10px; }
        .new-chat-shortcut {
            margin-left: auto;
            font-size: 11px;
            font-weight: 500;
            color: rgba(255, 255, 255, .72);
            background: rgba(255, 255, 255, .16);
            padding: 2px 6px;
            border-radius: 6px;
        }
        .sidebar.collapsed .new-chat-shortcut { display: none; }

        /* 导航菜单 */
        .sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
        .sidebar-nav::-webkit-scrollbar { width: 3px; }
        .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

        .nav-section-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: .8px;
            padding: 14px 12px 6px;
            text-transform: uppercase;
        }
        .sidebar.collapsed .nav-section-title { visibility: hidden; height: 12px; padding: 0; }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            margin-bottom: 2px;
            border-radius: 10px;
            color: var(--text-secondary);
            text-decoration: none;
            cursor: pointer;
            transition: background var(--transition), color var(--transition), transform var(--transition);
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            position: relative;
        }
        .nav-item:hover { background: rgba(0, 0, 0, .045); color: var(--text-primary); }
        html.dark .nav-item:hover { background: rgba(255, 255, 255, .05); }
        .nav-item.active {
            background: var(--accent-soft);
            color: var(--text-primary);
            font-weight: 600;
        }
        html.dark .nav-item.active { color: #f2f2f2; }
        .nav-item.active::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 18px;
            border-radius: 0 3px 3px 0;
            background: var(--text-primary);
        }
        .sidebar.collapsed .nav-item.active::before { display: none; }

        .nav-item .nav-icon {
            width: 20px; height: 20px;
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            color: currentColor;
        }
        .nav-item .nav-icon svg { width: 17px; height: 17px; stroke: currentColor; }
        .sidebar.collapsed .nav-item .nav-label { display: none; }
        .sidebar.collapsed .nav-item { justify-content: center; padding: 9px; }

        .nav-item .nav-badge {
            font-size: 9px;
            background: transparent;
            border: 1px solid var(--border-strong);
            color: var(--text-secondary);
            padding: 1.5px 7px;
            border-radius: 10px;
            margin-left: auto;
            font-weight: 600;
            letter-spacing: .3px;
        }
        .nav-item .nav-chevron { margin-left: auto; display: flex; align-items: center; opacity: .45; }
        .nav-item .nav-chevron svg { width: 13px; height: 13px; stroke: currentColor; transition: transform .3s var(--ease-out-expo); }
        .sidebar.collapsed .nav-item .nav-badge,
        .sidebar.collapsed .nav-item .nav-chevron { display: none; }

        .nav-divider { height: 1px; background: var(--border-color); margin: 8px 12px; }

        /* 隐藏导航 */
        .hidden-nav { display: none !important; }
        .hidden-nav.show { display: flex !important; }

        /* ========== 底部用户信息 ========== */
        .sidebar-user {
            border-top: 1px solid var(--border-color);
            padding: 10px 14px;
            flex-shrink: 0;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 6px 8px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition);
        }
        .user-info:hover { background: rgba(0, 0, 0, .04); }
        html.dark .user-info:hover { background: rgba(255, 255, 255, .05); }

        .user-avatar {
            width: 36px; height: 36px;
            border-radius: var(--radius-full);
            background: var(--text-primary);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            color: #fff; font-weight: 600; font-size: 14px;
            user-select: none;
            box-shadow: none;
        }
        html.dark .user-avatar { background: #1a1a1a; border: 1px solid var(--border-strong); }
        .user-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .sidebar.collapsed .user-details { display: none; }
        .user-name {
            font-size: 13.5px; font-weight: 600; color: var(--text-primary);
            line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        /* 会员等级徽标 */
        .plan-badge {
            display: inline-flex; align-items: center; gap: 4px;
            align-self: flex-start;
            font-size: 10.5px; font-weight: 500; letter-spacing: .3px;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            padding: 2px 8px 2px 6px;
            border-radius: 999px;
            line-height: 1.2;
            transition: border-color var(--transition);
        }
        .user-info:hover .plan-badge { border-color: var(--border-strong); }
        .plan-badge svg { width: 10px; height: 10px; stroke: currentColor; flex-shrink: 0; }
        /* 悬停时浮现的更多入口 */
        .user-more {
            margin-left: auto; display: flex; align-items: center;
            color: var(--text-muted); opacity: 0;
            transition: opacity var(--transition);
        }
        .user-info:hover .user-more { opacity: 1; }
        .user-more svg { width: 15px; height: 15px; stroke: currentColor; }
        .sidebar.collapsed .user-more { display: none; }
        .sidebar.collapsed .sidebar-user { padding: 10px 0; display: flex; justify-content: center; }
        .sidebar.collapsed .user-info { padding: 4px; }

        /* ========== 主内容区 ========== */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            min-width: 0; /* 防止移动端内容撑破布局 */
            overflow: hidden;
            background: var(--bg-body);
            position: relative;
        }

        /* 氛围光晕：中性风格下整体移除，仅保留占位 */
        .ambient-glow { display: none; }

        /* ========== 顶部栏 ========== */
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 22px;
            background: transparent;
            flex-shrink: 0;
            height: 56px;
            position: relative;
            z-index: 5;
        }
        .topbar-left { display: flex; align-items: center; gap: 12px; }
        .topbar-mobile-toggle {
            display: none;
            width: 32px; height: 32px;
            border: none; background: transparent;
            border-radius: 8px; cursor: pointer;
            color: var(--text-secondary); padding: 0;
        }
        .topbar-mobile-toggle:hover { background: rgba(0, 0, 0, .05); }
        .topbar-mobile-toggle svg { width: 20px; height: 20px; stroke: currentColor; }

        .topbar-model-chip {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 6px 12px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color var(--transition), box-shadow var(--transition);
            box-shadow: var(--shadow-sm);
        }
        .topbar-model-chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
        .topbar-model-chip .chip-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--text-primary);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }
        .topbar-model-chip svg { width: 13px; height: 13px; stroke: var(--text-muted); }

        .topbar-right { display: flex; align-items: center; gap: 6px; }
        .topbar-btn {
            width: 34px; height: 34px;
            border: 1px solid transparent;
            background: transparent;
            border-radius: 10px;
            cursor: pointer;
            color: var(--text-muted);
            transition: all var(--transition);
            display: flex; align-items: center; justify-content: center;
            padding: 0;
        }
        .topbar-btn:hover {
            background: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-secondary);
            box-shadow: var(--shadow-sm);
        }
        .topbar-btn svg { width: 18px; height: 18px; stroke: currentColor; }

        /* ========== 聊天区域 ========== */
        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0 24px 36px;
            overflow-y: auto;
            position: relative;
            z-index: 1;
        }
        .chat-area.has-messages { justify-content: flex-start; padding-top: 24px; }
        .chat-area::-webkit-scrollbar { width: 3px; }
        .chat-area::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

        .greeting-section {
            text-align: center;
            margin-bottom: 30px;
            width: 100%;
            max-width: 640px;
            animation: riseIn .6s var(--ease-out-expo) both;
        }
        .greeting-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 13px;
            border-radius: 20px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .3px;
            margin-bottom: 18px;
        }
        .greeting-badge svg { width: 13px; height: 13px; stroke: currentColor; }

        .greeting-line1 {
            font-size: 13px;
            color: var(--text-muted);
            letter-spacing: .5px;
            margin-bottom: 10px;
        }
        .greeting-line2 {
            font-family: var(--font-serif);
            font-size: clamp(28px, 4vw, 36px);
            font-weight: 500;
            letter-spacing: -0.2px;
            line-height: 1.3;
            color: var(--text-primary);
        }

        /* 快捷标签 */
        .quick-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 26px;
            max-width: 640px;
            width: 100%;
            justify-content: center;
            animation: riseIn .6s var(--ease-out-expo) .08s both;
        }
        .quick-tag {
            padding: 8px 15px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            font-size: 12.5px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
            box-shadow: var(--shadow-sm);
        }
        .quick-tag:hover {
            background: var(--brand-grad);
            color: #fff;
            border-color: transparent;
            transform: translateY(-1px);
            box-shadow: var(--shadow-brand);
        }
        html.dark .quick-tag:hover { background: #1f1f1f; border-color: var(--border-strong); }
        .quick-tag:active { transform: translateY(0) scale(.97); }
        .quick-tag .tag-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
        .quick-tag .tag-icon svg { width: 13px; height: 13px; stroke: currentColor; }

        /* ========== 输入框 ========== */
        .chat-input-wrapper {
            width: 100%;
            max-width: 640px;
            position: relative;
            animation: riseIn .6s var(--ease-out-expo) .16s both;
        }
        .chat-input-container {
            background: var(--bg-card);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            border: 1px solid var(--border-color);
            transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
            position: relative;
            padding: 6px;
        }
        .chat-input-container:focus-within {
            border-color: var(--text-primary);
            box-shadow: var(--shadow-md);
        }

        .chat-input {
            display: flex;
            align-items: flex-end;
            padding: 8px 8px 4px 14px;
            gap: 10px;
            min-height: 52px;
        }
        .chat-input .input-icon {
            color: var(--text-muted);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            padding-bottom: 8px;
        }
        .chat-input .input-icon svg { width: 17px; height: 17px; stroke: currentColor; }

        .chat-input textarea {
            flex: 1;
            border: none;
            outline: none;
            resize: none;
            font-family: var(--font-sans);
            font-size: 14.5px;
            line-height: 1.55;
            color: var(--text-primary);
            background: transparent;
            min-height: 30px;
            max-height: 120px;
            padding: 6px 0;
        }
        .chat-input textarea::placeholder { color: var(--text-muted); font-weight: 400; }

        .chat-input-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .chat-action-btn {
            width: 34px; height: 34px;
            border: none; background: transparent;
            border-radius: 10px; cursor: pointer;
            color: var(--text-muted);
            transition: all var(--transition);
            display: flex; align-items: center; justify-content: center;
            padding: 0;
        }
        .chat-action-btn:hover { background: var(--bg-input); color: var(--text-secondary); }
        .chat-action-btn svg { width: 18px; height: 18px; stroke: currentColor; }

        .send-btn {
            width: 34px; height: 34px;
            border: none;
            border-radius: 10px;
            background: var(--brand-grad);
            color: #fff;
            cursor: pointer;
            transition: all var(--transition);
            display: flex; align-items: center; justify-content: center;
            opacity: .35;
            pointer-events: none;
            padding: 0;
        }
        .send-btn.active { opacity: 1; pointer-events: auto; box-shadow: var(--shadow-sm); }
        .send-btn.active:hover { background: var(--accent-hover); transform: scale(1.05); }
        .send-btn.active:active { transform: scale(.95); }
        .send-btn svg { width: 16px; height: 16px; stroke: currentColor; }
        html.dark .send-btn { background: #1a1a1a; border: 1px solid var(--border-strong); }

        .input-footer {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 2px 10px 6px;
        }
        .input-feature {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            font-weight: 500;
            color: var(--text-muted);
            padding: 4px 9px;
            border-radius: 8px;
            cursor: pointer;
            transition: all var(--transition);
            border: 1px solid transparent;
            background: transparent;
        }
        .input-feature:hover { background: var(--bg-input); color: var(--text-secondary); }
        .input-feature.on {
            background: var(--accent-soft);
            color: var(--text-primary);
            border-color: var(--border-strong);
        }
        html.dark .input-feature.on { color: #f2f2f2; }
        .input-feature svg { width: 13px; height: 13px; stroke: currentColor; }

        .footer-note {
            margin-top: 14px;
            font-size: 11px;
            color: var(--text-muted);
            text-align: center;
            letter-spacing: .2px;
            animation: riseIn .6s var(--ease-out-expo) .24s both;
        }

        /* ========== 消息 ========== */
        .msg {
            width: 100%;
            max-width: 640px;
            margin-bottom: 18px;
            animation: msgIn .45s var(--ease-out-expo) both;
        }
        .msg-user {
            align-self: flex-end;
            display: flex;
            justify-content: flex-end;
        }
        .msg-user-bubble {
            max-width: 85%;
            background: var(--brand-grad);
            color: #fff;
            padding: 11px 16px;
            border-radius: 18px 18px 4px 18px;
            font-size: 14px;
            line-height: 1.65;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
            word-break: break-word;
            white-space: pre-wrap;
        }
        html.dark .msg-user-bubble { background: #2e2e2e; border: 1px solid var(--border-strong); box-shadow: none; }
        .msg-ai-card {
            width: 100%;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 16px 18px;
            box-shadow: var(--shadow-sm);
        }
        .msg-role {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .msg-role .ai-avatar {
            width: 22px; height: 22px;
            border-radius: 7px;
            display: inline-flex;
            flex-shrink: 0;
            box-shadow: none;
        }
        .msg-role .ai-avatar svg { width: 22px; height: 22px; border-radius: 7px; }
        .msg-content {
            font-family: var(--font-serif);
            font-size: 14.5px;
            line-height: 1.8;
            color: var(--text-primary);
            word-break: break-word;
        }
        .msg-content .caret {
            display: inline-block;
            width: 7px; height: 15px;
            margin-left: 3px;
            border-radius: 2px;
            background: var(--text-primary);
            vertical-align: -2px;
            animation: caretBlink .8s steps(2) infinite;
        }
        @keyframes caretBlink { 50% { opacity: 0; } }

        /* AI 操作行 */
        .msg-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        .msg-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 500;
            padding: 5px 9px;
            border-radius: 8px;
            cursor: pointer;
            transition: all var(--transition);
        }
        .msg-action-btn:hover { background: var(--bg-input); color: var(--text-secondary); }
        .msg-action-btn.copied { color: var(--text-primary); font-weight: 600; }
        .msg-action-btn svg { width: 14px; height: 14px; stroke: currentColor; }

        /* 打字指示器 */
        .typing-dots { display: inline-flex; align-items: center; gap: 5px; padding: 6px 2px; }
        .typing-dots span {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--text-muted);
            animation: dotBounce 1.2s ease-in-out infinite;
        }
        .typing-dots span:nth-child(2) { animation-delay: .15s; }
        .typing-dots span:nth-child(3) { animation-delay: .3s; }
        @keyframes dotBounce {
            0%, 60%, 100% { transform: translateY(0); opacity: .45; }
            30% { transform: translateY(-5px); opacity: 1; }
        }

        /* ========== Toast ========== */
        .toast {
            position: fixed;
            top: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(-16px);
            background: var(--text-primary);
            color: var(--bg-body);
            font-size: 13px;
            font-weight: 500;
            padding: 9px 18px;
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
            z-index: 999;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        .toast svg { width: 15px; height: 15px; stroke: currentColor; }

        /* ========== 动画 ========== */
        @keyframes riseIn {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes msgIn {
            from { opacity: 0; transform: translateY(10px) scale(.985); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ========== 响应式 ========== */
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                top: 0; left: 0; bottom: 0;
                z-index: 200;
                transform: translateX(-100%);
                box-shadow: var(--shadow-lg);
                transition: transform var(--transition);
                width: var(--sidebar-width);
            }
            .sidebar.open { transform: translateX(0); }
            .sidebar-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, .35);
                backdrop-filter: blur(2px);
                z-index: 199;
            }
            .sidebar-overlay.show { display: block; }
            .topbar-mobile-toggle { display: flex; }
            .chat-input { padding: 6px 8px 4px 12px; }
            /* iOS：字号低于 16px 聚焦时会强制放大页面，此处固定 16px */
            .chat-input textarea { font-size: 16px; }
            .quick-tag { font-size: 11.5px; padding: 6px 13px; }
            .chat-area { padding: 0 16px 28px; }
            .chat-area.has-messages { padding-top: 16px; }
        }
        @media (max-width: 480px) {
            .greeting-line1 { font-size: 12px; }
            .quick-tag { font-size: 10.5px; padding: 5px 11px; }
            .chat-input textarea { font-size: 16px; }
            .topbar-model-chip span.chip-name { display: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
            }
        }