/* ============================================================
   Phase 3 chat —— 消息/卡片直接渲染到 .chat-messages-area，跟 P1/P2 同流。
   独立 panel 已废，这里只保留 P3 自有的卡片/消息样式。
   ============================================================ */

/* P3 工具按钮（design-chat-header 内）：仅 phase=p3 时显示 */
.design-p3-tool {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: var(--text-body-sm);
  padding: 6px 10px;
}
.design-p3-tool .material-symbols-outlined {
  font-size: 16px;
}
body[data-design-phase="p3"] .design-p3-tool {
  display: inline-flex;
}

/* P3 用户消息（接 .chat-message.user-message 主样式，下面调 P3 专用细节） */
.p3-user-msg .chat-message-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-ui, sans-serif);
}

/* system / error 简单消息 —— 跟 .p3-assistant-card / P1·P2 frame 同收进 880 居中盒
   （margin:auto 把 880 上限的余量吃掉居中；.p3-msg-error 继承本基底，无需单独写）。 */
.p3-msg {
  margin: 8px auto;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  max-width: var(--design-p1-editorial-frame-max, 880px);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-body);
  line-height: 1.55;
}
.p3-msg-system {
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-caption);
  align-self: center;
  max-width: var(--design-p1-editorial-frame-max, 880px);
  text-align: center;
  padding: 6px 0;
}
.p3-msg-error {
  background: color-mix(in srgb, var(--status-danger) 15%, transparent);
  color: var(--status-danger);
  border: 1px solid color-mix(in srgb, var(--status-danger) 40%, transparent);
  align-self: stretch;
  font-size: var(--text-body-sm);
}

/* AI 卡片 */
.p3-assistant-card {
  /* 跟 P1/P2 的 editorial frame 统一：收进 880 居中盒，避免从 P2 切到 P3 时内容区"咣"地变宽。
     用同一个 --design-p1-editorial-frame-max 变量，三个 Phase 的内容宽度从此联动。
     align-self:stretch 被 max-width 限到 880 后，margin:auto 吃掉余量把卡片居中（同 P1/P2 用户气泡机制）。 */
  align-self: stretch;
  max-width: var(--design-p1-editorial-frame-max, 880px);
  margin-left: auto;
  margin-right: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 3px;
  padding: 0;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,0.04));
  overflow: hidden;
  white-space: normal;
}

.p3-meta-bar {
  padding: 6px 12px;
  font-family: monospace;
  font-size: var(--text-caption);
  color: var(--text-soft);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.p3-meta-streaming {
  color: var(--brand-primary);
  font-weight: 500;
}
.p3-meta-streaming::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  animation: p3Pulse 1s ease-in-out infinite;
}
.p3-meta-done { color: var(--status-success); }
.p3-meta-warn { color: var(--status-warning); font-weight: 600; }

@keyframes p3Pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.p3-card-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.p3-card-section:last-child { border-bottom: none; }

.p3-card-section summary {
  cursor: pointer;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--text-soft);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.p3-card-section summary::-webkit-details-marker { display: none; }
.p3-card-section summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.12s ease;
}
.p3-card-section details[open] > summary::before,
details.p3-card-section[open] > summary::before { transform: rotate(90deg); }

.p3-card-section .p3-section-body {
  margin-top: 8px;
  font-size: var(--text-body);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 推理段（默认折叠：决策 8）—— 展开后自然撑开，外层 chat-messages-area 统一滚动 */
.p3-reasoning-body > .p3-section-body {
  font-family: var(--font-serif, Georgia, serif);
  color: var(--text-soft);
  font-size: var(--text-body-sm);
  padding: 8px 12px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-strong);
}

/* prose（AI 正文）—— 自然撑开，由外层 chat-messages-area 滚动控制
   （集成进主聊天后不再需要内部 scroll；MVP 那是独立面板才限高） */
.p3-prose-body .p3-section-body {
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--text-body-lg);
  color: var(--text-main);
  margin-top: 0;
}

