/* 4Legis — fragmento de interface: o aparelho com a conversa do WhatsApp.
   Paleta e fonte do próprio WhatsApp, restritas a .celular; o resto da página
   segue landing.css. */
/* O aparelho: desenhado em código, sem print. */
.celular { width: min(336px, calc(100vw - 2 * var(--calha)), calc((100svh - 64px - 96px) * 336 / 720)); min-width: 280px; aspect-ratio: 336 / 720; padding: 11px; border-radius: 50px; background: #0A1622; box-shadow: inset 0 0 0 1.5px #2A4766; }
.celular-tela { position: relative; height: 100%; border-radius: 40px; overflow: hidden; display: flex; flex-direction: column; background: #EFEAE2; color: #111B21; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.celular-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px 30px; font-size: 14px; font-weight: 600; background: #F6F6F6; }
.celular-status-icones { display: flex; gap: 6px; align-items: center; fill: currentColor; }
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; background: #F6F6F6; border-bottom: 1px solid #E2E2E2; }
.chat-voltar { color: #0A84FF; flex: none; }
.chat-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.chat-quem { min-width: 0; }
.chat-nome { font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-estado { font-size: 12.5px; color: #5B6A73; line-height: 1.3; }
.chat { list-style: none; margin: 0; padding: 8px 10px 8px; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
.chat-dia { align-self: center; margin-bottom: 4px; }
.chat-dia span { display: inline-block; padding: 4px 10px; border-radius: 8px; background: #FFFFFF; font-size: 12px; color: #54656F; }
.msg { position: relative; max-width: 86%; padding: 6px 8px 18px; border-radius: 10px; font-size: 13.5px; line-height: 1.38; overflow-wrap: anywhere; }
.msg-saida { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 3px; }
.msg-entrada { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 3px; }
.msg-meta { position: absolute; right: 8px; bottom: 4px; display: flex; gap: 3px; align-items: center; font-size: 11px; color: #667781; }
.msg-checks { color: #53BDEB; }
.msg-audio { display: flex; align-items: center; gap: 8px; padding: 4px 2px 2px; min-width: 220px; }
.audio-avatar { position: relative; flex: none; width: 40px; height: 40px; }
.audio-avatar svg:first-child { display: block; border-radius: 50%; }
.audio-mic { position: absolute; right: -3px; bottom: -2px; fill: #2CB742; color: #2CB742; background: #D9FDD3; border-radius: 50%; }
.audio-velocidade { flex: none; padding: 1px 6px; border-radius: 10px; background: rgba(17, 27, 33, .08); font-size: 11px; font-weight: 600; color: #54656F; }
.audio-play { fill: #54656F; flex: none; }
.audio-onda { display: flex; align-items: center; gap: 2px; height: 24px; overflow: hidden; flex: 1; min-width: 0; }
.audio-onda i { display: block; width: 3px; border-radius: 2px; background: #8DA98A; }
.msg-transcricao { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(17, 27, 33, .08); font-size: 13px; color: #111B21; }
.msg-transcricao span { display: block; font-size: 11.5px; font-weight: 600; color: #54656F; margin-bottom: 2px; }
.msg-arquivo { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 10px; border-radius: 8px; background: #F5F6F6; color: inherit; text-decoration: none; }
.arquivo-icone { flex: none; }
.arquivo-texto { min-width: 0; display: grid; }
.arquivo-nome { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arquivo-info { font-size: 12px; color: #5B6A73; }
.msg-legenda { font-size: 12.5px; line-height: 1.36; }
.msg-legenda em { color: #54656F; }
.msg-digitando { display: none; padding: 10px 14px; }
.digitando { display: flex; gap: 4px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: digitando 1.2s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitando { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-compor { display: flex; align-items: center; gap: 10px; padding: 8px 12px 22px; background: #F6F6F6; color: #54656F; }
.chat-mais { flex: none; color: #0A84FF; }
.chat-campo { flex: 1; padding: 7px 12px; border-radius: 18px; background: #FFFFFF; border: 1px solid #E2E2E2; font-size: 13.5px; color: #66757F; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Estados da animação: sem JS, a conversa aparece completa. */
.cena.is-pending [data-passo] { display: none; }
.cena.is-pending [data-passo].is-shown { display: block; animation: chega .28s var(--tracado); }
.cena.is-pending .msg-checks { color: #8696A0; }
.cena.is-pending .msg-checks.is-read { color: #53BDEB; }
@keyframes chega { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }


/* Entre 1200 e 1439 px o aparelho encolhe para o relógio caber ao lado. */
@media (min-width: 1200px) and (max-width: 1439px) { .celular { width: 300px; } }
/* Telas estreitas: o aparelho fica um pouco mais alto para a conversa caber. */
@media (max-width: 359px) { .celular { aspect-ratio: 336 / 780; } }
@media (max-width: 959px) { .celular { width: min(336px, calc(100vw - 2 * var(--calha)), calc(72svh * 336 / 720)); } }