/* === Chat (messages.php) === */
#chatBox{ scroll-behavior:smooth; }
#chatHeader img{ box-shadow:0 0 0 2px #fff; }
#convos .list-group-item:hover{ background:#f8f9fb; }

/* Bulles */
.chat-bubble{
  position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  word-wrap:break-word;
}
.chat-bubble img{
  display:block;
  max-width:260px;
  max-height:220px;
  border-radius:.5rem;
}

/* Ma bulle (droite) */
.chat-bubble.mine{
  background:#0d6efd;   /* Bootstrap primary */
  color:#fff;
}
.chat-bubble.mine::after{
  content:"";
  position:absolute; right:-6px; bottom:10px;
  border:8px solid transparent; border-left-color:#0d6efd;
}

/* Bulle de l'autre (gauche) */
.chat-bubble.theirs{
  background:#f6f7f9;
  color:#212529;
}
.chat-bubble.theirs::after{
  content:"";
  position:absolute; left:-6px; bottom:10px;
  border:8px solid transparent; border-right-color:#f6f7f9;
}

/* Aperçu de pièce jointe */
#preview{
  border:1px dashed #dee2e6;
  padding:.5rem .75rem;
  border-radius:.5rem;
  background:#fafbff;
}
#preview img{ max-width:180px; max-height:140px; border-radius:.5rem; }

/* Scrollbar légère (WebKit) */
#chatBox::-webkit-scrollbar{ width:10px; }
#chatBox::-webkit-scrollbar-thumb{ background:#cfd4da; border-radius:8px; }
#chatBox:hover::-webkit-scrollbar-thumb{ background:#b5bec7; }

/* Petites utilitaires */
.object-fit-cover{ object-fit:cover; }

/* Chat */
#chatBox{ scroll-behavior:smooth; }
.chat-bubble{ position:relative; box-shadow:0 2px 10px rgba(0,0,0,.06); word-wrap:break-word; }
.chat-bubble img{ display:block; max-width:260px; max-height:220px; border-radius:.5rem; }
.chat-bubble.mine{ background:#0d6efd; color:#fff; }
.chat-bubble.mine::after{ content:""; position:absolute; right:-6px; bottom:10px; border:8px solid transparent; border-left-color:#0d6efd; }
.chat-bubble.theirs{ background:#f6f7f9; color:#212529; }
.chat-bubble.theirs::after{ content:""; position:absolute; left:-6px; bottom:10px; border:8px solid transparent; border-right-color:#f6f7f9; }
#recTimer{ min-width:48px; text-align:center; }
.object-fit-cover{ object-fit:cover; }