/* ============================================
   inbox-phone.css — Phone-only Inbox conversation-list chrome
   Search field + row styling now shared with desktop — see inbox-list.css.
   This file only has what's still phone-specific: the floating New Message
   pill and the list's bottom clearance for it.
   ============================================ */

@media (max-width: 768px) {

  /* inbox.css sets .inbox-panel { overflow-y: auto } on phone, which makes the
     whole panel (search header + list) one scroll area — scrolling the list
     also scrolls the pinned search field out of view. Loaded after inbox.css
     with equal specificity, so this wins the cascade and leaves .inbox-list's
     own overflow-y:auto (unchanged, base rule) as the only scroll region —
     same as desktop, where .inbox-panel is already overflow:hidden. */
  .inbox-panel {
    overflow-y: hidden;
  }

  /* mobile.css sets #main-content { overflow-y: auto } globally (its own
     fix for a different drag bug — see that file's comment). It's normally
     inert since .inbox-split-layout fills it exactly, but when .inbox-list
     is shorter than the screen it has no overflow of its own to capture a
     swipe, so the touch falls through and #main-content becomes the thing
     that scrolls/bounces instead — dragging the pinned search field with
     it. A long list never hits this because .inbox-list itself consumes
     the swipe. Scoped to the Inbox route only (:has(.inbox-split-layout)),
     so other views keep #main-content's normal scroll behavior. */
  #main-content:has(.inbox-split-layout) {
    overflow: hidden;
  }

  .inbox-floating-new-btn {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border: none;
    border-radius: 999px;
    background: #6630d1;
    color: #ffffff;
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(102, 48, 209, 0.4);
    cursor: pointer;
  }

  /* List needs enough bottom padding to scroll fully clear of the floating
     pill. min-height:0 guards against flex's default min-height:auto ever
     fighting flex:1's fill-remaining-height (inbox.css); overscroll-
     behavior:contain stops this scroll from chaining to whatever, if
     anything, is still above it. */
  .inbox-list {
    padding-bottom: 76px;
    min-height: 0;
    overscroll-behavior: contain;
  }
}