/* 搜索聊天记录模态框动画效果 */
#searchHistoryModal {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

#searchHistoryModal:not(.hidden) {
    opacity: 1;
}

#searchHistoryModal > div {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#searchHistoryModal:not(.hidden) > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    animation: modalSlideIn 0.3s ease-out forwards;
}

/* 帮助模态框动画效果 */
#helpModal {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

#helpModal:not(.hidden) {
    opacity: 1;
}

#helpModal > div {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#helpModal:not(.hidden) > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    animation: modalSlideIn 0.3s ease-out forwards;
}

/* 赞助确认模态框动画效果 */
#donateModal {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

#donateModal[style*="display: flex"] {
    opacity: 1;
}

#donateModal > div {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#donateModal[style*="display: flex"] > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    animation: modalSlideIn 0.3s ease-out forwards;
}

/* 二维码模态框动画效果 */
#qrModal {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

#qrModal[style*="display: flex"] {
    opacity: 1;
}

#qrModal > div {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#qrModal[style*="display: flex"] > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    animation: modalSlideIn 0.3s ease-out forwards;
}

/* 图片预览容器动画效果 */
#imagePreviewContainer {
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

/* 初始状态（未添加或已移除hidden类） */
#imagePreviewContainer {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
}

/* 显示状态 */
#imagePreviewContainer:not(.hidden) {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    animation: popIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 隐藏中状态（用于平滑过渡） */
#imagePreviewContainer.hiding {
    opacity: 0;
    transform: scale(0.95) translateY(5px);
    pointer-events: none;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(5px);
    }
}

@keyframes slideUpIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    70% {
        transform: translateY(5px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .hover-scale {
        transition: transform 0.2s ease;
    }
    .hover-scale:hover {
        transform: scale(1.03);
    }
    .emoji {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        margin: 0 2px;
        transition: transform 0.2s ease;
    }
    .emoji:hover {
        transform: scale(1.2);
    }
    /* 基础图片样式 - 全局统一设置 */
    .chat-image {
        max-width: 85% !important;
        height: auto !important;
        border-radius: 16px;
        margin: 8px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* 电脑端图片大小优化 - 确保图片不会太大 */
    @media (min-width: 1024px) {
        .chat-image {
            max-width: 80% !important;
        }
    }

    .chat-image-container {
        display: inline-block;
        position: relative;
        transition: transform 0.2s ease;
    }

    /* 为联网搜索的图片添加水印 - 只在AI消息中显示 */
    .message:not(.justify-end) .chat-image-container::after {
        content: "本图片为Ai联网搜索出，若侵犯权益请见谅";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        transform: rotate(-45deg);
        z-index: 1;
        pointer-events: none;
        white-space: nowrap;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* 深色模式下的水印样式调整 */
    .dark-mode .message:not(.justify-end) .chat-image-container::after {
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    .chat-image-container:hover {
        transform: scale(1.02);
    }
    
    /* 隐藏图片消息中的文字描述，但保留图片显示 */
    .bg-primary:has(.chat-image-container) p {
        display: none;
    }
    
    /* 为图片消息添加特定样式，确保更好的兼容性 */
    .image-only-message p {
        display: none !important;
    }
    
    /* 为纯图片消息添加适当的内边距 */
    .image-only-message {
        padding: 4px !important;
    }
    
    .image-hidden-tip {
        max-width: 280px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
        color: #666;
        font-size: 14px;
        text-align: center;
        padding: 20px;
        border-radius: 16px;
        border: 1px solid #ddd;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .dark-mode .image-hidden-tip {
        background-color: #3C3C3C;
        color: #aaa;
        border-color: #424242;
    }
    .current-contact {
    background-color: #FFF8FB !important;
    border-left: 3px solid #f19daa !important;
}

.dark-mode .current-contact {
    background-color: rgba(241, 157, 170, 0.15) !important;
    border-left: 3px solid #f19daa !important;
}

.math-box {
        display: inline-block;
        padding: 2px 6px;
        background: #FFF8FB;
        border: 1px solid #ff69b4;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(255,105,180,0.2);
    }
    .math-frac {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        vertical-align: middle;
        margin: 0 2px;
    }
    .math-frac .numerator {
        border-bottom: 1px solid #ff69b4;
        padding: 0 4px;
    }
    .math-frac .denominator {
        padding: 0 4px;
    }
    .chat-heading {
        display: block;
        font-size: 1.1em;
        font-weight: 600;
        color: #ff69b4;
        margin: 1.2em 0 0.8em;
        padding-left: 16px;
        position: relative;
    }
    .chat-heading::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: #ffb3d9;
        border-radius: 50%;
        box-shadow: 0 0 0 3px #ffb3d944;
    }
    .dot-bounce {
        display: inline-block;
        font-weight: 900;
        animation: dotBounce 1s infinite ease-in-out;
        font-size: 2em;
    }
    .dot-bounce:nth-child(2) {
        animation-delay: 0.15s;
    }
    .dot-bounce:nth-child(3) {
        animation-delay: 0.3s;
    }
    @keyframes dotBounce {
        0%, 80%, 100% { 
            transform: translateY(0);
        }
        40% {
            transform: translateY(-8px);
        }
    }
    .retry-message {
        animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .message-content {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        max-width: 100%;
    }
    think {
        display: none;
    }
}

.home-icon {
    color: black; /* 普通模式下的颜色 */
}

.dark-mode .home-icon {
    color: white; /* 深色模式下的颜色 */
}
.button-animation:hover .home-icon {
    transform: scale(1.1); /* 悬停时轻微放大 */
}

/* 文字过多时往上淡化效果 */
#userInput {
    mask-image: linear-gradient(to top, transparent 0%, black 20%);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%);
}
.dark-mode {
    --bg-primary: #151515;
    --bg-secondary: #1A1B1D;
    --bg-accent: #222427;
    --bg-elevated: #2B2E31;
    --bg-soft: #292929;
    --text-primary: #f2f4f7;
    --text-secondary: #a4abb3;
    --border-color: #2f3338;
    --primary: #f19daa;
    --primary-hover: #e08b98;
}

.dark-mode body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

.dark-mode .bg-white {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .bg-primary {
    background-color: var(--primary) !important;
    color: white !important;
}

.dark-mode .bg-secondary {
    background-color: var(--bg-primary) !important;
}

.dark-mode .bg-neutral {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
}

.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark-mode .border-accent\/30,
.dark-mode .border-gray-200,
.dark-mode .border-gray-700,
.dark-mode .border-gray-600 {
    border-color: var(--border-color) !important;
}

.dark-mode .bg-white\/70 {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-primary\/10 {
    background-color: rgba(241, 157, 170, 0.15) !important;
}

.dark-mode .math-box {
    background: var(--bg-accent) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .math-frac .numerator {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode #settingsModal .bg-white {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal .text-gray-700 {
    color: var(--text-secondary) !important;
}

.dark-mode .chat-item {
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .chat-item:hover {
    background-color: var(--bg-accent) !important;
}

/* 深色模式下的置顶联系人样式 */
.dark-mode .pinned-contact {
    background-color: rgba(251, 191, 36, 0.05) !important;
    border-left: 3px solid #fbbf24 !important;
}

/* 浅色模式下的置顶联系人样式 */
.pinned-contact {
    background-color: #fffbeb !important;
    border-left: 3px solid #fbbf24 !important;
}

/* 深色模式下的输入框 */
.dark-mode input,
.dark-mode select {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode input::placeholder {
    color: var(--text-secondary) !important;
}

/* 深色模式按钮 */
.dark-mode button:not(.bg-primary) {
    color: var(--text-primary) !important;
}

.dark-mode .hover\:bg-primary\/10:hover {
    background-color: #3C3C3C !important;
}

/* 深色模式赞助弹窗 */
.dark-mode #donateModal > div {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.dark-mode #legalText {
    background-color: var(--bg-accent);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode #confirmBtn:not([disabled]) {
    background-color: var(--primary) !important;
}

/* 消息气泡样式 */
.dark-mode .message .bg-white {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 消息气泡样式 - 移除动画效果 */
.message {
    opacity: 1;
    transform: translateY(0);
}

.dark-mode .message .bg-primary {
    background-color: var(--bg-accent) !important; /* 默认使用高级灰 */
    color: var(--text-primary) !important;
}

/* 顶部导航栏 */
.dark-mode header {
    background-color: var(--bg-secondary) !important;
}

/* 左侧聊天列表 */
.dark-mode aside {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* 右侧信息面板 */
.dark-mode aside.w-80 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* 设置模态框 */
.dark-mode #settingsModal > div {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 深色模式切换按钮 */
.dark-mode #darkModeToggle {
    background-color: var(--primary) !important;
}

.dark-mode #cancelSettings {
    color: white !important; /* 强制白色文字 */
    background-color: #4a5568 !important; /* 更深的背景色提高对比度 */
}

.dark-mode #cancelSettings:hover {
    background-color: #718096 !important; /* 悬停状态颜色 */
}
/* 帮助手册模态框样式 */
#helpModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#helpModal .bg-white {
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    max-width: 90%;
    width: 100%;
    max-height: 90%;
    overflow-y: auto;
}

/* 媒体查询：适配小屏设备 */
@media (max-width: 640px) {
    /* 调整顶部导航栏按钮间距 */
    header .flex.items-center.space-x-4 {
        space-x: 2;
    }

    /* 调整帮助手册模态框内的文字大小和间距 */
    #helpModal h2 {
        font-size: 1.25rem;
    }

    #helpModal p {
        font-size: 0.875rem;
    }

    #helpModal button {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}


/* 设置模态框样式 */
#settingsModal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#settingsModal:not(.hidden) {
    opacity: 1;
}

#settingsModal > div {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateY(-20px);
    opacity: 0;
}

#settingsModal:not(.hidden) > div {
    transform: translateY(0);
    opacity: 1;
    animation: modalSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#settingsModal.hidden > div {
    transform: translateY(-20px);
    opacity: 0;
}

