/* Paragram mobile.css v3 — pane-state driven, no JS dependency */
@media (max-width: 768px) {
  html, body { height: 100%; height: 100dvh; overflow: hidden; margin: 0; }

  /* Block-flow the shell on mobile */
  .app-shell {
    display: block !important;
    position: relative;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
  }

  /* DEFAULT (no data-mobile-view set yet, OR set to 'list'):
     show rail + sidebar, hide main + members */
  body:not([data-mobile-view="chat"]):not([data-mobile-view="members"]) .server-rail {
    display: flex !important;
    position: fixed; top: 0; left: 0;
    width: 56px; height: 100dvh;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 4px;
    overflow-y: auto;
    background: var(--bg);
    border-right: 1px solid var(--border);
    z-index: 20;
  }
  body:not([data-mobile-view="chat"]):not([data-mobile-view="members"]) .sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 56px; right: 0; bottom: 0;
    width: auto !important; min-width: 0 !important;
    height: 100dvh;
    background: var(--bg2);
    flex-direction: column;
    z-index: 15;
  }
  body:not([data-mobile-view="chat"]):not([data-mobile-view="members"]) .main {
    display: none !important;
  }
  body:not([data-mobile-view="chat"]):not([data-mobile-view="members"]) .member-list {
    display: none !important;
  }

  /* CHAT VIEW: full-screen main, hide everything else */
  body[data-mobile-view="chat"] .server-rail,
  body[data-mobile-view="chat"] .sidebar,
  body[data-mobile-view="chat"] .member-list {
    display: none !important;
  }
  body[data-mobile-view="chat"] .main {
    display: flex !important;
    position: fixed; inset: 0;
    width: 100vw !important; height: 100dvh !important;
    flex-direction: column;
    background: var(--bg);
    z-index: 30;
  }

  /* MEMBERS VIEW */
  body[data-mobile-view="members"] .server-rail,
  body[data-mobile-view="members"] .sidebar,
  body[data-mobile-view="members"] .main {
    display: none !important;
  }
  body[data-mobile-view="members"] .member-list {
    display: block !important;
    position: fixed; inset: 0;
    width: 100vw !important; min-width: 0 !important;
    height: 100dvh !important;
    border-left: none !important;
    background: var(--bg2);
    z-index: 40;
  }

  /* ─── Sidebar fills width ─── */
  .sidebar { width: 100% !important; min-width: 0 !important; }
  .sidebar-panel { width: 100%; }

  /* ─── Rail icons sized ─── */
  .rail-icon, .rail-avatar, .rail-server-icon { width: 40px !important; height: 40px !important; }
  .rail-icon svg { width: 18px; height: 18px; }

  /* ─── Chat content: REAL fix for the squish ─── */
  /* The main pane on desktop is `flex: 1` inside a row. On mobile inside a fixed full-screen container, force normal column flow. */
  .main, #mainPane {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .chat-header { padding-left: 52px !important; position: relative; flex-shrink: 0; }
  .chat-panel { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
  .chat-panel.hidden { display: none !important; }

  /* The conversation-info aside (secret-key panel etc) — force it BELOW or hide it */
  .conv-info, .conversation-info, .info-panel, .info-aside,
  aside.right-panel, .right-aside {
    display: none !important;
  }
  /* Generic: any aside that's a direct child of .main and not the member-list */
  .main > aside:not(.member-list):not(#memberList) {
    display: none !important;
  }

  /* Messages take full width */
  .messages, #messages, #serverMessages {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0;
    padding: 8px 10px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .message {
    max-width: 92% !important;
    padding: 8px 12px !important;
    word-break: break-word;
  }
  .message-body { font-size: 14px; line-height: 1.45; word-break: break-word; }

  /* Back button */
  #pgMobileBack {
    position: absolute; left: 8px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border: none; border-radius: 8px;
    background: var(--bg3); color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5;
  }
  #pgMobileBack svg { width: 20px; height: 20px; }
  body:not([data-mobile-view="chat"]) #pgMobileBack { display: none !important; }

  /* Composer */
  .composer, .message-composer, .chat-composer, .composer-area, footer.composer {
    width: 100% !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 6px;
    flex-shrink: 0;
  }
  .composer-input, #messageInput, #serverMessageInput {
    font-size: 16px !important;
    min-height: 40px;
    flex: 1;
  }
  .composer button, .composer .icon-btn { width: 38px; height: 38px; flex-shrink: 0; }

  /* No iOS zoom */
  input, textarea, select, .field-input { font-size: 16px !important; }

  /* Full-screen dialogs */
  dialog {
    max-width: 100vw !important; max-height: 100dvh !important;
    width: 100vw !important; height: 100dvh !important;
    margin: 0 !important; border-radius: 0 !important; padding: 0 !important;
  }
  dialog .dialog-card, dialog > div:first-child {
    max-width: 100vw !important; max-height: 100dvh !important;
    width: 100vw !important; height: 100dvh !important;
    border-radius: 0 !important; overflow-y: auto;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .settings-layout { display: flex !important; flex-direction: column !important; height: 100% !important; }
  .settings-tabs {
    flex-direction: row !important; overflow-x: auto;
    width: 100% !important; min-width: 0 !important;
    border-right: none !important; border-bottom: 1px solid var(--border);
    flex-shrink: 0; gap: 4px; padding: 4px !important;
  }
  .settings-tab { flex-shrink: 0; white-space: nowrap; padding: 8px 12px; font-size: 13px; }
  .settings-content { padding: 12px !important; overflow-y: auto; }

  /* Call overlay */
  #callOverlay, .call-overlay { padding: 12px !important; }
  .call-tiles, #callTiles { grid-template-columns: 1fr !important; gap: 8px; }
}

@media (max-width: 380px) {
  body:not([data-mobile-view="chat"]):not([data-mobile-view="members"]) .server-rail { width: 48px !important; }
  body:not([data-mobile-view="chat"]):not([data-mobile-view="members"]) .sidebar { left: 48px !important; }
  .chat-header { padding-left: 48px !important; }
}