:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --shadow: 0 2px 4px rgba(0,0,0,0.1);
}

[data-theme="dark"] {
    --bg-primary: #1f2937;
    --bg-secondary: #374151;
    --bg-tertiary: #4b5563;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --border-color: #4b5563;
    --shadow: 0 2px 4px rgba(0,0,0,0.2);
}

body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    border-radius: 16px;
}

.card-secondary {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.border-custom {
    border-color: var(--border-color);
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* 优化滚动性能 */
.smooth-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    transform: translateZ(0);
    /* GPU加速 */
    backface-visibility: hidden;
    perspective: 1000;
    /* 优化渲染层 */
    contain: layout style paint;
}

/* 任务项优化 - 更现代化设计 */
.task-item {
    /* GPU加速单个任务项 */
    transform: translateZ(0);
    backface-visibility: hidden;
    /* 包含样式和布局计算 */
    contain: layout style;
    /* 增强视觉效果 */
    border: 1px solid rgba(0,0,0,0.08);
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    /* 拖拽样式 */
    cursor: grab;
}

.task-item:hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .task-item {
    background: linear-gradient(to bottom, #374151, #2d3748);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
}

[data-theme="dark"] .task-item:hover {
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);
}

/* 下拉刷新样式 */
.pull-refresh {
    position: relative;
}

.pull-refresh-indicator {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    transition: transform 0.3s ease;
    z-index: 10;
}

.pull-refresh-indicator.active {
    transform: translateY(60px);
}

.refresh-icon {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.refresh-icon.spinning {
    animation: spin 1s linear infinite;
}

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

/* 按钮样式优化 - 增强悬停效果 */
.task-button {
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
}

.task-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 浅色模式下按钮悬停效果 */
.task-button.hover\:bg-purple-50:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(147, 51, 234, 0.15);
}

.task-button.hover\:bg-green-50:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.15);
}

.task-button.hover\:bg-red-50:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.15);
}

.task-button.hover\:bg-blue-50:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}

.task-button.hover\:bg-orange-50:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.15);
}

/* 备注输入框样式 */
.task-note {
    transition: all 0.2s ease;
    font-size: 11px;
    min-height: 24px;
}

.task-note:focus {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 导航栏整体优化 - 防止内容被挤压 */
nav {
    overflow-x: auto; /* 当内容超出时显示水平滚动条 */
    overflow-y: hidden;
}

nav .flex {
    min-width: max-content; /* 确保内容不被压缩 */
}

/* 当屏幕宽度不足时的特殊处理 */
@media (max-width: 1100px) {
    nav {
        min-width: auto;
    }

    /* 导航按钮文字缩短 */
    .nav-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* 备份按钮在较小屏幕上隐藏 */
    #backupBtn {
        display: none !important;
    }
}

@media (max-width: 950px) {
    /* 进一步缩小按钮 */
    .nav-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    nav h1 {
        font-size: 18px !important;
    }

    #settingsBtn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 850px) {
    /* 导航按钮只显示图标 */
    .nav-btn {
        padding: 6px 8px !important;
        font-size: 16px !important;
        min-width: 40px;
        text-align: center;
    }

    /* 隐藏按钮文字，只显示emoji */
    #videoPageBtn { font-size: 0; }
    #videoPageBtn::before { content: "📹"; font-size: 16px; }

    #imagePageBtn { font-size: 0; }
    #imagePageBtn::before { content: "🎨"; font-size: 16px; }

    #mjPageBtn { font-size: 0; }
    #mjPageBtn::before { content: "✨"; font-size: 16px; }

    #chatPageBtn { font-size: 0; }
    #chatPageBtn::before { content: "💬"; font-size: 16px; }

    #settingsBtn { font-size: 0; }
    #settingsBtn::before { content: "⚙️"; font-size: 14px; }
}

/* 导航栏滚动条样式 */
nav::-webkit-scrollbar {
    height: 3px;
}

nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

nav::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 2px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
}

[data-theme="dark"] nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] nav::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] nav::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.6);
}

/* 导航按钮样式 */
.nav-btn {
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    flex-shrink: 0; /* 防止按钮被压缩 */
    white-space: nowrap; /* 防止文字换行 */
}

.nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.nav-btn.active {
    background-color: #3b82f6;
    color: white;
    border-color: #2563eb;
}

[data-theme="dark"] .nav-btn:hover {
    background-color: #374151;
    color: #f9fafb;
}

[data-theme="dark"] .nav-btn.active {
    background-color: #3b82f6;
    color: white;
}

/* 导航栏左侧和右侧容器优化 */
nav .flex.items-center.space-x-6,
nav .flex.items-center.space-x-3 {
    flex-shrink: 0; /* 防止容器被压缩 */
}

/* 标题也不应该被压缩 */
nav h1 {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 图像网格显示样式 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.image-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
}

.image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* 正方形容器样式 */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* 如果浏览器不支持 aspect-ratio，使用 padding hack */
@supports not (aspect-ratio: 1 / 1) {
    .aspect-square {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }
    
    .aspect-square img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* 页面容器样式 */
.page-container {
    display: none !important;
}

.page-container.active {
    display: flex !important;
}

/* ===== 响应式设计 ===== */

/* 中等宽度屏幕优化 - 800px到1024px */
@media (min-width: 800px) and (max-width: 1023px) {
    /* 导航栏在中等屏幕上的优化 */
    nav {
        min-width: auto; /* 移除最小宽度限制 */
    }

    .nav-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    nav h1 {
        font-size: 20px !important;
    }

    /* 右侧按钮稍微缩小 */
    #backupBtn,
    #settingsBtn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
}

/* 较小桌面屏幕优化 - 900px到1200px */
@media (min-width: 900px) and (max-width: 1199px) {
    /* 页面布局微调 */
    .page-container .w-64 {
        width: 220px !important; /* 稍微缩小左侧栏 */
    }

    .page-container .w-80 {
        width: 300px !important; /* 稍微缩小中间栏 */
    }
}
/* 移动端优化 - 小于768px */
@media (max-width: 767px) {
    /* 导航栏响应式 */
    nav {
        padding: 8px 16px !important;
        height: auto !important;
        min-height: 60px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    nav .flex {
        flex-wrap: nowrap !important;
        gap: 8px;
        min-width: max-content;
    }

    nav h1 {
        font-size: 18px !important;
        margin-right: 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .nav-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        min-width: auto;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* 导航按钮容器 */
    nav .flex.items-center.space-x-6 {
        flex-wrap: nowrap !important;
        gap: 4px;
        flex-shrink: 0;
    }

    nav .flex.items-center.space-x-3 {
        flex-wrap: nowrap !important;
        gap: 4px;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* 确保右侧按钮组不被压缩 */
    nav .flex.items-center.space-x-3 {
        min-width: max-content;
    }

    /* 导航栏滚动条样式 */
    nav::-webkit-scrollbar {
        height: 2px;
    }

    nav::-webkit-scrollbar-track {
        background: transparent;
    }

    nav::-webkit-scrollbar-thumb {
        background: rgba(156, 163, 175, 0.5);
        border-radius: 1px;
    }

    [data-theme="dark"] nav::-webkit-scrollbar-thumb {
        background: rgba(75, 85, 99, 0.7);
    }

    /* 页面布局调整为垂直堆叠 */
    .page-container.active {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    /* 左侧文件夹列表 - 移动端变为水平滚动 */
    .page-container .w-64 {
        width: 100% !important;
        height: auto !important;
        max-height: 120px !important;
        flex-shrink: 0;
    }

    .page-container .w-64 .flex-1 {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .page-container .w-64 #folderList,
    .page-container .w-64 #imageFolderList,
    .page-container .w-64 #mjFolderList,
    .page-container .w-64 #chatFolderList {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 8px !important;
        white-space: nowrap;
    }

    .page-container .w-64 .folder-item {
        min-width: 120px !important;
        flex-shrink: 0;
    }

    /* 中间操作面板 - 移动端全宽 */
    .page-container .w-80 {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
    }

    /* 右侧结果面板 - 移动端全宽 */
    .page-container .flex-1 {
        width: 100% !important;
        height: auto !important;
        min-height: 300px !important;
        flex: 1 !important;
    }

    /* 聊天页面特殊处理 */
    #chatPage .w-64,
    #chatPage .w-80 {
        display: none !important; /* 移动端隐藏侧边栏 */
    }

    #chatPage .flex-1 {
        width: 100% !important;
    }

    /* 移动端菜单按钮显示 */
    #mobileMenuBtn {
        display: block !important;
    }

    /* 聊天界面移动端优化 */
    #chatMessages {
        padding: 8px !important; /* 减小聊天区域内边距 */
    }

    /* 聊天输入区域移动端优化 */
    #chatPage .border-t.border-custom {
        padding: 8px !important;
    }

    #chatPage textarea {
        min-height: 40px !important; /* 减小输入框最小高度 */
        font-size: 14px !important;
    }

    #chatPage button {
        padding: 8px 12px !important; /* 减小按钮尺寸 */
        font-size: 12px !important;
    }
}

/* 平板端优化 - 768px到1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 导航栏按钮缩小 */
    .nav-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    /* 左侧文件夹列表缩小 */
    .page-container .w-64 {
        width: 200px !important; /* 从256px缩小到200px */
    }

    /* 中间操作面板缩小 */
    .page-container .w-80 {
        width: 280px !important; /* 从320px缩小到280px */
    }

    /* 聊天页面在平板上显示中间列表 */
    #chatPage .w-64 {
        display: none !important; /* 隐藏文件夹列表 */
    }

    #chatPage .w-80 {
        width: 250px !important; /* 缩小对话列表 */
    }
}

/* 大屏幕优化 - 大于1024px */
@media (min-width: 1024px) {
    /* 聊天页面显示所有列 */
    #chatPage .w-64,
    #chatPage .w-80 {
        display: flex !important;
    }

    /* 移动端菜单按钮隐藏 */
    #mobileMenuBtn {
        display: none !important;
    }
}

/* 超小屏幕优化 - 小于480px */
@media (max-width: 479px) {
    /* 导航栏进一步简化 */
    nav {
        padding: 6px 8px !important;
        min-height: 50px !important;
    }

    nav h1 {
        font-size: 14px !important;
        margin-right: 4px;
    }

    .nav-btn {
        padding: 4px 6px !important;
        font-size: 14px !important;
        min-width: 32px;
        text-align: center;
        border-radius: 6px !important;
    }

    /* 导航按钮只显示emoji */
    .nav-btn {
        font-size: 16px !important;
        line-height: 1;
    }

    /* 隐藏导航按钮中的文字，只保留emoji */
    .nav-btn::before {
        content: attr(data-emoji);
    }

    /* 为每个导航按钮设置emoji */
    #videoPageBtn::before { content: "📹"; }
    #imagePageBtn::before { content: "🎨"; }
    #mjPageBtn::before { content: "✨"; }
    #chatPageBtn::before { content: "💬"; }

    /* 隐藏按钮内的文字 */
    #videoPageBtn, #imagePageBtn, #mjPageBtn, #chatPageBtn {
        font-size: 0 !important;
        text-indent: -9999px;
        overflow: hidden;
    }

    #videoPageBtn::before, #imagePageBtn::before, #mjPageBtn::before, #chatPageBtn::before {
        font-size: 16px !important;
        text-indent: 0;
        display: block;
        line-height: 1;
    }

    /* 右侧按钮组简化 */
    #backupBtn {
        display: none !important; /* 隐藏备份按钮 */
    }

    #settingsBtn,
    #themeToggle {
        padding: 4px !important;
        min-width: 32px;
        font-size: 14px !important;
        border-radius: 6px !important;
    }

    /* 设置按钮只显示emoji */
    #settingsBtn {
        font-size: 0 !important;
        text-indent: -9999px;
    }

    #settingsBtn::before {
        content: "⚙️";
        font-size: 14px !important;
        text-indent: 0;
        display: block;
        line-height: 1;
    }

    /* 操作面板内边距减小 */
    .page-container .w-80 .p-6 {
        padding: 12px !important;
    }

    /* 文件夹项目更紧凑 */
    .folder-item {
        padding: 6px !important;
        min-width: 90px !important;
        font-size: 12px !important;
    }

    /* 移动端侧边栏宽度调整 */
    #mobileSidebar {
        width: 85vw !important;
        max-width: 300px !important;
    }

    /* 任务列表项在小屏幕上的优化 */
    .task-item {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .task-item h3 {
        font-size: 14px !important;
    }

    .task-item .text-sm {
        font-size: 11px !important;
    }

    /* 按钮组在小屏幕上的优化 */
    .task-item .flex.gap-2 {
        gap: 4px !important;
        flex-wrap: wrap;
    }

    .task-button {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-width: auto !important;
    }
}

/* ===== 移动端侧边栏样式 ===== */
#mobileOverlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#mobileSidebar {
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    max-width: 90vw;
}

[data-theme="dark"] #mobileSidebar {
    background-color: #1f2937 !important;
    border-right: 1px solid #374151;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

/* 移动端侧边栏内容样式 */
#mobileSidebarContent .card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 1rem;
}

#mobileSidebarContent .folder-item {
    margin-bottom: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

#mobileSidebarContent .folder-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
    transform: translateX(4px);
}

