/* Zaplat Gaming — Adaptive UI Core V3 / H13.2
   Edge-case and modal viewport safety layer.
   Presentation only: no JavaScript behavior, API, permissions, membership,
   OAuth, JaaS/media, Companion Bridge, database or workflow logic lives here. */

:root{
  --zg-adaptive-safe-x:max(8px,env(safe-area-inset-left));
  --zg-adaptive-safe-y:max(8px,env(safe-area-inset-top));
  --zg-adaptive-overlay-gap:clamp(8px,1.4vw,20px);
}

/* Keep every overlay/dialog box inside the actual browser/app viewport. */
:where(
  .media-modal,.public-modal,.youtube-consent-modal,.youtube-unsubscribe-modal,
  .problem-report-modal,.profile-achievements-modal,.steam-sync-guide,.steam-library-modal,
  .zg-game-modal,.zg-experience-dialog,.zg-verification-modal,.zg-vp-modal,
  .zg-review-detail,.arena-final-a-modal,.arena-final-b-memory-modal,
  .arena-final-b-lounge-modal,.arena-social-modal,.arena-member-modal,
  .arena-chat-image-preview-modal,.arena-v33-stream-modal,.arena-v33-lounge-modal,
  .admin-command-dialog,.admin-final-dialog,.admin-stream-dialog,.zg-acp-modal,
  .elite-confirm-overlay>.elite-panel,.zg-dialog,.zg-modal
){
  box-sizing:border-box;
  min-width:0;
  max-width:calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
}

:where(
  .media-modal,.public-modal,.youtube-consent-modal,.youtube-unsubscribe-modal,
  .problem-report-modal,.profile-achievements-modal,.steam-sync-guide,
  .zg-verification-modal,.zg-vp-modal,.zg-review-detail,.arena-final-a-modal,
  .arena-final-b-memory-modal,.arena-final-b-lounge-modal,.arena-member-modal,
  .arena-chat-image-preview-modal,.admin-final-dialog,.admin-stream-dialog,
  .zg-acp-modal,.zg-dialog,.zg-modal
){
  max-height:calc(100dvh - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
}

/* Backdrops remain scroll-safe in very short resizable desktop windows. */
:where(
  .media-modal-backdrop,.public-modal-backdrop,.youtube-consent-backdrop,
  .youtube-unsubscribe-backdrop,.problem-report-backdrop,
  .profile-achievements-modal-backdrop,.steam-sync-guide-overlay,
  .steam-library-modal-overlay,.zg-verification-modal-backdrop,.zg-vp-backdrop,
  .zg-review-detail-backdrop,.arena-final-a-backdrop,.arena-final-b-memory-backdrop,
  .arena-final-b-lounge-backdrop,.arena-social-backdrop,.arena-member-modal-backdrop,
  .arena-chat-image-preview-backdrop,.arena-v33-stream-modal-backdrop,
  .arena-v33-lounge-modal-backdrop,.admin-command-backdrop,
  .admin-final-dialog-backdrop,.admin-stream-dialog-backdrop,.zg-acp-backdrop,
  .zg-dialog-backdrop
){
  box-sizing:border-box;
  max-width:100vw;
  max-height:100dvh;
  overscroll-behavior:contain;
}

/* Long localized copy should wrap inside modal/header/action lanes instead of widening them. */
:where(
  .media-modal-head,.public-modal header,.youtube-consent-modal header,
  .youtube-unsubscribe-modal header,.profile-achievements-modal header,
  .steam-sync-guide header,.steam-library-modal-head,.steam-library-modal-brand,
  .zg-game-modal-head,.zg-experience-dialog header,.zg-verification-modal header,
  .zg-vp-modal>header,.zg-review-detail>header,.arena-final-a-modal header,
  .arena-final-b-memory-modal header,.arena-final-b-lounge-modal header,
  .arena-social-modal-head,.arena-member-modal header,.admin-command-dialog,
  .admin-final-dialog,.admin-stream-dialog header,.zg-acp-head
)>*{min-width:0}

:where(
  .media-modal,.public-modal,.youtube-consent-modal,.youtube-unsubscribe-modal,
  .problem-report-modal,.profile-achievements-modal,.steam-sync-guide,.steam-library-modal,
  .zg-game-modal,.zg-experience-dialog,.zg-verification-modal,.zg-vp-modal,
  .zg-review-detail,.arena-final-a-modal,.arena-final-b-memory-modal,
  .arena-final-b-lounge-modal,.arena-social-modal,.arena-member-modal,
  .admin-command-dialog,.admin-final-dialog,.admin-stream-dialog,.zg-acp-modal
) :where(h1,h2,h3,h4,p,small,b,strong,span,label){
  overflow-wrap:anywhere;
}

/* Full game/Steam dialogs use dynamic viewport units so controls stay reachable when
   the desktop app is resized vertically. Their internal scroll areas remain intact. */
.steam-library-modal{
  width:min(1220px,calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap)));
  height:min(850px,calc(100dvh - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap)));
}
.zg-game-modal{
  max-height:min(860px,calc(100dvh - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap)));
}
.zg-game-modal-scroll,.zg-experience-scroll,.steam-library-modal-body,
.steam-library-modal-content{min-height:0;min-width:0}