/* 标签页样式 */
#settingsModal ul {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

#settingsModal ul li {
    padding: 0.5rem 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    color: #6b7280;
}

#settingsModal ul li:hover {
    color: #4b5563;
}

#settingsModal ul li.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
    font-weight: 500;
}

/* 表单元素样式 */
#settingsModal select,
#settingsModal input {
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#settingsModal #customApiKey {
    padding-right: 3.5rem !important;
}

#settingsModal #customApiKey.api-key-masked {
    -webkit-text-security: disc;
    text-security: disc;
}

#settingsModal #toggleCustomApiKeyVisibility {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid #e5e7eb;
    border-radius: 0 0.375rem 0.375rem 0;
    background-color: #f8fafc;
    color: #9ca3af;
    box-shadow: none !important;
    transform: none !important;
}

#settingsModal #toggleCustomApiKeyVisibility:hover,
#settingsModal #toggleCustomApiKeyVisibility:active {
    background-color: #f1f5f9;
    color: var(--primary);
    box-shadow: none !important;
    transform: none !important;
}

#settingsModal select:focus,
#settingsModal input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

#settingsModal label {
    font-size: 0.875rem;
    color: #4b5563;
}

/* 开关样式 */
#settingsModal .form-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1.25rem;
    width: 2.25rem;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
}

#settingsModal .form-checkbox:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

#settingsModal .form-checkbox:checked::before {
    transform: translateX(1rem);
}

#settingsModal .form-checkbox::before {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    height: 1rem;
    width: 1rem;
    border-radius: 9999px;
    background-color: white;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* 按钮样式 */
#settingsModal button {
    transition: all 0.2s ease;
}

#settingsModal button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#settingsModal button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

/* 自定义API区域样式 */
#customApiFields {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
}

/* 深色模式下的自定义API区域样式 */
.dark-mode #customApiFields {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
}

/* 深色模式下的粉色按钮样式 */
.dark-mode .bg-pink-500 {
    background-color: #ec4899 !important;
}

.dark-mode .bg-pink-500:hover {
    background-color: #db2777 !important;
}

/* 置顶联系人样式 */
.pinned-contact {
    position: relative;
}

/* 确保置顶按钮始终可见 */
.pin-button {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.chat-item:hover .pin-button {
    opacity: 1;
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease forwards;
}

.animate-slideDown {
    animation: slideDown 0.3s ease forwards;
}
/* 设置模态框标签页样式 */
#settingsModal ul li {
    padding: 0.5rem 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    color: #6b7280;
}

#settingsModal ul li:hover {
    color: #4b5563;
}

#settingsModal ul li.active {
    border-bottom-color: #f19daa;
    color: #f19daa;
    font-weight: 500;
}



/* 颜色方案样式 */
.message-scheme-original .message .bg-primary {
    background-color: #498aca !important; /* 原版用户消息颜色 */
    color: white !important;
}

.message-scheme-original .message .bg-white {
    background-color: #4c5a6f !important; /* 原版AI消息颜色 */
    color: white !important;
    border-color: var(--border-color) !important;
}

.message-scheme-current .message .bg-primary {
    background-color: #f19daa !important; /* 桃信用户消息颜色 */
    color: white !important;
}

.message-scheme-current .message .bg-white {
    background-color: white !important; /* 桃信AI消息颜色 */
    color: #333333 !important;
    border-color: var(--border-color) !important;
}

/* 深色模式下的颜色方案 - 修复这里 */
.dark-mode .message-scheme-original .message .bg-primary {
    background-color: #498aca !important;
    color: white !important;
}

.dark-mode .message-scheme-original .message .bg-white {
    background-color: #4c5a6f !important;
    color: white !important;
    border-color: var(--border-color) !important;
}

/* +++ 修复深色模式下桃信风格的样式 +++ */
.dark-mode .message-scheme-current .message .bg-primary {
    background-color: #f19daa !important; /* 保持粉色 */
    color: white !important;
}

.dark-mode .message-scheme-current .message .bg-white {
    background-color: var(--bg-accent) !important; /* 使用统一的高级灰 */
    color: var(--text-primary) !important; /* 柔和白字 */
    border-color: var(--border-color) !important;
}

/* 确保深色模式下桃信风格的消息气泡有足够的对比度 */
.dark-mode .message-scheme-current .message .bg-white p {
    color: var(--text-primary) !important;
}

/* 修复消息容器在深色模式下的背景 */
.dark-mode .message-scheme-current .message:not(.justify-end) .bg-white {
    background-color: var(--bg-accent) !important;
}

/* 确保深色模式下用户消息（粉色）仍然可见 */
.dark-mode .message-scheme-current .message.justify-end .bg-primary {
    background-color: #f19daa !important;
    color: white !important;
}

/* 深色模式下系统提示与关闭按钮保持可见 */
.dark-mode .system-message > div {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

.dark-mode .system-message .close-system-message {
    color: #f2f4f7 !important;
    background-color: transparent !important;
}

.dark-mode .system-message .close-system-message:hover {
    color: #ffffff !important;
    background-color: var(--bg-elevated) !important;
}

.history-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(241, 157, 170, 0.18);
    background-color: rgba(241, 157, 170, 0.08);
    color: #8d5b68;
    font-size: 0.75rem;
    line-height: 1rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.history-load-more-btn:hover {
    background-color: rgba(241, 157, 170, 0.14);
    color: #7a4252;
    border-color: rgba(241, 157, 170, 0.28);
}

.history-loaded-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(241, 157, 170, 0.1);
    color: var(--primary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.dark-mode .history-load-more-btn {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

.dark-mode .history-load-more-btn:hover {
    background-color: var(--bg-elevated) !important;
    color: #ffffff !important;
    border-color: #434950 !important;
}

.dark-mode .history-loaded-pill {
    background-color: rgba(241, 157, 170, 0.14) !important;
    color: #f5c1cc !important;
    border: 1px solid rgba(241, 157, 170, 0.18);
}



@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* .chat-item 的进场动画已移除，避免收到新消息重绘列表时闪烁 */
  /* .chat-item {
    animation: fadeIn 0.5s forwards;
    animation-delay: calc(var(--index) * 0.1s);
  } */




/* 表情包面板样式 */
#emojiPanel {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    scrollbar-width: thin;
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#emojiPanel:not(.hidden) {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: slideUpIn 0.3s ease-out;
}

#emojiPanel::-webkit-scrollbar {
    width: 6px;
}

#emojiPanel::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

/* 表情预览区域样式 */
#emojiPreview {
    scrollbar-width: thin;
    border: 1px dashed #d1d5db;
}

#emojiPreview::-webkit-scrollbar {
    height: 6px;
}

#emojiPreview::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

/* 深色模式适配 */
.dark-mode #emojiPanel {
    background-color: #2d3748;
    border-color: #4a5568;
}

.dark-mode #emojiPreview {
    background-color: #2d3748;
    border-color: #4a5568;
}

/* 表情包按钮在深色模式下图标为白色 */
.dark-mode #emojiButton .fa-smile-o {
    color: white;
}


