/* Load after accounts.css. */
#startup { position: fixed; inset: 0; z-index: 100; background: #1e1f22; color: #f2f3f5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; gap: 16px; }
#startup strong { font-size: 28px; }
#startup p { max-width: 420px; margin: 0; line-height: 1.5; }
#startup-hint { color: #b5bac1; font-size: 14px; }
#startup button, .connection-notice button { min-height: 44px; padding: 10px 18px; border-radius: 8px; background: #5865f2; color: white; border: 0; cursor: pointer; }
#startup[hidden], .connection-notice[hidden] { display: none !important; }
.connection-notice { position: fixed; z-index: 60; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); background: #202225; color: #f2f3f5; border: 1px solid #5865f2; box-shadow: 0 8px 24px #0008; border-radius: 12px; padding: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.connection-notice span { flex: 1 1 180px; font-size: 14px; }
.dialog-fallback::after { content: ''; position: fixed; inset: 0; background: #000a; z-index: 80; }
.dialog-fallback dialog[open] { position: fixed; inset: 0; margin: auto; z-index: 81; }

@media (max-width: 800px) {
  /* Let dynamic/keyboard-sized viewports shrink rather than enforcing 420px. */
  html, body { height: 100%; overflow: hidden; }
  .app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  main, .content-wrap, .channel-content, .text-view, .messages, .channel-scroll { min-height: 0; }
  .channel-header { min-width: 0; }
  #channel-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { flex-shrink: 0; }
  .channel-description, .header-divider { display: none; }
  .members-pane {
    top: calc(48px + env(safe-area-inset-top, 0px));
    bottom: env(safe-area-inset-bottom, 0px);
    right: env(safe-area-inset-right, 0px);
    max-width: calc(100vw - 56px);
  }
  .messages { overscroll-behavior: contain; }
  .message-heading { flex-wrap: wrap; gap: 4px 8px; }
  .message-heading strong { min-width: 0; overflow-wrap: anywhere; }
  .composer, .typing { flex-shrink: 0; }
  .composer textarea { font-size: 16px; }
  .composer button { min-width: 44px; min-height: 44px; }
  .text-view { padding-bottom: 8px; }
  .composer-tip { display: none; }
  .voice-view { justify-content: safe center; }
  /* Keep the call control visible while participant tiles scroll separately. */
  .voice-view:has(.voice-members:not(:empty)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    justify-items: center;
    gap: 12px;
    padding: 16px;
  }
  .voice-view:has(.voice-members:not(:empty)) .voice-members {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
  }
  .voice-view:has(.voice-members:not(:empty)) .join-button {
    grid-column: 1;
    grid-row: 2;
    position: static;
    transform: none;
    min-height: 44px;
    height: auto;
    max-width: 100%;
    margin: 0;
  }
  dialog {
    width: min(450px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 16px;
  }
  dialog h2, dialog p, .discover-card, .server-option { overflow-wrap: anywhere; }
  dialog input, dialog select { font-size: 16px; min-width: 0; }
  dialog .primary, .account-link, .server-option, .discover-card { min-height: 44px; }
  dialog .primary { position: sticky; bottom: 0; z-index: 1; }
  dialog h2 { padding-right: 20px; }
  .modal-close { width: 44px; height: 44px; top: 4px; right: 4px; }
  .reaction-picker { flex-wrap: wrap; }
  .reaction-picker button { min-width: 44px; min-height: 44px; }
  #toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); overflow-wrap: anywhere; }
}

@media (max-width: 800px) {
  /* Use the channel drawer on landscape phones too, not a 312px fixed sidebar. */
  .server-rail, .sidebar { position: fixed; z-index: 12; transform: translateX(-100vw); transition: transform .2s; }
  .drawer-open .server-rail, .drawer-open .sidebar { transform: translateX(0); }
  .server-rail { width: 64px; }
  .drawer-backdrop { position: fixed; inset: 0; background: #0008; z-index: 11; }
  .mobile-only { display: block; font-size: 20px; }
  .voice-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice-member { min-height: 120px; height: 120px; aspect-ratio: auto; }
  .channel-header {
    height: 56px;
    min-height: 56px;
    padding: 0 8px;
    gap: 4px;
  }
  /* Room chat remains a labelled action; give the title the remaining space. */
  .header-symbol { display: none; }
  #channel-title { flex: 1 1 0; font-size: 15px; }
  .header-actions { gap: 2px; margin-left: 0; align-items: center; }
  #mobile-menu, .header-actions > button { min-width: 44px; height: 44px; padding: 0 8px; }
  #room-chat { width: 76px; font-size: 12px; line-height: 1.2; white-space: normal; }
  .members-pane { top: calc(56px + env(safe-area-inset-top, 0px)); }
  .server-rail, .sidebar {
    top: env(safe-area-inset-top, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    min-height: 0;
  }
  .server-rail { left: env(safe-area-inset-left, 0px); }
  .sidebar {
    left: calc(64px + env(safe-area-inset-left, 0px));
    width: min(260px, calc(100vw - 80px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
  .channel-scroll { overscroll-behavior: contain; }
  .server-heading { flex-shrink: 0; }
  #server-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .channel { height: auto; min-height: 44px; }
  .group-heading button { width: 44px; height: 44px; padding: 0; }
  .user-panel { height: 60px; min-height: 60px; flex-shrink: 0; padding: 0 4px; }
  .profile-button { min-height: 44px; gap: 4px; }
  .profile-button > span:last-child { min-width: 0; }
  .profile-button strong, .profile-button small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-panel > button:not(.profile-button) { width: 44px; height: 44px; padding: 4px; }
  .voice-panel { flex-shrink: 0; gap: 4px; }
  .voice-panel > div { min-width: 0; }
  .voice-panel small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #disconnect { min-width: 44px; min-height: 44px; }
  .join-button { min-height: 44px; }
  .messages { padding: 12px; }
  .message { flex-wrap: wrap; column-gap: 8px; }
  .message-body { flex-basis: calc(100% - 48px); }
  .message-actions { flex-direction: row; margin: 4px 0 0 48px; opacity: 1; }
  .message-actions button, .reaction { min-width: 44px; min-height: 44px; }
  .composer { margin: 0 8px; padding: 0 8px; gap: 8px; }
  .typing { padding: 0 12px; }
  dialog label { margin-top: 14px; }
  dialog .primary { margin-top: 12px; }
}