/* Navigation sur téléphone : une conversation à la fois, listes dans des tiroirs. */
#rooms-toggle { display: none; }
#mobile-backdrop { display: none; }
@media (max-width: 760px) {
  html, body { width: 100%; min-height: 100%; }
  .shell, .shell.server-view {
    width: 100%; max-width: none; height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 58px minmax(0, 1fr);
    overflow: hidden;
  }
  .topbar {
    min-width: 0; padding: 0 12px; gap: 8px;
    justify-content: space-between;
  }
  .topbar strong { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 18px; }
  .mark.small { flex: none; width: 32px; height: 32px; }
  .top-actions { min-width: 0; gap: 9px; font-size: 12px; }
  #status { display: block; max-width: 98px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions #admin-link { font-size: 0; }
  .top-actions #admin-link::after { content: 'Admin'; font-size: 12px; }
  .top-actions #leave { font-size: 0; padding: 8px 9px; white-space: nowrap; }
  .top-actions #leave::after { content: 'Quitter'; font-size: 12px; }

  .conversation { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; }
  .conversation-head { height: 56px; flex: none; padding: 0 12px; gap: 10px; }
  .conversation-head h2 { flex: 1; min-width: 0; font-size: 18px; }
  .conversation-head button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; }
  #rooms-toggle { display: inline-flex; order: -1; flex: none; padding: 6px 10px; font-size: 18px; }
  #users-toggle { flex: none; padding: 6px 10px; font-size: 12px; }
  .messages { padding: 14px 12px; overscroll-behavior: contain; }
  .composer { flex: none; padding: 10px 12px; gap: 8px; background: #171820; }
  .composer input { min-width: 0; height: 44px; font-size: 16px; }
  .composer button { min-width: 44px; height: 44px; padding: 0; }

  .sidebar, .users-panel, .shell.server-view .sidebar {
    display: block; position: fixed; top: 58px; bottom: 0;
    width: min(82vw, 320px); z-index: 12;
    background: #1e1f2a; padding: 16px 12px;
    overflow-y: auto; visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }
  .sidebar { left: 0; right: auto; transform: translateX(-105%); border-right: 1px solid var(--line); }
  .sidebar.visible { visibility: visible; transform: translateX(0); }
  .users-panel { right: 0; left: auto; transform: translateX(105%); border-left: 1px solid var(--line); }
  .users-panel.visible { visibility: visible; transform: translateX(0); }
  .sidebar h2, .users-panel h2 { font-size: 12px; }
  .room, .user { padding: 12px; font-size: 15px; }
  #mobile-backdrop:not([hidden]) { display: block; position: fixed; inset: 58px 0 0; z-index: 11; padding: 0; border: 0; border-radius: 0; background: #0009; }
  #mobile-backdrop[hidden] { display: none; }
  .shell.server-view .users-panel, .shell.server-view #users-toggle { display: none; }
}

@media (max-width: 370px) {
  .topbar strong { font-size: 16px; }
  #status { max-width: 72px; }
  .top-actions { gap: 5px; }
  .top-actions #admin-link::after { font-size: 11px; }
}