/*
 * Kratevia App Mode
 * Scoped presentation adjustments for future hybrid/WebView shells.
 */

body.app-mode {
  --ks-app-safe-top: env(safe-area-inset-top, 0px);
  --ks-app-safe-right: env(safe-area-inset-right, 0px);
  --ks-app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ks-app-safe-left: env(safe-area-inset-left, 0px);
  --ks-app-bottom-space: calc(20px + var(--ks-app-safe-bottom));
  --ks-app-modal-edge-top: max(26px, calc(var(--ks-app-safe-top) + 8px));
  --ks-app-modal-edge-bottom: max(32px, calc(var(--ks-app-safe-bottom) + 10px));
  --ks-app-modal-edge-inline: max(12px, var(--ks-app-safe-left), var(--ks-app-safe-right));
  --ks-app-modal-max-height: calc(100dvh - var(--ks-app-modal-edge-top) - var(--ks-app-modal-edge-bottom));
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

body.app-mode,
body.app-mode .app-shell,
body.app-mode .app-content,
body.app-mode .page-content,
body.app-mode [data-page-content] {
  max-width: 100%;
}

body.app-mode .app-content,
body.app-mode .page-content,
body.app-mode [data-page-content] {
  padding-left: max(var(--ks-app-safe-left), 12px);
  padding-right: max(var(--ks-app-safe-right), 12px);
  padding-bottom: var(--ks-app-bottom-space);
}

body.app-mode.layout-header .app-header {
  padding-top: var(--ks-app-safe-top);
}

body.app-mode.layout-sidebar .app-sidebar {
  padding-top: var(--ks-app-safe-top);
  padding-bottom: var(--ks-app-safe-bottom);
}

body.app-mode [data-admin-menu-toggle],
body.app-mode [data-admin-sidebar],
body.app-mode [data-layout-switch-wrapper],
body.app-mode .settings-hub-section--layout {
  display: none !important;
}

body.app-mode .header-nav-link,
body.app-mode .sidebar-nav-link,
body.app-mode .profile-dropdown-link,
body.app-mode .settings-hub-row button,
body.app-mode .notifications-view-btn,
body.app-mode .btn,
body.app-mode button,
body.app-mode a {
  touch-action: manipulation;
}

body.app-mode .header-nav-link,
body.app-mode .sidebar-nav-link,
body.app-mode .profile-dropdown-link,
body.app-mode .header-action-btn,
body.app-mode .btn {
  min-height: 44px;
}

body.app-mode .profile-dropdown,
body.app-mode .settings-hub-theme-menu,
body.app-mode .bmi-info-popover,
body.app-mode .habit-reminders-popover,
body.app-mode .habit-category-menu,
body.app-mode .habits-order-mobile-popover {
  max-width: calc(100vw - var(--ks-app-safe-left) - var(--ks-app-safe-right) - 16px);
}

body.app-mode .ks-modal,
body.app-mode .ui-dialog,
body.app-mode .friends-modal-dialog,
body.app-mode .subscription-limit-modal,
body.app-mode .notification-modal,
body.app-mode .modal-content {
  max-width: calc(100vw - var(--ks-app-safe-left) - var(--ks-app-safe-right) - 24px);
  max-height: var(--ks-app-modal-max-height);
}

body.app-mode .ks-modal__body,
body.app-mode .ui-dialog-body,
body.app-mode .friends-modal-body,
body.app-mode .subscription-limit-modal__list,
body.app-mode .notification-modal-body {
  min-height: 0;
  max-height: calc(var(--ks-app-modal-max-height) - 124px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.app-mode .ks-modal__footer,
body.app-mode .ui-dialog-footer,
body.app-mode .friends-modal-footer,
body.app-mode .subscription-limit-modal__footer {
  flex: 0 0 auto;
  padding-bottom: max(12px, var(--ks-app-safe-bottom));
}

body.app-mode .ks-modal__header,
body.app-mode .ui-dialog-header,
body.app-mode .friends-modal-header {
  flex: 0 0 auto;
}

body.app-mode .friends-modal,
body.app-mode .profile-share-modal,
body.app-mode .collection-avatar-viewer {
  padding-top: var(--ks-app-modal-edge-top);
  padding-bottom: var(--ks-app-modal-edge-bottom);
}

body.app-mode[data-page="missions"] .ks-modal.mission-modal:not(.mission-cover-picker-modal) {
  max-height: var(--ks-app-modal-max-height);
}

body.app-mode.auth-page {
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding:
    max(18px, calc(var(--ks-app-safe-top) + 14px))
    max(10px, var(--ks-app-safe-right))
    max(28px, calc(var(--ks-app-safe-bottom) + 24px))
    max(10px, var(--ks-app-safe-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.app-mode.auth-page .auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(
    100dvh
    - max(18px, calc(var(--ks-app-safe-top) + 14px))
    - max(28px, calc(var(--ks-app-safe-bottom) + 24px))
  );
}

body.app-mode.auth-page .auth-card {
  width: min(100%, 440px);
  margin-block: auto;
}

body.app-mode.auth-page .auth-topbar-home:not(.auth-topbar-home--app-back) {
  display: none;
}

body.app-mode.auth-page .auth-header {
  padding-top: var(--space-3-5);
  padding-bottom: var(--space-2);
}

body.app-mode.auth-page .auth-header .ks-logo {
  margin-bottom: var(--space-2);
}

.ks-app-mode-offline {
  position: fixed;
  left: max(12px, var(--ks-app-safe-left));
  right: max(12px, var(--ks-app-safe-right));
  bottom: max(12px, var(--ks-app-safe-bottom));
  z-index: calc(var(--z-toast, 1300) + 20);
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.94);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

body.app-mode.is-offline .ks-app-mode-offline {
  display: flex;
}

body.app-mode .ks-toast-host {
  top: max(72px, calc(var(--ks-app-safe-top) + 14px));
  bottom: auto;
  z-index: calc(var(--z-modal, 1210) - 10);
  width: min(520px, calc(100vw - var(--ks-app-safe-left) - var(--ks-app-safe-right) - 24px));
}

body.app-mode .ks-toast:not([role="button"]) {
  pointer-events: none;
}

body.app-mode .ks-toast:not([role="button"]) * {
  pointer-events: none;
}

body.app-mode .ks-toast:not([role="button"]) :is(a, button, [role="button"]),
body.app-mode .ks-toast:not([role="button"]) :is(a, button, [role="button"]) * {
  pointer-events: auto;
}

body.app-mode .ks-toast--digest-rich {
  pointer-events: none;
}

body.app-mode .ks-toast--digest-rich :is(a, button, [role="button"]),
body.app-mode .ks-toast--digest-rich :is(a, button, [role="button"]) * {
  pointer-events: auto;
}

@media (max-height: 760px) {
  body.app-mode.auth-page .auth-container {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  body.app-mode .app-content,
  body.app-mode .page-content,
  body.app-mode [data-page-content] {
    padding-left: max(var(--ks-app-safe-left), 10px);
    padding-right: max(var(--ks-app-safe-right), 10px);
  }

  body.app-mode .app-sidebar {
    width: min(320px, calc(100vw - 24px));
  }

  body.app-mode .profile-dropdown,
  body.app-mode .notifications-dropdown,
  body.app-mode .settings-hub-theme-menu {
    max-height: calc(100dvh - var(--ks-app-safe-top) - var(--ks-app-safe-bottom) - 16px);
  }

  body.app-mode .ks-toast-host {
    top: max(70px, calc(var(--ks-app-safe-top) + 12px));
    bottom: auto;
  }
}