.history-page { max-width: 1600px; margin: 0 auto; padding: var(--sc-space-10) var(--sc-space-8) var(--sc-space-16); min-height: 75vh; }
.history-heading { margin-bottom: var(--sc-space-8); }
.history-heading h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; margin: 0 0 var(--sc-space-3); }
.history-heading p, .history-message, .history-empty p { color: var(--sc-color-muted); }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-6); margin-bottom: var(--sc-space-6); }
.history-types { display: flex; gap: var(--sc-space-5); }
.history-types button { min-height: var(--sc-control-height); color: var(--sc-color-muted); border: 0; border-bottom: 2px solid transparent; background: transparent; padding: var(--sc-space-2) 0; font: inherit; cursor: pointer; }
.history-types button[aria-pressed="true"] { color: var(--sc-color-ink); border-color: var(--sc-color-brand-500); }
.history-grid { --history-columns: 5; display: grid; column-count: var(--history-columns); grid-template-columns: repeat(var(--history-columns), minmax(0, 1fr)); align-items: start; gap: var(--sc-space-4); }
.sc-list-placeholder { margin-block: var(--sc-space-4); }
.sc-list-placeholder__card { aspect-ratio: 1; border-radius: var(--sc-radius-lg); }
.history-card { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; position: relative; overflow: hidden; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); background: var(--sc-color-surface); color: var(--sc-color-ink); text-align: left; cursor: pointer; }
.history-card img, .history-card video { display: block; width: 100%; height: auto; min-height: 80px; }
.history-card video { aspect-ratio: 4 / 3; object-fit: contain; }
.history-card-caption { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-space-2); padding: var(--sc-space-3); color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); }
.history-card-caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-card-caption b { flex-shrink: 0; color: var(--sc-color-text); font-weight: 500; direction: ltr; unicode-bidi: isolate; }
#historyPosition { direction: ltr; unicode-bidi: isolate; }
.history-placeholder { min-height: 210px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--sc-space-4); padding: var(--sc-space-6); text-align: center; overflow-wrap: anywhere; color: var(--sc-color-muted); }
.history-audio-symbol { font-size: 3rem; color: var(--sc-color-brand-700); }
.history-empty { padding: var(--sc-space-16) 0; text-align: center; }
.history-empty h2 { margin-bottom: var(--sc-space-3); }
.history-empty .sc-button { margin-top: var(--sc-space-6); }
.history-auth-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-6); }
.history-empty .history-auth-actions .sc-button { width: auto; min-width: 96px; margin: 0; }
.history-message { text-align: center; padding: var(--sc-space-4); }
.history-pagination { display: flex; justify-content: center; }
.history-dialog { position: fixed; inset: 0; width: min(1200px, calc(100vw - 48px)); max-width: none; height: min(820px, calc(100dvh - 64px)); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-xl); background: var(--sc-color-surface); color: var(--sc-color-text); }
.history-dialog::backdrop { background: var(--sc-color-overlay); backdrop-filter: blur(6px); }
.history-detail-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); height: 100%; }
.history-close { position: absolute; top: var(--sc-space-3); right: var(--sc-space-3); z-index: 2; width: var(--sc-control-height); padding: 0; font-size: 1.6rem; }
.history-viewer { background: var(--sc-color-canvas); min-height: 0; display: flex; flex-direction: column; }
.history-media { display: flex; flex: 1; min-height: 0; flex-direction: column; justify-content: center; align-items: center; gap: var(--sc-space-4); overflow: hidden; touch-action: pan-y; padding: var(--sc-space-4); }
.history-media > img, .history-media > video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.history-media > img.history-cover { height: auto; max-height: 65%; width: min(100%, 340px); }
.history-media audio { width: min(100%, 400px); flex-shrink: 0; }
.history-media p { text-align: center; overflow-wrap: anywhere; }
.history-carousel { display: flex; align-items: center; justify-content: center; gap: var(--sc-space-6); padding: var(--sc-space-3); flex-shrink: 0; }
.history-carousel .sc-button { min-width: var(--sc-control-height); }
.history-detail-copy { padding: var(--sc-space-16) var(--sc-space-8) var(--sc-space-8); overflow-y: auto; min-width: 0; }
.history-detail-copy h2 { margin: 0 0 var(--sc-space-6); font-size: 1.5rem; overflow-wrap: anywhere; }
.history-detail-copy h3 { margin: var(--sc-space-8) 0 var(--sc-space-3); font-size: 1rem; }
.history-metadata { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-space-3) var(--sc-space-5); font-size: var(--sc-font-size-sm); }
.history-metadata dt { color: var(--sc-color-muted); }
.history-metadata dd { margin: 0; overflow-wrap: anywhere; }
.history-prompt { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--sc-leading-copy); user-select: text; }
.history-detail-actions { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-6); }
.history-page [hidden], .history-dialog [hidden] { display: none !important; }
.history-card:focus-visible, .history-types button:focus-visible { outline: 2px solid var(--sc-color-focus); outline-offset: 3px; }
.history-card-preview { position:relative; width:100%; aspect-ratio:1; overflow:hidden; }
.history-card-open { display:block; width:100%; height:100%; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; }
.history-card-open:focus-visible { outline:2px solid var(--sc-color-focus); outline-offset:-3px; }
.history-card-preview :is(img,video) { display:block; width:100%; height:100%; min-height:0; aspect-ratio:auto; object-fit:contain; }
.history-card-preview .history-placeholder { box-sizing:border-box; min-height:0; height:100%; padding:12px; gap:8px; font-size:13px; line-height:1.4; }
.history-card-preview .history-audio-symbol { font-size:24px; }
.history-card-preview--failed .history-placeholder { padding-bottom:64px; }
.history-card-preview--failed .history-audio-symbol { display:none; }
.history-card-preview > [data-failed-task-agent] { position:absolute; inset:auto 8px 8px; width:calc(100% - 16px); min-width:0; min-height:44px; padding:6px; font-size:13px; line-height:1.3; white-space:normal; overflow-wrap:anywhere; }
.history-media > .history-placeholder { box-sizing:border-box; width:100%; height:100%; min-height:0; overflow:auto; }
@media (max-width: 1200px) { .history-grid { --history-columns: 4; } }
@media (max-width: 900px) { .history-grid { --history-columns: 3; } .history-detail-layout { grid-template-columns: minmax(0,1fr) minmax(280px,1fr); } }
@media (max-width: 640px) {
  .history-page { padding: var(--sc-space-6) var(--sc-space-4) var(--sc-space-12); }
  .history-heading { margin-bottom: var(--sc-space-5); }
  .history-toolbar { align-items: flex-start; flex-direction: column; gap: var(--sc-space-3); }
  .history-types { width: 100%; justify-content: space-between; gap: var(--sc-space-3); }
  .history-grid { --history-columns: 2; gap: var(--sc-space-3); }
  .history-card { border-radius: var(--sc-radius-md); }
  .history-placeholder { min-height: 170px; padding: var(--sc-space-4); }
  .history-card-caption { padding: var(--sc-space-2); }
  .history-dialog { width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .history-detail-layout { display: block; overflow-y: auto; }
  .history-viewer { height: 55dvh; min-height: 300px; }
  .history-detail-copy { padding: var(--sc-space-6) var(--sc-space-5); overflow: visible; }
  .history-media { padding-top: var(--sc-space-16); }
}
@media (prefers-reduced-motion: reduce) { .history-dialog::backdrop { backdrop-filter: none; } }

body.history-modal-open { overflow: hidden; }

.history-dialog .history-close { width: var(--sc-control-height); min-width: var(--sc-control-height); }
.history-dialog .history-carousel .sc-button { width: var(--sc-control-height); flex: 0 0 var(--sc-control-height); }
.history-carousel span { white-space: nowrap; flex-shrink: 0; }

.history-grid[data-masonry-ready="true"] { grid-auto-flow: row; grid-auto-rows: 1px; row-gap: 0; }
.history-grid[data-masonry-ready="true"] .history-card { grid-row-end: span var(--prompt-library-card-rows, 1); }

/* Keep action controls outside the independently scrolling detail body. */
.history-dialog[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.history-detail-layout { min-height: 0; }
.history-detail-actions { margin: 0; padding: var(--sc-space-4) var(--sc-space-5); padding-bottom: max(var(--sc-space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--sc-color-border); background: var(--sc-color-surface); justify-content: flex-end; align-items: center; }
.history-detail-actions > .sc-button { flex: 0 1 auto; }
#historyDetailStatus { flex-basis: 100%; margin: 0; color: var(--sc-color-muted); }
#historyDetailStatus:empty { display: none; }
.history-prompt-heading { display: flex; align-items: center; gap: var(--sc-space-2); margin: var(--sc-space-8) 0 var(--sc-space-3); }
.history-prompt-heading h3 { margin: 0; flex: 0 0 auto; white-space: nowrap; }
.history-copy-icon { flex: 0 0 var(--sc-control-height); width: var(--sc-control-height); min-width: var(--sc-control-height); padding: 0; }
.history-copy-icon svg { flex-shrink: 0; }
.history-dialog .sc-toast { position: absolute; right: calc(var(--sc-control-height) + var(--sc-space-6)); top: var(--sc-space-4); bottom: auto; max-width: calc(100% - 8rem); }
@media (max-width: 640px) {
  .history-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-2); }
  .history-detail-actions > .sc-button { min-width: 0; padding-inline: var(--sc-space-2); }
  #historyDetailStatus { grid-column: 1 / -1; }
}