.cwa-screen {
    /* paleta WhatsApp iOS 2026 claro (muestreada del screenshot real) */
    --cwa-bg: #F4F1EB;            /* fondo del wallpaper */
    --cwa-flat: #F3EFE9;          /* crema liso del tope (fade del wallpaper) */
    --cwa-pill: #FEFAF3;          /* píldoras flotantes del header */
    --cwa-bar: #F3F0EB;           /* zona de input + home */
    --cwa-ink: #0A0A0A;           /* texto/iconos principales */
    --cwa-meta: #667781;          /* hora + ticks dentro de burbujas */
    --cwa-out: #D9FDD3;           /* burbuja enviada */
    --cwa-in: #FFFFFF;            /* burbuja recibida */
    --cwa-crypto: #FCF0D7;        /* chip de cifrado */
    --cwa-tick-read: #53BDEB;
    --cwa-font: var(--font);

    position: absolute; inset: 0;
    background: var(--cwa-bg);
    font-family: var(--cwa-font);
    display: flex; flex-direction: column;
    overflow: hidden;
    letter-spacing: -0.012em;
  }

  /* ---- wallpaper real ---- */
  /* Arriba (status bar + header) el wallpaper NO se ve: la app lo funde a un
     crema liso (#F3EFE9, medido del screenshot) que se disuelve ~130px bajo
     el header. El ::after reproduce ese degradado. */
  .cwa-wallpaper {
    position: absolute; inset: 0; z-index: 0;
    background: var(--cwa-flat);
  }
  .cwa-wallpaper::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      var(--cwa-flat) 0, var(--cwa-flat) 165px, rgba(243, 239, 233, 0) 290px);
  }

  /* ---- header flotante ---- */
  .cwa-header {
    flex: 0 0 auto;
    display: flex; align-items: center;
    padding: 34px 62px 24px 64px;
    position: relative; z-index: 6;
  }
  .cwa-back-pill {
    flex: 0 0 auto;
    height: 120px; min-width: 120px;
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 0 15px 0 11px;
    background: var(--cwa-pill);
    border-radius: 60px;
    box-shadow: 0 2px 10px rgba(11, 20, 26, 0.05);
  }
  .cwa-back-pill.no-badge { padding: 0; }
  .cwa-back { width: 32px; height: 56px; flex: 0 0 auto; }
  .cwa-back-count { font-size: 50px; font-weight: 350; color: #1A1A1A; }
  .cwa-back-pill.no-badge .cwa-back-count { display: none; }

  .cwa-avatar {
    width: 124px; height: 124px; border-radius: 50%;
    margin: 0 20px 0 33px; flex: 0 0 auto;
    overflow: hidden; position: relative;
  }
  .cwa-avatar-person, .cwa-avatar-business { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cwa-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
  .cwa-avatar-business { display: none; }
  .cwa-screen.business .cwa-avatar-business { display: block; }
  .cwa-screen.business .cwa-avatar-person { display: none; }
  .cwa-avatar-text {
    position: absolute; inset: 0; z-index: 2;
    display: none; align-items: center; justify-content: center;
    font-size: 64px; color: #fff; font-weight: 500;
  }
  .cwa-avatar.has-text .cwa-avatar-text { display: flex; }
  .cwa-avatar.has-text .cwa-avatar-person,
  .cwa-avatar.has-text .cwa-avatar-business { display: none; }
  .cwa-avatar.has-img .cwa-avatar-img { display: block; }
  .cwa-avatar.has-img .cwa-avatar-person,
  .cwa-avatar.has-img .cwa-avatar-business,
  .cwa-avatar.has-img .cwa-avatar-text { display: none; }

  .cwa-title { flex: 1 1 auto; min-width: 0; }
  .cwa-name {
    font-size: 50px; font-weight: 500; color: var(--cwa-ink);
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cwa-sub { position: relative; height: 44px; font-size: 36px; font-weight: 350; color: #121212; line-height: 44px; }
  .cwa-sub-online, .cwa-sub-typing { position: absolute; left: 0; top: 0; white-space: nowrap; }
  .cwa-sub-typing { opacity: 0; visibility: hidden; }

  .cwa-actions-pill {
    flex: 0 0 auto;
    height: 120px;
    display: flex; align-items: center;
    gap: 12px; padding: 0 22px 0 43px;
    margin-left: 24px;
    background: var(--cwa-pill);
    border-radius: 60px;
    box-shadow: 0 2px 10px rgba(11, 20, 26, 0.05);
  }
  .cwa-ic-store { width: 69px; height: 61px; margin-right: 78px; }
  .cwa-ic-video { width: 76px; height: 61px; display: none; }
  .cwa-ic-phone { width: 67px; height: 67px; }
  .cwa-ic-chevron { width: 24px; height: 14px; display: none; }
  .cwa-screen.business .cwa-ic-chevron { display: block; }
  .cwa-screen:not(.business) .cwa-ic-store { display: none; }
  .cwa-screen:not(.business) .cwa-ic-video { display: block; margin-right: 44px; }

  /* ---- hilo (transparente sobre el wallpaper) ---- */
  .cwa-thread {
    flex: 1 1 auto; position: relative; overflow: hidden;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
  }
  .cwa-scroll {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 30px 40px 34px;
    will-change: transform;
  }

  .cwa-chip {
    width: max-content; max-width: 86%;
    margin: 0 auto 24px;
    background: #FDFDFD;
    color: var(--cwa-ink);
    font-size: 40px; line-height: 1.4;
    padding: 15px 34px;
    border-radius: 32px;
    box-shadow: 0 1px 3px rgba(11, 20, 26, 0.06);
    text-align: center;
  }
  .cwa-chip-date { font-weight: 580; }
  .cwa-chip-crypto {
    background: var(--cwa-crypto);
    max-width: 76%;
    padding: 24px 42px;
    border-radius: 37px;
    margin-bottom: 12px;
    box-shadow: none;
  }
  .cwa-chip-crypto svg { vertical-align: -5px; margin-right: 10px; }
  .cwa-chip-crypto b { font-weight: 700; }

  /* ---- filas y burbujas ---- */
  .cwa-row { display: flex; }
  .cwa-row.out { justify-content: flex-end; }
  .cwa-bubble {
    position: relative;
    max-width: 72%;
    background: var(--cwa-in);
    color: #111B21;
    font-size: 50px; line-height: 1.28;
    padding: 17px 27px 20px 32px;
    border-radius: 30px;
    box-shadow: 0 1px 2px rgba(11, 20, 26, 0.10);
    word-wrap: break-word;
  }
  .cwa-row.out .cwa-bubble { background: var(--cwa-out); padding: 17px 32px 20px 29px; }
  .cwa-row.first.in  .cwa-bubble { border-top-left-radius: 8px; }
  .cwa-row.first.out .cwa-bubble { border-top-right-radius: 8px; }

  .cwa-tail {
    position: absolute; top: 0; width: 29px; height: 44px;
  }
  .cwa-row.in  .cwa-tail { left: -27px; }
  .cwa-row.out .cwa-tail { right: -27px; transform: scaleX(-1); }

  .cwa-meta {
    float: right;
    margin: 32px -10px -12px 22px;
    display: flex; align-items: center; gap: 10px;
    font-size: 32px; color: var(--cwa-meta);
    line-height: 1;
    position: relative; top: 7px;
  }
  .cwa-ticks { position: relative; width: 51px; height: 34px; }
  .cwa-ticks svg { position: absolute; inset: 0; width: 51px; height: 34px; }
  .cwa-ticks .read { opacity: 0; }

  /* ---- extensiones: links, emoji Apple, burbuja de imagen ---- */
  .cwa-link { color: #027EB5; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .cwa-emoji { width: 52px; height: 52px; vertical-align: -11px; margin: 0 2px; display: inline-block; }

  .cwa-bubble-img { padding: 8px !important; }
  .cwa-imgwrap { position: relative; display: block; border-radius: 22px; overflow: hidden; font-size: 0; }
  .cwa-imgwrap img { display: block; }
  .cwa-imgwrap::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
  }
  .cwa-meta-img {
    position: absolute; right: 22px; bottom: 16px; z-index: 2;
    float: none; margin: 0; top: 0;
    color: rgba(255,255,255,0.96); font-size: 30px;
  }

  /* ---- barra de input ---- */
  .cwa-inputbar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 37px;
    padding: 24px 42px 130px;
    background: var(--cwa-bar);
    position: relative; z-index: 6;
  }
  .cwa-ib-icon { width: 68px; height: 61px; flex: 0 0 auto; }
  .cwa-ib-plus { width: 61px; height: 61px; }
  .cwa-ib-mic { width: 49px; height: 68px; }
  .cwa-input {
    flex: 1 1 auto; height: 90px;
    background: #FFFFFF;
    border-radius: 45px;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 25px;
    box-shadow: 0 1px 3px rgba(11, 20, 26, 0.04);
  }
  .cwa-ib-sticker { width: 56px; height: 56px; }




/* --- Embebido en la web ---
   El template nació para un lienzo de teléfono de 1320x2714 @3x con
   position:absolute;inset:0. Su propia documentación indica embeberlo
   escalando el contenedor (K = anchoDestino/1320), NO redimensionando
   sus piezas: así conserva proporciones exactas. */
.cwa-embed{position:relative;width:100%;max-width:480px;margin:48px auto 0;text-align:left}
.cwa-marco{position:relative;width:100%;aspect-ratio:1320/1760;border-radius:30px;overflow:hidden;border:1px solid var(--line);box-shadow:0 26px 60px #10151c22;background:var(--cwa-flat,#F3EFE9)}
.cwa-stage{position:absolute;top:0;left:0;width:1320px;height:1760px;transform-origin:top left;transform:scale(var(--cwa-k,0.303))}
.cwa-responder{margin-top:12px;padding:13px 14px 14px;background:#fff;border:1px solid var(--line);border-radius:18px}
.cwa-responder-guia{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#667781;margin-bottom:10px}
.cwa-chips{display:flex;flex-wrap:wrap;gap:7px}
.cwa-chips button{font-family:var(--font);font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:999px;border:1px solid var(--sky);background:#fff;color:var(--ink);transition:background-color .14s,transform .12s}
.cwa-chips button:hover{background:var(--sky)}
.cwa-chips button:active{transform:scale(.97)}
.cwa-fin{display:block;text-align:center;font-size:13px;color:#667781;padding:6px 0}

/* El template oculta las tres variantes de avatar y su JS revela la que toca.
   Aquí siempre hay foto de contacto, así que se revela la variante de imagen. */
.cwa-embed .cwa-avatar-img{display:block;object-fit:contain;background:#fff;padding:6px}
.cwa-embed .cwa-avatar-person,.cwa-embed .cwa-avatar-business{display:none}

/* Tarjeta de adjunto dentro de la burbuja, al estilo del template. */
.cwa-doc{display:flex;align-items:center;gap:22px;margin:20px 0 6px;background:#ffffffcc;border-radius:20px;padding:24px 26px}
.cwa-doc .icon{width:60px;height:60px;color:#FB811E;flex:none;stroke-width:1.6}
.cwa-doc strong{display:block;font-size:40px;font-weight:600;line-height:1.25}
.cwa-doc em{display:block;font-style:normal;font-size:34px;color:#667781;margin-top:4px}

/* El template oculta las piezas de cuenta de empresa y su JS las revela
   según cfg.contact.business. Aquí el contacto SIEMPRE es cuenta de empresa. */
.cwa-embed .cwa-back-count{display:inline}

.cwa-embed .cwa-chip-crypto{display:block}

/* Fondo: trama propia en la familia tonal del canal. No se usa la ilustración
   de fondo de la aplicación, que es material de un tercero. */

/* ══════════════════════════════════════════════════════════════════
   ÚNICA DIFERENCIA CON EL TEMPLATE APROBADO
   El template original trae aquí la ilustración de fondo de WhatsApp,
   incrustada en base64 desde una captura (107 KB). Es obra de Meta y no
   se republica en el sitio comercial de Vela, así que aquí va una trama
   propia con los motivos de la marca (la V del isotipo y el punto).

   Para usar el fondo original: reemplazar el `background` de la regla
   .cwa-embed .cwa-wallpaper de abajo por el del archivo
   ~/clawd/projects/uis-visas/whatsapp-conversations/web/camila-es.html
   (regla .cwa-wallpaper). Es un solo renglón.
   ══════════════════════════════════════════════════════════════════ */


.cwa-embed .cwa-wallpaper{background:var(--cwa-flat,#F3EFE9)}
.cwa-embed .cwa-wallpaper:before{content:"";position:absolute;inset:0;background:url("/assets/chat-wallpaper.webp") center/cover no-repeat;opacity:0.21}