/* Keep story artwork in full color within the existing 2:3 sidebar slots. */
.history-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
.history-all[aria-current="page"] { color: #fff; }
.history-page-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.history-page-heading h1 { margin: 0; color: var(--text); font-size: 26px; line-height: 1.3; font-weight: 650; letter-spacing: -.6px; }
.history-page-heading p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.all-sessions { margin: 0; padding: 0; list-style: none; }
.all-sessions > li { display: flex; align-items: center; gap: 8px; min-width: 0; border-bottom: 1px solid rgb(255 255 255 / 6%); }
.history-record { display: grid; flex: 1 1 auto; min-width: 0; grid-template-columns: 48px minmax(0, 1fr) auto 18px; align-items: center; gap: 20px; width: 100%; padding: 18px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; }
.history-record:hover, .history-record:focus-visible { background: rgb(255 255 255 / 4%); }
.history-record-cover { width: 48px; height: 72px; aspect-ratio: 2 / 3; border-radius: 6px; object-fit: cover; background: rgb(255 255 255 / 6%); }
.history-record-copy { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.history-record-title, .history-record-preview { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.history-record-title { font-size: 15px; line-height: 22px; font-weight: 650; }
.history-record-preview { color: var(--text-secondary); font-size: 13px; line-height: 20px; }
.history-record-time { color: var(--text-muted); font-size: 11px; line-height: 18px; white-space: nowrap; }
.history-record-arrow { width: 18px; height: 18px; opacity: .45; }
.history-record:hover .history-record-arrow { opacity: 1; }
.history-page-empty { margin: 80px 0; color: var(--text-secondary); font-size: 14px; line-height: 1.7; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .history-record, .history-record-arrow { transition: background-color 180ms ease, opacity 180ms ease; }
}
@media (max-width: 900px) {
  .history-record { grid-template-columns: 40px minmax(0, 1fr) 16px; column-gap: 14px; row-gap: 4px; padding: 16px 0; }
  .history-record-cover { grid-row: 1 / 3; width: 40px; height: 60px; }
  .history-record-copy { grid-column: 2; gap: 3px; }
  .history-record-time { grid-column: 2; grid-row: 2; }
  .history-record-arrow { grid-column: 3; grid-row: 1 / 3; width: 16px; height: 16px; }
}
@media (max-width: 600px) {
  html:has(#history-view:not([hidden])) { min-width: 0; }
  .history-page-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .history-page-heading h1 { font-size: 23px; }
  .history-record-title { font-size: 13px; line-height: 20px; }
  .history-record-preview { font-size: 12px; line-height: 18px; }
  .history-record-time { font-size: 10px; }
}

/* Destructive actions stay separate from the button that opens a session. */
.history-delete-button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; margin-right: 8px; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.history-delete-button img { opacity: .45; }
.history-delete-button:hover { background: rgb(240 177 177 / 10%); }
.history-delete-button:hover img, .history-delete-button:focus-visible img { opacity: 1; }
.history-page-status { margin: 18px 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.history-delete-dialog { position: fixed; width: 440px; max-width: calc(100vw - 48px); padding: 28px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 20px; background: #1c1a20; color: var(--text); box-shadow: 0 30px 100px rgb(0 0 0 / 45%); }
.history-delete-dialog::backdrop { background: rgb(6 5 9 / 78%); backdrop-filter: blur(8px); }
.history-delete-dialog h2 { margin: 0 0 16px; font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
.history-delete-dialog p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.history-delete-dialog strong { color: var(--text); font-weight: 600; }
.history-delete-dialog .history-delete-help { margin-top: 10px; font-size: 12px; }
.history-delete-dialog .history-delete-error { margin-top: 16px; color: #f1a5ac; font-size: 13px; }
.history-delete-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.history-delete-actions button { min-width: 88px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 8%); color: var(--text); font-size: 13px; font-weight: 650; }
.history-delete-actions button:hover { background: rgb(255 255 255 / 14%); }
.history-delete-actions .history-delete-confirm { background: #f0b1b1; color: #2d191c; }
.history-delete-actions .history-delete-confirm:hover { background: #f8c3c3; }
.history-delete-actions button:disabled { cursor: wait; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .history-delete-button, .history-delete-button img, .history-delete-actions button { transition: background-color 180ms ease, opacity 180ms ease; }
}