/* Floating popovers/pickers cannot be wider than the window that owns them. */
:where(
  .member-center-popover,.subscriber-badge-popover,.zg-vc-proof-popover,
  .arena-social-emoji-panel,.arena-chat-reaction-picker,.arena-sticker-picker,
  .arena-v33-expression-picker,.arena-gamer-media-expression-panel,
  .arena-achievement-picker,.arena-live-picker,.arena-picker,
  .arena-rooms-picker,.arena-gamer-media-picker,.admin-attention-panel,
  .admin-lounge-room-picker
){
  box-sizing:border-box;
  max-width:calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
}

/* Horizontal control lanes may scroll themselves, never the entire page. */
:where(
  .zg-game-tabs,.zg-lib-filter-row,.profile-v31-tabs,.profile-achievement-tabs,
  .arena-room-strip,.arena-v33-tabs,.arena-v33-room-strip,
  .notification-center-toolbar>div,.admin-detail-tabs,.admin-attention-filters
){
  max-width:100%;
  overscroll-behavior-inline:contain;
}

/* Fixed notification/toast hosts respect safe areas and narrow app windows. */
:where(.admin-toast-host,.arena-final-a-toast){
  max-width:calc(100vw - 20px);
}
.admin-toast-host{
  inset-inline-end:max(10px,env(safe-area-inset-right));
  bottom:max(10px,env(safe-area-inset-bottom));
}

/* Avoid accidental viewport widening from long links/codes/usernames in dense surfaces. */
:where(
  .account-security-action-feedback,.account-security-session,
  .steam-sync-guide-path,.steam-library-modal-brand p,.zg-review-detail-body,
  .profile-v31-panel-copy,.zg-player-hub-copy,.zg-game-info-row,
  .arena-search-shell,.arena-social-comment,.arena-chat-thread,
  .admin-member-detail,.admin-report-card,.admin-control-card
){min-width:0;overflow-wrap:anywhere}

/* Short desktop/app windows: dialogs use the available height instead of placing
   footer/close controls outside the visible canvas. */
@media (min-width:621px) and (max-height:680px){
  :where(
    .media-modal-backdrop,.public-modal-backdrop,.youtube-consent-backdrop,
    .youtube-unsubscribe-backdrop,.problem-report-backdrop,
    .profile-achievements-modal-backdrop,.steam-sync-guide-overlay,
    .steam-library-modal-overlay,.zg-verification-modal-backdrop,.zg-vp-backdrop,
    .zg-review-detail-backdrop,.arena-final-a-backdrop,.arena-final-b-memory-backdrop,
    .arena-final-b-lounge-backdrop,.arena-social-backdrop,.arena-member-modal-backdrop,
    .admin-final-dialog-backdrop,.admin-stream-dialog-backdrop,.zg-acp-backdrop
  ){
    padding:8px;
  }
  :where(
    .media-modal,.public-modal,.youtube-consent-modal,.youtube-unsubscribe-modal,
    .problem-report-modal,.profile-achievements-modal,.steam-sync-guide,
    .zg-verification-modal,.zg-vp-modal,.zg-review-detail,.arena-final-a-modal,
    .arena-final-b-memory-modal,.arena-final-b-lounge-modal,.arena-member-modal,
    .admin-final-dialog,.admin-stream-dialog,.zg-acp-modal
  ){
    max-height:calc(100dvh - 16px);
    overflow:auto;
  }
  .admin-command-backdrop{padding:8px}
  .admin-command-dialog{max-height:calc(100dvh - 16px)}
  .steam-library-modal{height:calc(100dvh - 16px)}
  .arena-social-modal{max-height:calc(100dvh - 16px)}
}

