/* ===== chat 对话调试页 ===== */
.chat-page { display:flex; flex-direction:column; height:100%; min-height:0; gap:12px; }
.chat-main { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; }
.chat-col { display:flex; flex-direction:column; min-height:0; min-width:0; gap:12px; }

/* ---- 消息流 ---- */
.chat-msgs { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:18px; padding:8px 4px; }
.chat-empty { margin:auto; text-align:center; color:var(--fg-3); display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px 16px; }
.chat-empty i { width:36px; height:36px; }
.chat-empty i svg { width:36px; height:36px; }
.chat-empty .chat-empty-t { font-size:14px; color:var(--fg-2); }
.chat-empty .chat-empty-s { font-size:12px; }

.chat-msg { display:flex; flex-direction:column; gap:6px; }
.chat-msg.user { align-self:flex-end; align-items:flex-end; max-width:min(78%, 760px); }
.chat-msg.asst { align-self:flex-start; align-items:stretch; width:min(92%, 900px); }

.chat-bubble { padding:10px 14px; border-radius:14px 14px 4px 14px; background:color-mix(in srgb, var(--acc) 13%, var(--bg-2)); border:1px solid color-mix(in srgb, var(--acc) 32%, var(--line)); white-space:pre-wrap; word-break:break-word; line-height:1.65; font-size:14px; }
.chat-uimgs { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.chat-uimgs img { width:92px; height:92px; object-fit:cover; border-radius:10px; border:1px solid var(--line); display:block; }

.chat-mhead { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-3); padding:0 2px; }

/* ---- 思考块 ---- */
.chat-think { border-left:2px solid var(--fg-3); margin:2px 0 4px; }
.chat-think-h { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; color:var(--fg-3); font-size:12px; padding:3px 10px; }
.chat-think-h:hover { color:var(--fg-2); }
.chat-think-h i { width:14px; height:14px; display:inline-flex; transition:transform .15s ease; }
.chat-think-h i svg { width:14px; height:14px; }
.chat-think.closed .chat-think-h i { transform:rotate(-90deg); }
.chat-think-body { max-height:220px; overflow-y:auto; padding:4px 12px 8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.6; color:var(--fg-3); white-space:pre-wrap; word-break:break-word; }
.chat-think.closed .chat-think-body { display:none; }

/* ---- 正文 / Markdown ---- */
.chat-md { background:var(--bg-1); border:1px solid var(--line); border-radius:4px 14px 14px 14px; padding:12px 16px; font-size:14px; line-height:1.7; word-break:break-word; overflow-wrap:anywhere; }
.chat-md.live::after { content:''; display:inline-block; width:8px; height:1.05em; margin-left:2px; vertical-align:-2px; background:var(--acc); border-radius:1px; animation:chat-blink .8s steps(1) infinite; }
@keyframes chat-blink { 50% { opacity:0; } }
.chat-md > :first-child { margin-top:0; }
.chat-md > :last-child { margin-bottom:0; }
.chat-md p { margin:8px 0; }
.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4, .chat-md h5, .chat-md h6 { margin:14px 0 8px; line-height:1.4; }
.chat-md h1 { font-size:19px; } .chat-md h2 { font-size:17px; } .chat-md h3 { font-size:15.5px; }
.chat-md h4, .chat-md h5, .chat-md h6 { font-size:14px; }
.chat-md ul, .chat-md ol { margin:8px 0; padding-left:22px; }
.chat-md li { margin:3px 0; }
.chat-md code { background:var(--bg-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.chat-md pre code { background:none; border:none; padding:0; font-size:13px; }
.chat-md a { color:var(--acc); text-decoration:none; border-bottom:1px dotted var(--acc); }
.chat-md blockquote { margin:8px 0; padding:4px 14px; border-left:3px solid var(--acc); color:var(--fg-2); background:color-mix(in srgb, var(--acc) 6%, transparent); border-radius:0 8px 8px 0; }
.chat-md hr { border:none; border-top:1px solid var(--line); margin:12px 0; }
.chat-tblwrap { overflow-x:auto; margin:10px 0; }
.chat-md-tbl { border-collapse:collapse; font-size:13px; min-width:40%; }
.chat-md-tbl th, .chat-md-tbl td { border:1px solid var(--line); padding:6px 10px; text-align:left; }
.chat-md-tbl th { background:var(--bg-2); font-weight:600; }

.chat-code { margin:10px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); }
.chat-code-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 10px; background:var(--bg-2); font-size:12px; color:var(--fg-3); }
.chat-code-copy { background:none; border:none; color:var(--fg-3); cursor:pointer; font-size:12px; padding:3px 8px; border-radius:6px; }
.chat-code-copy:hover { color:var(--acc); background:var(--bg-1); }
.chat-code pre { margin:0; padding:12px 14px; overflow-x:auto; font-size:13px; line-height:1.55; }

