/* Layout móvel (referência: docs/10, seção Responsivo). Corte em max-width 767.98px.
   Menu vira drawer (☰), lista e chat aparecem um por vez, "+" flutuante. */
.mobile-topbar, .mobile-backdrop, .mobile-back { display: none; }
@media (max-width: 767.98px) {
  [hidden] { display: none !important; }
  .app-layout { display: block; height: 100dvh; overflow: hidden; }
  .mobile-topbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px; background: var(--bg-header, var(--bg-page)); border-bottom: 1px solid var(--border-soft); position: relative; z-index: 30; }
  .mobile-topbar button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 22px; cursor: pointer; }
  .mobile-topbar strong { font-size: 16px; font-weight: 600; }
  .navigation { position: fixed; inset: 0 auto 0 0; width: min(300px, 85vw); z-index: 200; transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto; }
  body.mobile-nav-open .navigation { transform: none; }
  .mobile-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 190; }
  body.mobile-nav-open .mobile-backdrop { display: block; }
  #inbox { display: block; height: calc(100dvh - 56px); position: relative; }
  #inbox .conversation-column { width: 100%; max-width: none; height: 100%; overflow-y: auto; }
  #inbox .main-panel { display: none; position: fixed; inset: 0; z-index: 120; width: 100%; max-width: none; flex-direction: column; background: var(--bg-page); }
  body.mobile-chat-open #inbox .main-panel { display: flex; }
  body.mobile-chat-open #inbox .conversation-column { display: none; }
  body.mobile-chat-open .mobile-topbar { display: none; }
  .mobile-back { display: inline-grid; place-items: center; position: absolute; top: 14px; left: 8px; z-index: 5; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 24px; cursor: pointer; }
  body.mobile-chat-open #inbox .main-panel .chat-header, body.mobile-chat-open #inbox .main-panel .conversation-header { padding-left: 48px; }
  .chat-header-actions { overflow-x: auto; max-width: 100%; }
  #secondary { display: block; height: calc(100dvh - 56px); overflow-y: auto; padding: 16px; }
  #new-chat { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 6px 18px #0006; }
  body.mobile-chat-open #new-chat { display: none; }
  dialog { width: calc(100vw - 24px); }
  .rp-tabs { overflow-x: auto; }
}