/* ==========================================================================
   Mobile Smart Inbox — phone-native rebuild of the 3-pane inbox.
   Loaded ONLY by smart-inbox.html. On <=600px the desktop header/nav/main are
   swapped for a paper-themed shell with the shared bottom tab bar (Inbox
   active). The desktop is a 3-column grid (conversation list / thread / AI
   summary); on a phone that becomes a 3-level iOS nav stack:

     LIST  ──tap a conversation──▶  THREAD  ──"Summary"──▶  AI SUMMARY

   The three real panes are relocated by smart-inbox.html's inline JS (moving the
   nodes preserves ids + listeners, so all inbox/auto-reply/summary logic is
   reused untouched — layout only). Light-paper theme is forced on mobile; the
   light-theme tokens already match the design handoff palette, so the panes get
   the right colors for free and this file only handles layout + shell chrome.

   Namespace: .im-*  (Inbox Mobile)  · palette = warm-paper (light only)
   ========================================================================== */

.im-shell { display: none; }

@media (max-width: 600px) {
  body > header,
  body > nav.main-nav,
  body > main,
  body > footer { display: none !important; }

  /* Off-screen pushed screens (translateX 100%) must not spawn a scrollbar. */
  html, body { overflow-x: hidden; }
  body.si-page { overflow: hidden; }

  .im-shell {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 30;
    background: #F5F2EC; color: #1A1A18;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    overscroll-behavior: none;
    /* iOS motion tokens: nav = decelerating push curve; tap = quick press. */
    --ios-nav: 340ms cubic-bezier(.32, .72, 0, 1);
    --ios-tap: 130ms ease;
  }

  /* ── iOS-style navigation stack ───────────────────────────────────────────
     The list stays in flow and recedes (parallax slide + dim); thread and
     summary are fixed overlays that push in from the right. Driven entirely by
     the .im-thread-open / .im-summary-open classes the JS toggles. */
  .im-screen { flex-direction: column; }

  #im-screen-list {
    display: flex; flex: 1; min-height: 0; position: relative;
    transition: transform var(--ios-nav); will-change: transform;
  }
  .im-shell.im-thread-open #im-screen-list { transform: translateX(-22%); }
  #im-screen-list::after {
    content: ''; position: absolute; inset: 0; z-index: 5;
    background: #000; opacity: 0; pointer-events: none;
    transition: opacity var(--ios-nav);
  }
  .im-shell.im-thread-open #im-screen-list::after { opacity: .09; }

  #im-screen-thread {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 40; background: #F5F2EC;
    transform: translateX(100%);
    transition: transform var(--ios-nav); will-change: transform;
  }
  .im-shell.im-thread-open #im-screen-thread { transform: translateX(0); }
  /* Thread itself recedes when the summary pushes over it. */
  .im-shell.im-summary-open #im-screen-thread { transform: translateX(-22%); }

  #im-screen-summary {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 50; background: #F5F2EC;
    transform: translateX(100%);
    transition: transform var(--ios-nav); will-change: transform;
  }
  .im-shell.im-summary-open #im-screen-summary { transform: translateX(0); }

  /* ── Headers ──────────────────────────────────────────────────────────── */
  .im-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid #E6E0D4; background: #F5F2EC;
  }
  .im-back {
    width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF;
    border: 1px solid #DDD8CE; color: #6B6B64; font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
    transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent;
  }
  .im-back:active { transform: scale(.9); }
  .im-title-sm {
    font: 800 16px system-ui; letter-spacing: -.2px; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* "Summary" affordance in the thread header — gold text button. */
  .im-head-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    background: #FAF3E6; border: 1px solid #ECDCAE; color: #9A7322;
    font: 700 12px system-ui; border-radius: 8px; padding: 7px 11px; cursor: pointer;
    transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent;
  }
  .im-head-btn:active { transform: scale(.94); }

  .im-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }

  /* Relocated panes fill their screens — drop the desktop card chrome (the
     paper screen provides the surface). The desktop tablet breakpoints
     (max-width:1100/760 in smart-inbox.html) set `.si-pane.summary{display:none}`
     and `.si-pane.list{max-height:280px}` — both still match these nodes after
     relocation, so we override display/max-height here (id selectors outrank
     them) or the summary screen renders blank and the list is capped. */
  #im-list-mount .si-pane.list,
  #im-thread-mount #inbox-detail-body,
  #im-summary-mount .si-pane.summary {
    border: none; border-radius: 0; background: transparent;
    height: auto; min-height: 0; max-height: none; overflow: visible; min-width: 0;
  }
  #im-summary-mount .si-pane.summary { display: flex; flex-direction: column; }

  /* ── LIST screen: the whole screen scrolls as one (header + search ride
     along, like the Inventory rail). ───────────────────────────────────── */
  #im-list-mount { padding-top: env(safe-area-inset-top); }
  #im-list-mount .si-pane.list { display: block; }
  #im-list-mount .si-col-head { padding: 14px 16px 10px; }
  #im-list-mount .si-col-title { font: 800 22px system-ui; letter-spacing: -.5px; }
  #im-list-mount .si-autoreply-row { padding: 11px 16px; }
  #im-list-mount .si-search-wrap { padding: 12px 16px; }
  #im-list-mount .si-list { overflow: visible; flex: none; padding-bottom: 8px; }
  /* Rows read as tappable cards that push the thread. */
  #im-list-mount .si-inbox-row {
    transition: transform var(--ios-tap), background var(--ios-tap);
    -webkit-tap-highlight-color: transparent;
  }
  #im-list-mount .si-inbox-row:active { transform: scale(.985); }

  /* ── THREAD screen: header fixed, messages scroll, composer pinned. ────── */
  #im-thread-mount {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  }
  #im-thread-mount #inbox-detail-body { flex: 1; min-height: 0; }
  #im-thread-mount #inbox-thread-view { flex: 1; min-height: 0; }
  #im-thread-mount .si-conv-header { padding: 12px 16px; }
  #im-thread-mount .si-msgs { flex: 1 1 auto; min-height: 0; padding: 16px; gap: 14px; }
  #im-thread-mount .si-msg { max-width: 88%; }
  #im-thread-mount .si-composer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  #im-thread-mount .si-inbox-empty { padding: 32px 24px; }

  /* ── AI SUMMARY screen: scrolls as one. ───────────────────────────────── */
  #im-summary-mount { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #im-summary-mount .si-sum { overflow: visible; padding: 16px; }
  /* The push header already reads "AI Summary" — hide the duplicate pane title,
     keep the refresh button (right side of .si-sum-head). */
  #im-summary-mount .si-sum-head-title { display: none; }
  #im-summary-mount .si-sum-head { justify-content: flex-end; }

  /* ── Bottom tab bar ───────────────────────────────────────────────────── */
  .im-tabbar {
    flex-shrink: 0; display: flex; align-items: center;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    border-top: 1px solid #DDD8CE; background: #FFFFFF;
    transition: transform var(--ios-nav), opacity var(--ios-nav);
  }
  .im-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 6px 0; background: none; border: none; cursor: pointer;
    text-decoration: none; position: relative; color: #AAAAAA; font: 600 10px system-ui;
    transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent;
  }
  .im-tab svg { stroke: currentColor; }
  .im-tab.is-active { color: #C9A96E; }
  .im-tab:active { transform: scale(.9); }
  /* A pushed screen is up — slide the tab bar down out of the way. */
  .im-shell.im-thread-open .im-tabbar,
  .im-shell.im-summary-open .im-tabbar { transform: translateY(100%); opacity: 0; pointer-events: none; }

  /* ── Respect the OS "reduce motion" setting. ──────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    #im-screen-list, #im-screen-list::after, #im-screen-thread, #im-screen-summary,
    .im-tabbar, #im-list-mount .si-inbox-row, .im-back, .im-head-btn, .im-tab { transition: none !important; }
  }
}