@layer components {
  /* « Tous les messages privés »: header, search beside the chips, then the list; the frame and the header are
     transparent to the grid so the chips (in the frame, their counts follow the search) sit beside the search. */
  .privates-page {
    display: grid; gap: 0 12px; align-items: center; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title new" "subtitle new" "search chips" "list list" "states states";
  }
  .privates-head, .privates-frame { display: contents; }
  .privates-back { display: none; }
  .privates-title { grid-area: title; margin: 0; font-size: 22px; line-height: 1.2; align-self: end; }
  .privates-subtitle { grid-area: subtitle; margin: 0; color: var(--muted-foreground); font-size: 13px; align-self: start; }
  .privates-new { grid-area: new; justify-self: end; }
  .privates-new-pencil { display: none; }
  .privates-search { grid-area: search; margin-top: 16px; }
  .privates-chips { grid-area: chips; display: flex; gap: 8px; margin-top: 16px; }
  .privates-list { grid-area: list; min-width: 0; margin-top: 12px; }
  .privates-states { grid-area: states; margin-top: 12px; }
  ul.conversation-list { list-style: none; margin: 0; padding: 0; }
  .conversation-row-avatar--custom { background: none; }
  /* A group's stack is wider than the round slot; its discs keep their own size, phone included. */
  .privates-list .conversation-row-avatar:has(.avatar-stack) { width: auto; min-width: 32px; justify-content: flex-start; }
  .privates-list .conversation-row:is(:hover, :focus-within) { --presence-cutout: var(--muted); }
  .conversation-row-excerpt--phone { display: none; }
  /* The ⋯ borrows the room of the gaps around it, so a row's date sits where it does without a menu. */
  .conversation-row-more[data-menu-src] { margin-inline: -13px; }

  /* Loading and failure: the list gives way to the skeleton while the frame is busy, and to the alert on failure. */
  .privates-page:has(.privates-frame[aria-busy=true]) .privates-list, [data-state=error].privates-page .privates-list { display: none; }
  .privates-page:has(.privates-frame[aria-busy=true]) .list-state--loading { display: flex; }

  @media (max-width: 1099px) {
    .privates-page {
      gap: 0 12px; grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "back title new" "search search search" "chips chips chips" "list list list" "states states states";
    }
    .privates-back {
      grid-area: back; position: relative; display: inline-flex; align-items: center; justify-content: center;
      width: var(--tap); height: var(--tap); margin-left: -10px; color: var(--foreground); text-decoration: none;
    }
    .privates-title { align-self: center; font-size: 20px; }
    .privates-search { margin-top: 4px; }
    .privates-chips { margin-top: 12px; }
    .privates-subtitle, .privates-new-plus { display: none; }
    .privates-new-pencil { display: inline-flex; }
    .privates-new { width: var(--tap); height: var(--tap); padding: 0; border-color: transparent; background: transparent; color: var(--foreground); box-shadow: none; }
    .privates-new:is(:hover, :active) { background: var(--accent); color: var(--foreground); }
    .privates-new-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .conversation-row-excerpt--wide, .privates-page .conversation-row-meta { display: none; }
    .conversation-row-excerpt--phone { display: block; }
    .privates-range { display: none; }
    .privates-pages { justify-content: flex-end; }
    .privates-list .conversation-row-avatar { width: 40px; height: 40px; }
    .privates-list .conversation-row-avatar .avatar { width: 40px; height: 40px; font-size: 14px; }
    .privates-list .conversation-row-avatar:has(.avatar-stack) { height: auto; }
    .privates-list .avatar-stack .avatar { width: 28px; height: 28px; font-size: 12px; } /* decorative: initials */
  }
}