.main-chat { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }

.chat-header {
    display: flex; justify-content: space-between; align-items: center; padding: 16px 40px;
    background: var(--glass-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border); z-index: 5; flex-shrink: 0;
    position: relative;
}
.chat-header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    pointer-events: none;
}
.chat-header h3 { font-size: 16px; font-weight: 600; text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 20px; letter-spacing: -0.2px; }
.chat-token-counter {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}
.chat-token-counter.over-limit { color: var(--danger); font-weight: 600; }
.clear-chat-btn {
    background: var(--surface-1); border: 1px solid var(--border-soft); padding: 7px 13px; border-radius: 999px; cursor: pointer;
    font-size: 12px; color: var(--text-secondary); transition: var(--transition-interactive); display: flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: 0.1px;
}
.clear-chat-btn:hover { background: var(--surface-hover); border-color: var(--border-mid); color: var(--text-primary); }
.clear-chat-btn:active { transform: scale(0.96); transition-duration: var(--duration-press); }
.clear-chat-btn svg { width: 14px; height: 14px; fill: currentColor; }

.chat-messages {
    flex: 1 1 auto; min-height: 0; padding: 40px 88px 40px 40px; overflow-y: auto; scroll-behavior: smooth;
    display: flex; flex-direction: column; gap: 24px;
    position: relative; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.chat-messages.switching-out {
    opacity: 0.92;
    transition: opacity 100ms var(--ease-standard);
}
/* Empty-state welcome shown when no messages exist (CSS-only since chat list/messenging are JS-driven) */
.chat-messages:empty::before {
    content: '开始一段新对话';
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text-muted);
    text-align: center;
    margin: auto;
    padding: 40px 20px;
    opacity: 0.75;
    display: block;
    user-select: none;
}

.scroll-bottom-btn {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 42px;
    height: 42px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-mid), var(--overlay-hairline);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.85);
    transition:
        opacity var(--duration-micro) var(--ease-standard),
        transform var(--duration-micro) var(--ease-standard),
        background-color var(--duration-micro) var(--ease-standard),
        box-shadow var(--duration-micro) var(--ease-standard),
        border-color var(--duration-micro) var(--ease-standard),
        visibility var(--duration-micro);
    z-index: 10;
}
.scroll-bottom-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    animation: scrollBtnFadeIn var(--duration-enter) var(--ease-out-expo) both;
}
@keyframes scrollBtnFadeIn {
    from { opacity: 0; transform: translateY(-50%) scale(0.85); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}
.scroll-bottom-btn.show:hover {
    background: var(--surface-3);
    transform: translateY(calc(-50% - 1px)) scale(1.04);
    box-shadow: var(--shadow-strong), var(--overlay-hairline);
    border-color: var(--border-mid);
}
.scroll-bottom-btn.show:active {
    transform: translateY(-50%) scale(0.94);
    transition-duration: var(--duration-press);
}
.scroll-bottom-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--text-secondary);
    transition: fill var(--duration-micro) var(--ease-standard);
}
.scroll-bottom-btn.show:hover svg { fill: var(--text-primary); }

.message-wrapper {
    position: relative; display: flex; flex-direction: column; max-width: 80%;
}
.message-wrapper.animate-enter {
    will-change: transform, opacity;
    animation: msgFadeIn var(--duration-enter) var(--ease-standard) both;
}
.message-wrapper.user.animate-enter {
    animation-name: msgSlideInRight;
}
.message-wrapper.stagger-enter {
    will-change: transform, opacity;
    animation: msgFadeIn var(--duration-enter) var(--ease-standard) both;
    animation-delay: calc(min(var(--stagger-index, 0), 8) * var(--duration-stagger));
}
.message-wrapper.user.stagger-enter {
    animation-name: msgSlideInRight;
}
.message-wrapper.user { align-self: flex-end; align-items: flex-end; }
.message-wrapper.bot { align-self: flex-start; align-items: flex-start; }

