p{margin-bottom:0}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{margin:0}
/* 根元素变量定义 */
:root {
    --primary-color: #6e45e2;
    --primary-gradient: #6e45e2;
    --ai-message-bg: #f5f5f5;
    --surface-color: #ffffff;
    --secondary-color: #6c757d;
    --message-bg: #f3f3f9;
    --user-message-bg: #6e45e2;
    --text-color: #001d42;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --shadow: 0 4px 20px rgb(169, 157, 231,.2);
    --border-radius: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container{display:flex;flex-direction:column;height:100vh;max-width:100%;margin:0 auto;overflow:hidden}
.model-badge{background:rgba(255,255,255,.15);padding:.3rem .9rem;border-radius:20px;font-size:.9rem;font-weight:600;backdrop-filter:blur(10px);border:none}
.status-indicator{display:flex;align-items:center;gap:6px;font-size:.85rem}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#0C9;box-shadow:0 0 8px #0C9}
.app-main{flex:1;overflow:hidden;display:flex;flex-direction:column}
.chat-container{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column}
.chat-messages{flex:1;overflow-y:auto;padding:0;scroll-behavior:smooth}
.message{display:flex;margin-bottom:0.5rem;max-width:100%;animation:fadeIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px) scale(.95)}
to{opacity:1;transform:translateY(0) scale(1)}}
.user-message{align-self:flex-end;flex-direction:row-reverse}
.ai-message{align-self:flex-start}
.message-content{flex:1;min-width:0}
.message-text{padding:1rem;border-radius:var(--border-radius);word-wrap:break-word;white-space:pre-wrap;line-height:1.5}
.user-message .message-text{color: #0c9;font-weight:500;text-align:right}
.ai-message .message-text{border-top-left-radius:4px;border:none}
.message-media{margin-top:8px;border-radius:var(--border-radius);overflow:hidden;max-width:100%;text-align: right;}
.message-media img,.message-media video{max-width:100%;max-height:300px;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition)}
.message-media img:hover,.message-media video:hover{transform:scale(1.02);box-shadow:var(--shadow)}
.message-file{display:flex;align-items:center;padding:10px;background-color:var(--message-bg);border-radius:var(--border-radius);margin-top:8px;cursor:pointer;transition:var(--transition);border:1px solid var(--border-color)}
.message-file:hover{background-color:var(--border-color)}
.message-file i{margin-right:10px;font-size:1.2rem}
.loading-indicator{display:none;flex-direction:column;align-items:center;justify-content:center;padding:1rem;margin-bottom:1rem;border-radius:var(--border-radius);backdrop-filter:blur(10px);border:none}
.loading-indicator.active{display:flex}
.thinking-progress{width:100%;max-width:200px;margin-top:1rem}
.progress-bar{width:100%;height:6px;background-color:var(--border-color);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;width:30%;background:var(--primary-gradient);border-radius:3px;animation:progressAnimation 2s ease-in-out infinite}
.loading-dots{display:flex;margin-right:10px}
.loading-dots span{width:10px;height:10px;border-radius:50%;background:var(--primary-gradient);margin:0 4px;animation:pulse 1.4s infinite ease-in-out both}
.loading-dots span:first-child{animation-delay:-.32s}
.loading-dots span:nth-child(2){animation-delay:-.16s}
@keyframes pulse{0%,100%,80%{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}
@keyframes progressAnimation{0%{width:30%}50%{width:70%}100%{width:30%}}
.app-footer{padding:1rem}
.input-container{display:flex;align-items:center;gap:10px;max-width:100%;margin:0 auto;background-color:#fff;border:none;border-radius:24px;padding:1rem;box-shadow:var(--shadow)}
.file-upload-container{display:flex;align-items:center}
.file-upload-btn{width:61px;height:61px;font-size: 1.2rem; border:none;border-radius:50%;background-color:var(--message-bg);color:var(--text-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}
.file-upload-btn:hover{background-color:var(--secondary-color);transform:scale(1.1);color:#fff}
.text-input-container{flex:1;position:relative;min-width:0}
.message-input{width:100%;min-height:61px;max-height:120px;padding:8px 16px;border:none;border-radius:18px;resize:none;font-family:inherit;font-size:1rem;transition:var(--transition);background-color:var(--message-bg);color:var(--text-color);outline:0;line-height:1.4}
.message-input:focus{background-color:var(--message-bg);box-shadow:0 0 0 2px rgba(110,69,226,.2)}
.message-input::placeholder{color:var(--text-secondary)}
.send-btn,.voice-btn{width:61px;height:61px;font-size: 1.2rem;border:none;border-radius:50%;background:var(--primary-gradient);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;margin-left:0}
.voice-btn{background:var(--message-bg);color:var(--text-color);box-shadow:none}
.send-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(110,69,226,.4)}
.voice-btn:hover{background:var(--secondary-color);color:#fff;transform:scale(1.05)}
.send-btn:disabled{background:var(--text-secondary);cursor:not-allowed;transform:none;box-shadow:none}
.uploaded-files-preview{background-color:#FFF;border-radius:1rem;margin:10px;display:flex;flex-wrap:wrap;gap:10px;max-width:100%;margin-left:auto;margin-right:auto;border:none}
.file-preview{position:relative;width:80px;height:80px;border-radius:var(--border-radius);overflow:hidden;border:1px solid var(--border-color)}
.file-preview img,.file-preview video{width:100%;height:100%;object-fit:cover}
.file-preview .file-info{position:absolute;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.6);color:#fff;padding:3px;font-size:.7rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-preview .remove-file{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background-color:rgba(255,255,255,.8);color:#333;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:var(--transition)}
.file-preview .remove-file:hover{background-color:#fff;transform:scale(1.1)}
.media-preview-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:1000;align-items:center;justify-content:center}
.media-preview-modal.active{display:flex}
.modal-content{position:relative;max-width:90%;max-height:90%;background-color:#fff;border-radius:var(--border-radius);overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.3)}
.close-modal{position:absolute;top:10px;right:15px;font-size:2rem;color:#fff;cursor:pointer;z-index:1001}
.media-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.media-container img,.media-container video{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:768px){.app-container{height:100vh}
.message{max-width:95%}
.header-content{flex-direction:row;gap:.5rem}
.header-right{gap:8px}
.app-title{font-size:1.2rem}
.model-badge{font-size:.7rem;padding:.2rem .6rem}
.status-text{display:none}
.input-container{padding:.5rem}
.file-upload-btn,.send-btn,.voice-btn{width:36px;height:36px}
.message-input{font-size:.9rem}
.uploaded-files-preview{gap:6px}
.file-preview{width:60px;height:60px}
}
@media (max-width:480px){.message-avatar{margin:0 8px}
.message-text{padding:8px 12px;font-size:.9rem}
.file-preview{width:50px;height:50px}
.header-content{flex-direction:row;justify-content:space-between}
.app-title{font-size:1rem}
.model-badge{font-size:.6rem;padding:.1rem .4rem}
.input-container{gap:5px}
}
/* 滚动条样式 */
.chat-messages::-webkit-scrollbar{width:1px}
.chat-messages::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
.chat-messages::-webkit-scrollbar-thumb{background:#6e45e2;border-radius:10px}
.chat-messages::-webkit-scrollbar-thumb:hover{background:#88d3ce}
/* Markdown元素样式 */
.message-text ul, .message-text ol {margin-bottom: 0;padding-left: 2em}
.message-text li {margin-bottom: 0}
.message-text blockquote {padding: 0 1em;color: #6a737d;border-left: 0.25em solid #dfe2e5;margin-bottom: 1em}
.message-text code {padding: 0.2em 0.4em;margin: 0;font-size: 85%;background-color: rgba(27,31,35,0.05);border-radius: 3px;font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace}
.message-text pre {padding: 16px;overflow: auto;font-size: 85%;line-height: 1.45;background-color: #f6f8fa;border-radius: 6px;margin-bottom: 1em;}
.message-text pre code {padding: 0;margin: 0;font-size: 100%;background-color: transparent;border-radius: 0}
.message-text table {border-collapse: collapse;border-spacing: 0;width: 100%;margin-bottom: 1em}
.message-text table th, .message-text table td {padding: 6px 13px;border: 1px solid #dfe2e5}
.message-text table th {font-weight: 600;background-color: #f6f8fa}
.message-text table tr:nth-child(2n) {background-color: #f6f8fa}
.message-text a {color: #0366d6;text-decoration: none}
.message-text a:hover {text-decoration: underline}
.message-text hr {
    height: 0.25em;
    padding: 0;
    margin: 24px 0;
    background-color: #e1e4e8;
    border: 0;
}

.message-text img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5em 0;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
    .message-text blockquote {
        color: #8b949e;
        border-left-color: #30363d;
    }
    
    .message-text code {
        background-color: rgba(110, 118, 129, 0.4);
    }
    
    .message-text pre {
        background-color: #161b22;
    }
    
    .message-text table th, .message-text table td {
        border-color: #30363d;
    }
    
    .message-text table th {
        background-color: #161b22;
    }
    
    .message-text table tr:nth-child(2n) {
        background-color: #0d1117;
    }
    
    .message-text a {
        color: #58a6ff;
    }
    
    .message-text hr {
        background-color: #30363d;
    }
}