[data-theme="dark"] #mobileSidebarContent .folder-item:hover {
    background-color: rgba(96, 165, 250, 0.15);
}

/* 移动端侧边栏按钮样式 */
#mobileSidebarContent .btn-primary,
#mobileSidebarContent .btn-secondary {
    width: 100%;
    margin-bottom: 0.5rem;
    justify-content: center;
}

/* 移动端侧边栏输入框样式 */
#mobileSidebarContent .input-custom {
    width: 100%;
    margin-bottom: 0.75rem;
}

/* 移动端侧边栏标题样式 */
#mobileSidebarContent h2,
#mobileSidebarContent h3 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* 移动端侧边栏滚动条 */
#mobileSidebar::-webkit-scrollbar {
    width: 4px;
}

#mobileSidebar::-webkit-scrollbar-track {
    background: transparent;
}

#mobileSidebar::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 2px;
}

[data-theme="dark"] #mobileSidebar::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.7);
}

/* 移动端菜单按钮动画 */
#mobileMenuBtn {
    transition: all 0.2s ease;
}

#mobileMenuBtn:hover {
    transform: scale(1.05);
    background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] #mobileMenuBtn:hover {
    background-color: rgba(96, 165, 250, 0.15);
}

/* 移动端侧边栏关闭按钮 */
#closeMobileMenu {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
}

#closeMobileMenu:hover {
    color: #ef4444;
    transform: scale(1.1);
}

/* 移动端侧边栏动画优化 */
#mobileSidebar {
    will-change: transform;
}

#mobileOverlay {
    will-change: opacity;
}

/* 移动端侧边栏内容区域优化 */
#mobileSidebarContent {
    padding-bottom: 2rem; /* 底部留白，避免内容被遮挡 */
}

/* 移动端侧边栏中的文件夹列表优化 */
#mobileSidebarContent #folderList,
#mobileSidebarContent #imageFolderList,
#mobileSidebarContent #mjFolderList,
#mobileSidebarContent #chatFolderList {
    display: block !important; /* 覆盖响应式中的flex布局 */
    flex-direction: column !important;
    gap: 0.5rem !important;
}

#mobileSidebarContent .folder-item {
    min-width: auto !important;
    width: 100% !important;
}

/* ===== 横屏模式优化 ===== */
@media (max-height: 500px) and (orientation: landscape) {
    /* 导航栏高度减小 */
    nav {
        height: 50px !important;
        min-height: 50px !important;
        padding: 4px 16px !important;
    }

    nav h1 {
        font-size: 16px !important;
    }

    .nav-btn {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* 页面容器调整 */
    .page-container {
        padding: 4px !important;
        gap: 8px !important;
    }

    /* 移动端侧边栏在横屏时宽度调整 */
    #mobileSidebar {
        width: 60vw !important;
        max-width: 400px !important;
    }

    /* 任务项高度压缩 */
    .task-item {
        padding: 6px !important;
        margin-bottom: 4px !important;
    }

    /* 操作面板高度优化 */
    .page-container .w-80 {
        max-height: 40vh !important;
    }
}

/* ===== 超宽屏幕优化 ===== */
@media (min-width: 1440px) {
    /* 在超宽屏幕上增加侧边栏宽度 */
    .page-container .w-64 {
        width: 300px !important;
    }

    .page-container .w-80 {
        width: 400px !important;
    }

    /* 导航栏按钮可以显示更多内容 */
    .nav-btn {
        padding: 8px 16px !important;
    }
}

