/*
 * Phase 2 stage-bubble — single-bubble-per-stage 模型
 * 每个 Phase 2 stage 在 chatHistory 里以 _isStageBubble:true 的消息存在，
 * .design-p2-stage-bubble 是它在气泡内挂载的根容器，按 stageStatus 状态切换内部布局。
 * 所有颜色走 design tokens；颜色装饰若用到非 token 端点（white/black/原始 hex）应避免。
 */

/* fallback：未被 _renderEditorialFrame 包的纯 stage bubble（极少见，理论上 renderer 总会调 chrome） */
.design-p2-stage-bubble:not(.dcv-workshop-frame) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--design-p1-radius, 14px);
  box-shadow: 0 1px 2px var(--overlay-5);
}

/* 状态描边色：套了 chrome 时由 .dcv-workshop-frame 接管 border，但描边 hue 仍随状态变 */
.design-p2-stage-bubble[data-stage-status="streaming"],
.design-p2-stage-bubble[data-stage-status="inspecting"] {
  border-color: color-mix(in srgb, var(--metro-orange) 32%, var(--border-soft));
}

.design-p2-stage-bubble[data-stage-status="aborted"],
.design-p2-stage-bubble[data-stage-status="failed"],
.design-p2-stage-bubble[data-stage-status="validation_failed"] {
  border-color: color-mix(in srgb, var(--status-danger) 35%, var(--border-soft));
}

.design-p2-stage-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.design-p2-stage-title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.design-p2-stage-title-stage {
  color: var(--text-secondary);
  font-weight: var(--weight-normal);
}

.design-p2-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2px;
  background: var(--overlay-10);
  color: var(--text-secondary);
  border: 1px solid transparent;
  white-space: nowrap;
}

.design-p2-stage-chip.is-info {
  background: color-mix(in srgb, var(--metro-orange) 14%, transparent);
  color: var(--metro-orange);
  border-color: color-mix(in srgb, var(--metro-orange) 30%, transparent);
}

.design-p2-stage-chip.is-success {
  background: color-mix(in srgb, var(--status-success) 14%, transparent);
  color: var(--status-success);
  border-color: color-mix(in srgb, var(--status-success) 30%, transparent);
}

.design-p2-stage-chip.is-warn {
  background: color-mix(in srgb, var(--status-warning) 16%, transparent);
  color: var(--status-warning);
  border-color: color-mix(in srgb, var(--status-warning) 32%, transparent);
}

.design-p2-stage-chip.is-error,
.design-p2-stage-chip.is-abort {
  background: color-mix(in srgb, var(--status-danger) 14%, transparent);
  color: var(--status-danger);
  border-color: color-mix(in srgb, var(--status-danger) 32%, transparent);
}

.design-p2-stage-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.design-p2-stage-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.design-p2-stage-progress-row .design-thinking-indicator {
  display: inline-flex;
}

.design-p2-stage-progress-row .design-auto-progress {
  margin-top: 0;
}

.design-p2-stage-summary {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.design-p2-stage-summary p:first-child {
  margin-top: 0;
}

.design-p2-stage-summary p:last-child {
  margin-bottom: 0;
}

.design-p2-stage-review-hint {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  padding: 6px 10px;
  background: var(--overlay-5);
  border-left: 3px solid color-mix(in srgb, var(--metro-orange) 50%, transparent);
  border-radius: var(--radius-2xs);
}

.design-p2-stage-raw-output,
.design-p2-stage-findings {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xs);
  background: var(--overlay-5);
  font-size: var(--text-body-sm);
}

.design-p2-stage-raw-output > summary,
.design-p2-stage-findings > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  user-select: none;
}

.design-p2-stage-raw-output > summary::-webkit-details-marker,
.design-p2-stage-findings > summary::-webkit-details-marker {
  display: none;
}

.design-p2-stage-raw-output > summary::before,
.design-p2-stage-findings > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s ease;
}

.design-p2-stage-raw-output[open] > summary::before,
.design-p2-stage-findings[open] > summary::before {
  content: "▾";
}

.design-p2-stage-raw-output pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--surface-code);
  color: var(--code-text);
}

.design-p2-stage-findings-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.design-p2-stage-error-banner {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--status-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-danger) 28%, transparent);
  border-radius: var(--radius-2xs);
  color: var(--text-primary);
  font-size: var(--text-body-sm);
  line-height: 1.55;
}

.design-p2-stage-error-banner-title {
  font-weight: var(--weight-semibold);
  color: var(--status-danger);
  margin-bottom: 4px;
}

.design-p2-stage-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.design-p2-stage-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* is-disabled：旧 stage 不可编辑（推进后 P2 锁、phase=p3 后全部锁）。
   注意：只锁 .character-review-body 的内部交互（卡片编辑/重抽/删除/添加），
   .character-review-summary 仍然可点击让 panel 折叠/展开——用户应仍能回看历史 stage 内容。 */
.design-p2-stage-bubble.is-disabled .character-review-body,
.design-p2-stage-bubble.is-disabled .design-p2-stage-actions {
  pointer-events: none;
  opacity: 0.62;
}

.design-p2-stage-bubble.is-disabled {
  background: var(--overlay-5);
}

/* 中断/失败/校验未过 footer 行专用：左对齐 hint + 右侧按钮 */
.design-p2-stage-actions--with-hint {
  justify-content: space-between;
  align-items: center;
}

