.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

.glass-panel{
    background:rgba(22,27,38,.75);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
}

.prose pre{
    background-color:#111827!important;
    padding:2.65rem 1rem 1rem 1rem;
    border-radius:.5rem;
    margin:.75rem 0;
    position:relative;
    overflow-x:auto;
    max-width:100%;
}

.prose code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    background-color:rgba(255,255,255,.1);
    padding:.2rem .4rem;
    border-radius:.25rem;
    font-size:.875em;
}

.prose pre code{
    background-color:transparent;
    padding:0;
    white-space:pre;
}

.prose p{margin-bottom:.5rem}
.prose p:last-child{margin-bottom:0}

.code-collapsed{
    max-height:360px;
    overflow:hidden!important;
}

.code-fade-mask{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:80px;
    pointer-events:none;
    background:linear-gradient(to top,#111827 20%,rgba(17,24,39,0));
}

.copy-code-btn,
.toggle-code-btn{
    position:absolute;
    top:8px;
    z-index:40;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.06);
    color:#d1d5db;
    border-radius:.45rem;
    font-size:11px;
    line-height:1;
    transition:.2s;
    display:flex;
    align-items:center;
    gap:4px;
}

.copy-code-btn:hover,
.toggle-code-btn:hover{
    background:rgba(255,255,255,.14);
    color:white;
}

.copy-code-btn{
    right:8px;
    padding:6px;
}

.toggle-code-btn{
    left:8px;
    padding:7px 10px;
}

.code-live-progress{
    position:absolute;
    top:8px;
    left:8px;
    right:46px;
    z-index:35;
    height:28px;
    border:1px solid rgba(168,85,247,.25);
    background:rgba(17,24,39,.92);
    backdrop-filter:blur(10px);
    border-radius:.45rem;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    color:#d8b4fe;
    font-size:11px;
    pointer-events:none;
}

.code-live-progress-bar{
    position:relative;
    flex:1;
    height:4px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}

.code-live-progress-bar::after{
    content:"";
    position:absolute;
    inset:0;
    width:45%;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,#a855f7,transparent);
    animation:codeProgressMove 1.1s infinite linear;
}

@keyframes codeProgressMove{
    from{transform:translateX(-110%)}
    to{transform:translateX(240%)}
}

.prose pre.is-streaming-code{
    padding-top:3.25rem;
}

.history-window-tip{
    text-align:center;
    font-size:11px;
    color:#6b7280;
    padding:8px 0;
}

.toast-enter{
    animation:toastIn .22s ease-out forwards;
}

@keyframes toastIn{
    from{opacity:0;transform:translateY(-8px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.modal-enter{
    animation:modalIn .18s ease-out forwards;
}

@keyframes modalIn{
    from{opacity:0;transform:scale(.96)}
    to{opacity:1;transform:scale(1)}
}

/* ===== 上传文件预览区域滚动优化 START ===== */
#previewGrid{
    max-height:180px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(168,85,247,.3) transparent;
}

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

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

#previewGrid::-webkit-scrollbar-thumb{
    background:rgba(168,85,247,.3);
    border-radius:999px;
}

#previewGrid::-webkit-scrollbar-thumb:hover{
    background:rgba(168,85,247,.55);
}

#previewGrid:not(:empty){
    padding:2px;
    border:1px solid rgba(168,85,247,.15);
    border-radius:8px;
    background:rgba(168,85,247,.04);
}

html[data-theme="light"] #previewGrid::-webkit-scrollbar-thumb{
    background:rgba(99,102,241,.35);
}

html[data-theme="light"] #previewGrid::-webkit-scrollbar-thumb:hover{
    background:rgba(99,102,241,.6);
}

html[data-theme="light"] #previewGrid:not(:empty){
    border-color:rgba(99,102,241,.2);
    background:rgba(99,102,241,.06);
}
/* ===== 上传文件预览区域滚动优化 END ===== */

/* ===== Jump bottom button START ===== */
.jump-bottom-btn{
    position:fixed;
    right:18px;
    bottom:96px;
    z-index:9999;
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(168,85,247,.38);
    background:rgba(17,24,39,.9);
    color:#f3e8ff;
    font-size:12px;
    line-height:1;
    box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    cursor:pointer;
    opacity:0;
    transform:translateY(12px) scale(.96);
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease;
}

.jump-bottom-btn.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.jump-bottom-btn:hover{
    background:rgba(126,34,206,.95);
    border-color:rgba(216,180,254,.72);
    color:#fff;
}

