/* === 05-messages.css (原 user.css L971-L1539,Section 6+7 聊天消息 + 工具状态) === */

/* 同一回复的画廊与正文共用图片展示，去重状态由 images.js 统一维护。 */
[data-image-role][data-image-duplicate], [data-image-role] [data-image-duplicate] { display: none !important; }

/* === Section 6 聊天消息 (原 L971-L1247) === */

/* ========================================
   6. 聊天消息（.msg-user, .msg-ai, .msg-ai-content）
   ======================================== */

/* P512:消息区不再使用 content-visibility。
   旧方案用统一 400px 预估高度懒 layout,长回答/工具卡/图片卡进入视口时会改写真
   实高度,移动端拖动时表现为页面与手指拉扯。消息高度必须由真实 DOM + 媒体占位承载。 */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text-dim); text-align: center; gap: 12px; animation: fadeIn .4s ease;
}
.empty-icon { opacity: .4; }
.empty-icon svg { stroke: var(--text-muted); }
.empty-state p { font-size: 15px; color: var(--text-muted); }

.load-more-hint {
  text-align: center; color: var(--text-dim); font-size: 13px;
  padding: 12px 0 8px; opacity: .6;
}

.msg-user {
  display: flex; flex-direction: column; align-items: flex-end;
  /* P429:三块附件/气泡之间靠 gap 自然分离(图片块 → 文件块 → 文字气泡) */
  gap: var(--space-2);
  /* P183 Part 1: 用户消息 → AI 抬头 之间 20px 紧贴感（同一轮）；
     轮与轮之间的 56px 大间距来自 .msg-ai 的 margin-bottom。
     P523 不变量:hover 操作条下沉量(07-utilities .msg-hover-actions = --space-4,16px)
     必须 ≤ 本边距(--space-5,20px),否则操作条会探进下一轮回复。改本值先看那条注释。 */
  margin-bottom: var(--space-5);
  padding-left: 20%;
  animation: fadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  position: relative;
  min-width: 0;
}
/* P429:含附件的用户消息收紧左侧给图片更多横向空间;附件块仍右对齐(align-items: flex-end 继承) */
.msg-user:has(.user-img-grid),
.msg-user:has(.user-file-tags) {
  padding-left: 4%;
}
/* P429:附件块 / 文件标签直接挂在 .msg-user 下作为兄弟节点(不再塞 .msg-user-bubble 内)
   width 走自身 max-width 上限(user-img-grid 在 07-utilities.css 已定 240/560),align-self 右对齐 */
.msg-user > .user-img-grid,
.msg-user > .user-file-tags {
  align-self: flex-end;
  margin-bottom: 0;  /* 删原 12px margin-bottom,改走 .msg-user gap 统一管控 */
  margin-top: 0;
}
/* 回执(T187):已送达/已查看只在聊天窗口外观显示(46-messenger.css);
   没送到是故障,所有外观都显示并可重发(离开再回来时那句话从本机画回,不能看着像已发出) */
.turn-receipt { display: none; align-self: flex-end; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.turn-receipt.is-undelivered { display: block; }
.turn-receipt button {
  margin-left: 6px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--text-bright); text-decoration: underline; cursor: pointer;
}
/* 操作条(引用/复制)贴气泡右下会盖住“重发”;这句还没发出去,只留重发 */
.msg-user:has(> .turn-receipt button) .msg-hover-actions { display: none; }

.msg-user-bubble {
  background: var(--user-message-bg);
  color: var(--user-message-text);
  /* 实底、不描边、无阴影,四角同一大圆角(短消息即胶囊);靠底色深浅与正文区分 */
  border-radius: 20px;
  padding: 10px 16px;
  max-width: 100%;
  word-break: break-word;
  text-autospace: normal;
  font-size: 16px; line-height: 1.6;
  border: 0;
  transition: all var(--transit-normal);
  min-width: 0;
}
.msg-user:hover .msg-user-bubble {
  border-color: var(--user-message-border);
  background: var(--user-message-bg);
}

/* P602:用户消息里的内联资料卡片(marker 还原)。只显示资料名,隐藏 workspace:// 技术串。
   颜色派生自气泡文字色,深浅主题都自动对比;贴着文字基线对齐不突兀。 */
