/* ================================================================
   Chat — Message layout, thinking block, floating bar, input area.
   User messages: right-aligned bubble with background.
   AI messages: left-aligned, modular (think block + content).
   ================================================================ */

/* ═══ Message Wrappers (left/right alignment) ═══ */

.message-wrapper {
  display: flex;
  padding: var(--space-sm) var(--space-xl);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  animation: slide-up 0.2s ease;
}

.message-wrapper--user {
  flex-direction: column;
  align-items: flex-end;
}

.message-wrapper--assistant {
  flex-direction: column;
  align-items: flex-start;
}

/* ═══ Message Bubbles ═══ */

.message {
  max-width: 72%;
  min-width: 80px;
}

.message--user {
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  font-weight: var(--fw-user-msg);
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
  position: relative;
}

.message--assistant {
  padding: 4px 0;
  max-width: 100%;
  font-weight: var(--fw-ai-msg);
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
}

/* Streaming indicator on AI messages */
.message--streaming {
  position: relative;
}

/* ═══ Message Time ═══ */

.message-time {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: 4px;
}

.message-wrapper--user .message-time {
  text-align: right;
}

/* Usage label (cost + tokens, inside .message-time) */
.message-usage {
  white-space: nowrap;
}

.usage-pending-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  font-family: var(--font-sans);
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline dotted;
}

.usage-pending-btn:disabled {
  color: var(--text-tertiary);
  cursor: default;
  text-decoration: none;
}

/* ═══ Message Body ═══ */

.message-body {
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
}

.message--user .message-body {
  font-weight: var(--fw-user-msg);
}

.message--assistant .message-body {
  font-weight: var(--fw-ai-msg);
}

/* Streaming cursor after body */
.message--streaming .message-body::after {
  content: '▍';
  display: inline-block;
  color: var(--accent);
  animation: cursor-blink 0.9s steps(2) infinite;
  margin-left: 2px;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* ═══ Content Round Block (intermediate reply before tool call) ═══ */
.content-round-block {
  padding: 8px 0;
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
}

/* ═══ Time Indicator Block ═══ */
.time-indicator-block {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0;
}

/* ═══ AI Thinking Block ═══ */

.ai-think-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  overflow: hidden;
  background: var(--surface-secondary);
}

.ai-think-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.ai-think-header:hover {
  background: var(--surface-hover);
}

.ai-think-header .indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.ai-think-header .thinking-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.ai-think-header .thinking-icon svg {
  width: 100%;
  height: 100%;
}

.ai-think-header .thinking-icon--anim {
  animation: thinking-pulse 1.6s ease-in-out infinite;
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

.ai-think-header .indicator .dot-pulse {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ai-think-header .indicator .dot-pulse span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.ai-think-header .indicator .dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.ai-think-header .indicator .dot-pulse span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.ai-think-header .arrow {
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.ai-think-header.open .arrow {
  transform: rotate(90deg);
}

.ai-think-body {
  padding: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ═══ Tool Fold（收纳模式：摘要组 + 流式活动行）═══ */

.tool-fold-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin: 6px 0;
  overflow: hidden;
  background: var(--surface-secondary);
}

.tool-fold-block .tool-fold-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
  transition: background var(--transition-fast);
}

.tool-fold-block .tool-fold-header:hover {
  background: var(--surface-hover);
}

.tool-fold-block .tool-fold-header .card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tool-fold-block .tool-fold-header .arrow {
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}

.tool-fold-block .tool-fold-header.open .arrow {
  transform: rotate(90deg);
}

/* 组内卡片保持各自样式，仅收紧上下边距使视觉同属一组 */
.tool-fold-block .tool-fold-body {
  padding: 0 8px 8px;
}

.tool-activity-block {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
}

.tool-activity-block .dot-pulse {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.tool-activity-block .dot-pulse span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.tool-activity-block .dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.tool-activity-block .dot-pulse span:nth-child(3) { animation-delay: 0.4s; }

.tool-activity-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tool-activity-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 思考态大脑图标脉动（与展开模式 thinking-icon--anim 同一关键帧） */
.tool-activity-icon--anim {
  animation: thinking-pulse 1.6s ease-in-out infinite;
}

.tool-activity-icon--error {
  color: var(--error);
}

/* 收纳组摘要行扳手图标（.card-label svg 规则负责 1em 尺寸，flex 已居中） */
.tool-fold-header .card-label > svg {
  flex-shrink: 0;
}

/* ═══ Common card-header layout: icon column + spaced arrow ═══ */

.ai-think-header,
.search-source-block .card-header,
.web-fetch-block .card-header,
.image-search-block .card-header,
.research-header {
  gap: 12px;
}

.ai-think-header .indicator,
.search-source-block .card-header .card-label,
.web-fetch-block .card-header .card-label,
.image-search-block .card-header .card-label,
.time-indicator-block,
.research-title,
.swarm-plan-title,
.ask-user-answer {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.ai-think-header .thinking-icon,
.search-source-block .card-header .card-label svg,
.web-fetch-block .card-header .card-label svg,
.image-search-block .card-header .card-label svg,
.time-indicator-block svg,
.research-title svg,
.swarm-plan-title svg,
.ask-user-answer svg {
  flex-shrink: 0;
  margin-top: 0.15em;
}

.ai-think-header .indicator .dot-pulse {
  flex-shrink: 0;
  margin-top: 0.35em;
}

/* ═══ Message Actions (hover) ═══ */

.message-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: var(--space-xs);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.message-wrapper:hover .message-actions {
  opacity: 1;
}

.msg-action-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
  color: var(--text-tertiary);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition-fast);
}

.msg-action-btn svg {
  width: 15px;
  height: 15px;
}

.msg-action-btn:hover {
  color: var(--accent);
  background: var(--accent-subtle);
  transform: translateY(-1px);
}

.msg-action-btn:active {
  background: var(--surface-pressed);
  transform: none;
}

/* 成功反馈态：对勾图标 + accent 色（successSwap 加挂 ~2s） */
.msg-action-btn.success {
  color: var(--accent);
}

/* ═══ Inline Edit Mode (user messages) ═══ */

.message-edit-textarea {
  width: 100%;
  min-height: 48px;
  font-family: var(--font-sans);
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}

.message-wrapper[data-editing="true"] .message--user {
  width: 100%;
  border-color: var(--accent);
}

.message-wrapper[data-editing="true"] .message-actions {
  display: none;
}

.message-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-sm);
}

