/* ==========================================================================
   MyTranslateChat — v5
   Lien d'invitation par salon, verrouillage, page « Rejoindre un salon ».
   Mobile d'abord : tout est empilé et lisible sur téléphone.
   ========================================================================== */

/* ---------------------- Bouton « Inviter » et boîte de lien -------------- */
body.app-body .chat-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room-invite-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 12px;
  background: #FFFFFF;
}

.room-invite-box label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0F0F2D);
  margin-bottom: 8px;
}

.invite-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.invite-row input,
.invite-url-field {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 10px;
  background: #FAF9FF;
  color: var(--ink, #0F0F2D);
  font-family: inherit;
}

.invite-row .btn { flex: 0 0 auto; }

.invite-actions,
.invite-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.invite-url-field {
  display: block;
  width: 100%;
  margin: 12px 0;
}

/* Salon verrouillé : bandeau d'information + zone de saisie remplacée */
.room-locked-note,
.composer-blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFF6E8;
  border: 1px solid #F5DDB6;
  color: #7A5312;
  font-size: 14px;
  line-height: 1.45;
}

.composer-blocked {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}

.room-lock-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FFF1DC;
  color: #7A5312;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* ---------------------- Page « Rejoindre un salon » --------------------- */
body.invite-body .invite-page {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.invite-card {
  width: 100%;
  max-width: 560px;
  padding: 24px 20px 28px;
  background: #FFFFFF;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 18px;
  box-shadow: 0 14px 34px -22px rgba(58, 32, 140, .28);
}

.invite-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #6A6A87);
}

.invite-title {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink, #0F0F2D);
}

.invite-desc {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted, #6A6A87);
}

.invite-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted, #6A6A87);
}

.invite-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7A5312;
  font-weight: 600;
}

.invite-translate {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--brand-soft, #F1EDFF);
  color: var(--ink, #0F0F2D);
  font-size: 14px;
  line-height: 1.45;
}

.invite-preview {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 12px;
  background: #FCFBFF;
}

.invite-preview h2 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0F0F2D);
}

.invite-msg {
  display: block;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #0F0F2D);
  word-break: break-word;
}

.invite-msg:last-child { margin-bottom: 0; }

.invite-msg strong { margin-right: 6px; }

.invite-msg-text { color: var(--muted, #6A6A87); }

.invite-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-closed {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  background: #FFF6E8;
  border: 1px solid #F5DDB6;
  color: #7A5312;
  font-size: 14px;
  line-height: 1.45;
}

.hint-center { text-align: center; }

/* ---------------------- Mot de passe d'un salon ------------------------- */
/* Formulaire de saisie du mot de passe (page d'accès et page d'invitation) */
.room-pass-form,
.room-protect-form {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 12px;
  background: #FCFBFF;
}

.room-protect-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0F0F2D);
}

.room-pass-form label,
.room-protect-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0F0F2D);
}

.room-pass-form input[type="password"],
.room-pass-form input[type="text"],
.room-protect-form input[type="password"],
.room-protect-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink, #0F0F2D);
  background: #FFFFFF;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 10px;
}

/* Le champ et le bouton « Afficher » côte à côte, empilés sur petit écran */
.room-protect-form .invite-row { margin-bottom: 10px; }
.room-protect-form .invite-row input[type="password"],
.room-protect-form .invite-row input[type="text"] { margin-bottom: 0; }

.room-protect-form .btn { margin-top: 6px; }

.room-pass-form .form-error {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FDECEC;
  border: 1px solid #F5C6C6;
  color: #9B2C2C;
  font-size: 13px;
  line-height: 1.4;
}

.invite-locked-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFF6E8;
  border: 1px solid #F5DDB6;
  color: #7A5312;
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------------- Sélecteur de langue (pages connexion) ----------- */
/* Sur les pages de connexion et d'inscription, le sélecteur est fait de liens :
   chaque langue recharge la page déjà traduite dans cette langue. */
body.auth-body .lang-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}

body.auth-body .lang-switch-list { flex-wrap: wrap; overflow-x: visible; }

/* ---------------------- Ordinateur : lien sur une seule ligne ------------ */
@media (min-width: 768px) {
  .invite-card { padding: 32px 30px 34px; }
  .invite-title { font-size: 32px; }
  .invite-cta { flex-direction: row; }
  .invite-cta .btn { flex: 1 1 auto; }
}

/* Sur très petit écran, le bouton Copier passe sous le champ */
@media (max-width: 380px) {
  .invite-row { flex-wrap: wrap; }
  .invite-row .btn { width: 100%; }
}

/* ==========================================================================
   Liste noire entre membres
   Le blocage vaut dans les deux sens et se retire depuis « Mon compte ».
   ========================================================================== */

/* Bouton « Bloquer » sous un message du salon : discret, il n'attire pas
   l'œil mais reste atteignable au doigt (hauteur confortable). */
