/* casca de celular (comum a chat e celular) */
.fone-pal{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.fone{width:430px;height:720px;background:#1C2530;border:12px solid #1C2530;border-radius:46px;position:relative;box-shadow:0 24px 60px rgba(20,32,42,.16),inset 0 0 0 1px #2B3744;box-sizing:border-box;flex-shrink:0}
.fone .fn-tela{position:absolute;inset:0;border-radius:34px;overflow:hidden;background:#fff;font-family:Inter,system-ui,sans-serif}
.fone-chao{position:absolute;left:50%;bottom:-34px;width:360px;height:34px;margin-left:-180px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,32,42,.22),rgba(20,32,42,0));opacity:0;pointer-events:none}
.fn-sb{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 28px;font-size:18px;font-weight:600;color:#fff;z-index:3;box-sizing:border-box}
.fn-sb .sb-ilha{position:absolute;left:50%;top:7px;width:96px;height:24px;margin-left:-48px;border-radius:12px;background:#0D1319}
.fn-sb .sb-i{display:flex;align-items:center;gap:6px}
.fn-sb .sb-i em{font-style:normal;font-size:18px;font-weight:600}
.fn-sb svg{display:block}
.fn-sb .sb-s{width:20px;height:14px}.fn-sb .sb-w{width:20px;height:14px}.fn-sb .sb-b{width:30px;height:14px}
.fn-dedo{position:absolute;left:-26px;top:-26px;width:52px;height:52px;z-index:20;opacity:0;pointer-events:none}
.fn-dedo b{position:absolute;inset:0;border-radius:50%;background:rgba(22,32,42,.30);border:2px solid rgba(255,255,255,.95);box-shadow:0 4px 12px rgba(20,32,42,.25)}
.fn-dedo i{position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(22,32,42,.45);opacity:0}

/* WhatsApp */
.fone-zap .sb-zap{background:#054C44}
.fone-zap .topo-f{position:absolute;top:34px;left:0;right:0;height:70px;background:#075E54;color:#fff;display:flex;align-items:center;gap:10px;padding:0 14px 0 6px;z-index:2;box-sizing:border-box}
.topo-f .tf-v svg{width:28px;height:28px;display:block}
.topo-f .tf-av{width:46px;height:46px;border-radius:23px;background:#CFE9E4;color:#075E54;font-style:normal;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.topo-f .tf-n{flex:1;font-size:21px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden}
.topo-f small.st{display:block;font-size:18px;font-weight:400;opacity:.85}
.topo-f .tf-b{display:flex;gap:18px}
.topo-f .tf-b svg{width:26px;height:26px;display:block}
.fone-zap .ch-vp{position:absolute;top:104px;left:0;right:0;bottom:66px;overflow:hidden;background-color:#EFE7DE;background-image:radial-gradient(rgba(120,100,80,.07) 1.6px,transparent 1.7px),radial-gradient(rgba(120,100,80,.05) 1.2px,transparent 1.3px);background-size:34px 34px,22px 22px;background-position:0 0,11px 13px}
.fone-zap .ch-lista{position:relative;padding:12px 12px 0;display:flex;flex-direction:column;gap:10px}
.ch-data{align-self:center;background:#E1F2FB;color:#3B5566;font-size:18px;font-weight:600;padding:5px 14px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.06);opacity:0}
.ch-cripto{align-self:center;max-width:88%;background:#FFF3C4;color:#5E5235;font-size:18px;line-height:1.3;padding:8px 12px;border-radius:8px;text-align:center;opacity:0}
.bal{position:relative;max-width:80%;padding:10px 14px 8px;border-radius:10px;font-size:20px;line-height:1.35;background:#fff;align-self:flex-start;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;color:#16202A}
.bal.eu{align-self:flex-end;background:#DCF8C6}
.bal.rabo.ele{border-top-left-radius:0}.bal.rabo.eu{border-top-right-radius:0}
.bal.rabo:before{content:"";position:absolute;top:0;width:12px;height:14px}
.bal.rabo.ele:before{left:-10px;background:#fff;clip-path:polygon(100% 0,0 0,100% 100%)}
.bal.rabo.eu:before{right:-10px;background:#DCF8C6;clip-path:polygon(0 0,100% 0,0 100%)}
.bal.tem-reac{margin-bottom:16px}
.bal .ch-tx{display:block}
.bal small{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:15px;color:#667781;margin-top:3px}
.bal .tk{width:22px;height:14px;stroke:#8696A0}
.bal .tk .t2{opacity:0}
.bal .tk.ent .t2{opacity:1}
.bal .tk.lido{stroke:#34B7F1}
.reac{position:absolute;bottom:-20px;left:12px;width:34px;height:28px;border-radius:14px;background:#fff;border:1px solid #E2E6E9;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.1);opacity:0}
.bal.eu .reac{left:auto;right:12px}
.reac svg{width:18px;height:18px}
.ch-cita{background:rgba(0,0,0,.05);border-left:4px solid #6BCB77;border-radius:6px;padding:5px 10px;margin-bottom:6px;display:flex;flex-direction:column;font-size:18px;line-height:1.25}
.ch-cita.q-eu{border-left-color:#35A2D9}
.ch-cita b{color:#1F8A4C;font-size:18px}
.ch-cita.q-eu b{color:#2B7FB0}
.ch-cita span{color:#55636E;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.anx{margin:-4px -8px 8px;background:rgba(0,0,0,.04);border-radius:8px;overflow:hidden;position:relative}
.anx-pg{height:118px;background:#E9EDEF;position:relative;overflow:hidden;display:flex;justify-content:center}
.anx-pg .ch-pg{width:72%;margin-top:12px;background:#fff;border-radius:3px 3px 0 0;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:10px 12px;display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.ch-pg i{display:block;height:6px;border-radius:3px;background:#DDE2E6}
.ch-pg .pg-c{height:12px;width:45%;background:var(--cor)}
.ch-pg .pg-t{height:22px;background:#F0F3F5;border:1px solid #E1E6EA}
.ch-pg .w9{width:90%}.ch-pg .w8{width:80%}.ch-pg .w6{width:60%}.ch-pg .w5{width:50%}
.ch-anel{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;transform:rotate(-90deg)}
.ch-anel circle{fill:none;stroke-width:4}
.ch-anel .anel-f{fill:rgba(22,32,42,.45);stroke:rgba(255,255,255,.35)}
.ch-anel .anel-p{stroke:#fff;stroke-dasharray:1;stroke-dashoffset:1}
.anx-i{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:18px}
.anx-i s{text-decoration:none;background:#D93025;color:#fff;font-size:15px;font-weight:800;padding:4px 6px;border-radius:4px}
.anx-i span{display:flex;flex-direction:column;line-height:1.25}
.anx-i b{font-size:18px;font-weight:600}
.anx-i em{font-style:normal;font-size:18px;color:#667781}
.dl{display:block;height:4px;background:rgba(0,0,0,.08);margin:0 12px 8px;border-radius:2px;overflow:hidden}
.dl i{display:block;height:100%;width:0;background:#25D366}
.b-aud{min-width:300px}
.aud{display:flex;align-items:center;gap:10px;padding:4px 0 2px}
.aud-p{width:30px;height:30px;color:#54656F;flex-shrink:0}
.aud-p svg{width:30px;height:30px;display:block}
.aud-p .i-pausa{display:none}.aud-p.tocando .i-pausa{display:inline}.aud-p.tocando .i-play{display:none}
.aud-c{position:relative;width:186px;height:44px;flex-shrink:0}
.aud-w{position:absolute;left:0;right:0;top:4px;height:30px;display:flex;align-items:center;gap:2px}
.aud-w i{display:block;width:5px;border-radius:3px;background:#B4C0C7;transform-origin:50% 50%}
.aud-w i.ouv{background:#2E9E8F}
.bal.eu .aud-w i{background:#A8C79A}.bal.eu .aud-w i.ouv{background:#1E7B6E}
.aud-pt{position:absolute;left:-6px;top:13px;width:13px;height:13px;border-radius:7px;background:#2E9E8F}
.aud-t{position:absolute;left:0;bottom:-8px;font-style:normal;font-size:18px;color:#667781}
.aud-av{position:relative;width:46px;height:46px;border-radius:23px;background:#CFE9E4;color:#075E54;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aud-av u{position:absolute;right:-4px;bottom:-2px;width:20px;height:20px;color:#25D366;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center}
.aud-av.ouvido u{color:#34B7F1}
.aud-av u svg{width:15px;height:15px}
.digitando{position:absolute;left:12px;background:#fff;border-radius:0 10px 10px 10px;padding:14px 18px;display:flex;gap:6px;align-items:center;opacity:0;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.digitando i{width:10px;height:10px;border-radius:5px;background:#9AA5AE;display:block}
.digitando u{width:24px;height:24px;color:#E5484D;display:block;margin-right:4px}
.digitando u svg{width:24px;height:24px;display:block}
/* caixa de mensagem e teclado */
.fone-zap .ch-rod{position:absolute;left:0;right:0;bottom:-250px;height:316px;z-index:4}
.cx-anx{position:absolute;right:70px;top:-50px;height:42px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E2E6E9;border-radius:8px;padding:0 12px;font-size:18px;font-weight:600;opacity:0;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.cx-anx:empty{display:none}
.cx-anx s{text-decoration:none;background:#D93025;color:#fff;font-size:14px;font-weight:800;padding:3px 5px;border-radius:4px}
.ch-cx{height:66px;display:flex;align-items:center;gap:6px;padding:0 8px;background:#EFE7DE;box-sizing:border-box}
.cx-c{flex:1;height:50px;background:#fff;border-radius:25px;display:flex;align-items:center;padding:0 14px 0 18px;gap:10px;box-shadow:0 1px 1px rgba(0,0,0,.08);min-width:0}
.ch-cx.foco .cx-c{box-shadow:0 0 0 2px #25D366}
.cx-t{flex:1;font-size:20px;color:#16202A;white-space:nowrap;overflow:hidden;display:flex;align-items:center;min-width:0}
.cx-ph{color:#8696A0}
.ch-cx.tem .cx-ph{display:none}
.cx-cur{display:none;width:2px;height:24px;background:#25D366;margin-left:1px;animation:cxpisca 1s steps(1) infinite}
.ch-cx.foco .cx-cur{display:block}
@keyframes cxpisca{50%{opacity:0}}
.cx-ic{display:flex;gap:12px;color:#54656F}
.cx-ic svg{width:24px;height:24px;display:block}
.cx-g{display:none;flex:1;align-items:center;gap:8px;font-size:18px;color:#54656F;white-space:nowrap}
.cx-g .cx-rec{width:24px;height:24px;color:#E5484D;display:block}
.cx-g .cx-rec svg{width:24px;height:24px;display:block}
.cx-g b{color:#16202A;font-weight:600}
.ch-cx.grava .cx-g{display:flex}
.ch-cx.grava .cx-t,.ch-cx.grava .cx-ic{display:none}
.cx-b{width:50px;height:50px;border-radius:25px;background:#00A884;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.cx-b span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cx-b svg{width:26px;height:26px;display:block}
.cx-b .cx-env{display:none}
.ch-cx.tem .cx-b .cx-env{display:flex}
.ch-cx.tem .cx-b .cx-mic{display:none}
.ch-tec{height:250px;background:#D5D9DE;padding:12px 6px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.tec-l{display:flex;justify-content:center;gap:6px}
.tec-k{width:34px;height:44px;background:#fff;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.25);font-style:normal;font-size:20px;color:#16202A;display:flex;align-items:center;justify-content:center}
.tec-k.on{background:#AEB6BF;transform:translateY(-2px)}
.tec-esp{width:50px;background:#B6BDC6;font-size:18px}
.tec-sp{width:200px;font-size:18px;color:#55636E}
.tec-ok{background:#00A884;color:#fff}
/* fn-tela bloqueada */
.bloq{position:absolute;inset:0;z-index:8;background:#1E2A33;color:#fff;display:flex;flex-direction:column;align-items:center}
.bloq .fn-sb{background:transparent}
.bq-cad{margin-top:52px;width:26px;height:26px}
.bq-cad svg{width:26px;height:26px;display:block;overflow:visible}
.bq-h{font-size:92px;font-weight:500;letter-spacing:-2px;line-height:1;margin-top:8px}
.bq-d{font-size:20px;opacity:.85;margin-top:8px}
.bq-n{position:absolute;left:16px;right:16px;top:226px;background:#F4F6F8;color:#16202A;border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;opacity:0;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.bq-n2{top:246px;height:92px;background:#C9D0D6;padding:0}
.bq-a{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#55636E;letter-spacing:.5px;margin-bottom:4px}
.bq-a em{margin-left:auto;font-style:normal;font-weight:400;font-size:18px;letter-spacing:0}
.bq-z{width:24px;height:24px;border-radius:6px;background:#25D366;display:flex;align-items:center;justify-content:center}
.bq-z svg{width:16px;height:16px}
.bq-n b{font-size:20px}
.bq-n span{font-size:19px;color:#3B4A55}
.bq-r{position:absolute;bottom:40px;font-size:18px;opacity:.8}
.bq-barra{position:absolute;bottom:12px;width:130px;height:5px;border-radius:3px;background:#fff;opacity:.8}