.msg-edit-save {
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--transition-fast);
  line-height: 1.4;
}

.msg-edit-save:hover {
  background: var(--accent-hover);
}

.msg-edit-cancel {
  padding: 4px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition-fast);
  line-height: 1.4;
}

.msg-edit-cancel:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* ═══ Floating Action Bar (right edge) ═══ */
/* 悬浮按钮：脱离文档流，不占布局宽度。文档滚动结构下用 fixed 定位，
   right 由 JS 按输入卡片实时位置计算（chat.js syncFloatingBarPos），
   bottom 锚定输入区上沿（--input-area-height 由 JS 实测发布）。 */

#floating-bar {
  position: fixed;
  right: 24px;   /* JS 会按卡片右缘覆盖此值 */
  bottom: calc(var(--input-area-height, 140px) + 10px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.float-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-primary);
  border: 1px solid var(--rule);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.float-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--accent);
  color: var(--accent);
}

.float-btn:active {
  background: var(--surface-pressed);
}

.float-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ═══ Error Message ═══ */

.message-error {
  max-width: var(--content-max);
  margin: var(--space-sm) auto;
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.message-error-text {
  font-size: var(--fs-l3);
  color: var(--error);
}

.message-error.with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.error-banner-action {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.error-banner-action:hover {
  background: var(--accent-hover);
}

/* Ask-user block (interactive inline tool result) */
.ask-user-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 8px 0;
  background: var(--surface-secondary);
}

.ask-user-block.completed {
  opacity: 0.75;
}

.ask-user-question {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.ask-user-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ask-user-option {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  background: var(--surface-hover);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.ask-user-option:hover {
  background: var(--accent-subtle);
  box-shadow: 0 0 0 1px var(--accent);
}

.ask-user-custom {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ask-user-input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-primary);
  transition: border-color var(--transition-fast);
}

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

.ask-user-submit {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ask-user-answer {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Search source block (for tool-call results) */
.search-source-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin: 6px 0;
  overflow: hidden;
  background: var(--surface-secondary);
}

.search-source-block .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
}

.search-source-block .card-header .arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.search-source-block .card-header.open .arrow {
  transform: rotate(90deg);
}

.search-source-block .card-body {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.source-item {
  margin: 6px 0;
}

.source-item a {
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.source-item a:hover {
  text-decoration: underline;
}

.source-item .source-snippet {
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ═══ Web Fetch block (page content fetching result) ═══ */

.web-fetch-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin: 6px 0;
  overflow: hidden;
  background: var(--surface-secondary);
}

.web-fetch-block .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
}

.web-fetch-block.fetch-error .card-header {
  cursor: default;
}

.web-fetch-block .card-header .arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.web-fetch-block .card-header.open .arrow {
  transform: rotate(90deg);
}

.web-fetch-block .card-body {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.web-fetch-block .fetch-content {
  color: var(--text-primary);
}

.web-fetch-block .fetch-error-text {
  color: var(--error);
  font-size: 12px;
}

.web-fetch-block .fetch-truncated-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Inline SVG icon alignment inside tool / research / swarm labels */
.card-label svg,
.time-indicator-block svg,
.research-step-icon svg,
.swarm-task-icon svg,
.ask-user-answer svg {
  display: inline-block;
  vertical-align: -0.2em;
  width: 1em;
  height: 1em;
}

/* === Image Search Gallery === */

.image-search-block {
  margin: var(--space-sm) 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-secondary);
}

.image-search-block .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  user-select: none;
}

.image-search-block .card-header:hover {
  background: var(--surface-hover);
}

.image-search-block .card-header .arrow {
  font-size: var(--fs-l4);
  transition: transform 0.2s ease;
  color: var(--text-secondary);
}

.image-search-block .card-header.open .arrow {
  transform: rotate(90deg);
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.image-gallery-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface-secondary);
}

.image-gallery-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;   /* 点击经图片灯箱放大；图注链接仍外开来源页 */
}

