/* ai-chat-search-sources.css
 * 搜索来源 UI + 搜索模式芯片样式
 */

/* ========================================
   搜索来源容器（AI 回复气泡下方）
   ======================================== */
.search-sources {
  margin: 8px 0 4px 0;
  padding: 0;
}

.search-sources-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: 8px;
}

.search-sources-header svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
}

.search-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.search-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 16px;
  corner-shape: round;
  background: var(--color-bg-tertiary, #f3f4f6);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary, #374151);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  max-width: 220px;
  overflow: hidden;
}
html:not([data-input="touch"]) .search-source-chip:hover{
  background: var(--color-bg-hover, #e5e7eb);
  border-color: var(--color-border, #d1d5db);
  text-decoration: none;
}

.search-source-favicon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  corner-shape: round;
  flex-shrink: 0;
  object-fit: cover;
}

.search-source-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* favicon 加载失败时的首字母圆 */
.search-source-favicon-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  corner-shape: round;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
}

/* ========================================
   Agent 详细流程时间线（Claude Code 式，仅 agent_mode）
   气泡上方：reasoning 思考 + 可折叠工具块（入参 / 返回）
   ======================================== */
.agent-steps,
.work-reply {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px 0;
  /* 锁定宽度：父级 .msg 是 align-items:flex-start，会让本容器按内容宽度收缩，
     导致展开(含宽 pre)时整条被撑宽。固定为与回复气泡同宽(85%)，展开/折叠一致、不再变宽。*/
  width: 100%;
  max-width: 85%;
}