.jump-bottom-btn-icon{
    width:18px;
    height:18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(168,85,247,.28);
    font-size:14px;
    line-height:1;
}

@media (max-width:640px){
    .jump-bottom-btn{
        right:14px;
        bottom:88px;
        padding:9px 12px;
        font-size:11px;
    }
}
/* ===== Jump bottom button END ===== */

/* ===== Continue generation button START ===== */
.continue-generation-btn{
    position:fixed;
    right:18px;
    bottom:148px;
    z-index:9998;
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(34,197,94,.38);
    background:rgba(17,24,39,.9);
    color:#dcfce7;
    font-size:12px;
    line-height:1;
    box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    cursor:pointer;
    opacity:0;
    transform:translateY(12px) scale(.96);
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease;
}

.continue-generation-btn.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.continue-generation-btn:hover{
    background:rgba(22,163,74,.95);
    border-color:rgba(187,247,208,.72);
    color:#fff;
}

.continue-generation-btn-icon{
    width:18px;
    height:18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(34,197,94,.28);
    font-size:14px;
    line-height:1;
}

@media (max-width:640px){
    .continue-generation-btn{
        right:14px;
        bottom:138px;
        padding:9px 12px;
        font-size:11px;
    }
}
/* ===== Continue generation button END ===== */

/* ===== 提示词偏好面板 START ===== */
#promptPanel{will-change:transform}

.preset-card{position:relative;overflow:hidden;transition:all .15s ease}
.preset-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s ease;background:radial-gradient(ellipse at 30% 50%,rgba(168,85,247,.06),transparent 70%);pointer-events:none}
.preset-card:hover::before{opacity:1}

#systemPromptTextarea{scrollbar-width:thin;scrollbar-color:rgba(168,85,247,.3) transparent}
#systemPromptTextarea::-webkit-scrollbar{width:4px}
#systemPromptTextarea::-webkit-scrollbar-track{background:transparent}
#systemPromptTextarea::-webkit-scrollbar-thumb{background:rgba(168,85,247,.3);border-radius:999px}
#systemPromptTextarea::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.55)}

#promptCharCount{transition:color .2s ease}
/* ===== 提示词偏好面板 END ===== */

/* ===== 流式渲染防抖动 START ===== */
.is-streaming pre{
    max-height:none !important;
    overflow:visible !important;
}
.is-streaming .code-fade-mask,
.is-streaming .toggle-code-btn{
    display:none !important;
}
.is-streaming .prose pre{
    transition:none !important;
}
/* ===== 流式渲染防抖动 END ===== */

/* ===== 白色主题 START ===== */
html[data-theme="light"]{ color-scheme:light; }

html[data-theme="light"] body.bg-obsidian{
    background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 50%,#f1f5f9 100%) !important;
    color:#1f2937 !important;
}

html[data-theme="light"] .glass-panel{
    background:rgba(255,255,255,0.78) !important;
    border-color:rgba(15,23,42,0.08) !important;
    box-shadow:0 1px 3px rgba(15,23,42,0.04);
}