.image-gallery-item .image-caption {
  display: block;
  font-size: var(--fs-l5);
  color: var(--text-secondary);
  padding: 4px var(--space-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
}

.image-gallery-item .image-caption:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ═══ Research block ═══ */
.research-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin: 6px 0;
  overflow: hidden;
  background: var(--surface-secondary);
}

.research-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.research-header:hover {
  background: var(--surface-hover);
}

.research-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.research-progress {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
}

.research-header .arrow {
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.research-header.open .arrow {
  transform: rotate(90deg);
}

.research-body {
  padding: 8px 12px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.research-plan {
  margin: 0 0 var(--space-md) 0;
  padding-left: 18px;
}

.research-plan li {
  margin-bottom: 4px;
}

.research-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.research-step {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.research-step--error {
  color: var(--error);
}

.research-step-icon {
  flex-shrink: 0;
  margin-top: 0.1em;
}

.research-step-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ═══ Research citations ═══ */
.citation-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin: 0 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 9px;
  text-decoration: none;
  vertical-align: middle;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.citation-chip:hover {
  background: var(--accent);
  color: #fff;
}

.citation-chip:active {
  transform: scale(0.94);
}

/* 上传材料来源芯片：灰色、不可点击 */
.citation-chip--file {
  color: var(--text-secondary);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  cursor: default;
}

.citation-chip--file:hover {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.citation-source-item--file {
  color: var(--text-tertiary);
  cursor: default;
}

.citation-source-list {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.citation-source-list-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.citation-source-item {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 3px 0;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.citation-source-item:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ═══ Swarm block ═══ */
.swarm-block-wrapper {
  margin: 6px 0;
  width: 100%;
}

/* 含 swarm 块的 assistant 气泡撑满内容列宽：
   气泡默认 shrink-to-fit，两列网格/计划卡需要确定宽度才能正常排版。
   （历史教训：曾用 container-type:inline-size 做窄容器单列回退，
   尺寸包含会让 shrink-to-fit 宽度按无内容计算，整个 swarm 区塌成窄条。） */
.message--assistant:has(.swarm-block-wrapper) {
  width: 100%;
}

.swarm-plan-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: var(--space-sm);
  background: var(--surface-secondary);
}

.swarm-plan-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.swarm-plan-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.swarm-plan-list li {
  margin-bottom: 4px;
}

.swarm-grid {
  display: grid;
  /* 固定两列：状态行文本长短变化不再引发 1/2 列跳动；minmax(0,…) 允许收缩截断 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.swarm-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

/* 窄屏退回单列（窗口级媒体查询；报告栏展开挤压时仍保持两列，靠 minmax(0,…) 截断适配） */
@media (max-width: 640px) {
  .swarm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.swarm-task-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--surface-secondary);
  transition: border-color var(--transition-fast);
  min-width: 0;
}

.swarm-task-card--running {
  border-color: var(--accent);
}

.swarm-task-card--failed {
  border-color: var(--error);
}

.swarm-task-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}

.swarm-task-icon {
  flex-shrink: 0;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1em;
}

.swarm-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.swarm-task-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  /* 标题最多两行 clamp，超出省略；配合状态行单行截断保持卡片高度稳定 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

.swarm-task-status {
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 14px;
}

/* ═══ Disabled mode toggle ═══ */

.mode-toggle.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ================================================================
   Deep Research V2 — 摘要卡 + 计划确认卡
   ================================================================ */

/* ── 摘要卡（聊天气泡内，持久化） ── */
.research-summary-card {
  margin-bottom: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.research-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}

.research-summary-head svg {
  width: 14px;
  height: 14px;
}

.research-summary-title {
  font-size: var(--fs-l4);
  font-weight: 600;
  color: var(--text-primary);
}

.research-summary-stats {
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
  flex: 1;
  min-width: 0;
}

.research-summary-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ── 计划确认卡（聊天气泡内，可编辑） ── */
.research-confirm-card {
  margin-bottom: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--accent-border, var(--rule));
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.research-confirm-title {
  font-size: var(--fs-l3);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.research-confirm-title svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

.research-confirm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.research-confirm-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.research-confirm-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-control);
  color: var(--text-primary);
  font-size: var(--fs-l3);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--transition-fast);
}

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

.research-confirm-input:disabled {
  opacity: 0.8;
  background: transparent;
  border-color: transparent;
}

.research-confirm-del {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.research-confirm-add {
  align-self: flex-start;
}

.research-confirm-params {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-l4);
  color: var(--text-secondary);
}

.research-confirm-params select {
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-control);
  color: var(--text-primary);
  font-size: var(--fs-l4);
  font-family: var(--font-sans);
}

.research-confirm-actions {
  display: flex;
  gap: var(--space-sm);
}

/* 倒计时数字：等宽 + 固定宽度，避免按钮随秒数跳动 */
.confirm-countdown {
  display: inline-block;
  min-width: 2ch;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ── 范围澄清卡（研究计划前的确认问题） ── */
.clarify-question {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.clarify-question-text {
  font-size: var(--fs-l3);
  color: var(--text-primary);
  line-height: 1.5;
}

.clarify-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.clarify-chip {
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--fs-l4);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.clarify-chip:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.clarify-chip.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 500;
}

.clarify-chip:disabled {
  cursor: default;
  opacity: 0.55;
}

.clarify-chip.active:disabled {
  opacity: 1;
}

/* ── 深挖路径选择卡 ── */
.followup-choice-hint {
  font-size: var(--fs-l4);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── LLM 浏览器动作卡片 ── */
.browser-action-block .browser-action-header {
  cursor: default;
}

.browser-action-block .browser-action-detail {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

.browser-challenge-note {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--rule);
}

/* ── browser_ask_human 人工协助卡片（对齐 ask-user-block 视觉） ── */
.browser-ask-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 8px 0;
  background: var(--surface-secondary);
}

.browser-ask-block.completed {
  opacity: 0.75;
}

.browser-ask-message {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.browser-ask-message svg {
  flex-shrink: 0;
  color: var(--accent);
}

.browser-ask-actions {
  display: flex;
  gap: 8px;
}

.browser-ask-done {
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.browser-ask-giveup {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  background: var(--surface-hover);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}

.browser-ask-giveup:hover {
  background: var(--accent-subtle);
}

.browser-ask-result {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 研究路径人工协助卡片（独立插入消息列表，不绑定消息） ── */
.browser-human-card {
  display: flex;
  gap: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 8px 0;
  background: var(--surface-secondary);
  box-shadow: var(--shadow-sm);
}

.browser-human-card .bhc-icon {
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
}

.browser-human-card .bhc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.browser-human-card .bhc-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.browser-human-card .bhc-actions {
  display: flex;
  gap: 8px;
}

.browser-human-card .bhc-done {
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.browser-human-card .bhc-skip {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  background: var(--surface-hover);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}

.browser-human-card .bhc-skip:hover {
  background: var(--accent-subtle);
}

/* ── 搜索结果不可达标注 ── */
.source-unreachable {
  opacity: 0.55;
}

.source-unreachable-badge {
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ── 网络重连状态块 ── */
.retry-status-block {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 8px 0;
  background: var(--surface-secondary);
  font-size: 13px;
  color: var(--text-secondary);
}

.retry-status-block .retry-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: retry-spin 0.8s linear infinite;
}

@keyframes retry-spin {
  to { transform: rotate(360deg); }
}

.retry-status-block .retry-text {
  flex: 1;
  line-height: 1.5;
}

.retry-status-block .retry-now-btn {
  flex-shrink: 0;
  padding: 4px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.retry-status-block .retry-now-btn:hover {
  background: var(--accent-subtle);
}

.retry-status-block.exhausted {
  border-color: var(--danger, #C42B1C);
}

.retry-status-block.exhausted .retry-text {
  color: var(--danger, #C42B1C);
}

/* ── 可收起参考来源块（联网回答行末引用列表） ── */
.citation-block {
  margin: 10px 0 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  overflow: hidden;
}

.citation-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}

.citation-toggle:hover {
  background: var(--surface-hover);
}

.citation-icons {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.citation-icons .citation-icon {
  margin-left: -6px;
  box-shadow: 0 0 0 1.5px var(--surface-secondary);
}

.citation-icons .citation-icon:first-child {
  margin-left: 0;
}

.citation-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-primary);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.citation-icon img {
  width: 14px;
  height: 14px;
}

.citation-icon--letter {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
}

.citation-count {
  flex: 1;
  text-align: left;
}

.citation-toggle .arrow {
  font-size: 10px;
  transition: transform var(--transition-fast);
}

.citation-toggle.open .arrow {
  transform: rotate(90deg);
}

.citation-items {
  border-top: 1px solid var(--rule);
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.citation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
}

.citation-item:hover {
  text-decoration: underline;
}

.citation-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 上下文摘要边界 ──
   新版摘要只影响发给模型的 payload；原始消息仍在卡片上方。
   旧版 system 摘要也走这个折叠容器，避免内部指令与 Markdown 标记裸露。 */
.context-summary-wrapper {
  display: block;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.context-summary-card {
  width: min(100%, 680px);
  margin: 0 auto;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  color: var(--text-primary);
  overflow: clip;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.context-summary-card:hover,
.context-summary-card:focus-within {
  border-color: var(--accent);
  background: var(--surface-card);
}

.context-summary-wrapper.is-legacy .context-summary-card {
  border-color: var(--rule);
}

.context-summary-card[data-context-summary="invalid"] {
  border-color: var(--error);
}

.context-summary-card[data-context-summary="invalid"] .context-summary-badge {
  background: var(--error-bg);
  color: var(--error);
}

.context-summary-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  outline: none;
}

.context-summary-toggle::-webkit-details-marker { display: none; }

.context-summary-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: calc(var(--radius-lg) - 1px);
}

.context-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
}

.context-summary-heading {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: var(--fw-l4);
}

.context-summary-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  line-height: 18px;
}

.context-summary-wrapper.is-legacy .context-summary-badge {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.context-summary-chevron {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 20px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform var(--transition-fast);
}

.context-summary-card[open] .context-summary-chevron { transform: rotate(90deg); }

.context-summary-panel {
  padding: 0 14px 13px;
  border-top: 1px solid var(--rule);
  animation: context-summary-reveal 160ms cubic-bezier(0.2, 0, 0, 1);
}

.context-summary-note {
  margin: 10px 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.context-summary-content {
  max-height: min(52vh, 520px);
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  font-size: 13px;
  line-height: 1.65;
  scrollbar-gutter: stable;
}

.context-summary-content > :first-child { margin-top: 0; }
.context-summary-content > :last-child { margin-bottom: 0; }

.context-summary-meta {
  margin-top: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.context-summary-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.context-summary-reset-btn,
.capacity-popup-reset-btn {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.context-summary-reset-btn:hover,
.capacity-popup-reset-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

.context-summary-reset-btn:focus-visible,
.capacity-popup-reset-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@keyframes context-summary-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 容量浮窗补充：把“估算”、“最近单次实测”与摘要状态分层呈现。 */
.capacity-popup {
  width: min(360px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 24px));
  box-sizing: border-box;
  outline: none;
}

.capacity-popup:focus-visible {
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent);
}

.capacity-popup-row {
  align-items: flex-start;
}

.capacity-popup-row .popup-label {
  flex: 0 0 auto;
}

.capacity-popup-row .popup-value {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.capacity-popup-live-hint,
.capacity-popup-context-state {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
}

.capacity-popup-context-state {
  border: 1px solid var(--accent-border);
}

.capacity-popup-context-state.is-legacy {
  border-color: var(--rule);
  background: var(--surface-secondary);
}

.capacity-popup-reset-btn {
  width: 100%;
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .context-summary-card,
  .context-summary-chevron,
  .context-summary-reset-btn,
  .capacity-popup-reset-btn,
  .capacity-popup {
    transition: none !important;
  }

  .context-summary-panel {
    animation: none !important;
  }
}