#app {
  height: calc(100vh - 72px);
  padding: 20px 28px;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(300px, 340px) minmax(0, 1fr);
  gap: 16px;
}

.pane { min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; overflow: hidden; }
.pane-title {
  padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.list { overflow: auto; flex: 1; }

/* Sidebar: accounts pane stacks account list, action card and stats card */
.sidebar { display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.sidebar .pane { flex: none; }

/* ---- Tablet / small desktop (iPad, split-screen windows): collapse the
   account sidebar into an icon-only rail so 2 real columns (conversations +
   chat) still fit comfortably side by side. ---- */
@media (max-width: 1099px) and (min-width: 701px) {
  #app { grid-template-columns: 76px minmax(280px, 320px) minmax(0, 1fr); padding: 14px 16px; gap: 12px; }
  #stats-pane, #account-actions, #accounts-pane .pane-title-label, #add-account-side { display: none; }
  #accounts-pane .pane-title { justify-content: center; padding: 12px 8px; }
  #accounts .item-main, #accounts .count { display: none; }
  #accounts .item { justify-content: center; padding: 10px 4px; }
}

/* ---- Phone / narrow window: one screen at a time, app-style navigation
   (accounts -> conversations -> chat), driven by #app[data-mobile-step]. ---- */
@media (max-width: 700px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 0; gap: 0; height: calc(100vh - 60px); }
  /* Hide the whole grid item (not just its inner content) so hidden steps take
     no row/column space — data-mobile-step picks exactly one to display. */
  #app > * { display: none; height: 100%; border-radius: 0; }
  #app[data-mobile-step="accounts"] > .sidebar { display: flex; }
  #app[data-mobile-step="conversations"] > #conversations-pane { display: flex; }
  #app[data-mobile-step="chat"] > #chat-pane { display: flex; }

  .sidebar { flex-direction: column; overflow: visible; gap: 0; }
  .sidebar .pane { flex: 1 1 auto; min-height: 0; border-radius: 0; }
  #stats-pane { flex: none; max-height: 42vh; }
  .pane { border-radius: 0; }

  button.mobile-back { display: inline-flex; }
}