/* ===== 打印样式优化 ===== */
@media print {
    nav,
    #mobileOverlay,
    #mobileSidebar,
    .task-button,
    button {
        display: none !important;
    }

    .page-container {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .task-item {
        break-inside: avoid;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        padding: 1rem;
    }
}

[data-theme="dark"] .task-note {
    background-color: #4b5563;
    border-color: #6b7280;
    color: #e5e7eb;
}

[data-theme="dark"] .task-note:hover {
    background-color: #374151;
}

[data-theme="dark"] .task-note:focus {
    background-color: #1f2937;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

/* 深色模式下按钮悬停样式 - 增强版 */
[data-theme="dark"] .hover\:bg-purple-50:hover {
    background-color: rgba(147, 51, 234, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(147, 51, 234, 0.2);
}

[data-theme="dark"] .hover\:bg-green-50:hover {
    background-color: rgba(34, 197, 94, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .hover\:bg-blue-50:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .hover\:bg-orange-50:hover {
    background-color: rgba(249, 115, 22, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.2);
}

/* 深色模式下获取全部按钮样式 */
[data-theme="dark"] .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-green-100:hover {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="dark"] .text-green-600 {
    color: #34d399 !important;
}

[data-theme="dark"] .text-green-700:hover {
    color: #10b981 !important;
}

/* 拖拽样式 - 合并到上面的 .task-item 定义中 */
.task-item:active {
    cursor: grabbing;
}

/* 移除重复的拖拽样式定义，使用下面统一的样式 */

.task-item.drag-over {
    border-top: 3px solid #3b82f6;
    margin-top: 3px;
}

/* 拖拽手柄样式 - 简化 */
.drag-handle {
    cursor: grab;
    user-select: none;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.drag-handle:hover {
    opacity: 0.8;
}

.drag-handle:active {
    cursor: grabbing;
}

/* 拖拽时禁用其他区域的选择 */
.task-item[draggable="true"] {
    user-select: none;
}

/* 拖拽过程中的视觉反馈 - 极简流畅 */
.task-item.dragging {
    opacity: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    transition: none !important;
    cursor: grabbing;
}

/* 拖拽过程中禁用所有任务项的过渡动画，防止闪烁 */
.task-item.dragging,
.task-item.dragging ~ .task-item {
    transition: none !important;
}

/* 当任务列表处于拖拽状态时，为非拖拽元素启用位置过渡动画 */
.dragging-active .task-item:not(.dragging) {
    transition: transform 0.2s ease !important;
}

/* 拖拽中的元素禁用过渡动画 */
.dragging-active .task-item.dragging {
    transition: none !important;
}

/* 拖拽占位符样式 */
.drag-placeholder {
    height: 3px;
    background-color: #3b82f6;
    border-radius: 2px;
    margin: 8px 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

[data-theme="dark"] .drag-placeholder {
    background-color: #60a5fa;
}

.drag-handle {
    cursor: grab;
    padding: 4px;
    margin-right: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    user-select: none;
}

.drag-handle:hover {
    background-color: rgba(0,0,0,0.05);
}

[data-theme="dark"] .drag-handle:hover {
    background-color: rgba(255,255,255,0.05);
}

.drag-handle:active {
    cursor: grabbing;
}

/* 优化状态标签样式 - 更现代化设计 */
.status-primary { 
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-warning { 
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-success { 
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-error { 
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-default { 
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    border: none;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 深色模式下的状态样式 */
[data-theme="dark"] .status-primary { 
    background: linear-gradient(135deg, #1e40af, #1e3a8a);
    box-shadow: 0 2px 4px rgba(30, 64, 175, 0.3);
}
[data-theme="dark"] .status-warning { 
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3);
}
[data-theme="dark"] .status-success { 
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}
[data-theme="dark"] .status-error { 
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

/* 图像历史记录项现在使用统一的 .task-item 样式 */
[data-theme="dark"] .status-default { 
    background: linear-gradient(135deg, #4b5563, #374151);
    box-shadow: 0 2px 4px rgba(75, 85, 99, 0.3);
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

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

.input-custom {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 12px;
}

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

/* 浅色模式下的选择框样式 */
select.input-custom {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 深色模式下的输入框优化 */
[data-theme="dark"] .input-custom {
    background-color: #2d3748;
    border: 1px solid #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .input-custom:focus {
    background-color: #374151;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .input-custom::placeholder {
    color: #9ca3af;
}

/* 深色模式下特定区域的输入框 */
[data-theme="dark"] .border-purple-300 {
    border-color: #6b7280 !important;
    background-color: #374151 !important;
}

[data-theme="dark"] .border-blue-300 {
    border-color: #6b7280 !important;
    background-color: #374151 !important;
}

[data-theme="dark"] .border-green-300 {
    border-color: #6b7280 !important;
    background-color: #374151 !important;
}

[data-theme="dark"] .border-orange-300 {
    border-color: #6b7280 !important;
    background-color: #374151 !important;
}

/* 深色模式下的选择框样式 */
[data-theme="dark"] select.input-custom {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 深色模式下文本区域样式 */
[data-theme="dark"] textarea.input-custom {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
    resize: vertical;
}

[data-theme="dark"] textarea.input-custom:focus {
    background-color: #1f2937;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* 深色模式下任务项文字和背景优化 */
[data-theme="dark"] .task-item h3 {
    color: #f3f4f6 !important;
}

[data-theme="dark"] .task-item .text-gray-800 {
    color: #f3f4f6 !important;
}

[data-theme="dark"] .task-item .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] .task-item .bg-gray-100 {
    background-color: #4b5563 !important;
    color: #d1d5db !important;
}

[data-theme="dark"] .task-item .bg-gray-50 {
    background-color: #374151 !important;
    color: #d1d5db !important;
}

[data-theme="dark"] .task-item .bg-blue-50 {
    background-color: #1e3a8a !important;
    color: #dbeafe !important;
}

[data-theme="dark"] .task-item .text-gray-600 {
    color: #d1d5db !important;
}

[data-theme="dark"] .task-note {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

[data-theme="dark"] .task-note:hover {
    background-color: #4b5563 !important;
}

[data-theme="dark"] .task-note:focus {
    background-color: #1f2937 !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5) !important;
}

/* 深色模式下上传按钮样式 */
[data-theme="dark"] #uploadButton {
    background-color: #374151 !important;
    border-color: #6b7280 !important;
}

[data-theme="dark"] #uploadButton:hover {
    background-color: #4b5563 !important;
    border-color: #9ca3af !important;
}

[data-theme="dark"] #uploadButton .text-blue-600 {
    color: #60a5fa !important;
}

[data-theme="dark"] #uploadButton .text-green-600 {
    color: #34d399 !important;
}

[data-theme="dark"] #uploadButton.bg-green-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
}

/* 禁用状态的输入框样式 */
input.input-custom:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f9fafb;
}

[data-theme="dark"] input.input-custom:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #1f2937;
}

/* 开关样式优化 */
#allowUrlEdit {
    accent-color: #3b82f6;
}

/* 视频显示区域样式优化 */
.task-content video {
    object-fit: contain;
}

[data-theme="dark"] .task-content .bg-gray-50 {
    background-color: #374151 !important;
}

[data-theme="dark"] .task-content .bg-gray-100 {
    background-color: #4b5563 !important;
    color: #e5e7eb !important;
}

[data-theme="dark"] .task-content .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .task-content .hover\:bg-blue-100:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

/* 深色模式下设置弹窗样式 */
[data-theme="dark"] .border-gray-200 {
    border-color: #4b5563 !important;
}

[data-theme="dark"] .text-gray-700 {
    color: #e5e7eb !important;
}

[data-theme="dark"] .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

[data-theme="dark"] .border-yellow-200 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .text-yellow-600 {
    color: #fbbf24 !important;
}

[data-theme="dark"] .text-yellow-700 {
    color: #f59e0b !important;
}

/* API URL区域动画效果 */
#apiUrlSection {
    transition: all 0.3s ease;
    transform-origin: top;
}

#apiUrlSection.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#apiUrlSection:not(.hidden) {
    opacity: 1;
    max-height: 500px; /* 足够大的值来容纳内容 */
}

/* 深色模式下文件上传框样式 */
[data-theme="dark"] input[type="file"].input-custom {
    background-color: #374151;
    border: 2px dashed #6b7280;
    color: #d1d5db;
    border-radius: 16px;
    padding: 1rem;
}

[data-theme="dark"] input[type="file"].input-custom:hover {
    background-color: #4b5563;
    border-color: #9ca3af;
}

[data-theme="dark"] input[type="file"].input-custom:focus {
    background-color: #1f2937;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* 深色模式下各区域标签颜色 */
[data-theme="dark"] .text-purple-700 {
    color: #d1d5db !important;
}

[data-theme="dark"] .text-blue-700 {
    color: #d1d5db !important;
}

[data-theme="dark"] .text-purple-800 {
    color: #f3f4f6 !important;
}

/* MJ队列指示器深色主题适配 */
[data-theme="dark"] .bg-purple-100 {
    background-color: rgba(147, 51, 234, 0.2) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
}

/* 保留紫色悬停样式供其他组件使用 */
[data-theme="dark"] .hover\:bg-purple-50:hover {
    background-color: rgba(147, 51, 234, 0.15) !important;
}



/* 深色模式下模式指示器和徽章样式 */
[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .text-blue-800 {
    color: #93c5fd !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .text-green-800 {
    color: #86efac !important;
    font-weight: 600 !important;
}

/* 深色模式下区域背景调整 */
[data-theme="dark"] .bg-gradient-to-br.from-purple-50 {
    background: linear-gradient(to bottom right, #374151, #4b5563) !important;
    border-color: #6b7280 !important;
}

[data-theme="dark"] .bg-gradient-to-br.from-blue-50 {
    background: linear-gradient(to bottom right, #374151, #4b5563) !important;
    border-color: #6b7280 !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-green-50 {
    background: linear-gradient(to right, #374151, #4b5563) !important;
    border-color: #6b7280 !important;
}

.btn-primary {
    background-color: #1f2937;
    color: white;
    border-radius: 12px;
}

.btn-primary:hover:not(:disabled) {
    background-color: #374151;
}

[data-theme="dark"] .btn-primary {
    background-color: #f9fafb;
    color: #1f2937;
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    background-color: #e5e7eb;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 成功按钮样式 */
.btn-success {
    background-color: #10b981;
    color: white;
    border-radius: 12px;
}

.btn-success:hover:not(:disabled) {
    background-color: #059669;
}

[data-theme="dark"] .btn-success {
    background-color: #10b981;
    color: white;
}

[data-theme="dark"] .btn-success:hover:not(:disabled) {
    background-color: #047857;
}

.btn-success:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 次要按钮样式 */
.btn-secondary {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

[data-theme="dark"] .btn-secondary {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background-color: #4b5563;
    border-color: #6b7280;
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 通知样式 */
.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 1000;
    max-width: 400px;
    transform: translateX(-50%) translateY(-100px);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateX(-50%) translateY(0);
}

.notification-success {
    background-color: #dcfce7;
    border-color: #4ade80;
    color: #16a34a;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

.notification-error {
    background-color: #fecaca;
    border-color: #f87171;
    color: #dc2626;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

.notification-warning {
    background-color: #fef3c7;
    border-color: #facc15;
    color: #ca8a04;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

.notification-info {
    background-color: #dbeafe;
    border-color: #60a5fa;
    color: #2563eb;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

[data-theme="dark"] .notification-success {
    background-color: #14532d;
    border-color: #059669;
    color: #86efac;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

[data-theme="dark"] .notification-error {
    background-color: #7f1d1d;
    border-color: #dc2626;
    color: #fca5a5;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

[data-theme="dark"] .notification-warning {
    background-color: #78350f;
    border-color: #d97706;
    color: #fcd34d;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

[data-theme="dark"] .notification-info {
    background-color: #1e3a8a;
    border-color: #3b82f6;
    color: #93c5fd;
    border-width: 1px;
    border-radius: 8px;
    padding: 12px 16px;
}

/* 确认对话框样式 */
.confirm-dialog {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* 视频模态框专用样式 - 确保深色模式正确显示 */
.video-modal-card {
    background-color: #ffffff !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .video-modal-card {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
}

/* 视频模态框内部信息区域深色模式样式 */
[data-theme="dark"] .video-modal-card .bg-gray-50 {
    background-color: #374151 !important;
}

[data-theme="dark"] .video-modal-card .text-gray-700 {
    color: #e5e7eb !important;
}

[data-theme="dark"] .video-modal-card .text-gray-600 {
    color: #d1d5db !important;
}

[data-theme="dark"] .video-modal-card .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] .video-modal-card .bg-gray-100 {
    background-color: #4b5563 !important;
}

[data-theme="dark"] .video-modal-card .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .video-modal-card .text-blue-500 {
    color: #60a5fa !important;
}

/* 新增的美化样式 */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.folder-item {
    transition: all 0.2s ease;
    position: relative;
}

.folder-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 深色模式下文件夹悬停增强 */
[data-theme="dark"] .folder-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 确保文字在任何背景下都可见 */
.text-primary {
    color: var(--text-primary) !important;
}

/* 深色模式下悬停背景优化 */
[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: rgba(75, 85, 99, 0.3) !important;
    color: var(--text-primary) !important;
}

/* 文件夹项目文字确保可见性 */
.folder-item .font-medium,
.folder-item .text-xs {
    color: var(--text-primary);
}

.folder-item .text-gray-500 {
    color: var(--text-secondary);
}

/* 深色模式下历史记录项优化 */
[data-theme="dark"] .card-secondary:hover {
    background-color: rgba(75, 85, 99, 0.4) !important;
}

[data-theme="dark"] .card-secondary:hover * {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-secondary:hover .text-gray-500,
[data-theme="dark"] .card-secondary:hover .text-secondary {
    color: var(--text-secondary) !important;
}

/* 确保动态生成的文件夹和历史记录项在深色模式下文字可见 */
[data-theme="dark"] .folder-item:hover .font-medium {
    color: #f9fafb !important;
}

[data-theme="dark"] .folder-item:hover .text-xs {
    color: #d1d5db !important;
}

[data-theme="dark"] .folder-item:hover .text-gray-500 {
    color: #9ca3af !important;
}

/* 历史记录项文字增强 */
[data-theme="dark"] .card-secondary .font-medium {
    color: var(--text-primary);
}

[data-theme="dark"] .card-secondary .text-sm {
    color: var(--text-primary);
}

[data-theme="dark"] .card-secondary .text-xs {
    color: var(--text-secondary);
}

/* 按钮文字在深色模式下的可见性 */
[data-theme="dark"] .text-blue-500 {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-blue-500:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .text-red-500 {
    color: #f87171 !important;
}

[data-theme="dark"] .text-red-500:hover {
    color: #fca5a5 !important;
}

/* 特别针对悬停状态下的按钮文字 */
[data-theme="dark"] .card-secondary:hover .text-blue-500 {
    color: #93c5fd !important;
}

[data-theme="dark"] .card-secondary:hover .text-red-500 {
    color: #fca5a5 !important;
}

/* 文件夹选中状态样式 - 确保在任何情况下都可见 */
.folder-item.ring-2 {
    border: 2px solid #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.folder-item.ring-2:hover {
    border-color: #2563eb !important;
    background-color: rgba(37, 99, 235, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3), 0 4px 8px rgba(0,0,0,0.1) !important;
    transform: translateY(-1px);
}

/* 深色模式下的文件夹选中状态 */
[data-theme="dark"] .folder-item.ring-2 {
    border-color: #60a5fa !important;
    background-color: rgba(96, 165, 250, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .folder-item.ring-2:hover {
    border-color: #93c5fd !important;
    background-color: rgba(147, 197, 253, 0.2) !important;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.4), 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* 图像处理页面和MJ页面的文件夹选中状态 */
.folder-item.bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.folder-item.bg-blue-100:hover {
    background-color: rgba(37, 99, 235, 0.15) !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3), 0 4px 8px rgba(0,0,0,0.1) !important;
    transform: translateY(-1px);
}

/* 深色模式下图像处理页面的文件夹选中状态 */
[data-theme="dark"] .folder-item.bg-blue-100 {
    background-color: rgba(96, 165, 250, 0.15) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .folder-item.bg-blue-100:hover {
    background-color: rgba(147, 197, 253, 0.2) !important;
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.4), 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* 历史记录项优化样式 */
#imageHistoryList .card-secondary {
    margin-bottom: 0.5rem;
    min-height: auto;
    transition: all 0.2s ease;
}

#imageHistoryList .card-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#imageHistoryList .card-secondary:last-child {
    margin-bottom: 0;
}

/* 深色模式下的历史记录样式 */
[data-theme="dark"] #imageHistoryList .text-gray-700 {
    color: #e5e7eb !important;
}

/* 历史记录项间距优化 */
#imageHistoryList .space-y-2 > :not(:first-child) {
    margin-top: 0.5rem;
}

/* 显示所有按钮样式 */
#showAllImagesBtn {
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

#showAllImagesBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 深色模式下的显示所有按钮 */
[data-theme="dark"] #showAllImagesBtn {
    background-color: #374151 !important;
    color: #e5e7eb !important;
    border: 1px solid #4b5563;
}

[data-theme="dark"] #showAllImagesBtn:hover {
    background-color: #4b5563 !important;
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.4);
}

/* 图像项增强样式 */
.image-item {
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 深色模式下的图像项 */
[data-theme="dark"] .image-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .image-item .bg-white {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .image-item .text-gray-800 {
    color: #e5e7eb !important;
}

[data-theme="dark"] .image-item .text-gray-500 {
    color: #9ca3af !important;
}

/* 深色模式下的类型标识 */
[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .text-blue-800 {
    color: #93c5fd !important;
}

[data-theme="dark"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

[data-theme="dark"] .text-green-800 {
    color: #86efac !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: rgba(156, 163, 175, 0.2) !important;
}

[data-theme="dark"] .text-gray-800:not(.text-gray-800) {
    color: #d1d5db !important;
}

/* 深色模式下的总览信息卡片 */
[data-theme="dark"] .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, #374151, #4b5563) !important;
    border-color: #6b7280 !important;
}

/* line-clamp 样式 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* 复制提示词按钮样式 */
button[title="复制提示词"] {
    padding: 0.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1;
    transition: all 0.2s ease;
}

button[title="复制提示词"]:hover {
    background-color: rgba(59, 130, 246, 0.1);
    transform: scale(1.1);
}

/* 深色模式下的复制提示词按钮 */
[data-theme="dark"] button[title="复制提示词"]:hover {
    background-color: rgba(96, 165, 250, 0.2);
    color: #93c5fd !important;
}

/* 历史记录列表中的复制按钮优化 */
#imageHistoryList button[title="复制提示词"] {
    font-size: 0.75rem;
    padding: 0.125rem 0.25rem;
    min-width: auto;
}

#imageHistoryList button[title="复制提示词"]:hover {
    transform: scale(1.05);
}

/* 深色模式下历史记录中的复制按钮 */
[data-theme="dark"] #imageHistoryList button[title="复制提示词"] {
    color: #9ca3af;
}

[data-theme="dark"] #imageHistoryList button[title="复制提示词"]:hover {
    color: #60a5fa !important;
    background-color: rgba(96, 165, 250, 0.15) !important;
}

.section-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.section-card:hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* 美化渐变背景 */
[data-theme="dark"] .bg-gradient-to-br.from-blue-50 { background: linear-gradient(to bottom right, #1e3a8a, #1e40af); }
[data-theme="dark"] .bg-gradient-to-br.from-purple-50 { background: linear-gradient(to bottom right, #581c87, #7c3aed); }
[data-theme="dark"] .bg-gradient-to-br.from-orange-50 { background: linear-gradient(to bottom right, #c2410c, #ea580c); }
[data-theme="dark"] .bg-gradient-to-br.from-green-50 { background: linear-gradient(to bottom right, #166534, #16a34a); }
[data-theme="dark"] .bg-gradient-to-r.from-gray-50 { background: linear-gradient(to right, #374151, #1f2937); }
[data-theme="dark"] .bg-gradient-to-r.from-green-50 { background: linear-gradient(to right, #166534, #1e40af); }

/* 弹窗统一样式 - 从上方弹出 */
.modal-top {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 80px !important;
}

/* 进度条样式 */
.progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.progress-bar.visible {
    opacity: 1;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

/* 不同状态的进度条颜色 - 浅色主题 */
.progress-bar-fill.queued {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    width: 10%;
    animation: progress-pulse 2s infinite;
}

.progress-bar-fill.inqueue {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    width: 15%;
    animation: progress-pulse 2s infinite;
}

.progress-bar-fill.pending {
    background: linear-gradient(90deg, #6366f1, #4f46e5);
    width: 5%;
    animation: progress-pulse 2.5s infinite;
}

.progress-bar-fill.processing {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    width: 60%;
    animation: progress-shimmer 1.5s infinite;
}

.progress-bar-fill.in_progress {
    background: linear-gradient(90deg, #10b981, #059669);
    width: 85%;
    animation: progress-shimmer 1.2s infinite;
}

.progress-bar-fill.inprogress {
    background: linear-gradient(90deg, #10b981, #059669);
    width: 85%;
    animation: progress-shimmer 1.2s infinite;
}

.progress-bar-fill.completed {
    background: linear-gradient(90deg, #10b981, #059669);
    width: 100%;
    animation: none;
}

.progress-bar-fill.succeed {
    background: linear-gradient(90deg, #10b981, #059669);
    width: 100%;
    animation: none;
}

.progress-bar-fill.failed {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    width: 100%;
    animation: none;
}

.progress-bar-fill.cancelled {
    background: linear-gradient(90deg, #6b7280, #4b5563);
    width: 100%;
    animation: none;
}

/* 进度条动画 */
@keyframes progress-shimmer {
    0% { 
        background-position: -200% 0; 
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
    }
    100% { 
        background-position: 200% 0; 
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.1);
    }
}

@keyframes progress-pulse {
    0%, 100% { 
        opacity: 0.8;
        transform: scaleX(1);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1.05);
    }
}

/* 深色主题下的进度条动画 */
[data-theme="dark"] .progress-bar-fill {
    background-size: 200% 100%;
}

[data-theme="dark"] .progress-bar-fill.processing {
    animation: progress-shimmer-dark 1.5s infinite;
}

[data-theme="dark"] .progress-bar-fill.in_progress,
[data-theme="dark"] .progress-bar-fill.inprogress {
    animation: progress-shimmer-dark 1.2s infinite;
}

[data-theme="dark"] .progress-bar-fill.queued,
[data-theme="dark"] .progress-bar-fill.inqueue {
    animation: progress-pulse-dark 2s infinite;
}

[data-theme="dark"] .progress-bar-fill.pending {
    animation: progress-pulse-dark 2.5s infinite;
}

@keyframes progress-shimmer-dark {
    0% { 
        background-position: -200% 0; 
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
    }
    100% { 
        background-position: 200% 0; 
        box-shadow: 0 0 8px rgba(96, 165, 250, 0.2);
    }
}

@keyframes progress-pulse-dark {
    0%, 100% { 
        opacity: 0.9;
        transform: scaleX(1);
        box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1.03);
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
    }
}

/* 进度条添加闪光效果 */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 深色模式下的进度条 */
[data-theme="dark"] .progress-bar {
    background-color: #374151;
}

[data-theme="dark"] .progress-bar-fill::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

/* 深色主题下的进度条颜色 */
[data-theme="dark"] .progress-bar-fill.queued {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .progress-bar-fill.inqueue {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .progress-bar-fill.pending {
    background: linear-gradient(90deg, #818cf8, #6366f1);
    box-shadow: 0 0 8px rgba(129, 140, 248, 0.3);
}

[data-theme="dark"] .progress-bar-fill.processing {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .progress-bar-fill.in_progress {
    background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .progress-bar-fill.inprogress {
    background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .progress-bar-fill.completed {
    background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .progress-bar-fill.succeed {
    background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .progress-bar-fill.failed {
    background: linear-gradient(90deg, #f87171, #ef4444);
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .progress-bar-fill.cancelled {
    background: linear-gradient(90deg, #9ca3af, #6b7280);
    box-shadow: 0 0 8px rgba(156, 163, 175, 0.2);
}

/* 进度容器样式 */
.progress-container {
    margin: 6px 0;
    padding: 2px 0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.progress-container:hover {
    background-color: rgba(0,0,0,0.02);
}

[data-theme="dark"] .progress-container:hover {
    background-color: rgba(255,255,255,0.03);
}

/* 进度文本样式 */
.progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
}

.progress-text .progress-status {
    font-weight: 500;
    color: var(--text-primary);
    opacity: 0.9;
}

.progress-text .progress-time {
    opacity: 0.7;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: var(--text-secondary);
}

/* 深色模式下的进度文本 */
[data-theme="dark"] .progress-text .progress-status {
    color: #e5e7eb;
}

[data-theme="dark"] .progress-text .progress-time {
    color: #9ca3af;
}

/* 任务加载动画 */
.task-loading {
    position: relative;
}

.task-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    animation: loading 1.5s infinite;
    z-index: 1;
}

@keyframes loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 重命名弹窗动画 */
.animate-slide-down {
    animation: slideDown 0.4s ease-out;
    transform: translateY(0);
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 图像处理提示样式 ===== */
/* 浅色主题样式 */
.processing-notification {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 3px solid #0ea5e9;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.25);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    color: #0c4a6e;
}

.processing-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

.processing-notification .text-blue-800 {
    color: #1e40af !important;
}

.processing-notification .text-blue-700 {
    color: #1d4ed8 !important;
}

.processing-notification .text-blue-600 {
    color: #2563eb !important;
}

.processing-notification .bg-blue-200 {
    background-color: #bfdbfe !important;
}

.processing-notification .bg-blue-600 {
    background-color: #2563eb !important;
}

.processing-bar {
    animation: processing 2s ease-in-out infinite;
    width: 0%;
}

/* 深色主题样式 */
[data-theme="dark"] .processing-notification {
    background: linear-gradient(135deg, #2b2a2c 0%, #2d2a33 100%);
    border: 3px solid #3b373f;
    box-shadow: 0 8px 32px rgba(45, 44, 46, 0.4);
    color: #f3e8ff;
}

[data-theme="dark"] .processing-notification::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

[data-theme="dark"] .processing-notification .text-blue-800 {
    color: #f3e8ff !important;
}

[data-theme="dark"] .processing-notification .text-blue-700 {
    color: #e9d5ff !important;
}

[data-theme="dark"] .processing-notification .text-blue-600 {
    color: #d8b4fe !important;
}

[data-theme="dark"] .processing-notification .bg-blue-200 {
    background-color: #581c87 !important;
}

[data-theme="dark"] .processing-notification .bg-blue-600 {
    background-color: #a855f7 !important;
}

/* 动画定义 */
@keyframes processing {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 0%; }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.processing-notification .animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* MJ页面专用样式 */
.mj-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.mj-action-btn:hover {
    background-color: var(--bg-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mj-action-btn.active {
    background-color: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

.mj-action-btn.active:hover {
    background-color: #7c3aed;
}

/* 局部重绘工具按钮样式 */
#mjBrushTool.active,
#mjLassoTool.active {
    background-color: #3b82f6 !important;
    color: white !important;
    border-color: #2563eb !important;
}

#mjBrushTool.active:hover,
#mjLassoTool.active:hover {
    background-color: #2563eb !important;
}

/* 套索工具指针样式 */
#mjRegionCanvas.lasso-tool {
    cursor: crosshair;
}

#mjRegionCanvas.brush-tool {
    cursor: crosshair;
}

.mj-parameter-section {
    animation: fadeInUp 0.3s ease-in-out;
}

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

/* MJ任务卡片现在使用统一的 .task-item 样式 */

/* MJ状态标签 */
.mj-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.mj-status-badge.not-start {
    background-color: #f3f4f6;
    color: #374151;
}

.mj-status-badge.submitted {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.mj-status-badge.in-progress {
    background-color: #fef3c7;
    color: #d97706;
}

.mj-status-badge.success {
    background-color: #d1fae5;
    color: #065f46;
}

.mj-status-badge.failure {
    background-color: #fee2e2;
    color: #dc2626;
}

.mj-status-badge.modal {
    background-color: #e9d5ff;
    color: #7c3aed;
}

/* MJ进度条 */
.mj-progress-bar {
    width: 100%;
    background-color: #e5e7eb;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.mj-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a855f7);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* MJ按钮组 */
.mj-button-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* MJ按钮行 */
.mj-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mj-task-button {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 32px;
    min-width: 60px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}

.mj-task-button.primary {
    background-color: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

.mj-task-button.primary:hover {
    background-color: #7c3aed;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}

.mj-task-button.secondary {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.mj-task-button.secondary:hover {
    background-color: var(--bg-secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 特殊功能按钮样式 */
.mj-task-button[data-custom-id*="Inpaint"] {
    background: linear-gradient(45deg, #8b5cf6, #a855f7);
    color: white;
    border-color: #8b5cf6;
    font-weight: 600;
}

.mj-task-button[data-custom-id*="Inpaint"]:hover {
    background: linear-gradient(45deg, #7c3aed, #9333ea);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}

.mj-task-button[data-custom-id*="CustomZoom"] {
    background: linear-gradient(45deg, #059669, #10b981);
    color: white;
    border-color: #059669;
    font-weight: 600;
}

.mj-task-button[data-custom-id*="CustomZoom"]:hover {
    background: linear-gradient(45deg, #047857, #0d9488);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
}

.mj-task-button[data-custom-id*="animate"] {
    background: linear-gradient(45deg, #dc2626, #ef4444);
    color: white;
    border-color: #dc2626;
    font-weight: 600;
}

.mj-task-button[data-custom-id*="animate"]:hover {
    background: linear-gradient(45deg, #b91c1c, #dc2626);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

/* 扩展动画按钮样式 */
.mj-task-button[data-custom-id*="extend"] {
    background: linear-gradient(45deg, #f59e0b, #fbbf24);
    color: white;
    border-color: #f59e0b;
    font-weight: 600;
}

.mj-task-button[data-custom-id*="extend"]:hover {
    background: linear-gradient(45deg, #d97706, #f59e0b);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

/* 视频播放相关样式 */
.mj-result-video {
    border-radius: 8px;
    background: #000;
}

.mj-result-video:hover {
    opacity: 0.9;
}

/* 视频预览样式 */
.mj-image-preview video {
    background: #000;
    cursor: pointer;
}

.mj-image-preview video:hover {
    opacity: 0.8;
}

/* 视频封面容器 */
.mj-video-thumbnail {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.mj-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mj-video-thumbnail:hover img {
    transform: scale(1.05);
}

/* 视频播放按钮覆盖层 */
.mj-video-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mj-video-thumbnail:hover .mj-video-play-overlay {
    opacity: 1;
}

/* 播放按钮图标 */
.mj-video-play-button {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
    transition: all 0.3s ease;
}

.mj-video-play-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* 视频标识角标 */
.mj-video-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 视频时长显示 */
.mj-video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

/* 放大按钮特殊样式 */
.mj-task-button[data-custom-id*="upsample"] {
    background: linear-gradient(45deg, #2563eb, #3b82f6);
    color: white;
    border-color: #2563eb;
}

.mj-task-button[data-custom-id*="upsample"]:hover {
    background: linear-gradient(45deg, #1d4ed8, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(37, 99, 235, 0.3);
}

/* 重做放大按钮特殊样式 */
.mj-task-button[data-custom-id*="upsample_v6r1_2x"] {
    background: linear-gradient(45deg, #0891b2, #06b6d4);
    color: white;
    border-color: #0891b2;
    font-weight: 600;
    position: relative;
}

.mj-task-button[data-custom-id*="upsample_v6r1_2x"]:hover {
    background: linear-gradient(45deg, #0e7490, #0891b2);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(8, 145, 178, 0.4);
}

.mj-task-button[data-custom-id*="upsample_v6r1_2x"]:before {
    content: '🔄';
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 8px;
    opacity: 0.8;
}

/* 变化按钮样式 */
.mj-task-button[data-custom-id*="variation"] {
    background: linear-gradient(45deg, #7c3aed, #8b5cf6);
    color: white;
    border-color: #7c3aed;
}

.mj-task-button[data-custom-id*="variation"]:hover {
    background: linear-gradient(45deg, #6d28d9, #7c3aed);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(124, 58, 237, 0.3);
}

/* MJ图片预览 */
.mj-image-preview {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.mj-image-preview img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.mj-image-preview:hover img {
    transform: scale(1.05);
}

.mj-image-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mj-image-overlay:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.mj-image-overlay .overlay-buttons {
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
}

.mj-image-overlay:hover .overlay-buttons {
    opacity: 1;
    transform: translateY(0);
}

/* MJ分析结果样式 */
.mj-analysis-result {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.mj-analysis-result h4 {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.mj-analysis-result pre {
    font-size: 12px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 单独获取按钮样式 */
.individual-fetch-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
}

.individual-fetch-btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.individual-fetch-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.individual-fetch-btn:active {
    transform: translateY(0);
}

/* 深色模式下的单独获取按钮 */
[data-theme="dark"] .individual-fetch-btn {
    background-color: #3b82f6;
}

[data-theme="dark"] .individual-fetch-btn:hover {
    background-color: #2563eb;
}

[data-theme="dark"] .individual-fetch-btn:disabled {
    background-color: #4b5563;
}

/* 局部重绘编辑器样式 */
#mjRegionCanvas {
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

#mjRegionCanvas:hover {
    border-color: #8b5cf6;
}

#mjCanvasContainer {
    background-color: #f8fafc;
    background-image: 
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

[data-theme="dark"] #mjCanvasContainer {
    background-color: #1e293b;
    background-image: 
        linear-gradient(45deg, #334155 25%, transparent 25%), 
        linear-gradient(-45deg, #334155 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #334155 75%), 
        linear-gradient(-45deg, transparent 75%, #334155 75%);
}

/* 工具栏按钮样式 */
#mjZoomIn, #mjZoomOut, #mjClearMask, #mjUndoMask {
    transition: all 0.2s ease;
    font-weight: 500;
}

#mjZoomIn:hover, #mjZoomOut:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#mjClearMask:hover {
    background-color: #dc2626 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

#mjUndoMask:hover {
    background-color: #d97706 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
}

/* 画笔大小滑块 */
#mjBrushSize {
    background: linear-gradient(to right, #8b5cf6, #a855f7);
    border-radius: 10px;
    height: 6px;
    outline: none;
    transition: all 0.2s ease;
}

#mjBrushSize::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #8b5cf6;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

#mjBrushSize::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: #7c3aed;
}

/* 局部重绘编辑器响应式 */
@media (max-width: 768px) {
    #mjRegionEditor .card {
        max-width: 95vw;
        max-height: 95vh;
        margin: 0.5rem;
    }
}

/* 系统提示词模态框响应式 */
@media (max-width: 1024px) {
    #systemPromptModal .card {
        max-width: 95vw;
        margin: 1rem;
    }

    #systemPromptModal .grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #systemPromptModal #systemPromptInput {
        rows: 10;
    }
}

@media (max-width: 768px) {
    #systemPromptModal .card {
        max-width: 95vw;
        max-height: 95vh;
        margin: 0.5rem;
        padding: 1rem;
    }

    #systemPromptModal .modal-top {
        padding-top: 1rem !important;
    }

    #systemPromptModal #systemPromptInput {
        rows: 8;
    }

    /* 移动端下拉框样式优化 */
    #systemPromptModal #promptTemplateSelect {
        font-size: 14px;
        padding: 8px 12px;
    }

    #mjCanvasContainer {
        max-height: 40vh;
    }
    
    .flex-wrap > div {
        margin-bottom: 0.5rem;
    }
}

/* 自定义缩放输入验证样式 */
.border-red-500 {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444;
}

.border-green-500 {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 1px #10b981;
}

/* 自定义缩放模态框增强 */
#mjModalPromptInput.border-red-500 {
    background-color: #fef2f2;
}

#mjModalPromptInput.border-green-500 {
    background-color: #f0fdf4;
}

[data-theme="dark"] #mjModalPromptInput.border-red-500 {
    background-color: #450a0a;
    color: #fecaca;
}

[data-theme="dark"] #mjModalPromptInput.border-green-500 {
    background-color: #052e16;
    color: #bbf7d0;
}

/* 禁用按钮样式 */
#mjConfirmModal:disabled {
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

#mjConfirmModal:disabled:hover {
    background-color: #9ca3af !important;
    transform: none !important;
}

/* ========== 上传区域样式 ========== */
.upload-area {
    transition: all 0.3s ease;
    border-style: dashed;
    border-width: 2px;
    background-color: rgba(249, 250, 251, 0.5);
}

.upload-area:hover {
    background-color: rgba(249, 250, 251, 0.8);
    border-color: currentColor;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.upload-area.dragover {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    transform: scale(1.02);
}

/* 深色主题下的上传区域 */
[data-theme="dark"] .upload-area {
    background-color: rgba(31, 41, 55, 0.5);
    border-color: rgba(156, 163, 175, 0.5);
}

[data-theme="dark"] .upload-area:hover {
    background-color: rgba(31, 41, 55, 0.8);
    border-color: rgba(156, 163, 175, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .upload-area.dragover {
    border-color: #60a5fa !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

/* 上传区域聚焦状态（支持粘贴） */
.upload-area:focus {
    outline: none;
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .upload-area:focus {
    border-color: #60a5fa !important;
    background-color: rgba(96, 165, 250, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* 粘贴提示动画 */
.upload-area.paste-ready {
    animation: paste-pulse 2s ease-in-out infinite;
}

@keyframes paste-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
    }
}

[data-theme="dark"] .upload-area.paste-ready {
    animation: paste-pulse-dark 2s ease-in-out infinite;
}

@keyframes paste-pulse-dark {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.25);
    }
}

/* 对话列表拖拽样式 */
.chat-item {
    cursor: grab;
    user-select: none;
}

.chat-item:active {
    cursor: grabbing;
}

.chat-item.dragging {
    opacity: 0.8;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    transition: none !important;
    cursor: grabbing;
}

.chat-item.dragging .drag-handle {
    opacity: 1;
}

/* 对话列表拖拽状态 */
.dragging-active .chat-item:not(.dragging) {
    transition: transform 0.2s ease !important;
}

.dragging-active .chat-item.dragging {
    transition: none !important;
}

/* 文件夹列表拖拽样式 */
.folder-item {
    cursor: grab;
    user-select: none;
}

.folder-item:active {
    cursor: grabbing;
}

.folder-item.dragging {
    opacity: 0.8;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    transition: none !important;
    cursor: grabbing;
}

.folder-item.dragging .drag-handle {
    opacity: 1;
}

/* AI思考指示器动画 */
.thinking-indicator {
    animation: pulse 2s infinite;
}

.thinking-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    background-color: #6b7280;
    border-radius: 50%;
    animation: thinking 1.4s infinite ease-in-out both;
}

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

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

.thinking-dots span:nth-child(3) {
    animation-delay: 0s;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* 暗色主题下的思考指示器 */
[data-theme="dark"] .thinking-dots span {
    background-color: #9ca3af;
}

/* 思考内容样式 - 简化版 */
.reasoning-section {
    margin-bottom: 12px;
}

.reasoning-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 12px;
}

.reasoning-toggle:hover {
    background: #f9fafb;
    color: #374151;
}

[data-theme="dark"] .reasoning-toggle {
    border-color: #4b5563;
    color: #9ca3af;
}

[data-theme="dark"] .reasoning-toggle:hover {
    background: #1f2937;
    color: #d1d5db;
}

.reasoning-content {
    margin-top: 4px;
    padding: 8px;
    border: 1px solid #d1d5db;
    background: transparent;
    font-size: 12px;
    color: #374151;
    line-height: 1.4;
    max-height: 300px;
    overflow-y: auto;
}

[data-theme="dark"] .reasoning-content {
    border-color: #4b5563;
    color: #d1d5db;
}

.reasoning-content pre {
    margin: 0;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    color: inherit;
}

.reasoning-content::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

.reasoning-content::-webkit-scrollbar-track {
    background: transparent;
    cursor: pointer;
}

.reasoning-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
    cursor: pointer;
}

.reasoning-content::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] .reasoning-content::-webkit-scrollbar-thumb {
    background: #475569;
}

.toggle-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
    color: inherit;
}

.reasoning-icon {
    font-size: 14px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ===========================================
   AI对话消息气泡样式 - 简化版
   =========================================== */

/* 主题颜色变量 */
:root {
    --user-message-bg: #f3f4f6;
    --user-message-color: #374151;
    --user-message-shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --user-message-bg: #374151;
    --user-message-color: #f9fafb;
    --user-message-shadow: rgba(0, 0, 0, 0.3);
}

/* 消息气泡基础样式 */
.message-bubble {
    position: relative;
    width: fit-content;
    max-width: 75%;
    min-width: 60px;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* 用户消息（右对齐） */
.message-bubble.bg-blue-500 {
    margin-left: auto;
    max-width: 70%;
    background: var(--user-message-bg);
    color: var(--user-message-color);
    box-shadow: 0 2px 8px var(--user-message-shadow);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .message-bubble.bg-blue-500 {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* AI消息（左对齐，灰色） */
.message-bubble.bg-gray-100 {
    margin-right: auto;
    max-width: 75%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 深色模式下的AI消息 */
[data-theme="dark"] .message-bubble.bg-gray-100 {
    background-color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 600px) {
    .message-bubble {
        max-width: 90%;
        font-size: 14px;
        min-width: 40px;
    }
    .message-bubble.bg-blue-500 {
        max-width: 85%;
    }

    /* 思考过程容器响应式 */
    .reasoning-section {
        max-width: 90%;
        min-width: 40px;
    }
}


/* 消息气泡悬停效果 */
.message-bubble:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .message-bubble:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   深色模式下的消息文字颜色
   =========================================== */

[data-theme="dark"] .message-bubble .message-content,
[data-theme="dark"] .message-bubble .prose {
    color: #f3f4f6 !important;
}

[data-theme="dark"] .message-bubble .prose h1,
[data-theme="dark"] .message-bubble .prose h2,
[data-theme="dark"] .message-bubble .prose h3,
[data-theme="dark"] .message-bubble .prose h4,
[data-theme="dark"] .message-bubble .prose h5,
[data-theme="dark"] .message-bubble .prose h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .message-bubble .prose strong {
    color: #ffffff !important;
}

[data-theme="dark"] .message-bubble .prose em {
    color: #e5e7eb !important;
}

[data-theme="dark"] .message-bubble .prose code {
    background-color: #1f2937 !important;
    color: #fbbf24 !important;
    padding: 2px 4px;
    border-radius: 4px;
}

[data-theme="dark"] .message-bubble .prose pre {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    border: 1px solid #374151;
}

[data-theme="dark"] .message-bubble .prose pre code {
    background-color: transparent !important;
    color: #f3f4f6 !important;
}

[data-theme="dark"] .message-bubble .prose blockquote {
    border-left-color: #6b7280 !important;
    color: #d1d5db !important;
}

[data-theme="dark"] .message-bubble .prose a {
    color: #60a5fa !important;
}

[data-theme="dark"] .message-bubble .prose a:hover {
    color: #93c5fd !important;
}

/* ===========================================
   消息内容和代码块样式
   =========================================== */

/* 消息内容基础样式 */
.message-content {
    word-wrap: break-word;
    line-height: 1.5;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    min-width: 0;
}

/* 代码块样式 */
.message-content pre,
.message-bubble .prose pre {
    overflow-x: auto !important;
    white-space: pre !important;
    word-wrap: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.message-content pre code,
.message-bubble .prose pre code {
    white-space: pre !important;
    word-wrap: normal !important;
    display: block !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* 普通文本换行 */
.message-content p,
.message-content div:not(.code-block-container),
.message-content span:not(pre span),
.message-content h1, .message-content h2, .message-content h3,
.message-content h4, .message-content h5, .message-content h6,
.message-content li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: 100% !important;
}

/* ===========================================
   消息按钮和布局
   =========================================== */

/* AI消息的按钮和时间戳容器（左对齐） */
.message-item.justify-start .mt-1.px-2 {
    width: fit-content;
    margin-right: auto;
    margin-left: 0;
}

/* 用户消息的按钮和时间戳容器（右对齐） */
.message-item.justify-end .mt-1.px-2 {
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

/* 用户消息按钮悬停显示 */
.user-message-actions {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message-item.justify-end:hover .user-message-actions {
    opacity: 1;
}

/* 消息容器布局 */
.message-item .flex-1 {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Prose容器宽度限制 */
.message-content.prose {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}

/* 提示词选择器样式 */
#promptSelector {
    backdrop-filter: blur(8px);
    animation: fadeInScale 0.2s ease-out;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-100%);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(-100%);
    }
}

/* 当选择器在下方时的动画 */
#promptSelector[data-position="below"] {
    animation: fadeInScaleBelow 0.2s ease-out;
}

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

[data-theme="dark"] #promptSelector {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.prompt-selector-item {
    transition: all 0.2s ease;
}

.prompt-selector-item:hover {
    transform: translateX(2px);
    background-color: var(--bg-tertiary);
}

.prompt-selector-item.selected {
    border-left: 3px solid #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .prompt-selector-item.selected {
    background-color: rgba(96, 165, 250, 0.15);
}

/* 提示词选择器滚动条美化 */
#promptSelector::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

#promptSelector::-webkit-scrollbar-track {
    background: transparent;
    cursor: pointer;
}

#promptSelector::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
    cursor: pointer;
}

#promptSelector::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    cursor: pointer;
}

#promptSelector::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] #promptSelector::-webkit-scrollbar-thumb {
    background: #475569;
}

[data-theme="dark"] #promptSelector::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* 消息列表滚动条美化 */
#chatMessages::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] #chatMessages::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] #chatMessages::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] #chatMessages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}


#promptSelector::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 3px;
    cursor: pointer;
}

#promptSelector::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#promptSelector::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: pointer;
}

#promptSelector::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] #promptSelector::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] #promptSelector::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] #promptSelector::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* 聊天输入框内的上传按钮样式 */
#uploadImageBtn {
    transition: all 0.2s ease;
}

#uploadImageBtn:hover {
    background-color: rgba(59, 130, 246, 0.1);
    transform: scale(1.05);
}

#uploadImageBtn svg {
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

#uploadImageBtn:hover svg {
    color: #3b82f6;
}

[data-theme="dark"] #uploadImageBtn:hover {
    background-color: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] #uploadImageBtn:hover svg {
    color: #60a5fa;
}

/* 拖拽覆盖层样式 */
#dragOverlay {
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #3b82f6;
}

#dragOverlay.show {
    display: flex !important;
    animation: fadeInScale 0.2s ease-out;
}

[data-theme="dark"] #dragOverlay {
    background-color: rgba(96, 165, 250, 0.15);
    border-color: #60a5fa;
    color: #60a5fa;
}

/* 输入框拖拽状态 */
#chatInput.drag-over {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] #chatInput.drag-over {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* 输入框粘贴状态动画 */
#chatInput.paste-active {
    animation: pulseBlue 0.6s ease-in-out;
}

@keyframes pulseBlue {
    0%, 100% {
        border-color: var(--border-color);
        box-shadow: none;
    }
    50% {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }
}

/* 响应式样式 */
@media (max-width: 768px) {
    #uploadImageBtn {
        left: 8px;
        padding: 6px;
    }

    #uploadImageBtn svg {
        width: 18px;
        height: 18px;
    }

    #chatInput {
        padding-left: 40px;
        font-size: 16px; /* 防止iOS缩放 */
    }

    #dragOverlay {
        font-size: 12px;
        padding: 8px;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    #uploadImageBtn:hover {
        background-color: rgba(0, 0, 0, 0.1);
        border: 1px solid currentColor;
    }

    [data-theme="dark"] #uploadImageBtn:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    #dragOverlay {
        border-width: 3px;
        background-color: rgba(59, 130, 246, 0.2);
    }
}

/* 统一的功能按钮样式 */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

/* 设置按钮样式 */
.btn-settings {
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.btn-settings:hover {
    color: #2563eb;
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .btn-settings {
    color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .btn-settings:hover {
    color: #93c5fd;
    background-color: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
}

/* 系统提示词按钮激活状态 */
.btn-settings.active {
    color: #ffffff;
    background-color: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-settings.active:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .btn-settings.active {
    color: #ffffff;
    background-color: #60a5fa;
    border-color: #60a5fa;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .btn-settings.active:hover {
    background-color: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

/* 清空按钮样式 */
.btn-clear {
    color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.btn-clear:hover {
    color: #d97706;
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .btn-clear {
    color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.2);
}

[data-theme="dark"] .btn-clear:hover {
    color: #fcd34d;
    background-color: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

/* 删除按钮样式 */
.btn-delete {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.btn-delete:hover {
    color: #dc2626;
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .btn-delete {
    color: #f87171;
    background-color: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.2);
}

[data-theme="dark"] .btn-delete:hover {
    color: #fca5a5;
    background-color: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.3);
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.2);
}

/* 小尺寸按钮变体 */
.btn-action.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.25rem;
}

/* 圆形按钮变体 */
.btn-action.btn-round {
    border-radius: 50%;
    padding: 0.5rem;
    aspect-ratio: 1;
    justify-content: center;
}

.btn-action.btn-round.btn-sm {
    padding: 0.375rem;
}

/* 图标按钮样式 */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: transparent;
}

.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .btn-icon:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 刷新按钮样式 */
.btn-refresh {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.btn-refresh:hover {
    color: #059669;
    background-color: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateY(-1px) rotate(180deg);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .btn-refresh {
    color: #34d399;
    background-color: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .btn-refresh:hover {
    color: #6ee7b7;
    background-color: rgba(52, 211, 153, 0.2);
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.2);
}

/* 下载按钮样式 */
.btn-download {
    color: #8b5cf6;
    background-color: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}

.btn-download:hover {
    color: #7c3aed;
    background-color: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .btn-download {
    color: #a78bfa;
    background-color: rgba(167, 139, 250, 0.15);
    border-color: rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .btn-download:hover {
    color: #c4b5fd;
    background-color: rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.3);
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.2);
}

/* 按钮禁用状态 */
.btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-action:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 按钮加载状态 */
.btn-action.loading {
    position: relative;
    color: transparent !important;
}

.btn-action.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 按钮组样式 */
.btn-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-group .btn-action {
    flex-shrink: 0;
}

/* 聊天输入区域对齐 */
#chatInput {
    line-height: 1.5;
}

/* 确保发送按钮与输入框顶部对齐 */
#sendChatBtn {
    align-self: flex-start;
}

/* 响应式按钮 */
@media (max-width: 768px) {
    .btn-action {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    .btn-action.btn-sm {
        padding: 0.25rem 0.375rem;
        font-size: 0.75rem;
    }

    .btn-action span:last-child {
        display: none;
    }

    .btn-action.show-text span:last-child {
        display: inline;
    }


    #chatInput {
        padding-left: 2.5rem;
    }
}

/* 系统提示词模板卡片样式 */
.prompt-template-item {
    transition: all 0.2s ease;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* ===========================================
   消息按钮样式
   =========================================== */

.message-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

.message-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.message-btn.edit-message-btn {
    color: #3b82f6;
}

.message-btn.edit-message-btn:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.message-btn.delete-message-btn {
    color: #ef4444;
}

.message-btn.delete-message-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

.message-btn.resend-message-btn {
    color: #10b981;
}

.message-btn.resend-message-btn:hover {
    background-color: rgba(16, 185, 129, 0.1);
}

/* 提示词模板容器滚动条美化 */
#promptTemplates::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

#promptTemplates::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
    cursor: pointer;
}

#promptTemplates::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#promptTemplates::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: pointer;
}

#promptTemplates::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] #promptTemplates::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] #promptTemplates::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] #promptTemplates::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* 系统提示词输入框滚动条美化 */
#systemPromptInput::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

#systemPromptInput::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
    cursor: pointer;
}

#systemPromptInput::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#systemPromptInput::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: pointer;
}

#systemPromptInput::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] #systemPromptInput::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] #systemPromptInput::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] #systemPromptInput::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* 系统提示词模态框整体滚动条美化 */
#systemPromptModal .card::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

#systemPromptModal .card::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
    cursor: pointer;
}

#systemPromptModal .card::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#systemPromptModal .card::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: pointer;
}

#systemPromptModal .card::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] #systemPromptModal .card::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] #systemPromptModal .card::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] #systemPromptModal .card::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* 文本截断样式 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 历史列表美化滚动条样式 */
.history-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
    position: relative;
}

/* 历史列表渐变遮罩效果 */
.history-scroll-container {
    --top-mask-opacity: 0;
    --bottom-mask-opacity: 0;
}

.history-scroll-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom,
        var(--bg-primary) 0%,
        rgba(255, 255, 255, 0.9) 40%,
        rgba(255, 255, 255, 0.5) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: var(--top-mask-opacity, 0);
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .history-scroll-container::before {
    background: linear-gradient(to bottom,
        var(--bg-primary) 0%,
        rgba(17, 24, 39, 0.9) 40%,
        rgba(17, 24, 39, 0.5) 70%,
        transparent 100%);
}

/* 底部渐变遮罩 */
.history-scroll-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to top,
        var(--bg-primary) 0%,
        rgba(255, 255, 255, 0.9) 40%,
        rgba(255, 255, 255, 0.5) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: var(--bottom-mask-opacity, 0);
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .history-scroll-container::after {
    background: linear-gradient(to top,
        var(--bg-primary) 0%,
        rgba(17, 24, 39, 0.9) 40%,
        rgba(17, 24, 39, 0.5) 70%,
        transparent 100%);
}

/* Webkit浏览器滚动条美化 */
.history-scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: var(--scrollbar-display, block);
}

.history-scroll-container::-webkit-scrollbar-track {
    background: rgba(243, 244, 246, 0.3);
    border-radius: 10px;
    margin: 4px;
}

.history-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.6) 0%,
        rgba(147, 197, 253, 0.8) 50%,
        rgba(59, 130, 246, 0.6) 100%);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.history-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.8) 0%,
        rgba(96, 165, 250, 0.9) 50%,
        rgba(37, 99, 235, 0.8) 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    transform: scale(1.1);
}

.history-scroll-container::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg,
        rgba(29, 78, 216, 0.9) 0%,
        rgba(59, 130, 246, 1) 50%,
        rgba(29, 78, 216, 0.9) 100%);
}

.history-scroll-container::-webkit-scrollbar-corner {
    background: transparent;
}

/* 深色模式下的滚动条样式 */
[data-theme="dark"] .history-scroll-container {
    scrollbar-color: rgba(96, 165, 250, 0.6) transparent;
}

[data-theme="dark"] .history-scroll-container::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.4);
}

[data-theme="dark"] .history-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.7) 0%,
        rgba(147, 197, 253, 0.9) 50%,
        rgba(96, 165, 250, 0.7) 100%);
    box-shadow: 0 2px 4px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .history-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.9) 0%,
        rgba(96, 165, 250, 1) 50%,
        rgba(59, 130, 246, 0.9) 100%);
    box-shadow: 0 4px 8px rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] .history-scroll-container::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 1) 0%,
        rgba(59, 130, 246, 1) 50%,
        rgba(37, 99, 235, 1) 100%);
}

/* 滚动条渐入动画 */
.history-scroll-container::-webkit-scrollbar-thumb {
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.history-scroll-container:hover::-webkit-scrollbar-thumb {
    opacity: 1;
}

/* 平滑滚动增强 */
.history-scroll-container {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* 滚动时的视觉反馈 */
.history-scroll-container.scrolling {
    scroll-behavior: auto;
}

.history-scroll-container.scrolling::-webkit-scrollbar-thumb {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .history-scroll-container.scrolling::-webkit-scrollbar-thumb {
    box-shadow: 0 6px 12px rgba(96, 165, 250, 0.5);
}



/* 滚动条发光效果 */
.history-scroll-container::-webkit-scrollbar-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(59, 130, 246, 0.3) 0%,
        rgba(147, 197, 253, 0.5) 50%,
        rgba(59, 130, 246, 0.3) 100%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.history-scroll-container:hover::-webkit-scrollbar-thumb::before {
    opacity: 1;
}

/* 滚动条脉冲动画 */
@keyframes scrollbar-pulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }
    50% {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }
}

.history-scroll-container.scrolling::-webkit-scrollbar-thumb {
    animation: scrollbar-pulse 1.5s ease-in-out infinite;
}

[data-theme="dark"] .history-scroll-container.scrolling::-webkit-scrollbar-thumb {
    animation: scrollbar-pulse-dark 1.5s ease-in-out infinite;
}

@keyframes scrollbar-pulse-dark {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(96, 165, 250, 0.3);
    }
    50% {
        box-shadow: 0 4px 12px rgba(96, 165, 250, 0.5);
    }
}

/* 滚动指示器 */
.history-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(59, 130, 246, 0.1) 0%,
        rgba(59, 130, 246, 0.05) 50%,
        rgba(59, 130, 246, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.history-scroll-container:hover::after {
    opacity: 1;
}

[data-theme="dark"] .history-scroll-container::after {
    background: linear-gradient(to bottom,
        rgba(96, 165, 250, 0.15) 0%,
        rgba(96, 165, 250, 0.08) 50%,
        rgba(96, 165, 250, 0.15) 100%);
}

/* 历史项目悬停时的滚动条增强 */
.history-scroll-container .task-item:hover ~ ::-webkit-scrollbar-thumb,
.history-scroll-container .card:hover ~ ::-webkit-scrollbar-thumb {
    opacity: 1;
    transform: scale(1.02);
}

/* ===========================================
   无障碍支持和响应式覆盖
   =========================================== */

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .history-scroll-container::-webkit-scrollbar-thumb {
        background: #000;
        border: 1px solid #fff;
    }
    [data-theme="dark"] .history-scroll-container::-webkit-scrollbar-thumb {
        background: #fff;
        border: 1px solid #000;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .history-scroll-container::-webkit-scrollbar-thumb {
        transition: none;
        animation: none;
    }
    .history-scroll-container {
        scroll-behavior: auto;
    }
}

/* ===========================================
   消息内容排版样式
   =========================================== */

.message-content p {
    margin-bottom: 0.75em;
    line-height: 1.5;
}

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

.message-content ul,
.message-content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.message-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin: 1.5em 0 1em 0;
    line-height: 1.4;
}

.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child,
.message-content h4:first-child,
.message-content h5:first-child,
.message-content h6:first-child {
    margin-top: 0;
}

.message-content blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid #e2e8f0;
    font-style: italic;
}

[data-theme="dark"] .message-content blockquote {
    border-left-color: #475569;
}



/* 思考指示器渲染优化 */
.thinking-indicator {
    /* 防止动画影响其他元素 */
    contain: layout style;
    /* 强制硬件加速 */
    transform: translateZ(0);
}

/* 停止生成按钮样式 */
.generating {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    animation: pulse 2s infinite;
}

.generating:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* 对话消息区域滚动条 */
#chatMessages {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 200px); /* 根据页面布局调整 */
}

#chatMessages::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: pointer;
}

#chatMessages::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] #chatMessages::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] #chatMessages::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] #chatMessages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* 模态框样式优化 */
.modal-overlay {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

.modal-content {
    animation: slideIn 0.3s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

/* 模态框主题适应 */
.modal-content-themed {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #111827;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .modal-content-themed {
    background: #1f2937;
    border: 1px solid #374151;
    color: #f9fafb;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 10px 25px -5px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* 模态框进入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 模态框内容滑入动画 */
.animate-slide-down {
    animation: slideDown 0.3s ease-out;
}

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

/* 模态框按钮点击效果 */
.modal-button:active {
    transform: translateY(1px) scale(0.98);
}

/* 文件夹选项点击效果 */
.folder-option:active {
    transform: translateY(1px) scale(0.98);
}

/* 文件夹选项聚焦状态 */
.folder-option:focus {
    outline: none;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

[data-theme="dark"] .folder-option:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 文件夹选项键盘导航状态 */
.folder-option:focus .font-medium {
    color: #3b82f6 !important;
}

[data-theme="dark"] .folder-option:focus .font-medium {
    color: #60a5fa !important;
}

/* 模态框响应式设计 */
@media (max-width: 640px) {
    .modal-overlay {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .modal-content-themed {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 1rem !important;
    }

    .folder-option {
        padding: 1rem !important;
    }

    .modal-button {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    .modal-input,
    .modal-textarea {
        font-size: 1rem !important; /* 防止iOS缩放 */
    }
}

/* 模态框文字选择优化 */
.modal-content-themed {
    user-select: text;
}

.modal-button {
    user-select: none;
}

.folder-option {
    user-select: none;
}

/* 模态框输入框和按钮优化 */
.modal-input {
    transition: all 0.2s ease;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827;
}

.modal-input:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    outline: none;
}

[data-theme="dark"] .modal-input {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-theme="dark"] .modal-input:focus {
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
    border-color: #60a5fa;
}

.modal-button {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.modal-button:hover {
    transform: translateY(-1px);
}

.modal-button:active {
    transform: translateY(0);
}

.modal-button-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.modal-button-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .modal-button-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

[data-theme="dark"] .modal-button-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

/* 模态框成功按钮（发送按钮） */
.modal-button-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.modal-button-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .modal-button-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

[data-theme="dark"] .modal-button-success:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
}

/* 模态框取消按钮 */
.modal-button-cancel {
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.modal-button-cancel:hover {
    background: #f3f4f6;
    color: #374151;
    border-color: #9ca3af;
}

[data-theme="dark"] .modal-button-cancel {
    color: #9ca3af;
    border-color: #4b5563;
}

[data-theme="dark"] .modal-button-cancel:hover {
    background: #374151;
    color: #e5e7eb;
    border-color: #6b7280;
}

/* 模态框文本区域优化 */
.modal-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.5;
}

.modal-textarea:focus {
    outline: none;
}

.modal-textarea::placeholder {
    color: #9ca3af;
}

[data-theme="dark"] .modal-textarea::placeholder {
    color: #6b7280;
}

/* 模态框按钮悬停效果优化 */
.modal-button:hover {
    transform: translateY(-1px);
}

.modal-button:active {
    transform: translateY(0);
}

/* 模态框标题样式 */
.modal-title {
    color: #111827;
    font-weight: 600;
}

[data-theme="dark"] .modal-title {
    color: #f9fafb;
}

/* 模态框文本区域滚动条美化 */
.modal-textarea::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

.modal-textarea::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
    cursor: pointer;
}

.modal-textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.modal-textarea::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: pointer;
}

.modal-textarea::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] .modal-textarea::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] .modal-textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] .modal-textarea::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* 模态框滚动条 */
.modal-content::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
    cursor: pointer;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
    cursor: pointer;
}

.modal-content::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] .modal-content::-webkit-scrollbar-thumb {
    background: #475569;
}

/* 模态框中的文件夹选项按钮样式 */
.folder-option {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.folder-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .folder-option:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.folder-option:active {
    transform: translateY(0);
}

/* 模态框中的文件夹选项文字颜色 */
.folder-option .font-medium {
    color: var(--text-primary);
}

.folder-option .text-xs {
    color: var(--text-secondary);
}

/* 模态框中的文件夹选项悬停状态 */
.folder-option:hover .font-medium {
    color: var(--text-primary);
}

.folder-option:hover .text-xs {
    color: var(--text-secondary);
}

/* 深色模式下的文件夹选项 */
[data-theme="dark"] .folder-option {
    border-color: #4b5563;
}

[data-theme="dark"] .folder-option:hover {
    background-color: #374151 !important;
    border-color: #60a5fa;
}

[data-theme="dark"] .folder-option:hover .font-medium {
    color: #f9fafb !important;
}

[data-theme="dark"] .folder-option:hover .text-xs {
    color: #d1d5db !important;
}

/* 文件夹选择滚动区域样式 */
.folder-selection-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
    position: relative;
    border-radius: 8px;
    border: 1px solid rgba(229, 231, 235, 0.5);
    scroll-behavior: smooth;
    padding: 4px;
    background: rgba(249, 250, 251, 0.5);
    transition: all 0.2s ease;
}

[data-theme="dark"] .folder-selection-scroll {
    border-color: rgba(75, 85, 99, 0.5);
    background: rgba(31, 41, 55, 0.5);
}

/* 滚动区域聚焦状态 */
.folder-selection-scroll:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .folder-selection-scroll:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* 滚动区域渐变遮罩效果 */
.folder-selection-scroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px 8px 0 0;
}

.folder-selection-scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 8px 8px;
}

[data-theme="dark"] .folder-selection-scroll::before {
    background: linear-gradient(to bottom,
        rgba(31, 41, 55, 1) 0%,
        rgba(31, 41, 55, 0.8) 50%,
        transparent 100%);
}

[data-theme="dark"] .folder-selection-scroll::after {
    background: linear-gradient(to top,
        rgba(31, 41, 55, 1) 0%,
        rgba(31, 41, 55, 0.8) 50%,
        transparent 100%);
}

/* 当内容可滚动时显示渐变遮罩 */
.folder-selection-scroll.has-scroll::before,
.folder-selection-scroll.has-scroll::after {
    opacity: 1;
}

.folder-selection-scroll::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

.folder-selection-scroll::-webkit-scrollbar-track {
    background: rgba(243, 244, 246, 0.5);
    border-radius: 4px;
    cursor: pointer;
}

.folder-selection-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.folder-selection-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    cursor: pointer;
    transform: scaleX(1.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.folder-selection-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    transform: scaleX(1.1);
}

.folder-selection-scroll::-webkit-scrollbar-corner {
    cursor: pointer;
}

/* 深色模式下的文件夹选择滚动条 */
[data-theme="dark"] .folder-selection-scroll {
    scrollbar-color: rgba(96, 165, 250, 0.6) transparent;
}

[data-theme="dark"] .folder-selection-scroll::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.4);
}

[data-theme="dark"] .folder-selection-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .folder-selection-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 2px 6px rgba(96, 165, 250, 0.3);
    transform: scaleX(1.2);
}

[data-theme="dark"] .folder-selection-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 1px 3px rgba(96, 165, 250, 0.4);
    transform: scaleX(1.1);
}

/* 滚动时的动画效果 */
.folder-selection-scroll.scrolling::-webkit-scrollbar-thumb {
    animation: folder-scroll-pulse 1.5s ease-in-out infinite;
}

[data-theme="dark"] .folder-selection-scroll.scrolling::-webkit-scrollbar-thumb {
    animation: folder-scroll-pulse-dark 1.5s ease-in-out infinite;
}

@keyframes folder-scroll-pulse {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
}

@keyframes folder-scroll-pulse-dark {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
    }
}

/* 聊天输入框滚动条样式 */
.chat-input-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
    scroll-behavior: smooth;
}

.chat-input-scroll::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

.chat-input-scroll::-webkit-scrollbar-track {
    background: transparent;
    cursor: pointer;
}

.chat-input-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.6;
}

.chat-input-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    opacity: 1;
    transform: scaleX(1.3);
    cursor: pointer;
}

.chat-input-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    transform: scaleX(1.2);
}

.chat-input-scroll::-webkit-scrollbar-corner {
    cursor: pointer;
}

/* 深色模式下的聊天输入框滚动条 */
[data-theme="dark"] .chat-input-scroll {
    scrollbar-color: rgba(96, 165, 250, 0.4) transparent;
}

[data-theme="dark"] .chat-input-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    opacity: 0.7;
}

[data-theme="dark"] .chat-input-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .chat-input-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 1px 2px rgba(96, 165, 250, 0.4);
}

/* 聊天输入框聚焦时的滚动条增强 */
.chat-input-scroll:focus::-webkit-scrollbar-thumb {
    opacity: 1;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

[data-theme="dark"] .chat-input-scroll:focus::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 2px 4px rgba(96, 165, 250, 0.4);
}

/* 提示词输入框滚动条样式 */
.prompt-input-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, 0.4) transparent;
    scroll-behavior: smooth;
}

.prompt-input-scroll::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

.prompt-input-scroll::-webkit-scrollbar-track {
    background: rgba(240, 253, 244, 0.5);
    border-radius: 3px;
    cursor: pointer;
}

.prompt-input-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.7;
}

