/* chat.css — Salon de discussion des membres (widget flottant). Charte Đinh Nho.
   Palette « laque & or » : dégradés du sceau (laque profonde), ivoire chaud,
   or patiné — onglets en pilules, bulles asymétriques, boutons dorés. */
.hdn-chat{
  --chat-red:#9a2b21; --chat-red-deep:#6f1e16;
  --chat-gold:#a9803a; --chat-goldl:#c6a567; --chat-gold-soft:#e8d5a3;
  --chat-ink:#241f19; --chat-muted:#8a7768;
  --chat-cream:#fdf9f0; --chat-ivory:#f8f1e2; --chat-paper:#f1e7d2; --chat-border:#e0d2b4;
  position:fixed; left:18px; bottom:18px; right:auto; z-index:1200;
  font-family:Georgia, 'Times New Roman', serif;
}
/* NB : les règles de bascule invité↔membre de la navigation
   ([data-hdn-auth-only] / .hdn-authed …) sont désormais dans main.css
   (feuille bloquante) pour éviter tout flash, chat.css étant chargé en
   non-bloquant. Voir main.css. */
/* [hidden] doit l'emporter sur les display:flex des conteneurs internes. */
.hdn-chat [hidden]{ display:none !important; }
/* Bouton flottant : pastille laque au double liseré or, comme le sceau 丁. */
.hdn-chat-fab{
  width:56px; height:56px; border-radius:50%; border:none;
  background:linear-gradient(150deg, var(--chat-red), var(--chat-red-deep));
  color:var(--chat-ivory); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    inset 0 0 0 1.5px rgba(248,241,226,.35),
    inset 0 0 0 4px rgba(248,241,226,.08),
    0 6px 20px rgba(111,30,22,.38);
  transition:transform .15s ease, box-shadow .15s ease;
}
.hdn-chat-fab:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1.5px rgba(248,241,226,.45),
    inset 0 0 0 4px rgba(248,241,226,.1),
    0 10px 28px rgba(111,30,22,.48);
}
.hdn-chat[data-open="true"] .hdn-chat-fab{ transform:scale(.92); opacity:.88; }
.hdn-chat-badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:linear-gradient(150deg,#c9a24a,#a9803a); color:#fff;
  font-family:Arial, sans-serif; font-size:11px; font-weight:bold; line-height:20px;
  text-align:center; border:2px solid var(--chat-ivory); box-shadow:0 2px 6px rgba(60,30,10,.25);
}
/* Panneau : papier ivoire, coins doux, ombre chaude étagée. */
.hdn-chat-panel{
  position:absolute; left:0; right:auto; bottom:70px; width:min(380px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 120px)); display:flex; flex-direction:column;
  background:var(--chat-cream); border:1px solid var(--chat-border); border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(60,25,12,.45), 0 4px 16px rgba(60,25,12,.16);
  overflow:hidden; animation:hdn-chat-in .18s ease;
}
@keyframes hdn-chat-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
/* En-tête : laque profonde + filet d'or. */
.hdn-chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:13px 16px 12px;
  background:linear-gradient(150deg, var(--chat-red) 0%, #86251b 55%, var(--chat-red-deep) 100%);
  color:var(--chat-ivory);
  border-bottom:2px solid rgba(198,165,103,.55);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
}
.hdn-chat-head strong{ display:block; font-size:1.06rem; letter-spacing:.02em; }
.hdn-chat-sub{ display:block; font-size:.72rem; color:var(--chat-gold-soft); font-style:italic; opacity:.95; }
.hdn-chat-x{
  background:rgba(248,241,226,.12); border:1px solid rgba(248,241,226,.28); border-radius:50%;
  width:30px; height:30px; line-height:1; color:var(--chat-ivory); font-size:.95rem; cursor:pointer; padding:0;
}
.hdn-chat-x:hover{ background:rgba(248,241,226,.22); }
/* Onglets Salon / Privé : commande segmentée en pilules. */
.hdn-chat-tabs{
  display:flex; gap:6px; padding:8px 10px; background:var(--chat-ivory);
  border-bottom:1px solid var(--chat-border);
}
.hdn-chat-tab{
  flex:1; position:relative; cursor:pointer; padding:7px 6px;
  font-family:Georgia, serif; font-size:.88rem; color:#7c6a58;
  background:transparent; border:1px solid transparent; border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.hdn-chat-tab:hover{ background:rgba(169,128,58,.08); }
.hdn-chat-tab.is-on{
  color:var(--chat-ivory); font-weight:bold;
  background:linear-gradient(150deg, var(--chat-red), var(--chat-red-deep));
  border-color:rgba(111,30,22,.4);
  box-shadow:inset 0 0 0 1px rgba(248,241,226,.18), 0 2px 6px rgba(111,30,22,.25);
}
.hdn-chat-tabbadge{
  display:inline-block; min-width:16px; height:16px; padding:0 4px; margin-left:5px; vertical-align:1px;
  border-radius:8px; background:var(--chat-goldl); color:#4a3413; font-family:Arial, sans-serif; font-size:10px;
  line-height:16px; font-weight:bold;
}
.hdn-chat-tab.is-on .hdn-chat-tabbadge{ background:var(--chat-gold-soft); }
.hdn-chat-pane{ flex:1; min-height:0; display:flex; flex-direction:column; }
/* Liste des conversations privées */
.dm-threads{ flex:1; min-height:0; display:flex; flex-direction:column; }
.hdn-chat-new{
  margin:10px 12px; padding:10px; border:1px solid var(--chat-goldl); border-radius:12px;
  background:linear-gradient(150deg,#faf2df,#f4e7c8); color:var(--chat-red-deep);
  font-family:Georgia, serif; font-size:.9rem; font-weight:bold; cursor:pointer;
  box-shadow:0 1px 3px rgba(60,30,10,.08);
}
.hdn-chat-new:hover{ background:linear-gradient(150deg,#f7ecd2,#efe0ba); }
.dm-thread-list{ flex:1; min-height:0; overflow-y:auto; padding:0 8px 10px; }
.dm-thread{
  position:relative; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:10px 30px 10px 10px; border-radius:12px; display:flex; flex-direction:column; gap:2px;
}
.dm-thread:hover{ background:var(--chat-ivory); box-shadow:inset 0 0 0 1px var(--chat-border); }
.dm-thread-name{ font-weight:bold; color:var(--chat-red); font-size:.92rem; }
/* Pastille de présence en ligne / hors ligne */
.hdn-chat-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px;
  background:#cbbda4; border:1px solid rgba(0,0,0,.1); vertical-align:baseline; flex:0 0 auto;
}
.hdn-chat-dot.on{ background:#3fb27f; border-color:#2e8f63; box-shadow:0 0 0 2px rgba(63,178,127,.22); }
.dm-conv-head .hdn-chat-dot{ margin-right:8px; }
.hdn-chat-seen{ margin-left:8px; font-size:.72rem; font-weight:normal; font-style:italic; color:var(--chat-muted); }
.dm-conv-head .hdn-chat-seen{ font-family:Arial, sans-serif; }
.dm-thread-prev{ color:var(--chat-muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.dm-thread-unread{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:linear-gradient(150deg, var(--chat-red), var(--chat-red-deep)); color:#fff;
  font-family:Arial, sans-serif; font-size:11px; line-height:20px; text-align:center; font-weight:bold;
  box-shadow:0 2px 5px rgba(111,30,22,.3);
}
/* Sélecteur de membre */
.dm-picker{ flex:1; min-height:0; display:flex; flex-direction:column; padding:10px 12px; gap:8px; }
.dm-back, .dm-back2{ align-self:flex-start; background:none; border:none; cursor:pointer; color:var(--chat-gold); font-family:Georgia, serif; font-size:.85rem; padding:2px 0; }
.dm-back:hover, .dm-back2:hover{ color:var(--chat-red); }
.dm-pick-title{ font-weight:bold; color:var(--chat-red); }
.dm-search{
  border:1px solid var(--chat-border); border-radius:12px; padding:9px 12px; font-family:Georgia, serif;
  font-size:.9rem; background:#fff; color:var(--chat-ink);
}
.dm-search:focus{ outline:none; border-color:var(--chat-goldl); box-shadow:0 0 0 3px rgba(198,165,103,.22); }
.dm-member-list{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.dm-member{
  text-align:left; background:none; border:none; border-bottom:1px solid var(--chat-border); cursor:pointer;
  padding:11px 8px; font-family:Georgia, serif; font-size:.95rem; color:var(--chat-ink); border-radius:8px 8px 0 0;
}
.dm-member:hover{ background:var(--chat-ivory); }
/* Conversation privée */
.dm-conv{ flex:1; min-height:0; display:flex; flex-direction:column; }
.dm-conv-head{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--chat-border); background:var(--chat-ivory); }
.dm-conv-head .dm-peer{ color:var(--chat-red); font-size:1rem; }

/* Journal des messages : papier chaud, très léger dégradé. */
.hdn-chat-log{
  flex:1; min-height:0; overflow-y:auto; padding:14px;
  background:linear-gradient(180deg, var(--chat-paper) 0%, #ede1c6 100%);
  display:flex; flex-direction:column; gap:10px;
}
.hdn-chat-empty{ margin:auto; text-align:center; color:var(--chat-muted); font-style:italic; font-size:.9rem; padding:20px; }
/* Bulles : les autres à gauche (ivoire), les miennes à droite (dorées). */
.hdn-chat-msg{
  position:relative; max-width:82%; align-self:flex-start;
  background:var(--chat-cream); border:1px solid var(--chat-border);
  border-radius:14px 14px 14px 4px;
  padding:7px 11px 8px; box-shadow:0 2px 5px rgba(60,30,10,.08);
}
.hdn-chat-msg.mine{
  align-self:flex-end;
  background:linear-gradient(150deg,#fbf3e0,#f5e7c6);
  border-color:#ddc48e;
  border-radius:14px 14px 4px 14px;
}
.hdn-chat-meta{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.hdn-chat-name{ font-weight:bold; color:var(--chat-red); font-size:.82rem; }
.hdn-chat-badge-adm{
  font-family:Arial, sans-serif; font-size:.6rem; font-weight:bold; text-transform:uppercase;
  letter-spacing:.04em; color:#4a3413; background:var(--chat-gold-soft); border:1px solid var(--chat-goldl);
  border-radius:4px; padding:0 4px; vertical-align:1px;
}
.hdn-chat-time{ font-size:.68rem; color:#a2917a; font-family:Arial, sans-serif; }
.hdn-chat-text{ color:var(--chat-ink); font-size:.92rem; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
/* URL saisies en texte, rendues cliquables (linkify de chat.js). */
.hdn-chat-link{ color:var(--chat-red); text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
.hdn-chat-link:hover{ opacity:.8; }
/* Traduire un message reçu dans sa langue */
.hdn-chat-mtr{
  display:inline-block; margin-top:5px; padding:0; background:none; border:none; cursor:pointer;
  font-family:Arial, sans-serif; font-size:.72rem; color:var(--chat-gold); opacity:.85;
}
.hdn-chat-mtr:hover{ opacity:1; text-decoration:underline; }
.hdn-chat-mtr.busy{ opacity:.5; cursor:progress; }
.hdn-chat-mtrans{
  margin-top:5px; padding-top:5px; border-top:1px dashed var(--chat-goldl);
  font-size:.9rem; color:var(--chat-ink); font-style:italic;
}
.hdn-chat-del{
  position:absolute; top:4px; right:4px; background:none; border:none; cursor:pointer;
  font-size:.72rem; opacity:0; transition:opacity .12s ease; padding:2px;
}
.hdn-chat-msg:hover .hdn-chat-del{ opacity:.55; }
.hdn-chat-del:hover{ opacity:1; }
/* Formulaire */
.hdn-chat-form{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid var(--chat-border);
  background:var(--chat-ivory);
}
/* Champ de saisie en pleine largeur, sur sa propre ligne ; les boutons
   (VN / EN / Envoyer) passent sur la ligne suivante (flex-wrap). */
.hdn-chat-input{
  flex:1 1 100%; width:100%; resize:none; border:1px solid var(--chat-border); border-radius:12px; padding:9px 12px;
  font-family:Georgia, serif; font-size:.92rem; color:var(--chat-ink); background:#fffdf8; line-height:1.4;
  min-height:44px; max-height:140px;
}
.hdn-chat-input:focus{ outline:none; border-color:var(--chat-goldl); box-shadow:0 0 0 3px rgba(198,165,103,.22); }
.hdn-chat-send{
  border:none; background:linear-gradient(150deg, var(--chat-red), var(--chat-red-deep));
  color:var(--chat-ivory); border-radius:999px;
  padding:9px 18px; font-family:Georgia, serif; font-size:.9rem; font-weight:bold; cursor:pointer; white-space:nowrap;
  margin-left:auto; /* aligné à droite sur la ligne des boutons */
  box-shadow:inset 0 0 0 1px rgba(248,241,226,.18), 0 2px 8px rgba(111,30,22,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.hdn-chat-send:hover{ transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(248,241,226,.25), 0 4px 12px rgba(111,30,22,.36); }
/* Boutons « traduire » (VN / EN) : pilules or discrètes. */
.hdn-chat-tr{
  border:1px solid var(--chat-goldl); background:transparent; color:#7a5c26;
  border-radius:999px; padding:8px 12px; font-family:Georgia, serif; font-size:.8rem;
  cursor:pointer; white-space:nowrap; line-height:1; transition:background .15s ease;
}
.hdn-chat-tr:hover{ background:rgba(198,165,103,.16); }
.hdn-chat-tr.busy{ opacity:.55; cursor:progress; }
.hdn-chat-toast{
  position:absolute; left:12px; right:12px; bottom:64px; background:#33241a; color:#f4ead6;
  border:1px solid rgba(198,165,103,.35);
  font-family:Arial, sans-serif; font-size:.82rem; text-align:center; padding:8px 12px; border-radius:10px;
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none;
}
.hdn-chat-toast.show{ opacity:.97; transform:none; }

@media (max-width:520px){
  .hdn-chat{ left:12px; right:auto; bottom:12px; }
  .hdn-chat-panel{ bottom:66px; height:min(70vh, calc(100vh - 96px)); }
}
/* MODE CLAIR FORCÉ : le widget garde sa palette ivoire/laque/or quel que
   soit le thème du système — pas de déclinaison prefers-color-scheme:dark
   (retirée volontairement : rendu identique pour tous les membres). */