/* Keep the compact chat header and composer usable on narrow phone screens. */
@media (max-width: 700px) {
  html, body { width: 100%; min-width: 0; overflow-x: hidden; }
  .app { display: block; width: 100%; min-height: 100vh; min-height: 100svh; }
  .rail { display: none !important; }
  .main { width: 100%; min-width: 0; }
  header { width: 100%; 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: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
  }
  .chat-head > div { width: 100%; 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; }
  .chat-box { width: 100%; min-width: 0; }
  .conversation { width: 100%; height: clamp(145px, 27vh, 215px); min-height: 145px; }
  #form, .input-row { width: 100%; min-width: 0; }
  .examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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; }
}

@media (max-width: 700px) and (max-height: 700px) {
  .view { padding-top: 16px; padding-bottom: 18px; }
  .conversation { height: 145px; min-height: 145px; }
  .examples-label { margin-top: 12px; }
}