/* Baab v21 - phone fit. Plain CSS (independent of Tailwind) loaded last.
   Causes of "it crops a bit" that this fixes:
   1. The chat bar put the text box, +, mic, Speak and Send in ONE row; at 360px
      the text box was squeezed to a sliver. It now wraps: text box on its own line.
   2. 100vh / 85vh ignore the phone's address bar and keyboard -> dvh.
   3. iOS Safari zooms the whole page when a text field under 16px is focused,
      which looks like the screen being cropped/shifted. Fields are now 16px.
   4. Anything wider than the screen caused sideways scroll. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body { min-height: 100vh; min-height: 100dvh; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.min-h-screen { min-height: 100vh; min-height: 100dvh; }
.max-h-\[85vh\] { max-height: 85vh; max-height: 85dvh; }
.max-h-\[80vh\] { max-height: 80vh; max-height: 80dvh; }
img, video, canvas, svg, iframe { max-width: 100%; }
pre, table { max-width: 100%; overflow-x: auto; display: block; }
.glass-panel, .glass-sheet { min-width: 0; overflow-wrap: anywhere; }
header { max-width: 100vw; }
header > div { min-width: 0; }
.chat-input-bar { flex-wrap: wrap; }
.chat-input-bar > #chatInput { flex: 1 1 100%; min-width: 0; order: -1; }
.chat-input-bar { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
  header { padding-left: 12px !important; padding-right: 12px !important; gap: 8px; }
  header > div { flex-wrap: wrap; row-gap: 6px; }
  .chat-input-bar { padding: 12px !important; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .chat-input-bar > button:last-child { flex: 1 1 auto; }
  [class*="max-w-[80%]"] { max-width: 92% !important; }
  .fixed.inset-0 > div { max-width: calc(100vw - 16px); }
}
@media (max-width: 380px) { .chatSpeakBtnLabel { display: none; } }

/* Header welcome text had no length limit - at 360px it fights the menu
   button, logo, wordmark, and weather chip for space and had nothing
   stopping it wrapping messily into the avatar. Clamp it to one line with
   an ellipsis, same idea as the chat bar wrap fix above. */
@media (max-width: 640px) {
  #topRightWelcome, #topRightUser {
    max-width: 38vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}