/* ==================================================================
   智营通智能体（#/agent）专用样式 · public/css/agent.css
   ------------------------------------------------------------------
   为什么单独一个文件：`app.css` 是全站设计系统（**唯一一份样式真相**），
   本页只加"智能体"这一件事需要的东西，所以：
     · 复用的（**一个字都不改**，直接沿用 app.css 的类名）：
       `.chat / .chat-body / .chat-msg / .chat-bubble / .chat-refs / .chat-ref / .chat-input`；
     · 本页自己的：统一 `ag-` 前缀，全部走 `:root` 的令牌（颜色 / 字号 / 间距 / 圆角），
       不写死颜色值，也不覆盖 app.css 的任何选择器。
   手机适配：≤1000px 折成单列（会话列表在上、对话在下），
   且任何地方都不出现横向滚动（长参数/长 JSON 在卡内自己滚动）。
   ================================================================== */

/* ---------------- 页面骨架 ---------------- */
.ag-page { min-width: 0; }

.ag-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  min-width: 0;
}
.ag-side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.ag-main { min-width: 0; }

/* ---------------- 引擎横幅（**必须有存在感**：不许让人以为一定在跟大模型说话） ---------------- */
.ag-engine {
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--info);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.ag-engine.tone-warning { border-left-color: var(--warning); background: var(--warning-soft); }
.ag-engine.tone-info { border-left-color: var(--info); background: var(--info-soft); }
.ag-engine.tone-purple { border-left-color: var(--purple); background: var(--purple-soft); }
.ag-engine.tone-success { border-left-color: var(--success); background: var(--success-soft); }
.ag-engine.tone-loading { border-left-color: var(--border-strong); }

.ag-engine-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ag-engine-text { font-size: var(--fs-md); font-weight: 650; color: var(--text); min-width: 0; }
.ag-engine-badge { margin-left: auto; }
.ag-engine-note { margin-top: var(--sp-2); line-height: 1.6; }
.ag-engine-tools { margin-top: var(--sp-3); }

.ag-tool-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ag-tool-chip {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-pill);
  padding: 1px 9px; font-size: var(--fs-xs); color: var(--text-sub); background: #fff;
}

/* ---------------- 会话列表 ---------------- */
.ag-sessions { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 420px; overflow-y: auto; }
.ag-session {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.ag-session:hover { border-color: var(--brand-300); background: var(--primary-soft); }
.ag-session.active { border-color: var(--primary); background: var(--primary-soft); }
.ag-session-main { flex: 1; min-width: 0; }
.ag-session-title {
  font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-session-del { flex: none; opacity: .55; }
.ag-session-del:hover { opacity: 1; color: var(--danger); }

/* ---------------- 对话区 ---------------- */
.ag-chat { min-width: 0; }
.ag-chat-body { gap: var(--sp-4); }
.ag-msg { min-width: 0; }
.ag-msg .chat-bubble { max-width: 88%; min-width: 0; overflow-wrap: anywhere; }
.ag-msg-meta { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--border); }
.ag-thinking { display: flex; align-items: center; gap: var(--sp-3); }
.ag-autoask { padding: var(--sp-2) 0; }
.ag-msg-toolwrap { width: 100%; }

/* 输入区 */
.ag-input-bar { position: relative; }
.ag-input-row { display: flex; gap: var(--sp-3); align-items: flex-end; }
.ag-input { flex: 1; min-height: 44px; max-height: 140px; resize: vertical; }
.ag-mic {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border-strong); background: var(--bg-soft); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ag-mic:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ag-mic:disabled { opacity: .5; cursor: not-allowed; }
.ag-mic-note { margin-top: var(--sp-2); line-height: 1.6; }

/* ---------------- 工具调用卡片（可折叠） ---------------- */
.ag-tools { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.ag-tool {
  border: 1px solid var(--border); border-left: 3px solid var(--success);
  border-radius: var(--radius-xs); background: var(--bg-soft); overflow: hidden;
}
.ag-tool.err { border-left-color: var(--danger); background: var(--danger-soft); }
.ag-tool-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px 10px; font-size: var(--fs-xs); color: var(--text-sub);
  cursor: pointer; list-style: none; min-width: 0;
}
.ag-tool-head::-webkit-details-marker { display: none; }
.ag-tool-head > span:first-of-type { min-width: 0; overflow-wrap: anywhere; }
.ag-tool.err .ag-tool-head { color: var(--danger-ink); font-weight: 600; }
.ag-tool-ms { margin-left: auto; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.ag-tool-body { padding: 0 10px 10px; }
.ag-tool-kv { margin-top: var(--sp-2); }
.ag-tool-k { display: block; font-size: var(--fs-2xs); color: var(--text-mute); margin-bottom: 2px; }
.ag-tool-pre {
  margin: 0; padding: 8px 10px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* 引用角标 */
.ag-refs { margin-top: var(--sp-3); }

/* ---------------- 窄屏：单列 + 不横向滚动 ---------------- */
@media (max-width: 1000px) {
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
  .ag-side { order: 2; }
  .ag-main { order: 1; }
  .ag-sessions { max-height: 260px; }
  .ag-msg .chat-bubble { max-width: 94%; }
  .ag-engine { padding: var(--sp-3) var(--sp-4); }
  .ag-engine-badge { margin-left: 0; }
  .ag-chat { height: auto !important; min-height: 0 !important; }
  .ag-chat-body { max-height: 60vh; }
}