.prompt-input-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #86efac 0%, #34d399 100%);
    opacity: 1;
    transform: scaleX(1.3);
    cursor: pointer;
}

.prompt-input-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    transform: scaleX(1.2);
}

.prompt-input-scroll::-webkit-scrollbar-corner {
    cursor: pointer;
}

/* 深色模式下的提示词输入框滚动条 */
[data-theme="dark"] .prompt-input-scroll {
    scrollbar-color: rgba(52, 211, 153, 0.4) transparent;
}

[data-theme="dark"] .prompt-input-scroll::-webkit-scrollbar-track {
    background: rgba(6, 78, 59, 0.3);
}

[data-theme="dark"] .prompt-input-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    opacity: 0.8;
}

[data-theme="dark"] .prompt-input-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .prompt-input-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 1px 2px rgba(52, 211, 153, 0.4);
}

/* 提示词输入框聚焦时的滚动条增强 */
.prompt-input-scroll:focus::-webkit-scrollbar-thumb {
    opacity: 1;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

[data-theme="dark"] .prompt-input-scroll:focus::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 2px 4px rgba(52, 211, 153, 0.4);
}

/* 系统提示词输入框滚动条样式 */
.system-prompt-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 51, 234, 0.4) transparent;
    scroll-behavior: smooth;
}

