/* css/chat.css
   Discussion texte/vocale éphémère (mode "chat", voir js/chat.js et
   js/app.js) : compteur "connectés" dans la barre du haut, recherche,
   bulles de messages, indicateur de frappe, message vocal, barre de
   saisie + micro + emoji. Partage le layout de l'écran d'appel
   (.screen-match, .match-topbar, .call-stage, .match-actionbar — voir
   css/match.css) mais avec un contenu très différent une fois en
   discussion. */

/* ---------- Compteur "connectés" (barre du haut) ----------
   Jamais de retour à la ligne ici (ni pour ce groupe, ni pour
   .match-topbar-actions ci-dessous) : tout doit rester sur une seule ligne,
   alignée en haut. Sur petit écran, le resserrement des tailles ET le
   masquage du libellé " en ligne" (voir css/match.css, @media (max-width:
   600px)) suffisent en pratique à ce que tout tienne ; overflow:hidden
   n'est qu'un filet de sécurité pour un cas extrême (ex. un compteur à 4
   chiffres) — il vaut mieux couper la fin d'un pill que déborder sur les
   icônes juste à côté. */
.match-topbar-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* ---------- Icônes d'action (jeux, appels de groupe, profil) ----------
   Groupe à part de .match-topbar-chips : largeur fixe, jamais de retour à
   la ligne, pour rester alignées en haut avec le reste de la barre même
   quand le compteur "en ligne" est long (voir commentaire ci-dessus). */
.match-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .match-topbar-actions .btn-icon {
    width: 34px;
    height: 34px;
    padding: var(--space-1);
  }
}

.online-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
  flex-shrink: 0;
}

.online-chip:active {
  transform: scale(0.96);
}

.online-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-online);
  box-shadow: 0 0 0 3px rgba(63, 145, 66, 0.18);
  animation: pulse 2s ease-in-out infinite;
}

/* ---------- Recherche d'une discussion ---------- */
.chat-searching {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.chat-searching-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--gradient-live);
  font-size: 2.4rem;
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--duration-slow) var(--ease-standard);
}

.chat-back-video {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
}

/* ---------- Discussion active ---------- */

/* Verrouille la hauteur de l'écran à celle du viewport dès qu'une
   discussion est affichée (au lieu du simple min-height habituel de
   .screen-match) : sans ça, rien ne borne .call-stage-chat / .chat-messages
   en hauteur, la page entière devient défilable, et le focus du champ de
   saisie (clavier virtuel mobile) scrolle tout le document — le premier
   message peut alors se retrouver hors écran avec un grand vide au-dessus,
   et .chat-peer-header finit par défiler avec le reste (bug rapporté avec
   beaucoup de messages). Avec la hauteur bornée ici, seule .chat-messages
   défile (voir plus bas) et le header (.match-topbar + .chat-peer-header)
   reste visible en toutes circonstances.
   `flex: none` est indispensable ici : .screen-match a par ailleurs
   `flex: 1` (donc flex-basis: 0%), qui prime sur `height` dans le calcul
   flexbox — et comme #app (son parent) n'a qu'un min-height, jamais un
   height ferme, la branche flex n'a alors aucune taille définie où
   s'ancrer, et .screen-match reprenait la taille de son CONTENU (tous les
   messages empilés) au lieu de se limiter au viewport, ce qui ramenait
   exactement le bug que ce bloc est censé corriger. `flex: none` fait
   reprendre à `height` la main sur le dimensionnement de cet écran,
   indépendamment de ce que fait son parent.
   `.screen-match-chat` (posée par renderChatUI/teardownChatUI, voir
   js/app.js) fait exactement le même travail que `:has(.call-stage-chat)`
   ci-dessous : on garde les deux, la classe explicite servant de filet pour
   les navigateurs/WebView qui ne supportent pas encore `:has()`. */
