/* ═══════════════════════════════════════════════════════════
   chat.css — Page "Chat du groupe"
   ═══════════════════════════════════════════════════════════ */

/* ── CONTENEUR GLOBAL DU CHAT ─────────────────────────────── */
/*
  On surcharge la carte ici pour qu'elle
  prenne toute la hauteur disponible.
*/
.chat-conteneur {
  display: flex;
  flex-direction: column;
  /* Hauteur = viewport - header - nav - titre - marges */
  height: calc(100svh - var(--hauteur-header) - var(--hauteur-nav) - 56px - 36px);
  padding: 0;      /* on gère le padding à l'intérieur */
  overflow: hidden;
}

/* ── ZONE DE MESSAGES ─────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Cache la scrollbar */
.chat-messages::-webkit-scrollbar { width: 0; }

/* ── MESSAGE ──────────────────────────────────────────────── */
.message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  animation: message-entree 0.25s var(--courbe) both;
}

@keyframes message-entree {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Message des AUTRES : aligné à gauche */
.message-autre {
  align-self: flex-start;
  align-items: flex-start;
}

/* Mon message : aligné à droite */
.message-moi {
  align-self: flex-end;
  align-items: flex-end;
}

/* ── EN-TÊTE DU MESSAGE (auteur + heure) ─────────────────── */
.message-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.message-auteur {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texte-discret);
}

.message-heure {
  font-size: 10px;
  color: var(--texte-discret);
  font-family: 'JetBrains Mono', monospace;
}

/* ── BULLE DE MESSAGE ─────────────────────────────────────── */
.message-texte {
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 16px;
  word-break: break-word;
}

/* Bulle des autres : fond sobre */
.message-autre .message-texte {
  background: var(--fond-carte-2);
  border: 1px solid var(--bordure);
  color: var(--texte-principal);
  /* Coin carré en haut à gauche */
  border-top-left-radius: 4px;
}

/* Ma bulle : accent ambre */
.message-moi .message-texte {
  background: var(--accent);
  color: #0d0f1a;
  font-weight: 600;
  /* Coin carré en haut à droite */
  border-top-right-radius: 4px;
}

/* Auteur de mes messages en ambre */
.message-moi .message-auteur {
  color: var(--accent);
}

/* ── MESSAGE SYSTÈME (ex: "Koffi a rejoint") ─────────────── */
.message-systeme {
  align-self: center;
  text-align: center;
}

.message-systeme .message-texte {
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--texte-discret);
  padding: 4px 10px;
  font-style: italic;
}

/* ── ZONE DE SAISIE EN BAS ────────────────────────────────── */
.chat-saisie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--bordure);
  background: var(--fond-carte);
}

.chat-saisie input {
  flex: 1;
  border-radius: var(--rayon-rond);
  padding: 10px 16px;
  background: var(--fond-app);
  border-color: var(--bordure);
}

.chat-saisie input:focus {
  border-color: var(--accent);
}

/* Bouton Envoyer compact */
#chat-envoyer {
  width: auto;
  padding: 10px 16px;
  border-radius: var(--rayon-rond);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── INDICATEUR "EN TRAIN D'ÉCRIRE..." ────────────────────── */
.en-train-decrire {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--fond-carte-2);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  border-top-left-radius: 4px;
}

.en-train-decrire span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--texte-discret);
  animation: point-bounce 1.2s ease-in-out infinite;
}

.en-train-decrire span:nth-child(2) { animation-delay: 0.2s; }
.en-train-decrire span:nth-child(3) { animation-delay: 0.4s; }

@keyframes point-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

/* ── ÉTAT VIDE DU CHAT ────────────────────────────────────── */
.chat-vide {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--texte-discret);
  padding: 20px;
}

.chat-vide-emoji {
  font-size: 40px;
  animation: flottement 3s ease-in-out infinite;
}

.chat-vide p {
  font-size: 13px;
  text-align: center;
  max-width: 200px;
  line-height: 1.5;
}