/* Reuse the shared palette, typography, buttons and tags. */
.history-main { padding-block: var(--space-8) var(--space-4); }
.history-nav-link { margin-left: auto; }
.history-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); margin-bottom: var(--space-6); }
.history-heading h1 { font-size: 1.75rem; margin-bottom: var(--space-2); }
.history-heading p { font-size: .875rem; }
.history-heading .button { flex-shrink: 0; }
.history-notice { background: var(--accent-soft); color: var(--primary-active); padding: var(--space-4); border-radius: var(--radius-control); font-size: .875rem; line-height: 1.8; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-6) var(--space-4); }
.history-toolbar > p { font-size: .875rem; color: var(--muted); }
.history-mode { display: flex; align-items: center; gap: var(--space-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.history-mode legend { float: left; padding: 0; margin-right: var(--space-3); font-size: .8125rem; color: var(--muted); line-height: 44px; }
.history-mode > div { display: flex; gap: var(--space-2); }
.history-mode label { position: relative; cursor: pointer; font-weight: 400; }
.history-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.history-mode span { min-height: 44px; padding: 8px 12px; display: flex; align-items: center; border: 1px solid var(--control-border); border-radius: var(--radius-control); color: var(--body); font-size: .875rem; }
.history-mode input:checked + span { color: var(--primary-active); background: var(--accent-soft); border-color: var(--primary); }
.history-mode input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }
.history-mode:disabled { opacity: .6; }
.history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.history-list > li { min-width: 0; }
.history-record { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-6); overflow-wrap: anywhere; }
.history-record-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); color: var(--muted); font-size: .8125rem; }
.history-record-meta time { font-variant-numeric: tabular-nums; }
.history-record-meta > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.history-summary { font-size: 1rem; font-weight: 500; line-height: 1.9; color: var(--ink); max-width: 52em; }
.history-record-actions { position: relative; margin-top: var(--space-4); }
.history-details summary { min-height: 44px; width: fit-content; max-width: calc(100% - 120px); display: flex; align-items: center; gap: var(--space-3); color: var(--primary); font-size: .875rem; list-style: none; }
.history-details summary::-webkit-details-marker { display: none; }
.history-details .chevron { margin-right: 3px; }
.history-close-label { display: none; }
.history-details[open] .history-open-label { display: none; }
.history-details[open] .history-close-label { display: inline; }
.history-details[open] .chevron { transform: rotate(225deg); margin-top: 4px; }
.history-regenerate { position: absolute; top: 0; right: 0; font-size: .875rem; }
.history-detail-content { border-top: 1px solid var(--border); padding-top: var(--space-6); margin-top: var(--space-4); min-width: 0; }
.history-detail-content h3 { font-size: .875rem; font-weight: 600; }
.history-original { white-space: pre-wrap; margin-block: var(--space-2) var(--space-6); font-size: .875rem; line-height: 1.9; }
.history-detail-count { color: var(--muted); font-weight: 400; }
.history-titles { padding-left: 2em; margin: var(--space-3) 0 0; }
.history-titles li { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); line-height: 1.8; font-size: 1rem; }
.history-titles li:last-child { border-bottom: 0; }
.history-titles li::marker { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.history-empty { padding: var(--space-16) var(--space-6); min-height: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); text-align: center; }
.history-empty svg { color: var(--primary); margin-inline: auto; margin-bottom: var(--space-6); }
.history-empty h2 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.history-empty p { font-size: .875rem; margin-bottom: var(--space-6); }
.history-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-6); color: var(--muted); font-size: .8125rem; }
.history-footer a { font-size: .8125rem; }
@media (max-width: 767px) {
  .history-main { padding-top: var(--space-6); }
  .history-heading { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .history-heading h1 { font-size: 1.5rem; }
  .history-heading p { line-height: 1.8; }
  .history-nav-link { font-size: .8125rem; }
  .history-notice { font-size: .8125rem; }
  .history-toolbar { align-items: flex-start; gap: var(--space-2); }
  .history-toolbar > p { width: 100%; }
  .history-record { padding: var(--space-4); }
  .history-detail-content { padding-top: var(--space-4); }
  .history-empty { min-height: 320px; padding: var(--space-12) var(--space-4); }
}