/* Keep the compact chat header and composer usable on narrow phone screens. */
@media (max-width: 700px) {
  header { min-width: 0; gap: 8px; }
  header .status {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0;
    letter-spacing: 0;
  }
  header .status i { margin-right: 5px; }
  header .status::after {
    content: "MATHS ONLY";
    color: #8290a8;
    font: 8px Consolas, "Courier New", monospace;
    letter-spacing: .5px;
  }
  .chat-head {
    display: block;
    margin-bottom: 14px;
  }
  .chat-head > div { min-width: 0; }
  .chat-head h1 {
    white-space: nowrap;
    font-size: clamp(25px, 7vw, 32px);
    letter-spacing: -1px;
  }
  .chat-head p { max-width: 100%; }
  .chat-head .learn-link { margin-top: 12px; }
  .conversation {
    height: clamp(150px, 29vh, 230px);
    min-height: 150px;
  }
}

@media (max-width: 380px) {
  header { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .wordmark { font-size: 16px; }
  .wordmark-icon { width: 23px; height: 23px; margin-right: 4px; }
  header .status::after { content: "MATH ONLY"; font-size: 7px; }
  .chat-head h1 { font-size: 25px; }
}