.design-p2-stage-actions-hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .design-p2-stage-bubble:not(.dcv-workshop-frame) {
    padding: 12px;
    gap: 10px;
  }

  .design-p2-stage-title {
    font-size: var(--text-body-sm);
  }

  .design-p2-stage-summary {
    font-size: var(--text-body-sm);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Phase 2 editorial chrome (套 _renderEditorialFrame 的 .dcv-workshop-frame)
 * 把 chip 挤进 eyebrow 同行、body slot 留呼吸、状态边色透传给 chrome 外框。
 * ──────────────────────────────────────────────────────────────────────── */

/* chrome 在 P2 模式下：使用 .dcv-workshop-frame 自带的 background/border/border-radius，
   不让 .design-p2-stage-bubble 老的 padding/box-shadow 干扰 */
.design-p2-stage-bubble.dcv-workshop-frame {
  padding: 0;
  box-shadow: none;
  background: var(--surface-canvas);
}

/* 注：原有 :has(.design-p2-stage-bubble) 的 chat-message 兜底已删除——
   renderPhase2StageBubble 现在给 msgEl 加 .dcv-editorial-msg 类，app.css:7250 的
   .chat-message.ai-message.dcv-editorial-msg 规则已经把 background/border/padding/chat-user-label 都处理好了。 */

/* eyebrow：用 3-column grid 让标题文字真正居中，chip 自然贴右；
   只在 P2 气泡范围内生效，不影响 P1 confirm 那种"只一个文字"的 eyebrow。 */
.design-p2-stage-bubble .dcv-eyebrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.design-p2-stage-bubble .dcv-eyebrow .dcv-eyebrow-text {
  grid-column: 2;
  text-align: center;
}

/* chip 占第 3 列贴右边；要重置 eyebrow 的 0.3em uppercase letter-spacing，
   不然 emoji 跟数字之间会拉散 */
.design-p2-stage-bubble .dcv-eyebrow .design-p2-stage-chip {
  grid-column: 3;
  justify-self: end;
  letter-spacing: normal;
  text-transform: none;
}

/* 手机模式下隐 chip：屏幕窄、eyebrow 行太挤；状态信息走「中断/失败/校验未过」状态边色 + 校验 dashed 框表达，
   不再需要这行占位（grid column 3 仍存在，title 居中不受影响）。 */
@media (max-width: 768px) {
  .design-p2-stage-bubble .dcv-eyebrow .design-p2-stage-chip {
    display: none;
  }
  /* 审阅 panel summary 里的 "· Stage X / 4" 子标题也在手机端隐起，留出空间给主标题 + 计数 */
  .character-review-summary-subtitle {
    display: none;
  }
}

/* body slot：跟 ask 之间留少量呼吸（ask 自带 margin-bottom: 14px，slot 顶部不再加），
   内部成员紧凑间距。step-section 自带 28px 底 padding，slot 底部不再加 */
.design-p2-stage-bubble [data-role="p2-stage-body-slot"] {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* P2 模式下 chrome 的 ask 段下边距收紧（P1 仍 14px 不变） */
.design-p2-stage-bubble .dcv-ask {
  margin-bottom: 8px;
}

/* P2 模式下 step-section 上 padding 略收（P1 是 40px）使大标题不那么孤悬 */
.design-p2-stage-bubble .dcv-step-section {
  padding-top: 28px;
  padding-bottom: 20px;
}

/* summary 段内段落 margin 收紧（formatMessageContent 输出的 <p> 默认 1em 上下，会拉散） */
.design-p2-stage-bubble .design-p2-stage-summary p {
  margin: 0 0 6px;
}
.design-p2-stage-bubble .design-p2-stage-summary p:last-child {
  margin-bottom: 0;
}
.design-p2-stage-bubble .design-p2-stage-summary ul,
.design-p2-stage-bubble .design-p2-stage-summary ol {
  margin: 4px 0;
  padding-left: 1.4em;
}

/* 校验提示框：warn 黄色虚线 / fatal 红色虚线；色彩走 status token */
.design-p2-stage-validation {
  padding: 8px 12px;
  border-radius: var(--radius-2xs);
  border: 1px dashed transparent;
  background: var(--overlay-5);
  font-size: var(--text-body-sm);
  line-height: 1.55;
}

.design-p2-stage-validation.is-warn {
  border-color: color-mix(in srgb, var(--status-warning) 55%, transparent);
  background: color-mix(in srgb, var(--status-warning) 8%, transparent);
}

.design-p2-stage-validation.is-fatal {
  border-color: color-mix(in srgb, var(--status-danger) 55%, transparent);
  background: color-mix(in srgb, var(--status-danger) 8%, transparent);
}

.design-p2-stage-validation-head {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.design-p2-stage-validation.is-warn .design-p2-stage-validation-head {
  color: color-mix(in srgb, var(--status-warning) 80%, var(--text-primary));
}

.design-p2-stage-validation.is-fatal .design-p2-stage-validation-head {
  color: var(--status-danger);
}

.design-p2-stage-validation-list {
  margin: 4px 0 0;
  padding-left: 1.3em;
  color: var(--text-secondary);
}

.design-p2-stage-validation-list li {
  margin: 2px 0;
}

.design-p2-stage-validation-list .design-p2-stage-validation-more {
  list-style: none;
  margin-left: -1.3em;
  color: var(--text-muted);
  font-size: var(--text-caption);
  margin-top: 4px;
}

/* is-disabled 治理：套 chrome 模式下，is-disabled 应该作用于 chrome 内部所有交互区。
   .character-review-panel / .design-p2-stage-actions 已在前面规则里 disable；
   chrome 自身（顶/底栏）仍保持可见，但整体降亮表示「这一页已锁」 */
.design-p2-stage-bubble.dcv-workshop-frame.is-disabled {
  background: color-mix(in srgb, var(--surface-canvas) 92%, var(--overlay-5));
}

.design-p2-stage-bubble.dcv-workshop-frame.is-disabled .dcv-headline {
  opacity: 0.85;
}