/* =============================================
   Responsive overrides – iPhone-safe layout
   =============================================
   GOLDEN RULE: the flex column layout must stay
   constrained to the viewport so .chat-input
   always sits at the bottom. ONLY scrollable
   children (.chat-messages, .conversation-list)
   get overflow-y:auto; everything else stays
   overflow:hidden.
   ============================================= */

/* --- Base: lock page to viewport --- */
html, body {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
  -webkit-text-size-adjust: 100% !important;
}

/* --- Root flex container: fill viewport exactly --- */
#root {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  position: relative !important;
}

/* --- Messenger shell --- */
.messenger-container {
  display: flex !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;          /* crucial for nested flex */
  max-height: 100% !important;
  overflow: hidden !important;
  /* safe-area padding for notch / home-indicator */
  padding-top: env(safe-area-inset-top) !important;
}

/* --- Sidebar --- */
.messenger-sidebar {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.conversation-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* --- Main chat column --- */
.messenger-main {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* --- Chat view: header + messages + input --- */
.chat-view {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  /* JS will set --keyboard-offset when the iOS keyboard is open */
  padding-bottom: var(--keyboard-offset, 0px) !important;
  transition: padding-bottom 120ms ease !important;
}

/* --- Chat header --- */
.chat-header {
  flex-shrink: 0 !important;
}

/* --- Messages: the ONLY part that scrolls --- */
.chat-messages {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* --- Chat input bar: must never leave the viewport --- */
.chat-input {
  flex-shrink: 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
  z-index: 20 !important;
  position: relative !important;
}

/* --- Mobile slide mechanics (preserve existing) --- */
@media (max-width: 768px) {
  .messenger-sidebar,
  .messenger-main {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
  .messenger-sidebar { z-index: 10 !important; }
  .messenger-main    { z-index: 5 !important; }
  .messenger-sidebar.has-selection {
    transform: translateX(-100%) !important;
  }
}

/* --- Prevent horizontal overflow on all elements --- */
* { max-width: 100vw; box-sizing: border-box; }
@media (min-width: 420px) { * { max-width: none; } }