body.app-body .msg-block {
  display: inline-block;
  margin: 2px 0 0;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #6A6A87);
  background: transparent;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

body.app-body .msg-block:hover,
body.app-body .msg-block:focus-visible {
  color: #9B2C2C;
  border-color: #F5C6C6;
  background: #FDECEC;
}

body.app-body .msg-block:disabled {
  opacity: .55;
  cursor: default;
}

/* Bouton « Bloquer » sur une fiche de l'annuaire des membres */
.member-block {
  align-self: flex-start;
  margin-top: 10px;
}

/* Liste des membres bloqués dans « Mon compte » : une ligne par membre,
   empilée sur téléphone, jamais coupée. */
.blocked-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blocked-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 10px;
  background: #FFFFFF;
}

.blocked-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 140px;
  min-width: 0;
}

.blocked-info strong {
  font-size: 15px;
  color: var(--ink, #0F0F2D);
  word-break: break-word;
}

.blocked-info .member-lang {
  font-size: 13px;
  color: var(--muted, #6A6A87);
}

.blocked-since {
  font-size: 12px;
  color: var(--muted, #6A6A87);
}

.blocked-row .btn {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 480px) {
  .blocked-row { align-items: flex-start; }
  .blocked-row .btn { margin-left: 0; width: 100%; }
}

/* ------------------------- Messagerie privée (dm) ----------------------- */

.dm-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dm-head-text { min-width: 0; }
.dm-head-text .chat-title { margin: 0; }

.dm-threads {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.dm-thread {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #E5E0D8);
  border-radius: 10px;
  background: var(--card, #fff);
  text-decoration: none;
  color: inherit;
}

.dm-thread:hover { border-color: var(--accent, #B5502F); }

.dm-thread.has-unread {
  border-color: var(--accent, #B5502F);
  background: rgba(181, 80, 47, 0.04);
}

.dm-thread-body {
  flex: 1 1 auto;
  min-width: 0;
}

.dm-thread-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dm-thread-top strong {
  font-size: 15px;
  color: var(--ink, #2A2320);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-ago {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted, #6A6A87);
}

.dm-preview {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted, #6A6A87);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-preview-empty { font-style: italic; }

.dm-mine-tag {
  color: var(--ink, #2A2320);
  font-weight: 600;
}

.dm-unread {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 11px;
  background: var(--accent, #B5502F);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Pseudo cliquable : ouvre la conversation privée avec ce membre */
.msg-author-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.msg-author-link:hover,
.msg-author-link:focus-visible {
  color: var(--accent, #B5502F);
}

.member-name-link {
  color: inherit;
  text-decoration: none;
}

.member-name-link:hover,
.member-name-link:focus-visible {
  text-decoration: underline;
}

.dm-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #B5502F);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.dm-link-btn:hover { background: rgba(181, 80, 47, 0.07); }

.dm-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--accent, #B5502F);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .dm-thread { padding: 10px 12px; }
  .dm-thread .avatar { width: 38px; height: 38px; }
  .dm-link-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   GoldPass — code à usage unique qui ouvre tout gratuitement.
   ========================================================================== */

.goldpass-box { margin-bottom: 4px; }

.goldpass-state {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line, #E5E0D8);
  border-left: 3px solid #9AA0AE;
  border-radius: 8px;
  background: #FBF9F6;
}

.goldpass-state strong {
  font-size: 15px;
  color: var(--ink, #2A2320);
}

.goldpass-state span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #6A6A87);
}

.goldpass-state.is-on {
  border-left-color: #B9873B;
  background: #FDF7EA;
}

.goldpass-state.is-on strong { color: #7A5312; }

/* Badge doré visible à côté du pseudo (profil, messages) */
.goldpass-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  background: #F6E7C4;
  color: #7A5312;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* --------------------- Administration : codes GoldPass ------------------ */
.goldpass-code-live {
  display: block;
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px dashed #B9873B;
  border-radius: 8px;
  background: #FDF7EA;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #7A5312;
  word-break: break-all;
}

.goldpass-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.goldpass-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, #E5E0D8);
  border-radius: 8px;
  background: #FFFFFF;
}

.goldpass-row-main {
  flex: 1 1 180px;
  min-width: 0;
}

.goldpass-row-main strong {
  display: block;
  font-size: 14px;
  color: var(--ink, #2A2320);
  word-break: break-all;
}

.goldpass-row-meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted, #6A6A87);
}

.goldpass-row .btn { flex: 0 0 auto; }

.goldpass-row.is-off { opacity: .62; }

@media (max-width: 560px) {
  .goldpass-row .btn { width: 100%; }
}


/* ==========================================================================
   Notifications push — activation appareil par appareil.
   ========================================================================== */

.push-box { margin-bottom: 4px; }

#pushState {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line, #E5E0D8);
  border-left: 3px solid #9AA0AE;
  border-radius: 8px;
  background: #FBF9F6;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink, #2A2320);
}

#pushState.hint-ok {
  border-left-color: #3E8E63;
  background: #F2F8F4;
}

.push-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.push-actions .btn { flex: 0 1 auto; }

@media (max-width: 767px) {
  .push-actions { flex-direction: column; }
  .push-actions .btn { width: 100%; }
}


/* ==========================================================================
   Modération du salon (créateur du salon et administration)
   Renommer le salon, exclure un membre (kick), le bannir, lever un ban.
   Les boutons sont petits et discrets : ils ne doivent pas gêner la lecture,
   mais rester atteignables au doigt sur téléphone.
   ========================================================================== */

/* Les deux boutons se placent sous la fiche du membre, sur toute la largeur :
   la carte du membre reste en ligne (photo + pseudo), rien n'est écrasé. */
/* Sur téléphone, les deux boutons sont EMPILÉS l'un sous l'autre et prennent
   toute la largeur : le mot « Bannir » doit se lire en entier, jamais être
   coupé ni sortir de la carte. Côte à côte seulement à partir de 768 px. */
.member-mod {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 0 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line, #EAE6FA);
}

.member-mod-btn {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--ink, #2A2320);
  background: #FFFFFF;
  border: 1px solid var(--line, #EAE6FA);
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

/* Ordinateur : les deux boutons se partagent la largeur de la carte. */
@media (min-width: 768px) {
  .member-mod { flex-direction: row; gap: 6px; }
  .member-mod-btn { flex: 1 1 0; width: auto; }
}

.member-mod-btn:hover,
.member-mod-btn:focus-visible {
  border-color: #C9A227;
  background: #FDF7EA;
}

.member-mod-ban {
  color: #9B2C2C;
  border-color: #F5C6C6;
}

.member-mod-ban:hover,
.member-mod-ban:focus-visible {
  color: #FFFFFF;
  background: #9B2C2C;
  border-color: #9B2C2C;
}

.member-mod-btn:disabled {
  opacity: .55;
  cursor: default;
}

/* Bloc « Membres bannis » dans le panneau des membres du salon. */
.bans-box {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #F5C6C6;
  border-radius: 10px;
  background: #FDF6F6;
}

.bans-box h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9B2C2C;
}

.bans-box ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bans-box li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid #F0DADA;
  border-radius: 8px;
  background: #FFFFFF;
}

.bans-box li strong {
  font-size: 14px;
  color: var(--ink, #2A2320);
  word-break: break-word;
}

.bans-box li span {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--muted, #6A6A87);
}

.bans-box li .member-mod-btn {
  flex: 0 0 auto;
  min-height: 30px;
}

@media (max-width: 560px) {
  .bans-box li .member-mod-btn { flex: 1 0 100%; }
}


/* ==========================================================================
   Zone de saisie : les outils sur leur propre ligne
   --------------------------------------------------------------------------
   Les cinq boutons d'outils (émoticônes, image, GIF, vocal, vidéo) étaient
   alignés SUR LA MÊME LIGNE que le champ de texte. Sur téléphone, 5 × 40 px
   plus le bouton Envoyer ne laissaient au champ que la largeur d'un
   timbre-poste : impossible d'écrire un message.
   Désormais les outils occupent une première ligne, et la ligne du bas ne
   contient plus que le champ (toute la largeur) et le bouton Envoyer.
   ========================================================================== */

body.app-body .composer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}

body.app-body .composer-tools .composer-emoji {
  flex: 0 0 auto;
  width: 38px;
  min-height: 38px;
  border-radius: 9px;
}

/* Le champ prend toute la place restante : « flex-basis: 0 » l'empêche de
   partir de sa largeur naturelle (width: 100% hérité) et de chasser le
   bouton Envoyer hors de l'écran. */
body.app-body .composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

body.app-body .composer-row textarea {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

body.app-body .composer-row .composer-send {
  flex: 0 0 auto;
}

/* Sur ordinateur, il y a la place : les outils restent alignés au-dessus du
   champ, un peu plus grands, sans changer la structure de la page. */
@media (min-width: 768px) {
  body.app-body .composer-tools {
    gap: 8px;
  }

  body.app-body .composer-tools .composer-emoji {
    width: 40px;
    min-height: 40px;
  }
}

/* La zone de saisie est fixée en bas de l'écran et elle est plus haute
   d'une ligne (les outils). Sans cette réserve, le dernier message du salon
   passait sous le bloc de saisie. */
body.app-body.chat-body .chat-messages { padding-bottom: 250px; }
body.app-body.dm-body .chat-messages { padding-bottom: 250px; }

@media (min-width: 900px) {
  body.app-body.chat-body .chat-messages,
  body.app-body.dm-body .chat-messages { padding-bottom: 130px; }
}