/* ============================================================
   AI 测试助手 — 对话界面
   配色沿用 AP ALIGNED 主题变量（--ap-navy / --ap-blue / --ap-orange）
   ============================================================ */

/* ── 外壳：左会话栏 + 右对话区 ── */
.ai-shell{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:20px;
  align-items:stretch;
  min-height:640px;
}

/* ── 左侧会话栏 ── */
.ai-side{
  background:#fff;
  border:1px solid var(--ap-line,#e6e6e6);
  border-radius:var(--r-lg,6px);
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.ai-new{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;
  background:var(--ap-navy,#003255);
  color:#fff;border:none;border-radius:var(--r,4px);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:background .18s;
}
.ai-new:hover{background:var(--ap-blue,#006bb7)}
.ai-new svg{width:16px;height:16px;flex-shrink:0}

.ai-side-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--ap-gray2,#939598);text-transform:uppercase;
  padding:2px 4px;
}
.ai-sessions{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  min-height:0;margin:0 -4px;padding:0 4px;
}
.ai-session{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r,4px);
  font-size:13.5px;color:var(--ap-ink,#1a1a1a);
  cursor:pointer;transition:background .15s;
  border:1px solid transparent;
}
.ai-session:hover{background:var(--ap-bg,#F7F8F9)}
.ai-session.active{
  background:var(--ap-blue-lt,#E6F1F9);
  border-color:#cfe3f2;
  color:var(--ap-navy,#003255);font-weight:600;
}
.ai-session .ic{width:15px;height:15px;flex-shrink:0;opacity:.55}
.ai-session .tx{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}

.ai-side-foot{
  border-top:1px solid var(--ap-line2,#f0f1f2);
  padding-top:12px;display:flex;flex-direction:column;gap:7px;
}
.ai-toolbox-btn{
  display:flex;align-items:center;gap:9px;
  padding:10px;border-radius:var(--r,4px);
  background:var(--ap-bg,#F7F8F9);
  border:1px solid var(--ap-line,#e6e6e6);
  color:var(--ap-ink,#1a1a1a);
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:border-color .18s,color .18s;
  width:100%;text-align:left;
}
.ai-toolbox-btn:hover{border-color:var(--ap-blue,#006bb7);color:var(--ap-blue,#006bb7)}
.ai-toolbox-btn svg{width:16px;height:16px;flex-shrink:0}
.ai-note{font-size:11.5px;line-height:1.6;color:var(--ap-gray2,#939598);padding:0 2px}

/* ── 右侧对话区 ── */
.ai-main{
  background:#fff;
  border:1px solid var(--ap-line,#e6e6e6);
  border-radius:var(--r-lg,6px);
  display:flex;flex-direction:column;
  min-width:0;overflow:hidden;
}
.ai-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;
  border-bottom:1px solid var(--ap-line,#e6e6e6);
  background:var(--ap-white,#fffcfc);
}
.ai-topbar-l{display:flex;align-items:center;gap:10px;min-width:0}
.ai-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--ap-orange,#f15a22);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(241,90,34,.15);
}
.ai-topbar-title{font-size:15px;font-weight:700;color:var(--ap-ink,#1a1a1a)}
.ai-topbar-sub{font-size:12px;color:var(--ap-gray2,#939598)}
.ai-model{
  padding:7px 10px;font-size:12.5px;font-family:inherit;
  border:1px solid var(--ap-line,#e6e6e6);border-radius:var(--r,4px);
  background:#fff;color:var(--ap-ink,#1a1a1a);cursor:pointer;max-width:150px;
}

/* ── 消息流 ── */
.ai-stream{
  flex:1;overflow-y:auto;padding:22px 20px;
  display:flex;flex-direction:column;gap:20px;
  background:var(--ap-bg,#F7F8F9);
  min-height:280px;
}
.ai-msg{display:flex;gap:12px;max-width:100%}
.ai-msg.user{flex-direction:row-reverse}
.ai-avatar{
  width:30px;height:30px;border-radius:var(--r,4px);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;
}
.ai-msg.assistant .ai-avatar{background:var(--ap-navy,#003255)}
.ai-msg.user .ai-avatar{background:var(--ap-orange,#f15a22)}
.ai-avatar svg{width:16px;height:16px}

.ai-body{min-width:0;max-width:min(760px,84%)}
.ai-msg.user .ai-body{display:flex;flex-direction:column;align-items:flex-end}
.ai-bubble{
  padding:12px 15px;border-radius:var(--r-lg,6px);
  font-size:14px;line-height:1.78;word-break:break-word;
}
.ai-msg.assistant .ai-bubble{
  background:#fff;color:var(--ap-ink,#1a1a1a);
  border:1px solid var(--ap-line,#e6e6e6);
}
.ai-msg.user .ai-bubble{background:var(--ap-navy,#003255);color:#fff}
.ai-bubble p{margin:0 0 9px}
.ai-bubble p:last-child{margin-bottom:0}
.ai-bubble ul{margin:6px 0 6px 2px;padding-left:18px}
.ai-bubble li{margin:3px 0}
.ai-bubble code{
  background:rgba(0,50,85,.07);padding:1px 5px;border-radius:3px;
  font-family:var(--font-mono,Consolas,monospace);font-size:12.5px;
}
.ai-meta{
  font-size:11.5px;color:var(--ap-gray2,#939598);
  margin-top:6px;display:flex;gap:10px;align-items:center;
}
.ai-msg.user .ai-meta{flex-direction:row-reverse}
.ai-copy{
  background:none;border:none;cursor:pointer;
  font-size:11.5px;color:var(--ap-gray2,#939598);font-family:inherit;padding:0;
}
.ai-copy:hover{color:var(--ap-blue,#006bb7)}

/* 打字指示器 */
.ai-typing{display:inline-flex;gap:4px;align-items:center;padding:3px 0}
.ai-typing i{
  width:6px;height:6px;border-radius:50%;
  background:var(--ap-gray2,#939598);
  animation:aiBlink 1.25s infinite ease-in-out;
}
.ai-typing i:nth-child(2){animation-delay:.18s}
.ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes aiBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ── 输入区 ── */
.ai-composer{
  border-top:1px solid var(--ap-line,#e6e6e6);
  padding:14px 18px 16px;background:#fff;
}
.ai-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.ai-chip{
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--ap-line,#e6e6e6);background:#fff;
  font-size:12.5px;color:var(--ap-gray,#6d6f72);cursor:pointer;
  font-family:inherit;transition:all .16s;white-space:nowrap;
}
.ai-chip:hover{
  border-color:var(--ap-blue,#006bb7);color:var(--ap-blue,#006bb7);
  background:var(--ap-blue-lt,#E6F1F9);
}
.ai-input-row{
  display:flex;align-items:flex-end;gap:10px;
  border:1px solid var(--ap-line,#e6e6e6);border-radius:var(--r-lg,6px);
  padding:9px 10px 9px 14px;background:#fff;transition:border-color .18s;
}
.ai-input-row:focus-within{border-color:var(--ap-blue,#006bb7)}
.ai-input{
  flex:1;border:none;outline:none;resize:none;
  font-family:inherit;font-size:14px;line-height:1.65;
  max-height:150px;min-height:24px;padding:3px 0;color:var(--ap-ink,#1a1a1a);
  background:transparent;
}
.ai-input::placeholder{color:var(--ap-gray2,#939598)}
.ai-icon-btn{
  width:34px;height:34px;flex-shrink:0;
  border:none;background:none;cursor:pointer;border-radius:var(--r,4px);
  color:var(--ap-gray2,#939598);display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.ai-icon-btn:hover{background:var(--ap-bg,#F7F8F9);color:var(--ap-blue,#006bb7)}
.ai-icon-btn svg{width:17px;height:17px}
.ai-send{
  width:36px;height:36px;flex-shrink:0;
  border:none;border-radius:var(--r,4px);cursor:pointer;
  background:var(--ap-navy,#003255);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,opacity .18s;
}
.ai-send:hover{background:var(--ap-blue,#006bb7)}
.ai-send[disabled]{opacity:.35;cursor:not-allowed}
.ai-send svg{width:17px;height:17px}
.ai-hint{font-size:11.5px;color:var(--ap-gray2,#939598);margin-top:8px;text-align:center}

/* ── 旧工具箱视图 ── */
.ai-shell[hidden],.tool-page[hidden],.ai-backbar[hidden]{display:none}

/* 遮罩：桌面隐藏，不占 grid 位 */
.ai-side-mask{display:none}
.ai-backbar{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;margin-bottom:14px;
  background:var(--ap-blue-lt,#E6F1F9);
  border:1px solid #cfe3f2;border-radius:var(--r,4px);
}
.ai-backbar a{
  font-size:13.5px;font-weight:600;color:var(--ap-blue,#006bb7);cursor:pointer;
}
.ai-backbar span{font-size:12.5px;color:var(--ap-gray,#6d6f72)}

/* 移动端抽屉开关（桌面隐藏） */
.ai-side-toggle{display:none}

/* ── 响应式 ── */
@media (max-width:1100px){
  .ai-shell{grid-template-columns:220px minmax(0,1fr);gap:16px}
}
@media (max-width:860px){
  .ai-shell{grid-template-columns:minmax(0,1fr);min-height:0}
  .ai-side{
    position:fixed;inset:0 auto 0 0;width:270px;max-width:82vw;z-index:200;
    border-radius:0;transform:translateX(-102%);
    transition:transform .24s ease;box-shadow:2px 0 18px rgba(0,0,0,.14);
  }
  .ai-side.open{transform:translateX(0)}
  .ai-side-mask.show{display:block}
  .ai-side-toggle{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;flex-shrink:0;
    border:1px solid var(--ap-line,#e6e6e6);border-radius:var(--r,4px);
    background:#fff;color:var(--ap-ink,#1a1a1a);cursor:pointer;
  }
  .ai-side-toggle svg{width:17px;height:17px}
  .ai-stream{min-height:0;padding:16px 14px;gap:16px}
  .ai-body{max-width:100%}
  .ai-topbar{padding:11px 13px}
  .ai-topbar-sub{display:none}
  .ai-composer{padding:11px 13px 13px}
  .ai-shell{min-height:calc(100vh - 300px)}
}
@media (max-width:480px){
  .ai-model{max-width:104px;font-size:12px}
  .ai-topbar-title{font-size:14px}
  .ai-chips{gap:6px}
  .ai-chip{font-size:12px;padding:5px 10px}
  .ai-bubble{font-size:13.5px;padding:11px 13px}
}

/* ============================================================
   后端显式报错（2026-10-14 起不再回落到演示答案）
   见 docs/智能助手-接口文档.md §6
   ============================================================ */
.ai-err{color:#c0392b;font-weight:500}
.ai-err a{color:var(--ap-blue,#006bb7);text-decoration:underline}