/* 表情图片保持小尺寸 */
.emoji, .emoji-user {
    display: inline-block;
    vertical-align: middle;
    width: 100px !important; /* 固定宽度 */
    height: 100px !important; /* 固定高度 */
    margin: 0 2px;
    transition: transform 0.2s ease;
}

.emoji:hover, .emoji-user:hover {
    transform: scale(1.2);
}

/* 新增表情包容器样式 */
.emoji-container {
    display: inline-block;
    position: relative;
    margin: 0 2px;
}



/* 悬停时显示工具提示 */
.emoji-container:hover .emoji-tooltip {
    opacity: 1;
}

/* 深色模式适配 */
.dark-mode .emoji-tooltip {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
}

/* 用户消息中的表情样式 */
.message .bg-primary .emoji-user {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 2px;
    transition: transform 0.2s ease;
}

/* AI消息中的表情样式 */
.message .emoji {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 2px;
    transition: transform 0.2s ease;
}

/* 悬停效果 */
.emoji:hover, .emoji-user:hover {
    transform: scale(1.2);
}


/* 白天模式下搜索框的样式 */
#searchInput {
    background-color: white !important; /* 强制设置白天模式背景颜色为白色 */
    color: black; /* 设置白天模式文字颜色为黑色 */
}

/* 黑夜模式下搜索框的样式 */
.dark-mode #searchInput {
    background-color: var(--bg-accent); /* 黑夜模式背景颜色 */
    color: var(--text-primary); /* 黑夜模式文字颜色 */
    border-color: var(--border-color); /* 黑夜模式边框颜色 */
}

/* 白天模式下搜索框背景色设置为白色 */
#searchInput {
    background-color: white !important;
}

/* 深色模式下设置界面分类栏样式 */
.dark-mode #aiOptimizationSection {
    background-color: #1a202c !important;
    color: #cbd5e0 !important;
}

.dark-mode #chatHistorySection {
    background-color: #1a202c !important;
    color: #cbd5e0 !important;
}

.dark-mode #chatHistorySection .chat-history-subtitle,
.dark-mode #chatHistorySection .chat-history-note,
.dark-mode #chatHistorySection .chat-history-meta {
    color: var(--text-secondary) !important;
}

.dark-mode #chatHistorySection .chat-history-card {
    background-color: var(--bg-accent) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode #chatHistorySection .chat-history-divider {
    border-top-color: var(--border-color) !important;
}

.dark-mode #chatHistorySection .chat-history-input {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #chatHistorySection .chat-history-input::placeholder {
    color: var(--text-secondary) !important;
}

/* 深色模式下分类栏标题背景 */
.dark-mode #settingsModal .bg-gray-100 {
    background-color: #2d3748 !important;
    color: #cbd5e0 !important;
}

/* 深色模式下分类栏边框 */
.dark-mode #settingsModal .border-gray-200 {
    border-color: #4a5568 !important;
}

/* 深色模式下分类栏悬停效果 */
.dark-mode #settingsModal .border-gray-200:hover {
    border-color: #718096 !important;
}

/* 深色模式下搜索框背景色保持不变 */
.dark-mode #searchInput {
    background-color: #4b5563 !important;
    color: white !important;
}

.dark-mode #searchInput::placeholder {
    color: #a0aec0 !important;
}

/* 白天模式下角色选择栏文字颜色为黑色 */
#chatListContainer h3 {
    color: black;
}

/* 黑夜模式下角色选择栏文字颜色为白色 */
.dark-mode #chatListContainer h3 {
    color: white !important;
}

/* 白天模式下角色选择栏背景颜色 */
#chatListContainer {
    background-color: white;
}

/* 黑夜模式下角色选择栏背景颜色 */
.dark-mode #chatListContainer {
    background-color: var(--bg-secondary) !important;
}

/* 左侧聊天列表 */
aside.w-64, #chatListSidebar {
    background-color: white; /* 浅粉色 */
    border-right: 1px solid rgba(255, 179, 217, 0.3);
}

.dark-mode aside.w-64, .dark-mode #chatListSidebar {
    background-color: var(--bg-secondary) !important; /* 深紫色 */
    border-right: 1px solid var(--border-color) !important;
}

/* 白天模式下的搜索头部背景 */
.chat-list-header {
    background-color: white !important;
}

.dark-mode .chat-list-header {
    background-color: var(--bg-secondary) !important;
}

/* 手机端底部导航栏适配 */
.mobile-nav-bar {
    background-color: #f9fafb !important;
    border-top-color: #e5e7eb !important;
}

.dark-mode .mobile-nav-bar {
    background-color: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

.dark-mode .mobile-nav-bar a:not(.text-primary),
.dark-mode .mobile-nav-bar button:not(.text-primary) {
    color: var(--text-secondary) !important;
}

.dark-mode .mobile-nav-bar button.text-primary {
    color: #f19daa !important;
}

/* 手机端聊天区域背景统一 */
.chat-detail-view, .chat-logs-container {
    background-color: #FFF8FB !important; /* 统一使用极浅粉色背景 */
}

.dark-mode .chat-detail-view, .dark-mode .chat-logs-container {
    background-color: var(--bg-primary) !important; /* 深色模式统一使用大背景深灰 */
}

/* 手机端聊天头部 */
.chat-header {
    background-color: white !important;
}

.dark-mode .chat-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .chat-header h2 {
    color: var(--text-primary) !important;
}

.dark-mode .chat-header p {
    color: var(--text-secondary) !important;
}

.dark-mode .chat-header i {
    color: var(--text-secondary) !important;
}

.dark-mode .chat-header .button-animation,
.dark-mode .chat-header .button-animation i,
.dark-mode #wechatDonateBtn,
.dark-mode #toggleProfileSidebarCollapsedBtn,
.dark-mode #toggleProfileSidebarExpandedBtn,
.dark-mode #closeProfileSidebarBtn,
.dark-mode #mobileMoreActionBtn,
.dark-mode #backToListBtn {
    color: #ffffff !important;
}

.dark-mode #wechatDonateBtn {
    border-color: rgba(255, 255, 255, 0.92) !important;
}

/* 手机端输入区域 */
.chat-input-area {
    background-color: white !important;
}

.dark-mode .chat-input-area {
    background-color: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

/* 输入框本体 */
.dark-mode #userInput {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 输入框多行自动扩高：随内容长高，到 max-height 上限后转内部滚动（滚动条由 JS 动态切换，未超限始终 hidden） */
textarea#userInput {
    resize: none;
    min-height: 52px;
    max-height: 160px;
    line-height: 1.5;
    overflow-y: hidden;
    overscroll-behavior: contain;
    /* Firefox 细滚动条 */
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

/* 桃信粉滚动条滑块（WebKit） */
textarea#userInput::-webkit-scrollbar {
    width: 6px;
}
textarea#userInput::-webkit-scrollbar-track {
    background: transparent;
}
textarea#userInput::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f19daa, #e08b98);
    border-radius: 999px;
}
textarea#userInput::-webkit-scrollbar-thumb:hover {
    background: #e08b98;
}

/* 手机端上限更矮，避免输入框占屏过多 */
@media (max-width: 640px) {
    textarea#userInput {
        max-height: 120px;
    }
}

/* 发送按钮与输入栏默认等高 */
.chat-input-area #sendButton {
    min-height: 52px;
}
@media (max-width: 640px) {
    .chat-input-area #sendButton {
        min-height: 46px;
    }
}

/* 手机端更多面板 */
.more-action-panel {
    background-color: white !important;
}

.dark-mode .more-action-panel {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .drag-handle {
    background-color: var(--bg-elevated) !important;
}

.dark-mode .action-btn {
    background-color: var(--bg-accent) !important;
}

.dark-mode .action-btn:hover {
    background-color: var(--bg-elevated) !important;
}

.dark-mode .action-text {
    color: #e2e8f0 !important;
}

/* 免责声明模态框适配 */
.dark-mode .disclaimer-content {
    background-color: #1a202c !important;
}

.dark-mode .disclaimer-title {
    color: white !important;
}

.dark-mode .disclaimer-text {
    color: #cbd5e0 !important;
}

.dark-mode .disclaimer-checkbox {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
}

/* 搜索聊天记录模态框适配 */
.dark-mode .search-history-content {
    background-color: #1a202c !important;
}

.dark-mode .search-history-title {
    color: white !important;
}

.dark-mode .search-history-text {
    color: #e2e8f0 !important;
}

.dark-mode .search-history-input {
    background-color: #2d3748 !important;
    color: white !important;
    border-color: #4a5568 !important;
}

.dark-mode .search-history-stats {
    color: #a0aec0 !important;
}

.dark-mode .option-modal-content {
    background-color: #1a1a1a;
    color: #e5e5e5;
}

.dark-mode .option-btn {
    background-color: #242424;
    color: #e5e5e5;
    border-color: #2e2e2e !important;
}

.dark-mode #selectDeleteHistoryOption {
    color: #e5e5e5;
}