.msg-res-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin: 0 2px;
  padding: 1px 8px 1px 6px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--user-message-text) 30%, transparent);
  background: color-mix(in srgb, var(--user-message-text) 12%, transparent);
  color: var(--user-message-text);
  font-size: 0.86em;
  line-height: 1.5;
}
.msg-res-chip-ic {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.75;
}
.msg-res-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.msg-ai {
  margin-bottom: 56px; display: flex; flex-direction: column; align-items: flex-start;
  animation: fadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

/* ── AI 回复抬头 / 等待 / 活动行 / 能力入口:T164 起统一在 34-natural-turn.css ── */

/* AI Markdown — P186 节奏二轮（XHTML 协作 delivery 整合）
   字体用系统字体栈（英文数字 SF、中文苹方、代码 SF Mono），不加载网页字体
   颜色契约：正文走 --text-body（暗一级），加粗与标题走 --text-bright；中英文/数字间由浏览器自动留细空（text-autospace），
   金色仅保留给装饰元素（h2::before 小竖条、列表分隔条、link 强调）— 金色不作为文字色 */
.msg-ai-content {
  font-size: 16px; line-height: 1.8; letter-spacing: 0.015em;
  color: var(--text-body);
  text-autospace: normal;
  overflow-wrap: break-word; word-break: break-word;
  width: 100%; max-width: 800px;
  min-width: 0;
}
.msg-ai-content > :first-child { margin-top: 0; }
.msg-ai-content > :last-child { margin-bottom: 0; }
/* 一次开口一段(.msg-ai-utterance,结构不看外观):普通对话页不占版面,聊天窗口外观才显示成气泡(46-messenger.css) */
body:not(.messenger-chat) .msg-ai-utterance { display: contents; }
.msg-ai-content > .msg-ai-utterance:first-child > :first-child { margin-top: 0; }
.msg-ai-content > .msg-ai-utterance:last-child > :last-child { margin-bottom: 0; }

/* 按回合打开(站内链接/提醒/侧栏搜索/聊天记录)的落点短暂标亮(scroll-stability.js jumpToRound) */
@keyframes round-jump-fade {
  0% { background-color: rgba(255, 213, 79, 0.45); }
  100% { background-color: transparent; }
}
.round-jump-highlight {
  animation: round-jump-fade 2s ease-out;
  border-radius: 8px;
}

/* 标题：沉稳层次 + 充足呼吸 */
.msg-ai-content h1,
.msg-ai-content h2,
.msg-ai-content h3 {
  font-weight: 700; line-height: 1.3; letter-spacing: -0.02em;
  margin: 48px 0 24px 0;
}
.msg-ai-content h1 {
  font-size: 32px; color: var(--text-bright);
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 16px;
}
.msg-ai-content h2 {
  font-size: 24px; color: var(--text-bright);
  display: flex; align-items: center;
}
.msg-ai-content h2::before {
  content: ""; flex-shrink: 0;
  width: 4px; height: 24px;
  background: var(--brand-primary);
  margin-right: 12px; border-radius: 2px;
}
.msg-ai-content h3 {
  /* P428:h3 改用 --text-bright 与 h1/h2 一致,不再用金色文字 */
  font-size: 18px; color: var(--text-bright);
}
/* 手机:标题与正文比例收紧(大标题不像海报),上下留白相应减少 */
@media (max-width: 640px) {
  .msg-ai-content h1, .msg-ai-content h2, .msg-ai-content h3 { margin: 36px 0 18px; }
  .msg-ai-content h1 { font-size: 24px; }
  .msg-ai-content h2 { font-size: 20px; }
  .msg-ai-content h2::before { height: 20px; }
  .msg-ai-content h3 { font-size: 17px; }
}

.msg-ai-content p { margin-bottom: 24px; font-weight: 400; }

.msg-ai-content strong {
  color: var(--text-bright); font-weight: 600;
}
.msg-ai-content em { color: var(--text-bright); font-style: italic; }

/* 列表：去规整化（marker 走中性，避免金色泛滥） */
.msg-ai-content ul,
.msg-ai-content ol {
  margin: 24px 0; padding-left: 0; list-style: none;
}
.msg-ai-content li {
  position: relative; padding-left: 28px;
  margin-bottom: 12px; color: var(--text-body);
}
.msg-ai-content ul > li::before {
  content: ""; position: absolute;
  left: 10px; top: 15px;
  width: 4px; height: 4px;
  background: var(--text-muted); border-radius: 50%;
}
.msg-ai-content ol { counter-reset: msg-ai-counter; }
.msg-ai-content ol > li { counter-increment: msg-ai-counter; }
.msg-ai-content ol > li::before {
  content: counter(msg-ai-counter) ".";
  position: absolute; left: 0; top: 0;
  font-size: 14px; font-weight: 600;
  color: var(--text-muted);
  min-width: 20px;
}

/* 引用块：中性 */
.msg-ai-content blockquote {
  margin: 32px 0; padding: 16px 24px;
  background: var(--bg-subtle);
  border-left: 2px solid var(--text-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted); font-style: italic;
}

.msg-ai-content hr {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-glass), transparent);
  margin: 48px 0;
}

