/**
 * تصميم هاتف حقيقي تحت html.xsr-phone (بدون لوحة 1280 / zoom).
 * لا يُطبَّق عند Request desktop site (UA بدون Mobi).
 */
html.xsr-phone {
  --xsr-fit: 1;
}

html.xsr-phone body {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* —— هيكل الصفحة الجانبي —— */
html.xsr-phone .home-layout-with-side,
html.xsr-phone body.xsr-chat-side-dock .home-layout-with-side {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100dvh;
  height: auto !important;
  overflow: visible !important;
}

html.xsr-phone .home-layout-main,
html.xsr-phone body.xsr-chat-side-dock .home-layout-main {
  order: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.xsr-phone .home-layout-chat,
html.xsr-phone body.xsr-chat-side-dock .home-layout-chat {
  display: flex !important;
  flex-direction: column !important;
  order: 2 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 60 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: calc(min(42dvh, 340px) + env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(min(42dvh, 340px) + env(safe-area-inset-bottom, 0px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.28) !important;
  background: #0f172a !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.xsr-phone:not(:has(body.xsr-chat-side-dock)) .home-layout-chat {
  display: none !important;
}

html.xsr-phone body.xsr-chat-side-dock {
  padding-bottom: calc(min(42dvh, 340px) + env(safe-area-inset-bottom, 0px)) !important;
}

html.xsr-phone .xsr-home-main,
html.xsr-phone body.xsr-chat-side-dock .xsr-home-main {
  padding-inline: 0.85rem !important;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}

html.xsr-phone .dashboard-header,
html.xsr-phone .home-layout-main .dashboard-header {
  padding-inline: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.xsr-phone .xsr-workspace-footer,
html.xsr-phone .xsr-footerbar.xsr-workspace-footer {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

html.xsr-phone body.xsr-chat-side-dock .xsr-footerbar,
html.xsr-phone body.xsr-chat-side-dock .xsr-workspace-footer {
  display: none !important;
}

/* —— الرئيسية —— */
html.xsr-phone .home-wrap,
html.xsr-phone .xsr-home-page .home-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

html.xsr-phone .home-split,
html.xsr-phone .home-grid,
html.xsr-phone .home-cards,
html.xsr-phone .home-collab-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0.85rem !important;
  width: 100% !important;
}

html.xsr-phone .home-collab-box,
html.xsr-phone .home-card,
html.xsr-phone article.home-collab-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.xsr-phone .home-collab-actions,
html.xsr-phone .home-collab-actions-primary,
html.xsr-phone .home-collab-actions-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  width: 100% !important;
}

html.xsr-phone .home-collab-btn,
html.xsr-phone .home-collab-upload-label {
  width: 100% !important;
  justify-content: center !important;
  min-height: 44px;
}

html.xsr-phone .dev-project-toolbar {
  flex-direction: column !important;
  align-items: stretch !important;
}

html.xsr-phone .dev-project-file-list li {
  flex-direction: column !important;
  align-items: stretch !important;
}

/* —— شات عائم —— */
html.xsr-phone .floating-chat-panel {
  width: min(100vw - 1rem, 420px) !important;
  max-width: calc(100vw - 1rem) !important;
  max-height: min(78dvh, 640px) !important;
  inset-inline-end: 0.5rem !important;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
}

html.xsr-phone .floating-chat-btn {
  inset-inline-end: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-panel.is-side-dock,
html.xsr-phone body.xsr-chat-side-dock #floating-chat-panel {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: none !important;
  background: #0f172a !important;
  touch-action: auto !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-btn {
  display: none !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-head {
  padding: 0.45rem 0.7rem !important;
  min-height: 44px;
  cursor: default !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-title {
  font-size: 0.88rem !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-drag-hint,
html.xsr-phone body.xsr-chat-side-dock .floating-chat-resize-layer,
html.xsr-phone body.xsr-chat-side-dock .floating-chat-reset {
  display: none !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-composer {
  flex-shrink: 0 !important;
  padding: 0.45rem 0.65rem calc(0.45rem + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0.4rem !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-input {
  min-height: 44px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}

html.xsr-phone body.xsr-chat-side-dock .floating-chat-send {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* —— جداول / شبكات عامة —— */
html.xsr-phone table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html.xsr-phone .space-track-courses,
html.xsr-phone .track-courses-grid,
html.xsr-phone .course-info-panel__grid,
html.xsr-phone .cert-outer-grid-5 {
  grid-template-columns: 1fr !important;
}

html.xsr-phone img,
html.xsr-phone video,
html.xsr-phone canvas,
html.xsr-phone iframe {
  max-width: 100%;
  height: auto;
}

/* —— لمس —— */
html.xsr-phone button,
html.xsr-phone .btn,
html.xsr-phone a.btn,
html.xsr-phone [role="button"],
html.xsr-phone input[type="submit"],
html.xsr-phone input[type="button"] {
  min-height: 44px;
}

html.xsr-phone input,
html.xsr-phone select,
html.xsr-phone textarea {
  font-size: 16px; /* يمنع زوم iOS التلقائي */
  max-width: 100%;
}

/* —— login / register —— */
html.xsr-phone .auth-landing {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100dvh;
  gap: 1rem;
  padding: 0.85rem !important;
  box-sizing: border-box;
}

html.xsr-phone .auth-login-wrap,
html.xsr-phone .auth-register-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
}

html.xsr-phone .login-card,
html.xsr-phone .register-card,
html.xsr-phone .auth-card,
html.xsr-phone .auth-panel,
html.xsr-phone .oblkn-auth-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  border-radius: 16px;
}

html.xsr-phone .login-wrap,
html.xsr-phone .register-wrap,
html.xsr-phone .auth-wrap {
  padding: 1rem !important;
  width: 100% !important;
  box-sizing: border-box;
}

html.xsr-phone .auth-showcase,
html.xsr-phone .auth-landing > aside,
html.xsr-phone .auth-landing > .auth-showcase {
  width: 100% !important;
  max-width: 100% !important;
}

/* —— coursess / learn —— */
html.xsr-phone .learn-topbar,
html.xsr-phone .learn-shell,
html.xsr-phone .course-layout,
html.xsr-phone .learn-main {
  width: 100% !important;
  max-width: 100% !important;
}

html.xsr-phone .learn-split,
html.xsr-phone .course-columns {
  display: flex !important;
  flex-direction: column !important;
}

/* —— مساحات الشهادات —— */
html.xsr-phone.design-page,
html.xsr-phone.data-page,
html.xsr-phone.verify-page-root,
html.xsr-phone.admin-page {
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
}

html.xsr-phone body.design-workspace,
html.xsr-phone body.data-workspace,
html.xsr-phone body.verify-workspace,
html.xsr-phone body.admin-workspace,
html.xsr-phone.data-page body.data-workspace,
html.xsr-phone.verify-page-root body.verify-workspace,
html.xsr-phone.design-page body.design-workspace {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
}

/* إلغاء قفل ارتفاع الهيكل حتى لا تُضغط الصناديق في شاشة واحدة */
html.xsr-phone body.design-workspace .home-layout-with-side,
html.xsr-phone body.data-workspace .home-layout-with-side,
html.xsr-phone body.verify-workspace .home-layout-with-side,
html.xsr-phone body.admin-workspace .home-layout-with-side,
html.xsr-phone body.design-workspace .home-layout-main,
html.xsr-phone body.data-workspace .home-layout-main,
html.xsr-phone body.verify-workspace .home-layout-main,
html.xsr-phone body.admin-workspace .home-layout-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html.xsr-phone body.design-workspace > #main-layout,
html.xsr-phone body.data-workspace > #main-layout,
html.xsr-phone body.verify-workspace > #main-layout,
html.xsr-phone body.admin-workspace > #main-layout,
html.xsr-phone body.design-workspace .home-layout-main > #main-layout,
html.xsr-phone body.data-workspace .home-layout-main > #main-layout,
html.xsr-phone body.verify-workspace .home-layout-main > #main-layout,
html.xsr-phone body.admin-workspace .home-layout-main > #main-layout,
html.xsr-phone #main-layout.layout,
html.xsr-phone #main-layout.verify-main-layout,
html.xsr-phone .layout-grid,
html.xsr-phone .workspace-layout {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}

html.xsr-phone .layout-panel,
html.xsr-phone .layout-section,
html.xsr-phone .panel-wrap {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.xsr-phone .layout-panel.panel-hidden,
html.xsr-phone .panel.panel-hidden {
  display: none !important;
}

/* صناديق بارتفاع طبيعي مقروء + تمرير الصفحة */
html.xsr-phone body.design-workspace .panel,
html.xsr-phone body.design-workspace .preview-panel,
html.xsr-phone body.data-workspace #main-layout > .panel,
html.xsr-phone body.verify-workspace #main-layout > .panel,
html.xsr-phone body.verify-workspace #main-layout > .verify-panel,
html.xsr-phone body.admin-workspace #main-layout > .panel,
html.xsr-phone body.admin-workspace #main-layout > .panel-admin,
html.xsr-phone body.admin-workspace #main-layout > .panel-admin-cert,
html.xsr-phone body.admin-workspace #main-layout > .admin-panel {
  height: auto !important;
  max-height: none !important;
  min-height: min(42dvh, 18rem) !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  overflow: auto !important;
}

/* معاينة البيانات: نموذج ثم معاينة عمودياً */
html.xsr-phone body.data-workspace .preview-box-container {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 0.85rem !important;
  width: 100% !important;
}

html.xsr-phone body.data-workspace .form-side,
html.xsr-phone body.data-workspace .preview-side {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

/* شريط أدوات الشهادات */
html.xsr-phone .workspace-toolbar,
html.xsr-phone .cert-toolbar,
html.xsr-phone .top-toolbar {
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
}

/* هيدر الشهادات: نقر «ضبط الأحجام» و«انتقال الى» */
html.xsr-phone.design-page header.layout-controller,
html.xsr-phone.data-page header.layout-controller,
html.xsr-phone.verify-page-root header.layout-controller,
html.xsr-phone.admin-page header.layout-controller,
html.xsr-phone body.design-workspace header.layout-controller,
html.xsr-phone body.data-workspace header.layout-controller,
html.xsr-phone body.verify-workspace header.layout-controller,
html.xsr-phone body.admin-workspace header.layout-controller {
  overflow: visible !important;
  max-height: none !important;
  z-index: 400 !important;
  pointer-events: auto !important;
}

html.xsr-phone .layout-sections-dropdown,
html.xsr-phone .layout-nav-dropdown,
html.xsr-phone .controller-left,
html.xsr-phone .controller-right {
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 410;
}

html.xsr-phone .layout-sections-toggle,
html.xsr-phone .layout-nav-toggle {
  min-height: 44px;
  pointer-events: auto !important;
  touch-action: manipulation;
}

html.xsr-phone .layout-sections-menu,
html.xsr-phone .layout-nav-menu {
  position: fixed !important;
  top: max(4.5rem, calc(env(safe-area-inset-top, 0px) + 3.75rem)) !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  max-height: min(70dvh, calc(100dvh - 5.5rem)) !important;
  overflow-y: auto !important;
  z-index: 500 !important;
}

html.xsr-phone .layout-sections-menu .range-wrapper {
  display: flex !important;
  width: 100%;
}

html.xsr-phone .layout-sections-menu .layout-pin-btn {
  display: inline-flex !important;
}

/* dev.php */
html.xsr-phone .home-collab-grid,
html.xsr-phone .collab-boxes,
html.xsr-phone .dev-parts-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

html.xsr-phone .dashboard-header .header-actions,
html.xsr-phone .dashboard-header .user-panel,
html.xsr-phone .xsr-account-header-row {
  flex-wrap: wrap !important;
  max-width: 100% !important;
}