.system-prompt-scroll::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

.system-prompt-scroll::-webkit-scrollbar-track {
    background: rgba(250, 245, 255, 0.5);
    border-radius: 4px;
    cursor: pointer;
}

.system-prompt-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.7;
}

.system-prompt-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
    opacity: 1;
    transform: scaleX(1.2);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(147, 51, 234, 0.2);
}

.system-prompt-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    transform: scaleX(1.1);
}

.system-prompt-scroll::-webkit-scrollbar-corner {
    cursor: pointer;
}

/* 深色模式下的系统提示词输入框滚动条 */
[data-theme="dark"] .system-prompt-scroll {
    scrollbar-color: rgba(167, 139, 250, 0.4) transparent;
}

[data-theme="dark"] .system-prompt-scroll::-webkit-scrollbar-track {
    background: rgba(76, 29, 149, 0.2);
}

[data-theme="dark"] .system-prompt-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #581c87 0%, #7c3aed 100%);
    opacity: 0.8;
}

[data-theme="dark"] .system-prompt-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    opacity: 1;
    box-shadow: 0 2px 4px rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .system-prompt-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 1px 2px rgba(167, 139, 250, 0.4);
}

/* 系统提示词输入框聚焦时的滚动条增强 */
.system-prompt-scroll:focus::-webkit-scrollbar-thumb {
    opacity: 1;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 2px 6px rgba(147, 51, 234, 0.3);
}

