:root{
  --green:#075e54; --green2:#128c7e; --accent:#25d366; --paper:#efeae2;
  --in:#fff; --out:#d9fdd3; --text:#182229; --muted:#667781; --line:#d8dfdf;
  --shadow:0 8px 24px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#dde5e2;color:var(--text)}
button,input{font:inherit}
button{cursor:pointer}
.app{width:min(760px,100%);height:100dvh;margin:0 auto;background:var(--paper);display:flex;flex-direction:column;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 20px 80px rgba(0,0,0,.10)}
.app[aria-hidden="true"]{filter:blur(7px);pointer-events:none;user-select:none}
.topbar{height:70px;flex:0 0 70px;background:linear-gradient(180deg,var(--green2),var(--green));display:flex;align-items:center;padding:9px 11px;color:#fff;gap:10px;box-shadow:0 4px 16px rgba(0,0,0,.16);z-index:5}
.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}
.identity{min-width:0;display:flex;flex-direction:column;line-height:1.15;flex:1}
.identity strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity span{font-size:12px;opacity:.92;margin-top:4px}.identity i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8cffb4;margin-right:5px;box-shadow:0 0 0 2px rgba(140,255,180,.18)}
.top-actions{display:flex;gap:2px}.icon{border:0;background:transparent;color:#fff;width:40px;height:40px;border-radius:999px;font-size:24px}.icon:active{background:rgba(255,255,255,.12)}
.messages{flex:1;overflow:auto;padding:16px 12px 132px;background-color:var(--paper);background-image:linear-gradient(rgba(239,234,226,.87),rgba(239,234,226,.87)),url('assets/wallpaper-chat.png');background-size:380px}
.day{width:max-content;margin:3px auto 14px;padding:6px 9px;border-radius:7px;background:#fff;color:#68767d;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.row{display:flex;margin:5px 0;gap:8px;align-items:flex-end}.row.me{justify-content:flex-end}.bubble{max-width:min(84%,570px);padding:8px 10px 6px;background:var(--in);border-radius:10px 10px 10px 3px;box-shadow:0 1px 2px rgba(0,0,0,.08);line-height:1.36;font-size:15.5px;word-wrap:break-word}.row.me .bubble{background:var(--out);border-radius:10px 10px 3px 10px}.time{font-size:10.5px;color:#76848c;text-align:right;margin-top:3px;white-space:nowrap}.checks{color:#53bdeb;margin-left:4px}
.typing{display:flex;gap:4px;padding:10px 13px}.typing span{width:7px;height:7px;border-radius:50%;background:#8d9ba2;animation:bounce 1s infinite ease-in-out}.typing span:nth-child(2){animation-delay:.13s}.typing span:nth-child(3){animation-delay:.26s}@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-5px);opacity:1}}
.photo{display:block;width:min(310px,76vw);border-radius:12px;margin:5px 0 3px;object-fit:cover;box-shadow:var(--shadow)}
.audio-card{display:flex;align-items:center;gap:9px;min-width:230px}.audio-card button{width:39px;height:39px;border-radius:50%;border:0;background:var(--green2);color:#fff;font-size:16px}.wave{height:5px;flex:1;border-radius:9px;background:#d7dfdf;overflow:hidden}.wave i{display:block;width:55%;height:100%;background:#7f9593}
.offer-strip{position:absolute;bottom:72px;left:0;right:0;padding:8px 10px;display:flex;gap:7px;overflow-x:auto;background:linear-gradient(180deg,rgba(239,234,226,.05),rgba(239,234,226,.98) 35%)}.offer-strip button{white-space:nowrap;border:1px solid #b8d8cb;background:#fff;color:#0b6356;border-radius:20px;padding:8px 12px;font-weight:700;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.composer{height:70px;position:absolute;left:0;right:0;bottom:0;padding:8px 9px 13px;display:flex;gap:7px;align-items:center;background:#f0f2f5;border-top:1px solid #dbe0e1}.composer input{flex:1;height:48px;border:0;background:#fff;border-radius:24px;padding:0 17px;font-size:16px;outline:none;box-shadow:0 1px 1px rgba(0,0,0,.03)}.round{width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center}.send{background:var(--green2);color:#fff;font-size:19px}.secondary{background:#fff;color:var(--green2);font-size:18px;border:1px solid #d9e4e2}.recording{background:#d33!important;color:#fff!important;animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(221,51,51,.12)}}
.disclosure{position:absolute;right:10px;bottom:1px;font-size:9px;color:#819097;pointer-events:none}
.cta-bubble{margin-top:8px;display:grid;gap:7px}.cta-bubble a{display:block;text-align:center;text-decoration:none;background:var(--green2);color:#fff;font-weight:800;padding:10px 12px;border-radius:9px}.cta-bubble a.alt{background:#fff;color:var(--green2);border:1px solid #9fcfc3}
.gate{position:fixed;inset:0;z-index:50;background:rgba(9,22,21,.76);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.gate-card{width:min(390px,100%);background:#fff;border-radius:24px;padding:27px 22px 20px;text-align:center;box-shadow:0 28px 100px rgba(0,0,0,.32)}.gate-avatar{width:86px;height:86px;border-radius:50%;object-fit:cover;border:4px solid #e5f7ee;margin-bottom:10px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--green2)}.gate h1{margin:5px 0 7px;font-size:27px}.gate p{margin:0 0 19px;color:#667781}.primary,.ghost{width:100%;height:48px;border-radius:14px;font-weight:800}.primary{border:0;background:linear-gradient(180deg,#24c17c,#108866);color:#fff;box-shadow:0 10px 24px rgba(16,136,102,.22)}.ghost{border:0;background:transparent;color:#6b777c;margin-top:5px}
@media (min-width:761px){body{padding:18px}.app{height:calc(100dvh - 36px);border-radius:18px;overflow:hidden}.composer,.offer-strip{position:absolute}}

.voice-status{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 70px;
  z-index: 20;
  margin: 0 auto;
  max-width: 560px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(7,94,84,.94);
  color: white;
  text-align: center;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
#mic-btn.recording{
  animation: voicePulse 1.2s infinite;
  font-weight: 700;
}
@keyframes voicePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

/* WhatsApp-style voice notes */
.audio-bubble{min-width:min(330px,82vw)}
.voice-note{display:flex;align-items:center;gap:9px;min-width:245px;padding:2px 0}
.voice-note audio{display:none}
.voice-play{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--green2);font-size:19px;font-weight:800;display:grid;place-items:center}
.row.me .voice-play{color:#0b6f5f}
.voice-track{position:relative;flex:1;height:30px;display:flex;align-items:center;overflow:hidden}
.voice-dots{position:relative;z-index:2;width:100%;font-size:18px;letter-spacing:1px;line-height:1;color:#8a9a9a;white-space:nowrap;overflow:hidden;opacity:.92}
.voice-progress{position:absolute;left:0;top:50%;height:3px;width:0%;transform:translateY(-50%);background:#22a884;border-radius:9px;z-index:3;opacity:.55;transition:width .08s linear}
.voice-duration{font-size:11px;color:#617077;min-width:32px;text-align:right}
.voice-caption{font-size:11px;color:#6d7a80;margin-top:3px}
.voice-fallback{font-size:11px;color:#64747b;margin-top:5px}
#message-input:disabled{opacity:.55}

/* Voice-note UX: no technical status labels */
.voice-status{display:none!important}