/* toolmsg.css — 工具消息组件（ai/msg/tools/*）共享外观的唯一来源。
 *
 * 这套外壳（头部行、头部图标 hover 互换、状态徽标、折叠体）此前在 10 个组件里
 * 各抄一份——同一份声明 × 10 个不同前缀，改一处要改十处，极易出现
 * 「exec 改了 fs 没改」的语义/视觉漂移。
 *
 * 这里用「前缀选择器列表」一次定义，十个组件共用；各组件 <style> 只留自己
 * 特有的部分（ask/exec 的头部布局、exec 的终端图标、skills 的技能色等）。
 *
 * 前缀对照：gt=通用 tool、mem=记忆、fs=文件、ex=执行、ask=问答、tk=任务、
 *            dl=委托、cp=压缩、sk=技能、ws=联网搜索。
 *
 * 优先级说明：本文件是全局基线（选择器特异性 0,1,0）；组件内 <style> 经 vhtml
 * 作用域化后特异性更高（0,2,0+），组件特例覆盖本文件，同名同属性时以组件内为准。
 */

/* ---- 头部行（ask/exec 布局特殊，留在各自组件） ---- */
.gt-head,
.fs-head,
.cp-head,
.ws-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.2rem 0;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  font-size: var(--font-size-xs);
  color: var(--text-color-secondary);
}

.mem-head,
.tk-head,
.dl-head,
.sk-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.2rem 0;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  font-size: var(--font-size-xs);
}

/* ---- 头部图标（exec 用 inline-flex、skills 用技能色，留在各自组件） ----
 * 原图标与 hover 箭头共用同一个 1rem 槽：两者绝对定位叠层，
 * 用 opacity + scale 交叉淡入，不再 display 切换（避免瞬间缩一号、布局跳）。 */
:is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
  .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
  .sk-head-icon, .ws-head-icon) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  vertical-align: -0.125em;
  color: var(--text-color-tertiary);
}

:is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
  .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
  .sk-head-icon, .ws-head-icon) .own,
:is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
  .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
  .sk-head-icon, .ws-head-icon) .swap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  line-height: 1;
  transition: opacity 120ms ease, transform 160ms ease;
}

:is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
  .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
  .sk-head-icon, .ws-head-icon) .own {
  opacity: 1;
}

:is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
  .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
  .sk-head-icon, .ws-head-icon) .swap {
  opacity: 0;
  transform: scale(0.8);
}

:is(.gt-head, .mem-head, .fs-head, .ex-head, .ask-head,
  .tk-head, .dl-head, .cp-head, .sk-head, .ws-head):hover
  :is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
    .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
    .sk-head-icon, .ws-head-icon) .own {
  opacity: 0;
}

:is(.gt-head, .mem-head, .fs-head, .ex-head, .ask-head,
  .tk-head, .dl-head, .cp-head, .sk-head, .ws-head):hover
  :is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
    .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
    .sk-head-icon, .ws-head-icon) .swap {
  opacity: 1;
  transform: scale(1);
}

:is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
  .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
  .sk-head-icon, .ws-head-icon) .swap.expanded {
  transform: rotate(180deg);
}

:is(.gt-head, .mem-head, .fs-head, .ex-head, .ask-head,
  .tk-head, .dl-head, .cp-head, .sk-head, .ws-head):hover
  :is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
    .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
    .sk-head-icon, .ws-head-icon) .swap.expanded {
  transform: rotate(180deg);
}

/* 触屏没有 hover：展开态直接显示箭头，收起态仍显示原图标。 */
@media (hover: none) {
  :is(.gt-head, .mem-head, .fs-head, .ex-head, .ask-head,
    .tk-head, .dl-head, .cp-head, .sk-head, .ws-head):has(.swap.expanded)
    :is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
      .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
      .sk-head-icon, .ws-head-icon) .own {
    opacity: 0;
  }

  :is(.gt-head-icon, .mem-head-icon, .fs-head-icon, .ex-head-icon,
    .ask-head-icon, .tk-head-icon, .dl-head-icon, .cp-head-icon,
    .sk-head-icon, .ws-head-icon) .swap.expanded {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

:root {
  /* 展开体左缩进：对齐 header 图标后的文字起点（1rem 图标 + 4px gap） */
  --toolmsg-body-indent: calc(1rem + var(--spacing-xs));
}

/* ---- 状态徽标（ask 用 .ask-state-badge，不在本组） ---- */
.gt-state,
.mem-state,
.fs-state,
.ex-state,
.tk-state,
.dl-state,
.cp-state,
.sk-state,
.ws-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-danger);
  flex-shrink: 0;
}

.gt-state::before,
.mem-state::before,
.fs-state::before,
.ex-state::before,
.tk-state::before,
.dl-state::before,
.cp-state::before,
.sk-state::before,
.ws-state::before {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
}

.gt-state.rejected,
.mem-state.rejected,
.fs-state.rejected,
.ex-state.rejected,
.tk-state.rejected,
.dl-state.rejected,
.cp-state.rejected,
.sk-state.rejected,
.ws-state.rejected {
  color: var(--color-warning);
}

/* ---- 展开体内容缩进（各组件只保留自己的布局属性） ---- */
.gt-body-pad,
.mem-body-pad,
.fs-body-pad,
.ex-body-pad,
.ask-body-pad,
.tk-body-pad,
.dl-body-pad,
.cp-body-pad,
.sk-body-pad,
.ws-body-pad {
  margin-top: 0.25rem;
  padding: 0.4rem var(--spacing-xs) 0.35rem var(--toolmsg-body-indent);
}

/* ---- 折叠体（grid-template-rows 0fr→1fr 动画） ---- */
.gt-body,
.mem-body,
.fs-body,
.ex-body,
.ask-body,
.tk-body,
.dl-body,
.cp-body,
.sk-body,
.ws-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}

.gt-body[expanded="true"],
.fs-body[expanded="true"],
.ex-body[expanded="true"],
.ws-body[expanded="true"] {
  grid-template-rows: 1fr;
  max-height: 60vh;
}

.mem-body[expanded="true"],
.ask-body[expanded="true"],
.tk-body[expanded="true"],
.dl-body[expanded="true"],
.cp-body[expanded="true"],
.sk-body[expanded="true"] {
  grid-template-rows: 1fr;
}