[data-theme="dark"] .system-prompt-scroll:focus::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 2px 6px rgba(167, 139, 250, 0.4);
}

/* 模态框文本区域滚动条样式 */
.modal-textarea-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.4) transparent;
    scroll-behavior: smooth;
}

.modal-textarea-scroll::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

.modal-textarea-scroll::-webkit-scrollbar-track {
    background: rgba(239, 246, 255, 0.5);
    border-radius: 3px;
    cursor: pointer;
}

.modal-textarea-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.7;
}

.modal-textarea-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    opacity: 1;
    transform: scaleX(1.3);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

.modal-textarea-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
    transform: scaleX(1.2);
}

.modal-textarea-scroll::-webkit-scrollbar-corner {
    cursor: pointer;
}

/* 深色模式下的模态框文本区域滚动条 */
[data-theme="dark"] .modal-textarea-scroll {
    scrollbar-color: rgba(96, 165, 250, 0.4) transparent;
}

[data-theme="dark"] .modal-textarea-scroll::-webkit-scrollbar-track {
    background: rgba(30, 58, 138, 0.2);
}

[data-theme="dark"] .modal-textarea-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    opacity: 0.8;
}

[data-theme="dark"] .modal-textarea-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .modal-textarea-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 1px 2px rgba(96, 165, 250, 0.4);
}

