/* Nikrad UI v2.1 — deployment-safe responsive hardening */
html{width:100%;min-width:0;overflow-x:hidden;}
body.nikrad-v2{width:100%;min-width:0;overflow-x:hidden;}
body.nikrad-v2 .device{width:100%;max-width:100%;min-width:0;overflow:hidden;}
.ui-header{width:100%;max-width:100%;box-sizing:border-box;}
.ui-header .header-brand{min-width:0;}
.ui-header .header-brand .name{overflow:hidden;text-overflow:ellipsis;}
@media (max-width:767px){
  .ui-header{padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));}
  .site-menu-modal{max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
  .sheet{max-height:calc(100dvh - env(safe-area-inset-top));}
  .drawer{height:100dvh;max-height:100dvh;}
  .content{width:100%;min-width:0;}
  img,svg,video,canvas{max-width:100%;}
}
@media (min-width:768px){
  .site-menu-modal,.sheet{max-width:min(720px,calc(100vw - 32px));}
}

/* v2.2 — definitive RTL overlay geometry / touch QA
   Keep shared overlays outside .device (ui-shell-end does this) so fixed layers
   are positioned against the viewport. Do not use translateX on edge-aligned
   mobile sheets; it causes the exact half-offscreen bug seen on Android. */

/* Right-side conversation drawer: RTL means physical RIGHT edge. */
.backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
}
.drawer{
  position:fixed!important;
  top:0!important;
  right:0!important;
  left:auto!important;
  bottom:0!important;
  width:min(360px,92vw)!important;
  max-width:92vw!important;
  height:100dvh!important;
  max-height:100dvh!important;
  transform:translate3d(105%,0,0)!important;
  z-index:7002!important;
  direction:rtl!important;
  visibility:hidden;
  pointer-events:none;
}
.drawer-open .drawer{
  transform:translate3d(0,0,0)!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.drawer-open .backdrop{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Quick-access menu: centered on desktop, full-width-with-gutters on mobile. */
.site-menu-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:7100!important;
}
.site-menu-modal{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:20px!important;
  width:min(660px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:min(78dvh,680px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  transform:translate(-50%,calc(100% + 28px))!important;
  z-index:7101!important;
  direction:rtl!important;
}
.site-menu-modal.open{
  transform:translate(-50%,0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Bottom sheets: centered desktop; edge-to-edge mobile WITHOUT translateX. */
.sheet-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:7200!important;
}
.sheet{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:min(760px,100vw)!important;
  max-width:min(760px,calc(100vw - 24px))!important;
  max-height:min(86dvh,760px)!important;
  transform:translate(-50%,105%)!important;
  z-index:7201!important;
  direction:rtl!important;
  visibility:hidden!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.sheet.open{
  transform:translate(-50%,0)!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.sheet-body{
  min-width:0!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}

@media(max-width:767px){
  /* Drawer remains a true RTL side drawer rather than a half-offscreen panel. */
  .drawer{
    width:min(360px,92vw)!important;
    max-width:92vw!important;
    padding-top:env(safe-area-inset-top)!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }

  /* No horizontal translation when the modal itself is edge aligned. */
  .site-menu-modal{
    left:12px!important;
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)!important;
    padding:12px!important;
    transform:translateY(calc(100% + 28px))!important;
  }
  .site-menu-modal.open{
    transform:translateY(0)!important;
  }

  .sheet{
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    max-height:calc(100dvh - env(safe-area-inset-top))!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
    padding-bottom:max(18px,env(safe-area-inset-bottom))!important;
    border-radius:24px 24px 0 0!important;
    transform:translateY(105%)!important;
  }
  .sheet.open{
    transform:translateY(0)!important;
  }

  .sheet-head{
    min-width:0!important;
  }
  .sheet-title-wrap{
    min-width:0!important;
    overflow:hidden!important;
  }
  .sheet-title-wrap b,.sheet-title-wrap i{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .sheet-close,.drawer-close,.site-menu-close,
  .ui-header .menu-btn,.ui-header .quick-btn,
  .ui-header .notif-btn,.ui-header .avatar-btn{
    min-width:44px!important;
    min-height:44px!important;
  }
}

@media(min-width:768px){
  .drawer{
    width:360px!important;
    max-width:360px!important;
  }
  .sheet{
    bottom:16px!important;
    max-height:calc(100dvh - 32px)!important;
    border-bottom:1px solid var(--line)!important;
    border-radius:24px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .drawer,.site-menu-modal,.sheet{transition:none!important;}
}

/* v2.3 — overlays are hidden until explicitly opened. The previous shared overlay
   was rendered on chat.php but had no closed state, dimming the entire page. */
.sheet-overlay{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease, visibility .18s ease!important;
}
.sheet-overlay.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body.sheet-open{overflow:hidden!important;}