/* 搜索聊天记录模态框动画效果 */
#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;
    }
    .math-box {
        display: inline-block;
        padding: 2px 6px;
        background: #fff0f5;
        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: #121212; /* 深灰背景 */
    --bg-secondary: #1e1e1e; /* 次级深灰 */
    --bg-accent: #2d2d2d; /* 强调灰色 */
    --text-primary: #e0e0e0; /* 主文字颜色 */
    --text-secondary: #424242; /* 次要文字颜色 */
    --border-color: #424242; /* 边框颜色 */
    --primary: #424242; /* 主色调蓝色 */
    --primary-hover: #90caf9; /* 悬停时的浅蓝色 */
}

.dark-mode body {
    background-color: var(--bg-primary);
    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 {
    border-color: var(--border-color) !important;
}

.dark-mode .bg-white\/70 {
    background-color: #3C3C3C !important; /* 半透明背景 */
}

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

.dark-mode .math-box {
    background: #2a2a2a !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: #3C3C3C !important;
}

/* 深色模式下的置顶联系人样式 */
.dark-mode .pinned-contact {
    background-color: rgba(251, 191, 36, 0.1) !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;
}

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

.dark-mode .message .bg-primary {
    background-color: #1a1a1a !important; /* 深一点的蓝色 */
}

/* 顶部导航栏 */
.dark-mode header {
    background-color: #1a1a1a !important;
}

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

/* 右侧信息面板 */
.dark-mode aside.w-80 {
    background-color: #1a1a1a !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 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: #2d3748 !important; /* 深色背景 */
    color: #e2e8f0 !important; /* 浅色文字 */
    border-color: #4a5568 !important;
}

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

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

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



@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .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,
.dark-mode #chatHistorySection {
    background-color: #1a202c !important;
    color: #cbd5e0 !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;
}

/* 白天模式下角色选择栏文字颜色为黑色 */
#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 #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);
}

/* 表情图片保持小尺寸 */
.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;
}

/* 深色模式下的云端设置面板适配 */
.dark-mode #cloudSettings .bg-white {
    background-color: #2d3748 !important;
    border-color: #4a5568 !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: #1a202c !important;
    border-color: #4a5568 !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: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

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

/* 适配没有账号去注册的文字颜色 */
.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 #cloudSettings button.bg-green-50,
.dark-mode #cloudSettings button.bg-red-50,
.dark-mode #cloudSettings button.bg-blue-50 {
    background-color: transparent !important;
}

.dark-mode #cloudSettings button.bg-green-50 {
    border-color: #4ade80 !important;
    color: #4ade80 !important;
}
.dark-mode #cloudSettings button.bg-green-50:hover {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

.dark-mode #cloudSettings button.bg-red-50 {
    border-color: #f87171 !important;
    color: #f87171 !important;
}
.dark-mode #cloudSettings button.bg-red-50:hover {
    background-color: rgba(248, 113, 113, 0.1) !important;
}

.dark-mode #cloudSettings button.bg-blue-50 {
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}
.dark-mode #cloudSettings button.bg-blue-50:hover {
    background-color: rgba(96, 165, 250, 0.1) !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); }
}