@layer components {
  /* A finger held on a row asks for its sheet: no text selection or system callout in the way, the row pressed shows it. */
  @media (pointer: coarse) {
    .chat-nav :is(.sidebar-entry, .nav-group-row) > :is(.sidebar-link, .nav-row-head) {
      -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
    }
  }
  /* Painted after a beat: a plain tap never flashes. */
  .chat-nav [data-pressing] { background-color: var(--muted); transition: background-color 0s linear 150ms; }

  /* The row's action sheet: tiles, then rows in blocks, over the page's scrim. */
  dialog.sheet[data-nav-sheet]::backdrop { background: var(--scrim); }
  [data-nav-sheet] .sheet-title { font-size: 16px; font-weight: 600; }
  [data-nav-sheet] .sheet-grip-bar { height: 4px; border-radius: 999px; background: var(--border); }
  [data-nav-sheet] .sheet-head { align-items: center; padding: 20px 8px 4px 16px; }
  [data-nav-sheet] .sheet-title { padding-top: 0; }
  [data-nav-sheet] .sheet-body { padding-top: 4px; }
  .nav-sheet-main { display: flex; flex-direction: column; gap: 8px; }
  .nav-sheet-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .nav-sheet-group { display: flex; flex-direction: column; gap: 8px; }
  .nav-sheet-form { display: contents; }
  .nav-sheet-rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--border); }
  .nav-sheet-tile, .nav-sheet-row {
    box-sizing: border-box; display: flex; align-items: center; border: 0; background: transparent; color: var(--foreground);
    font: inherit; text-align: start; text-decoration: none; cursor: pointer;
  }
  .nav-sheet-tile {
    flex-direction: column; justify-content: center; gap: 6px; min-height: 68px; padding: 8px; border-radius: 10px;
    background: var(--muted); font-size: 14px; font-weight: 500; text-align: center;
  }
  .nav-sheet-row { gap: 12px; width: 100%; min-height: 48px; padding: 0; font-size: 16px; }
  .nav-sheet-tile svg, .nav-sheet-row svg { flex: none; color: var(--muted-foreground); }
  .nav-sheet-blank { flex: none; width: 18px; height: 18px; }
  .nav-sheet-tile:active, .nav-sheet-row:active { background: var(--accent); }
  .nav-sheet-tile:focus-visible, .nav-sheet-row:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .nav-sheet-row[data-tone=danger], .nav-sheet-row[data-tone=danger] svg { color: var(--jx-no); }

  /* The reorder mode of Favoris: « Terminé », a help line and a 44 px handle on each row. */
  .nav-section-done, .nav-reorder-help, .nav-row-handle { display: none; }
  .nav-section-done {
    min-height: var(--tap); margin-left: auto; padding: 0 16px; border: 0; background: transparent; color: var(--foreground);
    font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .nav-section-done:active { background: var(--accent); }
  .nav-section-done:focus-visible, .nav-row-handle:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
  [data-reordering] .nav-section-done { display: inline-flex; align-items: center; }
  [data-reordering] .nav-reorder-help { display: block; margin: 0; padding: 0 16px 4px; font-size: 14px; color: var(--muted-foreground); }
  .nav-row-handle {
    position: absolute; top: 2px; right: 0; z-index: 1; width: var(--tap); height: var(--tap); padding: 0; border: 0;
    background: transparent; color: var(--muted-foreground); place-items: center; cursor: grab; touch-action: none;
  }
  [data-reordering] .nav-row-handle, .nav-drag-ghost .nav-row-handle { display: grid; }
  [data-reordering] #sidebar_favorites > li > .sidebar-link { padding-right: 48px; }
  [data-reordering] #sidebar_favorites > li > .nav-row-actions { right: 52px; }
  /* A finger drags by the handle only: the row's own touch scroll and callout stay. */
  .nav-row-handle svg { pointer-events: none; }

  /* The lifted row on a phone: the design's 10 px corners and 16 px rows. */
  @media (max-width: 1099px) {
    .sidebar-entry.nav-drag-ghost { border-radius: 10px; }
    .nav-drag-ghost .nav-row-actions { display: none; }
    .nav-drag-ghost .sidebar-link { min-height: 48px; gap: 10px; font-size: 16px; color: var(--foreground); }
  }
}