/* Keep the close control in the dialog viewport while its content scrolls. */
dialog.script-editor,dialog.script-result,dialog.creation-dialog{
 --dialog-inset:24px;
 box-sizing:border-box;
 max-height:min(90vh,calc(100dvh - 24px));
 overscroll-behavior:contain;
}
dialog.script-editor>header,dialog.script-result>header,dialog.creation-dialog>header{
 position:sticky!important;
 top:calc(-1 * var(--dialog-inset));
 z-index:30;
 margin:calc(-1 * var(--dialog-inset)) calc(-1 * var(--dialog-inset)) 20px;
 padding:16px var(--dialog-inset)!important;
 background:#fff!important;
 border-bottom:1px solid #e8edf4;
 display:flex;align-items:center;justify-content:space-between;gap:16px;
 box-shadow:none;
}
dialog.creation-dialog>header{background:#17191f!important;border-bottom-color:#383d49}
dialog.script-editor>header h2,dialog.script-result>header h2,dialog.creation-dialog>header h2{
 margin:0;min-width:0;max-height:3.9em;overflow:auto;overflow-wrap:anywhere;line-height:1.3;
}
dialog>header>button{
 flex:0 0 40px!important;width:40px;min-height:40px;align-self:flex-start;
 display:grid;place-items:center;padding:0!important;border-radius:8px;cursor:pointer;
}
dialog>header>button:hover{background:#8195b51a}
dialog>header>button:focus-visible,dialog#detail>#close:focus-visible{outline:2px solid #176bff;outline-offset:-2px}
dialog.transcript-dialog{box-sizing:border-box;max-height:min(90vh,calc(100dvh - 24px));overscroll-behavior:contain}
dialog.transcript-dialog>header{position:sticky!important;top:0;z-index:30;background:#fff!important;gap:16px}
/* Product details already scroll their body independently. */
dialog.product-detail{--dialog-inset:28px}
dialog.product-detail>header{position:relative!important;top:auto;flex-shrink:0}
/* Material previews have no header: reserve a fixed close-button strip. */
dialog#detail{box-sizing:border-box;padding:48px 24px 24px;max-height:calc(100dvh - 24px);overflow:hidden}
dialog#detail>.detail-scroll{max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain}
dialog#detail>#close{position:absolute;top:6px;right:10px;width:40px;height:36px;z-index:30;border-radius:8px;cursor:pointer}
@media(max-width:600px){
 dialog.script-editor,dialog.script-result{--dialog-inset:16px}
 dialog.product-detail{--dialog-inset:20px}
 dialog#detail{padding:48px 12px 12px}
 dialog#detail>.detail-scroll{max-height:calc(100dvh - 88px)}
}