.chat-tools { font-size:12px; color:var(--fg-3); padding:2px 4px; }

/* ---- 元信息 / 操作 / 错误 ---- */
.chat-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--fg-3); padding:0 2px; }
.chat-meta b { color:var(--fg-2); font-weight:500; }
.chat-macts { display:flex; gap:4px; opacity:0; transition:opacity .15s ease; }
.chat-msg:hover .chat-macts { opacity:1; }
.chat-macts .btn { padding:4px 8px; }
.chat-macts .btn i { width:14px; height:14px; }
.chat-macts .btn i svg { width:14px; height:14px; }
@media (pointer:coarse) { .chat-macts { opacity:1; } }

.chat-err { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:2px; padding:8px 12px; border:1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); background:color-mix(in srgb, var(--bad) 9%, var(--bg-1)); border-radius:10px; color:var(--bad); font-size:13px; line-height:1.5; }
.chat-err.chat-stop-note { border-color:var(--line); background:var(--bg-1); color:var(--fg-2); }

/* ---- 发送区 ---- */
.chat-composer { border:1px solid var(--line); background:var(--bg-1); border-radius:16px; padding:10px 12px 8px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, box-shadow .15s; }
.chat-composer.drag { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset; }
.chat-ta { width:100%; box-sizing:border-box; background:transparent; border:none; outline:none; resize:none; color:var(--fg); font-family:inherit; font-size:14px; line-height:1.55; min-height:26px; max-height:220px; }
.chat-ta::placeholder { color:var(--fg-3); }
.chat-bar { display:flex; align-items:center; gap:8px; }
.chat-grow { flex:1; }
.chat-hint { font-size:12px; color:var(--fg-3); }
.chat-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.chat-thumbs:empty { display:none; }
.chat-thumb { position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.chat-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.chat-thumb-x { position:absolute; top:3px; right:3px; width:20px; height:20px; border:none; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; padding:0; }
.chat-thumb-x:hover { background:var(--bad); }

/* ---- 参数面板 ---- */
.chat-side { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.chat-card { padding:14px; }
.chat-card .card-h { margin-bottom:12px; }
.chat-card .field { margin-bottom:12px; font-size:13px; }
.chat-card .field:last-child { margin-bottom:0; }
.chat-note { font-size:12px; color:var(--fg-3); margin:-6px 0 12px; line-height:1.5; }
.chat-range { display:flex; align-items:center; gap:10px; }
.chat-range input[type=range] { flex:1; accent-color:var(--acc); }
.chat-range output { min-width:32px; text-align:right; font-size:13px; color:var(--fg-2); font-variant-numeric:tabular-nums; }
.chat-switch { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--fg-2); cursor:pointer; }
.chat-switch input { width:18px; height:18px; accent-color:var(--acc); cursor:pointer; }

/* ---- 响应式 ---- */
.chat-panel-btn { display:none; }
@media (max-width: 960px) {
  .chat-main { grid-template-columns:minmax(0,1fr); }
  .chat-side { display:none; order:-1; max-height:52vh; }
  .chat-side.open { display:flex; }
  .chat-panel-btn { display:inline-flex; }
  .chat-msg.user { max-width:94%; }
  .chat-msg.asst { width:100%; }
  .chat-ta { font-size:16px; }
  .chat-bar .btn { min-height:44px; }
  .chat-hint { display:none; }
}