/* Nikrad UI v2.1 — deployment-safe responsive hardening */
html{width:100%;min-width:0;overflow-x:hidden;}
body.nikrad-app{width:100%;min-width:0;overflow-x:hidden;}
body.nikrad-app .device{width:100%;max-width:100%;min-width:0;}
.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) — قطعی، مستقل از هر CSS دیگر ── */
.site-menu-overlay{
  position:fixed;inset:0;z-index:7100;
  background:rgba(8,14,11,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s,visibility .2s;
}
.site-menu-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.site-menu-modal{
  position:fixed;left:50%;bottom:0;z-index:7101;
  width:100%;max-width:660px;
  max-height:88dvh;overflow-y:auto;overflow-x:hidden;
  direction:rtl;
  transform:translate(-50%,102%);
  opacity:1;visibility:hidden;pointer-events:none;
  transition:transform .26s cubic-bezier(.22,1,.36,1),visibility .26s;
  border-radius:22px 22px 0 0;
  background:#fff;color:#161616;
  box-shadow:0 -12px 40px rgba(0,0,0,.22);
  padding-bottom:max(14px,env(safe-area-inset-bottom));
}
html[data-theme="dark"] .site-menu-modal{background:#141414;color:#f0f0f0}
.site-menu-modal.open{transform:translate(-50%,0);visibility:visible;pointer-events:auto}
@media(min-width:768px){
  .site-menu-modal{bottom:24px;width:min(660px,calc(100vw - 32px));border-radius:22px}
  .site-menu-modal.open{transform:translate(-50%,0)}
}
/* 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;}

/* گارد جهانی آیکن‌ها — svg بدون سایز هرگز غول‌پیکر نمی‌شود */
svg:not([width]):not([height]){max-width:24px;max-height:24px}
.nk-empty svg,.empty-state svg{max-width:64px;max-height:64px}

@media(max-width:767px){body.nikrad-app .device{overflow:visible!important;height:auto!important;min-height:100dvh!important}}

/* prevent flex-shrink of main shell columns (bug: device squeezed by footer in row flex) */
body.nikrad-app>.device,body.nikrad-app>.theme-footer{flex:0 0 auto;max-width:100%;}
body.nikrad-app>.device{width:min(var(--nk-media-max,760px),100vw);margin:0 auto;}
