/* Phones: the tabs become an app-style bottom bar, chat boxes fill the screen, touch targets grow */
@media (max-width: 700px) {
  :root { --tabbar: 62px; }
  /* No blur here: backdrop-filter would trap the fixed tab bar inside the top bar */
  .topbar { padding: 10px 14px; gap: 10px; flex-wrap: nowrap; background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Bottom tab bar */
  .topbar nav.tabs {
    position: fixed; inset: auto 0 0 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .topbar nav.tabs a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
    font-size: 11.5px; border-radius: 10px; white-space: nowrap;
  }
  .tab-icon { margin: 0; font-size: 20px; line-height: 1.1; }
  main { padding: 14px 12px calc(var(--tabbar) + 20px + env(safe-area-inset-bottom)); }

  /* Chat boxes take the screen height minus the top and bottom bars */
  .phone, .conv-detail { height: calc(100dvh - 60px - var(--tabbar) - 34px - env(safe-area-inset-bottom)); }
  .msg { max-width: 88%; }
  .conv-lead { max-height: 26vh; }

  /* Cards and controls */
  .card { padding: 14px; border-radius: 12px; margin-bottom: 12px; }
  button { min-height: 42px; }
  button.small { min-height: 36px; }
  label.check { align-items: flex-start; }
  label.check input { margin-top: 3px; }
  .save-bar { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat .num { font-size: 28px; }
}