/* ═══════════════════════════════════════════
 *  聊天面板：消息气泡、Markdown 渲染、工具栏、输入区
 * ═══════════════════════════════════════════ */

#chat-panel { display:flex; flex-direction:column; height:100%; }

/* 气泡容器：包含气泡本体 + hover 工具栏 */
.msg-wrap { max-width:78%; min-width:0; display:flex; flex-direction:column; gap:4px; }
.message-row.user .msg-wrap { align-items:flex-end; }

.msg-bubble { padding:12px 16px; border-radius:var(--radius); font-size:14px; line-height:1.75;
              word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; }
.message-row.user .msg-bubble { background:var(--accent2); color:#fff; border-radius:var(--radius) 4px var(--radius) var(--radius) }
.message-row.ai  .msg-bubble { background:var(--bg3); border:1px solid var(--border); border-radius:4px var(--radius) var(--radius) var(--radius) }

/* ━━━ 完整 Markdown 内容样式 ━━━ */
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3, .msg-bubble h4, .msg-bubble h5, .msg-bubble h6 {
  margin:14px 0 8px; line-height:1.3; font-weight:600;
}
.msg-bubble h1 { font-size:1.35em; padding-bottom:6px; border-bottom:1px solid var(--border); }
.msg-bubble h2 { font-size:1.22em; padding-bottom:4px; border-bottom:1px solid var(--border); }
.msg-bubble h3 { font-size:1.12em; }
.msg-bubble h4 { font-size:1.05em; }
.msg-bubble h5, .msg-bubble h6 { font-size:1em; color:var(--text-muted); }

.msg-bubble p  { margin:6px 0; }
.msg-bubble p:first-child { margin-top:0; }
.msg-bubble p:last-child  { margin-bottom:0; }

.msg-bubble ul, .msg-bubble ol { margin:6px 0; padding-left:24px; }
.msg-bubble li { margin:3px 0; }
.msg-bubble li > p { margin:2px 0; }
.msg-bubble li::marker { color:var(--accent); }

.msg-bubble blockquote {
  margin:8px 0; padding:6px 14px; border-left:3px solid var(--quote-bar);
  background:rgba(129,140,248,0.08); color:var(--text-muted); border-radius:0 6px 6px 0;
}
.msg-bubble blockquote p { margin:2px 0; }

.msg-bubble hr { border:none; border-top:1px solid var(--border); margin:12px 0; }
.msg-bubble strong { font-weight:600; }
.msg-bubble em { font-style:italic; }
.msg-bubble del { text-decoration:line-through; opacity:0.7; }

/* 表格 */
.msg-bubble table {
  border-collapse:collapse; margin:10px 0; font-size:13px; width:100%;
  border:1px solid var(--border); border-radius:6px; overflow:hidden;
}
.msg-bubble th, .msg-bubble td {
  padding:8px 12px; text-align:left; border:1px solid var(--border);
}
.msg-bubble thead { background:var(--bg2); }
.msg-bubble th { font-weight:600; }
.msg-bubble tbody tr:nth-child(even) { background:var(--table-stripe); }

/* 链接 */
.msg-bubble a {
  color:var(--link); text-decoration:none; border-bottom:1px solid rgba(129,140,248,0.3);
  transition:color var(--trans), border-color var(--trans);
}
.msg-bubble a:hover { color:var(--link-hover); border-bottom-color:var(--link-hover); }
.message-row.user .msg-bubble a { color:#fff; border-bottom-color:rgba(255,255,255,0.5); }
.message-row.user .msg-bubble a:hover { border-bottom-color:#fff; }

/* 链接 favicon */
.msg-bubble a .link-icon {
  display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-right:4px;
  border-radius:2px;
}

/* 行内代码 */
.msg-bubble code {
  background:var(--code-inline-bg); padding:1px 6px; border-radius:4px;
  font-family:var(--mono); font-size:0.92em; color:var(--code-inline-fg);
  border:1px solid rgba(110,231,183,0.15);
}

/* 代码块 */
.msg-bubble pre {
  background:var(--code-bg); border:1px solid var(--border); border-radius:8px;
  margin:10px 0; overflow:hidden; position:relative;
}
.msg-bubble pre code {
  display:block; background:none; padding:36px 14px 14px; border:none; color:inherit;
  font-family:var(--mono); font-size:13px; line-height:1.6;
  overflow-x:auto; white-space:pre;
}
/* 代码块顶部工具条 */
.code-block-header {
  position:absolute; top:0; left:0; right:0; height:30px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px 0 12px; background:rgba(0,0,0,0.3);
  border-bottom:1px solid var(--border); font-size:11px;
  font-family:var(--mono); color:var(--text-muted);
}
[data-theme="light"] .code-block-header { background:rgba(0,0,0,0.04); }
.code-block-lang { text-transform:uppercase; letter-spacing:0.5px; }
.code-block-actions { display:flex; gap:6px; }
.code-block-btn {
  background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text-soft);
  font-size:11.5px; padding:2px 10px; border-radius:5px; cursor:pointer;
  transition:all var(--trans); user-select:none; font-weight:500;
}
[data-theme="light"] .code-block-btn { background:rgba(0,0,0,0.03); }
.code-block-btn:hover { color:var(--accent); border-color:var(--accent); background:rgba(110,231,183,0.08); }
.code-block-btn.copied { color:var(--accent); border-color:var(--accent); }

/* 长代码块折叠（>30行）*/
.msg-bubble pre.collapsed code { max-height:200px; }
.msg-bubble pre.collapsed::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:50px;
  background:linear-gradient(to bottom, transparent, var(--code-bg)); pointer-events:none;
}

/* 图片 */
.msg-bubble img {
  max-width:100%; height:auto; border-radius:6px; margin:6px 0; cursor:zoom-in;
  transition:transform var(--trans);
}
.msg-bubble img:hover { transform:scale(1.01); }

/* 单次任务标签（保留原样式微调） */
.msg-quick-tag { display:inline-block; padding:1px 8px; margin-bottom:6px;
                 font-size:10.5px; border-radius:10px; font-weight:500;
                 background:rgba(0,0,0,0.2); color:rgba(255,255,255,0.85); letter-spacing:0.3px; }

/* 打字机模式：流式期间用纯文本逐字追加，保留换行/空格 */
.msg-body.typewriter {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--sans);
  line-height: 1.75;
}

