/**
 * قاب موبایل روی دسکتاپ — تا نسخه دسکتاپ آماده شود، UI گوشی وسط صفحه بماند.
 */
:root {
  --ic-phone-width: 430px;
  --ic-tabbar-dock-h: 102px;
}

/* موبایل — قاب fixed تمام‌قد؛ اسکرول داخل shell (جلوگیری از فاصله سفید بالا) */
@media (max-width: 800px) {
  html:has(body.icmadar) {
    height: 100%;
    height: 100dvh;
    background: #fff;
    overflow: hidden;
  }

  body.icmadar {
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html:has(body.ic-account),
  body.ic-account {
    background: #f6f9fd;
  }

  body.icmadar .ic-phone-shell {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
  }

  body.ic-account .ic-phone-shell {
    background: #f6f9fd;
  }

  /* زیرصفحه‌های حساب با UI سفید — shell/html نباید آبی ic-account بماند */
  html:has(body:is(.ic-messages, .ic-projects, .ic-profile, .ic-purchases, .ic-purchase-order, .ic-wallet, .ic-missions, .ic-subscription, .ic-invite, .ic-rules)),
  body:is(.ic-messages, .ic-projects, .ic-profile, .ic-purchases, .ic-purchase-order, .ic-wallet, .ic-missions, .ic-subscription, .ic-invite, .ic-rules) {
    background: #fff;
  }

  body:is(.ic-messages, .ic-projects, .ic-profile, .ic-purchases, .ic-purchase-order, .ic-wallet, .ic-missions, .ic-subscription, .ic-invite, .ic-rules) .ic-phone-shell {
    background: #fff;
  }

  body.icmadar .ic-site {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.ic-tabbar-visible .ic-site {
    padding-bottom: calc(var(--ic-tabbar-dock-h) + env(safe-area-inset-bottom, 0px));
  }

  body.ic-tabbar-visible .ic-phone-shell {
    padding-bottom: 0;
  }
}

/* صفحات تمام‌صفحه — قطعه‌شناسی / لوریکس / پشتیبانی: بدون اسکرول document */
html:has(body.ic-ghete-learn),
html:has(body.ic-lorex),
html.ic-support-lock,
html:has(body.ic-support-chat) {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.ic-ghete-learn,
body.ic-lorex,
body.ic-support-chat {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.ic-ghete-learn .ic-phone-shell,
body.ic-lorex .ic-phone-shell,
body.ic-support-chat .ic-phone-shell {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.ic-ghete-learn .ic-site,
body.ic-lorex .ic-site,
body.ic-support-chat .ic-site {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto;
}

body.ic-ghete-learn .ic-site-footer,
body.ic-lorex .ic-site-footer,
body.ic-support-chat .ic-site-footer {
  display: none !important;
}

body.ic-ghete-learn .ic-site > main,
body.ic-lorex .ic-site > main,
body.ic-support-chat .ic-site > main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

@media (min-width: 801px) {
  html:has(body.icmadar) {
    background: #fff;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  /* پس‌زمینه صفحه فقط داخل قاب — کناره‌های دسکتاپ همیشه سفید */
  body.icmadar {
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: visible !important;
    background: #fff !important;
  }

  .ic-phone-shell {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    z-index: 1;
    width: min(100%, var(--ic-phone-width));
    max-width: var(--ic-phone-width);
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateX(-50%);
    overflow: hidden;
    background: #fff;
    box-shadow: none;
    border-inline: 0.5px solid #e8e8e9;
    box-sizing: border-box;
  }

  body.icmadar .ic-site {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.ic-tabbar-visible .ic-site {
    padding-bottom: calc(var(--ic-tabbar-dock-h) + env(safe-area-inset-bottom, 0px));
  }

  body.ic-account .ic-phone-shell {
    background: #f6f9fd;
  }

  body:is(.ic-messages, .ic-projects, .ic-profile, .ic-purchases, .ic-purchase-order, .ic-wallet, .ic-missions, .ic-subscription, .ic-invite, .ic-rules) .ic-phone-shell {
    background: #fff;
  }

  /* لایه‌های fixed داخل قاب — نه تمام عرض مانیتور */
  .ic-phone-shell .ic-cmt-composer,
  .ic-phone-shell .ic-modal,
  .ic-phone-shell .ic-popup,
  .ic-phone-shell #ic-main-popup,
  .ic-phone-shell .ic-expert-coach-dialog,
  .ic-phone-shell .ic-avatar-screen,
  .ic-phone-shell .ic-fil-popup,
  .ic-phone-shell .ic-cmt-spam-popup,
  .ic-phone-shell .ic-sheet,
  .ic-phone-shell .ic-cir-lightbox,
  .ic-phone-shell .ic-cir-notify,
  .ic-phone-shell .ic-ws-action-sheet,
  .ic-phone-shell .ic-ws-media-lightbox,
  .ic-phone-shell .ic-mov-comments-sheet,
  .ic-phone-shell .ic-ght-sheet,
  .ic-phone-shell .ic-sub-sheet,
  .ic-phone-shell .ic-sub-success,
  .ic-phone-shell .ic-vids-sheet,
  .ic-phone-shell .ic-pod-sheet,
  .ic-phone-shell .ic-acc-sheet,
  .ic-phone-shell .ic-login-sheet,
  .ic-phone-shell .ic-invite-sheet,
  .ic-phone-shell .ic-wallet-sheet,
  .ic-phone-shell .ic-prof-sheet,
  .ic-phone-shell .ic-msg-compose,
  .ic-phone-shell .ic-schat-composer,
  .ic-phone-shell .ic-lorex-dock,
  .ic-phone-shell .ic-ght-learn-foot,
  .ic-phone-shell .ic-tool-picker,
  .ic-phone-shell .ic-sc-comments-bar,
  .ic-phone-shell .ic-aprj-filter,
  .ic-phone-shell .ic-reels-stage,
  .ic-phone-shell .ic-ws-head-wrap,
  .ic-phone-shell .ic-ws-restrict,
  .ic-phone-shell .ic-wal-foot,
  .ic-phone-shell .ic-cart-footer,
  .ic-phone-shell .ic-ply-controls,
  .ic-phone-shell .ic-sub-sticky,
  .ic-phone-shell .ic-tool-footer,
  .ic-phone-shell .ic-help,
  .ic-phone-shell .ic-tool-terms,
  .ic-phone-shell .ic-prof-foot,
  .ic-phone-shell .ic-login-footer,
  .ic-phone-shell .ic-srev-page-foot,
  .ic-phone-shell .ic-ap-foot,
  .ic-phone-shell .ic-upl-footer,
  .ic-phone-shell .ic-cir-montaj-bar {
    left: calc(50% - var(--ic-phone-width) / 2);
    right: auto;
    width: var(--ic-phone-width);
    max-width: 100%;
  }

  .ic-phone-shell .ic-ws-nav {
    left: calc(50% - var(--ic-phone-width) / 2 + 26px);
    right: auto;
    width: auto;
  }

  .ic-phone-shell main.ic-tool > .ic-tool-footer {
    left: calc(50% - var(--ic-phone-width) / 2);
    right: auto;
    width: var(--ic-phone-width);
    max-width: 100%;
  }

  .ic-phone-shell   main.ic-tool > .ic-tool-banner-dock {
    left: calc(50% - var(--ic-phone-width) / 2);
    right: auto;
    width: var(--ic-phone-width);
    max-width: 100%;
  }

  /* overlayهای mount‌شده روی body — همان عرض قاب موبایل */
  body > .ic-popup,
  body > .ic-modal,
  body > .ic-fil-popup,
  body > .ic-sheet,
  body > #ic-tools-sheet,
  body > .ic-acc-modal {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: min(100%, var(--ic-phone-width));
    max-width: var(--ic-phone-width);
    transform: translateX(-50%);
  }
}