.dark-mode .option-btn:hover {
    background-color: #2e2e2e;
}

.dark-mode .search-history-checkbox {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
}

.dark-mode .search-history-results {
    border-color: #4a5568 !important;
}

.dark-mode .search-history-close {
    background-color: #4a5568 !important;
    color: white !important;
}

.dark-mode .search-history-close:hover {
    background-color: #718096 !important;
}

/* 通讯录相关样式 */
.address-book-title {
    color: #6b7280; /* text-gray-500 */
    background-color: #FFF8FB; /* 极浅粉色背景 */
}

.address-book-item {
    background-color: white;
    border-color: #f3f4f6; /* border-gray-100 */
}

.address-book-item:hover {
    background-color: #FFF8FB; /* hover:bg-neutral/50 类似效果 */
}

.address-book-name {
    color: #333333; /* text-dark */
}

.address-book-status {
    color: #6b7280; /* text-gray-500 */
}

.dark-mode .address-book-title {
    color: var(--text-secondary) !important;
    background-color: var(--bg-secondary) !important;
}

.dark-mode .address-book-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .address-book-item:hover {
    background-color: var(--bg-accent) !important;
}

.dark-mode .address-book-name {
    color: var(--text-primary) !important;
}

.dark-mode .address-book-status {
    color: var(--text-secondary) !important;
}

.dark-mode .profile-title {
    color: white !important;
}

/* 表情包图标颜色适配 */
#emojiButton .fa-face-smile {
    color: #333; /* 浅色模式颜色 */
}

.dark-mode #emojiButton .fa-face-smile {
    color: white; /* 深色模式颜色 */
}

/* 语音输入图标颜色适配 */
#voiceInputButton .fa-microphone {
    color: #333;
}

.dark-mode #voiceInputButton .fa-microphone {
    color: white;
}

/*查找栏*/
.highlight-message {
    animation: highlight-pulse 1s ease-in-out;
    border: 2px solid #f19daa;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 0 10px rgba(241, 157, 170, 0.5);
}

@keyframes highlight-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* 深色模式适配 */
.dark-mode .highlight-message {
    background-color: rgba(241, 157, 170, 0.15) !important;
    box-shadow: 0 0 15px rgba(180, 80, 100, 0.5);
}


.rewrite-btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, background 0.2s;
}

.rewrite-btn:hover {
    transform: scale(1.1);
    background: #e2e8f0 !important;
}

/* 撤回按钮样式 */
.rewrite-btn i {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.rewrite-btn:hover i {
    transform: rotate(-45deg);
}

/* 悬停状态 */
.dark-mode button:not([disabled]):hover:after {
    opacity: 1;
}

/* 按下状态 */
.dark-mode button:not([disabled]):active:after {
    background: rgba(255, 255, 255, 0.25);
}

/* 聚焦状态 */
.dark-mode button:not([disabled]):focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* 新增：禁用状态更明显 */
.dark-mode button[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #555 !important;
    color: #999 !important;
}

/* 新增：深色模式下的特殊按钮状态 */
.dark-mode .button-animation:hover {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* +++ 添加在这里 +++ */
.dark-mode .rewrite-btn i {
    color: black !important;
}

.dark-mode .rewrite-btn:hover i {
    color: black !important;
}
/* +++ 结束添加 +++ */

/* 新增：深色模式下的输入框状态 */
.dark-mode input:focus,
.dark-mode select:focus {
    border-color: #f19daa !important;
    box-shadow: 0 0 0 3px rgba(241, 157, 170, 0.3) !important;
}

/* 新增：设置面板中的活动标签更明显 */
.dark-mode #settingsModal ul li.active {
    border-bottom-color: #f19daa;
    color: #f19daa;
    background: rgba(241, 157, 170, 0.1);
}

/* 新增：深色模式下的输入框状态 */
.dark-mode input:focus,
.dark-mode select:focus {
    border-color: #f19daa !important;
    box-shadow: 0 0 0 3px rgba(241, 157, 170, 0.3) !important;
}

/* 新增：深色模式下的开关控件状态 */
.dark-mode .form-checkbox:checked {
    background-color: #f19daa !important;
    border-color: #f19daa !important;
}

/* 新增：深色模式下的发送按钮状态 */
.dark-mode #sendButton:not([disabled]) {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode #sendButton:not([disabled]):hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode #sendButton:not([disabled]):active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* 添加语音输入按钮动画 */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(241, 157, 170, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(241, 157, 170, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 157, 170, 0); }
}

#voiceInputButton.listening {
    animation: pulse 1.5s infinite;
}

#voiceInputButton.listening #voiceStatus {
    display: block;
    background-color: #f19daa;
}

/* 深色模式优化 */
.dark-mode .bg-neutral {
    background-color: #2d3748 !important;
}

.dark-mode input, .dark-mode select {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

/* 深色模式下颜色方案选中按钮样式 */
.dark-mode #scheme-original.bg-primary,
.dark-mode #scheme-current.bg-primary {
    background-color: #f19daa !important;
    color: white !important;
}

/* 深色模式下颜色方案未选中按钮样式 */
.dark-mode #scheme-original:not(.bg-primary),
.dark-mode #scheme-current:not(.bg-primary) {
    background-color: #4a5568 !important;
    color: white !important;
}

.dark-mode input::placeholder {
    color: #a0aec0 !important;
}

.dark-mode #settingsModal .bg-white {
    background-color: #1a202c !important;
}

.dark-mode #settingsModal .text-gray-700 {
    color: #cbd5e0 !important;
}

/* 深色模式过渡效果 */
body, .bg-white, .bg-primary, .bg-secondary, input, select, button {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 添加语音输入状态提示的动画 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#voiceListeningText {
    animation: pulse 2s infinite;
    z-index: 1000;
    box-shadow: 0 0 15px rgba(241, 157, 170, 0.5);
    font-weight: bold;
}

#stopVoiceInput {
    transition: all 0.2s;
}

#stopVoiceInput:hover {
    background-color: #e2e8f0;
    transform: scale(1.1);
}

/* API测试按钮状态 */
#testApiConnection.testing {
    background-color: #e2e8f0 !important;
    cursor: not-allowed;
    position: relative;
}

#testApiConnection.testing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    background-size: 200% 100%;
    animation: loadingShimmer 1.5s infinite;
}

@keyframes loadingShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 响应式调整 - 小屏幕优化 */
@media (max-width: 640px) {
    #settingsModal > div {
        padding: 15px; /* 减少内边距 */
    }
    
    #settingsModal ul li {
        padding: 10px 0;
        text-align: center;
        border-bottom: 1px solid #e5e7eb;
    }
    
    #settingsModal .mb-4 {
        margin-bottom: 12px; /* 减少间距 */
    }
    
    /* 按钮大小调整 */
    #cancelSettings, #saveSettings {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* 响应式调整 - 大屏幕优化 */
@media (min-width: 1536px) {
    /* 当屏幕宽度大于1536px时，调整聊天消息气泡宽度 */
    .message .max-w-\[80\%\] {
        max-width: 70% !important;
    }
    
    /* 确保大屏幕上图片不会过大 */
    .message .chat-image {
        max-width: 75% !important;
    }
}

/* 响应式调整 - 超大屏幕优化 */
@media (min-width: 2000px) {
    /* 当屏幕宽度大于2000px时，调整侧边栏宽度 */
    .w-64 {
        width: 280px !important;
    }
    
    .w-80 {
        width: 320px !important;
    }
}

/* 聊天界面响应式优化 */
@media (min-width: 1024px) {
    /* 在中等及以上屏幕上，确保聊天内容区域有足够的内边距和空间 */
    #chatLog {
        padding: 12px 32px;
    }
    
    /* 调整输入区域的内边距 */
    section.flex-1.flex.flex-col.bg-white\/70 {
        padding: 0;
    }
}

/* 全屏布局优化 */
@media (min-width: 1280px) {
    /* 确保主内容区域能够充分利用可用空间 */
    section.flex-1.flex.flex-col.bg-white\/70 {
        flex: 1;
        min-width: 0;
    }
    
    /* 确保聊天内容区域在大屏幕上有合适的内边距 */
    #chatLog {
        padding: 16px 48px;
    }
    
    /* 调整聊天头部布局 */
    .p-4.border-b.border-accent\/30.flex.items-center.justify-between.bg-white {
        padding: 16px 24px;
    }
}