.screen-match:has(.call-stage-chat),
.screen-match.screen-match-chat {
  flex: none;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* iOS Safari uniquement (Android n'a pas ce comportement) : même avec
   .screen-match borné exactement à 100dvh ci-dessus, le <body> lui-même
   reste défilable/rebondissant (aucune règle ne le borne, voir
   css/reset.css et css/global.css : `body`/`#app` n'ont qu'un min-height).
   Résultat, quand on fait glisser .chat-messages et qu'on atteint son
   propre haut/bas de défilement en cours de geste, iOS transmet
   l'overscroll restant au document entier ("scroll chaining") : la page
   rebondit (élastique), ce qui révèle un espace vide autour du header/de
   la barre de saisie — .screen-match a beau garder la bonne TAILLE, il se
   déplace le temps du rebond, jusqu'au relâchement du doigt où tout revient
   en place. Verrouiller le document lui-même (aucun scroll possible du
   tout) supprime ce rebond à la source. `.chat-scroll-lock` (posée par
   renderChatUI/teardownChatUI, voir js/app.js) est le filet pour les
   navigateurs sans `:has()`, même logique que .screen-match-chat plus
   haut. Inoffensif sur Android, qui n'a pas ce rebond — ce correctif ne
   touche donc en rien son comportement déjà correct. */
body:has(.screen-match-chat),
body.chat-scroll-lock {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  /* Filet supplémentaire au-dessus du verrouillage ci-dessus (voir aussi
     .chat-messages plus bas) : empêche explicitement tout rebond qui
     remonterait jusqu'au document, plutôt que de compter uniquement sur
     `position: fixed` pour l'empêcher indirectement. */
  overscroll-behavior: none;
}

.call-stage-chat {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  gap: 0;
  /* Explicite plutôt que de compter sur la taille minimale automatique
     (0 dès que overflow ≠ visible, ce qui est déjà le cas ci-dessus) :
     Safari a une longue histoire de bugs sur cette règle précise du calcul
     flexbox — mieux vaut ne pas s'y fier implicitement sur cet écran, dont
     tout le verrouillage de hauteur (voir plus haut, iOS) en dépend. */
  min-height: 0;
}

.chat-peer-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex: 0 0 auto;
}

.chat-peer-header-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.chat-peer-header-copy strong {
  font-size: var(--fs-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-peer-status {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.chat-peer-status.chat-peer-status-typing {
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}

.chat-next-btn {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Empêche le rebond en haut/bas de la liste de se propager au document
     ("scroll chaining") au lieu de rester local à cette liste — c'est ce
     rebond transmis qui fait bouger le header/la barre de saisie sur iOS
     (voir le commentaire détaillé sur body:has(.screen-match-chat) un peu
     plus haut). Standard et sans effet indésirable sur Android. */
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.chat-empty-hint {
  margin: auto;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  max-width: 260px;
  line-height: 1.5;
}

.chat-bubble-row {
  display: flex;
  animation: chat-bubble-in var(--duration-normal) var(--ease-standard);
}

.chat-bubble-row-mine {
  justify-content: flex-end;
}

.chat-bubble-row-partner {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 78%;
  padding: 10px var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  line-height: 1.45;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}

.chat-bubble-mine {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  border-bottom-right-radius: var(--radius-sm);
}

.chat-bubble-partner {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

/* ---------- Message vocal ---------- */
.chat-voice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 168px;
}

.chat-voice-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.28);
  color: inherit;
  font-size: var(--fs-sm);
}

.chat-bubble-partner .chat-voice-play {
  background: rgba(217, 114, 76, 0.14);
  color: var(--color-primary-dark);
}

.chat-voice-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}

.chat-bubble-partner .chat-voice-track {
  background: var(--color-border);
}

.chat-voice-progress {
  position: absolute;
  inset: 0;
  width: 0%;
  background: currentColor;
  opacity: 0.9;
}

.chat-voice-duration {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ---------- Indicateur de frappe ---------- */
.chat-typing-row {
  display: flex;
  justify-content: flex-start;
}

.chat-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 10px var(--space-4);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.chat-typing-bubble span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-bubble span:nth-child(3) { animation-delay: 0.3s; }

/* ---------- Barre de saisie ---------- */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.chat-emoji-btn,
.chat-mic-btn,
.chat-send-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  font-size: 1.15rem;
}

.chat-emoji-btn {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
}

.chat-mic-btn,
.chat-send-btn {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-brand);
}

.chat-text-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 11px var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  resize: none;
  line-height: 1.4;
}

.chat-text-input:focus {
  border-color: var(--color-primary);
}

/* ---------- Sélecteur d'emoji ---------- */
.chat-emoji-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: slide-up var(--duration-normal) var(--ease-standard);
}

.chat-emoji-picker button {
  font-size: 1.35rem;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1;
}

.chat-emoji-picker button:active {
  background: var(--color-bg);
}

/* ---------- Enregistrement d'un message vocal ---------- */
.chat-recording-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.chat-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  animation: pulse 1s ease-in-out infinite;
}

.chat-recording-time {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.chat-recording-cancel,
.chat-recording-send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  font-size: 1.1rem;
}

.chat-recording-cancel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
}

.chat-recording-send {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-brand);
}

@keyframes chat-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Répondre à un message (swipe vers la droite, façon WhatsApp) ---------- */
.chat-bubble-row-swipeable {
  position: relative;
  /* Laisse le navigateur gérer le scroll vertical nativement ; seul le
     geste horizontal est intercepté en JS pour le swipe de réponse. */
  touch-action: pan-y;
}

.chat-bubble-row-swipeable .chat-bubble {
  will-change: transform;
}

.chat-swipe-reply-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  pointer-events: none;
}

@keyframes chat-row-highlight {
  0%, 100% { background: transparent; }
  30% { background: rgba(217, 114, 76, 0.16); }
}

.chat-bubble-row-highlight {
  border-radius: var(--radius-lg);
  animation: chat-row-highlight 900ms ease;
}

/* ---------- Citation d'un message (dans une bulle, ou aperçu de réponse) ---------- */
.chat-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
  border-left: 3px solid currentColor;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.2);
  font-size: var(--fs-xs);
  line-height: 1.35;
  text-align: left;
  overflow: hidden;
}

.chat-quote-clickable {
  cursor: pointer;
}

/* Le contraste de la citation suit la bulle qui la CONTIENT (mienne :
   dégradé + texte blanc / partenaire : fond clair + texte sombre) — pas
   l'auteur du message cité, qui peut être n'importe lequel des deux dans
   n'importe quelle bulle (on peut répondre à son propre message comme à
   celui du partenaire). Confondre les deux rendait une citation illisible
   (fond quasi blanc + texte blanc hérité) dès qu'on répondait, depuis SA
   propre bulle, à un message du partenaire. */
.chat-bubble-partner .chat-quote {
  background: var(--color-bg);
}

.chat-quote-author {
  font-weight: var(--fw-bold);
  opacity: 0.85;
}

.chat-quote-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.85;
}

/* ---------- Aperçu de réponse au-dessus de la barre de saisie ---------- */
.chat-reply-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  animation: slide-up var(--duration-normal) var(--ease-standard);
}

.chat-reply-preview-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.chat-reply-preview-author {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
}

.chat-reply-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.chat-reply-preview-cancel {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}