/* Narrow windows: preserve all actions, but allow headers and footers to wrap safely. */
@media (max-width:620px){
  :root{--zg-adaptive-overlay-gap:7px}

  :where(
    .media-modal-backdrop,.public-modal-backdrop,.youtube-consent-backdrop,
    .youtube-unsubscribe-backdrop,.profile-achievements-modal-backdrop,
    .steam-sync-guide-overlay,.steam-library-modal-overlay,
    .zg-verification-modal-backdrop,.zg-vp-backdrop,.zg-review-detail-backdrop,
    .arena-final-a-backdrop,.arena-final-b-memory-backdrop,
    .arena-final-b-lounge-backdrop,.admin-final-dialog-backdrop,
    .admin-stream-dialog-backdrop,.zg-acp-backdrop
  ){
    padding-top:max(7px,env(safe-area-inset-top));
    padding-right:max(7px,env(safe-area-inset-right));
    padding-bottom:max(7px,env(safe-area-inset-bottom));
    padding-left:max(7px,env(safe-area-inset-left));
  }

  :where(
    .media-modal,.public-modal,.youtube-consent-modal,.youtube-unsubscribe-modal,
    .profile-achievements-modal,.steam-sync-guide,.zg-verification-modal,
    .zg-vp-modal,.zg-review-detail,.arena-final-a-modal,
    .arena-final-b-memory-modal,.arena-final-b-lounge-modal,
    .admin-final-dialog,.admin-stream-dialog,.zg-acp-modal
  ){
    max-width:calc(100vw - 14px);
    max-height:calc(100dvh - 14px);
  }

  :where(
    .media-modal-head,.steam-library-modal-head,.zg-game-modal-head,
    .arena-final-a-modal header,.arena-final-b-memory-modal header,
    .arena-final-b-lounge-modal header,.admin-stream-dialog header,.zg-acp-head
  ){
    min-width:0;
  }

  :where(
    .media-modal-actions,.public-modal footer,.youtube-consent-actions,
    .youtube-unsubscribe-actions,.steam-sync-guide footer,.zg-vp-modal>footer,
    .zg-review-detail>footer,.arena-final-a-modal footer,
    .arena-final-b-memory-modal footer,.arena-final-b-lounge-modal footer,
    .admin-final-dialog footer,.admin-stream-dialog footer,.zg-acp-actions
  ){
    max-width:100%;
    flex-wrap:wrap;
  }

  .steam-library-modal{
    width:calc(100vw - 14px);
    height:calc(100dvh - 14px);
  }
  .steam-library-modal-head{
    gap:10px;
    padding:14px;
  }
  .steam-library-modal-brand{grid-template-columns:46px minmax(0,1fr)}
  .steam-library-modal-icon{width:46px;height:46px;border-radius:14px}
  .steam-library-modal-stats{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .steam-library-modal-stats>span{min-width:72px;flex:0 0 auto}

  .zg-game-modal{max-width:calc(100vw - 14px);max-height:calc(100dvh - 14px)}
  .zg-review-detail>footer{align-items:flex-start}
  .arena-final-a-modal footer>*{max-width:100%}
  .admin-final-dialog{grid-template-columns:38px minmax(0,1fr);gap:10px}
}

/* Extremely narrow resizable desktop windows are supported as a fallback; no controls
   are removed. Action rows stack only when there is physically no horizontal room. */
@media (max-width:390px){
  :where(
    .media-modal-actions,.public-modal footer,.youtube-consent-actions,
    .youtube-unsubscribe-actions,.zg-vp-modal>footer,.arena-final-a-modal footer,
    .arena-final-b-memory-modal footer,.arena-final-b-lounge-modal footer,
    .admin-final-dialog footer,.admin-stream-dialog footer,.zg-acp-actions
  )>*{min-width:0;max-width:100%}

  .steam-library-modal-head{grid-template-columns:minmax(0,1fr) 38px}
  .steam-library-modal-stats{grid-column:1/-1;grid-row:2}
  .admin-final-dialog{grid-template-columns:1fr}
  .admin-final-dialog-icon{grid-row:auto}
  .admin-final-dialog footer{grid-column:1}
}

/* Large displays: protect readable line lengths while still using the expanded canvas. */
@media (min-width:2560px){
  :where(.public-modal,.youtube-consent-modal,.youtube-unsubscribe-modal,.steam-sync-guide,
         .zg-verification-modal,.zg-review-detail,.admin-command-dialog,.admin-final-dialog){
    font-size:max(1em,12px);
  }
}

@media (prefers-reduced-motion:reduce){
  :where(.zg-review-detail,.admin-final-dialog,.admin-stream-dialog){transition:none!important}
}

/* Specificity-safe viewport clamps for legacy components whose original rules use
   direct class selectors or !important declarations. These remain presentation-only. */
.zg-verification-modal{
  box-sizing:border-box;
  width:min(590px,calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap)));
  max-width:calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
  max-height:calc(100dvh - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
  overflow:auto;
}
.admin-final-dialog{
  box-sizing:border-box;
  width:min(470px,calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap)));
  max-width:calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
  max-height:calc(100dvh - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
  overflow:auto;
}
.admin-stream-dialog{
  box-sizing:border-box;
  width:min(540px,calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap)));
  max-width:calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
  max-height:calc(100dvh - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
  overflow:auto;
}
.zg-vc-proof-popover{
  box-sizing:border-box;
  width:min(360px,calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap)));
  max-width:calc(100vw - var(--zg-adaptive-overlay-gap) - var(--zg-adaptive-overlay-gap));
}

