/* 深色简洁聊天风格：无外部资源，全部本地样式 */

:root {
  --bg: #14161a;
  --bg-panel: #1d2026;
  --bg-input: #262a32;
  --border: #333842;
  --text: #d7dae0;
  --text-dim: #8b919c;
  --accent: #4f8cff;
  --accent-hover: #3f78e6;
  --danger: #e0564f;
  --user-bubble: #2c3a55;
  --ai-bubble: #262a32;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
}

.view { height: 100%; }
/* hidden 属性优先级保障：HTML hidden 必须真正隐藏（display 覆盖修复） */
[hidden] { display: none !important; }

/* ============ 登录页 ============ */

.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-title {
  margin: 0 0 4px;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}

.field input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}

.field input:focus { border-color: var(--accent); }

.login-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  min-height: 1em;
}

/* ============ 通用按钮 ============ */

.btn {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-ghost { background: transparent; }

.btn-stop {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.btn-stop:hover { background: rgba(224, 86, 79, 0.12); }

/* ============ 聊天页布局 ============ */

.chat-view {
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.chat-title { font-weight: 600; }

.conn-status { font-size: 12px; color: var(--text-dim); flex: 1; }

.conn-connecting { color: #d9a03f; }
.conn-online { color: #58b368; }
.conn-reconnecting { color: #d9a03f; }
.conn-offline { color: var(--danger); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============ 消息气泡 ============ */

.bubble {
  max-width: min(78%, 720px);
  border-radius: var(--radius);
  padding: 10px 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.bubble-user {
  align-self: flex-end;
  background: var(--user-bubble);
}

.bubble-ai {
  align-self: flex-start;
  background: var(--ai-bubble);
  border: 1px solid var(--border);
}

.bubble-status {
  align-self: center;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  padding: 2px 8px;
}

/* P7 历史回放：超过渲染上限时的顶部省略提示条 */
.bubble-history-omitted {
  align-self: center;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  padding: 2px 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.bubble-error {
  align-self: center;
  color: var(--danger);
  font-size: 13px;
  background: rgba(224, 86, 79, 0.08);
}

/* 思维链折叠区（AI 气泡顶部） */
.thinking-fold {
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin: -2px 0 8px;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
}

.thinking-fold summary {
  cursor: pointer;
  padding: 4px 10px;
  user-select: none;
  list-style: none;
}

.thinking-fold summary::before { content: "▸ "; }
.thinking-fold[open] summary::before { content: "▾ "; }

.thinking-body {
  padding: 6px 12px 8px;
  border-top: 1px dashed var(--border);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============ 底部输入区 ============ */

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

#chat-input {
  flex: 1;
  resize: none;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  max-height: 40vh;
  outline: none;
}

#chat-input:focus { border-color: var(--accent); }
#chat-input:disabled { opacity: 0.5; }

/* ============ 接管横幅（P5） ============ */

.held-banner {
  background: #4a3b1f;
  color: #ffd166;
  border: 1px solid #b8860b;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 12px;
  font-size: 14px;
  text-align: center;
}

/* ============ 等待期动态反馈（派单） ============ */

/* ---- 第 1 档：等待态状态行（三点跳动 + 文案） ---- */

.wait-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px;
  font-size: 13px;
  color: var(--text-dim);
}

/* 三点跳动容器 */
.wait-dots {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
}

.wait-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  /* 纯 CSS 跳动动画：三个点错峰上弹 */
  animation: wait-dot-bounce 1.2s ease-in-out infinite;
}

.wait-dots i:nth-child(2) { animation-delay: 0.15s; }
.wait-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes wait-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ---- 第 2 档：工具活动区与芯片 ---- */

.tool-activity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 6px;
}

/* 收成摘要行后的活动区（去掉列间距，由内部 details 接管） */
.tool-activity.collapsed {
  margin: 2px 0 6px;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-input);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-chip .tool-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 运行中的芯片：高亮 + 边框呼吸动画 */
.tool-chip.running {
  border-color: var(--accent);
  color: #fff;
  animation: chip-breath 1.6s ease-in-out infinite;
}

@keyframes chip-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0.35); }
  50% { box-shadow: 0 0 6px 2px rgba(79, 140, 255, 0.35); }
}

/* 完成的芯片：变暗收起 */
.tool-chip.done {
  opacity: 0.55;
  animation: none;
  box-shadow: none;
}

/* 回合结束后的工具摘要折叠行 */
.tool-summary {
  font-size: 12px;
  color: var(--text-dim);
}

.tool-summary summary {
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}

.tool-summary summary::before { content: "▸ "; }
.tool-summary[open] summary::before { content: "▾ "; }

.tool-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px 14px;
}

/* ---- 第 3 档：思考徽标（thinking-fold 复用现有样式，仅微调 summary） ---- */

.thinking-fold summary {
  font-size: 12px;
}

/* ============ 移动端 ============ */

@media (max-width: 640px) {
  .bubble { max-width: 92%; }
  .chat-input-bar { padding-left: 10px; padding-right: 10px; }
  #btn-send { padding: 8px 12px; }
}