/* ================================================= */
/* == 现代都市主题CSS美化方案 == */
/* ================================================= */

/* ================================================= */
/* == 1. 通用重置与基础设置 == */
/* ================================================= */

* {
    box-sizing: border-box;
}

/* 现代都市字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500&display=swap');

/* ================================================= */
/* == 2. 聊天对话框美化 (AI侧) - 现代玻璃态设计 == */
/* ================================================= */

.group .bg-gray-100\/90 {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #1a1a1a !important;
    padding: 20px !important;
    margin: 12px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 对话气泡左侧装饰线 */
.group .bg-gray-100\/90::before {
    content: '';
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 4px !important;
    background: linear-gradient(to bottom, #4A90E2, #50E3C2) !important;
    border-radius: 0 4px 4px 0 !important;
}

/* 代码块特殊处理 */
.group .bg-gray-100\/90 pre,
.group .bg-gray-100\/90 code {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* ================================================= */
/* == 3. 平台按钮美化 (MOD、流式等) - 现代扁平化设计 == */
/* ================================================= */

/* 主按钮容器 */
.flex.items-center.gap-2.pb-2 > button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    padding: 10px 20px !important;
    letter-spacing: 0.3px !important;
}

/* 按钮悬停效果 */
.flex.items-center.gap-2.pb-2 > button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
}

/* 按钮激活效果 */
.flex.items-center.gap-2.pb-2 > button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

/* ================================================= */
/* == 4. 消息操作按钮 (复制、编辑等) == */
/* ================================================= */

.MuiButtonBase-root.MuiButton-root.MuiButton-text {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px !important;
    color: #555 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    margin: 4px !important;
    transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text:hover {
    background: white !important;
    border-color: #667eea !important;
    color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
}

/* ================================================= */
/* == 5. 输入栏美化 - 现代简约设计 == */
/* ================================================= */

#ai-chat-input {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    border-radius: 16px !important;
    color: #1a1a1a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    padding: 16px 20px !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

#ai-chat-input:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 
        0 4px 25px rgba(102, 126, 234, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* 输入框容器 */
#ai-chat-bottom-input {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 20px !important;
}

/* ================================================= */
/* == 6. 状态栏美化 (details折叠状态栏) - 现代卡片设计 == */
/* ================================================= */

/* 通用details样式 */
.markdown-body details {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.markdown-body details:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Summary标题样式 */
.markdown-body details > summary {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
    color: #2c3e50 !important;
    padding: 16px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    list-style: none !important;
    border: none !important;
    border-radius: 16px 16px 0 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.markdown-body details > summary::marker,
.markdown-body details > summary::-webkit-details-marker {
    display: none !important;
}

.markdown-body details > summary::after {
    content: '▶' !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 0.3s ease !important;
    color: #667eea !important;
    font-size: 12px !important;
}

.markdown-body details[open] > summary::after {
    transform: translateY(-50%) rotate(90deg) !important;
}

.markdown-body details[open] > summary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 状态栏内容样式 */
.status-content {
    padding: 24px !important;
    background: white !important;
}

.status-content p {
    margin: 12px 0 !important;
    padding: 12px 16px !important;
    background: rgba(245, 247, 250, 0.5) !important;
    border-radius: 12px !important;
    border-left: 3px solid #667eea !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    transition: all 0.2s ease !important;
}

.status-content p:hover {
    background: rgba(102, 126, 234, 0.05) !important;
    transform: translateX(4px) !important;
}

/* 表格美化 */
.markdown-body details table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 16px 0 !important;
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.markdown-body details th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: left !important;
}

.markdown-body details td {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #555 !important;
}

.markdown-body details tr:hover td {
    background: rgba(102, 126, 234, 0.03) !important;
}

/* ================================================= */
/* == 7. 加载状态美化 - 现代都市动态文字 == */
/* ================================================= */

/* 加载动画容器 */
.flex.items-center.justify-center.w-6.h-5 {
    width: 100% !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 加载文字 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    position: relative !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: transparent !important;
    background: linear-gradient(90deg, #667eea, #764ba2, #50E3C2, #667eea) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: cityPulse 2s ease-in-out infinite !important;
    white-space: nowrap !important;
}

.style_dot-flashing__8L91Q.style_text__zGhNq::before {
    content: "🌆 城市脉搏·正在连接 🌃" !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* 加载动画 */
@keyframes cityPulse {
    0% {
        background-position: 0% 50%;
        opacity: 0.8;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.8;
    }
}

/* ================================================= */
/* == 8. 积分消耗显示美化 == */
/* ================================================= */

.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
    margin: 8px 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

.MuiTypography-root.MuiTypography-body2.text-orange-500.css-1x48u03 {
    color: #667eea !important;
    font-weight: 500 !important;
    position: relative !important;
    padding-left: 24px !important;
}

.MuiTypography-root.MuiTypography-body2.text-orange-500.css-1x48u03::before {
    content: '💎' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ================================================= */
/* == 9. 顶部导航栏美化 == */
/* ================================================= */

/* 导航栏容器 */
.flex.items-center.justify-between.w-full.relative {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 0 0 16px 16px !important;
    padding: 16px 24px !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2) !important;
    border: none !important;
}

/* 模型选择器 */
#ai-model-selector .group {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
}

#ai-model-selector .group:hover {
    background: white !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* 模型名称 */
.truncate.text-\[13px\].font-medium.text-\[#292A2B\].group-hover\:text-\[#1E88E5\] {
    color: #2c3e50 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* 图标按钮 */
.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall.css-xz9haa {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 10px !important;
    padding: 8px !important;
    transition: all 0.3s ease !important;
}

.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall.css-xz9haa:hover {
    background: white !important;
    transform: rotate(15deg) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ================================================= */
/* == 10. 开场白按钮美化 == */
/* ================================================= */

/* 开场白容器 */
.inline-block[data-state="closed"] > div {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.inline-block[data-state="closed"] > div:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

/* 开场白图标 */
.inline-block[data-state="closed"] svg {
    color: white !important;
    transition: transform 0.3s ease !important;
}

.inline-block[data-state="closed"] > div:hover svg {
    transform: scale(1.1) !important;
}

/* ================================================= */
/* == 11. 现代都市背景图案装饰 == */
/* ================================================= */

/* 对话气泡装饰 - 天际线剪影 */
.group .bg-gray-100\/90::after {
    content: '';
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100px !important;
    height: 40px !important;
    background: 
        linear-gradient(90deg, 
            transparent 10px, 
            rgba(102, 126, 234, 0.1) 10px, 
            rgba(102, 126, 234, 0.1) 15px,
            transparent 15px,
            transparent 30px,
            rgba(80, 227, 194, 0.1) 30px,
            rgba(80, 227, 194, 0.1) 35px,
            transparent 35px
        ),
        linear-gradient(90deg, 
            transparent 50px,
            rgba(118, 75, 162, 0.1) 50px,
            rgba(118, 75, 162, 0.1) 55px,
            transparent 55px
        );
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none !important;
}

/* ================================================= */
/* == 12. 移动端适配 == */
/* ================================================= */

@media (max-width: 768px) {
    /* 对话气泡 */
    .group .bg-gray-100\/90 {
        border-radius: 14px !important;
        padding: 16px !important;
        margin: 10px 0 !important;
    }
    
    /* 按钮 */
    .flex.items-center.gap-2.pb-2 > button {
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    
    /* 状态栏 */
    .markdown-body details > summary {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }
    
    .status-content {
        padding: 16px !important;
    }
    
    .status-content p {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    
    /* 加载动画 */
    .style_dot-flashing__8L91Q.style_text__zGhNq::before {
        font-size: 16px !important;
    }
    
    /* 输入框 */
    #ai-chat-input {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
    
    /* 导航栏 */
    .flex.items-center.justify-between.w-full.relative {
        padding: 12px 16px !important;
        border-radius: 0 0 12px 12px !important;
    }
}

/* ================================================= */
/* == 13. 深色模式适配 == */
/* ================================================= */

@media (prefers-color-scheme: dark) {
    .group .bg-gray-100\/90 {
        background: rgba(30, 30, 40, 0.95) !important;
        color: #e0e0e0 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .status-content p {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #e0e0e0 !important;
    }
    
    #ai-chat-input {
        background: rgba(30, 30, 40, 0.95) !important;
        color: #e0e0e0 !important;
        border-color: rgba(102, 126, 234, 0.3) !important;
    }
    
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j {
        background: rgba(30, 30, 40, 0.95) !important;
        border-color: rgba(102, 126, 234, 0.3) !important;
    }
}

/* ================================================= */
/* == 14. 动画效果增强 == */
/* ================================================= */

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

/* 为状态栏添加微妙的浮动动画 */
.markdown-body details:hover {
    animation: float 3s ease-in-out infinite;
}

/* ================================================= */
/* == 15. 滚动条美化 == */
/* ================================================= */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
}

/* ================================================= */
/* == 16. 细节微调与优化 == */
/* ================================================= */

/* 确保所有文字清晰可读 */
* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 为可点击元素添加反馈 */
button, 
summary,
.MuiButtonBase-root {
    cursor: pointer;
    user-select: none;
}

/* 平滑过渡效果 */
.group .bg-gray-100\/90,
.markdown-body details,
.flex.items-center.gap-2.pb-2 > button,
#ai-chat-input,
.status-content p {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================= */
/* == 17. 最终优化与完善 == */
/* ================================================= */

/* 移除不必要的边框和阴影 */
.group .bg-gray-100\/90,
.markdown-body details {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 增强层次感 */
.group .bg-gray-100\/90 {
    position: relative;
    z-index: 1;
}

/* 为重要元素添加聚焦样式 */
#ai-chat-input:focus,
.markdown-body details[open] {
    z-index: 2;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
}

/* 响应式字体大小调整 */
@media (min-width: 1200px) {
    .group .bg-gray-100\/90 {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* 打印优化 */
@media print {
    .group .bg-gray-100\/90,
    .markdown-body details {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}