/* 表格：通透排版 */
.msg-ai-content table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 32px 0;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 14px;
}
.msg-ai-content th {
  background: var(--bg-layer-1); color: var(--text-bright);
  font-weight: 600; text-align: left; padding: 16px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.msg-ai-content td {
  padding: 16px; border-top: 1px solid var(--border-glass);
  color: var(--text-muted);
}
.msg-ai-content tr:hover td {
  background: var(--bg-subtle); color: var(--text-main);
}

/* 代码块：深邃极客质感 */
.msg-ai-content pre {
  position: relative;
  background: var(--bg-deep); padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  margin: 32px 0; overflow-x: auto;
}
.msg-ai-content pre::before {
  content: ""; position: absolute;
  top: 12px; right: 16px;
  width: 40px; height: 4px;
  background: var(--brand-bg);
  border-radius: 2px;
}
.msg-ai-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.msg-ai-content :not(pre) > code {
  background: var(--bg-code); color: var(--text-code);
  padding: 2px 6px; border-radius: 4px;
}
.msg-ai-content pre code {
  background: none; padding: 0;
  color: var(--text-code); font-size: 14px;
}

/* 链接：极细下划线动画 */
.msg-ai-content a {
  position: relative;
  color: var(--brand-primary); text-decoration: none;
  padding-bottom: 2px;
}
.msg-ai-content a::after {
  content: ""; position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brand-primary);
  transform: scaleX(0.3); transform-origin: left;
  opacity: 0.5;
  transition: transform var(--transit-normal), opacity var(--transit-normal);
}
.msg-ai-content a:hover::after { transform: scaleX(1); opacity: 1; }

/* 图片：高级悬浮 */
.msg-ai-content img {
  display: block; max-width: 100%; height: auto;
  margin: 32px 0; cursor: pointer;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: transform var(--transit-normal), box-shadow var(--transit-normal);
}
.msg-ai-content img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-ambient);
}

/* markdown 内嵌图片（marked 渲染 ![](url) 时挂上）：按原比例完整显示，不加框底色；
   AI 写的图片说明作图注。收口容器宽，禁止撑屏 */
.chat-image { display: block; width: min(100%, 720px); margin-top: 20px; }
.msg-ai-content .chat-image .chat-inline-image {
  display: block; width: 100%; height: auto; margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  background: var(--bg-layer-1);
}
.msg-ai-content .chat-image .chat-inline-image:hover { transform: none; box-shadow: none; }
.chat-image-caption {
  display: block; margin-top: 8px;
  font-size: 13px; line-height: 1.5; letter-spacing: 0.01em;
  color: var(--text-muted);
}



/* === Section 7 工具状态 (原 L1248-L1539) === */

/* ========================================
   7. 工具状态:T164 起回合活动行与过程记录见 34-natural-turn.css
   ======================================== */

/* 响应状态提示 — 心跳分级反馈 */
.response-status-hint {
  text-align: center; padding: 8px 16px; margin: 8px 0;
  font-size: 13px; color: var(--text-dim);
  animation: fadeIn 0.3s ease-out both;
}

/* ── P433 AI 回复 footer:常显在 .msg-ai 底部(模型名 + 复制按钮)── */
/* 替代旧的 hover 浮条(.msg-ai .msg-hover-actions),扁平不带阴影,走 --text-muted token */
.msg-ai-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
}
.msg-ai-model {
  letter-spacing: 0.02em;
}
/* P673 回复用时:紧跟模型名,细圆点分隔,同色同字号;等宽数字防跳动 */
.msg-ai-duration {
  margin-left: -4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.msg-ai-duration::before {
  content: '·';
  margin-right: 6px;
}
.msg-ai-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: none; background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.msg-ai-copy:hover { background: var(--bg-surface-hover); color: var(--text-bright); }
.msg-ai-copy svg { width: 13px; height: 13px; }
/* 经由署名沿用补充状态小字，站内链接回到来源对话。 */
.msg-user .relay-mark { display: inline-flex; align-items: center; gap: 5px; margin-bottom: -3px; text-decoration: none; }
.msg-user .relay-mark svg { width: 14px; height: 14px; }
/* 转达方有形象时署名是它的眯眼脸（一点一划，静止），线条图标太小看不出，放大一档 */
.msg-user .relay-mark .agent-face { width: 18px; height: 18px; }
.msg-user .relay-mark .agent-face svg { width: 100%; height: 100%; }