/* 飞讯 AI - 聊天页面专用样式 */

/* 聊天界面 */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    min-height: 56px;
}

.chat-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 顶栏中的模型标签行 */
.chat-header .model-tags-row {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    justify-content: center;
}

.chat-header .model-tags-scroll {
    max-height: 4.5rem;
}

.chat-header .model-tag {
    height: 32px;
    font-size: 11px;
}

.chat-header .model-tag .tag-left {
    padding-left: 8px;
    gap: 6px;
}

.chat-header .model-tag .tag-avatar {
    width: 20px;
    height: 20px;
}

.chat-header .model-tag .tag-avatar .tag-avatar-letter {
    font-size: 10px;
}

.chat-header .model-tag .tag-name {
    font-size: 11px;
}

.chat-header .model-tag .tag-remove {
    width: 20px;
    height: 20px;
    font-size: 12px;
}

.chat-header .add-model-tag,
.chat-header .clear-all-tag {
    width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.chat-header .model-tags-cost {
    height: 24px;
    font-size: 10px;
    padding: 0 8px;
}

@media (max-width: 768px) {
    .chat-header {
        padding: 8px 12px;
        gap: 8px;
    }

    .chat-title {
        font-size: 14px;
        padding-left: 0;
    }

    .chat-header .model-tags-scroll {
        max-height: 4rem;
    }

    .chat-header .add-model-tag,
    .chat-header .clear-all-tag {
        width: 28px;
        height: 28px;
    }
}

.chat-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.chat-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.chat-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* 消息区域 */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.message {
    display: flex;
    gap: var(--spacing-md);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
}

.message.user .message-avatar {
    background: var(--accent-color);
}

.message.assistant .message-avatar {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.message-content {
    flex: 1;
    min-width: 120px;
    max-width: 85%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.agent-voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 2px;
    padding: 8px 10px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f7faff;
    color: #1d4ed8;
    font-size: 12px;
}

.agent-voice-player-header {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 6px;
}

.agent-voice-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-voice-player audio {
    width: 190px;
    height: 30px;
    flex: 0 1 220px;
}

.agent-voice-player.is-error {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

body.dark-mode .agent-voice-player {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(30, 58, 138, 0.22);
    color: #bfdbfe;
}

body.dark-mode .agent-voice-player.is-error {
    border-color: rgba(251, 146, 60, 0.42);
    background: rgba(124, 45, 18, 0.24);
    color: #fdba74;
}

@media (max-width: 768px) {
    .agent-voice-player {
        flex-wrap: wrap;
    }

    .agent-voice-player audio {
        width: 100%;
        flex-basis: 100%;
    }
}

.message-bubble {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    display: inline-block;
    word-wrap: break-word;
    max-width: 100%;
}

/* AI回复移除正式回复框样式，更简洁 */
.message.assistant .message-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.message.user .message-bubble {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.message.user .message-content {
    align-items: flex-end;
}

.message.user .message-actions {
    justify-content: flex-end;
    opacity: 0.35;
}

.message.user:hover .message-actions,
.message.user.editing .message-actions {
    opacity: 1;
}

.message-edit-panel {
    width: min(100%, 560px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
}

.message.user .message-edit-panel {
    align-self: flex-end;
}

.message-edit-textarea {
    width: 100%;
    min-height: 92px;
    max-height: 220px;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font: inherit;
    line-height: 1.5;
    outline: none;
}

.message-edit-textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.message-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.message-text {
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
}

.message-text pre {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--spacing-sm);
    overflow-x: auto;
    margin: var(--spacing-sm) 0;
}

.message-text code {
    background: var(--bg-secondary);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.message-text pre code {
    background: none;
    padding: 0;
}

.message-text a {
    color: #5cd5fb;
}

/* 引用块样式 */
.message-text blockquote {
    margin: var(--spacing-sm) 0;
    padding: 8px 12px;
    border-left: 4px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 0 8px 8px 0;
}

.message-text blockquote p {
    margin: 0;
}

.message-text blockquote p + p {
    margin-top: 6px;
}

.message-text blockquote p:last-child {
    margin-bottom: 0;
}


/* 统一列表样式 - 简化版本 */
.message-text ol,
.message-text ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
}

.message-text li {
    margin: var(--spacing-xs) 0;
    line-height: 1.5;
    position: relative;
    min-height: 1.5em;
}

/* 移除浏览器默认列表标记 */
.message-text ol,
.message-text ul {
    list-style: none;
    counter-reset: list-counter;
}

.message-text li::marker {
    display: none;
}

/* 所有列表项都使用点标记 */
.message-text ol > li,
.message-text ul > li {
    padding-left: 24px !important;
}

/* 一级列表项使用实心圆点 */
.message-text ul > li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* 二级列表项使用空心圆点 */
.message-text ul ul > li::before {
    content: "\25E6";
    font-size: 13px;
}

/* 三级列表项使用小方块 */
.message-text ul ul ul > li::before {
    content: "\25AA";
    font-size: 12px;
}

/* 有序列表使用数字 */
.message-text ol {
    counter-reset: list-counter;
}

.message-text ol > li::before {
    content: counter(list-counter) ".";
    counter-increment: list-counter;
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.message-text ol ol {
    counter-reset: list-counter;
}

.message-text ol ol > li::before {
    content: counter(list-counter, lower-alpha) ".";
    position: absolute;
    left: 0;
}

.message-text ol ol ol {
    counter-reset: list-counter;
}

.message-text ol ol ol > li::before {
    content: counter(list-counter, lower-roman) ".";
    position: absolute;
    left: 0;
}

/* 修复列表内的代码块和内联样式 */
.message-text li pre,
.message-text li code {
    background: var(--bg-secondary);
}

.message-text li pre {
    margin: 4px 0;
}

.message-text li code {
    padding: 1px 3px;
    font-size: 12px;
}

.message-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    font-size: 12px;
    color: var(--text-secondary);
}

.message.user .message-info {
    justify-content: flex-end;
    color: var(--text-white-tran);
}

/* ===== AI 加载脉冲动画 ===== */
.ai-loading-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
}
.ai-loading-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    animation: ai-dot-bounce 1.4s ease-in-out infinite both;
}
.ai-loading-indicator span:nth-child(1) { animation-delay: 0s; }
.ai-loading-indicator span:nth-child(2) { animation-delay: 0.2s; }
.ai-loading-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-dot-bounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ===== 思考容器（优化版） ===== */
.thinking-container {
    display: grid;
    grid-template-rows: auto 1fr;
    margin: 10px 0 6px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(129, 140, 248, 0.03) 100%);
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 14px;
    overflow: hidden;
    transition: grid-template-rows var(--dur-slow) var(--ease-snap), border-color 0.3s ease, box-shadow 0.3s ease;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: var(--fw-strong);
    color: #6366f1;
    background: rgba(99, 102, 241, 0.04);
    border-bottom: 1px solid rgba(99, 102, 241, 0.07);
    transition: background 0.2s ease;
}

.thinking-header:hover {
    background: rgba(99, 102, 241, 0.08);
}

.thinking-container.collapsed {
    grid-template-rows: auto 0fr;
}

.thinking-container.collapsed .thinking-content {
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.thinking-toggle-icon {
    margin-left: auto;
    font-size: 10px;
    color: var(--accent-color);
    transition: transform var(--dur-normal) var(--ease-snap);
    opacity: 0.6;
}

.thinking-container.collapsed .thinking-toggle-icon {
    transform: rotate(-90deg);
}

.thinking-content {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #475569;
    font-style: normal;
    min-height: 0;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.35);
    transition: padding var(--dur-slow) var(--ease-snap);
}

.thinking-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(99, 102, 241, 0.16);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: thinking-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes thinking-spin {
    to { transform: rotate(360deg); }
}

.thinking-container[data-active-thinking="1"] {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.05), 0 4px 20px rgba(99, 102, 241, 0.07);
    animation: thinking-border-pulse 2s ease-in-out infinite;
}

@keyframes thinking-border-pulse {
    0%, 100% { border-color: rgba(99, 102, 241, 0.22); }
    50% { border-color: rgba(99, 102, 241, 0.45); }
}

/* 思考内容中代码块 */
.thinking-content pre {
    background: rgba(0, 0, 0, 0.03);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    font-style: normal;
    overflow-x: auto;
}
.thinking-content code {
    background: rgba(0, 0, 0, 0.03);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
}
.thinking-content ul,
.thinking-content ol {
    margin: 8px 0;
    padding-left: 20px;
    font-style: normal;
}
.thinking-content li { margin: 4px 0; }

/* 深色模式 */
body.dark-mode .thinking-container {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.1) 0%, rgba(165, 180, 252, 0.05) 100%);
    border-color: rgba(129, 140, 248, 0.2);
}
body.dark-mode .thinking-header {
    color: #a5b4fc;
    background: rgba(129, 140, 248, 0.06);
    border-bottom-color: rgba(129, 140, 248, 0.1);
}
body.dark-mode .thinking-header:hover { background: rgba(129, 140, 248, 0.12); }
body.dark-mode .thinking-spinner {
    border-color: rgba(165, 180, 252, 0.2);
    border-top-color: #a5b4fc;
}
body.dark-mode .thinking-content {
    color: #c7d2fe;
    background: rgba(15, 23, 42, 0.3);
}
body.dark-mode .thinking-container[data-active-thinking="1"] {
    border-color: rgba(165, 180, 252, 0.4);
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.06), 0 4px 20px rgba(0, 0, 0, 0.25);
}
body.dark-mode .thinking-content pre,
body.dark-mode .thinking-content code {
    background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .ai-loading-indicator span { background: #a5b4fc; }

/* ===== 工作过程折叠容器 ===== */
.work-process-container {
    margin: 10px 0 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.02) 100%);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.work-process-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.04);
    border-bottom: 1px solid rgba(99, 102, 241, 0.07);
    transition: background 0.2s ease;
}

.work-process-header:hover {
    background: rgba(99, 102, 241, 0.08);
}

.work-process-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(99, 102, 241, 0.16);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: thinking-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.work-process-summary {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-process-toggle-icon {
    margin-left: auto;
    font-size: 10px;
    color: var(--accent-color);
    transition: transform 0.3s ease;
    opacity: 0.6;
    flex-shrink: 0;
}

.work-process-body {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.25);
    max-height: 420px;
    overflow-y: auto;
}

/* 折叠状态 */
.work-process-container.collapsed .work-process-body {
    display: none !important;
}

.work-process-container.collapsed .work-process-toggle-icon {
    transform: rotate(-90deg);
}

/* 激活状态（正在工作中） */
.work-process-container[data-active="1"] {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.05), 0 4px 20px rgba(99, 102, 241, 0.07);
}

/* 深色模式 */
body.dark-mode .work-process-container {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.08) 0%, rgba(165, 180, 252, 0.04) 100%);
    border-color: rgba(129, 140, 248, 0.18);
}

body.dark-mode .work-process-header {
    color: #a5b4fc;
    background: rgba(129, 140, 248, 0.06);
    border-bottom-color: rgba(129, 140, 248, 0.1);
}

body.dark-mode .work-process-header:hover {
    background: rgba(129, 140, 248, 0.12);
}

body.dark-mode .work-process-spinner {
    border-color: rgba(165, 180, 252, 0.2);
    border-top-color: #a5b4fc;
}

body.dark-mode .work-process-body {
    background: rgba(15, 23, 42, 0.2);
}

body.dark-mode .work-process-container[data-active="1"] {
    border-color: rgba(165, 180, 252, 0.4);
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.06), 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* 多模型面板适配 */
.multi-model-panel .work-process-container {
    margin: 0 0 8px 0;
    max-width: 100%;
}

