/* ============================================================================
   WHATSAPP · los chats de los celulares son el WhatsApp de un iPhone en modo
   oscuro, tan fiel como el Spotify de la laptop (Santiago, 27-sep: «así como en
   el video se copió exactamente el estilo de WhatsApp, se copie también ahí»).
   Colores y medidas del WhatsApp de la demo de la agenda (tomados con gotero de
   una captura real, en pt de iOS). Sin su logo ni su arte: el fondo de dibujitos
   y los iconos son propios.
   Dos escalas (las pone variante.js en cada pantalla): --ptm, el punto de iOS al
   tamaño real de ese celular, para la barra de estado, el encabezado y la barra de
   abajo; y --pt, más grande, para los mensajes, con la letra un 15 % más chica que
   la de antes: a tamaño real no se leerían en el celular de quien recorre la página.
   ========================================================================== */

.pantalla--chat {
  --wa-fondo: #0a0a0a;
  --wa-sale: #144d37;
  --wa-entra: #242626;
  --wa-texto: #fafafa;
  --wa-hora-sale: #a1b8af;
  --wa-hora-entra: #a7a8a8;
  --wa-cabeza: #101211;
  --wa-pildora: #1e1e1e;
  --wa-icono: #f3f4f4;
  --wa-tenue: #9fa2a1;
  --wa-avatar: #242446;
  --wa-avatar-glifo: #a791ff;
  --wa-dia: #1d1f1f;
  --wa-dia-texto: #d0d0d0;
  --wa-pie: #101010;
  --wa-campo: #282828;
  --pt: 1px;
  --ptm: 1px;
  background: var(--wa-fondo);
  color: var(--wa-texto);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- los iconos: máscaras de SVG, del color del texto ---------------------- */
.wa-i {
  flex: none; display: block;
  background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

/* --- la barra de estado: la hora, la isla y señal, wifi y batería ----------- */
.wa-estado {
  flex: none; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(40 * var(--ptm)); padding: 0 calc(26 * var(--ptm)) 0 calc(34 * var(--ptm));
  background: var(--wa-cabeza); color: var(--wa-icono);
}
.wa-hora { font-size: calc(15 * var(--ptm)); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.wa-isla {
  position: absolute; left: 50%; top: calc(8 * var(--ptm));
  width: calc(96 * var(--ptm)); height: calc(26 * var(--ptm)); margin-left: calc(-48 * var(--ptm));
  border-radius: calc(13 * var(--ptm)); background: #000;
}
.wa-iconos { display: flex; align-items: center; gap: calc(5 * var(--ptm)); }
.wa-senal { width: calc(17 * var(--ptm)); height: calc(11 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Crect x='0' y='7' width='3' height='4' rx='1'/%3E%3Crect x='4.6' y='5' width='3' height='6' rx='1'/%3E%3Crect x='9.2' y='2.6' width='3' height='8.4' rx='1'/%3E%3Crect x='13.8' y='0' width='3' height='11' rx='1'/%3E%3C/svg%3E"); }
.wa-wifi { width: calc(15 * var(--ptm)); height: calc(11 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M7.5 2.2c2.3 0 4.4.9 6 2.4l1.1-1.1C12.7 1.6 10.2.6 7.5.6S2.3 1.6.4 3.5l1.1 1.1c1.6-1.5 3.7-2.4 6-2.4zm0 3.2c1.4 0 2.7.5 3.7 1.4l1.1-1.1C11 4.5 9.3 3.8 7.5 3.8s-3.5.7-4.8 1.9l1.1 1.1c1-.9 2.3-1.4 3.7-1.4zM7.5 8.6c.5 0 1 .2 1.4.5L7.5 10.6 6.1 9.1c.4-.3.9-.5 1.4-.5z'/%3E%3C/svg%3E"); }
.wa-bateria { width: calc(25 * var(--ptm)); height: calc(12 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 12'%3E%3Crect x='.6' y='.6' width='21.4' height='10.8' rx='3.4' fill='none' stroke='black' stroke-opacity='.45' stroke-width='1.1'/%3E%3Crect x='2.2' y='2.2' width='15.8' height='7.6' rx='2'/%3E%3Cpath d='M23.3 4v4c.8-.3 1.3-1.1 1.3-2s-.5-1.7-1.3-2z' fill-opacity='.45'/%3E%3C/svg%3E"); }

/* --- el encabezado ------------------------------------------------------------ */
.pantalla--chat .chat-cabeza {
  flex: none;
  display: flex; align-items: center; gap: calc(10 * var(--ptm));
  height: auto; padding: calc(4 * var(--ptm)) calc(12 * var(--ptm)) calc(10 * var(--ptm));
  background: var(--wa-cabeza); color: var(--wa-texto);
  border: 0; box-shadow: none;
}
.wa-atras, .wa-llamadas {
  flex: none; display: inline-flex; align-items: center;
  height: calc(40 * var(--ptm)); border-radius: calc(20 * var(--ptm));
  background: var(--wa-pildora); color: var(--wa-icono);
  box-shadow: inset 0 0 0 calc(0.5 * var(--ptm)) rgba(255, 255, 255, 0.1);
}
.wa-atras {
  gap: calc(3 * var(--ptm)); min-width: calc(44 * var(--ptm));
  padding: 0 calc(8 * var(--ptm)) 0 calc(6 * var(--ptm));
  font-size: calc(16 * var(--ptm)); line-height: 1; font-variant-numeric: tabular-nums;
}
.wa-atras::before {
  content: ''; flex: none; width: calc(11 * var(--ptm)); height: calc(19 * var(--ptm));
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 19'%3E%3Cpath d='M9.4 1.4L1.6 9.5l7.8 8.1' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 19'%3E%3Cpath d='M9.4 1.4L1.6 9.5l7.8 8.1' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pantalla--chat .chat-avatar {
  flex: none; position: relative;
  width: calc(38 * var(--ptm)); height: calc(38 * var(--ptm));
  border-radius: 50%; background: var(--wa-avatar); box-shadow: none;
}
.pantalla--chat .chat-avatar::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(13 * var(--ptm)); height: calc(14 * var(--ptm));
  margin: calc(-7 * var(--ptm)) 0 0 calc(-6.5 * var(--ptm));
  background: var(--wa-avatar-glifo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Ccircle cx='6' cy='3.3' r='3.2'/%3E%3Cpath d='M0 12C0 9 2.7 7.7 6 7.7S12 9 12 12c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Ccircle cx='6' cy='3.3' r='3.2'/%3E%3Cpath d='M0 12C0 9 2.7 7.7 6 7.7S12 9 12 12c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wa-contacto { flex: 1 1 auto; min-width: 0; display: grid; }
.pantalla--chat .chat-titulo {
  margin: 0; font-size: calc(16.5 * var(--ptm)); font-weight: 600; line-height: calc(20 * var(--ptm));
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-info { position: relative; height: calc(14 * var(--ptm)); font-size: calc(12 * var(--ptm)); line-height: calc(14 * var(--ptm)); color: var(--wa-tenue); white-space: nowrap; }
.wa-info span { position: absolute; left: 0; top: 0; transition: opacity 160ms; }
.wa-info .wa-escribiendo { opacity: 0; }
.wa-info.escribiendo .wa-escribiendo { opacity: 1; }
.wa-info.escribiendo .wa-en-linea { opacity: 0; }
.wa-llamadas {
  justify-content: space-between; width: calc(92 * var(--ptm));
  padding: 0 calc(12 * var(--ptm)) 0 calc(13 * var(--ptm));
}
.wa-video { width: calc(25 * var(--ptm)); height: calc(17 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'%3E%3Crect x='1' y='1' width='17' height='16' rx='4' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M18 7.2l6.1-3.6c.8-.5 1.9.1 1.9 1v8.8c0 .9-1.1 1.5-1.9 1L18 10.8' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wa-telefono { width: calc(20 * var(--ptm)); height: calc(20 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M5.3 1.5c.7 0 1.3.4 1.6 1.1l1.3 3.2c.3.7.1 1.5-.5 2L6.1 9.1c1.1 2.4 3.1 4.4 5.5 5.5l1.3-1.6c.5-.6 1.3-.8 2-.5l3.2 1.3c.7.3 1.1.9 1.1 1.6v2.5c0 1.2-1 2.2-2.2 2.1C9.2 19.4 1.6 11.8 1 3.7.9 2.5 1.9 1.5 3.1 1.5z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* --- el fondo: negro con sus dibujitos, fijo -------------------------------- */
.pantalla--chat .chat-cuerpo {
  gap: 0;
  padding: calc(6 * var(--pt)) calc(14 * var(--pt)) calc(10 * var(--pt));
  background: var(--wa-fondo) url("img/wa-fondo.svg") 0 0 / calc(390 * var(--ptm)) calc(390 * var(--ptm));
}

/* --- las burbujas: 17/22 como en iOS, con su hora abajo a la derecha --------- */
.pantalla--chat .msj {
  position: relative;
  max-width: 80%;
  margin-top: calc(4 * var(--pt));
  padding: calc(6 * var(--pt)) calc(11 * var(--pt)) calc(7 * var(--pt));
  border-radius: calc(17 * var(--pt));
  font-size: calc(17 * var(--pt)); line-height: calc(22 * var(--pt));
  color: var(--wa-texto);
  box-shadow: none; text-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pantalla--chat .chat-fila .msj { margin-top: calc(4 * var(--pt)); }
.pantalla--chat :is(.msj--negocio, .msj--restaurante, .msj--comensal) { background: var(--wa-sale); }
.pantalla--chat :is(.msj--cliente, .msj--mesero) { background: var(--wa-entra); }
/* La hora cae en el último renglón si cabe; si no, baja sola a la derecha. */
.pantalla--chat .msj-hora {
  float: right; position: relative; top: calc(5 * var(--pt));
  display: inline-flex; align-items: center; gap: calc(3 * var(--pt));
  margin: 0 0 0 calc(10 * var(--pt));
  font-size: calc(11.5 * var(--pt)); line-height: calc(22 * var(--pt));
  color: var(--wa-hora-entra); opacity: 1;
}
.pantalla--chat .msj--negocio .msj-hora { color: var(--wa-hora-sale); }
/* Las palomitas de lo que manda el negocio. */
.pantalla--chat .msj--negocio .msj-hora::after {
  content: ''; width: calc(15 * var(--pt)); height: calc(9 * var(--pt));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M1 5.1l2.7 2.8L9.5 1.1M6.9 7.2l.7.7 5.8-6.8' fill='none' stroke='%2353bdeb' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Al cambiar de lado, más aire entre una y otra. Sale: lo que manda el dueño del
   celular (el negocio, la comensal, el restaurante); entra: lo que le llega. */
.pantalla--chat .chat-fila:has(> :is(.msj--negocio, .msj--comensal, .msj--restaurante)) + .chat-fila:has(> :is(.msj--cliente, .msj--mesero)) > .msj,
.pantalla--chat .chat-fila:has(> :is(.msj--cliente, .msj--mesero)) + .chat-fila:has(> :is(.msj--negocio, .msj--comensal, .msj--restaurante)) > .msj { margin-top: calc(10 * var(--pt)); }
/* La colita, en la última de cada racha. */
.pantalla--chat .chat-fila:has(> :is(.msj--negocio, .msj--comensal, .msj--restaurante)):not(:has(+ .chat-fila > :is(.msj--negocio, .msj--comensal, .msj--restaurante))) > :is(.msj--negocio, .msj--comensal, .msj--restaurante) { border-bottom-right-radius: 0; }
.pantalla--chat .chat-fila:has(> :is(.msj--cliente, .msj--mesero)):not(:has(+ .chat-fila > :is(.msj--cliente, .msj--mesero))) > :is(.msj--cliente, .msj--mesero) { border-bottom-left-radius: 0; }
.pantalla--chat .chat-fila:has(> :is(.msj--negocio, .msj--comensal, .msj--restaurante)):not(:has(+ .chat-fila > :is(.msj--negocio, .msj--comensal, .msj--restaurante))) > :is(.msj--negocio, .msj--comensal, .msj--restaurante)::before,
.pantalla--chat .chat-fila:has(> :is(.msj--cliente, .msj--mesero)):not(:has(+ .chat-fila > :is(.msj--cliente, .msj--mesero))) > :is(.msj--cliente, .msj--mesero)::before {
  content: ''; position: absolute; bottom: 0;
  width: calc(7 * var(--pt)); height: calc(13 * var(--pt));
  background: inherit;
}
.pantalla--chat .chat-fila:has(> :is(.msj--negocio, .msj--comensal, .msj--restaurante)):not(:has(+ .chat-fila > :is(.msj--negocio, .msj--comensal, .msj--restaurante))) > :is(.msj--negocio, .msj--comensal, .msj--restaurante)::before {
  right: calc(-6 * var(--pt)); clip-path: polygon(0 0, 14% 0, 40% 45%, 100% 94%, 100% 100%, 0 100%);
}
.pantalla--chat .chat-fila:has(> :is(.msj--cliente, .msj--mesero)):not(:has(+ .chat-fila > :is(.msj--cliente, .msj--mesero))) > :is(.msj--cliente, .msj--mesero)::before {
  left: calc(-6 * var(--pt)); clip-path: polygon(86% 0, 100% 0, 100% 100%, 0 100%, 0 94%, 60% 45%);
}

/* --- el rollo: todas las filas, pegadas abajo; lo que no cabe queda arriba y se
   sube con el dedo (variante.js lo baja con translateY) ----------------------- */
.pantalla--chat .chat-cuerpo { justify-content: flex-end; overflow: hidden; }
.chat-rollo { flex: none; display: flex; flex-direction: column; }

/* --- el día: la píldora de WhatsApp («Hoy», «Ayer», «Jueves») ---------------- */
.pantalla--chat .chat-dia {
  margin: calc(10 * var(--pt)) 0 calc(4 * var(--pt));
  padding: calc(4 * var(--pt)) calc(11 * var(--pt));
  border-radius: calc(8 * var(--pt));
  background: var(--wa-dia); color: var(--wa-dia-texto);
  font-size: calc(12 * var(--pt)); font-weight: 600; line-height: calc(16 * var(--pt));
  box-shadow: none; letter-spacing: 0;
}

/* --- la foto que manda el cliente, arriba de su texto ------------------------ */
.pantalla--chat .msj--con-foto { width: 72%; padding: calc(3 * var(--pt)) calc(3 * var(--pt)) calc(7 * var(--pt)); }
.pantalla--chat .msj--con-foto > span:not(.msj-hora):not(.msj-foto) { display: block; padding: 0 calc(8 * var(--pt)); }
.pantalla--chat .msj--con-foto .msj-hora { margin-right: calc(8 * var(--pt)); }
.pantalla--chat .msj-foto { margin: 0 0 calc(5 * var(--pt)); border-radius: calc(14 * var(--pt)); }

/* --- «escribiendo…» va en el encabezado, como en WhatsApp: sin globo de puntos */
.pantalla--chat .chat-escribe, .pantalla--chat .msj--escribe { display: none !important; }

/* --- la barra de abajo: más, el campo con su sticker, cámara y micrófono ----- */
.wa-pie {
  flex: none;
  display: flex; align-items: center; gap: calc(12 * var(--ptm));
  padding: calc(7 * var(--ptm)) calc(14 * var(--ptm)) calc(12 * var(--ptm));
  background: var(--wa-pie); color: var(--wa-icono);
}
.wa-mas { width: calc(22 * var(--ptm)); height: calc(22 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 2v18M2 11h18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wa-campo {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end;
  height: calc(34 * var(--ptm)); padding: 0 calc(10 * var(--ptm));
  border-radius: calc(17 * var(--ptm)); background: var(--wa-campo);
}
.wa-sticker { width: calc(19 * var(--ptm)); height: calc(19 * var(--ptm)); color: #bfc1c1;
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 11.5V6.5c0-2.8-2.2-5-5-5h-7c-2.8 0-5 2.2-5 5v7c0 2.8 2.2 5 5 5h5z' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M11.5 18.5c0-3.9 3.1-7 7-7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.wa-camara { width: calc(23 * var(--ptm)); height: calc(19 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 5h4l2-3h6l2 3h4c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='11.5' r='4' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E"); }
.wa-micro { width: calc(15 * var(--ptm)); height: calc(22 * var(--ptm));
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 23'%3E%3Crect x='4.5' y='1' width='7' height='13' rx='3.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M1.5 10.5c0 3.6 2.9 6.5 6.5 6.5s6.5-2.9 6.5-6.5M8 17v5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }