/*
 * LMe Mobile Foundation v567 — Stage 1.
 * Loaded after every legacy mobile layer. Owns viewport geometry, gesture previews,
 * adaptive rendering budgets and compositor-safe mobile transitions.
 */
:root {
  --lme-vv-height-v567: 100dvh;
  --lme-vv-width-v567: 100vw;
  --lme-vv-offset-top-v567: 0px;
  --lme-vv-offset-left-v567: 0px;
  --lme-keyboard-height-v567: 0px;
  --lme-mobile-fast-v567: 150ms;
  --lme-mobile-normal-v567: 230ms;
  --lme-mobile-slow-v567: 320ms;
  --lme-mobile-ease-v567: cubic-bezier(.2, .78, .2, 1);
  --lme-mobile-spring-v567: cubic-bezier(.16, 1, .3, 1);
}

html.lme-mobile-foundation-v567,
html.lme-mobile-foundation-v567 body {
  width: 100% !important;
  height: var(--lme-vv-height-v567, 100dvh) !important;
  min-height: var(--lme-vv-height-v567, 100dvh) !important;
  max-height: var(--lme-vv-height-v567, 100dvh) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.lme-mobile-foundation-v567 body .page-shell,
html.lme-mobile-foundation-v567 body #chatScreen,
html.lme-mobile-foundation-v567 body #authScreen {
  height: var(--lme-vv-height-v567, 100dvh) !important;
  min-height: var(--lme-vv-height-v567, 100dvh) !important;
  max-height: var(--lme-vv-height-v567, 100dvh) !important;
}

/* Allow the browser to keep native vertical scrolling while the controller owns horizontal edge gestures. */
html.lme-mobile-foundation-v567 body :is(#chatScreen, #chatSidebar, .chat-main, #messages, #chatList, .drawer-content, .profile-modal-card, .lme-archive-panel) {
  touch-action: pan-y pinch-zoom;
}

html.lme-mobile-foundation-v567 body :is(input, textarea, select, [contenteditable="true"], video, audio, input[type="range"]) {
  touch-action: manipulation;
}

/* ---------- VisualViewport + keyboard ---------- */
html.lme-mobile-foundation-v567.lme-mobile-keyboard-v567 body .chat-main,
html.lme-mobile-foundation-v567 body.lme-mobile-keyboard-v567 .chat-main {
  height: var(--lme-vv-height-v567, 100dvh) !important;
  max-height: var(--lme-vv-height-v567, 100dvh) !important;
}

html.lme-mobile-foundation-v567.lme-mobile-keyboard-v567 body #messageForm.composer,
html.lme-mobile-foundation-v567 body.lme-mobile-keyboard-v567 #messageForm.composer {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  transform: translate3d(0, 0, 0) !important;
  contain: layout paint style !important;
}

html.lme-mobile-foundation-v567.lme-mobile-keyboard-v567 body #messages,
html.lme-mobile-foundation-v567 body.lme-mobile-keyboard-v567 #messages {
  scroll-padding-bottom: 104px !important;
}

html.lme-mobile-foundation-v567.lme-mobile-keyboard-v567 body :is(#mainMenuPopover, #attachSheet, #attachMenu):not(.hidden),
html.lme-mobile-foundation-v567 body.lme-mobile-keyboard-v567 :is(#mainMenuPopover, #attachSheet, #attachMenu):not(.hidden) {
  max-height: min(58dvh, calc(var(--lme-vv-height-v567) - 84px)) !important;
}

/* ---------- Edge-back preview ---------- */
html.lme-mobile-foundation-v567 body [data-lme-edge-preview-v567="1"] {
  transform: translate3d(var(--lme-edge-x-v567, 0px), 0, 0) !important;
  opacity: var(--lme-edge-opacity-v567, 1) !important;
  transition: none !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  contain: layout paint style !important;
}

html.lme-mobile-foundation-v567 body .lme-archive-backdrop,
html.lme-mobile-foundation-v567 body #profileBackdrop,
html.lme-mobile-foundation-v567 body #menuBackdrop {
  opacity: var(--lme-edge-backdrop-opacity-v567, 1);
}

html.lme-mobile-foundation-v567 body.lme-mobile-edge-dragging-v567 {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing;
}

html.lme-mobile-foundation-v567 body.lme-mobile-edge-chat-preview-v567 #chatSidebar.sidebar.hidden-mobile {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

html.lme-mobile-foundation-v567 body.lme-mobile-edge-chat-preview-v567 .chat-main {
  display: grid !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: -18px 0 44px rgba(0, 0, 0, .34) !important;
}

html.lme-mobile-foundation-v567 body.lme-mobile-edge-chat-preview-v567 #chatSidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(6, 5, 10, calc(.18 * (1 - var(--lme-edge-progress-v567, 0))));
}

/* ---------- Compositor and containment budget ---------- */
html.lme-mobile-foundation-v567 body :is(.chat-item, .chat-list-item, .conversation-item) {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 74px;
}

/* Messages keep overflow available for reactions, reply tails and selection UI. */
html.lme-mobile-foundation-v567 body :is(.message-row, .chat-message, .message-item, [data-message-id]) {
  contain: style;
}

html.lme-mobile-foundation-v567 body :is(.chat-main, #chatSidebar, #menuDrawer, .profile-modal-card, .lme-archive-panel) {
  backface-visibility: hidden;
}

/* High tier keeps the premium surface. */
html.lme-mobile-tier-high-v567 body {
  --lme-mobile-surface-blur-v567: 18px;
  --lme-mobile-shadow-alpha-v567: .30;
}

/* Balanced tier removes perpetual animation but preserves transitions. */
html.lme-mobile-tier-balanced-v567 body .bg-orb,
html.lme-mobile-tier-balanced-v567 body :is(.profile-presence-orbit, .call-avatar-ring) {
  animation-duration: 12s !important;
}

html.lme-mobile-tier-balanced-v567 body :is(.drawer, .profile-modal-card, .lme-archive-panel, .attach-sheet-card) {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Low tier never removes functional motion; it removes expensive paint work. */
html.lme-mobile-tier-low-v567 body :is(.bg-orb, .ambient-orb, .profile-glow, .call-glow, .decorative-particles) {
  animation: none !important;
  filter: none !important;
  opacity: .12 !important;
}

html.lme-mobile-tier-low-v567 body :is(.drawer, .profile-modal-card, .lme-archive-panel, .attach-sheet-card, .screen-card) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}

html.lme-mobile-tier-low-v567 body :is(.chat-item, .chat-list-item, .message-row, .message-item, button, [role="button"]) {
  transition-duration: 120ms !important;
}

html.lme-mobile-backgrounded-v567 body *,
html.lme-mobile-reduced-motion-v567 body * {
  animation-play-state: paused !important;
}

html.lme-mobile-reduced-motion-v567 body [data-lme-edge-preview-v567="1"] {
  transition: none !important;
}

/* ---------- Landscape and narrow-device safety ---------- */
html.lme-mobile-landscape-v567 body .chat-main-top,
html.lme-mobile-landscape-v567 body #chatSidebar .sidebar-top {
  min-height: 54px !important;
  height: 54px !important;
  padding-top: max(5px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 5px !important;
}

@media (max-width: 380px) {
  html.lme-mobile-foundation-v567 body {
    --lme-mobile-inline-v566: 8px;
    --lme-mobile-header-v566: 62px;
  }
  html.lme-mobile-foundation-v567 body .chat-main-top :is(.icon-circle, .call-btn),
  html.lme-mobile-foundation-v567 body #sidebarMenuBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}