/* 超宽屏特殊优化 */
@media (min-width: 1920px) {
    /* 调整消息气泡的内边距和圆角，使其在宽屏上更加美观 */
    .message div.bg-white, .message div.bg-primary {
        padding: 12px 16px;
        border-radius: 18px !important;
    }
    
    /* 调整头像大小 */
    .message img {
        width: 44px !important;
        height: 44px !important;
    }
    
    /* 调整字体大小以提高可读性 */
    .message p {
        font-size: 16px;
    }
    
    /* 在超宽屏幕上进一步优化内边距 */
    #chatLog {
        padding: 20px 64px;
    }
}

/* 通用滚动修复 */
html, body {
    overflow-y: auto; /* 确保页面可以滚动 */
    height: auto; /* 高度自适应 */
}

/* 设置模态框滚动条美化 */
#settingsModal > div::-webkit-scrollbar {
    width: 6px;
}

#settingsModal > div::-webkit-scrollbar-thumb {
    background-color: #f19daa;
    border-radius: 3px;
}

.dark-mode #settingsModal > div::-webkit-scrollbar-thumb {
    background-color: #8a4b58;
}

/* 添加以下样式确保设置界面可滚动 */
#settingsModal > div {
    max-height: 90vh;
    overflow-y: auto;
}

/* 确保深色模式下滚动条可见 */
.dark-mode #settingsModal > div::-webkit-scrollbar {
    width: 8px;
}

.dark-mode #settingsModal > div::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

.dark-mode #settingsModal > div::-webkit-scrollbar-track {
    background-color: #333;
}

/* 添加小屏幕响应式调整 */
@media (max-width: 640px) {
    #settingsModal > div {
        max-width: 95vw;
        padding: 15px;
    }
}


/* 在样式表中添加 */
.border-red-500 {
    border-color: #ef4444 !important;
}





/* 语言切换提示样式 */
#languageChangeToast {
    animation: slideIn 0.3s ease-out;
}

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

/* 翻译错误提示样式 */
.fixed.bottom-4.left-4 {
    animation: slideInFromLeft 0.3s ease-out;
}

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

/* 确保Google翻译小部件不会破坏布局 */
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

/* 隐藏Google翻译的版权信息 */
.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

/* 语言选择下拉菜单样式 */
#languageSelect {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}


/* 修复聊天消息文字排版问题 */
.message p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    line-height: 1.6;
    margin: 0;
}

/* 确保消息气泡内容不会超出容器 */
.message .bg-white, 
.message .bg-primary {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 防止长单词或URL导致布局问题 */
.message div[class*="max-w-"] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 自定义右键菜单样式 */
.custom-context-menu {
    font-family: inherit;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: white;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom-context-menu .context-menu-option {
    transition: background-color 0.2s ease;
}

.custom-context-menu .context-menu-option:hover {
    background-color: #f3f4f6;
}

/* 深色模式下的右键菜单样式 */
.dark-mode .custom-context-menu {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.dark-mode .custom-context-menu .context-menu-option:hover {
    background-color: #374151;
}

/* 右键菜单动画效果 */
.custom-context-menu {
    animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 临时消息样式 */
.temporary-message {
    font-family: inherit;
    backdrop-filter: blur(2px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 深色模式下的临时消息样式 */
.dark-mode .temporary-message {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}




/* 修复图片超出容器问题 */
.message .chat-image-container {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

/* 消息中的图片样式 - 继承基础样式并确保正确显示 */
.message .chat-image {
    display: block;
}

/* 确保图片消息容器不会被撑破 */
.message div[class*="max-w-"] {
    overflow: hidden;
}

/* 修复深色模式下的图片容器 */
.dark-mode .message .chat-image-container {
    max-width: 100%;
}

/* 响应式调整图片大小 */
@media (max-width: 768px) {
    .chat-image {
        max-width: 90% !important;
    }
}

@media (max-width: 480px) {
    .chat-image {
        max-width: 95% !important;
    }
}

/* 增强聊天消息悬停放大效果，允许突破容器限制 */
.message .hover-scale {
    position: relative;
    z-index: 10;
    transition: transform 0.2s ease, z-index 0.2s ease;
}

.message .hover-scale:hover {
    transform: scale(1.05);
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 确保消息容器不会限制放大效果，但图片仍受最大宽度限制 */
.message > div {
    overflow: visible !important;
}

/* 修复可能的遮挡问题 */
#chatLog {
    overflow-y: auto;
    overflow-x: visible;
}

/* 增强深色模式下的悬停效果 */
.dark-mode .message .hover-scale:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}


/* 表情包面板样式 */
#emojiPanel {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    scrollbar-width: thin;
}

#emojiPanel::-webkit-scrollbar {
    width: 6px;
}

#emojiPanel::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

/* 表情预览区域样式 */
#emojiPreview {
    scrollbar-width: thin;
    border: 1px dashed #d1d5db;
}

#emojiPreview::-webkit-scrollbar {
    height: 6px;
}

#emojiPreview::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

/* 深色模式适配 */
.dark-mode #emojiPanel {
    background-color: #2d3748;
    border-color: #4a5568;
}

.dark-mode #emojiPreview {
    background-color: #2d3748;
    border-color: #4a5568;
}

/* 表情包按钮在深色模式下图标为白色 */
.dark-mode #emojiButton .fa-smile-o {
    color: white;
}

/* 修复图片过大问题 */
.chat-image {
    max-width: 85% !important; /* 按聊天框宽度调整图片大小 */
    height: auto !important; /* 保持原始宽高比 */
    border-radius: 16px;
    margin: 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 统一用户上传图片在预览、发送中、发送后的显示尺寸 */
.image-preview-popover {
    width: min(18rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

.image-preview-media {
    display: block;
    width: 100%;
    max-height: 16rem;
    object-fit: contain;
    border-radius: 0.75rem;
}

.message.justify-end .pending-upload-image-frame,
.message.justify-end .chat-image-container {
    display: inline-block;
    width: min(18rem, calc(100vw - 7.5rem));
    max-width: 100%;
}

.message.justify-end .pending-upload-image,
.message.justify-end .chat-image {
    display: block;
    width: 100%;
    max-width: 100% !important;
    max-height: 16rem;
    height: auto !important;
    object-fit: contain;
}

/* 表情图片保持小尺寸（重复定义块，取值与上文一致；渲染尺寸的含义与 300px 档位约定见首次定义处的注释） */
.emoji, .emoji-user {
    display: inline-block;
    vertical-align: middle;
    width: 100px !important; /* 固定宽度 */
    height: 100px !important; /* 固定高度 */
    margin: 0 2px;
    transition: transform 0.2s ease;
}

.emoji:hover, .emoji-user:hover {
    transform: scale(1.2);
}

/* 新增表情包容器样式 */
.emoji-container {
    display: inline-block;
    position: relative;
    margin: 0 2px;
}



/* 悬停时显示工具提示 */
.emoji-container:hover .emoji-tooltip {
    opacity: 1;
}

/* 深色模式适配 */
.dark-mode .emoji-tooltip {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
}

/* 用户消息中的表情样式 */
.message .bg-primary .emoji-user {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 2px;
    transition: transform 0.2s ease;
}

/* AI消息中的表情样式 */
.message .emoji {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 2px;
    transition: transform 0.2s ease;
}

/* 悬停效果 */
.emoji:hover, .emoji-user:hover {
    transform: scale(1.2);
}


/* 白天模式下搜索框的样式 */
#searchInput {
    background-color: white !important; /* 强制设置白天模式背景颜色为白色 */
    color: black; /* 设置白天模式文字颜色为黑色 */
}

/* 黑夜模式下搜索框的样式 */
.dark-mode #searchInput {
    background-color: var(--bg-accent); /* 黑夜模式背景颜色 */
    color: var(--text-primary); /* 黑夜模式文字颜色 */
    border-color: var(--border-color); /* 黑夜模式边框颜色 */
}

/* 白天模式下搜索框背景色设置为白色 */
#searchInput {
    background-color: white !important;
}

/* 深色模式下搜索框背景色保持不变 */
.dark-mode #searchInput {
    background-color: #4b5563 !important;
}

/* 白天模式下角色选择栏文字颜色为黑色 */
#chatListContainer h3 {
    color: black;
}

/* 黑夜模式下角色选择栏文字颜色为白色 */
.dark-mode #chatListContainer h3 {
    color: white;
}

/* 白天模式下角色选择栏背景颜色 */
#chatListContainer {
    background-color: white;
}

