:root{
  --fond:#0b0b0b; --cote:#111; --carte:#1d1d1d; --bord:#262626;
  --texte:#f2f2f2; --gris:#8f8f8f; --rouge:#FF2028; --moi:#b3141b; --vu:#8ad4ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--fond);color:var(--texte);
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none !important}

/* Accueil */
#accueil{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center}
.accueil-logo{width:120px;height:120px;border-radius:28px;margin-bottom:10px}
#accueil h1{margin:0;font-size:30px}
#accueil p{margin:0 0 22px;color:var(--gris)}
.bouton-rouge{background:var(--rouge);color:#fff;border:none;border-radius:14px;padding:14px 26px;font-weight:600;font-size:16px}

/* Structure */
#appli{display:flex;height:var(--hauteur,100dvh);overflow:hidden}
#cote{width:380px;flex-shrink:0;display:flex;flex-direction:column;background:var(--cote);border-right:1px solid var(--bord)}
#conv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--fond)}
#convInterieur{flex:1;display:flex;flex-direction:column;min-height:0}
.entete{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));min-height:60px;border-bottom:1px solid var(--bord)}
.logo{height:26px}
.entete-actions{margin-left:auto;display:flex;gap:8px}
.rond{width:40px;height:40px;border-radius:50%;border:none;background:var(--carte);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;overflow:hidden}
.rond.profil img{width:100%;height:100%;object-fit:cover}
.retour{display:none;background:none}
.recherche{padding:10px 14px}
.recherche input,.boite input{width:100%;background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:10px 14px;color:var(--texte);font-size:16px;outline:none}

