/* Task 56 · 记忆「渗透式展示」样式
   全部取值来自 tokens.css 的 CSS 变量（无硬编码色值）。
   三处使用场景：P1 对话流回执 / P2 回答顶部应用声明 / 审计事件行内回执。 */

/* ---------- P1 记忆回执（助手消息下方一行） ---------- */
.mem-receipt-wrap {
  margin: calc(var(--space-1) * -1) 0 var(--space-3) var(--space-6);
}

.mem-receipt {
  display: block;
  max-width: 640px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--mem-accent, var(--color-border-strong));
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-snug);
}

.mem-receipt.is-active { --mem-accent: var(--color-success); }
.mem-receipt.is-invalidated { --mem-accent: var(--color-neutral-400); }
.mem-receipt.is-rejected { --mem-accent: var(--color-danger); }
.mem-receipt.is-pending { --mem-accent: var(--color-warning); }

.mem-receipt > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
}
.mem-receipt > summary::-webkit-details-marker { display: none; }
.mem-receipt > summary:hover { background: var(--color-bg-surface); }
.mem-receipt > summary:focus-visible { outline: none; box-shadow: var(--shadow-focus-sm); }

.mem-ic { flex: 0 0 auto; font-size: var(--font-size-xs); }
.mem-title {
  flex: 0 0 auto;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.mem-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
}
.mem-caret {
  flex: 0 0 auto;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  transition: transform .15s ease;
}
.mem-receipt[open] > summary .mem-caret,
.mem-recall[open] > summary .mem-caret { transform: rotate(180deg); }

.mem-detail {
  padding: 0 var(--space-3) var(--space-2);
  border-top: 1px dashed var(--color-border);
}
.mem-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--font-size-xs);
}
.mem-row--related .mem-v { color: var(--color-text-tertiary); }
.mem-k {
  flex: 0 0 56px;
  color: var(--color-text-tertiary);
}
.mem-v {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-secondary);
  word-break: break-word;
}
.mem-row--verify { align-items: center; }
.mem-verify {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  padding: var(--space-0-5) var(--space-2-5);
  cursor: pointer;
}
.mem-verify:hover { border-color: var(--color-primary-400); color: var(--color-primary-600); }
.mem-verify:focus-visible { outline: none; box-shadow: var(--shadow-focus-sm); }
.mem-verify-out { margin-left: var(--space-2); color: var(--color-success-text); }

/* ---------- P2 本次回答应用了 N 条记忆 ---------- */
.mem-recall {
  margin: 0 0 var(--space-2);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  font-size: var(--font-size-sm);
}
.mem-recall > summary {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  cursor: pointer;
  list-style: none;
  color: var(--color-primary-700);
}
.mem-recall > summary::-webkit-details-marker { display: none; }
.mem-recall-k { font-weight: var(--weight-medium); }
.mem-recall-list {
  margin: 0;
  padding: 0 var(--space-3) var(--space-2) var(--space-6);
  list-style: none;
}
.mem-recall-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}
.mem-id {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  color: var(--color-text-tertiary);
  background: transparent;
}
.mem-type {
  flex: 0 0 auto;
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--font-size-2xs);
}
.mem-recall-content {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* ---------- 输入框上方记忆示例 chips（移动端横向单行滚动） ---------- */
.mem-chips {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mem-chip {
  flex: 0 0 auto;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}
.mem-chip:hover {
  border-style: solid;
  border-color: var(--color-primary-400);
  color: var(--color-primary-600);
}
.mem-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus-sm); }

/* ---------- 审计事件行内回执（复用同一渲染器） ---------- */
.mem-receipt-inline {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
}
.mem-receipt-inline .mem-receipt { max-width: 100%; }

@media (max-width: 900px) {
  .mem-receipt-wrap { margin-left: 0; }
  .mem-content { max-width: 46vw; }
  .mem-chips { padding-bottom: var(--space-0-5); }
}