/* 黑夜模式下角色选择栏背景颜色 */
.dark-mode #chatListContainer {
    background-color: #1a1a1a;
}

/* 左侧聊天列表 */
aside.w-64 {
    background-color: white; /* 浅粉色 */
    border-right: 1px solid rgba(255, 179, 217, 0.3);
}

.dark-mode aside.w-64 {
    background-color: #301934; /* 深紫色 */
    border-right: 1px solid #424242;
}

/* 表情包图标颜色适配 */
#emojiButton .fa-face-smile {
    color: #333; /* 浅色模式颜色 */
}

.dark-mode #emojiButton .fa-face-smile {
    color: white; /* 深色模式颜色 */
}

/*查找栏*/
.highlight-message {
    animation: highlight-pulse 1s ease-in-out;
    border: 2px solid #f19daa;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 0 10px rgba(241, 157, 170, 0.5);
}

@keyframes highlight-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* 深色模式适配 */
.dark-mode .highlight-message {
    background-color: rgba(241, 157, 170, 0.15) !important;
    box-shadow: 0 0 15px rgba(180, 80, 100, 0.5);
}


.rewrite-btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, background 0.2s;
}

.rewrite-btn:hover {
    transform: scale(1.1);
    background: #e2e8f0 !important;
}

/* 撤回按钮样式 */
.rewrite-btn i {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.rewrite-btn:hover i {
    transform: rotate(-45deg);
}

/* 悬停状态 */
.dark-mode button:not([disabled]):hover:after {
    opacity: 1;
}

/* 按下状态 */
.dark-mode button:not([disabled]):active:after {
    background: rgba(255, 255, 255, 0.25);
}

/* 聚焦状态 */
.dark-mode button:not([disabled]):focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* 新增：禁用状态更明显 */
.dark-mode button[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #555 !important;
    color: #999 !important;
}

/* 新增：深色模式下的特殊按钮状态 */
.dark-mode .button-animation:hover {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* +++ 添加在这里 +++ */
.dark-mode .rewrite-btn i {
    color: black !important;
}

.dark-mode .rewrite-btn:hover i {
    color: black !important;
}
/* +++ 结束添加 +++ */

/* 新增：深色模式下的输入框状态 */
.dark-mode input:focus,
.dark-mode select:focus {
    border-color: #f19daa !important;
    box-shadow: 0 0 0 3px rgba(241, 157, 170, 0.3) !important;
}

/* 新增：设置面板中的活动标签更明显 */
.dark-mode #settingsModal ul li.active {
    border-bottom-color: #f19daa;
    color: #f19daa;
    background: rgba(241, 157, 170, 0.1);
}

/* 新增：深色模式下的输入框状态 */
.dark-mode input:focus,
.dark-mode select:focus {
    border-color: #f19daa !important;
    box-shadow: 0 0 0 3px rgba(241, 157, 170, 0.3) !important;
}

/* 新增：深色模式下的开关控件状态 */
.dark-mode .form-checkbox:checked {
    background-color: #f19daa !important;
    border-color: #f19daa !important;
}

/* 新增：深色模式下的发送按钮状态 */
.dark-mode #sendButton:not([disabled]) {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode #sendButton:not([disabled]):hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode #sendButton:not([disabled]):active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* 添加语音输入按钮动画 */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(241, 157, 170, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(241, 157, 170, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 157, 170, 0); }
}

#voiceInputButton.listening {
    animation: pulse 1.5s infinite;
}

#voiceInputButton.listening #voiceStatus {
    display: block;
    background-color: #f19daa;
}

/* 深色模式优化 */
.dark-mode .bg-neutral {
    background-color: #2d3748 !important;
}

.dark-mode input, .dark-mode select {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.dark-mode input::placeholder {
    color: #a0aec0 !important;
}

.dark-mode #settingsModal .bg-white {
    background-color: #1a202c !important;
}

.dark-mode #settingsModal .text-gray-700 {
    color: #cbd5e0 !important;
}

/* 深色模式过渡效果 */
body, .bg-white, .bg-primary, .bg-secondary, input, select, button {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 添加语音输入状态提示的动画 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#voiceListeningText {
    animation: pulse 2s infinite;
    z-index: 1000;
    box-shadow: 0 0 15px rgba(241, 157, 170, 0.5);
    font-weight: bold;
}

#stopVoiceInput {
    transition: all 0.2s;
}

#stopVoiceInput:hover {
    background-color: #e2e8f0;
    transform: scale(1.1);
}

/* API测试按钮状态 */
#testApiConnection.testing {
    background-color: #e2e8f0 !important;
    cursor: not-allowed;
    position: relative;
}

#testApiConnection.testing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    background-size: 200% 100%;
    animation: loadingShimmer 1.5s infinite;
}

@keyframes loadingShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 响应式调整 - 小屏幕优化 */
@media (max-width: 640px) {
    #settingsModal > div {
        padding: 15px; /* 减少内边距 */
    }
    
    #settingsModal ul li {
        padding: 10px 0;
        text-align: center;
        border-bottom: 1px solid #e5e7eb;
    }
    
    #settingsModal .mb-4 {
        margin-bottom: 12px; /* 减少间距 */
    }
    
    /* 按钮大小调整 */
    #cancelSettings, #saveSettings {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* 通用滚动修复 */
html, body {
    overflow-y: auto; /* 确保页面可以滚动 */
    height: auto; /* 高度自适应 */
}

/* 设置模态框滚动条美化 */
#settingsModal > div::-webkit-scrollbar {
    width: 6px;
}

#settingsModal > div::-webkit-scrollbar-thumb {
    background-color: #f19daa;
    border-radius: 3px;
}

.dark-mode #settingsModal > div::-webkit-scrollbar-thumb {
    background-color: #8a4b58;
}

/* 添加以下样式确保设置界面可滚动 */
#settingsModal > div {
    max-height: 90vh;
    overflow-y: auto;
}

/* 确保深色模式下滚动条可见 */
.dark-mode #settingsModal > div::-webkit-scrollbar {
    width: 8px;
}

.dark-mode #settingsModal > div::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

.dark-mode #settingsModal > div::-webkit-scrollbar-track {
    background-color: #333;
}

/* 添加小屏幕响应式调整 */
@media (max-width: 640px) {
    #settingsModal > div {
        max-width: 95vw;
        padding: 15px;
    }
}


/* 在样式表中添加 */
.border-red-500 {
    border-color: #ef4444 !important;
}





/* 语言切换提示样式 */
#languageChangeToast {
    animation: slideIn 0.3s ease-out;
}

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

/* 翻译错误提示样式 */
.fixed.bottom-4.left-4 {
    animation: slideInFromLeft 0.3s ease-out;
}

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

/* 确保Google翻译小部件不会破坏布局 */
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

/* 隐藏Google翻译的版权信息 */
.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

/* 语言选择下拉菜单样式 */
#languageSelect {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}


/* 修复聊天消息文字排版问题 */
.message p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    line-height: 1.6;
    margin: 0;
}

/* 确保消息气泡内容不会超出容器 */
.message .bg-white, 
.message .bg-primary {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 防止长单词或URL导致布局问题 */
.message div[class*="max-w-"] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}




/* ===== 修复对话框圆角问题 ===== */
.message .bg-white,
.message .bg-primary {
    border-radius: 18px !important;
}

/* 用户消息 - 右侧尖角 */
.message.justify-end .bg-primary {
    border-top-right-radius: 4px !important;
}

/* AI消息 - 左侧尖角 */
.message:not(.justify-end) .bg-white {
    border-top-left-radius: 4px !important;
}

/* +++ 确保深色模式桃信风格优先级 +++ */
body.dark-mode.message-scheme-current .message .bg-white {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
}

body.dark-mode.message-scheme-current .message .bg-primary {
    background-color: #f19daa !important;
    color: white !important;
}


/* 头像裁剪相关样式 */
#cropBox {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

#cropBox::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-50%);
}

#cropBox::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%);
}

/* 裁剪手柄样式 */
[data-handle] {
    z-index: 11;
    transition: all 0.2s ease;
}

[data-handle]:hover {
    transform: scale(1.2);
    box-shadow: 0 0 5px rgba(241, 157, 170, 0.8);
}

/* 深色模式适配 */
.dark-mode #avatarCropModal > div {
    background-color: #1a202c;
}

.dark-mode #cropBox {
    border-color: #f19daa;
}

.dark-mode [data-handle] {
    background-color: #2d3748;
    border-color: #f19daa;
}

