/* ══════════════════════════════════════════════════════════════════════
   Whileresume — Messagerie

   Page dédiée et bulle. Les deux partagent les mêmes composants — un
   message a un seul gabarit, quel que soit l'endroit où il s'affiche.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   PAGE — deux colonnes
   ══════════════════════════════════════════════════════════════════ */

.wr-msg {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 68px - 140px);
  min-height: 520px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  overflow: hidden;
  box-shadow: var(--wr-shadow);
}

.wr-msg__list {
  border-right: 1px solid var(--wr-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wr-msg__search {
  padding: 14px;
  border-bottom: 1px solid var(--wr-line);
  flex-shrink: 0;
}

.wr-msg__convs {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.wr-msg__thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.wr-msg__none {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  color: var(--wr-muted);
}

/* Sur mobile, une seule colonne à la fois : deux colonnes de 170px
   seraient inutilisables. */
@media (max-width: 900px) {
  .wr-msg {
    grid-template-columns: 1fr;
    height: calc(100vh - 60px - 100px);
  }

  .wr-msg__thread { display: none; }
  .wr-msg.has-thread .wr-msg__list { display: none; }
  .wr-msg.has-thread .wr-msg__thread { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════
   CONVERSATION (une ligne de la liste)
   ══════════════════════════════════════════════════════════════════ */

.wr-conv {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--wr-line);
  transition: background var(--wr-t);
  cursor: pointer;
}
.wr-conv:hover { background: var(--wr-violet-softer); }

.wr-conv.is-active {
  background: var(--wr-violet-soft);
  border-left: 3px solid var(--wr-violet);
  padding-left: 11px;
}

/* Une conversation non lue : nom en gras, point violet sur l'avatar.
   Discret, mais impossible à rater en balayant la liste. */
.wr-conv.has-unread .wr-conv__name { font-weight: 700; }
.wr-conv.has-unread .wr-conv__preview {
  color: var(--wr-ink-2);
  font-weight: 500;
}

.wr-conv__avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.wr-conv__avatar img { width: 100%; height: 100%; object-fit: cover; }

.wr-conv__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--wr-violet);
  border: 2px solid var(--wr-card);
}

.wr-conv__body { flex: 1; min-width: 0; }

.wr-conv__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.wr-conv__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wr-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-conv__time {
  font-size: 10.5px;
  color: var(--wr-muted-2);
  flex-shrink: 0;
  white-space: nowrap;
}

.wr-conv__subtitle {
  display: block;
  font-size: 11.5px;
  color: var(--wr-violet);
  font-weight: 500;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-conv__preview {
  display: block;
  font-size: 12.5px;
  color: var(--wr-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.wr-conv__you { color: var(--wr-muted-2); }

/* ══════════════════════════════════════════════════════════════════
   FIL DE DISCUSSION
   ══════════════════════════════════════════════════════════════════ */

.wr-thread {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.wr-thread__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wr-line);
  background: var(--wr-card);
  flex-shrink: 0;
}

/* Le bouton retour n'a de sens que sur mobile et dans la bulle. Sur la
   page en deux colonnes, la liste est déjà là. */
.wr-thread__back {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: var(--wr-r-sm);
  color: var(--wr-muted);
  place-items: center;
  flex-shrink: 0;
}
.wr-thread__back:hover { background: var(--wr-violet-soft); color: var(--wr-violet); }
.wr-thread__back svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .wr-msg .wr-thread__back { display: grid; }
}
.wr-bubble .wr-thread__back { display: grid; }

.wr-thread__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--wr-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-thread__subtitle {
  font-size: 11.5px;
  color: var(--wr-violet);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le statut : point vert « en ligne », ou « vu il y a 2 h ». */
.wr-thread__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--wr-muted);
}

.wr-thread__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wr-success);
  animation: wrPulse2 2.5s ease-out infinite;
}

/* ── Les messages ──
   `scroll-behavior: smooth` fait défiler joliment vers un nouveau
   message. Mais au CHARGEMENT on veut sauter en bas instantanément — le
   JS retire temporairement le comportement. */
.wr-thread__messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  scroll-behavior: smooth;
  background: var(--wr-bg);
}