/* Liste des discussions */
#liste{flex:1;overflow-y:auto}
.ligne{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer}
.ligne:hover,.ligne.active{background:var(--carte)}
.infos{flex:1;min-width:0;border-bottom:1px solid var(--bord);padding-bottom:10px;margin-bottom:-10px}
.infos .haut,.infos .bas{display:flex;align-items:center;gap:8px}
.infos .nom{flex:1;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.infos .date{font-size:12px;color:var(--gris)}
.infos .apercu{flex:1;font-size:14px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.infos .apercu.ecrit{color:var(--rouge)}
.badge{background:var(--rouge);color:#fff;font-size:12px;font-weight:700;min-width:20px;height:20px;border-radius:10px;padding:0 6px;display:flex;align-items:center;justify-content:center}
.ligne.non-lu .date{color:var(--rouge)}
.vide-liste{color:var(--gris);text-align:center;padding:40px 24px;line-height:1.5}
.avatar{border-radius:50%;background:#3a1215;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.groupe{background:#2a2a2a}

/* Conversation */
#vide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gris);gap:14px;padding:24px;text-align:center}
#vide img{width:90px;opacity:.25}
.conv-titre{min-width:0}
#convNom{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#convSous{font-size:13px;color:var(--gris)}
#convSous.ecrit{color:var(--rouge)}
#fil{flex:1;overflow-y:auto;padding:10px 12px 14px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.jour{align-self:center;font-size:12px;color:var(--gris);background:var(--carte);padding:4px 12px;border-radius:10px;margin:12px 0 8px}
.charger{align-self:center;font-size:13px;color:var(--gris);padding:8px}
.bulle{max-width:min(78%,560px);padding:7px 10px 6px;border-radius:18px;line-height:1.38;font-size:15.5px;overflow-wrap:anywhere;white-space:pre-wrap;margin-top:8px}
.bulle.suite{margin-top:0}
.bulle.moi{align-self:flex-end;background:var(--moi);border-bottom-right-radius:6px}
.bulle.lui{align-self:flex-start;background:var(--carte);border-bottom-left-radius:6px}
.bulle .auteur{display:block;font-size:12.5px;font-weight:700;color:#ff6b72;margin-bottom:2px}
.bulle img{display:block;max-width:100%;max-height:360px;border-radius:13px;margin:-2px -5px 4px;cursor:zoom-in}
.bulle .meta{float:right;font-size:11px;opacity:.7;margin:7px 0 -3px 10px;white-space:nowrap}
.bulle .coches{margin-left:3px;letter-spacing:-3px}
.bulle .coches.vu{color:var(--vu);opacity:1}

/* Saisie */
#apercuImage{position:relative;padding:8px 14px 0}
#apercuImage img{height:90px;border-radius:12px}
#retirerImage{position:absolute;top:2px;left:92px;width:26px;height:26px;border-radius:50%;border:none;background:#000c;color:#fff;font-size:18px}
#saisie{display:flex;align-items:flex-end;gap:8px;padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--bord)}
#texte{flex:1;resize:none;max-height:140px;background:var(--carte);border:1px solid var(--bord);border-radius:22px;padding:10px 16px;color:var(--texte);font:inherit;font-size:16px;line-height:1.3;outline:none}
.envoyer{background:var(--rouge);color:#fff}
.envoyer:disabled{opacity:.45}

/* Fenêtres */
.voile{position:fixed;inset:0;z-index:50;background:#000a;display:flex;align-items:flex-start;justify-content:center;padding:calc(40px + env(safe-area-inset-top)) 12px 12px}
.boite{width:100%;max-width:460px;max-height:80dvh;background:#151515;border:1px solid var(--bord);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.boite.petite{max-width:320px;margin-left:auto}
.boite-entete{display:flex;align-items:center;justify-content:space-between}
.boite-entete h3{margin:0;font-size:16px}
.lien{background:none;border:none;color:var(--gris);padding:6px;min-width:60px;text-align:left}
.lien.fort{color:var(--rouge);font-weight:700;text-align:right}
.ligne-action{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;padding:10px 6px;text-align:left;font-size:16px;color:var(--texte);text-decoration:none;border-radius:10px}
.ligne-action:hover{background:var(--carte)}
.ligne-action.rouge{color:#ff5a60}
.pastille{width:40px;height:40px;border-radius:50%;background:var(--rouge);color:#fff;display:flex;align-items:center;justify-content:center}
#menuNom{font-weight:700;padding:6px 6px 8px;border-bottom:1px solid var(--bord)}
#resultats{overflow-y:auto}
#resultats .ligne{padding:8px 6px;border-radius:10px}
#resultats .coche{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid #555}
#resultats .ligne.choisi .coche{background:var(--rouge);border-color:var(--rouge)}
#choisis{display:flex;flex-wrap:wrap;gap:6px}
#choisis span{background:var(--carte);border-radius:14px;padding:4px 10px;font-size:13px}
.astuce{color:var(--gris);font-size:14px;padding:8px 6px;line-height:1.45}

#visionneuse{position:fixed;inset:0;z-index:60;background:#000e;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
#visionneuse img{max-width:100%;max-height:100%}
#toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#2b2b2b;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;display:none;z-index:70}

/* Téléphone : la conversation glisse par-dessus la liste */
@media (max-width:800px){
  #cote{width:100%;border-right:none}
  #conv{position:fixed;inset:0;height:var(--hauteur,100dvh);transform:translateX(100%);transition:transform .25s cubic-bezier(.3,0,.2,1);z-index:10}
  body.dans-conv #conv{transform:none}
  .retour{display:inline-flex}
  #vide{display:none}
}

/* Grand écran : conversation centrée sur 900 px, comme Telegram ou Messenger */
#fil{padding-left:max(12px,calc((100% - 1100px) / 2));padding-right:max(12px,calc((100% - 1100px) / 2))}
#saisie{padding-left:max(10px,calc((100% - 1100px) / 2));padding-right:max(10px,calc((100% - 1100px) / 2))}
#apercuImage{padding-left:max(14px,calc((100% - 1100px) / 2))}
#retirerImage{left:calc(max(14px,calc((100% - 1100px) / 2)) + 78px)}

/* Barres de défilement fines et sombres ; aucune dans la saisie tant que le message tient */
*{scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#4a4a4a}
#texte{overflow-y:hidden}

/* ===== Grand écran façon WhatsApp Web : appli dans un cadre centré, conversation pleine largeur ===== */
#fil{padding-left:clamp(12px,5%,64px);padding-right:clamp(12px,5%,64px)}
#saisie{padding-left:clamp(10px,3%,40px);padding-right:clamp(10px,3%,40px)}
#apercuImage{padding-left:clamp(14px,3%,40px)}
#retirerImage{left:calc(clamp(14px,3%,40px) + 78px)}
.bulle{max-width:65%}
@media (min-width:1441px){
  html,body{background:#060606}
  #appli{max-width:1600px;margin:0 auto;border-left:1px solid var(--bord);border-right:1px solid var(--bord);box-shadow:0 0 60px #000}
}

/* ===== Appli pleine largeur, marges proportionnelles dans la conversation ===== */
@media (min-width:1441px){
  html,body{background:var(--fond)}
  #appli{max-width:none;margin:0;border:none;box-shadow:none}
}
#fil{padding-left:clamp(12px,10%,260px);padding-right:clamp(12px,10%,260px)}
#saisie{padding-left:clamp(10px,10%,260px);padding-right:clamp(10px,10%,260px)}
#apercuImage{padding-left:clamp(14px,10%,260px)}
#retirerImage{left:calc(clamp(14px,10%,260px) + 78px)}

/* ===== Messages : réponses, réactions, suppression ===== */
.msg{display:flex;flex-direction:column;max-width:65%;margin-top:8px;position:relative}
.msg.suite{margin-top:2px}
.msg.moi{align-self:flex-end;align-items:flex-end}
.msg.lui{align-self:flex-start;align-items:flex-start}
.msg .bulle{max-width:100%;margin-top:0;transition:transform .15s ease}
.msg.eclaire .bulle{animation:eclaire 1.2s ease}
@keyframes eclaire{0%,100%{filter:none}30%{filter:brightness(1.6)}}
.bulle.supprime{font-style:italic;opacity:.65}
.citation{border-left:3px solid #ff6b72;background:#0000002e;border-radius:8px;padding:5px 8px;margin:0 0 5px;font-size:13.5px;cursor:pointer;max-width:100%;overflow:hidden}
.citation .c-auteur{display:block;font-weight:700;color:#ff8a90;font-size:12.5px}
.citation .c-texte{display:block;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reactions{display:flex;align-items:center;gap:2px;background:#262626;border:2px solid var(--fond);border-radius:14px;padding:1px 7px;font-size:14px;margin-top:-6px;z-index:1;cursor:pointer}
.reactions.mienne{background:#3a1215}
.reactions .n{font-size:12px;color:var(--gris);margin-left:3px}
.actions-msg{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:2px;opacity:0;pointer-events:none;transition:opacity .12s}
.msg.moi .actions-msg{right:calc(100% + 6px)}
.msg.lui .actions-msg{left:calc(100% + 6px)}
.actions-msg button{width:30px;height:30px;border-radius:50%;border:none;background:var(--carte);color:var(--gris);font-size:15px;display:flex;align-items:center;justify-content:center;padding:0}
.actions-msg button:hover{color:#fff;background:#2a2a2a}
@media (hover:hover){ .msg:hover .actions-msg{opacity:1;pointer-events:auto} }
@media (hover:none){ .bulle{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} }
#barreReponse{display:flex;align-items:center;gap:10px;margin:8px clamp(10px,10%,260px) 0;padding:8px 10px;background:var(--carte);border-left:3px solid var(--rouge);border-radius:10px}
#barreReponse .r-texte{flex:1;min-width:0;font-size:13.5px}
#barreReponse .r-texte b{display:block;color:#ff8a90;font-size:12.5px}
#barreReponse .r-texte span{display:block;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#barreReponse button{background:none;border:none;color:var(--gris);font-size:20px;padding:4px 6px}
#actionsMsg{align-items:center}
#actionsMsg .boite{max-width:340px;gap:4px}
.barre-reactions{display:flex;justify-content:space-between;padding:4px 2px 8px;border-bottom:1px solid var(--bord);margin-bottom:4px}
.barre-reactions button{font-size:26px;background:none;border:none;border-radius:50%;width:44px;height:44px;padding:0;transition:transform .12s}
.barre-reactions button:hover{transform:scale(1.2)}
.barre-reactions button.choisie{background:#3a1215}

/* Boutons au survol : collés à la bulle (plus d'espace vide), petit délai avant de disparaître */
.msg.moi .actions-msg{right:100%;padding-right:6px}
.msg.lui .actions-msg{left:100%;padding-left:6px}
.actions-msg{visibility:hidden;transition:opacity .15s ease .35s,visibility 0s linear .5s}
@media (hover:hover){ .msg:hover .actions-msg{visibility:visible;transition-delay:0s,0s} }
.ligne-action svg{flex-shrink:0;color:var(--gris)}
.ligne-action.rouge svg{color:#ff5a60}

/* Icône blanche sur le rond rouge (« Nouveau groupe ») */
.ligne-action .pastille svg{color:#fff}

/* Photo de groupe modifiable (admins) : bandeau appareil photo en bas */
.avatar.photo-modifiable{position:relative;cursor:pointer}
.avatar.photo-modifiable::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='3'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3Cpath d='M8.5 6l1.5-2h4l1.5 2'/%3E%3C/svg%3E") center/16px no-repeat}