#historySection { max-width:1520px; }
.dz-history-view .main > #historySection { max-width:1520px; }
#historyGrid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
#historyGrid .history-card { min-width:0; }
#historyGrid .history-card-video { cursor:pointer; }
#historyGrid .history-card-meta { align-items:flex-start; flex-direction:column; gap:8px; }
#historyGrid .history-card-params { gap:4px; }
#historyGrid .history-card-time { white-space:nowrap; }
#historyGrid .history-card-overlay { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:end; padding:10px; gap:6px; z-index:4; pointer-events:none; }
#historyGrid .history-action { justify-content:center; padding:5px 6px; min-width:0; font-size:11px; pointer-events:auto; }
#historyGrid .history-card:hover .history-play-btn:not(:focus-visible) { opacity:0; }
#historyGrid .history-play-btn { padding:0; cursor:pointer; }
#historyGrid .history-card:focus-within .history-card-overlay { opacity:1; }
html.history-detail-open { overflow:hidden; }
#history-details { position:fixed; inset:0; margin:auto; padding:0; width:min(1320px,calc(100vw - 64px)); height:min(820px,calc(100dvh - 64px)); max-width:none; max-height:none; border:1px solid #e2e9f2; border-radius:24px; background:#fff; color:#233b55; box-shadow:0 28px 100px #0e223c40; overflow:hidden; }
#history-details::backdrop { background:#15243b80; backdrop-filter:blur(8px); }
.history-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; height:100%; }
.history-detail-player { min-width:0; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; background:#0b101b; }
.history-detail-player video { display:block; width:100%; height:100%; object-fit:contain; }
.history-detail-side { min-width:0; min-height:0; display:flex; flex-direction:column; background:#fff; }
.history-detail-head { display:flex; align-items:flex-start; justify-content:space-between; padding:24px; gap:12px; border-bottom:1px solid #eaf0f7; }
.history-detail-head h2 { margin:0 0 8px; font-size:20px; letter-spacing:-.4px; }
.history-detail-head time { font-size:12px; color:#8292a6; }
#history-details button { font:inherit; cursor:pointer; }
#history-details button:focus-visible,#history-details video:focus-visible { outline:2px solid #06b6d4; outline-offset:3px; }
.history-detail-close { width:32px; height:32px; flex-shrink:0; border:1px solid #e5ebf3; border-radius:50%; background:#f5f8fc; color:#7a8da4; font-size:22px !important; }
.history-detail-content { overflow-y:auto; overscroll-behavior:contain; padding:22px 24px; flex:1; min-height:0; }
.history-detail-content h3 { margin:0 0 12px; font-size:12px; font-weight:600; color:#7c8ea3; }
.history-detail-prompt { white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow-y:auto; overscroll-behavior:contain; margin-bottom:22px; padding:16px; border:1px solid #e7edf5; border-radius:14px; background:#f7f9fc; font-size:13px; line-height:1.85; }
.history-detail-params { margin:0 0 22px; padding:4px 14px; border:1px solid #e7edf5; border-radius:14px; background:#fafbfd; }
.history-detail-params > div { display:flex; justify-content:space-between; gap:14px; padding:10px 0; font-size:12px; }
.history-detail-params > div + div { border-top:1px solid #edf1f7; }
.history-detail-params dt { color:#8292a6; flex-shrink:0; }
.history-detail-params dd { margin:0; text-align:right; overflow-wrap:anywhere; font-weight:600; }
.history-detail-refs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.history-detail-ref { min-width:0; margin:0; }
.history-detail-ref img { width:100%; height:76px; display:block; object-fit:contain; border-radius:10px; border:1px solid #e5ecf4; background:#f2f5f9; }
.history-detail-ref figcaption { color:#8090a4; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:6px; }
.history-detail-ref-empty { display:grid; place-items:center; height:76px; border:1px dashed #d9e2ee; background:#f6f8fc; border-radius:10px; color:#8b9bb0; font-size:11px; padding:6px; text-align:center; }
.history-detail-ref-empty[hidden] { display:none; }
.history-detail-muted { color:#8a98ab; font-size:12px; line-height:1.7; }
.history-detail-actions { padding:16px 24px 20px; border-top:1px solid #eaf0f7; background:#fff; }
.history-detail-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.history-detail-buttons button { flex:1; min-height:38px; padding:8px 10px; border:1px solid #e0e8f3; border-radius:11px; background:#f7f9fc; color:#526d87; font-size:12px !important; white-space:nowrap; }
.history-detail-buttons .history-detail-edit { border:0; background:linear-gradient(110deg,#09b5cc,#798cf3); color:#fff; }
.history-detail-buttons button:disabled { opacity:.6; cursor:wait; }
#history-detail-status { margin:10px 0 0; font-size:12px; color:#1997b4; line-height:1.6; }
#history-detail-status:empty { display:none; }
#history-detail-status.error { color:#dc596a; }
.history-detail-media-error { position:absolute; left:16px; right:16px; top:16px; padding:12px 16px; border:1px solid #ffffff25; border-radius:12px; color:#d4e0ef; background:#192537ed; font-size:13px; line-height:1.6; }
@media(max-width:1399px) { #historyGrid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1099px) { #historyGrid { grid-template-columns:repeat(3,minmax(0,1fr)); } .history-detail-layout { grid-template-columns:minmax(0,1fr) 340px; } }
@media(max-width:849px) { #historyGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 #history-details { width:calc(100vw - 20px); height:calc(100dvh - 24px); border-radius:18px; overflow-y:auto; }
 .history-detail-layout { display:flex; flex-direction:column; height:auto; min-height:100%; }
 .history-detail-player { height:38dvh; min-height:190px; flex-shrink:0; }
 .history-detail-side { flex:1; overflow:visible; }
 .history-detail-head { padding:18px; }
 .history-detail-close { position:absolute; z-index:1; right:10px; top:10px; color:#fff; background:#152438d9; border-color:#ffffff35; }
 .history-detail-content { flex:none; overflow:visible; padding:18px; }
 .history-detail-actions { padding:14px 18px 18px; }
 .history-detail-prompt { max-height:200px; }
}
@media(max-width:539px) { #historyGrid { grid-template-columns:minmax(0,1fr); gap:16px; } }
@media(hover:none) { #historyGrid .history-card-overlay { opacity:1; } }