/* ============================================================
 * Anna Premium Theme — /dashboard 高级感覆盖层
 * 设计语言：暖米白 / 暖炭灰 + 陶土橘（terracotta）+ 系统无衬线标题
 * 必须在 dashboard.css / dashboard-chat.css 之后引入。
 * 具体配色变量由 theme.js 统一注入（--primary-color 等），
 * 本文件负责替换组件层残留的 indigo/锌灰硬编码点缀。
 * ============================================================ */

:root {
    /* 系统无衬线（Mac=SF Pro / Win=Segoe UI），极简无修饰的展示标题 */
    --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --accent: var(--primary-color, #D97757);
}

/* ===== Landing 问候语：极简无衬线大标题（Apple 风格） ===== */
.chat-panel.landing-mode .chat-empty-state h3 {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 550;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, var(--text-color) 30%, var(--accent) 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
}

[data-theme="light"] .chat-panel.landing-mode .chat-empty-state h3 {
    background: linear-gradient(120deg, #262521 40%, #C96442 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
}

.chat-panel.landing-mode .chat-empty-state p {
    font-size: 15px;
    letter-spacing: 0.01em;
}

/* 空状态小标题（非 landing）同样使用展示字体 */
.chat-empty-state h3 {
    font-family: var(--font-display);
    font-weight: 550;
}

/* Logo 光晕改为暖色 */
.empty-anna-glow,
.chat-panel.landing-mode .empty-anna-glow {
    background: radial-gradient(circle, var(--primary-rgba-015, rgba(217, 119, 87, 0.15)), transparent 70%);
}

[data-theme="light"] .chat-panel.landing-mode .empty-anna-glow {
    background: radial-gradient(circle, rgba(201, 100, 66, 0.12), transparent 70%);
}

/* ===== 建议 chips：柔和暖色胶囊 ===== */
.suggestion-chip {
    background: var(--surface-color);
    border-color: var(--border-color);
    box-shadow: 0 1px 2px var(--shadow-color, rgba(60, 50, 35, 0.06));
}

.suggestion-chip:hover {
    background: var(--surface-hover, var(--hover-bg));
    border-color: var(--primary-rgba-030, rgba(217, 119, 87, 0.3));
    box-shadow: 0 4px 14px var(--primary-rgba-010, rgba(217, 119, 87, 0.1));
}

.suggestion-chip:hover .suggestion-icon {
    color: var(--accent);
    opacity: 1;
}

/* ===== 输入框：暖色聚焦光环 ===== */
.chat-input-wrapper {
    border-radius: 20px;
    box-shadow:
        0 1px 2px var(--shadow-color, rgba(60, 50, 35, 0.05)),
        0 6px 24px rgba(0, 0, 0, 0.05);
}

.chat-input-wrapper:focus-within {
    border-color: var(--primary-rgba-040, rgba(217, 119, 87, 0.4));
    box-shadow:
        0 1px 2px var(--shadow-color, rgba(60, 50, 35, 0.05)),
        0 6px 28px var(--primary-rgba-008, rgba(217, 119, 87, 0.08)),
        0 0 0 3px var(--primary-rgba-010, rgba(217, 119, 87, 0.1));
}

/* ===== 发送按钮：陶土橘 ===== */
.chat-send-btn {
    background: linear-gradient(135deg, var(--primary-gradient-start, #D97757), var(--primary-gradient-end, #C96442));
    border-radius: 12px;
}

.chat-send-btn:not(:disabled):hover {
    box-shadow: 0 3px 12px var(--primary-rgba-040, rgba(217, 119, 87, 0.4));
}

/* ===== 用户消息气泡 / 头像：indigo → 陶土橘 ===== */
.chat-message.user .msg-bubble {
    background: linear-gradient(135deg, #C96442 0%, #B0563B 100%);
    box-shadow:
        0 1px 3px rgba(201, 100, 66, 0.15),
        0 4px 12px rgba(201, 100, 66, 0.1);
}

.chat-message.user .msg-avatar {
    background: linear-gradient(135deg, #D97757, #A8543C);
    box-shadow: 0 2px 8px rgba(201, 100, 66, 0.25);
}

/* ===== 模式胶囊（Main Soul / Zen）激活态 ===== */
.chat-mode-pill.active {
    background: var(--primary-rgba-008, rgba(217, 119, 87, 0.08));
    border-color: var(--primary-rgba-030, rgba(217, 119, 87, 0.3));
}

.chat-mode-pill.active::before {
    background: var(--accent);
    box-shadow: 0 0 6px var(--primary-rgba-050, rgba(217, 119, 87, 0.5));
}

[data-theme="light"] .chat-mode-pill.active {
    background: rgba(201, 100, 66, 0.06);
    border-color: rgba(201, 100, 66, 0.25);
}

/* ===== Landing 展开按钮 hover：暖色 ===== */
.landing-expand-btn:hover {
    background: var(--primary-rgba-005, rgba(217, 119, 87, 0.05));
    border-color: var(--primary-rgba-030, rgba(217, 119, 87, 0.3));
    box-shadow: 0 4px 16px var(--primary-rgba-008, rgba(217, 119, 87, 0.08));
}

[data-theme="light"] .landing-expand-btn:hover {
    background: rgba(201, 100, 66, 0.04);
    border-color: rgba(201, 100, 66, 0.25);
    box-shadow: 0 4px 16px rgba(201, 100, 66, 0.08);
}

/* ===== 验证横幅：indigo/violet → 陶土暖色 ===== */
.landing-verify-banner,
[data-theme="light"] .landing-verify-banner {
    background: linear-gradient(135deg, rgba(217, 119, 87, 0.05), rgba(201, 100, 66, 0.03));
}

.landing-verify-banner::before,
[data-theme="light"] .landing-verify-banner::before {
    background: linear-gradient(135deg, rgba(217, 119, 87, 0.28), rgba(201, 100, 66, 0.14), rgba(176, 86, 59, 0.1), rgba(201, 100, 66, 0.14), rgba(217, 119, 87, 0.28));
    background-size: 300% 300%;
}

.landing-verify-banner::after {
    background: linear-gradient(90deg, transparent, rgba(217, 119, 87, 0.07), transparent);
}

.landing-verify-banner:hover,
[data-theme="light"] .landing-verify-banner:hover {
    background: linear-gradient(135deg, rgba(217, 119, 87, 0.09), rgba(201, 100, 66, 0.05));
    box-shadow: 0 8px 24px rgba(201, 100, 66, 0.1), 0 0 0 1px rgba(217, 119, 87, 0.08);
}

.landing-verify-icon {
    background: linear-gradient(135deg, rgba(217, 119, 87, 0.15), rgba(201, 100, 66, 0.1));
    color: var(--accent);
    animation-name: bannerIconPulseWarm;
}

@keyframes bannerIconPulseWarm {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.25); }
    50% { box-shadow: 0 0 0 6px rgba(217, 119, 87, 0); }
}

.landing-verify-icon svg {
    color: var(--accent);
    stroke: currentColor;
}

.landing-verify-progress-fill {
    background: linear-gradient(90deg, var(--primary-gradient-start, #D97757), var(--primary-gradient-end, #C96442));
}

/* ===== 模式选择器（Zen 下拉）：violet → 暖色 ===== */
.chat-mode-selector-btn,
[data-theme="light"] .chat-mode-selector-btn {
    background: var(--primary-rgba-008, rgba(217, 119, 87, 0.08));
    border-color: var(--primary-rgba-020, rgba(217, 119, 87, 0.2));
    color: var(--accent);
}

.chat-mode-selector-btn:hover,
[data-theme="light"] .chat-mode-selector-btn:hover {
    background: var(--primary-rgba-015, rgba(217, 119, 87, 0.14));
    border-color: var(--primary-rgba-030, rgba(217, 119, 87, 0.3));
}

.chat-mode-dropdown-item.active,
[data-theme="light"] .chat-mode-dropdown-item.active {
    background: var(--primary-rgba-008, rgba(217, 119, 87, 0.08));
}

.chat-mode-dropdown-check,
[data-theme="light"] .chat-mode-dropdown-check {
    color: var(--accent);
}

.chat-mode-selector.zen-active .chat-mode-selector-btn,
[data-theme="light"] .chat-mode-selector.zen-active .chat-mode-selector-btn {
    background: var(--primary-rgba-015, rgba(217, 119, 87, 0.15));
    border-color: var(--primary-rgba-030, rgba(217, 119, 87, 0.35));
    color: var(--accent);
}

/* ===== 侧栏 Main Soul 按钮：violet → 暖色 ===== */
.sidebar-main-soul-btn {
    border-color: var(--primary-rgba-030, rgba(217, 119, 87, 0.35));
    background: var(--primary-rgba-005, rgba(217, 119, 87, 0.06));
    color: var(--accent);
}

.sidebar-main-soul-btn:hover {
    border-color: var(--primary-rgba-050, rgba(217, 119, 87, 0.6));
    color: var(--accent);
    background: var(--primary-rgba-010, rgba(217, 119, 87, 0.12));
}

/* ===== 设备指示芯片：中性暖灰（去 violet） ===== */
.chat-agent-indicator.local {
    background: rgba(120, 113, 108, 0.08);
    border-color: rgba(120, 113, 108, 0.18);
    color: #a8a29e;
}

[data-theme="light"] .chat-agent-indicator.local {
    background: rgba(120, 113, 108, 0.07);
    border-color: rgba(120, 113, 108, 0.16);
    color: #57534e;
}

/* ===== Zen 模式：violet 副标题/光晕/粒子 → 暖色 ===== */
.chat-empty-state p.zen-hint {
    color: #E09A82;
}

[data-theme="light"] .chat-empty-state p.zen-hint {
    color: #B0563B;
}

.empty-anna-logo.zen-costume .empty-anna-glow {
    background: radial-gradient(circle, rgba(217, 119, 87, 0.3), rgba(201, 100, 66, 0.1), transparent 70%);
}

.empty-anna-logo.zen-costume::before {
    background: rgba(217, 119, 87, 0.6);
}

.empty-anna-logo.zen-costume::after {
    background: rgba(201, 100, 66, 0.5);
}

@media (max-width: 768px) {
    .chat-panel.landing-mode .chat-empty-state h3 {
        font-size: 30px;
    }
}