/* =====================================================================
   PACOTE DE CONVERSA (WhatsApp tema claro, Android) — SISTEMA FECHADO
   Regra permanente do projeto: todos os tokens vivem AQUI, escopados em
   .chatscr e .lightbox. Nada deste arquivo lê tokens do site.
   Fonte da verdade das cores/métricas: RODADA 2, tabela A1.
   Sombras rgba são locais por design.
   ===================================================================== */
.chatscr,.lightbox{
  --wa-green:#008069;      /* header da conversa */
  --wa-teal:#00A884;       /* FAB, accent, radio, Enviar */
  --wa-bg:#EFE7DE; --wa-out:#D9FDD3; --wa-in:#FFFFFF;
  --wa-ink:#111B21;
  --wa-time:#667781;       /* timestamp 11px (valor oficial do app) */
  --wa-icon:#54656F;
  --wa-check:#53BDEB;      /* lidos */
  --wa-check-sent:#8696A0; /* enviados/entregues */
  --wa-link:#027EB5;       /* reply buttons / interativos (4.6:1 no branco) */
  --wa-div:#E9EDEF;        /* divisórias de botões / borda da pill */
  --wa-press:#F5F6F6;      /* pressed dos reply buttons */
  --wa-hover:#F0F2F5;      /* hover de itens de menu/emoji */
  --wa-sys-bg:#FFF3C2; --wa-sys-ink:#54655F;
  --wa-sys-ok-bg:#DEF6E7; --wa-sys-ok-ink:#0B6B4F;
  --wa-day-ink:#54656F;
  --wa-quote-ink:#667781;
  --wa-scrim:rgba(11,20,26,.45);
  --n-marina:#E542A3; --n-carol:#0089D1; --n-juliana:#7C4DFF; --n-fernanda:#DF7A00; --n-tamy:#00A884;
  --wa-font:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

.chatscr{
  position:relative;flex:1;display:flex;flex-direction:column;min-height:0;
  background:var(--wa-bg);color:var(--wa-ink);
  font-family:var(--wa-font);font-size:16px;line-height:1.4;
  text-align:left;letter-spacing:normal;text-transform:none; /* imune ao root e às seções do site */
}
.chatscr button:focus-visible{outline:2px solid var(--wa-teal);outline-offset:-2px;border-radius:6px}

/* ---------- header da conversa (A3: ~60px, avatar 40, nome 16/500) ---------- */
.chead{
  background:var(--wa-green);color:#fff;min-height:60px;padding:8px 10px;
  display:flex;align-items:center;gap:8px;flex:none;
  box-shadow:0 1px 3px rgba(11,20,26,.18);z-index:5;
}
.chead .back{color:#fff;font-size:1.35rem;min-width:34px;min-height:44px;display:grid;place-items:center;border-radius:50%;transition:background .15s ease}
.chead .back:active{background:rgba(255,255,255,.14)}
.pfp{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:#DFF3EC}
.pfp svg,.pfp img{width:100%;height:100%;display:block}
.chead .who{flex:1;min-width:0;cursor:pointer}
.chead .who b{display:block;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .who span{display:block;font-size:13px;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .acts{display:flex;gap:20px;color:#fff;align-items:center;padding-right:6px}
.chead .acts svg{display:block}

/* ---------- corpo com doodle ---------- */
.cbody{
  flex:1;overflow-y:auto;padding:10px 8px 12px;display:flex;flex-direction:column;
  background-color:var(--wa-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23A89E8F' stroke-opacity='.16' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M28 36c8-10 22-10 30 0'/%3E%3Ccircle cx='214' cy='46' r='11'/%3E%3Cpath d='M52 132h34M69 115v34'/%3E%3Cpath d='M150 120c12 8 12 22 0 30'/%3E%3Crect x='190' y='150' width='34' height='16' rx='8'/%3E%3Cpath d='M186 158h-14M238 158h14'/%3E%3Cpath d='M40 210c10-12 26 12 36 0'/%3E%3Cpath d='M120 216l10-16 10 16z'/%3E%3Ccircle cx='118' cy='60' r='4'/%3E%3Ccircle cx='250' cy='104' r='4'/%3E%3Ccircle cx='20' cy='170' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
}
.daychip{align-self:center;background:rgba(255,255,255,.92);color:var(--wa-day-ink);font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:8px;margin:8px 0 6px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.syschip{align-self:center;background:var(--wa-sys-bg);color:var(--wa-sys-ink);font-size:12.5px;text-align:center;padding:6px 12px;border-radius:8px;margin:6px 12px;box-shadow:0 1px .5px rgba(11,20,26,.13);max-width:86%}
.syschip.ok{background:var(--wa-sys-ok-bg);color:var(--wa-sys-ok-ink)} /* variação positiva (cena "Com a Tamy") */

/* modo cinema (cena da dor): sem composer; corpo respira até a base */
.chatscr.cine .cbody{padding-bottom:16px}
.chatscr.cine .scrolldown{bottom:16px}

/* ---------- bolhas (A2: r7.5, 14.2px/1.35, 2px mesmo remetente, ~10px troca) ---------- */
.row{display:flex;padding:1px 4px;position:relative;flex:none}
.row.first{margin-top:8px}
.row:first-child,.daychip+.row,.syschip+.row{margin-top:2px}
.row.out{justify-content:flex-end}
.b{
  max-width:75%;background:var(--wa-in);border-radius:7.5px;padding:6px 8px 7px;position:relative;
  box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:14.2px;line-height:1.35;white-space:pre-line;
  animation:bpop .22s ease;
}
@media(max-width:380px){ .b{max-width:85%} }
@keyframes bpop{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
.row.out .b{background:var(--wa-out)}
.row.first .b::before{content:"";position:absolute;top:0;width:11px;height:11px;background:inherit}
.row.first:not(.out) .b{border-top-left-radius:0}
.row.first:not(.out) .b::before{left:-9px;clip-path:path("M11 0 L0 0 Q6 1 8 6 Q9 9 11 11 Z")}
.row.first.out .b{border-top-right-radius:0}
.row.first.out .b::before{right:-9px;clip-path:path("M0 0 L11 0 Q5 1 3 6 Q2 9 0 11 Z")}
.meta{float:right;margin:8px -2px -4px 8px;display:flex;align-items:center;gap:3px;font-size:11px;color:var(--wa-time)}
.meta svg{display:block}
.b b{font-weight:700}
.b .name{display:block;font-size:12.8px;font-weight:700;margin-bottom:1px}
.b .quote{
  background:rgba(11,20,26,.05);border-left:4px solid var(--wa-teal);border-radius:6px;
  padding:5px 8px;margin:-1px 0 5px;font-size:12.8px;color:var(--wa-quote-ink);
}
.b .quote b{display:block;font-size:12.2px}
.b.media{padding:4px}
.b.media .cap{padding:4px 5px 2px;display:block}
.pic{border-radius:6px;overflow:hidden;display:block;width:min(240px,62vw);aspect-ratio:4/3;cursor:pointer;position:relative;
  background:linear-gradient(100deg,#DDE4DE 40%,#EDF1ED 50%,#DDE4DE 60%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-120% 0}}
.pic img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.pic img.ld{opacity:1}
.pic.ph-off img{display:none}
.pic.ph-off::after{content:"💪";position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;background:linear-gradient(135deg,#DCE7DF,#EDE5D3)}

/* ---------- reply buttons / list message (A5 — WhatsApp Business) ---------- */
.b.has-btns{width:75%}
@media(max-width:380px){ .b.has-btns{width:85%} }
.rbtns{margin:8px -8px -7px;border-top:1px solid var(--wa-div);display:flex;flex-direction:column}
.rbtns.solo{margin-top:-6px;border-top:none} /* bolha só de botões, sem corpo */
.rbtns button{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;
  padding:10px 12px;color:var(--wa-link);font-size:14px;font-weight:500;text-align:center;
  transition:background .12s ease;
}
.rbtns button+button{border-top:1px solid var(--wa-div)}
.rbtns button:active{background:var(--wa-press)}
.rbtns button:last-child{border-radius:0 0 7.5px 7.5px}
.rbtns button svg{flex:none}
.rbtns.used button{opacity:.45;pointer-events:none}
.rbtns button:disabled{cursor:default}

/* bottom sheet da list message */
.sheetback{position:absolute;inset:0;background:var(--wa-scrim);z-index:60;opacity:0;transition:opacity .2s ease}
.sheetback.on{opacity:1}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:61;background:var(--wa-in);
  border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .2s ease;
  max-height:80%;display:flex;flex-direction:column;box-shadow:0 -4px 30px rgba(11,20,26,.25);
}
.sheet.on{transform:none}
.sheet .sh-head{display:flex;align-items:center;gap:8px;padding:12px 8px 6px 18px;flex:none}
.sheet .sh-head b{flex:1;font-size:15.5px;font-weight:600;color:var(--wa-ink)}
.sheet .sh-x{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--wa-icon);font-size:1.15rem;border-radius:50%;transition:background .15s ease}
.sheet .sh-x:hover{background:var(--wa-hover)}
.sheet .sh-list{overflow-y:auto;padding:2px 0 6px}
.sh-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:48px;padding:10px 18px;font-size:14.5px;color:var(--wa-ink);text-align:left;
  transition:background .12s ease;
}
.sh-item:hover{background:var(--wa-hover)}
.sh-item:active{background:var(--wa-press)}
.sh-radio{flex:none;width:20px;height:20px;border:2px solid var(--wa-check-sent);border-radius:50%;display:grid;place-items:center;transition:border-color .15s ease}
.sh-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--wa-teal);transform:scale(0);transition:transform .15s ease}
.sh-item.sel .sh-radio{border-color:var(--wa-teal)}
.sh-item.sel .sh-radio::after{transform:scale(1)}
.sh-send{
  margin:8px 16px calc(14px + env(safe-area-inset-bottom,0px));flex:none;
  background:var(--wa-teal);color:#fff;border-radius:24px;min-height:46px;
  font-size:15px;font-weight:600;transition:filter .15s ease, transform .15s ease, opacity .15s ease;
}
.sh-send:hover{filter:brightness(1.05)}
.sh-send:active{transform:scale(.98)}
.sh-send:disabled{opacity:.4;filter:none;transform:none;cursor:default}

/* ---------- reações ---------- */
.reacts-pill{
  position:absolute;bottom:-11px;left:10px;background:var(--wa-in);border:1px solid var(--wa-div);border-radius:999px;
  padding:1.5px 7px;font-size:13px;box-shadow:0 1px 2px rgba(11,20,26,.12);display:flex;gap:2px;align-items:center;
}
.reacts-pill.bump{animation:bump .3s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.row.out .reacts-pill{left:auto;right:10px}
.row.has-reacts{margin-bottom:12px}
.reactbtn{
  position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(11,20,26,.18);display:grid;place-items:center;color:var(--wa-icon);
  opacity:0;transition:opacity .2s ease;font-size:.9rem;
}
.row:hover .reactbtn,.row:focus-within .reactbtn{opacity:1}
.row:not(.out) .reactbtn{right:-34px}
.row.out .reactbtn{left:-34px}
@media(hover:none){ .reactbtn{display:none} } /* no toque: tap abre picker, duplo-tap = ❤️ */
.rpicker{
  position:absolute;z-index:40;background:var(--wa-in);border-radius:999px;box-shadow:0 8px 30px rgba(11,20,26,.25);
  padding:7px 11px;display:flex;gap:9px;font-size:1.25rem;animation:bpop .18s ease;
}
.rpicker button{transition:transform .12s ease;min-width:32px;min-height:32px}
.rpicker button:hover{transform:scale(1.3)}

/* ---------- áudio (A7: progresso, pause, badge 1×) ---------- */
.audio{display:flex;align-items:center;gap:8px;min-width:min(196px,58vw);padding:3px 2px}
.audio .pf{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;position:relative}
.audio .pf .mic{position:absolute;right:-2px;bottom:-2px;color:var(--wa-teal);background:inherit;border-radius:50%;display:grid;place-items:center;width:15px;height:15px}
.audio .pf .spd{width:100%;height:100%;display:grid;place-items:center;background:#DFE5E7;color:var(--wa-icon);font-weight:700;font-size:12.5px;border-radius:50%}
.audio .play{color:var(--wa-icon);flex:none;min-width:34px;min-height:44px;display:grid;place-items:center}
.wavecol{flex:1;display:flex;flex-direction:column;gap:2px;min-width:80px}
.wave{display:flex;align-items:center;gap:2px;height:22px;position:relative}
.wave i{width:2.6px;background:#B4C0BE;border-radius:2px;height:26%}
.wave i:nth-child(2n){height:62%}.wave i:nth-child(3n){height:44%}.wave i:nth-child(5n){height:86%}.wave i:nth-child(7n){height:54%}
.adot{position:absolute;left:0;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;background:var(--wa-teal);box-shadow:0 1px 2px rgba(11,20,26,.3);transition:left 0s linear}
.audio .dur{font-size:11px;color:var(--wa-time)}

/* ---------- seta "descer" (A9) ---------- */
.scrolldown{
  position:absolute;right:10px;bottom:78px;z-index:20;width:44px;height:44px;border-radius:50%;
  background:var(--wa-in);color:var(--wa-icon);box-shadow:0 1px 4px rgba(11,20,26,.3);
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.scrolldown.on{opacity:1;pointer-events:auto;transform:none}
.scrolldown:active{transform:scale(.92)}

/* ---------- composer (A4) ---------- */
.chips{display:none} /* container legado — mantido pelos IDs do contrato */
.cfoot{display:flex;align-items:flex-end;gap:6px;padding:6px 12px calc(12px + env(safe-area-inset-bottom,0px)) 8px;flex:none}
.inputwrap{
  flex:1;background:var(--wa-in);border-radius:24px;display:flex;align-items:center;padding:1px 4px;
  box-shadow:0 1px .5px rgba(11,20,26,.13);min-height:46px;transition:box-shadow .18s ease;
}
.inputwrap:focus-within{box-shadow:0 1px .5px rgba(11,20,26,.13), 0 0 0 2px rgba(0,168,132,.25)}
.inputwrap .ic{color:var(--wa-icon);width:40px;min-height:44px;display:grid;place-items:center;flex:none;border-radius:50%;transition:transform .12s ease, background .15s ease}
.inputwrap .ic:active{transform:scale(.88);background:var(--wa-hover)}
.inputwrap.t .cambtn{display:none} /* câmera some quando há texto (o clipe fica) */
.inputwrap input{flex:1;border:none;font:inherit;font-size:15px;min-width:0;background:transparent;color:var(--wa-ink);padding:0 4px}
.inputwrap input::placeholder{color:var(--wa-icon)}
.inputwrap input:focus{outline:none}
.fab{
  width:46px;height:46px;border-radius:50%;background:var(--wa-teal);color:#fff;flex:none;position:relative;
  box-shadow:0 1px 3px rgba(11,20,26,.4);transition:transform .15s ease, filter .15s ease;
}
.fab:hover{filter:brightness(1.06)}
.fab:active{transform:scale(.92)}
.fab:disabled{opacity:.5;filter:none;transform:none;cursor:default}
.fab svg{position:absolute;inset:0;margin:auto;transition:opacity .12s ease, transform .12s ease}
.fab .fmic{opacity:1;transform:scale(1)}
.fab .fsend{opacity:0;transform:scale(.6)}
.fab.t .fmic{opacity:0;transform:scale(.6)}
.fab.t .fsend{opacity:1;transform:scale(1)}
.fab.deny{animation:deny .25s ease}
@keyframes deny{0%,100%{transform:none}50%{transform:scale(.94)}}

/* ---------- pops (emoji / anexo) ---------- */
.emoji-pop{
  position:absolute;bottom:64px;left:10px;right:10px;background:var(--wa-in);border-radius:16px;box-shadow:0 12px 40px rgba(11,20,26,.28);
  padding:10px;display:none;grid-template-columns:repeat(8,1fr);gap:2px;font-size:1.3rem;z-index:30;
}
.emoji-pop.on{display:grid}
.emoji-pop button{min-height:44px;border-radius:8px}
.emoji-pop button:hover{background:var(--wa-hover)}
.attach-pop{
  position:absolute;bottom:64px;right:58px;background:var(--wa-in);border-radius:14px;box-shadow:0 12px 40px rgba(11,20,26,.28);
  padding:8px;display:none;flex-direction:column;gap:2px;z-index:30;min-width:170px;
}
.attach-pop.on{display:flex}
.attach-pop button{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:.9rem;font-weight:600;color:#3B4A54;min-height:44px;transition:background .12s ease}
.attach-pop button:hover{background:var(--wa-hover)}
.attach-pop button:active{background:var(--wa-press)}
.attach-pop button:disabled{opacity:.5}
.attach-pop .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1rem}

/* ---------- selo humano (narração da demo) ---------- */
.human{
  align-self:center;display:flex;align-items:center;gap:7px;margin:9px 0 4px;
  background:#F0FFF8;border:1.5px dashed #9AD7BE;color:#0B6B4F;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:6px 13px;border-radius:999px;
}

/* ---------- dados do grupo (drawer) ---------- */
.ginfo{
  position:absolute;inset:0;background:#F7F5F3;z-index:50;transform:translateX(100%);transition:transform .35s ease;
  display:flex;flex-direction:column;overflow-y:auto;
}
.ginfo.on{transform:none}
.ginfo .gh{background:var(--wa-green);color:#fff;padding:8px 14px;min-height:60px;display:flex;align-items:center;gap:12px}
.ginfo .gh .back{min-width:44px;min-height:44px;display:grid;place-items:center;color:#fff;font-size:1.35rem;border-radius:50%}
.ginfo .gh .back:active{background:rgba(255,255,255,.14)}
.ginfo .hero{background:var(--wa-in);padding:22px;text-align:center}
.ginfo .hero .pfp{width:96px;height:96px;margin:0 auto 10px}
.ginfo .hero b{font-size:1.15rem}
.ginfo .hero span{display:block;color:var(--wa-time);font-size:.85rem;margin-top:2px}
.ginfo .desc{background:var(--wa-in);margin-top:10px;padding:14px 18px;font-size:.92rem;color:#3B4A54}
.ginfo .desc small{display:block;color:var(--wa-time);margin-top:6px}
.ginfo .plist{background:var(--wa-in);margin-top:10px;padding:8px 0 16px}
.ginfo .plist h5{padding:10px 18px 6px;color:var(--wa-green);font-size:.82rem}
.prow{display:flex;align-items:center;gap:12px;padding:8px 18px}
.prow .pfp{width:40px;height:40px}
.prow b{font-size:.93rem;display:block}
.prow span{font-size:.78rem;color:var(--wa-time)}
.prow .tag{margin-left:auto;font-size:.68rem;font-weight:800;color:var(--wa-green);background:#E8F7F1;border-radius:6px;padding:2px 7px}

/* ---------- lightbox de foto ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:300;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:20px;
  font-family:var(--wa-font);
}
.lightbox.on{display:flex}
.lightbox .pic{width:min(560px,92vw);cursor:default;border-radius:12px}
.lightbox .cap{color:#CFD8DC;font-size:.9rem}
.lightbox .x{position:absolute;top:18px;right:20px;color:#fff;font-size:1.6rem;padding:10px;min-width:44px;min-height:44px;border-radius:50%;transition:background .15s ease}
.lightbox .x:hover{background:rgba(255,255,255,.12)}