.load-more-history-btn {
    align-self: center;
    padding: 8px 18px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.1px;
    transition: var(--transition-interactive);
    box-shadow: var(--shadow-soft), var(--overlay-hairline);
    animation: fadeScaleIn var(--duration-enter) var(--ease-out-expo) both;
}
.load-more-history-btn:hover { background: var(--surface-hover); border-color: var(--border-mid); color: var(--text-primary); transform: translateY(-1px); box-shadow: var(--shadow-mid), var(--overlay-hairline); }
.load-more-history-btn:active { transform: translateY(0) scale(0.97); transition-duration: var(--duration-press); }
.load-more-history-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.message {
    padding: 14px 18px; border-radius: var(--radius-lg); font-size: 15px; line-height: 1.65;
    word-wrap: break-word; width: 100%; overflow: hidden; min-width: 0;
    -webkit-text-size-adjust: 100%;
}

.message.user {
    background-image: var(--message-user-bg);
    color: var(--message-user-text);
    border-bottom-right-radius: 5px;
    box-shadow: var(--message-user-shadow);
    background-color: transparent;
}
.message.bot {
    background-color: var(--message-bot-bg);
    color: var(--message-bot-text);
    border-bottom-left-radius: 5px;
    border: 1px solid var(--message-bot-border);
    box-shadow: var(--message-bot-shadow);
}
.message.bot.result-streaming .stream-new-chunk {
    animation: textPopIn 280ms var(--ease-standard) both;
}
.message img { max-width: 100%; border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--message-bot-border); }
.message.user img { border-color: rgba(255,255,255,0.18); }

.message-actions { display: flex; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity var(--duration-micro) var(--ease-standard), transform var(--duration-micro) var(--ease-standard); transform: translateY(-2px); align-items: center; }
.message-wrapper:hover .message-actions { opacity: 1; transform: translateY(0); }
.message-wrapper.bot .message-actions { align-self: stretch; min-width: 280px; }
.action-icon {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: var(--text-tertiary); transition: var(--transition-interactive);
}
.action-icon:hover { background: var(--surface-hover); border-color: var(--border-soft); color: var(--text-primary); }
.action-icon:active { transform: scale(0.88); transition-duration: var(--duration-press); }
.action-icon svg { width: 14px; height: 14px; fill: currentColor; }