.multi-model-panel .work-process-body {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 输入区域 */
.input-container {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.input-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    border-radius: 20px; /* 与 .input-box 一致 */
}

.model-selector-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.model-selector {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.model-selector:hover {
    border-color: var(--accent-color);
}

.model-selector:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* 欢迎界面聊天框样式 */
.welcome-chat-box {
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
}

.welcome-container .input-wrapper {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
}

.welcome-container .model-selector-wrapper {
    margin-bottom: var(--spacing-md);
}

.welcome-container .input-box {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .welcome-chat-box {
        width: 95%;
    }

    .welcome-container .input-wrapper {
        padding: var(--spacing-md);
    }
}

/* ========== 输入框外层容器 ========== */
.input-box {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    padding: 16px;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* 深色模式适配 */
body.dark-mode .input-box {
    background: var(--bg-secondary, #1f2937);
    border-color: var(--border-color, #374151);
}

/* ========== 文本输入框 ========== */
.input-field {
    width: 100%;
    min-height: 60px;
    max-height: 120px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    font-family: inherit;
    color: var(--text-color, #1f2937);
    flex: 1;
    display: block;
}

/* placeholder 样式 - 确保靠左显示 */
.input-field::placeholder {
    color: var(--text-secondary, #6b7280);
    opacity: 0.8;
    text-align: left;
}

/* ========== 按钮行容器 ========== */
.input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    flex-shrink: 0;
    width: 100%;
    margin-top: 4px;
}

/* ========== 上传按钮（左下角圆形） ========== */
.image-upload-btn.inside-input {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.image-upload-btn.inside-input:hover {
    background: var(--bg-primary, #ffffff);
    color: var(--accent-color, #06b6d4);
    border-color: var(--accent-color, #06b6d4);
    transform: scale(1.05);
}

.image-upload-btn.inside-input:active {
    transform: scale(0.95);
}

.image-upload-btn.inside-input:focus {
    outline: none;
}

.image-upload-btn.inside-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* 深色模式 */
body.dark-mode .image-upload-btn.inside-input {
    color: var(--text-secondary, #9ca3af);
    border-color: var(--border-color, #4b5563);
}

body.dark-mode .image-upload-btn.inside-input:hover {
    background: var(--bg-primary, #111827);
    color: var(--accent-color, #22d3ee);
    border-color: var(--accent-color, #22d3ee);
}

/* ========== 发送按钮（右下角圆形） ========== */
.send-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    background: var(--accent-color, #06b6d4);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
    position: relative;
}

.send-button:hover {
    background: var(--accent-hover, #0891b2);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.send-button:active {
    transform: scale(0.95);
}

.send-button:disabled {
    background: var(--text-secondary, #9ca3af);
    cursor: not-allowed;
    transform: none;
    opacity: 0.5;
    box-shadow: none;
}

/* 加载动画 */
.send-button .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
}

.send-button.loading .spinner {
    display: block;
}

.send-button.loading .button-text {
    display: none;
}

/* 按钮内图标居中 */
.send-button .button-text,
.image-upload-btn.inside-input i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

/* ========== 动画定义 ========== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
    .input-box {
        padding: 12px;
        gap: 10px;
        border-radius: 16px;
    }

    .input-field {
        min-height: 50px;
    }

    .image-upload-btn.inside-input,
    .send-button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
}

/* ========== 联网搜索按钮 ========== */
.web-search-btn {
    height: 36px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 18px;  /* 圆角胶囊形状 */
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.web-search-btn i {
    font-size: 14px;
    color: var(--text-secondary, #06b6d4);
    transition: all 0.2s ease;
}

.web-search-btn span {
    white-space: nowrap;
}

.web-search-btn:focus {
    outline: none;
}

/* 悬停效果 */
.web-search-btn:hover {
    border-color: var(--accent-color, #06b6d4);
    transform: translateY(-1px);
}

/* 激活状态（开启联网搜索） */
.web-search-btn.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--accent-color, #06b6d4);
    color: var(--accent-color, #06b6d4);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}

.web-search-btn.active i {
    color: var(--accent-color, #06b6d4);
    animation: pulse 2s infinite;
}

/* 禁用状态 */
.web-search-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    background: transparent;
    border-color: var(--border-color, #d1d5db);
    color: var(--text-secondary, #6b7280);
}

.web-search-btn:disabled i {
    color: var(--text-secondary, #6b7280);
    animation: none;
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* 左侧按钮组容器 */
.input-actions-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    overflow: visible;  /* 修改：从 hidden 改为 visible，避免截断下拉菜单 */
    position: relative; /* 添加：为下拉菜单定位提供参考 */
}


/* 深色模式适配 */
body.dark-mode .web-search-btn {
    color: var(--text-secondary, #9ca3af);
    border-color: var(--border-color, #4b5563);
}

body.dark-mode .web-search-btn:hover {
    border-color: var(--accent-color, #22d3ee);
}

body.dark-mode .web-search-btn.active {
    background: rgba(34, 211, 238, 0.2);
    border-color: var(--accent-color, #22d3ee);
    color: var(--accent-color, #22d3ee);
    box-shadow: 0 2px 8px rgba(34, 211, 238, 0.3);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .web-search-btn {
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 16px;
    }

    .web-search-btn span {
        display: inline;  /* 保持文字显示，如果空间不足可改为 none */
    }

    .input-actions-left {
        gap: 8px;
    }
}

/* 超小屏幕隐藏文字只显示图标 */
@media (max-width: 480px) {
    .web-search-btn span {
        display: none;
    }

    .web-search-btn {
        width: 32px;
        padding: 0;
        justify-content: center;
    }
}

/* Deep Research toggle button */
.deep-research-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1.5px solid #9ca3af;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #9ca3af;
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.6;
}
.deep-research-btn i {
    font-size: 14px;
    color: #9ca3af;
    transition: all .2s;
}
.deep-research-btn span {
    font-weight: 600;
    font-size: 13px;
    color: #9ca3af;
    transition: all .2s;
}
.deep-research-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    opacity: 0.9;
}
.deep-research-btn:hover i,
.deep-research-btn:hover span {
    color: #8b5cf6;
}
.deep-research-btn.active {
    border-color: #7c3aed;
    border-width: 2px;
    background: rgba(124, 58, 237, 0.12);
    box-shadow: 0 0 0 3px rgba(124,58,237,.2), 0 0 12px rgba(124,58,237,.15);
    opacity: 1;
    color: #7c3aed;
}
.deep-research-btn.active i {
    color: #fff;
    background: #7c3aed;
    border-radius: 50%;
    padding: 4px 4px;
    font-size: 10px;
    box-shadow: 0 1px 3px rgba(124,58,237,.4);
}
.deep-research-btn.active span {
    color: #7c3aed;
    font-weight: 700;
}

/* Dark mode: 增强 inactive 可见度 + active 发光 */
[data-theme="dark"] .deep-research-btn {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.35);
    opacity: 0.55;
}
[data-theme="dark"] .deep-research-btn i {
    color: rgba(255,255,255,0.35);
}
[data-theme="dark"] .deep-research-btn span {
    color: rgba(255,255,255,0.35);
}
[data-theme="dark"] .deep-research-btn:hover {
    border-color: #a78bfa;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
    opacity: 0.9;
}
[data-theme="dark"] .deep-research-btn:hover i,
[data-theme="dark"] .deep-research-btn:hover span {
    color: #a78bfa;
}
[data-theme="dark"] .deep-research-btn.active {
    border-color: #a78bfa;
    border-width: 2px;
    background: rgba(167, 139, 250, 0.15);
    box-shadow: 0 0 0 3px rgba(167,139,250,.25), 0 0 16px rgba(167,139,250,.2);
    opacity: 1;
}
[data-theme="dark"] .deep-research-btn.active i {
    color: #fff;
    background: #a78bfa;
    box-shadow: 0 1px 4px rgba(167,139,250,.5);
}
[data-theme="dark"] .deep-research-btn.active span {
    color: #ddd6fe;
    font-weight: 700;
}

/* ========== 思考强度按钮 & 下拉 ========== */
.thinking-intensity-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.thinking-intensity-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1.5px solid #9ca3af;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #9ca3af;
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: .6;
}

.thinking-intensity-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    opacity: .9;
}

.thinking-intensity-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.thinking-intensity-btn:disabled:hover {
    border-color: #9ca3af;
    color: #9ca3af;
    background: transparent;
}

/* 激活态 - 按强度分级颜色 */
.thinking-intensity-btn.active {
    opacity: 1;
    border-width: 2px;
}

.thinking-intensity-btn.active[data-active="low"] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

.thinking-intensity-btn.active[data-active="medium"] {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124,58,237,.15), 0 0 10px rgba(124,58,237,.1);
}

.thinking-intensity-btn.active[data-active="high"] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    box-shadow: 0 0 0 2px rgba(245,158,11,.15), 0 0 12px rgba(245,158,11,.12);
}

.thinking-intensity-btn.active[data-active="max"] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    box-shadow: 0 0 0 2px rgba(239,68,68,.2), 0 0 14px rgba(239,68,68,.15);
}

.thinking-intensity-btn .thinking-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    transition: background .2s;
}

.thinking-intensity-btn.active[data-active="low"] .thinking-dot { background: #3b82f6; }
.thinking-intensity-btn.active[data-active="medium"] .thinking-dot { background: #7c3aed; }
.thinking-intensity-btn.active[data-active="high"] .thinking-dot { background: #f59e0b; }
.thinking-intensity-btn.active[data-active="max"] .thinking-dot { background: #ef4444; }

.thinking-intensity-btn .thinking-caret {
    font-size: 9px;
    margin-left: -2px;
    opacity: .5;
    transition: transform .2s;
}

.thinking-intensity-btn.active .thinking-caret {
    opacity: .8;
}

/* ── 下拉面板 ── */
.thinking-intensity-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 172px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
    z-index: 1000;
    padding: 8px;
    animation: thinkingFadeIn .18s ease;
}

@keyframes thinkingFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.thinking-intensity-dropdown.show {
    display: block;
}

.thinking-intensity-dropdown .thinking-dropdown-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    padding: 4px 8px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
    letter-spacing: .02em;
}

.thinking-intensity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #374151);
    transition: all .15s;
    position: relative;
}

body:not(.dark-mode) .thinking-intensity-item:hover {
    background: #f3f4f6;
}

.thinking-intensity-item.active {
    background: rgba(124, 58, 237, 0.08);
}

.thinking-intensity-item .ti-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.thinking-intensity-item[data-intensity="off"] .ti-dot  { background: #9ca3af; }
.thinking-intensity-item[data-intensity="low"] .ti-dot  { background: #3b82f6; }
.thinking-intensity-item[data-intensity="medium"] .ti-dot { background: #7c3aed; }
.thinking-intensity-item[data-intensity="high"] .ti-dot  { background: #f59e0b; }
.thinking-intensity-item[data-intensity="max"] .ti-dot  { background: #ef4444; }

.thinking-intensity-item .ti-label {
    font-weight: 500;
    flex: 1;
}

.thinking-intensity-item.active .ti-label {
    font-weight: 700;
    color: #7c3aed;
}

.thinking-intensity-item .ti-desc {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
}

.thinking-intensity-item .ti-check {
    display: none;
    font-size: 11px;
    color: #7c3aed;
    margin-left: 4px;
}

.thinking-intensity-item.active .ti-check {
    display: inline;
}

/* ── Dark mode ── */
[data-theme="dark"] .thinking-intensity-btn {
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.55);
}

[data-theme="dark"] .thinking-intensity-btn:hover {
    border-color: rgba(139,92,246,.6);
    color: #c4b5fd;
    background: rgba(139,92,246,.1);
}

[data-theme="dark"] .thinking-intensity-btn:disabled {
    opacity: .25;
}

[data-theme="dark"] .thinking-intensity-btn:disabled:hover {
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.55);
    background: transparent;
}

[data-theme="dark"] .thinking-intensity-btn.active[data-active="low"] {
    border-color: rgba(59,130,246,.6);
    background: rgba(59,130,246,.15);
    color: #93c5fd;
}

[data-theme="dark"] .thinking-intensity-btn.active[data-active="medium"] {
    border-color: rgba(124,58,237,.6);
    background: rgba(124,58,237,.18);
    color: #c4b5fd;
}

[data-theme="dark"] .thinking-intensity-btn.active[data-active="high"] {
    border-color: rgba(245,158,11,.6);
    background: rgba(245,158,11,.15);
    color: #fcd34d;
}

[data-theme="dark"] .thinking-intensity-btn.active[data-active="max"] {
    border-color: rgba(239,68,68,.6);
    background: rgba(239,68,68,.15);
    color: #fca5a5;
}

[data-theme="dark"] .thinking-intensity-dropdown {
    background: #1e1e2e;
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 4px 32px rgba(0,0,0,.5);
}

[data-theme="dark"] .thinking-intensity-dropdown .thinking-dropdown-header {
    color: rgba(255,255,255,.5);
    border-bottom-color: rgba(255,255,255,.06);
}

[data-theme="dark"] .thinking-intensity-item,
[data-theme="dark"] .thinking-intensity-item .ti-label,
[data-theme="dark"] .thinking-intensity-item .ti-desc {
    color: #cbd5e1;
    background: transparent;
}

[data-theme="dark"] .thinking-intensity-item:hover {
    background: rgba(255,255,255,.1) !important;
}

[data-theme="dark"] .thinking-intensity-item.active {
    background: rgba(124,58,237,.22) !important;
}

[data-theme="dark"] .thinking-intensity-item.active .ti-label,
[data-theme="dark"] .thinking-intensity-item.active .ti-desc {
    color: #c4b5fd;
}

[data-theme="dark"] .thinking-intensity-item.active .ti-check {
    color: #a78bfa;
}

[data-theme="dark"] .thinking-intensity-item .ti-desc {
    color: rgba(255,255,255,.4);
}

/* ========== Deep Research 可视化 ========== */
.dr-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(118,75,162,.06));
    border: 1px solid rgba(99,102,241,.15);
    border-radius: 8px;
    font-size: 13px;
    color: var(--accent-color);
    font-weight: 500;
}
.dr-status-icon { font-size: 15px; }

/* Pipeline */
.dr-pipeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 14px;
    padding: 0 4px;
}
.dr-step {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid transparent;
    transition: all .25s;
    white-space: nowrap;
}
.dr-step .dr-step-num {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    background: var(--text-secondary);
    color: #fff;
    transition: all .25s;
}
.dr-step.active {
    color: var(--accent-color);
    background: rgba(99,102,241,.1);
    border-color: rgba(99,102,241,.25);
    animation: dr-step-pulse 2s ease-in-out infinite;
}
.dr-step.active .dr-step-num {
    background: var(--accent-color);
    animation: dr-num-glow 1.5s ease-in-out infinite;
}
@keyframes dr-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.2); }
    50% { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
@keyframes dr-num-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(99,102,241,.4); }
    50% { box-shadow: 0 0 10px rgba(99,102,241,.7); }
}
.dr-step.done {
    color: #10b981;
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.2);
}
.dr-step.done .dr-step-num {
    background: #10b981;
}
.dr-step-connector {
    flex: 0 0 24px;
    height: 2px;
    background: var(--text-secondary);
    opacity: .25;
    transition: all .3s;
    margin: 0 2px;
}
.dr-step-connector.active { background: var(--accent-color); opacity: .6; }
.dr-step-connector.done { background: #10b981; opacity: .6; }

/* Tool call cards */
.dr-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dr-tool-call {
    border: 1px solid var(--text-secondary);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
    opacity: .85;
    transition: all .25s;
}
.dr-tool-call.running { border-color: var(--accent-color); opacity: 1; box-shadow: 0 0 0 1px rgba(99,102,241,.1); }
.dr-tool-call.done { border-color: #10b981; }
.dr-tool-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    user-select: none;
}
.dr-tool-header:hover { background: rgba(99,102,241,.04); }
.dr-tool-icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.dr-tool-icon.search { background: rgba(59,130,246,.12); color: #3b82f6; }
.dr-tool-icon.read { background: rgba(16,185,129,.12); color: #10b981; }
.dr-tool-icon.stock { background: rgba(245,158,11,.12); color: #f59e0b; }
.dr-tool-icon.github { background: rgba(107,114,128,.12); color: #6b7280; }
.dr-tool-icon.pubmed { background: rgba(37,99,235,.12); color: #2563eb; }
.dr-tool-icon.arxiv { background: rgba(180,83,9,.12); color: #b45309; }
.dr-tool-icon.sub_agent { background: rgba(139,92,246,.12); color: #7c3aed; }
.dr-tool-info { flex: 1; min-width: 0; }
.dr-tool-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.dr-tool-args { color: var(--text-secondary); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-tool-status {
    font-size: 11px; color: var(--text-secondary);
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.dr-tool-status .dr-spinner {
    width: 12px; height: 12px;
    border: 2px solid rgba(99,102,241,.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: dr-spin .6s linear infinite;
}
.dr-tool-status .dr-check { color: #10b981; font-size: 14px; }
@keyframes dr-spin { to { transform: rotate(360deg); } }

.dr-tool-body { display: none; padding: 0 12px 10px; }
.dr-tool-call.expanded .dr-tool-body { display: block; }
.dr-tool-result-item {
    display: flex; gap: 8px; padding: 7px 0;
    border-bottom: 1px solid rgba(128,128,128,.1);
    font-size: 12px;
}
.dr-tool-result-item:last-child { border-bottom: none; }
.dr-result-num {
    width: 18px; height: 18px; border-radius: 4px;
    background: var(--bg-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; color: var(--text-secondary);
    flex-shrink: 0; margin-top: 1px;
}
.dr-result-content { flex: 1; min-width: 0; }
.dr-result-title { font-weight: 600; color: var(--text-primary); margin-bottom: 1px; }
.dr-result-title a { color: inherit; text-decoration: none; }
.dr-result-title a:hover { color: var(--accent-color); }
.dr-result-snippet { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.dr-read-summary { color: var(--text-secondary); font-size: 12px; line-height: 1.5; padding: 4px 0; }
.dr-read-summary a { color: var(--accent-color); }

/* Agent reasoning */
.dr-reasoning {
    font-size: 12px;
    color: var(--text-primary);
    padding: 6px 8px;
    margin: 2px 0;
    background: rgba(99,102,241,.04);
    border-left: 2px solid var(--accent-color);
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}
.dr-reasoning strong { color: var(--accent-color); }

/* dr-reasoning 折叠容器（默认折叠，点开后展开所有 reasoning 行） */
.dr-reasoning-accordion {
    margin: 8px 0;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--dr-border-color, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-secondary, #fafafa);
    overflow: hidden;
}
.dr-reasoning-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.dr-reasoning-toggle:hover {
    background: rgba(99, 102, 241, 0.06);
    color: var(--text-primary, #1f2937);
}
.dr-reasoning-caret {
    display: inline-block;
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
    transition: transform 0.18s ease;
    transform-origin: center;
}
.dr-reasoning-accordion.open .dr-reasoning-caret {
    transform: rotate(90deg);
}
.dr-reasoning-title {
    flex: 1;
}
.dr-reasoning-count {
    color: var(--text-muted, #9ca3af);
    font-weight: 400;
    font-size: 11px;
}
.dr-reasoning-body {
    display: none;
    padding: 6px 8px 8px;
    border-top: 1px solid var(--dr-border-color, #e5e7eb);
}
.dr-reasoning-accordion.open .dr-reasoning-body {
    display: block;
}
.dr-reasoning-accordion.open + .dr-report-card {
    margin-top: 4px;
}
body.dark-mode .dr-reasoning-accordion {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .dr-reasoning-toggle:hover {
    background: rgba(99, 102, 241, 0.12);
}

/* 财经分析 9 节强制流程 · 待办清单（仅 financial 子类型显示） */
.dr-section-todo-list {
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(99, 102, 241, 0.04));
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 10px;
    font-size: 12px;
}
.dr-section-todo-header {
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dr-section-todo-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    counter-reset: dr-section;
}
.dr-section-todo-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    line-height: 1.45;
}
.dr-section-todo-item.pending {
    color: var(--text-muted, #6b7280);
    background: rgba(0, 0, 0, 0.02);
}
.dr-section-todo-item.in_progress {
    color: var(--accent-color, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    font-weight: 500;
}
.dr-section-todo-item.done {
    color: var(--text-secondary, #4b5563);
    background: rgba(16, 185, 129, 0.06);
}
.dr-section-todo-item.done .dr-section-todo-title {
    text-decoration: line-through;
    opacity: 0.72;
}
.dr-section-todo-badge {
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    line-height: 1.4;
}
.dr-section-todo-title {
    flex: 1;
}

body.dark-mode .dr-section-todo-list {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.05));
    border-color: rgba(16, 185, 129, 0.22);
}
body.dark-mode .dr-section-todo-item.pending { background: rgba(255, 255, 255, 0.04); }
body.dark-mode .dr-section-todo-item.in_progress { background: rgba(99, 102, 241, 0.16); color: #c7d2fe; }
body.dark-mode .dr-section-todo-item.done { background: rgba(16, 185, 129, 0.10); color: #a7f3d0; }

/* dr-reasoning / todo list / skeleton 在 dr-report-card 之外
   （与 .dr-pipeline 同级）：限制最大宽度与卡片对齐，并加点视觉区分 */
.dr-reasoning,
.dr-section-todo-list,
.dr-report-skeleton {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.dr-reasoning + .dr-report-card,
.dr-section-todo-list + .dr-report-card,
.dr-report-skeleton + .dr-report-card {
    /* 紧邻的卡片额外收紧上方间距 */
    margin-top: 4px;
}
.dr-report-card {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--dr-border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
    margin: 12px 0;
    overflow: hidden;
    transition: box-shadow .2s;
}
.dr-report-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dr-border-color, #e5e7eb);
    background: var(--bg-secondary, #f7f7f8);
}
.dr-report-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.dr-report-card-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.dr-report-card-meta {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    padding: 6px 16px;
    border-bottom: 1px solid var(--dr-border-color, #e5e7eb);
    background: var(--bg-secondary, #f7f7f8);
    line-height: 1.5;
}
.dr-report-card-body {
    padding: 24px 28px 28px;
    max-width: 880px;
    margin: 0 auto;
    overflow-x: auto;
}
.dr-report {
    /* 已被卡片包裹：去掉自身 margin-top，让卡片体负责垂直间距 */
    margin-top: 0;
}
/* 卡片内报告元素的视觉精修：让 H1 在卡片体里更醒目 */
.dr-report-card-body h1:first-child {
    margin-top: 4px;
    margin-bottom: 12px;
}
.dr-report-card-body h2 {
    margin-top: 20px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--dr-border-color, #e5e7eb);
}

/* 卡片内的"导出 / 展开"按钮：纯图标风格（参考 ChatGPT 报告页右上角） */
.dr-report-export-btn,
.dr-report-expand-btn {
    border: 0;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    font-family: inherit;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.dr-report-export-btn:hover:not(:disabled),
.dr-report-expand-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary, #1f2937);
}
.dr-report-export-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* 全屏模式 */
.dr-report-card-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9000;
    margin: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: var(--bg-primary, #ffffff);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.dr-report-card-fullscreen .dr-report-card-body {
    max-width: 920px;
    padding: 32px 40px 48px;
    flex: 1;
}
.dr-report-card-fullscreen .dr-report-card-header,
.dr-report-card-fullscreen .dr-report-card-meta {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-secondary, #f7f7f8);
}

body.dark-mode .dr-report-card {
    background: var(--bg-primary, #1f1f23);
    border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .dr-report-card-header,
body.dark-mode .dr-report-card-meta {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .dr-report-card-title {
    color: var(--text-primary, #e5e7eb);
}
body.dark-mode .dr-report-export-btn,
body.dark-mode .dr-report-expand-btn {
    color: var(--text-secondary, #9ca3af);
}
body.dark-mode .dr-report-export-btn:hover:not(:disabled),
body.dark-mode .dr-report-expand-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary, #e5e7eb);
}
body.dr-report-card-fullscreen-open {
    overflow: hidden;
}
    background: rgba(255, 255, 255, 0.10);
}

/* 引用标记链接 [1],[2] → 可点击跳转按钮 */
.dr-citation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    vertical-align: super;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    margin: 0 1px;
    line-height: 1;
}
.dr-citation:hover {
    background: #6366f1;
    color: #fff;
    transform: translateY(-1px);
}
body.dark-mode .dr-citation {
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
}
body.dark-mode .dr-citation:hover {
    background: #818cf8;
    color: #fff;
}

.dr-report-skeleton {
    margin-top: 8px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}
.dr-skeleton-line {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(99,102,241,.06) 25%, rgba(99,102,241,.15) 50%, rgba(99,102,241,.06) 75%);
    background-size: 200% 100%;
    animation: dr-shimmer 1.8s ease-in-out infinite;
}
.dr-skeleton-line:last-child { width: 60%; }
@keyframes dr-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Status bar loading dots */
.dr-status.loading .dr-status-text::after {
    content: '';
    animation: dr-dots 1.4s steps(4, end) infinite;
}
@keyframes dr-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* Tool card entrance animation */
.dr-tool-call {
    animation: dr-card-in .3s ease-out;
}
@keyframes dr-card-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: .85; transform: translateY(0); }
}
.dr-tool-call.running {
    opacity: 1;
    animation: dr-card-in .3s ease-out, dr-card-pulse 2s ease-in-out infinite;
    animation-delay: 0s, .3s;
}
@keyframes dr-card-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.15); }
    50% { box-shadow: 0 0 0 4px rgba(99,102,241,0); }
}

/* Result items stagger animation */
.dr-tool-call.expanded .dr-tool-result-item {
    animation: dr-item-in .25s ease-out both;
}
.dr-tool-call.expanded .dr-tool-result-item:nth-child(1) { animation-delay: .05s; }
.dr-tool-call.expanded .dr-tool-result-item:nth-child(2) { animation-delay: .1s; }
.dr-tool-call.expanded .dr-tool-result-item:nth-child(3) { animation-delay: .15s; }
.dr-tool-call.expanded .dr-tool-result-item:nth-child(4) { animation-delay: .2s; }
@keyframes dr-item-in {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}


/* ========== 确保预览区在输入框上方 ========== */
.image-upload-wrapper {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
/* 消息中的视频 */
.message-video {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    margin-top: 8px;
}

/* 额外样式（来自 index.php） */
.typing-indicator .message-bubble {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.error-toast {
    animation: toastSlideDown 0.3s ease-out;
}

/* 确认模态框样式（迁移至 app.css，全局可用）*/

/* 思考内容中的代码块样式 */
.thinking-content pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 8px 0;
    font-style: normal; /* 取消斜体，让代码更易读 */
}

.thinking-content code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-style: normal;
}

/* 思考内容中的列表样式 */
.thinking-content ul,
.thinking-content ol {
    margin: 8px 0;
    padding-left: 20px;
    font-style: normal;
}

.thinking-content li {
    margin: 4px 0;
}

/* 滚动到底部按钮 */
.scroll-to-bottom-btn {
    position: fixed;
    bottom: 140px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
}

.scroll-to-bottom-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-bottom-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.3);
}

.scroll-to-bottom-btn:active {
    transform: translateY(0);
}

/* 深色模式适配 */
body.dark-mode .scroll-to-bottom-btn {
    background: var(--bg-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .scroll-to-bottom-btn:hover {
    background: var(--accent-color);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .scroll-to-bottom-btn {
        bottom: 110px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* 代码块样式 */
.code-block {
    background: #1e1e1e;
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
}

.code-lang {
    background: #2d2d2d;
    color: #d4d4d4;
    padding: 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    border-bottom: 1px solid #3d3d3d;
    font-weight: 500;
}

.code-block pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    background: transparent;
    white-space: pre;
    word-wrap: normal;
}

.code-block code {
    background: transparent;
    color: #d4d4d4;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* 浅色模式适配 */
body:not(.dark-mode) .code-block {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
}

body:not(.dark-mode) .code-lang {
    background: #f1f3f4;
    color: #333;
    border-bottom: 1px solid #e1e4e8;
}

body:not(.dark-mode) .code-block code {
    color: #24292e;
}

/* 行内代码样式（原有样式增强） */
.message-text code {
    background: rgba(175, 184, 193, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    color: var(--text-primary);
}

body.dark-mode .message-text code {
    background: rgba(110, 118, 129, 0.4);
    color: #e6edf3;
}

/* 额外的样式 */
.typing-indicator .message-bubble {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.error-toast {
    animation: toastSlideDown 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* 顶部居中向下弹出（自居中元素：transform: translateX(-50%)） */
@keyframes toastSlideDown {
    from { opacity: 0; transform: translate(-50%, -30px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes toastSlideUp {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, -30px); }
}

/* 仅保留移动端菜单按钮的显示逻辑，移除其他冲突样式 */
@media (max-width: 768px) {
    #mobileMenuToggle {
        display: block !important;
    }
}

/* 欢迎界面 */
.welcome-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    text-align: center;
}

.welcome-logo {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: var(--spacing-lg);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.welcome-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.welcome-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: var(--spacing-2xl);
}

/* 图片上传功能样式 */
.image-upload-wrapper {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
    margin-bottom: var(--spacing-sm);
}

.image-upload-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 44px;
}

.image-upload-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--bg-primary);
}

.image-upload-btn.has-image {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.image-upload-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-upload-btn.disabled:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

#imageInput {
    display: none;
}

/* 预览容器 - 固定尺寸防止变形 */
.uploaded-media-preview {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 8px;
    margin-top: var(--spacing-sm);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}

.uploaded-media-preview.uploading {
    opacity: 0.8;
}

/* 预览媒体填充容器 */
.uploaded-media-preview .uploaded-image,
.uploaded-media-preview .uploaded-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例填满容器 */
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    display: block;
}

/* 遮罩层 - 严格匹配父容器 */
.uploading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    gap: 6px;
    border-radius: var(--radius-sm);
    z-index: 10;
    box-sizing: border-box;
}

/* 加载动画 - 固定大小防止挤压 */
.uploading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
    box-sizing: border-box;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 上传进度百分比 */
.upload-percent {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 删除按钮 */
.remove-media-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--error-color, #ef4444);
    color: white;
    border: 2px solid var(--bg-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 20;
    padding: 0;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.remove-media-btn:hover {
    transform: scale(1.1);
    background: #dc2626;
}

/* 上传完成标记 */
.uploaded-media-preview.uploaded {
    border: 2px solid var(--success-color);
}

/* 图片预览区域布局 */
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    width: 100%;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .uploaded-media-preview {
        width: 70px;
        height: 70px;
    }

    .uploading-spinner {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }

    .uploading-overlay {
        font-size: 11px;
        gap: 4px;
    }
}

.remove-media-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--error-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.remove-media-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.message-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.message-image:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* 文件上传限制提示 */
.file-size-error {
    background: var(--error-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-top: var(--spacing-xs);
    animation: slideInRight 0.3s ease-out;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .image-upload-wrapper {
        flex-direction: row;    /* 改为水平排列 */
        flex-wrap: nowrap;      /* 禁止换行 */
        align-items: center;    /* 垂直居中 */
        gap: 8px;               /* 减小间距 */
    }

    .image-upload-btn {
        flex-shrink: 0;         /* 防止按钮被压缩 */
        padding: 8px 12px;      /* 减小按钮内边距 */
        font-size: 12px;        /* 缩小字体 */
    }

    .image-preview-container {
        flex-shrink: 0;         /* 防止预览区被压缩 */
        display: flex !important;
    }
}

/* 可选：添加闪烁动画效果 */
@keyframes freePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.model-quote-cost.free {
    animation: freePulse 2s infinite;
}

.media-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modalImage, #modalVideo {
    display: none;
    max-width: 100%;
    max-height: 100%;
}

/* 强制媒体元素自适应 */
#modalImage {
    display: none;
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

#modalVideo {
    display: none;
    max-width: 90vw !important;
    max-height: 90vh !important;
    min-width: auto !important; /* 移除之前的min-width限制 */
    background: #000;
}

.media-modal-close {
    position: absolute;
    top: 15px; right: 15px;
    background: rgb(237 5 5 / 80%) !important;
    color: white; border: none;
    border-radius: 50%; width: 40px; height: 40px;
    font-size: 24px; cursor: pointer;
}

.media-modal-close:hover {
    background: rgb(237 5 5 / 30%) !important;
    transform: scale(1.1);
}

/* 深色模式适配 */
body.dark-mode .media-modal-close {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .media-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.modal-btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-btn-cancel:hover {
    background: var(--border-color);
}

.modal-btn-confirm {
    background: var(--error-color);
    color: white;
    border-color: var(--error-color);
}

.modal-btn-confirm:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.share-modal-content {
    width: min(720px, 94vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}

/* 分享创建按钮 - 蓝色主题 */
.share-create-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    border-color: #2563eb !important;
}

.share-create-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    border-color: #1d4ed8 !important;
}

.share-modal-desc {
    margin: 0 0 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

/* 聊天页面模态框覆盖样式 - 确保在最上层 */
body.chat-page .modal-overlay {
    z-index: 20000 !important;
}

body.chat-page .modal-content {
    z-index: 20001 !important;
}

.share-select-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.share-link-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
}

.share-message-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.share-message-item {
    display: grid;
    grid-template-columns: auto 32px 1fr;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: pointer;
}

.share-message-index {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 20px;
}

.share-message-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-message-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

.share-message-snippet {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}

.share-result {
    gap: 10px;
    margin-top: 14px;
}

.share-url-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

body.chat-share-view .sidebar,
body.chat-share-view .mobile-menu-toggle,
body.chat-share-view #welcomeContainer,
body.chat-share-view .input-container,
body.chat-share-view .chat-actions,
body.chat-share-view .message-actions {
    display: none !important;
}

body.chat-share-view .main-content {
    margin-left: 0 !important;
    width: 100%;
}

body.chat-share-view .chat-container {
    display: flex !important;
}

body.chat-share-view .chat-header {
    top: 0 !important; /* 顶栏已移除，无需补偿 */
}

body.chat-share-view .messages-container {
    padding-top: 90px !important; /* 分享视图也需要足够的顶部空间 */
}

.message-text.sensitive-warning {
    color: #f59e0b;
    font-style: italic;
    background: rgba(245, 158, 11, 0.1);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid #f59e0b;
}

/* 代码块头部样式 */
.code-block .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #2d2d2d;
    border-bottom: 1px solid #3d3d3d;
    border-radius: 8px 8px 0 0;
}

/* 代码语言标签 */
.code-block .code-lang {
    font-size: 11px;
    color: #d4d4d4;
    text-transform: uppercase;
    font-weight: 500;
}

.code-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* 复制按钮样式 */
.copy-code-btn,
.download-code-btn,
.preview-code-btn {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-code-btn:hover,
.download-code-btn:hover,
.preview-code-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.copy-code-btn.copied,
.download-code-btn.downloaded {
    color: #10b981;
}

/* 代码块内容区域调整 */
.code-block pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    background: #1e1e1e;
    border-radius: 0 0 8px 8px;
}

/* 浅色模式适配 */
body:not(.dark-mode) .code-block .code-header {
    background: #f1f3f4;
    border-bottom-color: #e1e4e8;
}

body:not(.dark-mode) .code-block .code-lang {
    color: #333;
}

body:not(.dark-mode) .copy-code-btn,
body:not(.dark-mode) .download-code-btn,
body:not(.dark-mode) .preview-code-btn {
    color: #666;
}

body:not(.dark-mode) .copy-code-btn:hover,
body:not(.dark-mode) .download-code-btn:hover,
body:not(.dark-mode) .preview-code-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #0f0f0f;
}

body:not(.dark-mode) .code-block pre {
    background: #f6f8fa;
}

body.code-preview-open {
    overflow: hidden;
}

.code-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
}

.code-preview-modal.open {
    display: block;
}

.code-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
}

.code-preview-dialog {
    position: absolute;
    inset: 5vh 5vw;
    min-height: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.code-preview-header {
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.code-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.code-preview-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.code-preview-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.code-preview-icon-btn:hover {
    color: var(--text-primary);
    background: var(--bg-primary);
    border-color: var(--border-color);
}

.code-preview-frame-wrap {
    flex: 1;
    min-height: 0;
    background: #fff;
}

.code-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    display: block;
}

body.dark-mode .code-preview-dialog {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.24);
}

body.dark-mode .code-preview-header {
    background: #0f172a;
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

@media (max-width: 768px) {
    .code-preview-dialog {
        inset: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .code-preview-header {
        height: 46px;
        padding: 0 10px;
    }
}

/* ========== 新模型选择器 ========== */
.model-selector-wrapper .dropdown-menu,
.version-dropdown {
    display: none !important;
}

.model-selector-wrapper .dropdown-button {
    align-items: center;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 250, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.model-selector-wrapper .dropdown-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
}

body.dark-mode .model-selector-wrapper .dropdown-button {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(31, 41, 55, 0.98) 100%);
    border-color: rgba(100, 116, 139, 0.34);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
}

.welcome-container .model-selector-wrapper .dropdown-button {
    background: rgba(255, 255, 255, 0.92);
}

.model-trigger-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--provider-contrast, #fff);
    background: var(--provider-accent, #06b6d4);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    flex-shrink: 0;
}

.model-trigger-icon i,
.provider-pill-icon i {
    font-size: 16px;
}

.model-trigger-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.model-trigger-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.model-trigger-subtitle {
    width: 100%;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-trigger-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.12);
    color: var(--accent-color, #06b6d4);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

body.dark-mode .model-trigger-cost {
    background: rgba(34, 211, 238, 0.18);
    color: #67e8f9;
}

.deep-thinking-btn {
    height: 36px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.deep-thinking-btn i {
    color: #f59e0b;
}

.deep-thinking-btn.active {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.7);
    color: #b45309;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
}

.deep-thinking-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.deep-thinking-btn.active:disabled {
    opacity: 1;
    cursor: default;
}

body.dark-mode .deep-thinking-btn {
    color: var(--text-secondary, #9ca3af);
    border-color: var(--border-color, #4b5563);
}

body.dark-mode .deep-thinking-btn.active {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.7);
}

/* ========== 工具调用按钮 ========== */
.tool-call-wrapper {
    position: relative;
}

.model-params-wrapper {
    position: relative;
}

.model-params-btn {
    height: 36px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.model-params-btn i {
    color: #0f766e;
}

.model-params-btn:hover {
    border-color: #14b8a6;
    transform: translateY(-1px);
}

.model-params-btn.active {
    background: rgba(20, 184, 166, 0.14);
    border-color: #14b8a6;
    color: #0f766e;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.18);
}

.model-params-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: min(320px, calc(100vw - 32px));
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    padding: 12px;
}

.model-params-dropdown.show {
    display: block;
}

.model-params-header,
.model-param-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.model-params-header {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #374151);
}

.model-params-reset {
    border: 0;
    background: transparent;
    color: #0f766e;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.model-param-row {
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.model-param-row:last-child {
    margin-bottom: 0;
}

.model-param-row label {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    line-height: 32px;
}

.model-param-help {
    flex: 0 0 100%;
    margin: -2px 0 2px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted, #8a94a6);
}

.model-param-input {
    width: 116px;
    height: 32px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-primary, #374151);
    font-size: 13px;
    padding: 0 9px;
}

.model-param-input:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

/* 系统提示词 */
.system-prompt-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.system-prompt-row .model-param-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 6px;
}

.system-prompt-input {
    width: 100%;
    min-height: 60px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-primary, #374151);
    font-size: 13px;
    padding: 8px 10px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.system-prompt-input:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.system-prompt-input::placeholder {
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
}

/* ── 参数栏分隔线 ── */
.model-param-divider {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 10px -12px;
}

/* ── 参数栏思考开关 ── */
.thinking-param-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px;
}

.thinking-param-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.thinking-param-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #374151);
}

.thinking-param-desc {
    font-size: 11px;
    color: var(--text-muted, #8a94a6);
    line-height: 1.4;
}

.thinking-param-toggle-label {
    flex-shrink: 0;
}

/* ── 参数栏思考强度选择器 ── */
.thinking-intensity-selector {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.thinking-intensity-selector.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.thinking-intensity-hint {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    flex-shrink: 0;
}

.thinking-intensity-options {
    display: flex;
    gap: 4px;
    flex: 1;
}

.ti-param-option {
    flex: 1;
    padding: 6px 0;
    border: 1.5px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.ti-param-option:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.06);
}

.ti-param-option.active {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.ti-param-option[data-intensity="low"].active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.ti-param-option[data-intensity="high"].active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12);
}

.ti-param-option[data-intensity="max"].active {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* 思考强度 dark mode */
[data-theme="dark"] .model-param-divider {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .thinking-param-label {
    color: #f3f4f6;
}

[data-theme="dark"] .thinking-param-desc {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .thinking-intensity-hint {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .ti-param-option {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .ti-param-option:hover {
    border-color: rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .ti-param-option.active {
    border-color: rgba(124, 58, 237, 0.5);
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

[data-theme="dark"] .ti-param-option[data-intensity="low"].active {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

[data-theme="dark"] .ti-param-option[data-intensity="high"].active {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

[data-theme="dark"] .ti-param-option[data-intensity="max"].active {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.tool-call-btn {
    height: 36px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tool-call-btn i {
    color: #8b5cf6;
}

.tool-call-btn:hover {
    border-color: #8b5cf6;
    transform: translateY(-1px);
}

.tool-call-btn.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    color: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.tool-call-btn.active i {
    color: #8b5cf6;
}

/* 统一：禁用态图标灰色 + 删除线，与未激活（transparent）区分 */
.web-search-btn:disabled i,
.deep-thinking-btn:disabled i,
.tool-call-btn:disabled i {
    color: var(--text-tertiary, #9ca3af) !important;
    text-decoration: line-through;
}

/* 下拉菜单 */
.tool-call-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    padding: 12px;
    max-height: 320px;
    overflow-y: auto;
}

.tool-call-dropdown.show {
    display: block;
}

.tool-call-toggle {
    padding-bottom: 8px;
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #374151);
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 40px;
    height: 22px;
    background: var(--border-color, #d1d5db);
    border-radius: 11px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider {
    background: #8b5cf6;
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.tool-call-divider {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 8px 0;
}

.tool-call-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 工具分类标签 */
.tool-category {
    margin-bottom: 2px;
}
.tool-category-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
}
.tool-category:first-child .tool-category-label {
    border-top: none;
    padding-top: 0;
}

/* DR 模式提示条 */
.tool-dr-notice {
    font-size: 11px;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    text-align: center;
}

.tool-option-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-primary, #374151);
    padding: 6px 0;
    gap: 12px;
}

.tool-option-row.tool-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.tool-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tool-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #374151);
}

.tool-desc {
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.4;
}

body.dark-mode .tool-name {
    color: var(--text-primary, #f3f4f6);
}

body.dark-mode .tool-desc {
    color: var(--text-secondary, #9ca3af);
}

.tool-option-row input[type="checkbox"] {
    display: none;
}

.toggle-slider.small {
    width: 32px;
    height: 18px;
    border-radius: 9px;
}

.toggle-slider.small::before {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
}

.toggle-slider.small::before {
    transform: translateX(0);
}

.tool-option-row input[type="checkbox"]:checked + .toggle-slider.small {
    background: #8b5cf6;
}

.tool-option-row input[type="checkbox"]:checked + .toggle-slider.small::before {
    transform: translateX(14px);
}

body.dark-mode .tool-call-btn {
    color: var(--text-secondary, #9ca3af);
    border-color: var(--border-color, #4b5563);
}

body.dark-mode .model-params-btn {
    color: var(--text-secondary, #9ca3af);
    border-color: var(--border-color, #4b5563);
}

body.dark-mode .model-params-dropdown {
    background: var(--bg-primary, #1f2937);
    border-color: var(--border-color, #374151);
}

body.dark-mode .model-param-input {
    background: var(--bg-secondary, #111827);
    border-color: var(--border-color, #374151);
    color: var(--text-primary, #f3f4f6);
}

body.dark-mode .system-prompt-input {
    background: var(--bg-secondary, #111827);
    border-color: var(--border-color, #374151);
    color: var(--text-primary, #f3f4f6);
}

body.dark-mode .tool-call-btn:hover {
    border-color: #8b5cf6;
}

body.dark-mode .tool-call-btn.active {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8b5cf6;
    color: #a78bfa;
}

body.dark-mode .tool-call-dropdown {
    background: var(--bg-primary, #1f2937);
    border-color: var(--border-color, #374151);
}

body.dark-mode .toggle-label {
    color: var(--text-primary, #f3f4f6);
}

body.dark-mode .tool-option {
    color: var(--text-primary, #f3f4f6);
}

body.dark-mode .tool-category-label {
    color: var(--text-secondary, #9ca3af);
    border-color: var(--border-color, #374151);
}

body.dark-mode .tool-dr-notice {
    background: rgba(139, 92, 246, 0.12);
}

/* ========== 工具调用显示 ========== */
.tool-call-container {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    color: var(--text-primary, #0f172a);
}

body.dark-mode .tool-call-container {
    background: rgba(139, 92, 246, 0.1);
    color: var(--text-primary, #f1f5f9);
    border-color: rgba(139, 92, 246, 0.3);
}

/* fhtml_code / ipython 流式代码预览 */
.fhtml-code-stream,
.ipython-code-stream {
    border-left: 3px solid #8b5cf6;
    background: #1e1e2e;
    border-radius: 8px;
    margin: 8px 0;
    padding: 0;
    overflow: hidden;
}
.fhtml-stream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(139, 92, 246, 0.15);
}
.fhtml-stream-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a78bfa;
    font-weight: 600;
    font-size: 13px;
}
.fhtml-stream-status {
    font-size: 11px;
    color: #6b7280;
    margin-left: 4px;
    font-weight: 400;
}
.fhtml-stream-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.fhtml-action-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #a78bfa;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}
.fhtml-action-btn:hover {
    background: rgba(255,255,255,0.2);
}
.fhtml-view-btn:hover {
    color: #60a5fa;
}
.fhtml-download-btn:hover {
    color: #34d399;
}
.fhtml-code-body {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    scroll-behavior: smooth;
}
.fhtml-code-preview {
    color: #e2e8f0;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    line-height: 1.5;
}
.fhtml-code-stream.collapsed .fhtml-code-body,
.ipython-code-stream.collapsed .fhtml-code-body {
    max-height: 0;
    padding: 0 12px;
    overflow: hidden;
}
.fhtml-code-stream.collapsed .fhtml-stream-title::after,
.ipython-code-stream.collapsed .fhtml-stream-title::after {
    content: '▶';
    font-size: 10px;
    margin-left: 6px;
    color: #6b7280;
}
.fhtml-code-stream:not(.collapsed) .fhtml-stream-title::after,
.ipython-code-stream:not(.collapsed) .fhtml-stream-title::after {
    content: '▼';
    font-size: 10px;
    margin-left: 6px;
    color: #6b7280;
}

/* IPython 输出折叠 */
.ipython-output-toggle {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    padding: 4px 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ipython-output-toggle:hover {
    color: var(--accent-color, #3b82f6);
}
.ipython-output-toggle i {
    transition: transform 0.2s;
    font-size: 10px;
}
.ipython-output-toggle.expanded i {
    transform: rotate(90deg);
}
.ipython-output-body {
    display: none;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 6px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    color: var(--text-primary, #0f172a);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    line-height: 1.5;
}
.ipython-output-body.expanded {
    display: block;
}

.tool-call-item {
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 4px;
    color: var(--text-primary, #0f172a);
}

.tool-call-item:last-child {
    margin-bottom: 0;
}

.tool-call-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #374151);
    margin-bottom: 2px;
}

.tool-call-header i {
    color: #8b5cf6;
}

.tool-call-expression {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-secondary, #f3f4f6);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}

body.dark-mode .tool-call-expression {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary, #f3f4f6);
}

body.dark-mode .tool-call-item {
    color: var(--text-primary, #f1f5f9);
}
body.dark-mode .tool-call-result {
    color: var(--text-primary, #f1f5f9);
}
body.dark-mode .fhtml-code-preview {
    color: #e2e8f0;
    background: #1a1a2e;
}
body.dark-mode .ipython-output-body {
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary, #f1f5f9);
}
body.dark-mode .ipython-output-toggle {
    color: var(--text-secondary, #94a3b8);
}

.tool-call-result {
    font-size: 14px;
    font-weight: 500;
    padding: 4px 0;
    color: var(--text-primary, #0f172a);
}

.tool-call-result.success {
    color: #10b981;
}

.tool-call-result.error {
    color: #ef4444;
}

.tool-call-result i {
    margin-right: 4px;
}

/* ── Todo List 任务清单 ── */
.todo-progress {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: auto;
}

.todo-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
}

.todo-check {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: 11px;
}

.todo-item.pending .todo-check {
    color: var(--text-secondary);
}

.todo-item.in_progress .todo-check {
    color: #8b5cf6;
    animation: todo-spin 1.5s linear infinite;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    opacity: 0.5;
}

.todo-item.completed .todo-check {
    color: #10b981;
}

@keyframes todo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── 联网搜索展开式结果 ── */
.web-search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    user-select: none;
    transition: background .15s;
}
.web-search-header:hover { opacity: .85; }
.web-search-header.expanded { margin-bottom: 4px; }
.web-search-body {
    border-top: 1px solid var(--border-color, rgba(128,128,128,.15));
    padding-top: 8px;
}
.web-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.web-search-result-item {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--bg-primary, rgba(255,255,255,.4));
    transition: background .15s;
    font-size: 12px;
}
.web-search-result-item:hover {
    background: rgba(99,102,241,.06);
}
.ws-result-num {
    width: 20px; height: 20px;
    border-radius: 4px;
    background: rgba(99,102,241,.1);
    color: var(--accent-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    flex-shrink: 0; margin-top: 1px;
}
.ws-result-content { flex: 1; min-width: 0; }
.ws-result-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
}
.ws-result-title a {
    color: inherit;
    text-decoration: none;
}
.ws-result-title a:hover { color: var(--accent-color); }
.ws-result-snippet {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-call-repos {
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}

.tool-call-repo-item {
    padding: 4px 0;
}

.tool-call-repo-item:not(:last-child) {
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 4px;
    padding-bottom: 6px;
}

.tool-call-repo-item a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.tool-call-repo-item a:hover {
    text-decoration: underline;
}

.tool-call-repo-item .repo-stars {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 8px;
}

.tool-call-repo-item .repo-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.stock-tool-grid > div {
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    background: var(--bg-secondary, #f3f4f6);
}

.stock-tool-grid span,
.stock-tool-meta span {
    display: block;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}

.stock-tool-grid strong {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--text-primary, #111827);
}

.stock-tool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.stock-tool-meta span {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

body.dark-mode .stock-tool-grid > div {
    background: rgba(15, 23, 42, 0.72);
}

body.dark-mode .stock-tool-grid strong {
    color: var(--text-primary, #f3f4f6);
}

body.dark-mode .stock-tool-meta span {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

@media (max-width: 640px) {
    .stock-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.model-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
}

body.model-picker-open {
    overflow: hidden;
}

.model-picker-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(8px);
}

.model-picker-dialog {
    position: relative;
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    margin: 0;
    background: var(--bg-primary, #fff);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.26);
    overflow: hidden;
}

body.dark-mode .model-picker-dialog {
    background: #0f172a;
    border-color: rgba(71, 85, 105, 0.5);
}

.model-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.model-picker-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.model-picker-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.model-picker-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 14px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.model-picker-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    height: min(640px, calc(100vh - 140px));
    min-height: 560px;
    max-height: calc(100vh - 140px);
    overflow: hidden;
}

.model-picker-sidebar {
    padding: 20px 16px 24px;
    background: rgba(15, 23, 42, 0.03);
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.dark-mode .model-picker-sidebar {
    background: rgba(148, 163, 184, 0.06);
    border-right-color: rgba(71, 85, 105, 0.45);
}

.model-picker-main {
    display: flex;
    flex-direction: column;
    padding: 20px 22px 24px;
    overflow: hidden;
    min-height: 0;
}

.model-picker-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.model-picker-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.model-filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.model-filter-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

.model-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.model-filter-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.model-filter-select {
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.model-picker-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.model-picker-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 16px;
    background: var(--bg-secondary, #f8fafc);
}

.model-picker-search input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
}

.model-provider-list,
.model-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-category-list {
    flex-direction: row;
    flex-wrap: wrap;
}

.model-provider-item,
.model-category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.model-category-item {
    width: auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary);
}

.model-provider-item:hover,
.model-provider-item.active {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.26);
}

.model-category-item:hover,
.model-category-item.active {
    background: rgba(6, 182, 212, 0.12);
    color: var(--accent-color, #06b6d4);
}

.provider-pill-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--provider-contrast, #fff);
    background: var(--provider-accent, #06b6d4);
    flex-shrink: 0;
    overflow: hidden;
}

.provider-pill-icon.has-inline-svg,
.model-trigger-icon.has-inline-svg {
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

.provider-pill-svg,
.provider-pill-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.provider-pill-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.provider-pill-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

body.dark-mode .provider-pill-icon.has-inline-svg,
body.dark-mode .model-trigger-icon.has-inline-svg {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.5);
}

.provider-pill-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.provider-pill-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.provider-pill-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.model-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.model-picker-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 212px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    cursor: pointer;
    transition: all 0.22s ease;
    text-align: left;
    color: var(--text-primary);
}

.model-picker-card:hover {
    transform: translateY(-2px);
    border-color: rgba(6, 182, 212, 0.34);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(241, 245, 249, 0.99) 100%);
}

body.dark-mode .model-picker-card:hover {
    background: linear-gradient(180deg, rgb(30, 41, 59) 0%, rgb(51, 65, 85) 100%);
    border-color: rgba(6, 182, 212, 0.34);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.model-picker-card.membership-locked {
    opacity: 0.48;
    filter: grayscale(1);
    cursor: not-allowed;
}

.model-picker-card.membership-locked:hover {
    transform: none;
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: none;
}

body.dark-mode .model-picker-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    border-color: rgba(71, 85, 105, 0.45);
}

.model-picker-card-top,
.model-picker-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.model-picker-card-provider {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.model-picker-card-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.12);
    color: var(--accent-color, #06b6d4);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.model-picker-card-cost.has-discount {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.quote-price-original {
    color: var(--text-secondary, #6b7280);
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    opacity: 0.78;
}

.quote-price-current {
    color: inherit;
    font-weight: 800;
}

body.dark-mode .model-picker-card-cost.has-discount {
    background: rgba(52, 211, 153, 0.18);
    color: #6ee7b7;
}

body.dark-mode .quote-price-original {
    color: rgba(226, 232, 240, 0.68);
}

.model-picker-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.model-picker-card-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
    min-height: 64px;
}

.model-picker-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.model-picker-tag {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg-secondary, #e2e8f0);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.model-picker-card-footer-note {
    font-size: 12px;
    color: var(--text-secondary);
}

.model-picker-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px dashed rgba(148, 163, 184, 0.32);
    border-radius: 22px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}

@media (max-width: 768px) {
    .deep-thinking-btn {
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 16px;
    }

    .model-selector-wrapper .dropdown-button {
        min-height: 58px;
        padding: 10px 12px;
        border-radius: 16px;
    }

    .model-trigger-cost,
    .deep-thinking-btn span {
        display: none;
    }

    .model-picker-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        margin: 0;
        border-radius: 22px;
    }

    .model-picker-body {
        grid-template-columns: 1fr;
        min-height: auto;
        height: min(720px, calc(100vh - 20px));
    }

    .model-picker-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        padding-bottom: 12px;
        overflow: visible;
    }

    .model-provider-list {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .model-provider-list::-webkit-scrollbar {
        display: none;
    }

    .model-provider-item {
        width: auto;
        max-width: 140px;
        min-width: auto;
        flex-shrink: 0;
    }

    .model-provider-item .provider-pill-meta {
        display: none;
    }

    .model-card-grid {
        grid-template-columns: 1fr;
    }

    .model-picker-main {
        overflow: hidden;
    }
}

/* ========== 模型版本选择器样式 ========== */
.version-dropdown {
    position: relative;
    flex: 0 1 auto;    /* 不强制增长，可收缩 */
    min-width: 0;      /* 允许收缩 */
    max-width: 100%;   /* 不能超过父容器宽度 */
    display: flex;     /* 确保内部按钮正确对齐 */
    align-items: center;
    z-index: 10;       /* 添加：确保下拉层级正确 */
}


/* 按钮宽度自适应内容，但受限于父容器 */
.version-dropdown-button {
    height: 36px;
    padding: 0 30px 0 12px;  /* 右侧留出箭头空间 */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    color: var(--text-primary, #1f2937);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    
    /* 关键修复：宽度自适应策略 */
    width: auto;                    /* 默认适应内容 */
    min-width: max-content;         /* 最小不能小于文字宽度 */
    max-width: 100%;                /* 最大不能超过父容器剩余空间 */
    
    /* 文字截断显示 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    /* 确保可点击 */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    pointer-events: auto;   /* 确保点击事件穿透 */
}

.version-dropdown-button .fa-chevron-down {
    position: absolute;
    right: 10px;
    font-size: 10px;
    transition: transform 0.2s ease;
    color: var(--text-secondary, #6b7280);
}

.version-dropdown-button.active .fa-chevron-down {
    transform: rotate(180deg);
}

body.dark-mode .version-dropdown-button {
    background: rgba(31, 41, 55, 0.5);
    border-color: rgba(75, 85, 99, 0.5);
    color: var(--text-primary, #e5e7eb);
}

.version-dropdown-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--accent-color, #06b6d4);
}

.version-dropdown-button.active {
    border-color: var(--accent-color, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.version-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 关键修复：移除固定宽度限制，让按钮自己决定宽度 */
    max-width: none;
    display: inline-block;
}


/* 下拉菜单 */
.version-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    /* 关键修复：强制与按钮同宽，但最小容纳内容 */
    width: auto;
    min-width: max-content;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1000;
    padding: 6px;
    box-sizing: border-box;
}


.version-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.version-dropdown-item {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #1f2937);
    transition: all 0.15s ease;
    /* 移除 white-space: nowrap 以避免flex布局下溢出 */
    display: flex; /* 启用flex布局 */
    align-items: center;
    justify-content: space-between;
    gap: 12px; /* 控制name和badge之间的间距 */
}

.version-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.version-dropdown-item:hover {
    background: var(--bg-secondary, #f3f4f6);
}

.version-dropdown-item.active {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-color, #06b6d4);
    font-weight: 500;
}

/* 深色模式适配 */
body.dark-mode .version-dropdown-button {
    background: rgba(31, 41, 55, 0.5);
    border-color: rgba(75, 85, 99, 0.5);
    color: var(--text-primary, #e5e7eb);
}

body.dark-mode .version-dropdown-button:hover {
    background: rgba(31, 41, 55, 0.7);
    border-color: var(--accent-color, #22d3ee);
}

body.dark-mode .version-dropdown-button.active {
    border-color: var(--accent-color, #22d3ee);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

body.dark-mode .version-dropdown-button .fa-chevron-down {
    color: var(--text-secondary, #9ca3af);
}

body.dark-mode .version-dropdown-menu {
    background: var(--bg-primary, #111827);
    border-color: var(--border-color, #374151);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .version-dropdown-item {
    color: var(--text-primary, #e5e7eb);
}

body.dark-mode .version-dropdown-item:hover {
    background: var(--bg-secondary, #1f2937);
}

body.dark-mode .version-dropdown-item.active {
    background: rgba(34, 211, 238, 0.15);
    color: var(--accent-color, #22d3ee);
}

/* 欢迎界面版本选择器特殊样式 */
.welcome-container .version-dropdown-button {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary, #1f2937);
}

.welcome-container .version-dropdown-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.welcome-container .version-dropdown-button .fa-chevron-down {
    color: rgba(0, 0, 0, 0.8);
}

body.dark-mode .welcome-container .version-dropdown-button .fa-chevron-down {
    color: rgba(255, 255, 255, 0.8);
}


.welcome-container .version-dropdown-menu {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
}

.welcome-container .version-dropdown-item {
    color: var(--text-primary, #1f2937);
}

.welcome-container .version-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.welcome-container .version-dropdown-item.active {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-color, #06b6d4);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .version-dropdown-button {
        height: 32px;
        padding: 0 10px;
        padding-right: 26px;
        font-size: 12px;
        border-radius: 16px;
    }

    .version-dropdown-button .fa-chevron-down {
        right: 8px;
        font-size: 9px;
    }

    .version-dropdown-menu {
        min-width: 200px;       /* 从 150px 增加到 200px 或更大 */
        width: max-content;     /* 关键：根据内容自适应宽度，不局限于按钮宽度 */
        max-width: 85vw;        /* 限制最大宽度不超过视口宽度的 85%，防止超出屏幕 */
        border-radius: 10px;
        padding: 4px;
    }


    .version-dropdown-item {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 6px;
    }
    
    /* 【新增】限制版本选择器容器宽度，防止挤压发送按钮 */
    .version-dropdown {
        flex: 1 1 auto;        /* 允许收缩和增长 */
        min-width: 60px;       /* 最小不小于60px */
        max-width: calc(100% - 90px); /* 留出空间给上传按钮和联网搜索按钮 */
    }
    
    /* 【新增】限制按钮最大宽度 */
    .version-dropdown-button {
        width: 100%;           /* 填满父容器 */
        max-width: 100%;       /* 不超过父容器 */
        min-width: 60px;       /* 允许比PC端更窄 */
    }
}

@media (max-width: 870px) {
    .version-text {
        max-width: 80px;
    }
}

@media (max-width: 480px) {
    /* 可选：如果空间极度紧张，可以隐藏文字只显示箭头 */
    .version-dropdown-button {
        padding: 0 26px 0 8px; /* 减小左内边距 */
    }
}

/* 版本 quote_cost badge */
.version-quote-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-color, #06b6d4);
    font-weight: 500;
    white-space: nowrap;
}

.version-quote-badge.free {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* 深色模式 */
body.dark-mode .version-quote-badge {
    background: rgba(34, 211, 238, 0.2);
    color: var(--accent-color, #22d3ee);
}

body.dark-mode .version-quote-badge.free {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* ========== Chat 白色体验中心主题 ========== */
body.chat-page {
    --primary-color: #ffffff;
    --secondary-color: #f9f9f9;
    --accent-color: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: #60a5fa;
    --text-primary: #0f0f0f;
    --text-secondary: #6e6e80;
    --text-color: #0f0f0f;
    --text-white: #ffffff;
    --text-white-tran: rgba(15, 15, 15, 0.6);
    --border-color: #e5e5e5;
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --bg-tertiary: #f4f4f4;
    --bg-hover: #f4f4f4;
    background: #ffffff;
}

body.chat-page.dark-mode {
    --primary-color: #212121;
    --secondary-color: #2a2a2a;
    --accent-color: #2563eb;
    --accent-hover: #3b82f6;
    --accent-light: #60a5fa;
    --text-primary: #ececec;
    --text-secondary: #b4b4b4;
    --text-color: #ececec;
    --text-white: #ffffff;
    --text-white-tran: rgba(255, 255, 255, 0.6);
    --border-color: #2f2f2f;
    --bg-primary: #212121;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #2f2f2f;
    --bg-hover: #2f2f2f;
    background: #212121;
}

body.chat-page .app-container {
    background: transparent;
}

body.chat-page .chat-page-sidebar.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

body.chat-page .chat-page-sidebar.sidebar.collapsed .pin-sidebar {
    display: inline-flex;
}

body.chat-page .main-content {
    background: #ffffff;
}

body.chat-page.dark-mode .main-content {
    background: #212121;
}

body.chat-page .welcome-container {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #0f0f0f;
}

body.chat-page.dark-mode .welcome-container {
    background: #212121;
    color: #ececec;
}

body.chat-page .welcome-container::before,
body.chat-page .welcome-container::after {
    content: none;
}

body.chat-page .welcome-logo {
    display: none;
}

body.chat-page.dark-mode .welcome-logo {
    background: transparent;
    border: none;
}

body.chat-page .welcome-title {
    position: relative;
    color: #0f0f0f;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

body.chat-page.dark-mode .welcome-title {
    color: #ececec;
}

body.chat-page .welcome-subtitle,
body.chat-page .typewriter-text {
    position: relative;
    color: #6e6e80;
    font-size: 15px;
    font-weight: 400;
    opacity: 1;
}

body.chat-page.dark-mode .welcome-subtitle,
body.chat-page.dark-mode .typewriter-text {
    color: #b4b4b4;
}

body.chat-page .welcome-chat-box,
body.chat-page .chat-container .input-wrapper {
    width: min(768px, 100%);
    margin: 0 auto;
    border-radius: 26px; /* 与 body.chat-page .input-box 一致 */
}

/* 去掉欢迎页 input-wrapper 的玻璃拟态卡片（基础规则 .welcome-container .input-wrapper） */
body.chat-page .welcome-container .input-wrapper {
    background: transparent;
    border: none;
    border-radius: 26px; /* 与内部 .input-box (26px) 一致，便于裁剪溢出元素 */
    padding: 0;
    backdrop-filter: none;
}

body.chat-page .chat-container {
    background: transparent;
}

body.chat-page .chat-header {
    position: sticky;
    top: 0; /* 顶栏已移除，无需补偿 */
    z-index: 5;
    padding: 12px 24px;
    background: transparent;
    border-bottom: 1px solid #ececec;
    box-shadow: none;
    backdrop-filter: none;
    min-height: 48px;
}

body.chat-page.dark-mode .chat-header {
    background: transparent;
    border-bottom-color: #2a2a2a;
}

body.chat-page .chat-title {
    font-size: 15px;
    font-weight: 600;
}

body.chat-page .chat-actions {
    gap: 8px;
}

body.chat-page .context-usage {
    align-self: center;
    color: #6e6e80;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: default;
}

body.chat-page.dark-mode .context-usage { color: #b4b4b4; }

body.chat-page .chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #6e6e80;
    box-shadow: none;
    font-size: 13px;
}

body.chat-page.dark-mode .chat-action-btn {
    background: transparent;
    border: none;
    color: #b4b4b4;
}

body.chat-page .chat-action-btn:hover {
    background: #ececec;
    border-color: transparent;
    color: #0f0f0f;
    transform: none;
}

body.chat-page .chat-action-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}

body.chat-page .chat-action-btn:disabled:hover {
    background: transparent;
    color: #6e6e80;
}

body.chat-page.dark-mode .chat-action-btn:hover {
    background: #2a2a2a;
    border-color: transparent;
    color: #ececec;
}

body.chat-page .messages-container {
    padding: 32px clamp(16px, 4vw, 24px) 140px;
    gap: 24px;
}

body.chat-page .message {
    width: min(100%, 768px);
    margin: 0 auto;
}

body.chat-page .message-content {
    max-width: 100%;
}

/* ChatGPT 风格：隐藏头像（DOM 保留，选择器逻辑不受影响） */
body.chat-page .message-avatar {
    display: none !important;
}

/* 隐藏消息底部的 发送者·时间 元信息 */
body.chat-page .message-info {
    display: none;
}

/* 助手消息：纯文本，无气泡 */
body.chat-page .message.assistant .message-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: 100%;
}

body.chat-page .message.assistant .message-text {
    font-size: 15px;
    line-height: 1.6;
}

/* 用户消息：柔和灰色气泡，右对齐 */
body.chat-page .message.user .message-content {
    align-items: flex-end;
}

body.chat-page .message.user .message-bubble {
    background: #f4f4f4;
    color: #0f0f0f;
    border: none;
    box-shadow: none;
    border-radius: 18px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.5;
    align-self: flex-end;
    max-width: 80%;
}

body.chat-page.dark-mode .message.user .message-bubble {
    background: #2f2f2f;
    color: #ececec;
}

body.chat-page .message-text a {
    color: #2563eb;
}

/* 消息操作按钮：极简 */
body.chat-page .action-btn {
    background: transparent;
    border: none;
    color: #6e6e80;
    padding: 4px;
    border-radius: 6px;
}

body.chat-page .action-btn:hover {
    background: #ececec;
    border-color: transparent;
    color: #0f0f0f;
}

body.chat-page.dark-mode .action-btn {
    color: #b4b4b4;
}

body.chat-page.dark-mode .action-btn:hover {
    background: #2a2a2a;
    color: #ececec;
}

body.chat-page .thinking-container {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(79, 70, 229, 0.03) 100%);
    border-color: rgba(37, 99, 235, 0.16);
}

body.chat-page .input-container {
    position: sticky;
    bottom: 16px;
    z-index: 6;
    padding: 0 16px 16px;
    background: transparent;
    border-top: none;
    backdrop-filter: none;
}

body.chat-page.dark-mode .input-container {
    background: transparent;
    border-top: none;
}

body.chat-page .input-box {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 26px;
    padding: 12px 14px;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.chat-page.dark-mode .input-box {
    background: #2a2a2a;
    border-color: #2f2f2f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body.chat-page .input-box:focus-within {
    border-color: #d4d4d4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.chat-page.dark-mode .input-box:focus-within {
    border-color: #404040;
}

body.chat-page .input-field {
    color: #0f0f0f;
    font-size: 15px;
    padding: 8px 8px 4px;
    min-height: 28px;
    max-height: 200px;
}

body.chat-page.dark-mode .input-field {
    color: #ececec;
}

body.chat-page .input-field::placeholder {
    color: #8e8e8e;
}

body.chat-page .input-actions {
    height: auto;
    gap: 4px;
    padding: 0 4px;
    justify-content: space-between;
    align-items: center;
}

body.chat-page .input-actions-left {
    gap: 2px;
    flex-wrap: nowrap;
}

/* 极简图标按钮：图片上传 / 参数 / 深度研究 / 工具 */
body.chat-page .image-upload-btn.inside-input,
body.chat-page .model-params-btn,
body.chat-page .deep-research-btn,
body.chat-page .tool-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #6e6e80;
    box-shadow: none;
}

body.chat-page.dark-mode .image-upload-btn.inside-input,
body.chat-page.dark-mode .model-params-btn,
body.chat-page.dark-mode .deep-research-btn,
body.chat-page.dark-mode .tool-call-btn {
    background: transparent;
    border: none;
    color: #b4b4b4;
}

/* 隐藏文字标签（DOM 保留，事件监听绑定在按钮上） */
body.chat-page .model-params-btn span,
body.chat-page .deep-research-btn span,
body.chat-page .tool-call-btn span {
    display: none;
}

body.chat-page .image-upload-btn.inside-input:hover,
body.chat-page .model-params-btn:hover,
body.chat-page .deep-research-btn:hover,
body.chat-page .tool-call-btn:hover {
    background: #ececec;
    border-color: transparent;
    color: #0f0f0f;
    transform: none;
}

body.chat-page.dark-mode .image-upload-btn.inside-input:hover,
body.chat-page.dark-mode .model-params-btn:hover,
body.chat-page.dark-mode .deep-research-btn:hover,
body.chat-page.dark-mode .tool-call-btn:hover {
    background: #353535;
    border-color: transparent;
    color: #ececec;
}

/* 图标颜色跟随文字（覆盖旧的彩色图标） */
body.chat-page .deep-research-btn i,
body.chat-page .tool-call-btn i,
body.chat-page .model-params-btn i,
body.chat-page .image-upload-btn.inside-input i {
    color: inherit;
}

/* 激活态：蓝色淡底 */
body.chat-page .deep-research-btn.active,
body.chat-page .model-params-btn.active,
body.chat-page .tool-call-btn.active {
    background: rgba(37, 99, 235, 0.1);
    border-color: transparent;
    color: #2563eb;
    box-shadow: none;
}

body.chat-page .deep-research-btn.active i,
body.chat-page .model-params-btn.active i,
body.chat-page .tool-call-btn.active i {
    color: #2563eb;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

body.chat-page.dark-mode .deep-research-btn.active,
body.chat-page.dark-mode .model-params-btn.active,
body.chat-page.dark-mode .tool-call-btn.active {
    background: rgba(37, 99, 235, 0.18);
    color: #60a5fa;
}

body.chat-page.dark-mode .deep-research-btn.active i,
body.chat-page.dark-mode .model-params-btn.active i,
body.chat-page.dark-mode .tool-call-btn.active i {
    color: #60a5fa;
}

body.chat-page .image-upload-btn.inside-input:disabled,
body.chat-page .deep-research-btn:disabled,
body.chat-page .tool-call-btn:disabled {
    opacity: 0.45;
    box-shadow: none;
    background: transparent;
}

body.chat-page .send-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: none;
}

body.chat-page .send-button:hover {
    background: #1d4ed8;
    box-shadow: none;
    transform: none;
}

body.chat-page .send-button:disabled {
    background: #d4d4d4;
    color: #8e8e8e;
    opacity: 1;
}

body.chat-page.dark-mode .send-button:disabled {
    background: #404040;
    color: #6e6e6e;
}

body.chat-page .model-selector-wrapper .dropdown-button,
body.chat-page .welcome-container .model-selector-wrapper .dropdown-button {
    background: #ffffff;
    border-color: #e5e5e5;
    box-shadow: none;
}

body.chat-page.dark-mode .model-selector-wrapper .dropdown-button,
body.chat-page.dark-mode .welcome-container .model-selector-wrapper .dropdown-button {
    background: #2a2a2a;
    border-color: #2f2f2f;
}

body.chat-page .scroll-to-bottom-btn {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: #2563eb;
}

body.chat-page.dark-mode .scroll-to-bottom-btn {
    background: #2a2a2a;
    border-color: #2f2f2f;
    color: #60a5fa;
}

body.chat-page .scroll-to-bottom-btn:hover {
    background: #ececec;
}

body.chat-page.dark-mode .scroll-to-bottom-btn:hover {
    background: #353535;
}

@media (max-width: 768px) {
    body.chat-page .chat-header {
        top: 60px; /* 移动端导航栏高度60px */
        padding: 10px 14px;
    }

    body.chat-page .chat-title {
        font-size: 14px;
    }

    body.chat-page .chat-action-btn {
        padding: 6px 8px;
        font-size: 12px;
    }

    body.chat-page .messages-container {
        padding: 24px 12px 120px;
    }

    body.chat-page .message-content {
        max-width: 100%;
    }

    body.chat-page .message.user .message-bubble {
        max-width: 88%;
    }

    body.chat-page .input-container {
        padding: 0 12px 12px;
    }

    body.chat-page .input-box {
        padding: 10px 12px;
        border-radius: 22px;
    }

    body.chat-page .image-upload-btn.inside-input,
    body.chat-page .model-params-btn,
    body.chat-page .deep-research-btn,
    body.chat-page .tool-call-btn,
    body.chat-page .send-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
    }

    body.chat-share-view .chat-header {
        top: 60px !important; /* 移动端导航栏60px */
    }

    body.chat-share-view .messages-container {
        padding-top: 80px !important; /* 移动端避开导航栏+标题栏 */
    }
}

/* ========== 更多有趣网页跳转按钮 ========== */
.interesting-pages-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.interesting-pages-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

.interesting-pages-link:hover::before {
    left: 100%;
}

.interesting-pages-link:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4);
    color: #fff;
}

.interesting-pages-link:active {
    transform: translateY(0) scale(0.98);
}

.interesting-pages-link i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.interesting-pages-link:hover i.fa-arrow-right {
    transform: translateX(3px);
}

.interesting-pages-link:hover i.fa-star {
    transform: rotate(15deg) scale(1.1);
}

/* 深色模式适配 */
body.dark-mode .interesting-pages-link {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

body.dark-mode .interesting-pages-link:hover {
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
}

/* Chat页面特殊样式 */
body.chat-page .interesting-pages-link {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
}

body.chat-page .interesting-pages-link:hover {
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.38);
}

body.chat-page.dark-mode .interesting-pages-link {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.22);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .interesting-pages-link {
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
        margin-top: 8px;
    }

    .interesting-pages-link i {
        font-size: 11px;
    }
}

/* ============================================
   多模型对比回复 (Multi-Model Reply)
   ============================================ */

/* ---- 模型标签行（输入框上方） ---- */
/* ---- 模型标签（紧凑 pill 设计） ---- */
.model-tags-scroll {
    max-height: 8.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.model-tags-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 2px;
    margin-bottom: 10px;
}

.model-tag {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: default;
    white-space: nowrap;
    transition: all 0.15s ease;
    user-select: none;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}

.model-tag:hover {
    border-color: var(--accent-color, #06b6d4);
    background: var(--bg-hover, var(--bg-tertiary, #f4f4f4));
}

.model-tag .tag-left {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    height: 100%;
    flex: 1;
    min-width: 0;
}

.model-tag .tag-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-secondary);
    overflow: hidden;
}

.model-tag .tag-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-tag .tag-avatar .tag-avatar-letter {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.model-tag .tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    min-width: 0;
}

.model-tag .tag-right {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    padding-right: 2px;
}

.model-tag .tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #94a3b8);
    transition: all 0.15s;
    font-size: 14px;
    line-height: 1;
}

.model-tag .tag-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ---- 添加 / 清空 按钮 ---- */
.add-model-tag,
.clear-all-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    transition: all 0.15s;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.add-model-tag {
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #6b7280);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.add-model-tag:hover {
    border-color: var(--accent-color, #06b6d4);
    color: var(--accent-color, #06b6d4);
    background: var(--bg-hover, var(--bg-tertiary, #f4f4f4));
}

.clear-all-tag {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
}

.clear-all-tag:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.clear-all-tag.hidden {
    display: none;
}

/* ---- 合计额度小标签 ---- */
.model-tags-cost {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    height: 28px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.15);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- 输入框左下角额度消耗提示 ---- */
.input-cost-hint {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0 10px;
    height: 28px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.15);
    white-space: nowrap;
    flex-shrink: 0;
}

.input-cost-hint[hidden] {
    display: none;
}

/* ---- 选择器卡片已选中（已在标签中） ---- */
.model-picker-card.selected {
    border-color: var(--accent-color, #06b6d4);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.18);
    background: rgba(6, 182, 212, 0.04);
}

.model-picker-card.selected:hover {
    background: rgba(6, 182, 212, 0.1);
}

body.dark-mode .model-picker-card.selected {
    background: rgba(6, 182, 212, 0.08);
}

body.dark-mode .model-picker-card.selected:hover {
    background: rgba(6, 182, 212, 0.15);
}

/* ---- 选择器底部关闭栏 ---- */
.model-picker-close-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    gap: 12px;
    border-radius: 0 0 16px 16px;
}

.model-picker-close-bar .picker-hint {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

.model-picker-close-bar .model-picker-close-btn {
    padding: 8px 24px;
    border-radius: 10px;
    background: var(--accent-color, #06b6d4);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.model-picker-close-bar .model-picker-close-btn:hover {
    opacity: 0.9;
}

/* ---- 多模型选项卡对比行 ---- */
.multi-model-row {
    width: min(100%, 960px);
    margin: 0 auto 20px auto;
    padding: 0 4px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    /* 已移除 overflow 裁剪：在 messagesContainer flex column 中，
       作为 flex 子项的 overflow 裁剪会导致浏览器按可用空间而非实际内容
       来解析高度，形成隐式高度上限 → 面板无法超越，底部被截断。
       改用选项卡栏自身的 border-radius 裁剪替代。 */
}

/* 网格视图：占满宽度，卡片更大 */
.multi-model-row.grid-view {
    width: 100%;
    max-width: none;
}

/* ---- 选项卡头部栏 ---- */
.multi-model-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px 14px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.multi-model-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    font-family: inherit;
    outline: none;
}

.multi-model-tab:hover {
    color: var(--text-primary, #0f172a);
    background: rgba(0, 0, 0, 0.03);
}

.multi-model-tab.active {
    color: var(--accent-color, #06b6d4);
    border-bottom-color: var(--accent-color, #06b6d4);
    background: var(--bg-primary, #fff);
}

.multi-model-tab.completed {
    /* 完成状态的 tab 不额外着色，由 status 标签表示 */
}

.multi-model-tab .tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.multi-model-tab .tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

.multi-model-tab .tab-status {
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 16px;
    text-align: center;
}

.multi-model-tab .tab-status.streaming {
    color: var(--accent-color, #06b6d4);
    animation: statusPulse 1.5s ease-in-out infinite;
}

.multi-model-tab .tab-status.completed {
    color: #10b981;
}

.multi-model-tab .tab-status.error {
    color: #ef4444;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ---- 视图切换按钮（独立于标签栏，定位在右上角） ---- */
.multi-model-row {
    position: relative;
}

.multi-model-view-toggle {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    outline: none;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.multi-model-view-toggle:hover {
    color: var(--accent-color, #06b6d4);
    background: var(--bg-primary, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 给标签栏留出按钮空间 */
.multi-model-tabs {
    padding-right: 42px;
}

/* ---- 面板网格头部（选项卡模式隐藏，网格模式显示） ---- */
.panel-grid-header {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.panel-grid-header .provider-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.panel-grid-header .column-model-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-grid-header .panel-grid-status {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.panel-grid-header .panel-grid-status.streaming {
    color: var(--accent-color, #06b6d4);
    animation: statusPulse 1.5s ease-in-out infinite;
}

.panel-grid-header .panel-grid-status.completed {
    color: #10b981;
}

.panel-grid-header .panel-grid-status.error {
    color: #ef4444;
}

/* ---- 网格视图覆盖 ---- */
.multi-model-row.grid-view .multi-model-tab {
    display: none;
}

.multi-model-row.grid-view .multi-model-tabs {
    padding-right: 42px;
}

.multi-model-row.grid-view .multi-model-view-toggle {
    /* 保持可见 */
}

.multi-model-row.grid-view .multi-model-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    /* 默认 align-items: stretch：同 row 内 panel 等高，由最高内容决定 row 高度，
       上限由 panel 的 max-height 限制；避免"第二轮 panel 短于第一轮"的压缩感 */
    gap: 14px;
    padding: 12px;
}

.multi-model-row.grid-view .multi-model-panel {
    display: flex !important;
    flex-direction: column;
    /* max-height 限制单行面板高度，避免撑破布局。
       55vh / 650px：1080p ≈ 594px，1440p ≈ 792→650px，大屏不受 500px 硬限 */
    max-height: min(55vh, 650px);
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

/* 网格视图：孤儿面板（在一行内只有自己）占满整行，避免左侧 1 列其余空着的违和感 */
.multi-model-row.grid-view .multi-model-panel.orphan-panel {
    grid-column: 1 / -1;
}

.multi-model-row.grid-view .panel-grid-header {
    display: flex;
    flex-shrink: 0;
}

.multi-model-row.grid-view .multi-model-panel .message.assistant {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #e5e7eb) transparent;
}

.multi-model-row.grid-view .multi-model-panel .message.assistant::-webkit-scrollbar {
    width: 4px;
}

.multi-model-row.grid-view .multi-model-panel .message.assistant::-webkit-scrollbar-thumb {
    background: var(--border-color, #e5e7eb);
    border-radius: 2px;
}

/* 网格视图暗色模式 */
body.dark-mode .multi-model-row.grid-view .multi-model-panel {
    background: var(--bg-primary, #1e293b);
    border-color: var(--border-color, #334155);
}

body.dark-mode .panel-grid-header {
    background: var(--bg-secondary, #0f172a);
    border-bottom-color: var(--border-color, #334155);
}

/* ---- 选项卡内容面板 ---- */
.multi-model-panels {
    position: relative;
}

.multi-model-panel {
    display: none;
    padding: 0;
}

.multi-model-panel.active {
    display: block;
}

/* ---- 面板内的消息样式覆盖 ---- */
.multi-model-panel .message.assistant {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px;
    min-width: 0;
}

.multi-model-panel .message.assistant .message-content {
    max-width: 100% !important;
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.multi-model-panel .message.assistant .message-avatar {
    display: none;
}

.multi-model-panel .message.assistant .message-info {
    font-size: 10px;
    margin-top: 4px;
}

.multi-model-panel .message.assistant .message-actions {
    flex-wrap: wrap;
    gap: 4px;
}

.multi-model-panel .message.assistant .action-btn {
    font-size: 10px;
    padding: 3px 8px;
}

.multi-model-panel .thinking-container {
    margin: 0 0 8px 0;
    max-width: 100%;
}

.multi-model-panel .thinking-content {
    overflow-wrap: break-word;
    word-break: break-word;
    overflow-x: auto;
}

/* ---- 行级操作按钮 ---- */
.multi-model-row-actions {
    display: flex;
    justify-content: stretch;
    gap: 10px;
    margin-top: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.multi-model-row-actions .action-btn {
    flex: 1;
    width: 100%;
    font-size: 12px;
    padding: 8px 14px;
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* ---- 暗色模式：选项卡 ---- */
body.dark-mode .multi-model-row {
    background: var(--bg-primary, #1e293b);
    border-color: var(--border-color, #334155);
}

body.dark-mode .multi-model-tabs {
    background: var(--bg-secondary, #0f172a);
    border-bottom-color: var(--border-color, #334155);
}

body.dark-mode .multi-model-tab {
    color: var(--text-secondary, #94a3b8);
}

body.dark-mode .multi-model-tab:hover {
    color: var(--text-primary, #f1f5f9);
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .multi-model-tab.active {
    color: var(--accent-color, #38bdf8);
    background: var(--bg-primary, #1e293b);
}

body.dark-mode .multi-model-row-actions {
    border-top-color: var(--border-color, #334155);
}

/* ---- 响应式：移动端堆叠 ---- */
@media (max-width: 768px) {
    .multi-model-row {
        width: 100%;
        max-width: none;
        padding: 0 4px;
        border-radius: 12px;
    }

    .multi-model-tab {
        padding: 8px 12px;
        font-size: 11px;
    }

    .multi-model-tab .tab-name {
        max-width: 64px;
    }

    .multi-model-panel .message.assistant {
        padding: 8px 10px;
    }

    .multi-model-row.grid-view .multi-model-panels {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 8px;
    }

    .multi-model-row.grid-view .multi-model-panel {
        max-height: min(60vh, 500px);
    }

    .multi-model-view-toggle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .model-tags-row {
        gap: 6px;
    }

    .model-tags-scroll {
        max-height: 6rem;
    }

    .model-tag {
        height: 32px;
        font-size: 11px;
    }

    .model-tag .tag-left {
        gap: 6px;
        padding-left: 8px;
    }

    .model-tag .tag-avatar {
        width: 20px;
        height: 20px;
    }

    .model-tag .tag-avatar .tag-avatar-letter {
        font-size: 10px;
    }

    .model-tag .tag-name {
        max-width: 64px;
    }

    .model-tag .tag-remove {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .model-tags-cost {
        height: 24px;
        font-size: 10px;
        padding: 0 8px;
    }

    .input-cost-hint {
        height: 24px;
        font-size: 10px;
        padding: 0 8px;
    }

    .add-model-tag,
    .clear-all-tag {
        width: 32px;
        height: 32px;
        font-size: 12px;
        border-radius: 8px;
    }

}

/* ========== 会话加载骨架屏 ========== */

.message-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary, #f3f4f6);
    flex-shrink: 0;
}

.skeleton-lines {
    flex: 1;
    min-width: 0;
}

.skeleton-line {
    height: 13px;
    border-radius: 4px;
    background: var(--bg-secondary, #f3f4f6);
    margin-bottom: 8px;
}

.skeleton-line:last-child {
    margin-bottom: 0;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========== 消息分页加载按钮 ========== */

.load-older-btn-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
}

.load-older-btn {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.load-older-btn:hover {
    color: var(--accent-color, #6366f1);
    border-color: var(--accent-color, #6366f1);
    background: var(--bg-primary, #fff);
}

/* ========== 键盘快捷键提示 ========== */

.shortcut-hints {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    opacity: 0.6;
    transition: opacity 0.2s ease;
    user-select: none;
    flex-wrap: wrap;
}

.shortcut-hints:hover {
    opacity: 1;
}

.shortcut-hint-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.shortcut-hint-item kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 3px;
    line-height: 1.4;
}

.shortcut-hint-sep {
    color: var(--text-tertiary, #d1d5db);
    font-size: 10px;
}

/* 移动端隐藏快捷键提示 */
@media (max-width: 768px) {
    .shortcut-hints {
        display: none;
    }
}

/* ── 图片生成工具卡片 ── */

.image-gen-card {
    max-width: 480px;
    margin: 12px 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-tertiary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    transition: all 0.3s ease;
}

.image-gen-card.completed {
    border-color: transparent;
    background: transparent;
}

.image-gen-card.failed {
    border-color: var(--error-color, #ef4444);
    background: rgba(239, 68, 68, 0.04);
}

/* 加载动画容器 */
.image-gen-loading {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f5f0eb 0%, #e8ddd0 50%, #f0e8dc 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 脉冲半色调动画 */
.image-gen-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(180, 150, 120, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(160, 130, 100, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(200, 170, 140, 0.1) 0%, transparent 70%);
    animation: image-gen-pulse 2s ease-in-out infinite;
}

.image-gen-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 60% 30%, rgba(190, 160, 130, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 30% 70%, rgba(170, 140, 110, 0.1) 0%, transparent 40%);
    animation: image-gen-pulse 2s ease-in-out 0.5s infinite;
}

@keyframes image-gen-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* 加载动画内部文字 */
.image-gen-loading-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 24px;
}

.image-gen-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 3px solid rgba(139, 92, 246, 0.15);
    border-top-color: rgba(139, 92, 246, 0.7);
    border-radius: 50%;
    animation: image-gen-spin 1s linear infinite;
}

@keyframes image-gen-spin {
    to { transform: rotate(360deg); }
}

.image-gen-status-text {
    font-size: 15px;
    font-weight: 600;
    color: #4a3728;
    margin-bottom: 8px;
}

.image-gen-prompt {
    font-size: 12px;
    color: #6b5e4f;
    opacity: 0.8;
    margin-bottom: 6px;
    max-width: 360px;
    line-height: 1.4;
}

.image-gen-model {
    font-size: 11px;
    color: #8b7355;
    opacity: 0.6;
    font-weight: 500;
}

/* 生成完成的图片 */
.image-gen-img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease;
}

.image-gen-img:hover {
    transform: scale(1.01);
}

/* 操作按钮 */
.image-gen-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

.image-gen-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--accent-color, #8b5cf6);
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.image-gen-download-btn:hover {
    background: var(--accent-hover, #7c3aed);
    color: #fff;
    text-decoration: none;
}

/* 覆盖 .message-text a 的链接色，确保下载按钮文字始终为白色 */
body.chat-page .message-text .image-gen-download-btn,
body.chat-page .message-text .image-gen-download-btn:hover,
body.chat-page .message-text .image-gen-download-btn:visited,
.message-text .image-gen-download-btn,
.message-text .image-gen-download-btn:hover,
.message-text .image-gen-download-btn:visited {
    color: #fff;
}

/* 消息气泡内嵌生成图片（无需展开工作过程即可看到） */
.generated-images-inline {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.generated-image-item {
    max-width: 480px;
}

.generated-image-item .image-gen-img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease;
}

.generated-image-item .image-gen-img:hover {
    transform: scale(1.01);
}

.generated-image-item .image-gen-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

/* 消息气泡内嵌生成图片 - 加载占位符 */
.generated-image-item.image-gen-placeholder .image-gen-loading {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f5f0eb 0%, #e8ddd0 50%, #f0e8dc 100%);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.generated-image-item.image-gen-placeholder .image-gen-loading-inner {
    text-align: center;
    z-index: 1;
}

.generated-image-item.image-gen-placeholder .image-gen-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: var(--accent-color, #8b5cf6);
    border-radius: 50%;
    animation: image-gen-spin 1s linear infinite;
    margin: 0 auto 8px;
}

.generated-image-item.image-gen-placeholder .image-gen-status-text {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* 错误状态 */
.image-gen-error-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--error-color, #ef4444);
    font-size: 13px;
}

.image-gen-error-content i {
    font-size: 18px;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
    .image-gen-loading {
        background: linear-gradient(135deg, #2a2520 0%, #252018 50%, #2a2420 100%);
    }
    .image-gen-status-text {
        color: #d4c5b2;
    }
    .image-gen-prompt {
        color: #8b7d6b;
    }
    .image-gen-model {
        color: #6b5f4d;
    }
    .image-gen-card {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* 消息内文本附件 */
.message-file-attachments {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.file-attachment-frame {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary, #f9fafb);
    transition: border-color 0.2s;
}
.file-attachment-frame:hover {
    border-color: var(--accent-light, #818cf8);
}
.file-attachment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    gap: 8px;
}
.file-attachment-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.file-attachment-toggle {
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.file-attachment-frame[data-expanded="true"] .file-attachment-toggle {
    transform: rotate(90deg);
}
.file-attachment-icon {
    font-size: 14px;
    color: var(--accent-color, #6366f1);
    flex-shrink: 0;
}
.file-attachment-name {
    font-size: 13px;
    color: var(--text-primary, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-attachment-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.file-attachment-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.file-attachment-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent-color, #6366f1);
}
/* 文件内容默认折叠 */
.file-attachment-content {
    display: none;
    border-top: 1px solid var(--border-color, #e5e7eb);
    max-height: 260px;
    overflow-y: auto;
}
.file-attachment-frame[data-expanded="true"] .file-attachment-content {
    display: block;
}
.file-attachment-content pre {
    margin: 0;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1f2937);
    border: none;
    border-radius: 0;
}
.file-attachment-content code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
}

/* OSS 占位 & 空内容 */
.file-attachment-oss-loading {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-secondary, #666);
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 6px;
    text-align: center;
}
.file-attachment-oss-loading a {
    color: var(--link-color, #1890ff);
    text-decoration: underline;
}
.file-attachment-empty {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-tertiary, #999);
    text-align: center;
}

/* 深色模式适配 */
body.dark-mode .file-attachment-frame {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
body.dark-mode .file-attachment-frame:hover {
    border-color: rgba(129, 140, 248, 0.4);
}
body.dark-mode .file-attachment-content {
    border-top-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .file-attachment-content pre {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.85);
}
body.dark-mode .file-attachment-name {
    color: rgba(255, 255, 255, 0.8);
}
body.dark-mode .file-attachment-btn:hover {
    background: rgba(129, 140, 248, 0.12);
}

/* ── 输入工具栏（模型选择 + 深度研究子类型） ──────────────────── */
.input-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.toolbar-model { flex-shrink: 0; }
.toolbar-subtype { flex-shrink: 0; }

/* ── 深度研究子类型选择器 ────────────────────────────────────── */
.dr-subtype-selector {
    display: flex;
    gap: 6px;
    padding: 6px 4px 0;
    align-items: center;
    flex-wrap: wrap;
}
.dr-subtype-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.dr-subtype-btn:hover {
    background: #f3f4f6;
    color: #374151;
}
.dr-subtype-btn.active {
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    border-color: #a78bfa;
    color: #6d28d9;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(139,92,246,0.15);
}
.dr-subtype-btn i {
    font-size: 11px;
}
.dr-subtype-btn[data-type="literature"].active {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #60a5fa;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(59,130,246,0.15);
}
.dr-subtype-btn[data-type="financial"].active {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    border-color: #34d399;
    color: #047857;
    box-shadow: 0 1px 3px rgba(16,185,129,0.15);
}
.dr-subtype-btn[data-type="general"].active {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border-color: #fbbf24;
    color: #b45309;
    box-shadow: 0 1px 3px rgba(245,158,11,0.15);
}

body.dark-mode .dr-subtype-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-mode .dr-subtype-btn:hover {
    background: #2d3748;
    color: #d1d5db;
}
body.dark-mode .dr-subtype-btn.active {
    background: #312e81;
    border-color: #818cf8;
    color: #c7d2fe;
    box-shadow: 0 1px 3px rgba(99,102,241,0.25);
}
body.dark-mode .dr-subtype-btn[data-type="literature"].active {
    background: #1e3a8a;
    border-color: #60a5fa;
    color: #bfdbfe;
}
body.dark-mode .dr-subtype-btn[data-type="financial"].active {
    background: #064e3b;
    border-color: #34d399;
    color: #a7f3d0;
}
body.dark-mode .dr-subtype-btn[data-type="general"].active {
    background: #78350f;
    border-color: #fbbf24;
    color: #fde68a;
}

/* 子类型标签在历史回放时的徽章 */
.dr-subtype-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}
.dr-subtype-badge[data-type="general"] {
    background: #fef3c7;
    color: #b45309;
}
.dr-subtype-badge[data-type="literature"] {
    background: #dbeafe;
    color: #1d4ed8;
}
.dr-subtype-badge[data-type="financial"] {
    background: #d1fae5;
    color: #047857;
}
body.dark-mode .dr-subtype-badge[data-type="general"] {
    background: #78350f;
    color: #fde68a;
}
body.dark-mode .dr-subtype-badge[data-type="literature"] {
    background: #1e3a8a;
    color: #bfdbfe;
}
body.dark-mode .dr-subtype-badge[data-type="financial"] {
    background: #064e3b;
    color: #a7f3d0;
}

/* ========== 游客模式 ========== */
.guest-mode-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 0 auto 14px;
    max-width: 720px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
    font-size: 13px;
    color: #4338ca;
    line-height: 1.5;
}
.guest-mode-banner i {
    color: #6366f1;
    font-size: 16px;
    flex-shrink: 0;
}
.guest-mode-banner span {
    flex: 1;
}
.guest-mode-login-link {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s;
}
.guest-mode-login-link:hover {
    color: #4338ca;
    text-decoration: underline;
}
.guest-sidebar-empty {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    background: transparent;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    margin: 12px 8px;
}
.model-picker-tag.tag-login-required {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

body.dark-mode .guest-mode-banner {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.12));
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
}
body.dark-mode .guest-mode-banner i {
    color: #a5b4fc;
}
body.dark-mode .guest-mode-login-link {
    color: #a5b4fc;
}
body.dark-mode .guest-mode-login-link:hover {
    color: #c7d2fe;
}
body.dark-mode .guest-sidebar-empty {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.3);
}
body.dark-mode .model-picker-tag.tag-login-required {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.4);
}

/* ===== 采样参数折叠组 ===== */
.model-param-group {
    margin-top: 4px;
}
.model-param-group-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    box-sizing: border-box;
}
.model-param-group-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}
.model-param-group-toggle:focus {
    outline: none;
}
.model-param-group-toggle:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 1px;
}
.model-param-group-toggle .chevron {
    font-size: 11px;
    transition: transform 200ms ease;
}
.model-param-group-toggle[aria-expanded="false"] .chevron {
    transform: rotate(-90deg);
}
.model-param-group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: auto;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.model-param-group-badge[hidden] {
    display: none;
}
.model-param-group-body[hidden] {
    display: none;
}
.model-param-group-body {
    padding-top: 4px;
}
body.dark-mode .model-param-group-toggle {
    color: #cbd5e1;
}
body.dark-mode .model-param-group-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}
.custom-dropdown.agent-model-locked { opacity: .72; }
.custom-dropdown.agent-model-locked .dropdown-button { cursor: not-allowed; }

/* ===== 空会话上下文导入 ===== */
.context-import-modal-content { max-width: 640px; }
.context-import-desc { margin: 0 0 16px; color: #64748b; line-height: 1.65; }
.context-import-text {
    display: block;
    width: 100%;
    min-height: 240px;
    padding: 12px 14px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #dbe1ea;
    border-radius: 10px;
    color: #1e293b;
    font: inherit;
    line-height: 1.6;
    outline: none;
}
.context-import-text:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.context-import-hint { margin: 8px 0 0; color: #94a3b8; font-size: 12px; text-align: right; }
body.dark-mode .context-import-desc { color: #a7b1c2; }
body.dark-mode .context-import-text { background: #1e293b; border-color: #475569; color: #e2e8f0; }

/* ===== 会话内持久化错误卡片（替代 ErrorModal 弹窗 / 自动消失 toast） ===== */
.chat-error-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    animation: chatErrorCardIn 0.28s ease-out;
}

.chat-error-row.is-leaving,
.chat-error-card.is-leaving {
    animation: chatErrorCardOut 0.2s ease-in forwards;
}

.chat-error-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}

.chat-error-row.is-warning .chat-error-avatar {
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
}

.chat-error-main {
    flex: 1;
    min-width: 0;
    max-width: min(100%, 720px);
    display: flex;
    flex-direction: column;
}

.chat-error-card {
    --chat-error-accent: #dc2626;
    --chat-error-accent-hover: #b91c1c;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    text-align: left;
    word-break: break-word;
}

.chat-error-card.is-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.08);
}

.chat-error-card.is-warning {
    --chat-error-accent: #ea580c;
    --chat-error-accent-hover: #c2410c;
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.08);
}

.chat-error-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-error-icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.chat-error-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}

.chat-error-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: 0.5;
    font-size: 13px;
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.chat-error-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.07);
}

.chat-error-body {
    white-space: pre-wrap;
}

.chat-error-hint {
    font-size: 12px;
    opacity: 0.82;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.chat-error-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.chat-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.chat-error-btn i {
    font-size: 12px;
}

.chat-error-btn.is-primary {
    background: var(--chat-error-accent);
    color: #ffffff;
}

.chat-error-btn.is-primary:hover:not(:disabled) {
    background: var(--chat-error-accent-hover);
}

.chat-error-btn.is-primary:disabled {
    cursor: progress;
    opacity: 0.75;
}

.chat-error-btn.is-ghost {
    border-color: rgba(0, 0, 0, 0.14);
    background: rgba(255, 255, 255, 0.6);
}

.chat-error-btn.is-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
}

.chat-error-btn.is-link {
    padding: 6px 4px;
    opacity: 0.78;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-error-btn.is-link:hover {
    opacity: 1;
}

.chat-error-details pre {
    margin: 0;
    padding: 10px 12px;
    max-height: 220px;
    overflow: auto;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

@keyframes chatErrorCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chatErrorCardOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}

body.dark-mode .chat-error-card.is-error {
    background: rgba(127, 29, 29, 0.3);
    border-color: rgba(248, 113, 113, 0.42);
    color: #fecaca;
    box-shadow: none;
}

body.dark-mode .chat-error-card.is-warning {
    background: rgba(124, 45, 18, 0.3);
    border-color: rgba(251, 146, 60, 0.42);
    color: #fed7aa;
    box-shadow: none;
}

body.dark-mode .chat-error-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .chat-error-btn.is-ghost {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .chat-error-btn.is-ghost:hover {
    background: rgba(255, 255, 255, 0.14);
}

body.dark-mode .chat-error-details pre {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    .chat-error-row {
        gap: var(--spacing-sm);
    }

    .chat-error-main {
        max-width: 100%;
    }

    .chat-error-card {
        padding: 12px 13px;
    }
}

/* ===== 上游自动重试提示（SSE type=retry，挂在回复气泡内） ===== */
.stream-retry-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 4px 0 2px;
    padding: 6px 10px;
    border: 1px dashed #fcd34d;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.14);
    color: #b45309;
    font-size: 12.5px;
    line-height: 1.5;
}

.stream-retry-notice i {
    font-size: 12px;
}

body.dark-mode .stream-retry-notice {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(120, 53, 15, 0.28);
    color: #fcd34d;
}

/* ===== 界面质感细节层 ===== */

/* 暗色降一档：黑底白字的光晕会让同一字重看起来比亮色更粗 */
body.chat-page {
    font-weight: var(--fw-text);
}

body.chat-page.dark-mode {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.chat-page .message-text {
    font-weight: var(--fw-text);
}

body.chat-page .message-text :is(h1, h2, h3, h4, h5, h6, strong, b) {
    font-weight: var(--fw-strong);
}

body.chat-page :is(.chat-title, .thinking-header, .work-process-header) {
    font-weight: var(--fw-strong);
}

/* 排版保护：正文最后一行不再只剩孤零零一个字 */
body.chat-page .message-text :is(p, li, blockquote, td) {
    text-wrap: pretty;
}

body.chat-page .message-text :is(h1, h2, h3) {
    text-wrap: balance;
}

/* 行内图标下移约 1/8 字高，图标中心与文字基线咬合 */
body.chat-page .message-text :is(p, li, td, blockquote) :is(i, svg, .fa):not(.fa-spin) {
    vertical-align: -0.125em;
}

/* 等宽数字锁死：计时器、额度、百分比跳动时不会左右乱晃 */
body.chat-page :is(.message-info, .context-usage, .upload-percent, .tab-status, .panel-grid-status, .thinking-header) {
    font-variant-numeric: tabular-nums;
}

/* 输入框聚焦：双环阴影整体加深，不出突兀亮线 */
body.chat-page .input-box:focus-within {
    border-color: #dcdcdc;
    box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.06), 0 0 0 4px rgba(15, 15, 15, 0.035), 0 2px 10px rgba(15, 15, 15, 0.07);
}

body.chat-page.dark-mode .input-box:focus-within {
    border-color: #3a3a3a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 4px rgba(255, 255, 255, 0.025), 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* 流式正文：每个字从高斯模糊瞬间对焦，相邻字错开几十毫秒连成波浪 */
.message-text .streaming-text .ink {
    animation: ink-in 260ms var(--ease-soft) backwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes ink-in {
    from {
        opacity: 0;
        filter: blur(3.5px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* 复制成功：欠阻尼微弹，不是生硬地换个图标 */
.copy-code-btn.copied,
.download-code-btn.downloaded,
.action-btn.success {
    animation: pop-check 320ms var(--ease-spring);
}

@keyframes pop-check {
    0% { transform: scale(0.72); }
    55% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .message-text .streaming-text .ink {
        animation: none;
        filter: none;
        opacity: 1;
    }

    .copy-code-btn.copied,
    .download-code-btn.downloaded {
        animation: none;
    }

    .thinking-container,
    .thinking-content,
    .thinking-toggle-icon {
        transition: none;
    }
}