@media (min-width:621px) and (max-height:680px){
  .steam-library-modal-overlay{padding:8px}
  .steam-library-modal{
    width:min(1220px,calc(100vw - 16px));
    height:calc(100dvh - 16px);
  }
  .zg-verification-modal,.admin-final-dialog,.admin-stream-dialog{
    max-height:calc(100dvh - 16px);
  }
}

@media (max-width:760px){
  /* Arena social is intentionally a full-canvas sheet at this breakpoint. Make the
     backdrop agree with that choice so a 100vw sheet is never shifted by padding. */
  .arena-social-backdrop{padding:0!important}
  .arena-social-modal{width:100vw!important;max-width:100vw!important}
}

@media (max-width:620px){
  .zg-verification-modal,.admin-final-dialog,.admin-stream-dialog{
    width:calc(100vw - 14px);
    max-width:calc(100vw - 14px);
    max-height:calc(100dvh - 14px);
  }
  .admin-final-dialog>*,.admin-stream-dialog>*{min-width:0}
}

@media (max-width:620px){
  .zg-verification-modal-backdrop,
  .admin-final-dialog-backdrop,
  .admin-stream-dialog-backdrop{
    padding:7px;
  }
  .zg-vc-proof-popover{
    width:min(360px,calc(100vw - 14px))!important;
    max-width:calc(100vw - 14px)!important;
  }
}

/* Container-relative fallback for live desktop resizing. Percentages here resolve
   against the fixed backdrop itself, avoiding stale viewport-unit edge cases while
   a Chromium/Electron window is being resized rapidly. */
@media (max-width:620px), (max-height:680px){
  .zg-verification-modal-backdrop,
  .admin-final-dialog-backdrop,
  .admin-stream-dialog-backdrop{
    padding:8px;
  }
  .zg-verification-modal{
    width:100%;
    max-width:590px;
    max-height:100%;
    overflow:auto;
  }
  .admin-final-dialog{
    width:100%;
    max-width:470px;
    max-height:100%;
    overflow:auto;
  }
  .admin-stream-dialog{
    width:100%;
    max-width:540px;
    max-height:100%;
    overflow:auto;
  }
}