@layer components {
  .chat-nav {
    display: flex; flex-direction: column; gap: 1px;
    margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--sidebar-border);
  }

  .sidebar-search { position: relative; margin: 0; padding: 2px 0 8px; }
  .sidebar-search svg { position: absolute; left: 9px; top: 10px; color: var(--muted-foreground); pointer-events: none; }
  .sidebar-search-hotkey {
    position: absolute; top: 5px; right: 6px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--background); color: var(--muted-foreground); font: inherit; line-height: 18px; pointer-events: none;
  }
  .sidebar-search .input { height: 30px; padding-left: 28px; padding-right: 48px; font-size: 13px; background: var(--background); }

  .chat-nav .sidebar-section { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

  /* Accordion sections: a heading button folds its list; the container's data-collapsed drives the CSS. */
  .nav-section-head { display: flex; align-items: center; gap: 6px; padding: 14px 8px 4px; }
  .nav-section-title, .nav-section-toggle {
    color: var(--muted-foreground); font-size: 13px; font-weight: 600; line-height: 20px;
    letter-spacing: 0.02em; text-transform: uppercase;
  }
  .nav-section-toggle {
    display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 6px;
    background: transparent; font-family: inherit; text-align: start; cursor: pointer;
  }
  .nav-section-toggle svg { width: 12px; height: 12px; flex: none; }
  .nav-section-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
  .nav-section-title { flex: 1; }
  .nav-section-menu { display: flex; }
  /* Settings stay open on the phone's Vous screen: nothing folds there. */
  @media (max-width: 1099px) {
    .sidebar-search-hotkey { display: none; }
    .app-shell[data-screen="you"] .nav-section[data-collapsed] > .sidebar-list > li { display: list-item; }
    .app-shell[data-screen="you"] .nav-section-toggle { pointer-events: none; }
    .app-shell[data-screen="you"] .nav-section-toggle svg { display: none; }
  }
  .sidebar-add {
    padding: 0; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    margin: -4px -4px -4px 0; border-radius: 6px; color: var(--muted-foreground); text-decoration: none;
  }
  .sidebar-add:is(:hover, :active) { background: var(--sidebar-accent); color: var(--sidebar-foreground); }

  .sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .sidebar-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .sidebar-count {
    flex: none; margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
    font-size: 13px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums;
    background: var(--jx-accent); color: var(--jx-accent-fg);
  }
  .sidebar-count[hidden] { display: none; }
  /* Mentions wait for an answer: amber, like every pending item. */
  .sidebar-count--wait { background: var(--jx-wait); }
  /* A person's unread count is amber, its text on the page colour. */
  .sidebar-entry .sidebar-count { background: var(--jx-wait); color: var(--background); font-weight: 500; }

  .sidebar-dot { display: none; flex: none; margin: 0 6px 0 auto; width: 6px; height: 6px; border-radius: 999px; background: var(--jx-accent); }
  .sidebar-entry.is-unread .sidebar-label { font-weight: 600; }
  .sidebar-entry.is-unread:not(:has(.sidebar-count)) .sidebar-dot { display: block; }
  .sidebar-entry:not(.is-unread) .sidebar-unread-text { display: none; }
  .sidebar-link--muted { color: var(--muted-foreground); }

  /* Rows: a 24 px marker at 8 px, the label at 40; children of a project or an agent start at 40. */
  .nav-row-head { width: 100%; border: 0; background: transparent; font-family: inherit; font-size: inherit; text-align: start; cursor: pointer; }
  .nav-group-row, .sidebar-entry { position: relative; }
  .sidebar-link > svg:first-child:not(:last-child) { margin-inline: 5px; }
  .type-icon > .presence { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; }
  /* The kind of conversation, as in the header: « # », a padlock, the person's avatar or the agent's tinted tile. */
  .type-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--muted-foreground); }
  .type-icon svg { width: 16px; height: 16px; }
  .type-icon--agent {
    border-radius: 6px; color: var(--agent-color);
    background: light-dark(color-mix(in oklch, var(--agent-color) 12%, transparent), color-mix(in oklch, var(--agent-color) 16%, transparent));
  }
  .type-icon--agent svg { width: 14px; height: 14px; }
  /* A stack is wider than the 24px slot: let it size itself and stay out of the label's way. */
  .type-icon--group { width: auto; min-width: 24px; }
  .sidebar-meta { display: block; flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; color: var(--muted-foreground); }
  .sidebar-link:has(.sidebar-meta) .sidebar-label { flex: 0 1 auto; }
  .type-icon--webhook svg { width: auto; height: auto; }
  .sidebar-link > .type-icon--channel { margin-inline: 1px; }
  .nav-agent-icon, .nav-project-icon { flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; }
  .nav-project-icon { display: inline-flex; }
  .nav-agent-icon {
    border-radius: 6px;
    background: light-dark(color-mix(in oklch, var(--agent-color) 12%, transparent), color-mix(in oklch, var(--agent-color) 16%, transparent));
  }
  .nav-project > .nav-row-head .sidebar-label { font-weight: 500; }
  /* Chevrons sit at the right, pointing down once the row is open. */
  .nav-row-head > svg:last-child, .sidebar-link--muted > svg:last-child { width: 12px; height: 12px; margin: 0; }
  .nav-row-head[aria-expanded="true"] > svg:last-child { transform: rotate(90deg); }
  .nav-group-row > .sidebar-list { padding: 0; }
  :is(.nav-project, .nav-agent) > .sidebar-list > li > .sidebar-link { padding-left: 40px; }
  .nav-agent > .sidebar-list > li > .sidebar-link { min-height: 28px; gap: 6px; }
  .nav-agent > .sidebar-list > li > .sidebar-link > svg { margin: 0; }
  .nav-agent > .sidebar-list > li > .sidebar-link[aria-current="page"]::before { top: 6px; bottom: 6px; }
  .nav-agent-new, .sidebar-link--muted { color: var(--muted-foreground); }
  .nav-more-count { display: none; }
  .nav-privates-all { min-height: 28px; gap: 6px; color: var(--muted-foreground); }
  .nav-privates-all .sidebar-label { flex: none; }
  .nav-privates-all svg { margin: 0; }
  .nav-privates-count { font-size: 12px; font-variant-numeric: tabular-nums; } /* design */
  .sidebar-context { display: none; flex: 0 10 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; color: var(--muted-foreground); } /* design */
  #sidebar_favorites .sidebar-context { display: block; }
  .sidebar-link:has(.sidebar-context) .sidebar-label { flex: 0 1 auto; }

  /* Hover and focus: a muted row with ☆ and ⋯ (and + for an agent) at the right, in the place of the unread marks. */
  .sidebar-link:is(:hover, :focus-visible):not([aria-current="page"]),
  .sidebar-link:not([aria-current="page"]):has(+ .nav-row-actions:is(:hover, :focus-within)) { background: var(--muted); }
  .nav-row-actions { position: absolute; top: 9px; right: 8px; z-index: 1; display: none; align-items: center; gap: 8px; height: 14px; }
  .nav-group-row > .nav-row-actions { right: 28px; }
  .sidebar-link:focus-visible + .nav-row-actions, .nav-row-actions:focus-within { display: flex; }
  /* A tap hovers too, and iOS Safari drops the click of a tap whose hover reveals content: a real hover only (and its
     press). */
  @media (hover: hover) {
    .sidebar-link:is(:hover, :active) + .nav-row-actions, .nav-row-actions:hover { display: flex; }
  }
  .nav-row-action {
    display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: var(--muted-foreground); cursor: pointer;
  }
  .nav-row-action[hidden] { display: none; }
  .nav-row-action:is(:hover, :focus-visible) { color: var(--foreground); }
  .sidebar-link:has(+ .nav-row-actions:is(:hover, :focus-within) > :not([hidden])) :is(.sidebar-count, .sidebar-dot) { visibility: hidden; }
  /* A touch screen has no hover: the project's ⋯ stays in reach. */
  @media (hover: none) { .nav-project > .nav-row-actions { display: flex; } }
  /* Favoris stays out of sight while it holds no row (and nothing is being dragged over it). */
  [data-nav-group="favorites"]:not(:has(#sidebar_favorites > li)):not(:has(.nav-drop-zone:not([hidden]))) { display: none; }

  /* An agent row is unread for the unread conversations it does not list; folded, its listed ones count too. Its
     head then says so: dot, hidden text, semi-bold name. */
  .nav-agent:is(.is-unread, :is([data-collapsed], .nav-section[data-collapsed] *):has(.is-unread)) > .nav-row-head {
    --nav-head-mark: block; --nav-head-weight: 600;
  }
  .nav-agent > .nav-row-head :is(.sidebar-dot, .nav-agent-unread-text) { display: var(--nav-head-mark, none); }
  .nav-agent > .nav-row-head .sidebar-label { font-weight: var(--nav-head-weight); }
  /* An agent in a folded section has its children hidden: its chevron shows the folded look. */
  .nav-section[data-collapsed] .nav-agent > .nav-row-head > svg:last-child { transform: none; }

  /* Folded: a project shows its unread and open channels only, an agent only its open conversation. */
  .nav-project[data-collapsed] > .sidebar-list > li:not(.is-unread, :has([aria-current="page"])) { display: none; }
  .nav-agent[data-collapsed] > .sidebar-list > li:not(:has([aria-current="page"])) { display: none; }

  /* A folded section keeps its unread rows and the open one; projects flatten, their name in context. */
  .nav-section[data-collapsed] > :not(.nav-section-head, .sidebar-list) { display: none; }
  .nav-section[data-collapsed] > .sidebar-list > li:not(.sidebar-entry, .nav-agent, .nav-project, :has([aria-current="page"])) { display: none; }
  .nav-section[data-collapsed] > .sidebar-list > .sidebar-entry:not(.is-unread, :has([aria-current="page"])) { display: none; }
  .nav-section[data-collapsed] > .sidebar-list > :is(.nav-project, .nav-agent):not(.is-unread, :has(.is-unread, [aria-current="page"])) { display: none; }
  .nav-section[data-collapsed] > .sidebar-list > .nav-project > :is(.nav-row-head, .nav-row-actions) { display: none; }
  .nav-section[data-collapsed] .nav-project > .sidebar-list > li:not(.is-unread, :has([aria-current="page"])) { display: none; }
  .nav-section[data-collapsed] .nav-project > .sidebar-list > li > .sidebar-link { padding-left: 8px; }
  .nav-section[data-collapsed] .sidebar-context { display: block; }
  .nav-section[data-collapsed] .nav-agent > .sidebar-list > li:not(:has([aria-current="page"])) { display: none; }

  /* The eight latest private conversations, plus the unread ones and the open one. */
  #sidebar_privates > li:nth-child(n+9):not(.is-unread, :has(.is-unread), :has([aria-current="page"])) { display: none; }
  /* The link leads to what the list hides: under nine rows, nothing is hidden. */
  #sidebar_privates:not(:has(> li:nth-child(9))) + .nav-privates-all { display: none; }

  /* Mobile shell: Accueil shows the search, the places and the private conversations, Vous the workspace's
     settings and the sign-out; rows a finger hits, the page scrolling rather than the list. */
  @media (max-width: 1099px) {
    .app-shell[data-screen] :is(.sidebar-head, .sidebar-foot, .nav-group) { display: none; }
    .app-shell[data-screen="home"] :is([data-nav-group="search"], [data-nav-group="places"], [data-nav-group="privates"]),
    .app-shell[data-screen="you"] [data-nav-group="settings"] { display: contents; }
    .app-shell[data-screen="you"] .chat-nav { display: none; }
    .app-shell[data-screen="you"] .sidebar-foot {
      display: flex; margin-top: 12px; padding: 8px var(--gutter); border-top: 1px solid var(--sidebar-border);
    }
    /* Vous opens on the person: the foot keeps the sign-out alone, a full row with its word. */
    .app-shell[data-screen="you"] .sidebar-me { display: none; }
    .app-shell[data-screen="you"] .sidebar-foot form { flex: 1; }
    .app-shell[data-screen="you"] .sidebar-sign-out {
      width: 100%; min-height: calc(var(--tap) + 2px); padding-inline: 14px; justify-content: center; gap: 12px;
      border-radius: var(--radius-lg); background: var(--card); font-size: var(--text-body);
    }
    /* The settings group is named after the workspace, its rows are the Vous rows': a card, a chevron at the end. */
    .app-shell[data-screen="you"] .nav-space-title {
      display: block; margin: 12px 8px 0; padding: 0 4px 8px; font-size: var(--text-meta); font-weight: 600;
      color: var(--muted-foreground);
    }
    .app-shell[data-screen="you"] [data-nav-group="settings"] .nav-section-head { display: none; }
    .app-shell[data-screen="you"] #sidebar_settings {
      gap: 0; margin: 0 8px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg);
      background: var(--card);
    }
    .app-shell[data-screen="you"] #sidebar_settings li + li { border-top: 1px solid var(--border); }
    .app-shell[data-screen="you"] #sidebar_settings .sidebar-link {
      min-height: calc(var(--tap) + 2px); padding-inline: 14px; gap: 12px; border-radius: 0;
    }
    .app-shell[data-screen="you"] #sidebar_settings .sidebar-link:focus-visible { outline-offset: -2px; }
    .app-shell[data-screen="you"] #sidebar_settings .sidebar-link > svg:first-child { width: 16px; height: 16px; margin: 0; }
    .app-shell[data-screen="you"] #sidebar_settings .sidebar-link > span:not(.sidebar-link-chevron) { flex: 1; }
    .app-shell[data-screen="you"] .sidebar-link-chevron { display: flex; color: var(--muted-foreground); }
    .app-shell[data-screen] .sidebar-nav { flex: none; overflow: visible; padding: 0 calc(var(--gutter) - 8px); }
    .app-shell[data-screen] .chat-nav { margin-bottom: 0; border-bottom: 0; }
    .app-shell[data-screen] .chat-nav .sidebar-link { min-height: var(--tap); }
    /* The list's own 1 px gap, so a fractional row edge never hands a finger's corner to the next row. */
    .app-shell[data-screen] :is(.nav-section, .nav-group-row) > .sidebar-list { margin-top: 1px; }
    .app-shell[data-screen] .nav-row-actions { top: calc((var(--tap) - 14px) / 2); }
    .app-shell[data-screen] .nav-more-count { display: inline; }
    /* The rows keep 8 px inside their own box: the search takes it outside, in line with the title and headings. */
    .app-shell[data-screen] .sidebar-search { padding-inline: 8px; }
    .app-shell[data-screen] .sidebar-search .input { height: var(--tap); }
    .app-shell[data-screen] .sidebar-search svg { left: 17px; top: calc(2px + (var(--tap) - 14px) / 2); }
    /* A heading as tall as a finger, its text centred: the « + » touch area stays off the first row. */
    .app-shell[data-screen] .chat-nav :is(.sidebar-section, .nav-section-head) { min-height: var(--tap); padding-block: 0; }
  }

  /* A locked newcomer sees why the rest is missing, not a greyed-out list. */
  .sidebar-locked {
    display: flex; gap: 10px; margin: 12px 8px 0; padding: 10px 12px;
    font-size: 13px; color: var(--muted-foreground);
    border: 1px dashed var(--border); border-radius: var(--radius-md);
  }
  .sidebar-locked svg { flex: none; margin-top: 2px; }
  .sidebar-locked-title { margin: 0; font-weight: 600; color: var(--foreground); }
  .sidebar-locked-text { margin: 2px 0 0; }

  /* The navigation's parts, grouped for the mobile shell's screens; no box of their own, so nothing moves here. */
  .nav-group { display: contents; }
  /* Named after the workspace on the phone's Vous screen only. */
  .nav-space-title, .sidebar-link-chevron { display: none; }

  /* Touch screens with the desktop sidebar: an enlarged touch area at its edge must not make it scroll sideways. */
  @media (pointer: coarse) and (min-width: 1100px) {
    .sidebar-nav { overflow-x: hidden; }
    /* Headings as tall as a finger, so the « + » touch areas of two stacked headings never overlap. */
    .chat-nav :is(.sidebar-section, .nav-section-head) { min-height: var(--tap); padding-block: 0; }
    .nav-section > .sidebar-list { margin-top: 1px; }
  }
}