/* 文字色阶 */
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200{ color:#0f172a !important; }
html[data-theme="light"] .text-gray-300{ color:#1e293b !important; }
html[data-theme="light"] .text-gray-400{ color:#475569 !important; }
html[data-theme="light"] .text-gray-500{ color:#64748b !important; }
html[data-theme="light"] .text-gray-600{ color:#94a3b8 !important; }

/* 半透明背景层 */
html[data-theme="light"] .bg-white\/3,
html[data-theme="light"] .bg-white\/5{ background-color:rgba(15,23,42,0.04) !important; }
html[data-theme="light"] .bg-white\/10{ background-color:rgba(15,23,42,0.06) !important; }
html[data-theme="light"] .hover\:bg-white\/5:hover,
html[data-theme="light"] .hover\:bg-white\/8:hover,
html[data-theme="light"] .hover\:bg-white\/10:hover{ background-color:rgba(15,23,42,0.09) !important; }
html[data-theme="light"] .bg-black\/40,
html[data-theme="light"] .bg-black\/20,
html[data-theme="light"] .bg-black\/60{ background-color:rgba(255,255,255,0.65) !important; }

/* 边框 */
html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/8,
html[data-theme="light"] .border-white\/10{ border-color:rgba(15,23,42,0.1) !important; }

/* 表单元素 */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{ color:#0f172a !important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{ color:#94a3b8 !important; }

/* 代码块保持深色（更专业） */
html[data-theme="light"] .prose code{
    background-color:rgba(15,23,42,0.08) !important;
    color:#be185d !important;
}
html[data-theme="light"] .prose pre code{
    background-color:transparent !important;
    color:#e5e7eb !important;
}

/* 提示词面板 */
html[data-theme="light"] #promptPanel{
    background:rgba(248,250,252,0.98) !important;
    border-color:rgba(15,23,42,0.1) !important;
    color:#0f172a;
}

/* 浮动按钮 */
html[data-theme="light"] .jump-bottom-btn{
    background:rgba(255,255,255,0.95) !important;
    color:#7e22ce !important;
    border-color:rgba(168,85,247,0.4) !important;
    box-shadow:0 14px 38px rgba(15,23,42,0.18);
}
html[data-theme="light"] .continue-generation-btn{
    background:rgba(255,255,255,0.95) !important;
    color:#16a34a !important;
    border-color:rgba(34,197,94,0.4) !important;
    box-shadow:0 14px 38px rgba(15,23,42,0.18);
}

/* Toast */
html[data-theme="light"] #toastRoot .glass-panel{
    background:rgba(255,255,255,0.96) !important;
    color:#0f172a !important;
}

/* 紫色文字在浅色下加深 */
html[data-theme="light"] .text-purple-200,
html[data-theme="light"] .text-purple-300{ color:#7e22ce !important; }

/* AI 头像 */
html[data-theme="light"] .bg-white\/10.text-gray-300{
    background:#e0e7ff !important;
    color:#4338ca !important;
}

/* 主题按钮 hover */
#themeToggleBtn{ cursor:pointer; }
/* ===== 白色主题 END ===== */

/* ===== 流式代码块实时折叠 (Gemini 风格) START ===== */
.is-streaming-code.is-streaming-tall{
    max-height:320px;
    overflow-y:auto !important;
    overflow-x:auto;
    scroll-behavior:auto;
    position:relative;
}

.is-streaming-tall::-webkit-scrollbar{width:6px;height:6px}
.is-streaming-tall::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
.is-streaming-tall::-webkit-scrollbar-thumb{background:rgba(168,85,247,0.35);border-radius:4px}
.is-streaming-tall::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,0.6)}

/* 浅色主题适配 */
html[data-theme="light"] .is-streaming-tall::-webkit-scrollbar-track{background:rgba(15,23,42,0.06)}

/* 实时滚动徽章 */
.is-streaming-code.is-streaming-tall::before{
    content:"⚡ 实时滚动 · 完成后可展开查看完整代码";
    position:sticky;
    top:0;
    left:0;
    z-index:50;
    display:block;
    padding:4px 10px;
    background:linear-gradient(90deg,rgba(168,85,247,0.92),rgba(99,102,241,0.92));
    color:#fff;
    font-size:10px;
    font-weight:500;
    text-align:center;
    backdrop-filter:blur(8px);
    margin:-2.65rem -1rem 0.5rem -1rem;
    border-radius:0;
}
/* ===== 流式代码块实时折叠 END ===== */

/* ===== 渲染性能优化 (主流 AI 同款) START ===== */
/* 1. CSS containment：隔离每条消息的布局/样式/绘制 */
#chatContainer > div{
    contain:layout style;
}

/* 2. content-visibility：屏幕外历史消息跳过渲染 (Chrome 85+) */
/* Gmail / Twitter / Discord 都用这招处理长列表 */
#chatContainer > div:not(:nth-last-child(-n+5)){
    content-visibility:auto;
    contain-intrinsic-size:auto 280px;
}

/* 3. GPU 合成层：流式消息走独立图层，不影响主线程 */
.is-streaming{
    will-change:contents;
    transform:translateZ(0);
    backface-visibility:hidden;
}

/* 4. prose 容器隔离 */
.prose{contain:style}

/* 5. 流式期间禁用文本选择上的复杂效果（减少重绘） */
.is-streaming *{
    text-rendering:optimizeSpeed;
}
/* ===== 渲染性能优化 END ===== */

/* ===== 流式代码块立即折叠 START ===== */
.code-collapsed-stream{
    max-height:260px !important;
    overflow:hidden !important;
}

.toggle-code-btn-stream{
    left:8px;
    bottom:8px;
    top:auto !important;
}

.code-fade-mask-stream{
    height:96px;
}
/* ===== 流式代码块立即折叠 END ===== */

.code-collapsed-stream{
    max-height:260px !important;
    overflow:hidden !important;
    position:relative !important;
}

.toggle-code-btn-stream{
    z-index:60 !important;
}

.code-fade-mask-stream{
    z-index:45 !important;
}

.prose pre.code-collapsed-stream{
    padding-bottom:3rem !important;
}

.toggle-code-btn-stream{
    z-index:60 !important;
}

.code-fade-mask-stream{
    z-index:45 !important;
}

.prose pre.code-collapsed-stream{
    padding-bottom:3rem !important;
}

/* ===== 流式阶段硬折叠 START ===== */
.prose pre.code-collapsed-stream{
    max-height:260px !important;
    overflow:hidden !important;
    position:relative !important;
    padding-bottom:2.8rem !important;
}

.prose pre.code-collapsed-stream .copy-code-btn{
    z-index:70 !important;
}

.prose pre .code-fade-mask-stream{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:110px;
    pointer-events:none;
    z-index:60 !important;
    background:linear-gradient(to top,#111827 18%,rgba(17,24,39,0));
}

html[data-theme="light"] .prose pre .code-fade-mask-stream{
    background:linear-gradient(to top,#111827 18%,rgba(17,24,39,0));
}
/* ===== 流式阶段硬折叠 END ===== */

/* ===== 代码高亮优化 START ===== */
.prose pre code.hljs{
    display:block;
    overflow-x:auto;
    background:transparent !important;
    color:inherit;
    padding:0;
}

.prose pre .hljs{
    background:transparent !important;
}

.prose pre{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

html[data-theme="light"] .prose pre{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
/* ===== 代码高亮优化 END ===== */

/* ===== 代码工具栏最终修复 START ===== */
.prose pre{
    position:relative;
}

.code-lang-badge{
    position:absolute;
    left:10px;
    top:8px;
    z-index:80;
    padding:4px 8px;
    border-radius:6px;
    font-size:10px;
    line-height:1;
    color:#c4b5fd;
    background:rgba(168,85,247,.14);
    border:1px solid rgba(168,85,247,.18);
    text-transform:lowercase;
    pointer-events:none;
}

.copy-code-btn{
    position:absolute;
    top:8px;
    right:8px;
    z-index:85 !important;
}

.toggle-code-btn{
    position:absolute;
    top:8px !important;
    right:42px !important;
    left:auto !important;
    bottom:auto !important;
    z-index:86 !important;
    padding:6px 9px !important;
}

.prose pre code.hljs,
.prose pre .hljs{
    display:block;
    background:transparent !important;
    color:inherit;
}

.prose pre .hljs-keyword,
.prose pre .hljs-selector-tag,
.prose pre .hljs-title,
.prose pre .hljs-section,
.prose pre .hljs-doctag,
.prose pre .hljs-name,
.prose pre .hljs-strong{
    color:#c084fc !important;
}

.prose pre .hljs-string,
.prose pre .hljs-attr,
.prose pre .hljs-template-tag,
.prose pre .hljs-template-variable{
    color:#86efac !important;
}

.prose pre .hljs-number,
.prose pre .hljs-literal,
.prose pre .hljs-symbol,
.prose pre .hljs-bullet{
    color:#f9a8d4 !important;
}

.prose pre .hljs-comment,
.prose pre .hljs-quote{
    color:#6b7280 !important;
}

.prose pre .hljs-variable,
.prose pre .hljs-regexp,
.prose pre .hljs-link{
    color:#7dd3fc !important;
}
/* ===== 代码工具栏最终修复 END ===== */

/* ===== 独立停止按钮 START ===== */
.standalone-stop-btn{
    position:fixed;
    right:18px;
    bottom:200px;
    z-index:9997;
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(244,63,94,.38);
    background:rgba(17,24,39,.9);
    color:#fecdd3;
    font-size:12px;
    line-height:1;
    box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    cursor:pointer;
    opacity:0;
    transform:translateY(12px) scale(.96);
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease;
}

.standalone-stop-btn.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.standalone-stop-btn:hover{
    background:rgba(220,38,38,.95);
    border-color:rgba(254,205,211,.72);
    color:#fff;
}

.standalone-stop-btn-icon{
    width:18px;
    height:18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(244,63,94,.28);
    font-size:14px;
    line-height:1;
}

@media (max-width:640px){
    .standalone-stop-btn{
        right:14px;
        bottom:180px;
        padding:9px 12px;
        font-size:11px;
    }
}
/* ===== 独立停止按钮 END ===== */

/* 隐藏原来的停止按钮 */
#stopBtn{
    display:none !important;
}