.wr-thread__start {
  margin: auto;
  text-align: center;
  color: var(--wr-muted);
  font-size: 13px;
  max-width: 32ch;
  padding: 32px;
}

/* ══════════════════════════════════════════════════════════════════
   MESSAGE
   ══════════════════════════════════════════════════════════════════ */

.wr-m {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 78%;
  animation: wrMsgIn 200ms ease;
}

@keyframes wrMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Mes messages : à droite, en violet. Ceux de l'autre : à gauche, en
   blanc. C'est la convention de toutes les messageries — on ne
   réinvente pas ce que tout le monde sait lire. */
.wr-m--own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.wr-m__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 17px;
}
.wr-m__avatar img { width: 100%; height: 100%; object-fit: cover; }

.wr-m__body { min-width: 0; }

.wr-m__bubble {
  padding: 10px 14px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wr-ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.wr-m--own .wr-m__bubble {
  background: var(--wr-violet);
  border-color: var(--wr-violet);
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px;
}

.wr-m__time {
  display: block;
  font-size: 10.5px;
  color: var(--wr-muted-2);
  margin-top: 3px;
  padding-inline: 8px;
}
.wr-m--own .wr-m__time { text-align: right; }

/* ── Séparateur de jour ──
   « Aujourd'hui », « Hier », « 12 mars ». Sans lui, un fil de trois
   semaines ressemble à une conversation d'un seul tenant. */
.wr-m-day {
  align-self: center;
  padding: 4px 12px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-bg-2);
  color: var(--wr-muted);
  font-size: 11px;
  font-weight: 600;
  margin-block: 6px;
}

/* ── « En train d'écrire… » ── */

.wr-thread__typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  font-size: 11.5px;
  color: var(--wr-muted);
  flex-shrink: 0;
  background: var(--wr-bg);
}

.wr-typing-dots { display: inline-flex; gap: 3px; }

.wr-typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wr-violet);
  animation: wrTyping 1.2s ease-in-out infinite;
}
.wr-typing-dots span:nth-child(2) { animation-delay: .15s; }
.wr-typing-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes wrTyping {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* ══════════════════════════════════════════════════════════════════
   SAISIE
   ══════════════════════════════════════════════════════════════════ */

.wr-thread__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--wr-line);
  background: var(--wr-card);
  flex-shrink: 0;
}

.wr-thread__input {
  flex: 1;
  min-height: 42px;
  max-height: 130px;
  padding: 11px 16px;
  font-family: var(--wr-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--wr-ink);
  background: #F9FAFB;
  border: 1px solid transparent;
  border-radius: var(--wr-r-pill);
  resize: none;
  overflow-y: auto;
  transition: all var(--wr-t);
  outline: none;
}
.wr-thread__input:focus {
  background: var(--wr-card);
  border-color: var(--wr-violet-2);
  box-shadow: 0 0 0 3px rgba(138, 99, 192, .1);
}
.wr-thread__input::placeholder { color: var(--wr-muted-2); }

.wr-thread__send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wr-violet);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--wr-t);
}
.wr-thread__send:hover:not(:disabled) {
  background: var(--wr-violet-dark);
  transform: scale(1.06);
}

/* Désactivé tant que le champ est vide. Un bouton d'envoi actif sur un
   message vide, c'est un piège. */
.wr-thread__send:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}
.wr-thread__send svg { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════
   BULLE — bas à droite
   ══════════════════════════════════════════════════════════════════ */

.wr-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.wr-bubble__btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wr-violet);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(138, 99, 193, .35);
  transition: all var(--wr-t);
  flex-shrink: 0;
}
.wr-bubble__btn:hover {
  background: var(--wr-violet-dark);
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(138, 99, 193, .45);
}

.wr-bubble__btn svg {
  width: 23px;
  height: 23px;
  position: absolute;
  transition: all 200ms ease;
}

/* Les deux icônes se croisent : le chat disparaît, la croix apparaît. */
.wr-bubble__icon-close { opacity: 0; transform: rotate(-90deg) scale(.6); }

.wr-bubble.is-open .wr-bubble__icon-open {
  opacity: 0;
  transform: rotate(90deg) scale(.6);
}
.wr-bubble.is-open .wr-bubble__icon-close {
  opacity: 1;
  transform: none;
}

