/* ============================================================
   GheReCess -- responsive.css
   Below 760px: sidebar and chat panel become two full-screen
   views toggled by JS, instead of a fixed two-column grid.
   ============================================================ */

@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: none;
  }

  .app[data-mobile-view="chat"] .sidebar {
    display: none;
  }

  .app[data-mobile-view="list"] .chat-panel {
    display: none;
  }

  .only-mobile {
    display: flex;
  }

  .message-row {
    max-width: 84%;
  }

  .message-list {
    padding: var(--space-4) var(--space-3) var(--space-2);
  }

  .composer {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .auth-card {
    padding: var(--space-5) var(--space-4);
  }

  .choice-row {
    flex-direction: column;
  }

  .modal-card {
    max-height: 92vh;
  }
}

@media (max-width: 420px) {
  .brand-mark {
    width: 96px;
  }

  .avatar-md {
    width: 38px;
    height: 38px;
  }
}