/* pbc-mconver: la conversación en móvil con los valores del HTML que dio
   ChatGPT para esta pantalla (prefijo pbc-mconver-, maqueta 13/08/2026).

   La sala ya existe y su marcado lo comparten el escritorio y un montón de
   piezas (traducir, reacciones, hilos...), así que aquí se aplican los valores
   del diseño (colores, redondeos, sombras) sobre las clases que ya hay, y solo
   en móvil. Esta hoja va DENTRO del bloque del flag CHAT_WA_UI: con el flag
   apagado no se carga y la sala se ve como antes.

   Cambia lo que se veía distinto de la maqueta:
   - Fondo crema con puntitos de WhatsApp -> gris azulado de la marca.
   - Burbuja propia azul de la marca con el texto en blanco (antes azul palo).
   - Cabecera azul con la curva de abajo, foto redonda con aro blanco.
   - Separador de día en pastilla gris azulada.
   - Cita con la barra AMARILLA y el nombre en amarillo.
   - Barra de escribir clara con el botón de enviar AMARILLO. */

@media (max-width: 767.98px) {
  /* ===== Cabecera ===== */
  body.cchat-body .cchat-head,
  body.cchat-body .cchat-head-in { background: #086bc9; }
  body.cchat-body .cchat-head {
    border-radius: 0 0 38px 38px;
    box-shadow: 0 12px 28px rgba(8, 107, 201, .20);
  }
  body.cchat-body .cchat-head-in { padding: .55rem 14px 1.1rem; gap: 10px; }
  body.cchat-body .cchat-head a.back {
    width: 42px;
    height: 42px;
    justify-content: center;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 15px;
  }
  body.cchat-body .cchat-head-photo,
  body.cchat-body .cchat-head-nophoto {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid #ffffff;
    box-shadow: 0 5px 14px rgba(0, 37, 72, .24);
  }
  body.cchat-body .cchat-head .tname {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.02em;
  }
  body.cchat-body .cchat-head .tname small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 700;
  }

  /* ===== Fondo de la conversación ===== */
  body.cchat-body .cchat-scroll {
    padding: 24px 14px;
    background-color: #eef4f8;
    background-image: none;
  }

  /* ===== Burbujas ===== */
  body.cchat-body .cchat-msg {
    max-width: 82%;
    padding: 12px 13px 9px;
    background: #ffffff;
    border: 1px solid rgba(198, 214, 225, .62);
    border-radius: 20px 20px 20px 7px;
    box-shadow: 0 6px 18px rgba(31, 63, 89, .08);
    font-size: 14px;
    line-height: 1.42;
  }
  body.cchat-body .cchat-msg .txt { font-weight: 590; }
  /* Negrita al estilo WhatsApp (*así*). El texto normal ya va a 590, así que la
     negrita necesita más peso para que se note de verdad. */
  body.cchat-body .cchat-msg .txt strong { font-weight: 800; }
  body.cchat-body .cchat-msg .when { font-size: 10px; font-weight: 750; color: #8290a0; }

  /* La mía: azul de la marca y texto en blanco. */
  body.cchat-body .cchat-msg.mine {
    color: #ffffff;
    background: #086bc9;
    border: 1px solid #086bc9;
    border-radius: 20px 20px 7px 20px;
    box-shadow: 0 7px 18px rgba(8, 107, 201, .18);
  }
  body.cchat-body .cchat-msg.mine .txt { color: #ffffff; }
  /* Los enlaces del mensaje de bienvenida llevan color azul en un `style=` inline
     (welcome_dm.py), y ahí dentro de la burbuja azul no se leen: el !important es lo
     único que pisa el inline, y también arregla los mensajes ya guardados. */
  body.cchat-body .cchat-msg.mine a,
  body.cchat-body .cchat-msg.mine .txt a { color: #ffffff !important; }
  body.cchat-body .cchat-msg.mine .when,
  body.cchat-body .cchat-msg.mine .cc-edited { color: rgba(255, 255, 255, .77); }

  /* ===== Cita (responder a un mensaje) ===== */
  body.cchat-body .cc-quote {
    padding: 9px 10px 9px 13px;
    border-left: 0;
    border-radius: 13px;
    font-size: 12px;
  }
  body.cchat-body .cchat-msg.mine .cc-quote {
    position: relative;
    color: #ffffff;
    background: rgba(255, 255, 255, .14);
  }
  body.cchat-body .cchat-msg.mine .cc-quote::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 4px;
    background: #ffd51f;
    border-radius: 0 4px 4px 0;
  }
  body.cchat-body .cchat-msg.mine .cc-quote .qwho { color: #ffd51f; font-weight: 900; }
  body.cchat-body .cchat-msg.mine .cc-quote .qtxt { color: rgba(255, 255, 255, .88); }
  /* La cita en un mensaje de otro: misma forma, barra azul. */
  body.cchat-body .cchat-msg:not(.mine) .cc-quote {
    position: relative;
    background: rgba(8, 107, 201, .07);
  }
  body.cchat-body .cchat-msg:not(.mine) .cc-quote::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 4px;
    background: #086bc9;
    border-radius: 0 4px 4px 0;
  }

  /* ===== Separador de día ===== */
  body.cchat-body .cchat-day {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    color: #607286;
    background: #dde8ef;
    border: 1px solid rgba(178, 199, 213, .55);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 3px 9px rgba(31, 63, 89, .05);
  }

  /* ===== Nota de voz: botón redondo azul y barra azul ===== */
  body.cchat-body .cc-vp-play {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: #086bc9;
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(8, 107, 201, .22);
  }
  body.cchat-body .cc-vp-bar { background: rgba(168, 197, 217, .55); }
  body.cchat-body .cc-vp-fill { background: #086bc9; }
  body.cchat-body .cc-vp-time { font-size: 10px; font-weight: 800; color: #687b8f; }
  /* Dentro de la burbuja azul, el reproductor se ve al revés: botón blanco. */
  body.cchat-body .cchat-msg.mine .cc-vp-play { background: #ffffff; color: #086bc9; }
  body.cchat-body .cchat-msg.mine .cc-vp-bar { background: rgba(255, 255, 255, .32); }
  body.cchat-body .cchat-msg.mine .cc-vp-fill { background: #ffd51f; }
  body.cchat-body .cchat-msg.mine .cc-vp-time { color: rgba(255, 255, 255, .82); }
  /* La velocidad (1x / 1.5x / 2x) EN BLANCO (Guille 14/08/2026): en el móvil se
     perdía dentro de la burbuja azul, que es oscura, porque iba en gris azulado
     sobre un fondo casi transparente. */
  body.cchat-body .cc-vp-rate {
    font-size: 10px;
    font-weight: 850;
    background: #086bc9;
    color: #ffffff;
  }
  body.cchat-body .cchat-msg.mine .cc-vp-rate {
    background: rgba(255, 255, 255, .28);
    color: #ffffff;
  }

  /* ===== Fotos y vídeos dentro de la burbuja ===== */
  body.cchat-body .cchat-msg.cc-image,
  body.cchat-body .cchat-msg.cc-video { padding: 5px; }
  body.cchat-body .cc-img,
  body.cchat-body .cc-video-el { border-radius: 16px; }

  /* ===== Barra de escribir ===== */
  body.cchat-body .cchat-form {
    padding: 10px 11px calc(10px + env(safe-area-inset-bottom));
    background: rgba(238, 244, 248, .96);
    border-top: 1px solid rgba(190, 207, 219, .72);
    box-shadow: 0 -10px 28px rgba(31, 63, 89, .10);
    gap: 7px;
  }
  /* 16px a proposito: con letra mas pequena el iPhone AMPLIA la pantalla al
     tocar la caja y ya no vuelve sola (Bruce, 18/08/2026: no veia ni lo que
     escribia ni el boton de enviar). Nunca bajar de 16px en cajas de escribir. */
  body.cchat-body .cchat-form textarea {
    background: #ffffff;
    border: 1px solid #d7e3ec;
    border-radius: 21px;
    box-shadow: 0 6px 18px rgba(31, 63, 89, .08);
    font-size: 16px;
    font-weight: 600;
  }
  body.cchat-body .cchat-form textarea:focus {
    border-color: #086bc9;
    box-shadow: 0 0 0 3px rgba(8, 107, 201, .12), 0 6px 18px rgba(31, 63, 89, .08);
  }
  /* La caja sigue haciendo scroll con textos largos, pero la barrita gris no se
     ve: afeaba la pastilla blanca. */
  body.cchat-body .cchat-form textarea,
  body.cchat-body .cc-th-form textarea,
  body.cchat-body .cc-pv-bar textarea {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.cchat-body .cchat-form textarea::-webkit-scrollbar,
  body.cchat-body .cc-th-form textarea::-webkit-scrollbar,
  body.cchat-body .cc-pv-bar textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  /* Enviar: AMARILLO, como el botón principal de la marca. */
  body.cchat-body .cchat-form > button {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: #04549f;
    background: #ffd51f;
    border: 1px solid #e7b900;
    border-radius: 18px;
    box-shadow: 0 6px 15px rgba(197, 155, 0, .25);
  }
  /* ===== Modo WhatsApp (pastilla #ccPill) ===== */
  /* Con la pastilla, la caja de escribir va DENTRO de ella: la cajita blanca
     con borde de arriba partía la pastilla en trozos (carita fuera, caja con
     su propio marco, clip y cámara en otro bloque). Aquí la pastilla es la
     única caja blanca y la caja de texto queda transparente, como WhatsApp. */
  body.cchat-body .cchat-form .cc-pill {
    background: #ffffff;
    border: 1px solid #d7e3ec;
    border-radius: 24px;
    box-shadow: 0 6px 18px rgba(31, 63, 89, .08);
  }
  body.cchat-body .cchat-form .cc-pill textarea,
  body.cchat-body .cchat-form .cc-pill textarea:focus {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* Iconos de dentro (carita, clip, cámara): grises y sin fondo. */
  body.cchat-body .cchat-form .cc-pill .cc-tool {
    background: none;
    border: none;
    box-shadow: none;
    color: #54656f;
  }
  /* Con pastilla, enviar y micro son redondel del todo, como WhatsApp. */
  body.cchat-body .cchat-form:has(.cc-pill) > button { border-radius: 50%; }
}