/* 打字机光标（更精致：渐变栏 + 平滑闪烁）*/
.typing-cursor::after {
  content:''; display:inline-block; width:8px; height:1.1em;
  vertical-align:-2px; margin-left:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  animation:caret 1.05s ease-in-out infinite;
}
@keyframes caret {
  0%, 100% { opacity:0.2; transform:scaleY(0.7); }
  50%      { opacity:1;   transform:scaleY(1); }
}

/* ━━━ 消息悬停工具栏 ━━━ */
.msg-tools {
  display:flex; gap:4px; opacity:0; visibility:hidden;
  transition:opacity 0.15s, visibility 0.15s;
  padding:2px;
}
.message-row:hover .msg-tools,
.msg-tools.show { opacity:1; visibility:visible; }
/* 移动端：始终可见（hover 不靠谱）*/
@media (hover: none) {
  .msg-tools { opacity:1; visibility:visible; }
}
.msg-tool-btn {
  background:var(--bg3); border:1px solid var(--border); padding:4px 10px;
  border-radius:6px; color:var(--text-soft); cursor:pointer;
  font-size:12px; font-weight:500; transition:all var(--trans); user-select:none;
  display:inline-flex; align-items:center; gap:4px;
}
.msg-tool-btn:hover { color:var(--accent); border-color:var(--accent); background:rgba(110,231,183,0.06); }
.msg-tool-btn.copied { color:var(--accent); border-color:var(--accent); }
.msg-tool-btn.danger:hover { color:var(--danger); border-color:var(--danger); background:rgba(248,113,113,0.06); }