/* 工具调用段 */
.p3-tool-call-section { background: var(--surface-soft); }
.p3-tool-call-section summary {
  color: var(--brand-primary);
  font-family: monospace;
}
.p3-tool-call-section .p3-tool-args {
  margin-top: 8px;
  padding: 10px;
  background: var(--surface-code); /* code-surface-allow: tool args block 是代码 */
  color: var(--code-text);
  border-radius: var(--radius-sm);
}
.p3-tool-call-section .p3-tool-meta {
  font-family: monospace;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.p3-tool-args-pre {
  margin: 0;
  font-family: monospace;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--code-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.p3-tool-call-section.streaming summary::after {
  content: '⏳';
  margin-left: 6px;
  animation: p3Pulse 1s ease-in-out infinite;
}
.p3-tool-call-section.aborted { opacity: 0.6; }
.p3-tool-call-section.aborted summary::after {
  content: ' (中断)';
  color: var(--status-danger);
}

/* Diff section（patch 决断 UI） */
.p3-diff-section { background: var(--surface-soft); }
.p3-diff-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.p3-diff-summary-label { flex: 1; color: var(--text-main); }
.p3-diff-status-badge {
  font-size: var(--text-caption);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  margin-left: 8px;
}
.p3-diff-section.p3-diff-pending  .p3-diff-status-badge {
  background: color-mix(in srgb, var(--status-warning) 18%, transparent);
  color: var(--status-warning);
  border: 1px solid color-mix(in srgb, var(--status-warning) 40%, transparent);
}
.p3-diff-section.p3-diff-applied  .p3-diff-status-badge {
  background: color-mix(in srgb, var(--status-success) 18%, transparent);
  color: var(--status-success);
  border: 1px solid color-mix(in srgb, var(--status-success) 40%, transparent);
}
.p3-diff-section.p3-diff-rejected .p3-diff-status-badge,
.p3-diff-section.p3-diff-error    .p3-diff-status-badge {
  background: color-mix(in srgb, var(--status-danger) 15%, transparent);
  color: var(--status-danger);
  border: 1px solid color-mix(in srgb, var(--status-danger) 40%, transparent);
}
.p3-diff-section.p3-diff-ignored  .p3-diff-status-badge {
  background: var(--surface-soft);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}
.p3-diff-section.p3-diff-applied  { border-left: 3px solid color-mix(in srgb, var(--status-success) 50%, transparent); }
.p3-diff-section.p3-diff-rejected,
.p3-diff-section.p3-diff-error    { border-left: 3px solid color-mix(in srgb, var(--status-danger) 50%, transparent); }
/* pending 状态不带左边线——默认状态、每次新出 patch 都会看到，黄线视觉太重。
   状态信息已经在右上角 status badge 表达，左边线只在 applied/rejected 终态留色块。 */

/* Stale pending：用户发新消息后旧 pending 卡降权，但仍可点开 apply/reject。
   配合 details.open=false 自动收起，让用户专注最新一组。hover 时恢复醒目方便回头查阅。 */
.p3-diff-section.p3-diff-stale {
  opacity: 0.55;
  filter: saturate(0.7);
  transition: opacity 0.15s, filter 0.15s;
}
.p3-diff-section.p3-diff-stale:hover {
  opacity: 0.9;
  filter: saturate(1);
}

.p3-diff-section-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p3-diff-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.p3-diff-actions button {
  padding: 6px 16px;
  font-size: var(--text-body-sm);
}

/* 选择控件 */
.p3-op-select-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  color: var(--text-soft);
  flex-shrink: 0;
}
.p3-op-select-label { flex: 1; font-family: monospace; }
.p3-op-selected-count { font-weight: 600; color: var(--brand-primary); }
.p3-op-select-controls button { font-size: var(--text-caption); padding: 3px 8px; }

/* per-op */
.p3-diff-op-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 4px;
}
.p3-op-checkbox {
  cursor: pointer;
  accent-color: var(--brand-primary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.p3-op-checkbox:disabled { cursor: not-allowed; opacity: 0.5; }

.p3-diff-body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: var(--text-body-sm);
}
.p3-diff-op {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface-elevated);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-strong);
}
.p3-diff-op:last-child { margin-bottom: 0; }
.p3-diff-op-add { border-left-color: color-mix(in srgb, var(--status-success) 50%, transparent); }
.p3-diff-op-remove { border-left-color: color-mix(in srgb, var(--status-danger) 50%, transparent); }
.p3-diff-op-replace { border-left-color: color-mix(in srgb, var(--status-warning) 50%, transparent); }

/* 双行 header：第一行中文面包屑（op 动词 + 翻译路径），第二行 raw path/op 小灰 monospace */
.p3-diff-op-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-ui, sans-serif);
}
.p3-diff-op-header-zh {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
}
.p3-diff-op-header-raw {
  font-family: monospace;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.3;
  word-break: break-all;
}
.p3-diff-op-add .p3-diff-op-header-zh { color: var(--status-success); }
.p3-diff-op-remove .p3-diff-op-header-zh { color: var(--status-danger); }
.p3-diff-op-replace .p3-diff-op-header-zh { color: var(--status-warning); }

