/* 对话模块（RENDER['chat']）样式 —— 从 chat.html 提取，全变量化，统一主题。
   演示脚本页：真实 AI 对话（SSE + 能力调用）在 P4 实装。 */

/* 模块页头内状态条 */
.tb-status {
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fg2);
  padding:5px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg);
  transition:border-color .3s;
}
.tb-status .dot { width:7px; height:7px; border-radius:50%; background:var(--acc); transition:background .3s; }
.tb-status.thinking { border-color:rgba(199,122,10,.24); }
.tb-status.thinking .dot { background:var(--amber); animation:pulse-dot 1s infinite; }
@keyframes pulse-dot { 50% { opacity:.35; } }

/* 执行中下拉 */
.exec-wrap { position:relative; }
.exec-btn {
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fg2);
  padding:6px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  transition:all .2s;
}
.exec-btn:hover { border-color:var(--line2); color:var(--fg); }
.exec-btn .n { background:var(--accd); color:var(--green2); font-size:10.5px; border-radius:var(--r); padding:0 6px; font-weight:bold; }
.exec-panel {
  position:absolute; top:calc(100% + 8px); right:0; width:300px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(228,226,218,.9); border-radius:var(--r);
  box-shadow:0 20px 48px rgba(30,32,26,.16); padding:10px; display:none; z-index:30;
}
.exec-panel.show { display:block; animation:pop .22s var(--spring) both; }
.exec-panel .ep-hd { font-size:10.5px; color:var(--fg3); letter-spacing:1px; padding:2px 4px 8px; }
.exec-card { border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:all .2s var(--spring); background:var(--bg); }
.exec-card:hover { transform:translateY(-1px); border-color:var(--line2); background:var(--card); }
.exec-card:last-child { margin-bottom:0; }
.exec-card.done { opacity:.55; }
.exec-top { display:flex; align-items:center; gap:7px; font-size:12.5px; }
.exec-top .live { width:6px; height:6px; border-radius:50%; background:var(--acc); animation:pulse-dot 1.6s infinite; }
.exec-top .live.amber { background:var(--amber); }
.exec-card.done .live { background:var(--fg3); animation:none; }
.exec-obj { color:var(--fg3); font-size:11px; margin-left:auto; }
.exec-prog { height:3px; border-radius:var(--r); background:var(--bg-alt); margin-top:8px; overflow:hidden; }
.exec-prog i { display:block; height:100%; background:var(--acc); transition:width 1s var(--ease); position:relative; }
.exec-prog i::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:shimmer 1.8s infinite; transform:translateX(-100%); }
@keyframes shimmer { to { transform:translateX(100%); } }
.exec-step { font-size:10.5px; color:var(--fg3); margin-top:6px; display:flex; justify-content:space-between; }