/* 模态框文本区域聚焦时的滚动条增强 */
.modal-textarea-scroll:focus::-webkit-scrollbar-thumb {
    opacity: 1;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .modal-textarea-scroll:focus::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 2px 4px rgba(96, 165, 250, 0.4);
}

/* 负提示词输入框滚动条样式 */
.negative-prompt-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(249, 115, 22, 0.4) transparent;
    scroll-behavior: smooth;
    position: relative;
}

/* 负提示词输入框的特殊边框效果 */
.negative-prompt-scroll:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

[data-theme="dark"] .negative-prompt-scroll:focus {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15) !important;
}

/* 负提示词输入框的占位符样式 */
.negative-prompt-scroll::placeholder {
    color: #f97316;
    opacity: 0.7;
}

[data-theme="dark"] .negative-prompt-scroll::placeholder {
    color: #fb923c;
    opacity: 0.8;
}

/* 负提示词输入框悬停效果 */
.negative-prompt-scroll:hover {
    border-color: #fb923c;
    transition: border-color 0.2s ease;
}

[data-theme="dark"] .negative-prompt-scroll:hover {
    border-color: #fdba74;
}

.negative-prompt-scroll::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

.negative-prompt-scroll::-webkit-scrollbar-track {
    background: rgba(255, 247, 237, 0.5);
    border-radius: 3px;
    cursor: pointer;
}

.negative-prompt-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.7;
}

.negative-prompt-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #fdba74 0%, #fb923c 100%);
    opacity: 1;
    transform: scaleX(1.3);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(249, 115, 22, 0.2);
}

.negative-prompt-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    transform: scaleX(1.2);
}

.negative-prompt-scroll::-webkit-scrollbar-corner {
    cursor: pointer;
}

/* 深色模式下的负提示词输入框滚动条 */
[data-theme="dark"] .negative-prompt-scroll {
    scrollbar-color: rgba(251, 146, 60, 0.4) transparent;
}

[data-theme="dark"] .negative-prompt-scroll::-webkit-scrollbar-track {
    background: rgba(154, 52, 18, 0.2);
}

[data-theme="dark"] .negative-prompt-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%);
    opacity: 0.8;
}

[data-theme="dark"] .negative-prompt-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(251, 146, 60, 0.3);
}

[data-theme="dark"] .negative-prompt-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 1px 2px rgba(251, 146, 60, 0.4);
}

/* 负提示词输入框聚焦时的滚动条增强 */
.negative-prompt-scroll:focus::-webkit-scrollbar-thumb {
    opacity: 1;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

[data-theme="dark"] .negative-prompt-scroll:focus::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 2px 4px rgba(251, 146, 60, 0.4);
}

/* 负提示词输入框的特殊动画效果 */
.negative-prompt-scroll.has-content {
    animation: negative-prompt-glow 2s ease-in-out infinite;
}

@keyframes negative-prompt-glow {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.2);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.4), 0 0 8px rgba(249, 115, 22, 0.2);
    }
}

[data-theme="dark"] .negative-prompt-scroll.has-content {
    animation: negative-prompt-glow-dark 2s ease-in-out infinite;
}

@keyframes negative-prompt-glow-dark {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.3);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.5), 0 0 12px rgba(251, 146, 60, 0.3);
    }
}

