/* Menu — un panneau flottant ouvert par un bouton (des options, un formulaire court) ou par
   une saisie (une liste de résultats) : `div.menu[data-menu]` > `[data-menu-trigger]` ou
   `[data-menu-input]` + `.menu__panel[hidden]` > `.menu__item` ; static/js/menu.js. */

.menu {
  position: relative;
}

.menu > summary {
  list-style: none;
  cursor: pointer;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 180px;
  max-height: 320px;
  margin-top: var(--space-1);
  padding: var(--space-1);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* Aligné sur le bord droit du déclencheur (un bouton en bout de ligne). */
.menu__panel--end {
  right: 0;
  left: auto;
}

/* À la largeur du champ : la liste de résultats d'une saisie. */
.menu__panel--full {
  right: 0;
  min-width: 0;
}

/* Au-dessus du champ : une saisie en bas d'écran (le message d'une conversation). */
.menu__panel--up {
  top: auto;
  bottom: 100%;
  margin: 0 0 var(--space-1);
}

/* Un formulaire court ou une longue liste d'options décrites. */
.menu__panel--wide {
  min-width: 320px;
  max-width: 480px;
  max-height: 400px;
}

.menu__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  width: 100%;
  padding: var(--space-1-5) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-13);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__item:hover,
.menu__item:focus-visible,
.menu__item:has(:focus-visible) {
  background: var(--color-bg-hover);
}

/* L'option désignée au clavier dans une liste de résultats (Entrée la prendra) : un filet
   primaire à gauche, le fond pâle seul ne se distingue pas du panneau. */
.menu__item--active {
  background: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
  color: var(--color-primary);
}

/* La ligne secondaire d'une option (une description), toujours sous le libellé. */
.menu__meta {
  flex-basis: 100%;
  color: var(--color-text-secondary);
  font-size: var(--text-12);
}