/* Mobile-first composer improvements. Kept separate from the compact base stylesheet for safe maintenance. */
.toolbar-mobile { display: none; }
.mobile-nav-icon,
.mobile-nav-label { display: none; }

@media (min-width: 761px) and (max-width: 980px) {
  .mail-app { grid-template-columns: 76px minmax(230px, 290px) minmax(0, 1fr); }
  .mail-sidebar { align-items: center; padding: 1rem .5rem; }
  .mail-brand { justify-content: center; margin: .2rem 0 .8rem; }
  .mail-brand span,
  .compose-button > span:last-child,
  .mail-nav-button > span:last-child { display: none; }
  .compose-button { width: 44px; min-height: 44px; padding: 0; }
  .mail-nav { width: 100%; }
  .mail-nav-button { display: grid; width: 100%; place-items: center; padding: .8rem .25rem; }
  .mail-nav-button > span:first-child { width: auto; }
  .mail-message-panel { padding: 1.5rem; }
  .editor-toolbar { flex-wrap: wrap; gap: .1rem; padding: .35rem .5rem; overflow: visible; }
  .editor-toolbar button { min-width: 34px; height: 34px; }
  .editor-toolbar .toolbar-desktop { display: none; }
  .editor-toolbar .toolbar-mobile { display: inline; }
  .editor-toolbar .signature-toggle,
  .editor-toolbar .preview-toggle { min-width: max-content; padding: 0 .45rem; white-space: nowrap; }
  .toolbar-rule { display: none; }
}
@media (max-width: 760px) {
  /* The primary phone controls use plain-language labels as well as familiar emoji. */
  .mail-sidebar { gap: .28rem; padding: .48rem .5rem; }
  .mail-brand { flex: none; margin: 0 .15rem 0 0; }
  .mail-brand span { display: none; }
  .mail-brand img { width: 30px; height: 30px; }
  .compose-button,
  .mail-nav-button {
    display: inline-flex;
    width: auto;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: .45rem .46rem;
  }
  .mail-nav { gap: .15rem; }
  .mail-nav-bottom { display: none; }
  .compose-button .desktop-nav-icon,
  .compose-button .desktop-nav-label,
  .mail-nav-button .desktop-nav-icon,
  .mail-nav-button .desktop-nav-label { display: none; }
  .compose-button > span.mobile-nav-icon,
  .compose-button > span.mobile-nav-label,
  .mail-nav-button > span.mobile-nav-icon,
  .mail-nav-button > span.mobile-nav-label { display: inline; }
  .mobile-nav-icon { font-size: .84rem; line-height: 1; }
  .mobile-nav-label {
    color: inherit;
    font: 800 .59rem/1 Montserrat, sans-serif;
    letter-spacing: .015em;
    white-space: nowrap;
  }
  .composer-open .mail-sidebar { display: none; }
  .composer-open .mail-app { display: block; min-height: 100dvh; }
  .composer-open .mail-message-panel { display: block; min-height: 100dvh; padding: 0; }
  .composer-open .compose-page-title { display: none; }
  .composer-open .conversation { max-width: none; }
  .composer-open .rich-composer {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .composer-heading {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    min-height: 68px;
    padding: .9rem 1rem;
    background: #fff;
  }
  .composer-heading .mail-kicker { font-size: .62rem; }
  .composer-title { font-size: 1.12rem; }
  .composer-close {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
  }
  .composer-fields { gap: .72rem; padding: .95rem 1rem .8rem; }
  .composer-fields input { min-height: 42px; font-size: 16px; }
  .editor-shell { display: flex; flex: 1; flex-direction: column; }
  .editor-toolbar {
    position: sticky;
    top: 68px;
    z-index: 4;
    min-height: 0;
    flex-wrap: wrap;
    gap: .12rem;
    padding: .45rem .7rem;
    background: #fff;
  }
  .editor-toolbar button { flex: none; min-width: 38px; height: 36px; }
  .editor-toolbar .signature-toggle,
  .editor-toolbar .preview-toggle {
    min-width: max-content;
    padding: 0 .35rem;
    white-space: nowrap;
  }
  .editor-toolbar .toolbar-desktop { display: none; }
  .editor-toolbar .toolbar-mobile { display: inline; }
  .toolbar-rule { display: none; }
  .rich-editor,
  .html-editor,
  .composer-preview {
    min-height: clamp(220px, 36dvh, 360px);
    padding: 1rem;
    font-size: 16px;
    line-height: 1.6;
  }
  .composer-thread { padding: .85rem 1rem; }
  .composer-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 -10px 24px rgba(11, 45, 91, .07);
  }
  .composer-status { min-width: 0; margin: 0; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .composer-footer > div { width: auto; flex: 1; justify-content: flex-end; gap: .45rem; }
  .text-button { min-height: 42px; padding: .7rem .45rem; }
  .send-button { flex: 1; min-height: 46px; padding: .78rem .85rem; }
}

@media (max-width: 380px) {
  .mail-sidebar { gap: .14rem; padding-inline: .4rem; }
  .compose-button,
  .mail-nav-button { gap: .2rem; padding-inline: .32rem; }
  .mobile-nav-label { font-size: .55rem; }
  .composer-heading { min-height: 64px; }
  .composer-title { font-size: 1.03rem; }
  .editor-toolbar { top: 64px; padding-inline: .5rem; }
  .composer-footer { padding-inline: .75rem; }
  .text-button { font-size: .64rem; }
}