/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .page-header {
    padding: 0.75rem 1rem;
  }
  .page-main {
    padding: 1rem 0.75rem;
  }
  .chat-card {
    /* Allow the card to shrink below 460px when the keyboard is open
       and the dvh-based viewport is tiny - otherwise the card would
       overflow and push the composer off-screen. */
    min-height: min(460px, calc(100dvh - 220px));
    /* 230px accounts for: header (~60) + footer (~50) + main padding
       (32) + welcome block (~70) + gap (24). Tuned so a 600px-tall
       viewport just barely fits without forcing body scroll. */
    max-height: calc(100vh - 230px); /* fallback */
    max-height: calc(100dvh - 230px);
    border-radius: 18px;
  }
  /* iOS zooms in on any input/textarea whose font-size is below 16px when
     focused. Bump these to 16px on small screens so the page doesn't
     suddenly scale up the moment the user taps the field. */
  .prechat-row input,
  .chat-composer textarea {
    font-size: 16px;
  }
  .chat-card-header {
    padding: 0.8rem 0.9rem;
  }
  .bot-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.92rem;
  }
  .chat-log {
    padding: 1rem 0.85rem;
  }
  /* Bottom padding respects the iPhone home-indicator inset so the
     send/start button doesn't end up behind it on notched devices. */
  .chat-composer {
    padding: 0.75rem 0.85rem max(0.85rem, env(safe-area-inset-bottom));
  }
  .prechat-dock {
    padding: 0.75rem 0.85rem max(0.85rem, env(safe-area-inset-bottom));
  }
  .prechat-hero {
    padding: 1.75rem 1.25rem 1rem;
  }
  .welcome-sub {
    font-size: 0.95rem;
  }
}