/* 实时 token 计数器（像 Claude Code）：紧跟 thinking 文字后面，逐帧上滚 */
.agent-usage {
  font-size: 11px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  padding: 1px 2px 2px;
  margin-top: 3px;
}
.dark-mode .agent-usage { color: #7d7d7d; }

/* 内联 token（接在 thinking 气泡文字后面，像 Claude Code "Thinking… · 6.7k tokens"），比正文更淡 */
.agent-usage-inline {
  color: rgba(0,0,0,0.4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dark-mode .agent-usage-inline,
.dark-mode-active .agent-usage-inline { color: rgba(255,255,255,0.42); }

/* 顶部状态条：像 Claude Code 的 "Thinking… · 3.7k tokens"，独立一行、置于时间线(reasoning/工具卡)最上方，与之为两条不合并。完成变"思考了X秒"。 */
.agent-status {
  font-size: 12px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85%;
  margin: 0 0 6px 2px;
}
.dark-mode .agent-status { color: #8a8a8a; }

/* 分段：每个工具卡片 = 一个「段」，段头(.agent-seg-head)独立计时/计 token —— 生成中 "Thinking··· · Nk tokens"，
   该工具被调用时定格成 "Thought for Xs · Nk tokens"。段内 = 段头 + reasoning + 工具卡，纵向堆叠。 */
.agent-seg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;   /* column-flex item: without this a no-wrap receipt row sets its width and the feed scrolls sideways on a phone */
}
.agent-seg-head {
  font-size: 12px;
  color: var(--meta-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85%;
  margin: 0 0 0 2px;
}
/* 生成图的总思考条：作为 .agent-steps 时间线最后一行，完全复用 .agent-seg-head（颜色/字号/左对齐/暗色），无需额外样式。 */

/* ★ 运行中状态词文字微光(用户 2026-07-22 定稿②)：光波只在【运行中】的段头文字上扫(Thinking···/联网搜索···)，
   定格后(agent-thought)纯静态灰字零动效。文字级 shimmer 比 pill 光带轻一个量级(Studio 多 agent 同屏考量)。 */
.agent-seg.running .agent-seg-head,
.duo-shimmer-word,
.flairui-shimmer-word {   /* same running-word light for any in-flight status word (3D/preview loading hints wrap their text in this) */
  width: fit-content;   /* ★ 收缩到文字宽：段头是 flex 拉伸的 block、渐变横跨整行，大部分光带扫在无字空白区=字上只"闪"一下；收缩后光带全程扫在字上=流动 */
  background-image: linear-gradient(90deg, #9ca3af 42%, #dcdcdc 50%, #9ca3af 58%);
  background-size: 200% 100%;
  /* 走位限制在 100%→0%(2 倍宽背景全程覆盖元素) → 单条光带从左往右流动；
     超出 0-100% 会进平铺重复区 = 多条光带轮扫 = "在闪"(2026-07-22 踩坑) */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: segHeadShimmer 1.8s linear infinite;
}
.dark-mode .agent-seg.running .agent-seg-head,
.dark-mode .duo-shimmer-word,
.dark-mode-active .duo-shimmer-word,
.dark-mode-active .flairui-shimmer-word {
  background-image: linear-gradient(90deg, #8a8a8a 42%, #cfcfcf 50%, #8a8a8a 58%);
}
/* 动画点是 ::after content、拿不到父级 background-clip → 会变透明；还原实色 */
.agent-seg.running .agent-seg-head .agent-dots { -webkit-text-fill-color: #9ca3af; }
.dark-mode .agent-seg.running .agent-seg-head .agent-dots { -webkit-text-fill-color: #8a8a8a; }
@keyframes segHeadShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
/* People who turn motion down get the word standing still in its base grey. The platform's sheet used to say this for
   .flairui-shimmer-word; the rule above now names that class too and loads later, so the theme says it (2026-09-15). */
@media (prefers-reduced-motion: reduce) {
  .duo-shimmer-word,
  .flairui-shimmer-word { animation: none; background-image: none; -webkit-text-fill-color: #9ca3af; }
  .dark-mode .duo-shimmer-word,
  .dark-mode-active .duo-shimmer-word,
  .dark-mode-active .flairui-shimmer-word { background-image: none; -webkit-text-fill-color: #8a8a8a; }
}

/* ★ light 定格态可展开(用户 2026-07-22 定稿③,参照 ChatGPT "Searched the web ⌄")：
   "Thought for Xs" hover 高亮+chevron 现身，点开下拉面板(搜索词/结果列表/秒数+token)。 */
.agent-seg-head.agent-light-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 0.15s;
}
html:not([data-input="touch"]) .agent-seg-head.agent-light-toggle:hover{ color: #6b7280; }
html:not([data-input="touch"]) .dark-mode .agent-seg-head.agent-light-toggle:hover{ color: #b0b0b0; }

.agent-seg-head.agent-light-toggle:active { color: #6b7280; }
.dark-mode .agent-seg-head.agent-light-toggle:active { color: #b0b0b0; }
.agent-light-chevron {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.agent-light-chevron svg { width: var(--icon-size); height: var(--icon-size); display: block; }
/* 用户 2026-07-22：14 太小，放大 ~30% */
html:not([data-input="touch"]) .agent-seg-head.agent-light-toggle:hover .agent-light-chevron,
html:not([data-input="touch"]) .agent-seg-head.agent-light-toggle:active .agent-light-chevron{ opacity: 1; }

.agent-seg.expanded .agent-light-chevron { opacity: 1; transform: rotate(180deg); }
@media (hover: none) and (pointer: coarse) {
  .agent-light-chevron { opacity: 1; }   /* 触屏无 hover → chevron 常驻 */
}

/* 下拉面板 = 过程收据(用户 2026-07-22 定稿)：每阶段一行"工具 · 搜索词 · Xs · Nk tokens (· N 结果)"，
   >1 阶段加总计；来源列表【不】进面板——答案下小圆圈已承载"依据"，此处只答"过程花了什么"。默认收起。 */
.agent-light-panel { display: none; }
.agent-seg.expanded .agent-light-panel { display: block; }
.agent-light-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  margin: 0 2px 4px;
  min-width: 0;
}
.dark-mode .agent-light-row { color: #9a9a9a; }
.agent-light-manage {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
html:not([data-input="touch"]) .agent-light-manage:hover{ color: var(--color-text); }

.agent-light-manage:active { color: var(--color-text); }
/* 工具名是固定词:不压缩不折行 —— 行里该让位的是带省略号的摘要(手机上曾把"Saving memory"折成两行) */
.agent-light-row-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.agent-light-row-query {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.agent-light-row-meta {
  flex: 0 0 auto;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}
.dark-mode .agent-light-row-meta { color: #7d7d7d; }
.agent-light-foot {
  font-size: 11px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  margin: 2px 2px 0;
}
.dark-mode .agent-light-foot { color: #7d7d7d; }

/* "Thinking" 后面一直动的省略号（防"卡住"感）；定宽避免 token 左右抖动 */
.agent-dots {
  display: inline-block;
  width: 1.1em;
  text-align: left;
}
.agent-dots::after {
  content: "...";
  animation: agentDots 1.2s steps(1, end) infinite;
}
@keyframes agentDots {
  0%   { content: "."; }
  33%  { content: ".."; }
  66%  { content: "..."; }
}

/* agent 生成的图片 */
.agent-image {
  display: block;
  max-width: min(100%, 340px);
  height: auto;
  border-radius: var(--img-radius);                     /* 全站图片圆角单一源（agent 输出族） */
  align-self: flex-start;
}

/* get_image 调出的既往图（时间线里工具卡下方展示给用户看） */
.agent-view-image {
  display: block;
  max-width: min(100%, 300px);
  height: auto;
  border-radius: var(--img-radius);                     /* 全站图片圆角单一源 */
  margin: 2px 0 2px 0;
  align-self: flex-start;
}

/* search_materials 返回的 og:image 参考图缩略条（工具卡下方一排，点击开来源页） */
.agent-search-thumbs {
  display: flex;
  gap: var(--img-gap);                                  /* 全站图片间距单一源（参考图画廊同源） */
  margin: 6px 0 2px;
  align-self: stretch;                                  /* 与横条等宽（填满时间线宽度）*/
}
.agent-search-thumb {
  flex: 1 1 0;                                          /* 最多 4 张，等分填满整行 → 与横条等宽 */
  min-width: 0;
  aspect-ratio: 1 / 1;                                  /* 1:1 正方形（宽由 flex 定、高随宽 → 手机电脑都正方）*/
  padding: 0;                                           /* 去 <button> 默认内边距 */
  border-radius: var(--img-radius);                     /* 全站图片圆角单一源（agent 输出族） */
  overflow: hidden;
  border: 1px solid var(--color-border); /* 复用工具卡边框基准 */
  background: var(--color-bg-tertiary, #f3f4f6);
  cursor: pointer;
  transition: border-color 0.15s;
}
.agent-search-thumb img {
  width: 100%;
  height: 100% !important;                              /* override theme.css img { height: auto } */
  object-fit: cover;
  display: block;
}
html:not([data-input="touch"]) .agent-search-thumb:hover{ border-color: var(--color-border, #d1d5db); }

.agent-search-thumb:active { border-color: var(--color-border, #d1d5db); }
/* 暗色（时间线在 .ai-design-section 内 → 用 .dark-mode，与 .agent-tool 一致） */
.dark-mode .agent-search-thumb {
  background: #333;   /* 边框走标准 var(--color-border)（暗色自动），不再单独覆盖 */
}
html:not([data-input="touch"]) .dark-mode .agent-search-thumb:hover{ border-color: #5a5a5a; }

.dark-mode .agent-search-thumb:active { border-color: #5a5a5a; }

/* 思考文字（turn 之间的推理） */
.agent-reasoning {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary, #6b7280);
  padding: 2px 0;
  white-space: pre-wrap;
}

/* 可折叠工具块 */
.agent-tool {
  border: 1px solid var(--color-border);                /* ★ 全站标准边线（勿硬编码颜色）*/
  border-radius: calc(14px * var(--corner-k));                                  /* 横条与图片一致（agent 输出族统一 14px）*/
  background: var(--color-bg-tertiary, #f9fafb);
  overflow: hidden;
}

.agent-tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-primary, #374151);
  text-align: left;
  touch-action: manipulation; /* 移动端去点击延迟/双击缩放干扰，配合 JS 的 touch 去重 */
}

.agent-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-size);   /* 固定图标槽宽度：运行→完成图标切换时后面文字不位移 */
  height: var(--icon-size);
}
.agent-tool-icon svg { width: var(--icon-size); height: var(--icon-size); }

.agent-tool-name {
  font-weight: 500;
  /* 工具标签已是自然语言(如"搜索材料")而非代码式函数名 → 用界面统一字体：拉丁 Jost，中文苹方(苹果)→微软雅黑(Win)，与全站标题一致 */
  font-family: "Flair", "Jost Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
  flex-shrink: 0;
}

.agent-tool-status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary, #6b7280);
  font-size: 12px;
}

.agent-tool-chevron {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-secondary, #9ca3af);
  transition: transform 0.15s ease;
}
.agent-tool-chevron svg { width: var(--icon-size); height: var(--icon-size); }
.agent-tool.expanded .agent-tool-chevron { transform: rotate(180deg); }

/* 状态：running = DuoHand 阳爻符号每 500ms 转 90°（呼应发送动效）/ done 绿勾 / error 红 */
.agent-tool.running .agent-tool-icon svg { animation: agentSendTick 4s steps(8) infinite; }
@keyframes agentSendTick { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.agent-tool.done .agent-tool-icon { color: #4a9478; }
.agent-tool.done .agent-tool-icon svg { width: var(--icon-size); height: var(--icon-size); } /* 完成对号视觉缩到 20，槽仍 24px 不让文字左移 */
.agent-tool.error .agent-tool-icon,
.agent-tool.error .agent-tool-status { color: #dc2626; }

/* 展开内容 */
.agent-tool-body {
  display: none;
  padding: 0 10px 10px 10px;
}
.agent-tool.expanded .agent-tool-body { display: block; }

.agent-tool-section { margin-top: 8px; }
.agent-tool-section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary, #9ca3af);
  margin-bottom: 4px;
}
.agent-tool-pre {
  margin: 0;
  padding: 8px 10px;
  background: var(--color-bg-hover, #f3f4f6);
  color: var(--color-text-secondary, #6b7280); /* 次要文字色：过程细节，不必跟正文一样显眼（但要可读，避免继承成低对比灰）*/
  border-radius: calc(8px * var(--corner-k));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
html:not([data-input="touch"]) .agent-tool-header:hover{ background: var(--color-bg-hover, #f3f4f6); }

.agent-tool-header:active { background: var(--color-bg-hover, #f3f4f6); }

/* ========================================
   Composer 搜索模式芯片（与 image-mode-chip 一致，蓝色）
   ======================================== */
.search-mode-chip {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #1d4ed8;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-mode-chip.active {
  display: inline-flex;
}
html:not([data-input="touch"]) .search-mode-chip:hover{
  background: #dbeafe;
}

.search-mode-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  corner-shape: round;
  transition: background 0.1s ease;
}

.search-mode-chip__icon svg {
  width: 24px;
  height: 24px;
}

.search-mode-chip__icon-search {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-mode-chip__icon-close {
  display: none;
  align-items: center;
  justify-content: center;
}
html:not([data-input="touch"]) .search-mode-chip:hover .search-mode-chip__icon-search{ display: none; }
html:not([data-input="touch"]) .search-mode-chip:hover .search-mode-chip__icon-close{ display: flex; }
html:not([data-input="touch"]) .search-mode-chip:hover .search-mode-chip__icon,
html:not([data-input="touch"]) .search-mode-chip:active .search-mode-chip__icon{ background: rgba(29, 78, 216, 0.25); }


.search-mode-chip__label {
  font-weight: 500;
  white-space: nowrap;
}

/* ✅ Plus menu: search 按钮选中用蓝色 */
#menuSearchWebBtn.active .plus-menu__icon,
#menuSearchWebBtn.active .plus-menu__label {
  color: #1d4ed8;
}

#menuSearchWebBtn.active .plus-menu__icon svg {
  fill: #1d4ed8;
}

#menuSearchWebBtn.active .plus-menu__check svg {
  stroke: #1d4ed8;
}

/* ✅ 所有设备：隐藏芯片列表，改用 footer 内重叠缩略图 */
.search-sources {
  display: none !important;
}

/* ========================================
   移动端搜索来源缩略图（Perplexity 风格重叠圆）
   ======================================== */
.search-source-thumbs {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 5px;
  margin-left: 2px;
  border-radius: 9999px;
  corner-shape: round;
  transition: background 0.15s;
}
html:not([data-input="touch"]) .search-source-thumbs:hover,
html:not([data-input="touch"]) .search-source-thumbs:active{
  background: var(--color-bg-hover);
}
html:not([data-input="touch"]) .dark-mode .search-source-thumbs:hover,
html:not([data-input="touch"]) .dark-mode .search-source-thumbs:active{
  background: rgba(255, 255, 255, 0.08);
}


.search-source-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  corner-shape: round;
  background: var(--color-bg-tertiary, #f3f4f6);
  border: 2px solid var(--color-bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.search-source-thumb + .search-source-thumb {
  margin-left: -8px;
}

.search-source-thumb img {
  width: 100%;
  height: 100% !important; /* override theme.css img { height: auto } */
  border-radius: 50%;
  corner-shape: round;
  display: block;
  object-fit: cover;
}

.search-source-thumb-letter {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1;
}

.search-source-thumb-more {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary, #6b7280);
  background: var(--color-bg-tertiary, #f3f4f6);
}

/* ========================================
   来源底部弹窗 (Bottom Sheet)
   ======================================== */
.sources-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sources-sheet-overlay[hidden] {
  display: none;
}

.sources-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
}

.sources-sheet-overlay.visible .sources-sheet-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.sources-sheet {
  position: relative;
  z-index: 1;
  background: var(--color-bg-panel);
  border-radius: calc(16px * var(--corner-k)) calc(16px * var(--corner-k)) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
}

.sources-sheet-overlay.visible .sources-sheet {
  transform: translateY(0);
}

.sources-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sources-sheet-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

/* 尺寸/样式/图标走单一真源 .project-modal-close(28方/14图标,DOM 上并列);此处只留 sheet 特有的触屏 hover 态 */

.sources-sheet-close.is-hovered {
  background: var(--color-bg-card);
}

.sources-sheet-close:active {
  background: var(--color-bg-card);
}

.sources-sheet-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  flex: 1;
}

.sources-sheet-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.sources-sheet-item:active {
  background: var(--color-bg-hover);
}

.sources-sheet-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sources-sheet-num {
  display: none;
}

.sources-sheet-favicon {
  width: 16px;
  height: 16px !important; /* override theme.css img { height: auto } */
  border-radius: 50%;
  corner-shape: round;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}

.sources-sheet-favicon-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px !important;
  border-radius: 50%;
  corner-shape: round;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  flex-shrink: 0;
}

.sources-sheet-domain {
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
  flex-shrink: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sources-sheet-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary, #374151);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ========================================
   桌面端：右侧 Sidebar 模式
   ======================================== */
.sources-sheet-overlay.sources-sheet--sidebar {
  align-items: stretch;
  justify-content: flex-end;
}

.sources-sheet-overlay.sources-sheet--sidebar .sources-sheet {
  border-radius: 0;
  max-width: 380px;
  width: 380px;
  max-height: 100vh;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}

.sources-sheet-overlay.sources-sheet--sidebar.visible .sources-sheet {
  transform: translateX(0);
}

.sources-sheet-overlay.sources-sheet--sidebar .sources-sheet-item.is-hovered {
  background: var(--color-bg-card);
}

/* ✅ Mobile */
@media (max-width: 768px), (max-height: 500px) {
}

/* ========================================
   暗色模式
   ======================================== */
.dark-mode .search-sources-header {
  color: var(--dark-text-secondary, #9ca3af);
}

.dark-mode .search-source-chip {
  background: var(--dark-bg-tertiary, #374151);
  border-color: var(--dark-border, #4b5563);
  color: var(--dark-text-primary, #e5e7eb);
}
html:not([data-input="touch"]) .dark-mode .search-source-chip:hover{
  background: var(--dark-bg-hover, #4b5563);
  border-color: var(--dark-border-hover, #6b7280);
}

.dark-mode .agent-reasoning {
  color: var(--dark-text-secondary, #9ca3af);
}
.dark-mode .agent-tool {
  background: #333;          /* 中性灰；边框走标准 var(--color-border)（暗色自动），不再单独覆盖 */
}
.dark-mode .agent-tool-header { color: var(--dark-text-primary, #e5e7eb); }
.dark-mode .agent-tool-status { color: var(--dark-text-secondary, #9ca3af); }
.dark-mode .agent-tool-pre { background: rgba(0, 0, 0, 0.25); color: var(--dark-text-secondary, #9ca3af); }
.dark-mode .agent-tool.done .agent-tool-icon { color: #7db3a0; }
.dark-mode .agent-tool.error .agent-tool-icon,
.dark-mode .agent-tool.error .agent-tool-status { color: #f87171; }
html:not([data-input="touch"]) .dark-mode .agent-tool-header:hover{ background: rgba(255, 255, 255, 0.06); }

.dark-mode .agent-tool-header:active { background: rgba(255, 255, 255, 0.06); }

.dark-mode .search-mode-chip {
  color: #93c5fd;
}
html:not([data-input="touch"]) .dark-mode .search-mode-chip:hover{
  background: rgba(29, 78, 216, 0.15);
}
html:not([data-input="touch"]) .dark-mode .search-mode-chip:hover .search-mode-chip__icon{
  background: rgba(147, 197, 253, 0.25);
}

/* ✅ Plus menu: search 按钮暗色模式 */
.dark-mode #menuSearchWebBtn.active .plus-menu__icon,
.dark-mode #menuSearchWebBtn.active .plus-menu__label {
  color: #93c5fd;
}

.dark-mode #menuSearchWebBtn.active .plus-menu__icon svg {
  fill: #93c5fd;
}

.dark-mode #menuSearchWebBtn.active .plus-menu__check svg {
  stroke: #93c5fd;
}

/* ✅ 暗色模式：搜索来源缩略图 */
.dark-mode .search-source-thumb {
  background: var(--dark-bg-tertiary, #374151);
  border-color: #1a1a1a;
}

.dark-mode .search-source-favicon-letter {
  background: var(--dark-bg-tertiary, #374151);
  color: var(--dark-text-secondary, #9ca3af);
}

.dark-mode .search-source-thumb-letter {
  color: var(--dark-text-secondary, #9ca3af);
}

.dark-mode .search-source-thumb-more {
  color: var(--dark-text-secondary, #9ca3af);
  background: var(--dark-bg-tertiary, #374151);
}

/* ✅ 暗色模式：来源底部弹窗（挂在 body 上，不在 .dark-mode 容器内，用 html.dark-mode-active） */
html.dark-mode-active .sources-sheet {
  background: #1a1a1a;
}

html.dark-mode-active .sources-sheet-header {
  border-bottom-color: var(--color-border);
}

html.dark-mode-active .sources-sheet-title {
  color: rgba(255, 255, 255, 0.9);
}


html.dark-mode-active .sources-sheet-item {
  color: var(--dark-text-primary, #e5e7eb);
}


html.dark-mode-active .sources-sheet-num {
  background: var(--dark-bg-tertiary, #374151);
  color: var(--dark-text-secondary, #9ca3af);
}

html.dark-mode-active .sources-sheet-favicon-letter {
  background: var(--dark-bg-tertiary, #374151);
  color: var(--dark-text-secondary, #9ca3af);
}

html.dark-mode-active .sources-sheet-domain {
  color: var(--dark-text-secondary, #9ca3af);
}

html.dark-mode-active .sources-sheet-item-title {
  color: var(--dark-text-primary, #e5e7eb);
}

html.dark-mode-active .sources-sheet-overlay.sources-sheet--sidebar .sources-sheet-item.is-hovered {
  background: rgba(255, 255, 255, 0.15);
}