/*
 * Overlay de chat d'arène — feuille autonome.
 *
 * Elle ne partage AUCUN sélecteur avec le bundle du client de jeu (dont la
 * source est perdue, voir ../LISEZMOI.md) : tout est préfixé `ac-`, et rien
 * ici ne touche à `body`, `canvas` ou `#root`. C'est la condition pour que
 * cette greffe survive à une reconstruction du client.
 *
 * Les couleurs reprennent les jetons de la vitrine (index.css de
 * ../../vitrine/src) recopiés en dur : ce fichier est servi sans build, il
 * n'a pas accès au thème Tailwind.
 */

.ac-racine {
  --ac-ink: #150a1f;
  --ac-ink-2: #1e0f2c;
  --ac-carte: #241432;
  --ac-rose: #ff5ea8;
  --ac-rose-vif: #ffa8d9;
  --ac-or-vif: #ffe19b;
  --ac-vert: #3ee08a;
  --ac-rouge: #f87171;
  --ac-texte: #fff0fa;
  --ac-mute: #c9a8dd;

  position: fixed;
  /* `inset-inline-start` et non `left` : en arabe le panneau passe à droite
     tout seul, avec la page. */
  inset-inline-start: 12px;
  inset-block-end: 12px;
  z-index: 2147483000;
  width: min(340px, calc(100vw - 24px));
  font: 500 13px/1.5 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--ac-texte);
  /* Le conteneur laisse passer les clics ; seuls ses enfants visibles les
     captent. Sans ça, une zone transparente volerait au canvas les clics de
     boost. */
  pointer-events: none;
}

.ac-racine * {
  box-sizing: border-box;
}

.ac-panneau,
.ac-bulle {
  pointer-events: auto;
}

/* ------------------------------------------------------------- bulle -- */

.ac-bulle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ac-rose), #8b5cf6);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px -6px rgba(255, 94, 168, .55);
}

.ac-bulle:hover { filter: brightness(1.08); }

.ac-pastille {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: #7a1f4e;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

/* ---------------------------------------------------------- panneau -- */

.ac-panneau {
  display: flex;
  flex-direction: column;
  max-height: min(60vh, 460px);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--ac-ink-2), var(--ac-ink));
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07) inset;
  overflow: hidden;
}

.ac-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
}

.ac-titre {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-icone-bouton {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--ac-texte);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.ac-icone-bouton:hover { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------ vocal -- */

.ac-vocal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-block-end: 1px solid rgba(255, 255, 255, .07);
}

.ac-ptt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--ac-texte);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  /* Le doigt qui maintient le bouton ne doit pas sélectionner le libellé ni
     déclencher la loupe iOS. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.ac-ptt[data-actif='1'] {
  background: var(--ac-vert);
  color: #06331c;
  box-shadow: 0 0 0 4px rgba(62, 224, 138, .22);
}

.ac-ptt[disabled] { opacity: .5; cursor: not-allowed; }

.ac-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ac-mute);
}

.ac-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

.ac-pair[data-parle='1'] {
  background: rgba(62, 224, 138, .18);
  color: var(--ac-vert);
}

.ac-pair-muet { opacity: .45; text-decoration: line-through; }

/* --------------------------------------------------------- messages -- */

.ac-messages {
  flex: 1;
  min-height: 90px;
  padding: 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ac-message { word-wrap: break-word; overflow-wrap: anywhere; }

.ac-auteur { font-weight: 800; color: var(--ac-rose-vif); }
.ac-auteur[data-moi='1'] { color: var(--ac-or-vif); }

.ac-corps { color: var(--ac-texte); }

.ac-info {
  padding: 10px 12px;
  color: var(--ac-mute);
  font-size: 12px;
}

.ac-info a { color: var(--ac-rose-vif); }

.ac-erreur { color: var(--ac-rouge); }

/* ---------------------------------------------------------- saisie -- */

.ac-saisie {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-block-start: 1px solid rgba(255, 255, 255, .07);
}

.ac-champ {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: var(--ac-texte);
  font: inherit;
  outline: none;
}

.ac-champ:focus { box-shadow: 0 0 0 2px var(--ac-rose); }
.ac-champ::placeholder { color: var(--ac-mute); }

.ac-envoyer {
  padding: 9px 15px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ac-rose), #8b5cf6);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ac-envoyer[disabled] { opacity: .5; cursor: not-allowed; }

/* Écrans courts (téléphone en paysage, la posture de jeu) : le panneau ne
   doit jamais manger la moitié de l'aire de jeu. */
@media (max-height: 520px) {
  .ac-panneau { max-height: 46vh; }
  .ac-messages { min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-racine * { transition: none !important; animation: none !important; }
}