@layer components {
  /* The agent conversation's chat bubble belongs to the phone's Accueil only. */
  .nav-conversation-icon { display: none; }

  /* Accueil on a phone or a tablet: the sidebar's favorites, places and private conversations as 48 px rows. */
  @media (max-width: 1099px) {
    .app-shell[data-screen="home"] [data-nav-group="search"] { display: none; }
    .app-shell[data-screen="home"] [data-nav-group="favorites"]:has(#sidebar_favorites > li) { display: contents; }
    .app-shell[data-screen="home"] .app-main { padding-bottom: 0; }
    .app-shell[data-screen="home"] :is(.chat-nav, .sidebar-list, .nav-section > .sidebar-list, .nav-group-row > .sidebar-list) {
      gap: 0; margin-top: 0;
    }

    /* Rows: 48 px, a 16 px label in the foreground colour, 10 px between the marker and the label. */
    .app-shell[data-screen="home"] .chat-nav .sidebar-link {
      min-height: 48px; gap: 10px; font-size: 16px; color: var(--foreground);
    }
    .app-shell[data-screen="home"] .chat-nav .sidebar-link > svg:first-child { width: 16px; height: 16px; margin: 0; }
    .app-shell[data-screen="home"] .chat-nav .sidebar-link > .type-icon--channel { width: 16px; margin: 0; }
    .app-shell[data-screen="home"] .nav-project > .nav-row-head .sidebar-label { font-weight: 600; }
    .app-shell[data-screen="home"] .nav-project-icon svg { width: 16px; height: 16px; }
    .app-shell[data-screen="home"] .nav-row-head > svg:last-child { width: 14px; height: 14px; }
    .app-shell[data-screen="home"] .nav-conversation-icon { display: inline-flex; flex: none; }

    /* Children start under their parent's label (the marker at 50 px, the label at 76 px). */
    .app-shell[data-screen="home"] .chat-nav :is(.nav-project, .nav-agent) > .sidebar-list > li > .sidebar-link {
      padding-left: 42px; gap: 10px;
    }
    .app-shell[data-screen="home"] .nav-agent-new, .app-shell[data-screen="home"] .nav-agent-new .sidebar-label {
      color: var(--foreground);
    }

    /* An unread row says so with a 7 px dot at its right edge (and the hidden text for screen readers). */
    .app-shell[data-screen="home"] .sidebar-entry .sidebar-count { display: none; }
    .app-shell[data-screen="home"] .sidebar-entry.is-unread .sidebar-dot { display: block; }
    .app-shell[data-screen="home"] .sidebar-dot { width: 7px; height: 7px; margin: 0 0 0 auto; }

    /* « Voir toutes les conversations » and « Tous les messages privés »: a muted 15 px label, its count, a chevron. */
    .app-shell[data-screen="home"] .chat-nav :is(.sidebar-link--muted, .nav-privates-all) { gap: 8px; color: var(--muted-foreground); }
    .app-shell[data-screen="home"] .chat-nav :is(.sidebar-link--muted, .nav-privates-all) .sidebar-label {
      flex: none; font-size: 15px;
    }
    .app-shell[data-screen="home"] :is(.nav-more-count, .nav-privates-count) { font-size: 14px; }
    .app-shell[data-screen="home"] .chat-nav :is(.sidebar-link--muted, .nav-privates-all) > svg:last-child {
      width: 16px; height: 16px; margin-left: auto;
    }

    /* Section heading: 48 px, its text 4 px below centre; the « + » is a 44 px touch area around a 24 px square. */
    .app-shell[data-screen="home"] .chat-nav .nav-section-head { min-height: 48px; padding: 4px 0 0 8px; gap: 8px; }
    .app-shell[data-screen="home"] .nav-section-toggle { min-height: 44px; }
    .app-shell[data-screen="home"] .nav-section-toggle svg { width: 14px; height: 14px; }
    .app-shell[data-screen="home"] .nav-section-head .sidebar-add {
      position: relative; width: 44px; height: 44px; margin: 0 -2px 0 0; border-radius: 0; background: transparent;
    }
    .app-shell[data-screen="home"] .nav-section-head .sidebar-add::before {
      content: ""; position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; box-sizing: border-box;
      border: 1px solid var(--border); border-radius: 6px;
    }
    .app-shell[data-screen="home"] .nav-section-head .sidebar-add:is(:hover, :active)::before { background: var(--sidebar-accent); }
    .app-shell[data-screen="home"] .nav-section-head .sidebar-add svg { position: relative; }

    /* The row's ⋯ shows while its row has the focus, centred on the 48 px row. */
    .app-shell[data-screen="home"] .nav-row-actions { top: 17px; }
  }
}