/* ===== LGSports Chat Bubble ===== */
/* 消息气泡 + 消息操作 + 加载指示器 + 思考过程 */
/* 来源：原 chat.css 的 Messages / Actions / Loading / Thinking 部分 */

/* ===== Messages ===== */
.message {
  display: flex;
  gap: 0;
  max-width: 100%;
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message.assistant {
  align-self: flex-start;
}

/* 隐藏头像 */
.message .avatar {
  display: none;
}

.message .bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  width: 100%;
  flex: 1;
}

.message.user .bubble {
  background: #667eea;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.message.assistant .bubble {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
}

.message .bubble pre {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 8px 0;
}

.message .bubble code {
  background: #f4f4f4;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 13px;
}

.message .bubble pre code {
  background: none;
  padding: 0;
}

.message .bubble h3 {
  margin: 8px 0 4px;
  font-size: 16px;
}

.message .bubble h4 {
  margin: 6px 0 4px;
  font-size: 14px;
}

.message .bubble ul {
  padding-left: 20px;
  margin: 4px 0;
}

.message .bubble li {
  margin: 2px 0;
}

.message .bubble p {
  margin: 4px 0;
}

/* ===== Long Message Collapse ===== */
.message .bubble.collapsed {
  max-height: 400px;
  overflow: hidden;
  position: relative;
}

.message .bubble.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}

.message .bubble.collapsed.user::after {
  background: linear-gradient(to bottom, rgba(102, 126, 234, 0), rgba(102, 126, 234, 1));
}

.collapse-toggle {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #667eea;
  cursor: pointer;
  text-align: center;
  padding: 4px 0;
  border-radius: 4px;
  transition: background 0.2s;
}

.collapse-toggle:hover {
  background: rgba(102, 126, 234, 0.1);
}

/* ===== Loading ===== */
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ===== 思考过程和工具结果样式 ===== */
.thinking-process,
.tool-observation {
  margin: 12px 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f9f9f9;
  overflow: hidden;
}

.thinking-process summary,
.tool-observation summary {
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 500;
  color: #555;
  background: #f0f0f0;
  border-bottom: 1px solid #e0e0e0;
  user-select: none;
  transition: background 0.2s;
}

.thinking-process summary:hover,
.tool-observation summary:hover {
  background: #e8e8e8;
}

.thinking-process summary::marker,
.tool-observation summary::marker {
  color: #666;
}

.thinking-content {
  padding: 15px;
  background: #fff;
  color: #666;
  font-size: 0.9em;
  line-height: 1.6;
  border-left: 3px solid #4CAF50;
  margin: 10px 15px;
}

.observation-content {
  padding: 15px;
  background: #fff;
  color: #333;
  font-size: 0.9em;
  line-height: 1.6;
  border-left: 3px solid #2196F3;
  margin: 10px 15px;
}

.tool-action {
  padding: 10px 15px;
  background: #E3F2FD;
  border-left: 3px solid #2196F3;
  border-radius: 4px;
  color: #1976D2;
  font-weight: 500;
  margin: 10px 0;
}

/* ===== Status Message ===== */
.status-msg {
  font-size: 13px;
  color: #888;
  font-style: italic;
  align-self: center;
}

/* ===== System Notice (pause/stop hint) ===== */
.message.system-notice {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}

.notice-bubble {
  font-size: 12px;
  color: #999;
  background: transparent;
  padding: 2px 12px;
  border-radius: 10px;
  font-style: italic;
  user-select: none;
}

/* ===== Token Usage Indicator ===== */
.token-usage {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: #888;
  background: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #eee;
  line-height: 1.6;
}

.token-usage .token-usage-label {
  display: inline-block;
  background: #667eea;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 4px;
}

.token-usage strong {
  color: #555;
}

/* ===== Low Balance Warning ===== */
.low-balance-warning {
  margin-top: 8px;
  padding: 6px 12px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 6px;
  color: #d48806;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}

.low-balance-warning:hover {
  background: #fff1d6;
}

/* ===== Dark Mode Overrides ===== */

body.dark-mode .message.assistant .bubble {
  background: #1e1e1e;
  border: 1px solid #333;
}

body.dark-mode .message.assistant .bubble.collapsed::after {
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0), rgba(30, 30, 30, 1));
}

