:root{
  --wa-header:#008069; --wa-out:#d9fdd3; --wa-in:#ffffff; --wa-bg:#efeae2;
  --wa-tick:#53bdeb; --ink:#111b21; --muted:#667781;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased}
html,body{height:100%; overflow:hidden}
body{font-family:'Segoe UI',Helvetica,Arial,sans-serif; color:var(--ink); background:var(--wa-bg)}
.app{display:flex; flex-direction:column; height:100dvh; width:100vw}

.top{background:var(--wa-header); color:#fff; display:flex; align-items:center; gap:12px;
  padding:10px 14px; flex:0 0 auto; padding-top:calc(10px + env(safe-area-inset-top))}
.avatar{width:40px; height:40px; border-radius:50%; background:#fff center/cover no-repeat; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:17px; flex:0 0 auto; color:#0b6b58;
  overflow:hidden; border:1px solid rgba(255,255,255,.5)}
.who{flex:1; min-width:0}
.who .name{font-size:19px; font-weight:600; line-height:1.15}
.who .status{font-size:14px; color:#c9efe6; height:16px}
.top .icon{cursor:pointer; opacity:.92; padding:6px; border-radius:6px}
.top .icon:hover{background:rgba(255,255,255,.12)}
.top .icon svg{display:block}

.chat{flex:1 1 auto; overflow-y:auto; padding:14px 7% 14px; -webkit-overflow-scrolling:touch;
  background-image:linear-gradient(rgba(239,234,226,.94),rgba(239,234,226,.94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d9d2c7' stroke-width='.5'/%3E%3C/svg%3E");}
@media(max-width:600px){ .chat{padding:14px 12px 14px} }
.day{display:flex; justify-content:center; margin:6px 0 14px}
.day span{background:#e3f0ed; color:#54656f; font-size:13px; padding:5px 12px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.row{display:flex; margin-bottom:8px}
.row.in{justify-content:flex-start}
.row.out{justify-content:flex-end}
.bubble{max-width:min(78%,560px); padding:7px 9px 5px; border-radius:9px; font-size:19px; line-height:1.42;
  position:relative; box-shadow:0 1px .5px rgba(0,0,0,.13); word-wrap:break-word; white-space:pre-wrap}
.row.in .bubble{background:var(--wa-in); border-top-left-radius:2px}
.row.out .bubble{background:var(--wa-out); border-top-right-radius:2px}
.bubble .t{font-size:12px; color:var(--muted); float:right; margin:6px 0 -2px 10px}
.row.out .bubble .t::after{content:" \2713\2713"; color:var(--wa-tick)}
.typing{display:inline-flex; gap:4px; padding:11px 12px}
.typing i{width:7px; height:7px; border-radius:50%; background:#9aa6ab; animation:blink 1.2s infinite both}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

/* opcoes clicaveis (quick reply) */
.opts{display:flex; flex-direction:column; gap:8px; align-items:flex-end; margin:2px 0 8px; animation:pop .25s ease}
@keyframes pop{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.opt-btn{background:#fff; color:var(--wa-header); border:1px solid #cbd8d4; border-radius:22px; padding:11px 18px;
  font-size:17px; font-weight:600; cursor:pointer; max-width:min(86%,460px); text-align:left;
  box-shadow:0 1px 2px rgba(0,0,0,.1); transition:.12s}
.opt-btn:hover{background:#e7f7f2; border-color:var(--wa-header)}
.opt-btn:disabled{opacity:.5; cursor:default}

/* multipla escolha (teses): checkboxes empilhados + botao confirmar */
.multi{display:flex; flex-direction:column; gap:7px; align-items:flex-end; margin:2px 0 8px; animation:pop .25s ease}
.multi .chk{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #cbd8d4; border-radius:16px;
  padding:10px 14px; font-size:16px; cursor:pointer; max-width:min(90%,470px); box-shadow:0 1px 2px rgba(0,0,0,.08); transition:.12s}
.multi .chk:hover{background:#f1f8f5}
.multi .chk.on{background:#e7f7f2; border-color:var(--wa-header); color:#0b6b58; font-weight:600}
.multi .chk input{width:18px; height:18px; accent-color:var(--wa-header); flex:0 0 auto}
.multi .confirm{background:var(--wa-header); color:#fff; border:none; border-radius:22px; padding:12px 22px;
  font-size:17px; font-weight:600; cursor:pointer; margin-top:4px; box-shadow:0 2px 8px rgba(0,128,105,.3); transition:.12s}
.multi .confirm:hover{background:#0b6b58}
.multi .confirm:disabled{opacity:.45; cursor:default; box-shadow:none}

/* botao falar/enviar whatsapp */
.cta-row{display:flex; justify-content:center; margin:10px 0 16px; animation:pop .25s ease}
.cta-btn{background:#25D366; color:#fff; text-decoration:none; border-radius:24px; padding:13px 24px;
  font-size:17px; font-weight:600; display:inline-flex; gap:9px; align-items:center;
  box-shadow:0 3px 12px rgba(37,211,102,.42); transition:.15s}
.cta-btn:hover,.cta-btn:active{background:#1ebe5b}
.cta-btn svg{display:block; flex:0 0 auto}

.err{background:#fdecea; color:#b71c1c; font-size:14px; text-align:center; padding:8px 12px}

/* barra de input (campos de texto) */
.inputbar{flex:0 0 auto; display:none; gap:8px; align-items:center; padding:8px 10px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom)); background:#f0f2f5; border-top:1px solid #e1e4e6}
.inputbar.on{display:flex}
.inputbar input{flex:1; border:none; border-radius:22px; padding:11px 16px; font-size:17px; outline:none;
  background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.inputbar .send{width:46px; height:46px; border-radius:50%; border:none; background:var(--wa-header);
  color:#fff; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.inputbar .send:disabled{opacity:.5; cursor:default}