/* The contacts page: a searchable list beside the open contact. Under 900px one of them shows at a time.
   The page is one screen tall like the inbox shell (100vh is only the fallback for browsers without dynamic units). */
.contacts-page { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.contacts-list-pane, .contacts-detail-pane { position: relative; min-width: 0; overflow-y: auto; }
.contacts-list-pane { border-right: 1px solid var(--line); }
.contacts-search { position: sticky; top: 0; z-index: 1; padding: var(--sp-3); background: var(--bg); border-bottom: 1px solid var(--line); }

.contacts-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.contacts-row:hover { background: var(--surface-2); }
.contacts-row.active { background: var(--accent-soft); }
.contacts-row:focus-visible { outline-offset: -2px; }
.contacts-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contacts-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-row-meta { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-banner { padding: var(--sp-2) var(--sp-3); background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--surface); color: var(--warn); font-size: var(--fs-sm); }
.contacts-banner p { margin: 0; }
.contacts-more { display: flex; justify-content: center; padding: var(--sp-4); }
.contacts-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

.contact-detail { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); max-width: 640px; }
.contact-detail p { margin: 0; }
.contacts-back { display: none; align-self: flex-start; }
.contact-section { font-size: var(--fs-md); }
.contact-convos { display: grid; gap: var(--sp-2); }
.contact-convo { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: inherit; text-decoration: none; }
.contact-convo:hover { background: var(--surface-2); }
.contact-convo-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.contact-convo-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.contact-convo-labels { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
#contact-title:focus-visible { outline: none; } /* focusable by script only (tabindex -1) */

/* One pane at a time. The page scrolls inside .app-main (see app.css), so the search box sticks to that scroll area
   and the bottom nav stays pinned. */
@media (max-width: 899px) {
  .contacts-page { display: block; height: auto; }
  .contacts-list-pane, .contacts-detail-pane { overflow: visible; }
  .contacts-list-pane { border-right: 0; }
  .contacts-page[data-detail="open"] .contacts-list-pane { display: none; }
  .contacts-page[data-detail="closed"] .contacts-detail-pane { display: none; }
  .contacts-page[data-detail="open"] .contacts-back { display: inline-flex; }
  .contacts-back, .contacts-more .btn, .contacts-actions .btn { min-height: 40px; }
}