/* =====================================================================================
 *  MESSAGES PRIVÉS — fil de conversation (public/messages-prives.js, back/messages-prives.js)
 *  Les bulles reprennent celles de l'application Messages (telephone-apps.css : .ta-bulle,
 *  .ta-rapide) ; ce fichier n'ajoute que la vie d'une vraie messagerie : « en train
 *  d'écrire… », bulles qui arrivent l'une après l'autre, et la fenêtre de secours.
 * ===================================================================================== */

/* « … » : trois points qui ondulent, puis s'effacent quand la réplique arrive. */
.mp-tape{align-self:flex-start;display:flex;gap:4px;align-items:center;background:#26252a;border-radius:18px;border-bottom-left-radius:6px;
  padding:11px 13px;margin:0;overflow:hidden;opacity:0;max-height:0;
  animation:mpTape var(--mp-d,900ms) linear var(--mp-d0,0ms) both}
.mp-tape i{width:7px;height:7px;border-radius:50%;background:#8e8e93;animation:mpPoint 1s ease-in-out infinite}
.mp-tape i:nth-child(2){animation-delay:.16s}
.mp-tape i:nth-child(3){animation-delay:.32s}
@keyframes mpTape{0%{opacity:1;max-height:40px}96%{opacity:1;max-height:40px}100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}}
@keyframes mpPoint{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* Une bulle (ou les réponses proposées) qui vient d'arriver. */
.mp-neuf{animation:mpArrive .28s cubic-bezier(.2,.9,.3,1.2) var(--mp-d,0ms) both}
@keyframes mpArrive{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.ta-bulle.moi.mp-neuf{transform-origin:right bottom}
.ta-bulle.lui.mp-neuf{transform-origin:left bottom}
.mp-rapides.mp-neuf{animation-duration:.35s}

@media (prefers-reduced-motion:reduce){
  .mp-tape{display:none}
  .mp-neuf{animation:none}
}

/* Fenêtre de secours (index.html : #ov) — mêmes couleurs que le téléphone. */
.mp-fenetre{--ta-blue:#0a84ff;--ta-t2:#8e8e93;max-width:440px;margin:0 auto;background:#000;border:1px solid #2c2c2e;border-radius:22px;padding:14px 14px 16px;box-shadow:0 20px 60px #000a}
.mp-tete{display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid #2c2c2e;margin-bottom:6px}
.mp-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#ff8fb1,#e0436f);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;flex:none}
.mp-tete b{display:block;color:#fff;font-size:15.5px}
.mp-tete small{color:#8e8e93;font-size:12px}
.mp-fil{max-height:min(62vh,520px);overflow-y:auto}