/* Phone rules, measured at 375×812. Loaded last so a desk rule never wins.
   The top bar wrapped: the model chip ran to three lines and the status pill
   to two, and the shield button was a 32 px hand. */
@media (max-width: 480px) {
  .topbar .model-select-btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 132px !important;
  }
  .topbar #core-status-pill {
    white-space: nowrap !important;
    font-size: 0 !important;          /* the dot carries the state; the words stay for screen readers */
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .topbar .shield-toggle-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    flex: none !important;
  }
  /* the serif room title is wider than the old face: on "Governance" the
     row ran 21 px past the screen and cut the shield button off. The title
     and the model chip now give way (ellipsis) before the shield does. */
  .topbar .room-title-mobile {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .brand-edition-chip, .topbar #core-status-pill { flex: none; }
  .topbar .model-select-wrap { min-width: 0; }
  .topbar .model-select-btn { min-height: 44px !important; min-width: 0; }
  /* the last hands under 44 px on a phone: Print PDF (36), the profile's
     Upload (36), the theme choice (34) and the compare tabs (40) */
  .print-pdf-btn, .profile-avatar-actions .btn, .compare-tab, .theme-opt {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .topbar .model-select-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Composer on a phone: the field is ~215px wide; give the text room and never
   show the textarea's own scrollbar (it drew a stray bar beside the preset
   button whenever the placeholder wrapped). Measured 26 Sep 2026 at 375×812. */
@media (max-width: 480px) {
  .prompt-input.pp-field { padding-left: 40px !important; padding-right: 44px !important; }
  .prompt-input { scrollbar-width: none !important; }
  .prompt-input::-webkit-scrollbar { display: none !important; }
}