/* Qwen3.8 智能助手样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f7f7f8; color: #1f2328; height: 100vh; overflow: hidden;
}
.hidden { display: none !important; }

/* 登录遮罩 */
#login-mask {
  position: fixed; inset: 0; background: linear-gradient(135deg, #1a1a2e, #16213e);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.login-box {
  background: #fff; border-radius: 16px; padding: 48px 40px; width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center;
}
.login-box h1 { font-size: 22px; margin-bottom: 8px; }
.login-sub { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
.login-box input {
  width: 100%; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: 15px; outline: none; margin-bottom: 14px;
}
.login-box input:focus { border-color: #4f6ef7; }
.login-box button {
  width: 100%; padding: 12px; background: #4f6ef7; color: #fff; border: none;
  border-radius: 10px; font-size: 15px; cursor: pointer;
}
.login-box button:hover { background: #3d5ce0; }
.login-err { color: #dc2626; font-size: 13px; margin-top: 12px; min-height: 18px; }

/* 布局 */
#layout { display: flex; height: 100vh; }
#sidebar {
  width: var(--sidebar-w, 260px); background: #f0f1f5; border-right: 1px solid #e5e7eb;   /* feat11：拖拽宽度走变量（手机抽屉规则在文件更后，级联覆盖不受影响） */
  display: flex; flex-direction: column; padding: 12px;
}
#new-chat {
  padding: 10px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff;
  cursor: pointer; font-size: 14px; margin-bottom: 10px;
}
#new-chat:hover { background: #f3f4f6; }
#import-btn {
  padding: 8px; border: 1px dashed #d1d5db; border-radius: 10px; background: #fffbf0;
  cursor: pointer; font-size: 13px; margin-bottom: 10px; color: #92600a;
}
#import-btn:hover { background: #fdf3d8; }

/* 搜索事件块 */
.search-block {
  margin-bottom: 10px; font-size: 13px; color: #4b5563;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 12px; background: #fafbff;
}
.search-block summary { cursor: pointer; color: #4f6ef7; font-weight: 500; }
.search-query { margin: 8px 0 4px; color: #1f2937; }
.search-results { padding-left: 18px; margin: 4px 0; }
.search-results li { margin: 2px 0; }
.search-results a { color: #4f6ef7; text-decoration: none; word-break: break-all; }
.search-results a:hover { text-decoration: underline; }
#conv-list { flex: 1; overflow-y: auto; list-style: none; }
#conv-list li {
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px;
}
#conv-list li:hover { background: #e5e7eb; }
#conv-list li.active { background: #dde3f5; }
.conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.conv-del {
  border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 16px;
  visibility: hidden; padding: 0 4px;
}
#conv-list li:hover .conv-del { visibility: visible; }
.conv-del:hover { color: #dc2626; }
#sidebar-footer { font-size: 12px; color: #9ca3af; text-align: center; padding: 8px 0; }

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar {
  height: 52px; border-bottom: 1px solid #e5e7eb; background: #fff;
  display: flex; align-items: center; gap: 10px; padding: 0 20px; font-size: 14px;
}
.model-name { font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.green { background: #22c55e; }
.dot.yellow { background: #eab308; }
.dot.red { background: #ef4444; }
.queue-text { color: #6b7280; font-size: 13px; }
.py-status { color: #6b7280; font-size: 13px; }   /* feat9-warm：引擎预热阶段 chip（topbar，与 queue-text 同构） */
.py-status-ok { color: #22c55e; }
.py-status-err { color: #ef4444; }

/* ---------- feat10：用户文件栏 + 手机双侧抽屉 ---------- */
#sidebar-btn { display: none; border: none; background: none; font-size: 17px; cursor: pointer; padding: 2px 6px; }   /* 仅 ≤768px 显示（开左抽屉） */
#files-btn { border: none; background: none; font-size: 16px; cursor: pointer; padding: 2px 6px; }   /* 桌面=折叠文件栏、手机=开右抽屉（审核缺陷1：桌面也必须可见） */
#files-panel { flex-shrink: 0; width: var(--files-w, min(280px, 24vw)); background: #f7f7f8; border-left: 1px solid #e5e7eb;   /* feat11 */
               display: flex; flex-direction: column; padding: 8px; min-height: 0; }
#sidebar { flex-shrink: 0; }   /* 评审一#14：三列互不挤压 */
body.files-collapsed #files-panel { display: none; }
/* ---------- feat11：侧栏拖拽调宽（含零宽折叠） ----------
 * 折叠与 body.files-collapsed 同一状态机（左栏镜像新类 sidebar-collapsed，手机免疫同款：≤768px display:flex !important）；
 * main 的 400px 让位保护只设桌面（手机小屏 375px 设了会横向溢出）。 */
body.sidebar-collapsed #sidebar { display: none; }
@media (min-width: 769px) { #main { min-width: 400px; } }
.dragbar { width: 6px; cursor: col-resize; background: transparent; flex-shrink: 0;
           align-self: stretch; touch-action: none; }
.dragbar:hover, .dragbar.active, .dragbar:focus-visible { background: #cbd5e1; outline: none; }
.dragbar.collapsed { background: #94a3b8; }   /* 折叠态常驻色条 */
@media (max-width: 768px) { .dragbar { display: none; } }
#files-bar { display: flex; align-items: center; gap: 6px; padding: 4px 2px 8px; }
#files-crumb { flex: 1; font-size: 13px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#files-refresh { border: none; background: none; cursor: pointer; font-size: 15px; color: #6b7280; }
#files-tree { flex: 1; overflow-y: auto; min-height: 0; margin: 0; padding: 0; list-style: none; }
.tree-row { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.tree-row:hover { background: #ebeeef; }
.tree-row .fname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-row .fops { display: none; gap: 2px; }
.tree-row:hover .fops { display: flex; }
.tree-row .fops button { border: none; background: none; cursor: pointer; font-size: 12px; padding: 1px 3px; color: #6b7280; }
.tree-row.selected { background: #dde6f0; }
.tree-row.sb-mark { background: #e8f5e9; box-shadow: inset 3px 0 0 #22c55e; }   /* feat10 P2：🧪 注入沙盒标记 */
.dir-arrow { width: 14px; border: none; background: none; cursor: pointer; font-size: 10px; color: #6b7280; padding: 0; }
#files-tools { display: flex; gap: 6px; padding: 8px 2px 4px; }
#files-tools button { flex: 1; padding: 6px 4px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 6px;
                      background: #fff; cursor: pointer; }
#files-tools button:hover { background: #ebeeef; }
#files-quota { font-size: 12px; color: #9ca3af; padding: 4px 2px; }
#drawer-mask { position: fixed; inset: 52px 0 0 0; background: rgba(0,0,0,.3); z-index: 79; }   /* 抽屉专属遮罩（< preview 90） */

/* ≤1200px：气泡放宽，给三列留空间（评审一#14） */
@media (max-width: 1200px) { .bubble { max-width: 92%; } }

/* ≤768px 双侧抽屉（feat10：顺手修 sidebar 直接隐藏的旧缺陷）。
 * 断点状态类互斥（评审一#6）：桌面 files-collapsed 的 display:none 只在宽屏生效——
 * 媒体查询内同特异性规则覆盖它，桌面折叠后缩窗仍可开抽屉 */
@media (max-width: 768px) {
  #sidebar-btn { display: inline-block; }
  #files-btn { display: inline-block; }
  #sidebar { position: fixed; top: 52px; left: 0; bottom: 0; width: min(80vw, 260px); z-index: 80;
             transform: translateX(-100%); transition: transform .2s; box-shadow: 4px 0 16px rgba(0,0,0,.15);
             display: flex !important; }   /* 覆盖旧 display:none */
  body.sidebar-open #sidebar { transform: translateX(0); }
  #files-panel { position: fixed; top: 52px; right: 0; bottom: 0; width: min(85vw, 320px); z-index: 80;
                 transform: translateX(100%); transition: transform .2s; box-shadow: -4px 0 16px rgba(0,0,0,.15);
                 display: flex !important; }   /* 覆盖桌面 files-collapsed 的 display:none（断点互斥） */
  body.files-open #files-panel { transform: translateX(0); }
}

/* feat10：文件查看器骨架（z-index 88：抽屉 80 之上、preview-mask 90 之下） */
#file-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 88;
                   display: flex; flex-direction: column; align-items: center; padding: 30px 16px; }
#file-modal-bar { width: 100%; max-width: 1100px; display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 8px; }
#file-modal-title { margin-right: auto; color: #f3f4f6; font-size: 13px; align-self: center;
                    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#file-modal-bar button { padding: 6px 16px; border: none; border-radius: 8px; cursor: pointer; }
#file-modal-bar button:hover { background: #e5e7eb; }
#file-modal-body { width: 100%; max-width: 1100px; flex: 1; background: #fff; border-radius: 8px;
                   overflow: auto; min-height: 0; }
#file-modal-body pre { padding: 16px; font-size: 13px; white-space: pre-wrap; word-break: break-word; margin: 0; }
#file-modal-body .md-body { padding: 16px; font-size: 14px; }
#file-modal-body embed { width: 100%; height: 100%; }
/* feat10 P3-S3：@ 文件选择器浮层（z-index 86：< file-modal 88） */
#at-picker { position: fixed; right: 24px; bottom: 110px; width: min(360px, 86vw); background: #fff;
             border: 1px solid #d1d5db; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
             z-index: 86; max-height: 280px; overflow-y: auto; padding: 4px; }
.at-item { padding: 7px 10px; font-size: 13px; border-radius: 6px; cursor: pointer;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-item:hover, .at-item.at-active { background: #eef2ff; }

/* feat10 P3-S2：排序下拉/多选/行内重命名/移动浮层 */
#files-bar select { border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; padding: 2px 4px; background: #fff; }
#files-bar button { border: none; background: none; cursor: pointer; font-size: 15px; color: #6b7280; padding: 0 3px; border-radius: 4px; }
.rename-input { flex: 1; border: 1px solid #4f6ef7; border-radius: 4px; font-size: 13px; padding: 2px 6px; min-width: 0; }
#move-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 87; display: flex; align-items: center; justify-content: center; }
#move-modal { background: #fff; border-radius: 10px; padding: 16px; width: min(400px, 90vw); max-height: 70vh; display: flex; flex-direction: column; }
#move-modal h4 { margin: 0 0 10px; font-size: 14px; }
#move-modal-list { flex: 1; overflow-y: auto; min-height: 0; }
#move-modal button:last-child { margin-top: 10px; padding: 6px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; }

.preview-table { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 60%; }
.preview-table th, .preview-table td { border: 1px solid #e5e7eb; padding: 4px 8px; text-align: left; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.preview-table th { background: #f3f4f6; font-weight: 600; position: sticky; top: 0; }
.thinking-toggle { margin-left: auto; font-size: 13px; color: #4b5563; display: flex; gap: 5px; align-items: center; cursor: pointer; }
#logout-btn {
  border: 1px solid #d1d5db; background: #fff; border-radius: 8px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
}
#logout-btn:hover { background: #f3f4f6; }

/* 消息区 */
#messages { flex: 1; overflow-y: auto; padding: 24px 0; }
.msg { display: flex; padding: 6px 24px; }
.msg.user { justify-content: flex-end; }
.bubble {
  max-width: 78%; padding: 12px 16px; border-radius: 14px; font-size: 15px;
  line-height: 1.65; word-wrap: break-word;
}
.msg.user .bubble { background: #4f6ef7; color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant .bubble { background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; }
.user-text { white-space: pre-wrap; }
.msg-attach {
  font-size: 12px; background: rgba(255,255,255,.18); border-radius: 6px;
  padding: 3px 8px; margin-bottom: 6px;
}
.msg.assistant .msg-attach { background: #f3f4f6; color: #4b5563; }

.md-body > :first-child { margin-top: 0; }
.md-body pre {
  background: #f6f8fa; border-radius: 8px; padding: 12px; overflow-x: auto;
  margin: 10px 0; position: relative; font-size: 13px;
}
.md-body code { font-family: "SF Mono", Consolas, monospace; }
.md-body p code, .md-body li code { background: #f0f1f5; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.md-body table { border-collapse: collapse; margin: 10px 0; }
.md-body th, .md-body td { border: 1px solid #d1d5db; padding: 6px 12px; font-size: 14px; }
.md-body th { background: #f3f4f6; }
.md-body ul, .md-body ol { padding-left: 22px; margin: 8px 0; }
.md-body h1, .md-body h2, .md-body h3 { margin: 14px 0 8px; }
.copy-btn {
  position: absolute; top: 6px; right: 6px; border: 1px solid #d1d5db; background: #fff;
  border-radius: 6px; font-size: 12px; padding: 2px 8px; cursor: pointer; color: #4b5563;
}
.reasoning {
  margin-bottom: 8px; font-size: 13px; color: #6b7280;
  border-left: 3px solid #d1d5db; padding-left: 10px;
}
.reasoning summary { cursor: pointer; color: #9ca3af; }
.reasoning-body { white-space: pre-wrap; margin-top: 6px; }
.msg-actions { margin-top: 10px; display: flex; gap: 8px; }
.msg-actions button {
  border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 6px;
  font-size: 12px; padding: 3px 10px; cursor: pointer; color: #4b5563;
}
.msg-actions button:hover { background: #eef1ff; border-color: #4f6ef7; color: #4f6ef7; }

/* 输入区 */
#composer { border-top: 1px solid #e5e7eb; background: #fff; padding: 12px 24px 14px; }
#attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  background: #eef1ff; color: #3d5ce0; border-radius: 14px; font-size: 12.5px;
  padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px;
}
.chip button { border: none; background: none; cursor: pointer; color: #6b7280; font-size: 13px; }
#input-row { display: flex; gap: 10px; align-items: flex-end; }
#attach-btn {
  border: 1px solid #d1d5db; background: #fff; border-radius: 10px; width: 40px;
  height: 40px; font-size: 17px; cursor: pointer; flex-shrink: 0;
}
#attach-btn:hover { background: #f3f4f6; }
#input {
  flex: 1; border: 1px solid #d1d5db; border-radius: 12px; padding: 10px 14px;
  font-size: 15px; font-family: inherit; resize: none; outline: none; line-height: 1.5;
}
#input:focus { border-color: #4f6ef7; }
#send-btn {
  background: #4f6ef7; color: #fff; border: none; border-radius: 10px;
  padding: 0 22px; height: 40px; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
#send-btn:hover { background: #3d5ce0; }
#composer-hint { font-size: 12px; color: #9ca3af; margin-top: 6px; }

/* toast */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-10px);
  background: #1f2937; color: #fff; padding: 10px 20px; border-radius: 10px;
  font-size: 14px; opacity: 0; transition: all .3s; z-index: 200; max-width: 70vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {
  #sidebar { display: none; }
  .bubble { max-width: 92%; }
}

/* 侧边栏设置区（feat4：PPT 配图开关） */
#settings-area { padding: 8px 0; }
#settings-btn {
  width: 100%; padding: 8px 10px; border: none; border-radius: 10px;
  background: transparent; color: #4b5563; cursor: pointer; font-size: 13px;
  text-align: left;
}
#settings-btn:hover { background: #e5e7eb; }
#settings-panel {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 12px; margin-top: 6px;
}
.setting-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.setting-row input { accent-color: #4f6ef7; }
.setting-hint { color: #9ca3af; font-size: 12px; line-height: 1.5; margin-top: 6px; }

/* 加载/失败占位（feat5） */
.spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid #d1d5db; border-top-color: #4f6ef7;
  border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: -2px; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.conv-state { padding: 10px 8px; color: #9ca3af; font-size: 13px; text-align: center; list-style: none; }
.conv-state.error { color: #b91c1c; cursor: pointer; }
.conv-state.error:hover { background: #e5e7eb; }
.msg-state { text-align: center; color: #9ca3af; padding: 40px 0 0; font-size: 14px; }
.msg-state.error { color: #b91c1c; cursor: pointer; }
.msg-state.error:hover { color: #dc2626; }

/* feat9：代码运行与结果区 */
.run-btn { position: absolute; top: 8px; right: 76px; padding: 2px 10px; font-size: 12px;
  background: #4f6ef7; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.run-btn:hover { background: #3d5ce0; }
.run-btn:disabled { background: #9ca3af; cursor: wait; }
.run-result { border: 1px solid #e5e7eb; border-radius: 8px; margin: 8px 0; background: #fff; }
.run-result summary { padding: 8px 12px; cursor: pointer; font-size: 13px; color: #374151; }
.run-result-body { padding: 0 12px 12px; }
.out-label { font-size: 12px; color: #6b7280; margin-top: 6px; }
.out-text { background: #f8f9fa; border-radius: 6px; padding: 8px; font-size: 12px;
  max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.file-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.file-chip { display: inline-block; padding: 4px 12px; font-size: 12px; background: #eef2ff;
  color: #3730a3; border: 1px solid #c7d2fe; border-radius: 14px; cursor: pointer; }
.file-chip:hover { background: #e0e7ff; }

/* feat9：预览弹层 */
#preview-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90;
  display: flex; flex-direction: column; align-items: center; padding: 30px; }
#preview-bar { width: 100%; max-width: 1100px; display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 8px; }
/* feat9-flow：来源提示（span 在按钮前 append + margin-right:auto → 占据左侧） */
#preview-src { margin-right: auto; color: #6b7280; font-size: 12px; align-self: center;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#preview-bar button { padding: 6px 16px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 13px; background: #fff; color: #374151; }
#preview-bar button:hover { background: #e5e7eb; }
#preview-frame { width: 100%; max-width: 1100px; flex: 1; background: #fff;
  border: none; border-radius: 10px; }