.history-dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(680px,calc(100vw - 20px));height:min(620px,82dvh);max-height:calc(100dvh - 20px);padding:0;overflow:hidden}
.history-dialog::backdrop{background:#10151080}
.history-dialog[open]{display:flex;flex-direction:column}
.history-header{padding:16px 18px 14px;border-bottom:1px solid var(--line);flex:none}
.history-header .heading{flex-wrap:nowrap}
.history-header h2{font-size:18px;white-space:nowrap}
.history-heading-actions{display:flex;gap:6px;flex:none}
.history-dialog button{font-size:12px;padding:5px 8px;white-space:nowrap}
#historySearch{width:100%;margin-top:12px;font-size:16px;padding:7px 9px}
.history-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 18px}
.history-list{list-style:none;margin:0;padding:0}
.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.history-description{min-width:0}
.history-title{font-weight:600;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.history-meta{font-size:12px;line-height:1.6;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.history-actions{display:flex;align-items:center;gap:5px}
.history-actions .history-remove{min-width:44px;background:transparent;border-color:transparent;font-size:19px;line-height:20px;padding:3px 7px;color:var(--muted)}
.history-remove:hover{color:var(--danger)}
.history-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex:none}
.history-footer .small{font-size:12px}
.history-empty{padding:32px 8px;text-align:center;color:var(--muted);font-size:12px}
#historyError{font-size:12px;margin-top:7px}
#historyError:empty,#playbackHistoryStatus:empty{display:none}
#playbackHistoryStatus{font-size:12px;margin-top:5px;color:var(--muted)}
.history-dialog [hidden]{display:none!important}
@media(max-width:600px){
  .history-header{padding:10px}
  .history-header h2{font-size:16px}
  .history-content{padding:0 10px}
  .history-row{gap:7px;padding:10px 0}
  .history-actions{gap:3px}
  .history-actions button{padding:5px 6px;font-size:12px}
  .history-footer{padding:8px 10px}
}