/**
 * input: tokens.css；对话流富内容 DOM
 * output: rich-card / metric / tag / roadmap / CTA 样式（跟随主题）
 * pos: 首页对话区卡片视觉层
 * 一旦我被更新，务必更新我的开头注释，以及所属的文件夹的 md。
 */

/* 对话流富内容卡片 */
.rich-card {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: var(--hp-radius);
  background: var(--hp-glass-strong);
  border: 1px solid var(--hp-stroke);
  -webkit-backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-saturate));
  backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-saturate));
  box-shadow: var(--hp-shadow);
  max-width: 100%;
}

.rich-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--hp-ink);
}

.rich-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 520px) {
  .rich-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.metric-item {
  padding: 10px;
  border-radius: 12px;
  background: var(--hp-card-surface);
  border: 1px solid var(--hp-stroke);
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--hp-card-accent);
  line-height: 1.2;
}

.metric-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--hp-ink-muted);
  line-height: 1.4;
}

.rich-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rich-tag {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--hp-card-surface-strong);
  border: 1px solid var(--hp-stroke);
  color: var(--hp-ink-dim);
}

.rich-project {
  display: grid;
  gap: 10px;
}

.rich-project h4 {
  font-size: 16px;
  color: var(--hp-ink);
  margin: 0;
}

.rich-project p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--hp-ink-dim);
  margin: 0;
}

.rich-project .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rich-project .pill {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--hp-card-accent-soft);
  color: var(--hp-card-accent);
}

.rich-roadmap {
  display: grid;
  gap: 10px;
}

.roadmap-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hp-card-surface);
  border-left: 3px solid var(--hp-ink-muted);
}

.roadmap-row.done { border-left-color: #5ecf8f; }
.roadmap-row.partial { border-left-color: #e8c468; }
.roadmap-row.planned { border-left-color: var(--hp-ink-muted); }

.roadmap-row strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--hp-ink);
}

.roadmap-row span {
  font-size: 13px;
  color: var(--hp-ink-dim);
  line-height: 1.5;
}

.chart-wrap {
  width: 100%;
  overflow: hidden;
}

.chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 220px;
}

.rich-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.rich-cta button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hp-stroke-strong);
  background: var(--hp-card-surface-strong);
  color: var(--hp-ink);
  font-size: 13px;
  cursor: pointer;
}

.rich-cta button:hover {
  background: var(--hp-glass-user);
}

/* 与 agent 共用中间列；须覆盖全局 align-self:flex-start，否则气泡贴左 */
.dialogue.user-side .dialogue_right {
  align-items: flex-end;
}

.dialogue.user-side .typing-container,
.dialogue.user-side .rich-card {
  align-self: flex-end;
  border-radius: var(--hp-radius);
  background: var(--hp-glass-user);
  border: 1px solid var(--hp-stroke);
  -webkit-backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-saturate));
  backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-saturate));
  box-shadow: var(--hp-shadow);
  max-width: 100%;
}

.dialogue.user-side .agent_name {
  display: none;
}

/* 挂在 #speak_dock 内，始终贴在输入条上方，随整组移动 */
.preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  justify-content: center;
  order: -1;
}

.preset-chip {
  padding: 6px 12px;
  border-radius: var(--hp-radius-pill);
  border: 1px solid var(--hp-stroke);
  background: var(--hp-glass);
  color: var(--hp-ink-dim);
  font-size: 12px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-saturate));
  backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-saturate));
}

.preset-chip:hover {
  border-color: var(--hp-stroke-strong);
  color: var(--hp-ink);
}