/* Mobile-specific overrides. Layered on top of app.css.
 *
 * Strategy:
 * - Global mobile responsive lives in app.css (820px breakpoint).
 * - This file handles two things only:
 *   1) The WhatsApp page: edge-to-edge, real-WhatsApp-on-iPhone feel
 *      (app sidebar hidden, list↔chat stack navigation, drawer for
 *      customer context, iOS safe-area honored).
 *   2) The inbox page: same list↔detail stack pattern.
 *
 * PWA standalone tweaks at the bottom.
 */

@media (max-width: 768px) {
  /* === Inbox: list ↔ detail stack ====================================== */
  .inbox { grid-template-columns: 1fr !important; }
  .inbox-list, .inbox-detail { border-radius: 8px; }
  .inbox-list { display: block; max-height: none; }
  /* When the URL has a selected action, hide the list and show detail.
     Triggered via .inbox-detail .detail-header existing in the DOM. */
  body:has(.inbox-detail .detail-header) .inbox-list { display: none; }

  /* === WhatsApp page: edge-to-edge, app chrome hidden ================== */
  /* The app sidebar wastes precious vertical pixels on a phone. On
     the WA page we hide it entirely and let the wa-shell own the
     full screen, matching how the real WhatsApp app behaves. */
  .app:has(.wa-shell) > .sidebar { display: none !important; }
  .app:has(.wa-shell) { grid-template-columns: 1fr; min-height: 100dvh; }
  .app:has(.wa-shell) > .main {
    padding: 0 !important;
    /* iOS notch + home indicator: the wa-shell would clip under the
       Dynamic Island / status bar without this. */
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  .wa-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    ) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Default state (URL = /admin/whatsapp, no chat selected) → list only */
  .wa-list { display: flex; border-right: none !important; }
  .wa-chat, .wa-context { display: none !important; }
  /* Chat selected → chat full-screen, list hidden */
  body:has(.wa-messages[data-conversation]) .wa-list { display: none; }
  body:has(.wa-messages[data-conversation]) .wa-chat { display: flex !important; }
  body:has(.wa-messages[data-conversation]) .wa-context { display: none !important; }

  /* WhatsApp-style chat bubble + composer sizing on mobile */
  .wa-composer { padding-bottom: max(10px, env(safe-area-inset-bottom, 0)); }
  .wa-composer textarea {
    min-height: 44px;
    font-size: 16px !important;  /* prevents iOS zoom on focus */
  }
  .wa-bubble { max-width: 82% !important; font-size: 15px !important; }
  .wa-chat-header { padding: 10px 12px !important; gap: 10px; }
  .wa-list-header { padding: 14px 16px !important; }
  .wa-row { padding: 12px 14px !important; }

  /* === Compact page headers ============================================ */
  .page-header { flex-wrap: wrap; gap: 8px !important; }
  .page-header h1 { font-size: 19px !important; }

  /* Tables become horizontally scrollable */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Dialogs full-screen-ish on phone */
  dialog { width: 92vw !important; max-width: 92vw !important; margin: auto; }
}

/* === PWA standalone tweaks ============================================ */
/* When launched from the home-screen icon, the OS no longer paints
   the browser chrome — the page itself is responsible for not
   clipping under the notch / dynamic island. body padding handles
   pages that aren't full-bleed (most of the app). The WA page is
   full-bleed and uses its own safe-area handling above. */
@media (display-mode: standalone) {
  body:not(:has(.wa-shell)) {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}