/* 云端备份列表统一样式 */
#cloudAuthView .cloud-backup-list {
    background-color: #f8fafc;
    border-color: #e5e7eb;
}

#cloudAuthView .cloud-backup-item,
#cloudAuthView .cloud-backup-empty {
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
}

#cloudAuthView .cloud-backup-item {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#cloudAuthView .cloud-backup-item:hover {
    background-color: #f9fafb;
}

#cloudAuthView .cloud-backup-item--auto {
    background-color: rgba(239, 246, 255, 0.72);
    border-color: #bfdbfe;
}

#cloudAuthView .cloud-backup-item--auto:hover {
    background-color: rgba(219, 234, 254, 0.92);
}

#cloudAuthView .cloud-backup-action {
    border-width: 1px;
    border-style: solid; /* 不依赖 preflight，确保同色描边真实渲染 */
}

#cloudAuthView .cloud-backup-action--restore {
    background-color: #f0fdf4;
    color: #16a34a;
    border-color: #16a34a;
}

#cloudAuthView .cloud-backup-action--restore:hover {
    background-color: #dcfce7;
}

#cloudAuthView .cloud-backup-action--delete {
    background-color: #fef2f2;
    color: #dc2626;
    border-color: #dc2626;
}

#cloudAuthView .cloud-backup-action--delete:hover {
    background-color: #fee2e2;
}

#cloudAuthView .cloud-backup-action--move {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #2563eb;
}

#cloudAuthView .cloud-backup-action--move:hover {
    background-color: #dbeafe;
}

/* 深色模式下的云端设置面板适配 */
.dark-mode #cloudSettings .bg-white {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #cloudSettings .bg-gray-50,
.dark-mode #cloudSettings .bg-blue-50\/30,
.dark-mode #cloudSettings .bg-blue-50\/40,
.dark-mode #cloudSettings .bg-blue-50\/80 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #cloudSettings .text-gray-800,
.dark-mode #cloudSettings .text-blue-800 {
    color: #e2e8f0 !important;
}

.dark-mode #cloudSettings .text-gray-500,
.dark-mode #cloudSettings .text-gray-600,
.dark-mode #cloudSettings .text-gray-700 {
    color: #a0aec0 !important;
}

.dark-mode #cloudSettings input[type="text"],
.dark-mode #cloudSettings input[type="email"],
.dark-mode #cloudSettings input[type="password"] {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #cloudSettings input::placeholder {
    color: var(--text-secondary) !important;
}

.dark-mode #settingsModal .personal-profile-card {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode #settingsModal #resetPersonalProfileBtn {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode #settingsModal #resetPersonalProfileBtn:hover {
    background-color: var(--bg-tertiary, #374151) !important;
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal .personal-profile-input[type="text"],
.dark-mode #settingsModal .personal-profile-input {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal .personal-profile-input[type="text"]::placeholder,
.dark-mode #settingsModal .personal-profile-input[type="date"]::placeholder {
    color: var(--text-secondary) !important;
}

.dark-mode #settingsModal .personal-profile-birthday-grid select {
    color-scheme: dark;
}

/* 适配没有账号去注册的文字颜色 */
.dark-mode #cloudToggleRegisterBtn,
.dark-mode #cloudToggleLoginBtn {
    color: #e2e8f0 !important;
    background-color: transparent !important;
    border-color: #4a5568 !important;
}

.dark-mode #cloudToggleRegisterBtn:hover,
.dark-mode #cloudToggleLoginBtn:hover {
    background-color: #4a5568 !important;
}

.dark-mode #cloudSettings button.bg-gray-100 {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.dark-mode #cloudSettings button.bg-gray-100:hover {
    background-color: #2d3748 !important;
}

.dark-mode #cloudLoginBtn,
.dark-mode #cloudRegisterBtn {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid rgba(241, 157, 170, 0.3) !important;
}

.dark-mode #cloudLoginBtn:hover,
.dark-mode #cloudRegisterBtn:hover {
    background-color: var(--primary-hover) !important;
}

.dark-mode #cloudToggleRegisterBtn,
.dark-mode #cloudToggleLoginBtn,
.dark-mode #cloudLogoutBtn,
.dark-mode #cloudSendCodeBtn {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode #cloudToggleRegisterBtn:hover,
.dark-mode #cloudToggleLoginBtn:hover,
.dark-mode #cloudLogoutBtn:hover,
.dark-mode #cloudSendCodeBtn:hover {
    background-color: var(--bg-elevated) !important;
    color: #ffffff !important;
}

.dark-mode #cloudSettings a.text-blue-500 {
    color: #f5a7b5 !important;
}

.dark-mode #cloudSettings a.text-blue-500:hover {
    color: #f8bdc8 !important;
}

.dark-mode #cloudAuthView > div:first-child {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #cloudAuthView .cloud-backup-list,
.dark-mode #cloudBackupsList,
.dark-mode #autoCloudBackupsList,
.dark-mode #intervalCloudBackupsList {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #cloudAuthView .cloud-backup-item,
.dark-mode #cloudAuthView .cloud-backup-empty,
.dark-mode #cloudBackupsList > div,
.dark-mode #autoCloudBackupsList > div,
.dark-mode #intervalCloudBackupsList > div {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #cloudAuthView .cloud-backup-item--auto,
.dark-mode #cloudAuthView .cloud-backup-item--interval,
.dark-mode #cloudAuthView .cloud-backup-item--manual {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #cloudAuthView .cloud-backup-item:hover,
.dark-mode #cloudBackupsList > div:hover,
.dark-mode #autoCloudBackupsList > div:hover,
.dark-mode #intervalCloudBackupsList > div:hover {
    background-color: var(--bg-elevated) !important;
}

.dark-mode #cloudBackupsList .text-gray-800,
.dark-mode #autoCloudBackupsList .text-gray-800,
.dark-mode #intervalCloudBackupsList .text-gray-800,
.dark-mode #cloudBackupsList .text-blue-800,
.dark-mode #autoCloudBackupsList .text-blue-800,
.dark-mode #intervalCloudBackupsList .text-blue-800 {
    color: var(--text-primary) !important;
}

.dark-mode #cloudBackupsList .text-gray-500,
.dark-mode #autoCloudBackupsList .text-gray-500,
.dark-mode #intervalCloudBackupsList .text-gray-500 {
    color: var(--text-secondary) !important;
}

/* 适配云端备份列表中的操作按钮 */
.dark-mode #cloudAuthView .cloud-backup-action {
    background-color: transparent !important;
}

.dark-mode #cloudAuthView .cloud-backup-action--restore,
.dark-mode #cloudSettings button.bg-green-50 {
    border-color: #4ade80 !important;
    color: #4ade80 !important;
}

.dark-mode #cloudAuthView .cloud-backup-action--restore:hover,
.dark-mode #cloudSettings button.bg-green-50:hover {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

.dark-mode #cloudAuthView .cloud-backup-action--delete,
.dark-mode #cloudSettings button.bg-red-50 {
    border-color: #f87171 !important;
    color: #f87171 !important;
}

.dark-mode #cloudAuthView .cloud-backup-action--delete:hover,
.dark-mode #cloudSettings button.bg-red-50:hover {
    background-color: rgba(248, 113, 113, 0.1) !important;
}

.dark-mode #cloudAuthView .cloud-backup-action--move,
.dark-mode #cloudSettings button.bg-blue-50 {
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

.dark-mode #cloudAuthView .cloud-backup-action--move:hover,
.dark-mode #cloudSettings button.bg-blue-50:hover {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

.dark-mode #autoCloudBackupSwitch + div,
.dark-mode #intervalCloudBackupSwitch + div,
.dark-mode #liveSyncSwitch + div {
    background-color: #3a3d41 !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode #autoCloudBackupSwitch + div::after,
.dark-mode #intervalCloudBackupSwitch + div::after,
.dark-mode #liveSyncSwitch + div::after {
    background-color: #d1d5db !important;
    border-color: transparent !important;
}

.dark-mode #autoCloudBackupSwitch:checked + div,
.dark-mode #intervalCloudBackupSwitch:checked + div,
.dark-mode #liveSyncSwitch:checked + div {
    background-color: var(--primary) !important;
}

.dark-mode #autoCloudBackupSwitch:focus + div,
.dark-mode #intervalCloudBackupSwitch:focus + div,
.dark-mode #liveSyncSwitch:focus + div {
    box-shadow: 0 0 0 3px rgba(241, 157, 170, 0.18) !important;
}