/* AI 消息底部的元数据条（用时） */
.msg-meta {
  font-size:11.5px; color:var(--text-soft); padding:2px 6px;
  display:flex; gap:8px; align-items:center;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:6px; width:fit-content; font-weight:500;
}

/* ━━━ 滚动到底部按钮（悬浮）━━━ */
.scroll-to-bottom {
  position:absolute; right:24px; bottom:18px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--border);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text); font-size:14px;
  box-shadow:var(--shadow); transition:all var(--trans);
}
.scroll-to-bottom:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.scroll-to-bottom.show { display:flex; animation:fadeUp 0.18s ease; }
.scroll-to-bottom .badge {
  position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--accent); color:#111;
  font-size:10px; line-height:16px; font-weight:600; display:none;
}
.scroll-to-bottom.has-new .badge { display:block; }

.input-area { padding:14px 20px; border-top:1px solid var(--border); flex-shrink:0; position:relative }

/* ━━━ 输入区相关 ━━━ */
.model-picker { position:relative; display:inline-block }
.model-picker-btn { background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:4px 10px; color:var(--text); font-size:12px; font-family:var(--mono); cursor:pointer; outline:none; display:inline-flex; align-items:center; gap:6px; transition:all var(--trans); user-select:none }
.model-picker-btn:hover { border-color:var(--accent) }
.arrow { font-size:9px; color:var(--text-muted); transition:transform .18s }
.model-picker.open .arrow { transform:rotate(180deg) }
.model-picker-popover { position:absolute; bottom:calc(100% + 6px); left:0; min-width:300px; max-width:380px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:300; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .15s,transform .15s; max-height:360px; overflow-y:auto; scrollbar-width:thin }
.model-picker.open .model-picker-popover { opacity:1; pointer-events:auto; transform:translateY(0) }
.model-option { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:7px; cursor:pointer; transition:background var(--trans) }
.model-option:hover { background:rgba(255,255,255,0.04) }
.model-option.selected { background:rgba(110,231,183,0.08) }
.model-option-check { width:16px; flex-shrink:0; margin-top:1px; color:var(--accent); font-size:13px; visibility:hidden }
.model-option.selected .model-option-check { visibility:visible }
.model-option-body { min-width:0; flex:1 }
.model-option-name { font-size:13px; font-weight:500; color:var(--text); font-family:var(--mono); margin-bottom:2px }
.model-option-desc { font-size:11.5px; color:var(--text-muted); line-height:1.5 }
.model-option-desc:empty { display:none }

.input-row { display:flex; gap:10px; align-items:flex-end }
#chat-input { flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; color:var(--text); font-family:var(--sans); font-size:14px; resize:none; min-height:44px; max-height:200px; line-height:1.6; transition:border-color var(--trans); outline:none; overflow-y:auto }
#chat-input:focus { border-color:var(--accent); }
#chat-input::placeholder { color:var(--text-muted) }
.send-btn { width:44px; height:44px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:#111; transition:all var(--trans); flex-shrink:0 }
.send-btn:hover:not(:disabled) { transform:scale(1.06); box-shadow:0 4px 16px rgba(110,231,183,.3) }
.send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none }
/* 流式中：变成红色「停止」按钮 */
.send-btn.streaming { background:var(--danger); animation:pulse 1.4s ease-in-out infinite; color:#fff; }
.send-btn.streaming:hover:not(:disabled) { box-shadow:0 4px 16px rgba(248,113,113,.4); }
@keyframes pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(248,113,113,0.4); }
  50%      { box-shadow:0 0 0 8px rgba(248,113,113,0); }
}

/* 输入框底部信息栏：左边字数，右边快捷键提示 */
.input-footer { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.input-counter { font-size:11px; color:var(--text-muted); font-family:var(--mono); }
.input-counter.warn { color:#fbbf24; }
.input-counter.danger { color:var(--danger); }
.input-hint { font-size:11px; color:var(--text-muted); }