/* AI 修改建議卡片與「AI 待確認」標記。只用 paper.css 的 token。 */

.ai-pending-block {
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.ai-card {
  margin: var(--s-3) 0;
  padding: var(--s-4);
  background: var(--card);
  background-image: var(--tex-fiber);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  box-shadow: var(--shadow-paper);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-card[data-status='applied'],
.ai-card[data-status='partial'] {
  border-left-color: var(--accent-line);
}

.ai-card[data-status='declined'],
.ai-card[data-status='undone'] {
  border-left-color: var(--line-strong);
  color: var(--ink-2);
}

.ai-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-bottom: var(--s-3);
}

.ai-card-title {
  margin: 0;
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  font-weight: 700;
}

.ai-card-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.ai-card-problem {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--accent-text);
  background: var(--paper-2, transparent);
  font-size: var(--fs-sm);
  color: var(--accent-text);
}

.ai-group + .ai-group {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.ai-group-title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.ai-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.ai-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-width: 0;
}

.ai-item[data-state='skipped'],
.ai-item[data-state='undone'],
.ai-item[data-state='invalid'] {
  color: var(--ink-2);
}

.ai-item-main {
  flex: 1 1 220px;
  min-width: 0;
}

.ai-item-label {
  margin: 0 0 var(--s-1);
  font-weight: 700;
  font-size: var(--fs-body-sm);
}

.ai-change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  font-size: var(--fs-body-sm);
}

.ai-before {
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
  overflow-wrap: anywhere;
}

.ai-arrow {
  color: var(--ink-2);
}

.ai-after {
  overflow-wrap: anywhere;
}

.ai-tag-add,
.ai-tag-del {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--s-2);
  border: 1px solid currentColor;
  border-radius: var(--r);
  font-size: var(--fs-xs);
}

.ai-tag-add {
  color: var(--pending-ink);
}

.ai-tag-del {
  color: var(--accent-text);
}

.ai-replace-note {
  margin: 0;
  font-size: var(--fs-body-sm);
  white-space: pre-wrap;
}

.ai-detail {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
}

.ai-detail summary {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent-text);
}

.ai-detail-list {
  margin: 0;
  padding-left: var(--s-4);
  white-space: pre-wrap;
}

.ai-warn,
.ai-reason,
.ai-state {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-sm);
}

.ai-warn {
  color: var(--pending-ink);
}

.ai-reason {
  color: var(--accent-text);
}

.ai-state {
  color: var(--ink-2);
}

.ai-pick {
  min-height: var(--tap);
  min-width: var(--tap);
}

.ai-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.ai-card-actions .btn {
  min-height: var(--tap);
}

.ai-card-status {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.ai-card-error {
  margin: var(--s-2) 0 0;
}

/* 「AI 待確認」標記：小標籤，放在欄位或列的前面 */
.ai-tag {
  display: inline-flex;
  align-items: center;
  margin-right: var(--s-2);
  padding: 0 var(--s-2);
  min-height: 20px;
  border: 1px solid var(--pending-line);
  border-radius: 999px;
  background: var(--remind-tint);
  color: var(--pending-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  justify-self: start;
}

/* 標記放在格線或區塊宿主內時固定在右上角，不佔用格線欄位（流程表編輯器的列：時間軸列、表格列、分類列、照片區域） */
[data-ai-path]:is(.rd-row, .rd-trow, .rd-cat-row, .decor-card, .rd-sec, .log-entry, [data-todo-row], [data-quote-row]) {
  position: relative;
}

[data-ai-path]:is(.rd-row, .rd-trow, .rd-cat-row, .decor-card, .rd-sec, .log-entry, [data-todo-row], [data-quote-row]) > .ai-tag {
  position: absolute;
  top: var(--s-1);
  right: var(--s-2);
  margin: 0;
  pointer-events: none; /* 蓋在列右上角的操作鈕上時，鈕仍然點得到 */
}