/* Shared mobile geometry: keep controls inside the iPhone's safe area. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-bar-height: 52px;
  --mobile-nav-height: 62px;
}

@media (display-mode: standalone) and (max-width: 880px) {
  :root { --mobile-bar-height: 48px; --mobile-nav-height: 58px; }
}

@media (max-width: 880px) {
  .topbar {
    height: calc(var(--mobile-bar-height) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }
  .bottom-nav {
    height: calc(var(--mobile-nav-height) + var(--safe-bottom));
    padding-bottom: calc(4px + var(--safe-bottom));
    padding-left: max(8px, var(--safe-left));
    padding-right: max(8px, var(--safe-right));
  }
  .content {
    padding-top: calc(var(--mobile-bar-height) + 12px + var(--safe-top));
    padding-bottom: calc(var(--mobile-nav-height) + 34px + var(--safe-bottom));
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }
  .layout:has(.inbox), .layout:has(.inbox) .main {
    height: 100vh;
    height: 100dvh;
  }
  .inbox { padding-top: calc(var(--mobile-bar-height) + var(--safe-top)); }
  .inbox-list {
    padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom));
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
  .chat-panel {
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
  .chat-header { padding: 10px 12px; gap: 8px; }
  .chat-back { width: 40px; height: 40px; }
  .chat-name { font-size: 15px; }
  .chat-input-row { padding-bottom: calc(10px + var(--safe-bottom)); }
  .detail {
    top: calc(var(--mobile-bar-height) + var(--safe-top));
    bottom: calc(var(--mobile-nav-height) + var(--safe-bottom));
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  /* Personal pages use a smaller, separate fixed navigation shell. */
  .top-nav {
    height: calc(48px + var(--safe-top));
    padding: var(--safe-top) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
    gap: 8px;
  }
  .top-nav .logo, .top-nav .btn-logout { flex-shrink: 0; }
  .top-nav .nav-spacer { display: none; }
  .top-nav .nav-tabs { min-width: 0; overflow-x: auto; }
  .top-nav .nav-tab { flex-shrink: 0; }
  .page {
    padding-top: calc(64px + var(--safe-top));
    padding-bottom: calc(32px + var(--safe-bottom));
    padding-left: max(14px, var(--safe-left));
    padding-right: max(14px, var(--safe-right));
  }
  .drawer { top: var(--safe-top); bottom: var(--safe-bottom); right: var(--safe-right); }
  .lead-export-dialog { max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px); }
  body.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  }
  .login-page .card { padding: 28px 24px; }
  /* Prevent iOS focus zoom without disabling the user's pinch-to-zoom. */
  input, select, textarea { font-size: 16px !important; }
}