/* copy of ~/.cache/claude-tmp/ig-reels/wa-chat.css with relative urls (kit: html/wa/). wa-chat.css: WhatsApp Android light (2024-26) chat, shared by reels (ig-reels) and carousels (instagram-criacao).
   Every size is in dp: calc(N*var(--dp)). Set --dp on .wa (px per dp; 2.55 = 40px body text, the reel default).
   Markup comes from wa_chat.py; motion from wa-chat.js (optional: without JS the chat renders in its final state). */
@font-face{font-family:WaRoboto;src:url(fonts/Roboto.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:WaRoboto;src:url(fonts/Roboto_medium.woff2) format("woff2");font-weight:500;font-display:swap}
.wa{--dp:2.55px;--D:var(--dp);position:relative;display:flex;flex-direction:column;overflow:hidden;font-family:WaRoboto,Roboto,sans-serif;color:#111B21;
 border-radius:calc(20*var(--D));box-shadow:0 50px 90px -30px rgba(3,8,60,.55),0 0 0 1px rgba(11,20,26,.06);
 background:#EFEAE2 url(ic/doodle.svg) 0 0/calc(150*var(--D)) repeat;-webkit-font-smoothing:antialiased;text-align:left;letter-spacing:0}
.wa *{box-sizing:border-box}
.wa-i{display:inline-block;flex:none;width:calc(24*var(--D));height:calc(24*var(--D));background:currentColor;-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.wa-i.back{--u:url(ic/arrow-back.svg)}
.wa-i.vid{--u:url(ic/videocam-outline.svg)}
.wa-i.call{--u:url(ic/call-outline.svg)}
.wa-i.more{--u:url(ic/more-vert.svg)}
.wa-i.mic{--u:url(ic/mic.svg)}
.wa-i.send{--u:url(ic/send.svg)}
.wa-i.clip{--u:url(ic/attach-file.svg);transform:rotate(-45deg)}
.wa-i.cam{--u:url(ic/photo-camera-outline.svg)}
.wa-i.emo{--u:url(ic/mood-outline.svg)}
.wa-i.play{--u:url(ic/play-arrow-rounded.svg)}
.wa-i.lock{--u:url(ic/lock.svg)}
.wa-i.reply{--u:url(ic/reply.svg)}
.wa-i.ok{--u:url(ic/verified-rounded.svg)}
/* header */
.wa-hd{flex:none;height:calc(60*var(--D));background:#fff;display:flex;align-items:center;padding:0 calc(6*var(--D)) 0 calc(6*var(--D));gap:calc(4*var(--D));color:#54656F;position:relative;z-index:2;box-shadow:0 calc(.5*var(--D)) 0 rgba(11,20,26,.1)}
.wa-hd>.back{color:#111B21;margin-right:calc(2*var(--D))}
.wa-av{flex:none;width:calc(40*var(--D));height:calc(40*var(--D));border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:500;font-size:calc(18*var(--D));background:#2340FF;overflow:hidden;font-style:normal}
.wa-av img{width:100%;height:100%;object-fit:cover}
.wa-who{flex:1;min-width:0;margin-left:calc(8*var(--D));line-height:1.2}
.wa-nm{display:block;text-overflow:ellipsis;font-size:calc(17*var(--D));font-weight:500;color:#111B21;white-space:nowrap;overflow:hidden}
.wa-nm .ok{vertical-align:calc(-2*var(--D));margin-left:calc(3*var(--D));width:calc(17*var(--D));height:calc(17*var(--D));color:#00A884}
.wa-sub:empty{display:none}.wa-sub{display:block;font-size:calc(13*var(--D));color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:calc(1*var(--D));min-height:1.2em}
.wa-hd>.vid,.wa-hd>.call,.wa-hd>.more{margin-left:calc(17*var(--D))}.wa-hd>.more{margin-left:calc(12*var(--D))}
/* body: newest message sits on the input bar, older ones get pushed up (like the app) */
.wa-bd{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 calc(6*var(--D)) calc(2*var(--D));overflow:hidden}
.wa-day,.wa-e2e{flex:none;align-self:center;text-align:center;font-size:calc(12.5*var(--D));line-height:calc(16*var(--D));color:#54656F;border-radius:calc(7.5*var(--D));box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-day{background:rgba(255,255,255,.95);padding:calc(5*var(--D)) calc(12*var(--D)) calc(6*var(--D));margin:calc(10*var(--D)) 0 calc(4*var(--D))}
.wa-e2e{background:#FFEECD;padding:calc(6*var(--D)) calc(12*var(--D));margin:calc(4*var(--D)) calc(20*var(--D)) calc(6*var(--D));text-wrap:balance}
.wa-e2e .lock{width:calc(11*var(--D));height:calc(11*var(--D));vertical-align:calc(-1*var(--D));margin-right:calc(3*var(--D))}
/* message rows: .wa-r grows (JS animates its height), .wa-m is the bubble */
.wa-r{flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:0 calc(8*var(--D)) 1px;margin-top:calc(2*var(--D))}
.wa-r.me{align-items:flex-end}.wa-r.tl{margin-top:calc(8*var(--D))}
.wa-m{position:relative;max-width:80%;min-width:calc(66*var(--D));background:#fff;border-radius:calc(7.5*var(--D));padding:calc(6*var(--D)) calc(8*var(--D)) calc(7*var(--D)) calc(9*var(--D));
 font-size:calc(16*var(--D));line-height:calc(21*var(--D));filter:drop-shadow(0 calc(.5*var(--D)) calc(.4*var(--D)) rgba(11,20,26,.16));overflow-wrap:break-word}
.me>.wa-m{background:#D9FDD3}
.tl.ot>.wa-m{border-top-left-radius:0}.tl.me>.wa-m{border-top-right-radius:0}
.tl>.wa-m::before{content:"";position:absolute;top:0;width:calc(8*var(--D));height:calc(13*var(--D));background:inherit}
.tl.ot>.wa-m::before{left:calc(-8*var(--D));clip-path:polygon(100% 0,10% 0,0 9%,100% 100%)}
.tl.me>.wa-m::before{right:calc(-8*var(--D));clip-path:polygon(0 0,90% 0,100% 9%,0 100%)}
/* time + ticks: absolute in the corner; the inline spacer reserves its width so it shares the last line when it fits */
.wa-sp{display:inline-block;width:calc(42*var(--D));height:1px}.me .wa-sp{width:calc(60*var(--D))}
.wa-t{position:absolute;right:calc(7*var(--D));bottom:calc(4*var(--D));display:flex;align-items:center;gap:calc(3*var(--D));font-size:calc(11*var(--D));line-height:calc(15*var(--D));color:#667781;white-space:nowrap}
.wa-tk{display:inline-block;width:calc(16*var(--D));height:calc(11*var(--D));background:#8696A0;-webkit-mask:url(ic/tick2.svg) center/contain no-repeat;mask:url(ic/tick2.svg) center/contain no-repeat}
.wa-tk.s1{-webkit-mask-image:url(ic/tick1.svg);mask-image:url(ic/tick1.svg)}
.wa-tk.s0{-webkit-mask-image:url(ic/clock.svg);mask-image:url(ic/clock.svg)}
.wa-tk.s3{background:#53BDEB}
/* quoted reply (answer to a button / swipe reply) */
.wa-q{display:block;margin:calc(-3*var(--D)) calc(-5*var(--D)) calc(5*var(--D)) calc(-6*var(--D));padding:calc(6*var(--D)) calc(10*var(--D)) calc(7*var(--D));border-radius:calc(6*var(--D));background:rgba(11,20,26,.05);border-left:calc(4*var(--D)) solid #06CF9C;font-size:calc(14*var(--D));line-height:calc(19*var(--D));color:#667781;min-width:0}
.me .wa-q{background:#D1F4CC}
.wa-q b{display:block;font-weight:500;color:#06A884;white-space:nowrap}
.wa-q span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* interactive reply buttons: separate white rows under the bubble */
.wa-bt{display:flex;flex-direction:column;gap:calc(2*var(--D));margin-top:calc(2*var(--D));align-self:stretch}
.wa-r.ot.hasbt{align-items:stretch;max-width:80%}.wa-r.ot.hasbt>.wa-m{max-width:none}
.wa-bt span{display:flex;align-items:center;justify-content:center;gap:calc(6*var(--D));background:#fff;border-radius:calc(7.5*var(--D));height:calc(40*var(--D));font-size:calc(15*var(--D));font-weight:500;color:#027EB5;filter:drop-shadow(0 calc(.5*var(--D)) calc(.4*var(--D)) rgba(11,20,26,.16))}
.wa-bt span .reply{width:calc(18*var(--D));height:calc(18*var(--D))}
.wa-bt span.on{background:#E9EDEF}
/* voice note */
.wa-au{display:flex;align-items:center;gap:calc(6*var(--D));width:calc(236*var(--D));padding:calc(1*var(--D)) 0 calc(14*var(--D))}
.wa-au .wa-av{width:calc(46*var(--D));height:calc(46*var(--D));position:relative;overflow:visible;font-size:calc(19*var(--D))}
.wa-au .wa-av .mic{position:absolute;left:calc(-4*var(--D));bottom:calc(-2*var(--D));width:calc(18*var(--D));height:calc(18*var(--D));color:#00A884;filter:drop-shadow(0 0 0 #D9FDD3) drop-shadow(1px 0 0 #D9FDD3) drop-shadow(-1px 0 0 #D9FDD3) drop-shadow(0 1px 0 #D9FDD3) drop-shadow(0 -1px 0 #D9FDD3)}
.ot .wa-au .wa-av .mic{filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)}
.wa-au.pl .wa-av .mic{color:#53BDEB}
.wa-au>.play{width:calc(34*var(--D));height:calc(34*var(--D));color:#8696A0;margin-left:calc(2*var(--D))}
.wa-wv{flex:1;position:relative;display:flex;align-items:center;gap:calc(1.6*var(--D));height:calc(26*var(--D))}
.wa-wv i{flex:1;border-radius:calc(2*var(--D));background:#A9B3B8;min-height:calc(3*var(--D))}.me .wa-wv i{background:#9FB7A2}
.wa-wv b{position:absolute;left:0;top:50%;width:calc(12*var(--D));height:calc(12*var(--D));margin:calc(-6*var(--D)) 0 0 calc(-2*var(--D));border-radius:50%;background:#00A884}
.wa-au.pl .wa-wv b{background:#53BDEB}
.wa-au small{position:absolute;left:calc(118*var(--D));bottom:calc(5*var(--D));font-size:calc(11*var(--D));color:#667781}
/* photo */
.wa-m.img{padding:calc(3*var(--D))}
.wa-m.img img{display:block;width:calc(228*var(--D));height:calc(228*var(--D));object-fit:cover;object-position:50% 35%;border-radius:calc(5*var(--D))}
.wa-m.img .wa-t{right:calc(9*var(--D));bottom:calc(8*var(--D));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.wa-m.img .wa-t .wa-tk{background:#fff}.wa-m.img .wa-t .wa-tk.s3{background:#53BDEB}
.wa-m.img::after{content:"";position:absolute;left:calc(3*var(--D));right:calc(3*var(--D));bottom:calc(3*var(--D));height:calc(36*var(--D));border-radius:0 0 calc(5*var(--D)) calc(5*var(--D));background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none}
/* document (PDF) */
.wa-m.doc{padding:calc(3*var(--D)) calc(3*var(--D)) calc(22*var(--D));width:calc(250*var(--D))}
.wa-dv{height:calc(80*var(--D));border-radius:calc(5*var(--D)) calc(5*var(--D)) 0 0;overflow:hidden;background:#fff;padding:calc(10*var(--D)) calc(14*var(--D));display:flex;flex-direction:column;gap:calc(4*var(--D))}
.wa-dv b{font:700 calc(9*var(--D)) Georgia,serif;color:#333;letter-spacing:.06em}
.wa-dv i{display:block;height:calc(3*var(--D));background:#d5d8db;border-radius:1px}
.wa-df{display:flex;align-items:center;gap:calc(9*var(--D));background:rgba(11,20,26,.05);border-radius:0 0 calc(5*var(--D)) calc(5*var(--D));padding:calc(9*var(--D)) calc(10*var(--D))}
.me .wa-df{background:#D1F4CC}
.wa-pdf{flex:none;width:calc(26*var(--D));height:calc(32*var(--D));border-radius:calc(3*var(--D));background:#E5484D;color:#fff;font-size:calc(8*var(--D));font-weight:500;display:grid;place-items:end center;padding-bottom:calc(4*var(--D))}
.wa-df>div{min-width:0}
.wa-df>div>span{display:block;font-size:calc(15*var(--D));line-height:calc(19*var(--D));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-df small{display:block;font-size:calc(12*var(--D));color:#667781;margin-top:calc(1*var(--D))}
/* input bar: mic when empty, send arrow when there is text */
.wa-in{flex:none;display:flex;align-items:flex-end;gap:calc(6*var(--D));padding:calc(6*var(--D)) calc(6*var(--D)) calc(8*var(--D))}
.wa-f{flex:1;min-width:0;display:flex;align-items:flex-end;gap:calc(12*var(--D));background:#fff;border-radius:calc(24*var(--D));min-height:calc(48*var(--D));padding:calc(12*var(--D)) calc(14*var(--D));color:#54656F;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-f .wa-i{margin-bottom:0}
.wa-x{flex:1;min-width:0;font-size:calc(17*var(--D));line-height:calc(24*var(--D));color:#111B21;max-height:calc(72*var(--D));overflow:hidden}
.wa-x:empty::before{content:"Mensagem";color:#8696A0}
.wa-x.car::after{content:"";display:inline-block;width:calc(2*var(--D));height:calc(20*var(--D));background:#00A884;vertical-align:calc(-4*var(--D));margin-left:1px}
.wa-f.has .cam{display:none}
.wa-b{flex:none;width:calc(48*var(--D));height:calc(48*var(--D));border-radius:50%;background:#00A884;display:grid;place-items:center;color:#fff}
.wa-b .send{display:none;width:calc(22*var(--D));height:calc(22*var(--D));margin-left:calc(2*var(--D))}
.wa-b.has .send{display:block}.wa-b.has .mic{display:none}
.wa-m.doc.np .wa-df{border-radius:calc(5*var(--D))}
/* nota de voz recebida (Android 2024-26): [play] [onda + bolinha] [avatar redondo com mic], duração embaixo à esquerda, hora à direita */
.wa-au{display:flex;align-items:center;gap:calc(8*var(--D));width:calc(250*var(--D));padding:calc(2*var(--D)) 0 calc(16*var(--D));position:relative}
.wa-au>.play{order:0;width:calc(30*var(--D));height:calc(30*var(--D));color:#54656F;margin:0}
.wa-au .wa-wv{order:1}
.wa-au .wa-av{order:2;width:calc(48*var(--D));height:calc(48*var(--D));border-radius:50%!important;overflow:visible;position:relative;flex:none}
.wa-au .wa-av img{border-radius:50%}
.wa-au .wa-av .mic{left:auto!important;right:calc(-3*var(--D));bottom:calc(-2*var(--D))}
.wa-wv{gap:calc(2*var(--D))!important;height:calc(28*var(--D))!important}
.wa-wv i{flex:0 0 calc(2*var(--D))!important;border-radius:calc(2*var(--D))!important;background:#8696A0!important;min-height:calc(3*var(--D))}
.wa-wv i.on{background:#53BDEB!important}
.wa-wv b{left:0;margin-left:calc(-1*var(--D))!important;width:calc(13*var(--D))!important;height:calc(13*var(--D))!important;margin-top:calc(-6.5*var(--D))!important;background:#53BDEB!important}
.wa-au small{left:calc(38*var(--D))!important;bottom:calc(1*var(--D))!important}

/* nota de voz (17/10/2026): onda ocupa a largura toda; bolinha verde até ser ouvida, azul depois (.pl) */
.wa-wv{justify-content:space-between!important}
.wa-wv i{flex:0 0 calc(2.6*var(--D))!important}
.wa-au .wa-wv b{background:#00A884!important}
.wa-au.pl .wa-wv b{background:#53BDEB!important}