/* ============ 对话流 ============ */
.chat-mod { flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-scroll { flex:1; overflow-y:auto; scroll-behavior:smooth; }
.chat-inner { max-width:720px; margin:0 auto; padding:24px 24px 12px; display:flex; flex-direction:column; gap:16px; }
.msg { animation:rise .4s var(--ease) both; }

.m-user { align-self:flex-end; max-width:80%; }
.m-user .bub { background:rgba(0,0,0,.05); color:var(--fg); padding:10px 15px; border-radius:var(--r); font-size:14px; box-shadow:none; }

.m-ai { align-self:flex-start; max-width:94%; display:flex; gap:10px; }
.m-ai .ava { width:26px; height:26px; border-radius:var(--r); flex-shrink:0; margin-top:2px; background:var(--card); border:1px solid var(--line); display:grid; place-items:center; color:var(--green2); }
.m-ai .ava svg { display:block; }
.m-ai .body { min-width:0; flex:1; }
.m-ai .txt { font-size:14px; line-height:1.8; white-space:pre-wrap; word-break:break-word; letter-spacing:.1px; }
.m-ai .txt b { color:var(--green2); }
.caret { display:inline-block; width:7px; height:14px; background:var(--acc); vertical-align:-2px; margin-left:2px; animation:blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

.think-row { display:flex; align-items:center; gap:9px; color:var(--fg3); font-size:12.5px; padding:2px 0; }
.think-dots { display:flex; gap:4px; }
.think-dots i { width:5px; height:5px; border-radius:50%; background:var(--acc); animation:tb 1.2s infinite; }
.think-dots i:nth-child(2) { animation-delay:.15s; } .think-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes tb { 0%,60%,100% { transform:none; opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }

/* 工具卡片 */
.tool { border:1px solid var(--line); border-radius:var(--r); background:var(--card); margin:8px 0; max-width:540px; animation:pop .3s var(--spring) both; transition:border-color .25s; }
.tool.done { border-left:2px solid var(--acc); }
.tool:hover { border-color:var(--line2); }
.tool-hd { display:flex; align-items:center; gap:9px; padding:8px 12px; cursor:pointer; font-family:var(--mono); font-size:12px; color:var(--fg2); user-select:none; }
.tool-st { width:14px; height:14px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:8px; }
.tool.running .tool-st { border:1.5px solid var(--amber); border-top-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.tool.done .tool-st { background:var(--accd); color:var(--green2); animation:check-pop .3s var(--spring); }
@keyframes check-pop { 0% { transform:scale(.4); } 70% { transform:scale(1.3); } 100% { transform:scale(1); } }
.tool.done .tool-st::before { content:'✓'; }
.tool-name { color:var(--fg); }
.tool-arg { color:var(--green2); }
.tool-chev { margin-left:auto; color:var(--fg3); font-size:9px; transition:transform .25s var(--ease); }
.tool.open .tool-chev { transform:rotate(90deg); }
.tool-bd { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.tool.open .tool-bd { max-height:220px; }
.tool-bd-in { padding:8px 14px 10px; border-top:1px solid var(--line); font-size:12px; color:var(--fg2); font-family:var(--mono); }
.tool-bd-in .r { padding:3px 0 3px 9px; border-left:2px solid var(--accd); margin:4px 0; animation:rise .3s both; }
.tool-bd-in .r b { color:var(--green2); font-weight:normal; }

/* 产物卡片 → 跳工作台 */
.art-card {
  display:flex; align-items:center; gap:12px; max-width:440px; margin-top:8px;
  padding:11px 14px; border-radius:var(--r); cursor:pointer;
  background:var(--card); border:1px solid var(--line2);
  transition:transform .22s var(--spring), box-shadow .22s, border-color .22s;
  animation:pop .35s var(--spring) both;
}
.art-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,32,26,.1); border-color:var(--acc); }
.art-ico { width:34px; height:34px; border-radius:var(--r); background:var(--accd); color:var(--green2); display:grid; place-items:center; font-size:16px; flex-shrink:0; }
.art-ico svg { width:16px; height:16px; display:block; }
.art-ico.b { background:var(--blued); color:var(--blue); }
.art-ico.a { background:var(--amberd); color:var(--amber); }
.art-name { font-size:13.5px; font-weight:bold; }
.art-desc { font-size:11.5px; color:var(--fg3); margin-top:1px; }
.art-go { margin-left:auto; color:var(--fg3); font-size:11px; flex-shrink:0; transition:transform .22s, color .22s; }
.art-card:hover .art-go { transform:translateX(3px); color:var(--green2); }

/* 待确认卡片 */
.cf-card {
  max-width:540px; margin-top:8px; border-radius:var(--r); background:var(--card);
  border:1px solid rgba(199,122,10,.24); padding:13px 15px;
  animation:pop .35s var(--spring) both, breathe 2.6s ease-in-out 1s infinite;
}
@keyframes breathe { 0%,100% { box-shadow:0 0 0 0 rgba(199,122,10,0); } 50% { box-shadow:0 0 0 4px rgba(199,122,10,.05); } }
.cf-card.resolved { animation:none; border-color:var(--line); }
.cf-tag { display:inline-block; font-size:10.5px; color:var(--amber); background:var(--amberd); border-radius:var(--r); padding:2px 8px; letter-spacing:1px; }
.cf-title { font-size:14px; font-weight:bold; margin:7px 0 3px; }
.cf-body { font-size:12.5px; color:var(--fg2); }
.cf-body b { color:var(--green2); }
.cf-actions { display:flex; gap:8px; margin-top:11px; }
.cf-btn { padding:6px 14px; border-radius:var(--r); font-size:12.5px; font-weight:bold; transition:transform .16s var(--spring), background .18s, filter .18s; }
.cf-btn:active { transform:scale(.95); }
.cf-btn.ok { background:var(--green); color:#fff; box-shadow:none; }
.cf-btn.ok:hover { filter:brightness(1.15); }
.cf-btn.ghost { border:1px solid var(--line2); color:var(--fg2); }
.cf-btn.ghost:hover { background:var(--bg-alt); color:var(--fg); }
.cf-btn.no { color:var(--fg3); }
.cf-btn.no:hover { color:var(--red); }
.cf-done { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--green2); padding:2px 0; }
.cf-done .k { animation:check-pop .3s var(--spring); display:inline-block; }

.sysline { display:flex; align-items:center; gap:10px; color:var(--fg3); font-size:11px; margin:4px 0; animation:rise .35s both; }
.sysline::before, .sysline::after { content:''; flex:1; height:1px; background:var(--line); }

/* 简报卡 */
.brief { border:1px solid var(--line); border-radius:var(--r); background:var(--card); box-shadow:var(--shadow); animation:pop .4s var(--spring) both; }
.brief-hd { padding:14px 16px 8px; display:flex; align-items:baseline; gap:10px; }
.brief-hd .t { font-size:19px; font-weight:bold; letter-spacing:.3px; }
.brief-hd .d { color:var(--fg3); font-size:11.5px; }
.brief-list { padding:0 16px 8px; }
.brief-item { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid rgba(0,0,0,.05); animation:rise .45s var(--ease) both; }
.brief-item .lv { font-size:10px; font-family:var(--mono); border-radius:var(--r); padding:2px 6px; flex-shrink:0; margin-top:2px; }
.lv.l3 { color:var(--red); background:var(--redd); }
.lv.l2 { color:var(--amber); background:var(--amberd); }
.lv.l1 { color:var(--fg3); background:var(--bg-alt); }
.brief-item .tx { font-size:13px; color:var(--fg2); }
.brief-item .tx b { color:var(--fg); }

/* chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; max-width:720px; margin:0 auto; padding:8px 24px 0; width:100%; }
.chip {
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg3);
  border:1px solid var(--line); border-radius:var(--r); padding:5px 12px; background:transparent;
  transition:all .2s var(--spring); animation:rise .45s var(--ease) both;
}
.chip:hover { color:var(--green2); border-color:var(--acc); background:var(--accd); transform:translateY(-1px); }
.chip:active { transform:scale(.97); }
.chip .ar { transition:transform .2s; }
.chip:hover .ar { transform:translateX(3px); }

/* 输入区 */
.input-zone { padding:10px 24px 16px; max-width:768px; margin:0 auto; width:100%; position:relative; }
.input-box { border:1px solid var(--line2); border-radius:var(--r); background:var(--card); padding:13px 15px 8px; transition:border-color .25s, box-shadow .25s; box-shadow:0 4px 18px rgba(30,32,26,.06); }
.input-box:focus-within { border-color:var(--acc); box-shadow:0 0 0 3px rgba(16,185,129,.08); }
.input-box textarea { width:100%; background:none; border:none; outline:none; resize:none; color:var(--fg); font-family:inherit; font-size:14px; line-height:1.55; max-height:120px; }
.input-box textarea::placeholder { color:var(--fg3); }
.input-bar { display:flex; align-items:center; gap:5px; margin-top:5px; }
.ib-btn { width:28px; height:28px; border-radius:var(--r); display:grid; place-items:center; color:var(--fg3); font-size:14px; transition:all .18s; }
.ib-btn:hover { background:var(--bg-alt); color:var(--fg); }
.ib-hint { margin-left:auto; font-size:10.5px; color:var(--fg3); }
.ib-hint b { color:var(--fg2); font-weight:normal; border:1px solid var(--line2); border-radius:var(--r); padding:0 4px; font-family:var(--mono); font-size:9.5px; }
.send-btn { width:30px; height:30px; border-radius:var(--r); display:grid; place-items:center; background:var(--green); color:#fff; font-size:13px; transition:background .18s var(--ease); box-shadow:none; }
.send-btn:hover { transform:translateY(-1px); filter:brightness(1.15); }
.send-btn:active { transform:scale(.92); }
.send-btn:disabled { opacity:.35; transform:none; filter:none; }

/* / 菜单 */
.slash-menu {
  position:absolute; left:24px; bottom:calc(100% - 2px); width:300px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(210,208,197,.9); border-radius:var(--r);
  box-shadow:0 18px 44px rgba(30,32,26,.16); overflow:hidden; z-index:20;
  transform-origin:bottom left; animation:pop .2s var(--spring) both;
}
.slash-hd { font-size:10.5px; color:var(--fg3); padding:8px 13px 4px; letter-spacing:1px; }
.slash-item { display:flex; align-items:center; gap:10px; padding:8px 13px; cursor:pointer; transition:background .15s; }
.slash-item:hover { background:var(--bg-alt); }
.slash-item .si { width:24px; height:24px; border-radius:var(--r); display:grid; place-items:center; font-size:12px; background:var(--accd); color:var(--green2); }
.slash-item .si svg { display:block; }
.slash-item .sn { font-size:13px; }
.slash-item .sd { font-size:10.5px; color:var(--fg3); margin-left:auto; font-family:var(--mono); }

/* 对话页铺满主区（go('chat') 时 #main 去 padding、纵向 flex） */
#main.chat-page { padding:0; display:flex; flex-direction:column; }
/* 对话页头细条（模板 topbar 右半区内容：mock 徽标 + 状态 + 执行面板） */
.chat-headbar {
  display:flex; align-items:center; gap:10px; padding:8px 16px; flex-shrink:0;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.headbar-tag { font-size:10px; background:var(--amberd); color:var(--amber); border-radius:var(--r); padding:2px 8px; }
.headbar-note { font-size:11.5px; color:var(--fg3); }
.chat-headbar .tb-status { margin-left:auto; }
@keyframes pop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }

/* —— AI 回复富文本渲染（P4）：markdown 安全子集 —— */
.m-ai .txt .md-p { margin: 4px 0; }
.m-ai .txt .md-list { margin: 6px 0; }
.m-ai .txt .md-li { padding-left: 16px; position: relative; line-height: 1.75; }
.m-ai .txt .md-li::before { content:'•'; position:absolute; left:2px; color:var(--fg3); }
.m-ai .txt code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: .92em; }