/* ===========================================================================
   Chat du space
   ---------------------------------------------------------------------------
   A LA RACINE, et pas dans un dossier chat/ : le serveur expose deja une route
   /chat/{id} (historique des messages). Un dossier du meme nom entre en
   collision avec elle cote hebergeur, qui repond alors 500 au lieu de servir
   le fichier. chatMenuHtml.js est a la racine pour la meme raison.

   Deux elements INDEPENDANTS, a deux endroits differents :

     #chat-hud    les messages, en haut a gauche — la ou ils ont toujours ete
     #chat-barre  la barre d'envoi, en bas au centre

   Ce qui a disparu : l'ouverture au SURVOL de la souris. Le panneau se
   repliait tout seul et se redepliait quand la souris passait dessus, ce qui
   l'ouvrait par accident en visant un bloc dans ce coin, et n'existait pas au
   doigt faute de survol sur mobile.
   =========================================================================== */


/* ===========================================================================
   1. MESSAGES — en haut a gauche
   =========================================================================== */

#chat-hud {
  position: absolute;
  top: 60px;
  left: 34px;
  width: min(390px, calc(100vw - 68px));
  max-height: 230px;
  z-index: 90;
  box-sizing: border-box;
  display: none;                 /* affiche par l'interface a l'entree */
  flex-direction: column;
  font-family: "Poppins", system-ui, sans-serif;
  color: #fff;
  pointer-events: none;          /* le jeu reste cliquable au travers */
  transition: opacity 0.3s ease;
}

/*
 * Mise en veille — option retenue : "lisible".
 *
 * Les messages s'estompent sans jamais devenir illisibles : on continue de
 * suivre la conversation du coin de l'oeil, sans rien faire. C'est la
 * difference avec l'ancienne version, qui repliait le panneau et obligeait a
 * survoler pour relire — et le survol est precisement ce qu'on a supprime.
 *
 * La veille ne se declenche jamais tant que le joueur ecrit ou lit son
 * historique (voir chatMenuHtml.js).
 */
#chat-hud.is-idle { opacity: 0.62; }

#chat-messages {
  /*
   * LE CONTENEUR NE CAPTE AUCUN CLIC.
   *
   * C'est un rectangle de 390 x 230 px : avec `pointer-events: auto`, il
   * interceptait tout, y compris a droite des messages courts et dans les
   * espaces vides entre les bulles. Impossible de viser un bloc a travers.
   *
   * Seules les bulles sont interactives (voir `.msg` plus bas). Le defilement
   * continue de fonctionner : quand la souris est sur une bulle, la molette
   * remonte jusqu'a ce conteneur, qui defile. Le navigateur cherche le premier
   * ancetre defilant, et `pointer-events` n'a aucun effet sur cette recherche.
   */
  pointer-events: none;

  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  max-height: 230px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 5px 0 0;
  overscroll-behavior: contain;   /* le defilement ne deborde pas sur la page */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 4px));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 4px));
}

/*
 * Les messages sont colles en bas par une marge automatique sur le premier,
 * et surtout PAS par `justify-content: flex-end`.
 *
 * Sur un conteneur qui defile, `flex-end` est un piege connu des navigateurs :
 * le contenu qui deborde part AU-DESSUS de la zone visible et devient
 * inatteignable a la molette. Le rendu est identique, le defilement fonctionne.
 */
#chat-messages > .msg:first-child { margin-top: auto; }

#chat-messages::-webkit-scrollbar { width: 5px; }
#chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#chat-messages .msg {
  display: inline-block;
  /*
   * `width: fit-content` est essentiel ici : la bulle s'arrete au texte, donc
   * la zone qui bloque les clics s'arrete au texte elle aussi. Tout l'espace a
   * droite d'un message court reste jouable.
   */
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  font-size: 13px;
  line-height: 1.28;
  word-break: break-word;

  /* Seul element interactif du panneau : selection du texte et defilement. */
  pointer-events: auto;
}

#chat-messages .msg-author {
  display: inline;
  margin-right: 5px;
  color: #a8d9ff;
  font-size: 12px;
  font-weight: 700;
}

#chat-messages .msg-text {
  display: inline;
  color: rgba(255, 255, 255, 0.96);
}


/*
 * Retour en bas de l'historique. Visible uniquement quand le joueur a remonte :
 * c'est le seul moment ou il en a besoin, et le reste du temps il n'a rien a
 * faire a l'ecran.
 */
#chat-bas {
  pointer-events: auto;
  align-self: flex-start;
  flex: 0 0 auto;
  margin-top: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 22, 28, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}

#chat-bas:hover { background: rgba(40, 44, 54, 0.92); }

/* Quand on lit son historique, rien ne s'estompe : la lecture prime. */
#chat-hud.a-remonte { opacity: 1 !important; }


/* ===========================================================================
   2. BARRE D'ENVOI — en bas au centre
   ---------------------------------------------------------------------------
   L'ancienne etait un simple rectangle arrondi noir a 42 % colle sous les
   messages. Celle-ci est posee bas dans l'ecran, centree, avec un fond flouté,
   un liseré qui s'allume a la frappe et un bouton d'envoi rond.
   =========================================================================== */

/*
 * La barre s'attenue au repos (option "lisible" : 68 %) et redevient pleine
 * des qu'on la survole ou qu'on ecrit dedans. Elle ne disparait jamais : c'est
 * la barre d'envoi du jeu, pas un panneau a retrouver.
 */
#chat-barre.is-idle { opacity: 0.68; }
#chat-barre:hover { opacity: 1; }
#chat-barre:focus-within { opacity: 1; }

#chat-barre {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px));
  z-index: 90;
  box-sizing: border-box;
  display: none;                 /* affiche par l'interface a l'entree */
  flex-direction: column;
  gap: 6px;
  font-family: "Poppins", system-ui, sans-serif;
  pointer-events: none;
}

#chat-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(18, 20, 26, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: auto;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* Le liseré s'allume pendant la frappe : on sait ou part le clavier. */
#chat-inline-form:focus-within {
  border-color: rgba(120, 180, 255, 0.55);
  background: rgba(18, 20, 26, 0.9);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.44),
    0 0 0 3px rgba(61, 157, 250, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#chat-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: 8px 0;
}

#chat-input::placeholder { color: rgba(255, 255, 255, 0.36); }

#chat-send {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #4aa4ff 0%, #2f86e0 100%);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(47, 134, 224, 0.4);
  transition: filter 0.15s ease, transform 0.1s ease;
}

#chat-send:hover { filter: brightness(1.12); }
#chat-send:active { transform: scale(0.92); }

#chat-send:disabled,
#chat-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Chat coupe par un moderateur : le message prend la place de la barre. */
#chat-disabled-inline {
  align-self: center;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 140, 140, 0.2);
  background: rgba(42, 20, 20, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffbcbc;
  font-size: 12.5px;
  pointer-events: auto;
}


/* ===========================================================================
   3. MOBILE
   =========================================================================== */

@media (max-width: 860px) {
  #chat-hud {
    top: 58px;
    left: 12px;
    width: calc(100vw - 24px);
    max-height: 150px;
  }

  #chat-messages { max-height: 150px; }
  #chat-messages .msg { font-size: 12.5px; }

  /* Remontee au-dessus du joystick et des boutons d'action. */
  #chat-barre {
    left: 12px;
    right: 12px;
    bottom: 96px;
    width: auto;
    transform: none;
  }

  /* Cibles au pouce, et 16 px sur le champ pour eviter le zoom auto d'iOS. */
  #chat-send { width: 40px; height: 40px; }
  #chat-input { font-size: 16px; padding: 10px 0; }
}