/* Shared native-dialog viewport. Content modules own content, not window geometry.
   Full-screen camera, stories and Cave retain their immersive presentation. */
body.gwh-dialog-open{overflow:hidden;overscroll-behavior:none}
body.gwh-dialog-open .bottom-nav,.gwh-keyboard-open .bottom-nav{visibility:hidden!important;pointer-events:none!important}
html body dialog:not([open]){display:none!important}
body dialog:not(#rabbitCave,.gwh-story-viewer,.gwh-camera-viewer){
 --gwh-dialog-gap:12px;
 position:fixed!important;
 top:calc(var(--gwh-visible-top,0px) + env(safe-area-inset-top,0px) + var(--gwh-dialog-gap))!important;
 bottom:auto!important;
 left:calc(var(--gwh-visible-left,0px) + max(var(--gwh-dialog-gap),env(safe-area-inset-left,0px)))!important;
 right:max(var(--gwh-dialog-gap),env(safe-area-inset-right,0px))!important;
 margin:0 auto!important;transform:none!important;
 width:min(var(--gwh-dialog-width,600px),calc(var(--gwh-visible-width,100vw) - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;
 max-width:calc(var(--gwh-visible-width,100vw) - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important;
 height:auto!important;min-height:0!important;min-width:0!important;
 max-height:calc(var(--gwh-visible-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px)!important;
 box-sizing:border-box;overflow-x:hidden!important;overflow-y:auto!important;
 overscroll-behavior:contain;scroll-padding-block:70px 24px;
}
/* The native dialog is the sole scroll surface. A second, capped .dialog-inner
   used to scroll beneath a transparent sticky header and clip its top edge. */
body dialog :is(#modalBody,#adminModalBody){width:100%!important;min-width:0;max-width:100%;max-height:none!important;box-sizing:border-box;overflow:visible!important;overflow-wrap:anywhere;padding:16px!important}
body dialog :is(.invitation-heading,.reading-panel-heading,.gwh-utility-head,.admin-detail-heading){
 position:sticky!important;top:0!important;z-index:5;background:var(--gwh-surface-warm)!important;color:var(--gwh-text)!important;
}
body dialog .reading-panel-heading{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:nowrap!important;gap:12px}
body dialog :is(#modalBody,#adminModalBody)>.reading-panel-heading{width:calc(100% + 32px)!important;max-width:none!important;margin:-16px -16px 16px!important;padding:12px 16px!important;border-bottom:1px solid color-mix(in srgb,var(--gwh-text) 16%,transparent);isolation:isolate}
body dialog .reading-panel-heading .reading-panel-close{position:static!important;inset:auto!important;flex:none;width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important;padding:0!important;margin:0!important;border:2px solid var(--gwh-text)!important;border-radius:50%!important;box-shadow:none!important;background:var(--gwh-surface-warm)!important;color:var(--gwh-text)!important;font-size:26px!important}
body dialog .reading-panel-heading :is(h1,h2){min-width:0;overflow-wrap:anywhere;margin:0!important;font-size:clamp(20px,5vw,26px)!important;line-height:1.15!important;letter-spacing:-.04em}
body dialog .reading-panel-heading .eyebrow{font-size:10px!important;line-height:1.25;letter-spacing:.12em;margin:0 0 4px}
body dialog .reading-panel-heading>div{min-width:0}
body dialog :is(.gwh-utility-head,.admin-detail-heading) button{flex:none}
body dialog :is(input,select,textarea){font-size:16px!important;min-width:0;max-width:100%}
/* A chat has three stable regions: header, messages, composer. Only messages scroll. */
html body dialog#modal:has(.private-chat-shell){
 height:min(800px,calc(var(--gwh-visible-height,100dvh) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)))!important;
 overflow:hidden!important;padding:0!important;scroll-padding:0;
}
html body dialog#modal:has(.private-chat-shell) #modalBody{
 display:block!important;width:100%!important;height:100%!important;min-height:0!important;
 margin:0!important;padding:12px!important;overflow:hidden!important;
}
body #modal .private-chat-shell{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;color:var(--gwh-text)}
body #modal .private-chat-head{display:flex;align-items:center;gap:10px;justify-content:space-between;min-width:0;margin:0;padding:0;background:var(--gwh-surface-warm)}
body #modal .private-chat-head h2{margin:0!important;font-size:22px!important;min-width:0;overflow-wrap:anywhere}
body #modal .private-chat-head button{position:static!important;flex:none;width:44px;height:44px;padding:0!important;border-radius:50%;box-shadow:none}
body #modal .private-chat{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:4px;height:100%!important;min-height:0;overflow:hidden}
body #modal .private-chat-log{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:8px 2px}
body #modal .private-chat form{display:flex;align-items:end;gap:8px;padding:4px 0 0;margin:0;min-width:0}
html body #modal .private-chat form textarea{flex:1;min-width:0;width:0;max-width:100%;height:54px!important;min-height:54px!important;font-size:16px!important;scroll-margin:0!important;resize:none}
body #modal .private-chat form button{flex:none;height:54px;min-width:64px!important;margin:0}
body #modal .private-chat [role=status]{margin:0;font-size:12px;overflow-wrap:anywhere}
body #modal .private-chat-policy{margin:0;max-height:20vh;overflow:auto;font-size:12px}
body #modal .private-chat-policy summary{min-height:32px;padding:5px 0;font-size:12px}
body #modal .private-message{flex-shrink:0;max-width:90%;min-width:0;font-size:15px;line-height:1.4}
/* Modal motion does not resize content or displace the user's scroll/draft. */
body dialog[open]:not(#rabbitCave,.gwh-story-viewer,.gwh-camera-viewer){animation:gwh-dialog-enter 180ms ease-out}
body dialog:not(#rabbitCave,.gwh-story-viewer,.gwh-camera-viewer)::backdrop{background:rgba(17,17,17,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:gwh-dialog-enter 160ms ease-out}
@keyframes gwh-dialog-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body dialog[open],body dialog::backdrop{animation:none!important}}
@media(max-width:700px){
 body #adminModal{padding:0!important}
 body #adminModalBody{padding:16px!important}
 body dialog:not(#rabbitCave,.gwh-story-viewer,.gwh-camera-viewer){border-radius:var(--gwh-radius-lg)!important}
 body.member-mobile #modal.member-reading-panel #modalBody .reading-panel-close{position:static!important;inset:auto!important}
}
