/* ════════════════════════════════════════════════════════════════════
   chat_burbujas.css — FUENTE ÚNICA de la geometría de las burbujas de chat.

   La consumen las dos páginas con chat:
     · index.html  → burbujas .msg        (vía /static/app.css)
     · coach.html  → burbujas .coach-bubble (CSS inline de la página)

   Acá vive SOLO la geometría compartida (ancho, padding, radio). Los
   COLORES los pone cada página, porque tienen paletas distintas.
   Para hacer las burbujas más anchas o angostas, tocá una sola variable.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --burbuja-maxw:90%;        /* ancho máximo en desktop */
  --burbuja-pad:13px 16px;   /* padding interno */
  --burbuja-radio:16px;      /* radio de las esquinas */
}
@media(max-width:560px){
  :root{ --burbuja-maxw:96%; }   /* en mobile aprovechan casi todo el ancho */
}