.message-actions .action-spacer { flex: 1; }
.action-icon.status-icon.no-need { opacity: 0.5; }
.action-icon.status-icon.read-only { cursor: default; }
.action-icon.status-icon.read-only:hover { background: transparent; border-color: transparent; }
.action-icon.status-translate.translated { color: #16a34a; }
.action-icon.status-translate.translated:hover { color: #16a34a; }
.action-icon.status-polish.polished { color: #16a34a; }
.action-icon.status-polish.polished:hover { color: #16a34a; }
.action-icon.status-undo-polish { color: var(--text-muted); }
.action-icon.status-undo-polish:hover { color: #dc2626; }
.action-icon.status-refuse-check.checked { color: #16a34a; }
.action-icon.status-refuse-check.unchecked { color: var(--danger, #dc2626); }
.action-icon.status-tts.speaking { color: var(--accent, #2563eb); }
.action-icon.status-tts.speaking:hover { color: var(--accent, #2563eb); }
@keyframes ttsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.action-icon.status-tts.speaking svg { animation: ttsPulse 1.1s var(--ease-standard, ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .action-icon.status-tts.speaking svg { animation: none; } }

.message-wrapper:has(.edit-area) { max-width: 100%; width: 100%; }
.edit-area { width: 100%; min-width: 600px; min-height: 240px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-family: inherit; font-size: 15px; resize: vertical; margin-bottom: 10px; outline: none; background: var(--surface-1); color: var(--text-primary); line-height: 1.6; box-shadow: var(--shadow-soft); }
.edit-actions { display: flex; gap: 10px; justify-content: flex-end; width: 100%; }


.markdown-body { font-family: inherit; }
.markdown-body .DOMD-Root { --domd-base-100: transparent; --domd-base-200: rgba(0,0,0,0.04); --domd-base-300: rgba(0,0,0,0.08); --domd-base-content: currentColor; --domd-font-size-base: 1em; color: inherit; }
.markdown-body .DOMD-Root > :first-child { padding-top: 0; margin-top: 0; }
.markdown-body .DOMD-Root > :last-child { margin-bottom: 0; padding-bottom: 0; }
.markdown-body p { margin-bottom: 1em; } .markdown-body p:last-child { margin-bottom: 0; }
.markdown-body code { background-color: var(--inline-code-bg); padding: 0.15em 0.45em; border-radius: 5px; font-family: var(--font-mono); font-size: 0.88em; }
.message.user .markdown-body code { background-color: var(--inline-code-bg-on-user); }
.markdown-body pre { background-color: var(--code-bg); padding: 14px 14px 14px 16px; border-radius: var(--radius-md); overflow-x: auto; overflow-wrap: break-word; word-break: break-word; margin: 1em 0; border: 1px solid var(--code-border); max-width: 100%; position: relative; }
.markdown-body pre code { background-color: transparent; padding: 0; color: var(--code-text); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; font-family: var(--font-mono); font-size: 0.86em; line-height: 1.55; }

.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-micro) var(--ease-standard), background-color var(--duration-micro) var(--ease-standard), color var(--duration-micro) var(--ease-standard);
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.markdown-body pre:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.95); }
.code-copy-btn.copied { color: #4ade80; border-color: rgba(74,222,128,0.4); }
.code-copy-btn svg { fill: currentColor; }

.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0.5em 0; }
.markdown-body ul { list-style-type: disc; }
.markdown-body ol { list-style-type: decimal; }
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body li > ul, .markdown-body li > ol { margin: 0.25em 0; }

.markdown-body table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.95em; border-radius: var(--radius-sm); overflow: hidden; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border-soft); padding: 8px 12px; text-align: left; }
.markdown-body th { background: var(--surface-3); font-weight: 600; }
.message.user .markdown-body th, .message.user .markdown-body td { border-color: var(--border-mid); }
.message.user .markdown-body th { background: rgba(255,255,255,0.08); }

.result-thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}
.result-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    animation: resultThinkingBounce 1.4s ease-in-out infinite both;
}
.result-thinking span:nth-child(1) { animation-delay: -0.32s; }
.result-thinking span:nth-child(2) { animation-delay: -0.16s; }
.result-thinking span:nth-child(3) { animation-delay: 0s; }

.result-streaming::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.15em;
    background: var(--text-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: resultStreamingCursor 0.6s step-end infinite;
    border-radius: 1px;
}

.error-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger-strong);
    font-size: 14px;
    line-height: 1.55;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--danger) 4%, transparent), var(--shadow-soft);
    animation: slideUpFade var(--duration-enter) var(--ease-out-expo) both;
}
.error-message svg { flex-shrink: 0; margin-top: 1px; fill: var(--danger); }
.error-message span { word-break: break-word; }

.search-toggle-btn {
    background: transparent; border: none; cursor: pointer; padding: 7px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; transition: var(--transition-interactive);
    color: var(--text-secondary);
}
.search-toggle-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.search-toggle-btn:active { transform: scale(0.92); transition-duration: var(--duration-press); }
.search-toggle-btn svg { width: 18px; height: 18px; fill: currentColor; }

.search-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 40px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
    animation: slideUpFade var(--duration-micro) var(--ease-standard) both;
}
.search-bar.active { display: flex; }
.search-bar-icon { width: 16px; height: 16px; fill: var(--text-muted); flex-shrink: 0; margin-left: 4px; }
.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
    padding: 4px 0;
}
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar-close {
    background: transparent; border: none; cursor: pointer;
    font-size: 18px; color: var(--text-muted); padding: 2px 8px;
    border-radius: 6px; line-height: 1; transition: var(--transition-interactive);
}
.search-bar-close:hover { color: var(--text-primary); background: var(--surface-hover); }
.search-bar-count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    padding: 0 8px;
    background: var(--surface-hover);
    border-radius: 999px;
    height: 20px;
    display: flex;
    align-items: center;
}

.message-wrapper.search-hidden { display: none; }
.message-wrapper.search-highlight .message { outline: 2px solid var(--accent-color); outline-offset: -2px; border-radius: var(--radius-md); }

/* 自动重试：气泡线性缩小到初始生成状态 */
.message-wrapper.bubble-resetting {
    transform-origin: top left;
    animation: bubbleResetShrink var(--duration-exit) linear forwards;
}
.message-wrapper.bubble-resetting .message-actions { display: none !important; }
.message-wrapper.bubble-reenter {
    transform-origin: top left;
    animation: bubbleResetExpand var(--duration-enter) var(--ease-out-expo) both;
}