body.dark-mode .thinking-process,
body.dark-mode .tool-observation {
  border-color: #444;
  background: #1e1e1e;
}

body.dark-mode .thinking-process summary,
body.dark-mode .tool-observation summary {
  color: #aaa;
  background: #2d2d2d;
  border-color: #444;
}

body.dark-mode .thinking-process summary:hover,
body.dark-mode .tool-observation summary:hover {
  background: #3d3d3d;
}

body.dark-mode .thinking-process summary::marker,
body.dark-mode .tool-observation summary::marker {
  color: #aaa;
}

body.dark-mode .thinking-content {
  background: #1e1e1e;
  color: #aaa;
  border-left-color: #4CAF50;
}

body.dark-mode .observation-content {
  background: #1e1e1e;
  color: #ccc;
  border-left-color: #2196F3;
}

body.dark-mode .tool-action {
  background: #1a2e4a;
  border-left-color: #2196F3;
  color: #64B5F6;
}

body.dark-mode .message .bubble pre {
  background: #2d2d2d;
  color: #e0e0e0;
}

body.dark-mode .message .bubble code {
  background: #2d2d2d;
  color: #e0e0e0;
}

body.dark-mode .message .bubble h3,
body.dark-mode .message .bubble h4,
body.dark-mode .message .bubble ul,
body.dark-mode .message .bubble li,
body.dark-mode .message .bubble p {
  color: #e0e0e0;
}

body.dark-mode .status-msg {
  color: #888;
}

body.dark-mode .notice-bubble {
  color: #888;
}

body.dark-mode .collapse-toggle {
  color: #8899ff;
}

body.dark-mode .collapse-toggle:hover {
  background: rgba(136, 153, 255, 0.1);
}

body.dark-mode .token-usage {
  background: #2d2d2d;
  border-color: #444;
  color: #aaa;
}

body.dark-mode .token-usage strong {
  color: #ccc;
}

body.dark-mode .token-usage .token-usage-label {
  background: #8899ff;
}

/* ===== 加载更多历史指示器 ===== */
.load-more-indicator {
  text-align: center;
  padding: 8px 12px;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.load-more-indicator:hover {
  color: #5566ff;
}

body.dark-mode .load-more-indicator {
  color: #999;
}

body.dark-mode .load-more-indicator:hover {
  color: #8899ff;
}

/* ===== 专家署名（单专家对话模式） ===== */
.message.assistant.has-expert {
  flex-direction: column;
  gap: 4px;
}

.expert-sign {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}

.expert-sign-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
}

.expert-sign-avatar svg {
  width: 100%;
  height: 100%;
}

.expert-sign-name {
  font-size: 12px;
  font-weight: 600;
  color: #667eea;
}

/* ===== 四段式分析结构化卡片 ===== */
.ana-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.ana-section {
  border-left: 3px solid #e0e0e0;
  padding: 2px 0 2px 10px;
}

.ana-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 3px;
}

.ana-section-body {
  font-size: 13.5px;
  line-height: 1.65;
}

.ana-section-body p {
  margin: 0 0 4px;
}

.ana-conclusion { border-left-color: #667eea; }
.ana-conclusion .ana-section-body { font-weight: 500; }
.ana-evidence { border-left-color: #10b981; }
.ana-risk { border-left-color: #f59e0b; }
.ana-risk .ana-section-body { color: #b45309; }
.ana-advice { border-left-color: #ef4444; }

body.dark-mode .ana-section {
  border-left-color: #4b5563;
}

body.dark-mode .ana-section-title {
  color: #e5e7eb;
}

body.dark-mode .ana-conclusion { border-left-color: #818cf8; }
body.dark-mode .ana-evidence { border-left-color: #34d399; }
body.dark-mode .ana-risk { border-left-color: #fbbf24; }
body.dark-mode .ana-risk .ana-section-body { color: #fcd34d; }
body.dark-mode .ana-advice { border-left-color: #f87171; }

/* ===== 处理过程时间线（status 事件） ===== */
.status-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

.status-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.status-step.done {
  color: #999;
}

.status-step.active {
  color: #555;
}

.status-check {
  color: #10b981;
  font-size: 12px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.status-step .typing-indicator {
  display: inline-flex;
  flex-shrink: 0;
}

body.dark-mode .status-step.done {
  color: #6b7280;
}

body.dark-mode .status-step.active {
  color: #d1d5db;
}