/* 旧 .p3-diff-path 已不在 DOM 中使用，但保留 selector 以防外部 / 测试引用。 */
.p3-diff-path {
  font-family: monospace;
  font-weight: 400;
  color: var(--text-soft);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.p3-diff-line {
  padding: 5px 8px;
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 4px;
}
.p3-diff-line-old {
  background: color-mix(in srgb, var(--status-danger) 15%, transparent);
  color: var(--status-danger);
}
.p3-diff-line-new {
  background: color-mix(in srgb, var(--status-success) 18%, transparent);
  color: var(--status-success);
}
.p3-diff-line-old::before { content: "−"; opacity: 0.6; margin-right: 8px; font-weight: 600; }
.p3-diff-line-new::before { content: "+"; opacity: 0.6; margin-right: 8px; font-weight: 600; }

.p3-diff-line-test-expected {
  background: var(--surface-soft);
  color: var(--text-soft);
}
.p3-diff-line-test-expected::before {
  content: "≟";
  opacity: 0.7;
  margin-right: 8px;
  font-weight: 600;
}

/* 长值折叠：超 3 行的 value 默认折叠到 3 行 + 「展开全部 N 行」按钮 */
.p3-diff-line-body {
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.p3-diff-line-collapsible.collapsed .p3-diff-line-body {
  max-height: 4.5em; /* line-height(1.5) × 3 行 */
  overflow: hidden;
  position: relative;
}
.p3-diff-line-collapsible.collapsed .p3-diff-line-body::after {
  /* 底部柔渐变，暗示「还有更多」——用 currentColor + 低 opacity 适配各 line kind 颜色 */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, currentColor);
  opacity: 0.08;
  pointer-events: none;
}
.p3-diff-line-toggle {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 0;
  font-size: var(--text-caption);
  font-family: inherit;
  color: var(--brand-primary);
  background: transparent;
  border: none;
  cursor: pointer;
}
.p3-diff-line-toggle:hover { text-decoration: underline; }

/* inline 通知 / 错误 */
.p3-inline-notice {
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
  border-left: 3px solid var(--brand-primary);
  font-size: var(--text-body-sm);
  padding: 10px 14px;
}
.p3-inline-error {
  background: color-mix(in srgb, var(--status-danger) 15%, transparent);
  color: var(--status-danger);
  border-left: 3px solid color-mix(in srgb, var(--status-danger) 50%, transparent);
  font-size: var(--text-body-sm);
  padding: 10px 14px;
}
.p3-inline-error-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.p3-inline-error-body {
  color: var(--text-main);
  white-space: pre-wrap;
  line-height: 1.55;
  margin-bottom: 6px;
}
.p3-inline-error-detail {
  margin-top: 6px;
  font-size: var(--text-caption);
}
.p3-inline-error-detail > summary {
  cursor: pointer;
  color: var(--text-soft);
  user-select: none;
}
.p3-inline-error-detail > pre {
  margin: 6px 0 0;
  padding: 6px 8px;
  background: var(--surface-code); /* code-surface-allow: technical-detail debug pre */
  color: var(--code-text);
  border-radius: var(--radius-xs);
  font-family: monospace;
  font-size: var(--text-caption);
  white-space: pre-wrap;
  word-break: break-word;
}

/* D 形态：embedded JSON patch notice */
.p3-embedded-patch-notice {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--text-main);
  border-left: 3px solid var(--status-warning);
  font-size: var(--text-body-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p3-embedded-patch-msg {
  line-height: 1.55;
}
.p3-embedded-patch-actions {
  display: flex;
  justify-content: flex-end;
}
.p3-embedded-patch-extract-btn {
  font-size: var(--text-body-sm);
  padding: 6px 14px;
}

/* 截断警告 */
.p3-truncation-warning {
  background: color-mix(in srgb, var(--status-warning) 15%, transparent);
  border-left: 3px solid var(--status-warning);
}
.p3-trunc-title {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--status-warning);
  margin-bottom: 4px;
}
.p3-trunc-detail {
  font-size: var(--text-body-sm);
  color: var(--text-soft);
  line-height: 1.5;
}

.p3-raw-args-dump { background: var(--surface-soft); }
.p3-raw-args-dump summary { color: var(--status-danger); }

/* 重新生成 footer——轻量贴边样式，左按钮 + 右提示文字 */
.p3-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 14px 8px;
  background: transparent;
}
.p3-card-footer button {
  font-size: var(--text-caption);
  padding: 4px 10px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.p3-card-footer button:hover { opacity: 1; }
.p3-card-footer-hint {
  font-size: var(--text-caption);
  color: var(--text-soft);
}
.p3-assistant-card-regenerated {
  opacity: 0.6;
  filter: grayscale(0.3);
}
.p3-regenerated-note {
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  font-style: italic;
  background: var(--surface-soft);
}

/* 流式 / abort 状态指示 */
.p3-assistant-card-streaming {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 25%, transparent), var(--shadow-soft, 0 1px 2px rgba(0,0,0,0.04));
}
.p3-assistant-card-streaming .p3-meta-bar {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
}
.p3-assistant-card-aborted {
  border-color: color-mix(in srgb, var(--status-danger) 50%, transparent);
  opacity: 0.85;
}
.p3-assistant-card-aborted .p3-meta-bar {
  background: color-mix(in srgb, var(--status-danger) 15%, transparent);
}

/* V1 锁定页 */
.p3-locked-banner {
  margin: 16px auto;
  max-width: 480px;
  text-align: center;
  padding: 32px 24px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.p3-locked-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.p3-locked-title {
  font-size: var(--text-title);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-main);
}
.p3-locked-desc {
  font-size: var(--text-body);
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 20px;
}
.p3-locked-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 窄屏 */
@media (max-width: 900px) {
  .p3-msg { max-width: 100%; }
}