/* La pastille. Masquée à zéro : afficher « 0 » n'informe personne. */
.wr-bubble__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--wr-bg);
  animation: wrBadgePop 300ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes wrBadgePop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.wr-bubble__panel {
  width: 380px;
  height: 540px;
  max-height: calc(100vh - 130px);
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  box-shadow: 0 16px 48px rgba(30, 27, 46, .16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: wrPanelIn 220ms ease;
}

@keyframes wrPanelIn {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.wr-bubble__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--wr-line);
  background: var(--wr-ink);
  color: #fff;
  flex-shrink: 0;
}

.wr-bubble__title {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-bubble__back,
.wr-bubble__expand,
.wr-bubble__close {
  width: 28px;
  height: 28px;
  border-radius: var(--wr-r-sm);
  color: rgba(255, 255, 255, .6);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--wr-t);
}
.wr-bubble__back:hover,
.wr-bubble__expand:hover,
.wr-bubble__close:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.wr-bubble__back svg,
.wr-bubble__expand svg,
.wr-bubble__close svg { width: 15px; height: 15px; }

.wr-bubble__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Le fil, dans la bulle : il prend toute la place. Son en-tête est
   masqué — c'est celui de la bulle qui porte le nom. */
.wr-bubble__body .wr-thread { height: 100%; }
.wr-bubble__body .wr-thread__head { display: none; }

.wr-bubble__loading {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px;
}

/* Sur mobile, la bulle occupe presque tout l'écran : un panneau de 380px
   sur un téléphone de 360px déborderait. */
@media (max-width: 480px) {
  .wr-bubble {
    bottom: 16px;
    right: 16px;
    left: 16px;
    align-items: stretch;
  }

  .wr-bubble__panel {
    width: 100%;
    height: calc(100vh - 120px);
  }

  .wr-bubble__btn { align-self: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════
   ÉTAT VIDE
   ══════════════════════════════════════════════════════════════════ */

.wr-conv-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--wr-muted);
}

.wr-conv-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: var(--wr-r-lg);
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
}
.wr-conv-empty__icon svg { width: 22px; height: 22px; }

.wr-conv-empty p {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wr-ink);
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   ⚠️  L'ATTRIBUT `hidden` DOIT ÊTRE RESPECTÉ.

   `.wr-bubble__panel { display: flex }` est un style d'AUTEUR.
   `[hidden] { display: none }` est un style du NAVIGATEUR.

   Un style d'auteur bat un style de navigateur — la spécificité n'y est
   pour rien, c'est la cascade elle-même qui en décide. Le `display: flex`
   annulait donc purement et simplement l'attribut `hidden`.

   Conséquence : le panneau était TOUJOURS affiché. Ouvert au chargement,
   avec le spinner du gabarit, sans jamais charger quoi que ce soit — le JS
   ne charge la liste qu'au clic. Et le bouton « fermer » ne fermait rien.

   Une ligne. Elle manquait depuis le début.
   ══════════════════════════════════════════════════════════════════════ */

.wr-bubble__panel[hidden] { display: none; }

/* Même piège, mêmes causes : tous les éléments de la messagerie qui
   comptent sur `hidden` et à qui le CSS donne un `display`. */
.wr-bubble__back[hidden],
.wr-msg-typing[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   LA BULLE ET LE RAIL NE COHABITENT PAS
   ══════════════════════════════════════════════════════════════════════

   Le rail de droite affiche les conversations récentes. La bulle flottante
   aussi. Sur un grand écran, les deux étaient là : deux messageries sur le
   même écran, dont l'une cache le coin inférieur droit du contenu.

   Au-delà de 1280 px, le rail est visible → la bulle disparaît.
   En dessous, le rail passe à la trappe → la bulle reprend son rôle. Elle
   redevient ce pour quoi elle a été faite : l'accès à la messagerie quand il
   n'y a pas la place de l'afficher.

   Un composant qui fait double emploi n'est pas « redondant » : il est en
   trop, et il occupe une place qu'un autre voulait.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1281px) {
  .wr-bubble { display: none; }
}