/* 恢复进度/说明浮层：暗色适配 */
.dark-mode #cloudRestoreOverlay .bg-white,
.dark-mode #cloudRestoreHelpOverlay .bg-white {
    background-color: #2b2d31 !important;
}
.dark-mode #cloudRestoreOverlayText {
    color: #e5e7eb !important;
}
.dark-mode #cloudRestoreOverlayCount {
    color: #9ca3af !important;
}
.dark-mode #cloudRestoreOverlay .bg-gray-200 {
    background-color: #3a3d41 !important;
}
.dark-mode #cloudRestoreHelpOverlay .text-gray-800 {
    color: #e5e7eb !important;
}
.dark-mode #cloudRestoreHelpOverlay .text-gray-600 {
    color: #a8b0bb !important;
}

/* 未保存更改提示浮层：暗色适配（标题白/正文亮灰/退出按钮描边可见） */
.dark-mode #unsavedChangesTitle {
    color: #f3f4f6 !important;
}
.dark-mode #unsavedChangesDesc {
    color: #d1d5db !important;
}
.dark-mode #exitWithoutSaveBtn {
    background-color: transparent !important;
    border: 1px solid #6b7280 !important;
    color: #f87171 !important;
}
.dark-mode #exitWithoutSaveBtn:hover {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

.image-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spinner 0.8s linear infinite;
}

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

/* 左右侧栏深色模式优化 */
.dark-mode #chatListSidebar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.dark-mode #profileSidebar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.02);
}

.dark-mode #chatListSidebar .chat-list-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    backdrop-filter: none;
}

.dark-mode #profileSidebar > .p-4.border-b.border-accent\/30 {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

.dark-mode #chatListContainer,
.dark-mode #addressBookContainer,
.dark-mode #discoverContainer,
.dark-mode #profileSidebar .p-6.flex-1 {
    background: transparent !important;
}

.dark-mode #searchInput {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.dark-mode #searchInput::placeholder {
    color: var(--text-secondary) !important;
}

.dark-mode #chatListSidebar .chat-item,
.dark-mode #chatListSidebar .character-item {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

.dark-mode #chatListSidebar .chat-item:hover,
.dark-mode #chatListSidebar .character-item:hover {
    background-color: var(--bg-elevated) !important;
}

.dark-mode #chatListSidebar .current-contact {
    background-color: rgba(241, 157, 170, 0.12) !important;
    border-left-color: #f19daa !important;
    box-shadow: inset 0 0 0 1px rgba(241, 157, 170, 0.16) !important;
}

.dark-mode #chatListSidebar .academy-title {
    background-color: rgba(241, 157, 170, 0.1) !important;
    color: #f5c1cc !important;
    border: 1px solid rgba(241, 157, 170, 0.16) !important;
}

.dark-mode #chatListSidebar .chat-item-time,
.dark-mode #chatListSidebar .chat-item-subtitle,
.dark-mode #chatListSidebar .pin-button,
.dark-mode #profileSidebar #profile-school,
.dark-mode #profileSidebar h4 {
    color: var(--text-secondary) !important;
}

.dark-mode #profileSidebar .bg-neutral\/50 {
    background-color: var(--bg-accent) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode #profileSidebar #profile-name,
.dark-mode #profileSidebar #profile-description,
.dark-mode #profileSidebar #profile-age,
.dark-mode #profileSidebar #profile-birthday,
.dark-mode #profileSidebar #profile-height,
.dark-mode #profileSidebar #profile-school-detail {
    color: var(--text-primary) !important;
}

.dark-mode .chat-detail-view,
.dark-mode .chat-logs-container,
.dark-mode #tab-content-chat,
.dark-mode #chatArea,
.dark-mode #chatLog {
    background-color: var(--bg-primary) !important;
}

.dark-mode #userInput,
.dark-mode #historySearchInput,
.dark-mode #settingsModal select,
.dark-mode #settingsModal input[type="text"],
.dark-mode #settingsModal input[type="number"],
.dark-mode #settingsModal input[type="password"] {
    background-color: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal #toggleCustomApiKeyVisibility {
    background-color: var(--bg-accent) !important;
    color: var(--text-secondary) !important;
    border-left-color: var(--border-color) !important;
}

.dark-mode #settingsModal #toggleCustomApiKeyVisibility:hover,
.dark-mode #settingsModal #toggleCustomApiKeyVisibility:active {
    background-color: var(--bg-elevated) !important;
    color: #ffffff !important;
}

.dark-mode #settingsModal select {
    color-scheme: dark;
}

.dark-mode #settingsModal select option,
.dark-mode #settingsModal select optgroup {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal #modelList {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal #modelList > div {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #settingsModal #modelList button,
.dark-mode #settingsModal #modelList [role="button"],
.dark-mode #settingsModal #modelList a,
.dark-mode #settingsModal #modelList .model-list-item,
.dark-mode #settingsModal #modelList > div > div {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #settingsModal #modelList button:hover,
.dark-mode #settingsModal #modelList button:focus,
.dark-mode #settingsModal #modelList [role="button"]:hover,
.dark-mode #settingsModal #modelList [role="button"]:focus,
.dark-mode #settingsModal #modelList a:hover,
.dark-mode #settingsModal #modelList a:focus,
.dark-mode #settingsModal #modelList .model-list-item:hover,
.dark-mode #settingsModal #modelList .model-list-item:focus,
.dark-mode #settingsModal #modelList > div > div:hover,
.dark-mode #settingsModal #modelList > div > div:focus {
    background-color: var(--bg-elevated) !important;
    color: #ffffff !important;
    outline: none !important;
}

.dark-mode #settingsModal #apiPresetsList {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal #apiPresetsList > div,
.dark-mode #settingsModal #apiPresetsContent > div {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #settingsModal #apiPresetsList .sticky,
.dark-mode #settingsModal #apiPresetsList .sticky.top-0 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #settingsModal #apiPresetsList .text-gray-700,
.dark-mode #settingsModal #apiPresetsList .text-gray-500,
.dark-mode #settingsModal #apiPresetsList .text-gray-400 {
    color: var(--text-primary) !important;
}

.dark-mode #settingsModal #apiPresetsList .api-preset-item {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

.dark-mode #settingsModal #apiPresetsList .api-preset-item:hover,
.dark-mode #settingsModal #apiPresetsList .api-preset-item:focus,
.dark-mode #settingsModal #apiPresetsList .api-preset-item:hover .text-gray-700,
.dark-mode #settingsModal #apiPresetsList .api-preset-item:hover .text-gray-500,
.dark-mode #settingsModal #apiPresetsList .api-preset-item:focus .text-gray-700,
.dark-mode #settingsModal #apiPresetsList .api-preset-item:focus .text-gray-500 {
    background-color: var(--bg-elevated) !important;
    color: #ffffff !important;
    outline: none !important;
}

.dark-mode #userInput::placeholder,
.dark-mode #historySearchInput::placeholder,
.dark-mode #settingsModal input[type="text"]::placeholder,
.dark-mode #settingsModal input[type="number"]::placeholder,
.dark-mode #settingsModal input[type="password"]::placeholder {
    color: var(--text-secondary) !important;
}

#settingsModal input[type="password"]::-ms-reveal,
#settingsModal input[type="password"]::-ms-clear {
    display: none;
}

.dark-mode .message-scheme-current .message:not(.justify-end) .bg-white,
.dark-mode .message:not(.justify-end) .bg-white {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .message:not(.justify-end) .text-gray-500,
.dark-mode .message:not(.justify-end) .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark-mode .bg-neutral {
    background-color: var(--bg-accent) !important;
    color: var(--text-primary) !important;
}

/* ===== 括号效果（旁白 em）独占一行：修复旁白与正文连排读不通的问题 =====
   旁白是动作描写，行内连排会与对白糊成一句（如"看着老师那爱丽丝继续说啦"）；
   这里让 em 块级显示、上下留白，旁白/对白自然分离。仅影响 .message 内的 em。 */
.message em,
.chat-message em {
    display: block;
    margin: 4px 0;
    line-height: 1.7;
    opacity: 0.92;
}

/* ===== 全局按钮样式归一（2026-10-08：修复个别内核“灰色圆块”按钮）=====
   部分 WebKit/X5/厂商内核在 appearance:button 默认态下会画出原生按钮皮肤（灰底/边框/圆角
   盖住作者样式，表现为顶栏/底部 Tab/操作栏按钮一排“灰色圆块”，与是否点击无关）。
   这里显式关闭 appearance 并清空底色/边框，让所有内核统一采纳作者样式；
   带背景色类（bg-primary 等）的按钮不受影响（类选择器优先级高于元素选择器）。 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    background-color: transparent;
    border: 0;
}