#historyModal .dialog { width: min(720px, 100%); padding: 30px; }
#historyModal .dialog-head { margin-bottom: 22px; gap: 16px; }
#historyModal .dialog-head > div { min-width: 0; }
#historyModal h2 { margin-top: 8px; font-size: clamp(25px, 4vw, 34px); line-height: 1.16; }
#historyModal .close { flex: 0 0 38px; }
.history-variant { color: var(--muted); font-size: 12px; margin: 8px 0 0; overflow-wrap: anywhere; }
.history-variant:empty { display: none; }
.history-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
.history-footer p { margin: 0; font-size: 12px; color: var(--muted); }
.history-watch-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; white-space: nowrap; }
.history-watch-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.history-watch-context { font-weight: 700; margin: -4px 0 20px; overflow-wrap: anywhere; }
#historyModal button:focus-visible, #watchModal button:focus-visible { outline: 3px solid #617f2c; outline-offset: 3px; }
@media (max-width: 540px) {
  #historyModal { padding: 12px; }
  #historyModal .dialog { padding: 20px 16px; border-radius: 22px; max-height: 94dvh; }
  #historyModal .dialog-head { margin-bottom: 18px; }
  .history-footer { flex-direction: column-reverse; align-items: stretch; gap: 10px; margin-top: 16px; padding-top: 16px; }
  .history-footer p { text-align: center; font-size: 11px; }
}