/* 负提示词滚动条的特殊滚动动画 */
.negative-prompt-scroll.scrolling::-webkit-scrollbar-thumb {
    animation: negative-scrollbar-pulse 1.5s ease-in-out infinite;
}

[data-theme="dark"] .negative-prompt-scroll.scrolling::-webkit-scrollbar-thumb {
    animation: negative-scrollbar-pulse-dark 1.5s ease-in-out infinite;
}

@keyframes negative-scrollbar-pulse {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(249, 115, 22, 0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
    }
}

@keyframes negative-scrollbar-pulse-dark {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(251, 146, 60, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(251, 146, 60, 0.5);
    }
}

/* 通用滚动条动画效果 */
.chat-input-scroll.scrolling::-webkit-scrollbar-thumb,
.prompt-input-scroll.scrolling::-webkit-scrollbar-thumb,
.system-prompt-scroll.scrolling::-webkit-scrollbar-thumb,
.modal-textarea-scroll.scrolling::-webkit-scrollbar-thumb,
.negative-prompt-scroll.scrolling::-webkit-scrollbar-thumb {
    animation: scrollbar-glow 1.5s ease-in-out infinite;
}

[data-theme="dark"] .chat-input-scroll.scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .prompt-input-scroll.scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .system-prompt-scroll.scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .modal-textarea-scroll.scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .negative-prompt-scroll.scrolling::-webkit-scrollbar-thumb {
    animation: scrollbar-glow-dark 1.5s ease-in-out infinite;
}

@keyframes scrollbar-glow {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
}

@keyframes scrollbar-glow-dark {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
    }
}

/* 滚动条悬停时的微妙动画 */
.chat-input-scroll::-webkit-scrollbar-thumb:hover,
.prompt-input-scroll::-webkit-scrollbar-thumb:hover,
.system-prompt-scroll::-webkit-scrollbar-thumb:hover,
.modal-textarea-scroll::-webkit-scrollbar-thumb:hover,
.negative-prompt-scroll::-webkit-scrollbar-thumb:hover,
.folder-selection-scroll::-webkit-scrollbar-thumb:hover {
    animation: scrollbar-hover-pulse 0.6s ease-out;
}

@keyframes scrollbar-hover-pulse {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(1.4);
    }
    100% {
        transform: scaleX(1.3);
    }
}

/* ===========================================
   代码块容器样式 - 简化版
   =========================================== */

.code-block-container {
    position: relative;
    margin: 12px 0;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .code-block-container {
    background: #1e293b;
    border-color: #475569;
}

/* 代码块头部 */
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    color: #64748b;
    min-height: 32px;
}

[data-theme="dark"] .code-block-header {
    background: #334155;
    border-bottom-color: #475569;
    color: #94a3b8;
}

.code-language {
    font-weight: 500;
    text-transform: uppercase;
}

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

.code-action-btn {
    padding: 2px 6px;
    border: none;
    border-radius: 3px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.code-action-btn:hover {
    background: #cbd5e1;
    color: #334155;
}

[data-theme="dark"] .code-action-btn {
    background: #475569;
    color: #cbd5e1;
}

[data-theme="dark"] .code-action-btn:hover {
    background: #64748b;
    color: #f1f5f9;
}

/* 代码内容区域 */
.code-content {
    position: relative;
    max-height: 150px;
    overflow: auto;
    transition: max-height 0.3s ease;
}

.code-content.expanded {
    max-height: 400px;
    overflow: auto;
}

.code-content pre {
    margin: 0 !important;
    padding: 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    overflow: auto;
    white-space: pre;
    word-wrap: normal;
}

.code-content pre code {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace !important;
    white-space: pre;
    word-wrap: normal;
    display: block;
}

/* 代码块滚动条 - 与思考过程保持一致 */
.code-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
}

.code-content::-webkit-scrollbar-track {
    background: transparent;
    cursor: pointer;
}

.code-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
    cursor: pointer;
}

.code-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    cursor: pointer;
}

.code-content::-webkit-scrollbar-corner {
    cursor: pointer;
}

[data-theme="dark"] .code-content::-webkit-scrollbar-thumb {
    background: #475569;
}

[data-theme="dark"] .code-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}





/* 深色主题下的Firefox滚动条 */
[data-theme="dark"] .message-content pre,
[data-theme="dark"] .message-bubble pre,
[data-theme="dark"] .code-block-container pre,
[data-theme="dark"] .code-content pre {
    scrollbar-color: #475569 #1e293b !important;
}



/* 展开/折叠渐变遮罩 */
.code-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, #f8fafc);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

[data-theme="dark"] .code-fade-overlay {
    background: linear-gradient(transparent, #1e293b);
}

.code-content.expanded .code-fade-overlay {
    display: none;
}



/* 复制成功提示 */
.copy-success {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(34, 197, 94, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.copy-success.show {
    opacity: 1;
}

/* 自定义模型输入容器样式 */
#customModelContainer {
    transition: all 0.3s ease;
    animation: slideInRight 0.3s ease-out;
}

#customModelContainer.hidden {
    display: none !important;
}

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

/* 自定义模型输入框样式 */
#customModelInput {
    transition: all 0.2s ease;
}

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

[data-theme="dark"] #customModelInput:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* 自定义模型选择器样式 */
#modelSelectBtn {
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    min-width: 220px;
}

#modelSelectBtn:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: var(--bg-secondary);
}

#modelSelectBtn svg {
    transition: transform 0.2s ease;
    color: var(--text-secondary);
}

#modelSelectBtn.open svg {
    transform: rotate(180deg);
}

[data-theme="dark"] #modelSelectBtn:hover {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* 模型下拉菜单样式 */
#modelDropdown {
    animation: fadeInDown 0.2s ease-out;
    backdrop-filter: blur(8px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    width: max-content;
}

[data-theme="dark"] #modelDropdown {
    background: var(--bg-primary);
    border-color: var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

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

#modelDropdown::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

#modelDropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 3px;
}

#modelDropdown::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
}

[data-theme="dark"] #modelDropdown::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

[data-theme="dark"] #modelDropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] #modelDropdown::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

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

/* 模型选项样式 */
.model-option {
    transition: all 0.2s ease;
    color: var(--text-primary);
    border-radius: 6px;
    margin: 1px 0;
}

.model-option:hover {
    transform: translateX(2px);
    background: var(--bg-secondary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .model-option:hover {
    background: var(--bg-tertiary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.model-option .delete-model-btn {
    transition: all 0.2s ease;
    opacity: 0;
}

.model-option:hover .delete-model-btn {
    opacity: 1 !important;
}

.model-option .delete-model-btn:hover {
    transform: scale(1.1);
    opacity: 1 !important;
}

/* 自定义模型添加选项特殊样式 */
.model-option[data-value="custom"] {
    color: #3b82f6;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
    padding-top: 8px;
}

[data-theme="dark"] .model-option[data-value="custom"] {
    color: #60a5fa;
}

.model-option[data-value="custom"]:hover {
    background: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .model-option[data-value="custom"]:hover {
    background: rgba(96, 165, 250, 0.15) !important;
}

/* 模型选项文本样式 */
.model-option span {
    color: inherit;
    font-weight: 500;
}

/* 分隔线样式 */
.model-option + .border-t {
    border-color: var(--border-color);
    margin: 8px 0;
}

/* 删除模型确认提示样式 */
#deleteModelConfirm {
    transition: all 0.3s ease;
    animation: slideInRight 0.3s ease-out;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

[data-theme="dark"] #deleteModelConfirm {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
}

#deleteModelConfirm.hidden {
    display: none !important;
}

#deleteModelName {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 删除确认动画 */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 模型选择器焦点状态 */
#modelSelectBtn:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] #modelSelectBtn:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* 模型选择器禁用状态 */
#modelSelectBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}

/* 下拉菜单阴影增强 */
#modelDropdown {
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.1),
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 0 0 1px var(--border-color);
}

[data-theme="dark"] #modelDropdown {
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.4),
        0 4px 6px rgba(0, 0, 0, 0.2),
        0 0 0 1px var(--border-color);
}

/* 模型选择器响应式样式 */
@media (max-width: 1200px) {
    #modelSelectBtn {
        min-width: 200px;
    }

    #modelDropdown {
        min-width: 260px;
    }
}

@media (max-width: 1024px) {
    #modelSelectBtn {
        min-width: 180px;
    }

    #modelDropdown {
        min-width: 240px;
    }

    #customModelInput {
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    #modelSelectBtn {
        min-width: 160px;
        font-size: 0.8125rem;
    }

    #modelDropdown {
        min-width: 220px;
        left: 0;
        right: 0;
        width: auto;
    }

    .model-option {
        padding: 0.625rem 0.75rem;
    }

    .model-option span {
        font-size: 0.8125rem;
    }

    #customModelContainer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    #customModelInput {
        min-width: auto;
        width: 100%;
    }

    #customModelContainer .btn-action {
        justify-content: center;
    }


    #deleteModelConfirm span {
        text-align: center;
    }

    #deleteModelName {
        max-width: none;
        text-align: center;
    }

    #deleteModelConfirm .btn-action {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    #modelSelectBtn {
        min-width: 140px;
        padding: 0.375rem 0.75rem;
    }

    #modelDropdown {
        min-width: 200px;
        max-height: 60vh;
    }

    .model-option {
        padding: 0.5rem 0.625rem;
    }

    .model-option span {
        font-size: 0.75rem;
    }

    .delete-model-btn {
        padding: 0.25rem;
    }
}

/* 访问密钥验证模态框样式 */
#accessKeyModal {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}

[data-theme="dark"] #accessKeyModal {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
}

/* 访问密钥模态框内容 */
#accessKeyModal > div {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] #accessKeyModal > div {
    background: rgba(31, 41, 55, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(75, 85, 99, 0.3) !important;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 10px 25px -5px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* 访问密钥输入框样式 */
#accessKeyInput {
    transition: all 0.3s ease !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(209, 213, 219, 0.5) !important;
}

#accessKeyInput:focus {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px);
    border-color: #3b82f6 !important;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.1),
        0 10px 25px -5px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] #accessKeyInput {
    background: rgba(55, 65, 81, 0.9) !important;
    color: #f9fafb !important;
    border-color: rgba(75, 85, 99, 0.5) !important;
}

[data-theme="dark"] #accessKeyInput:focus {
    background: rgba(55, 65, 81, 1) !important;
    border-color: #60a5fa !important;
    box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.15),
        0 10px 25px -5px rgba(96, 165, 250, 0.3) !important;
}

/* 访问密钥按钮样式 */
#verifyAccessKey {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    border: none !important;
}

#verifyAccessKey:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4) !important;
}

#verifyAccessKey:active {
    transform: translateY(0);
}

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

#verifyAccessKey:hover::before {
    left: 100%;
}

/* 密码可见性切换按钮 */
#toggleAccessKeyVisibility {
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 4px;
}

#toggleAccessKeyVisibility:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.1);
}

[data-theme="dark"] #toggleAccessKeyVisibility:hover {
    background: rgba(96, 165, 250, 0.15);
}

/* 访问密钥状态提示框 */
#accessKeyError {
    animation: shake 0.5s ease-in-out;
    background: rgba(254, 242, 242, 0.9) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

[data-theme="dark"] #accessKeyError {
    background: rgba(127, 29, 29, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    backdrop-filter: blur(10px);
}

#accessKeyLoading {
    background: rgba(239, 246, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(147, 197, 253, 0.3) !important;
}

[data-theme="dark"] #accessKeyLoading {
    background: rgba(30, 58, 138, 0.3) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    backdrop-filter: blur(10px);
}

/* 访问密钥模态框动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 访问密钥模态框进入动画增强 */
#accessKeyModal .animate-slide-down {
    animation: accessKeySlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes accessKeySlideIn {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 访问密钥模态框标题和图标动画 */
#accessKeyModal .text-4xl {
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 访问密钥模态框响应式设计 */
@media (max-width: 640px) {
    #accessKeyModal .w-96 {
        width: calc(100vw - 2rem) !important;
        max-width: none !important;
    }

    #accessKeyModal .p-8 {
        padding: 1.5rem !important;
    }

    #accessKeyInput {
        font-size: 1rem !important; /* 防止iOS缩放 */
    }

    #verifyAccessKey {
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* 访问密钥模态框文字颜色主题适应 */
#accessKeyModal h3 {
    color: #111827 !important;
}

#accessKeyModal p {
    color: #6b7280 !important;
}

#accessKeyModal label {
    color: #374151 !important;
}

[data-theme="dark"] #accessKeyModal h3 {
    color: #f9fafb !important;
}

[data-theme="dark"] #accessKeyModal p {
    color: #d1d5db !important;
}

[data-theme="dark"] #accessKeyModal label {
    color: #e5e7eb !important;
}

[data-theme="dark"] #accessKeyModal .text-gray-900 {
    color: #f9fafb !important;
}

[data-theme="dark"] #accessKeyModal .text-gray-600 {
    color: #d1d5db !important;
}

[data-theme="dark"] #accessKeyModal .text-gray-700 {
    color: #e5e7eb !important;
}

[data-theme="dark"] #accessKeyModal .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] #accessKeyModal .text-red-600 {
    color: #f87171 !important;
}

[data-theme="dark"] #accessKeyModal .text-blue-600 {
    color: #60a5fa !important;
}