:root{
  --verde-hdr:#008069;
  --verde-escuro:#075e54;
  --verde-claro:#25d366;
  --bg-chat:#efeae2;
  --bubble-in:#ffffff;
  --bubble-out:#d9fdd3;
  --txt:#111b21;
  --txt-2:#667781;
  --tick-azul:#53bdeb;
  --sb-bg:#ffffff;
  --sb-border:#e9edef;
  --input-bg:#f0f2f5;
  --app-bg:#d1d7db;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;height:100dvh;background:var(--app-bg);font-family:"Segoe UI",Helvetica,Arial,sans-serif;color:var(--txt);font-size:14.2px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:127px;background:var(--verde-hdr);z-index:0}
.app{position:relative;z-index:1;display:flex;width:calc(100% - 38px);max-width:1600px;height:calc(100% - 38px);margin:19px auto;background:#fff;box-shadow:0 6px 18px rgba(11,20,26,.05);overflow:hidden}

/* sidebar */
.sidebar{width:30%;min-width:300px;max-width:420px;border-right:1px solid var(--sb-border);display:flex;flex-direction:column;background:var(--sb-bg)}
.sb-header{height:59px;background:var(--input-bg);display:flex;align-items:center;padding:0 16px;justify-content:space-between}
.sb-icons span,.hdr-icons span{display:inline-block;width:22px;height:22px;border-radius:50%;background:#54656f;opacity:.25;margin-left:18px}
.sb-search{padding:7px 12px;border-bottom:1px solid var(--sb-border)}
.sb-search-box{background:var(--input-bg);border-radius:8px;height:35px;display:flex;align-items:center;padding:0 12px;color:var(--txt-2);font-size:14px}
.sb-lupa{width:14px;height:14px;border:2px solid #54656f;border-radius:50%;margin-right:22px;opacity:.6}
.sb-list{overflow-y:auto;flex:1}
.sb-item{display:flex;align-items:center;height:72px;padding:0 15px;cursor:pointer}
.sb-item:hover{background:#f5f6f6}
.sb-item.ativo{background:var(--input-bg)}
.sb-item .avatar{margin-right:15px}
.sb-txt{flex:1;border-bottom:1px solid var(--sb-border);height:100%;display:flex;flex-direction:column;justify-content:center;min-width:0}
.sb-l1{display:flex;justify-content:space-between;align-items:center}
.sb-nome{font-size:17px;color:var(--txt)}
.sb-hora{font-size:12px;color:var(--txt-2)}
.sb-l2{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
.sb-prev{font-size:14px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-badge{background:var(--verde-claro);color:#fff;border-radius:12px;min-width:20px;height:20px;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 6px;font-weight:600}
.sb-hora.verde{color:var(--verde-claro)}

.avatar{width:40px;height:40px;border-radius:50%;background:#dfe5e7 center/cover no-repeat;flex-shrink:0;position:relative;overflow:hidden}
.avatar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#fff 0 9px,transparent 10px),radial-gradient(ellipse at 50% 100%,#fff 0 18px,transparent 19px);opacity:.9}
.avatar.tem-foto::after{display:none}
.avatar.ini{background:#6b7c85;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:16px}
.avatar.ini::after{display:none}

/* chat */
.chat{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.chat-header{height:59px;background:var(--input-bg);display:flex;align-items:center;padding:0 16px;border-left:1px solid var(--sb-border);z-index:2}
.hdr-info{margin-left:15px;flex:1;min-width:0}
.hdr-nome{font-size:16px;color:var(--txt);font-weight:500}
.hdr-status{font-size:13px;color:var(--txt-2);line-height:16px;min-height:16px}
.hdr-status.digitando{color:var(--verde-hdr)}

.chat-body{flex:1;position:relative;overflow:hidden;background-color:var(--bg-chat)}
.chat-body::before{content:"";position:absolute;inset:0;opacity:.55;background:url(doodle.svg) repeat;background-size:360px 360px}
.chat-scroll{position:absolute;inset:0;overflow-y:auto;padding:12px 6% 20px}

.aviso-cripto{margin:0 auto 12px;max-width:85%;background:#ffeecd;color:#54656f;font-size:12.5px;text-align:center;border-radius:8px;padding:6px 12px;box-shadow:0 1px .5px rgba(11,20,26,.13);display:none}
.aviso-cripto.on{display:block}
.data-sep{text-align:center;margin:8px 0 12px}
.data-sep span{background:#fff;color:#54656f;font-size:12.5px;padding:5px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);text-transform:uppercase}

.msg{display:flex;margin-bottom:3px;animation:pop .18s ease-out}
.msg.in{justify-content:flex-start}
.msg.out{justify-content:flex-end}
.msg.gap{margin-top:10px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bubble{position:relative;max-width:65%;padding:6px 7px 8px 9px;border-radius:7.5px;box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:14.2px;line-height:19px;word-wrap:break-word;white-space:pre-wrap}
.in .bubble{background:var(--bubble-in);border-top-left-radius:0}
.out .bubble{background:var(--bubble-out);border-top-right-radius:0}
.gap.in .bubble::before{content:"";position:absolute;top:0;left:-8px;width:0;height:0;border-top:8px solid var(--bubble-in);border-left:8px solid transparent}
.gap.out .bubble::before{content:"";position:absolute;top:0;right:-8px;width:0;height:0;border-top:8px solid var(--bubble-out);border-right:8px solid transparent}
.meta{float:right;margin:4px 0 -5px 10px;font-size:11px;color:var(--txt-2);display:inline-flex;align-items:center;gap:3px;line-height:15px}
.tick{display:inline-block;width:16px;height:11px;position:relative}
.tick::before,.tick::after{content:"";position:absolute;width:4px;height:8px;border:solid var(--tick-azul);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);top:0}
.tick::before{left:3px}.tick::after{left:8px}
.tick.cinza::before,.tick.cinza::after{border-color:#8696a0}
.bubble b{font-weight:600}
.bubble a{color:#027eb5;text-decoration:none}

/* midia */
.bubble.midia{padding:4px}
.bubble.midia img,.bubble.midia video{display:block;width:100%;max-width:330px;border-radius:6px}
.bubble.midia .legenda{padding:5px 6px 2px}
.bubble.midia .meta{margin-right:5px}

.audio{display:flex;align-items:center;gap:8px;min-width:260px;padding:4px 2px}
.audio .av{width:45px;height:45px}
.audio .play{width:34px;height:34px;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0}
.audio .play::before{content:"";position:absolute;left:10px;top:7px;border-left:16px solid #8696a0;border-top:10px solid transparent;border-bottom:10px solid transparent}
.audio .play.tocando::before{border:none;left:9px;top:7px;width:5px;height:20px;background:#8696a0;box-shadow:9px 0 0 #8696a0}
.audio .wrap{flex:1;position:relative;padding-bottom:12px}
.audio .wave{display:flex;align-items:center;gap:2px;height:28px;cursor:pointer}
.audio .wave i{display:block;width:2.5px;background:#c3cbd1;border-radius:2px}
.audio .wave i.ok{background:#34b7f1}
.audio .dur{font-size:11px;color:var(--txt-2);position:absolute;bottom:-4px;left:0}
.audio .mic{width:16px;height:16px;position:absolute;right:-2px;bottom:-4px;border-radius:50%;background:var(--verde-claro);opacity:.9}

.linkprev{display:block;background:rgba(0,0,0,.05);border-radius:6px;margin:-2px -3px 6px -5px;overflow:hidden;text-decoration:none;color:inherit}
.linkprev .lp-img{height:120px;background:#ccc center/cover no-repeat}
.linkprev .lp-txt{padding:8px 10px}
.linkprev .lp-t{font-weight:600;font-size:13.5px;color:var(--txt)}
.linkprev .lp-d{font-size:12.5px;color:var(--txt-2);margin-top:2px}
.linkprev .lp-u{font-size:11.5px;color:var(--txt-2);margin-top:4px}
.btn-cta{display:block;width:100%;margin-top:8px;padding:9px 12px;background:var(--verde-hdr);color:#fff !important;text-align:center;border-radius:6px;font-weight:600;text-decoration:none;font-size:14px}
.btn-cta:hover{background:var(--verde-escuro)}

.typing .bubble{padding:10px 14px}
.dots{display:inline-flex;gap:4px}
.dots i{width:7px;height:7px;background:#8696a0;border-radius:50%;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* chips */
.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:8px 6%;background:var(--bg-chat);border-top:1px solid #e3ddd3}
.chips:empty{display:none}
.chip{background:#fff;color:var(--verde-hdr);border:1px solid var(--verde-hdr);border-radius:20px;padding:8px 16px;font-size:14px;cursor:pointer;box-shadow:0 1px .5px rgba(11,20,26,.13);animation:pop .25s ease-out;font-weight:500;font-family:inherit}
.chip:hover{background:var(--verde-hdr);color:#fff}

/* input */
.chat-input{height:62px;background:var(--input-bg);display:flex;align-items:center;padding:5px 16px;gap:10px;border-left:1px solid var(--sb-border)}
.ci-emoji,.ci-clip{width:26px;height:26px;border-radius:50%;background:#54656f;opacity:.35}
.ci-clip{border-radius:6px;transform:rotate(45deg);width:14px;height:24px;margin:0 6px}
#ci-input{flex:1;height:42px;border:none;border-radius:8px;background:#fff;padding:0 12px;font-size:15px;outline:none;color:var(--txt);font-family:inherit}
#ci-input:disabled{background:#fff;color:#8696a0}
#ci-input.ativo{box-shadow:0 0 0 2px var(--verde-claro) inset}
.ci-send{width:40px;height:40px;border:none;border-radius:50%;background:#54656f;opacity:.35;cursor:default;position:relative}
.ci-send::before{content:"";position:absolute;left:14px;top:12px;border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.ci-send:enabled{background:var(--verde-hdr);opacity:1;cursor:pointer}

/* conversa única (padrão): visual do app no celular, centralizado como um celular no desktop.
   O layout com barra lateral (WhatsApp Web) só aparece com layoutDesktop:"web" no config e tela larga. */
body.solo::before{display:none}
body.solo{background:var(--bg-chat);overflow:hidden}
body.solo .app{width:100%;height:100%;height:100dvh;margin:0;box-shadow:none;background:var(--bg-chat)}
body.solo .sidebar{display:none}
body.solo .chat-header{background:var(--verde-hdr);border:none;height:56px;padding:0 10px 0 6px;padding-top:env(safe-area-inset-top)}
body.solo .chat-header::before{content:"";width:10px;height:10px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(45deg);margin:0 10px 0 6px;flex-shrink:0}
body.solo .chat-header .avatar{width:38px;height:38px}
body.solo .hdr-info{margin-left:10px}
body.solo .hdr-nome,.hdr-status{color:#fff}
body.solo .hdr-nome{font-size:16.5px}
body.solo .hdr-status{font-size:12.5px;opacity:.9}
body.solo .hdr-status.digitando{color:#fff;opacity:1}
body.solo .hdr-icons{display:flex;gap:4px}
body.solo .hdr-icons span{background:#fff;opacity:.95;width:22px;height:22px;margin-left:12px;border-radius:50%;border:2px solid #fff;background:transparent}
body.solo .hdr-icons span:last-child{width:4px;height:4px;border:none;background:#fff;box-shadow:0 -7px 0 #fff,0 7px 0 #fff;border-radius:50%;margin-left:16px;margin-right:4px}
body.solo .chat-scroll{padding:8px 8px 12px;-webkit-overflow-scrolling:touch}
body.solo .bubble{max-width:85%;font-size:15px;line-height:20px}
body.solo .bubble.midia img,.bubble.midia video{max-width:100%}
body.solo .chips{padding:6px 8px 8px;background:transparent;border:none;gap:6px}
body.solo .chip{padding:9px 14px;font-size:15px}
body.solo .chat-input{background:var(--bg-chat);border:none;height:auto;min-height:58px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:6px}
body.solo .ci-emoji,.ci-clip{display:none}
body.solo #ci-input{height:46px;border-radius:24px;font-size:16px;padding:0 18px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
body.solo #ci-input:disabled{color:#8696a0}
body.solo #ci-input.ativo{box-shadow:0 1px .5px rgba(11,20,26,.13)}
body.solo .ci-send{width:46px;height:46px;background:var(--verde-hdr);opacity:1}
body.solo .ci-send:disabled{background:var(--verde-hdr);opacity:1}
body.solo .ci-send:disabled::before{border:none;left:17px;top:11px;width:12px;height:17px;border-radius:7px;background:#fff}
body.solo .ci-send:disabled::after{content:"";position:absolute;left:14px;top:17px;width:16px;height:14px;border:2.2px solid #fff;border-top:none;border-radius:0 0 10px 10px;box-sizing:border-box}
body.solo .ci-send:enabled::before{left:17px;top:15px}
body.solo .audio{min-width:220px}
@media (min-width:900px){
  body.solo{background:#111b21}
  body.solo .app{max-width:440px;height:100vh;height:100dvh;margin:0 auto;box-shadow:0 0 0 1px #233138,0 20px 60px rgba(0,0,0,.5)}
}
/* layout web (barra lateral) só quando o body não é solo e a tela é larga; abaixo de 900px cai no solo via engine */

/* ---- usabilidade: botões de resposta no estilo dos botões interativos do WhatsApp ---- */
.chips{flex-direction:column;align-items:stretch;gap:6px;padding:6px 10px 4px}
.chips-dica{text-align:center;font-size:12.5px;color:var(--txt-2);margin:2px 0 4px;animation:pop .3s ease-out}
.chip{width:100%;text-align:center;background:#fff;color:var(--verde-hdr);border:none;border-radius:8px;padding:12px 14px;font-size:15px;font-weight:600;box-shadow:0 1px .5px rgba(11,20,26,.13);animation:pop .3s ease-out}
.chip:hover,.chip:active{background:#e7f6f1;color:var(--verde-hdr)}
.chip:first-of-type{animation:pop .3s ease-out,pulso 1.6s ease-in-out 1s 2}
@keyframes pulso{0%,100%{box-shadow:0 1px .5px rgba(11,20,26,.13)}50%{box-shadow:0 0 0 4px rgba(37,211,102,.35)}}
#ci-input::placeholder{color:#8696a0;font-size:14px}
#ci-input.erro{box-shadow:0 0 0 2px #e53935 inset !important}
.ci-aviso{display:none;margin:0 10px 6px;background:#fff3e0;color:#5d4037;border-radius:8px;padding:8px 12px;font-size:13px;text-align:center;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.ci-aviso.on{display:block;animation:pop .2s ease-out}
.chat-scroll{cursor:default}
.chip-ia{background:transparent;box-shadow:none;border:1px dashed var(--verde-hdr);font-weight:500;animation:pop .3s ease-out !important}
.chip-volta{background:transparent;box-shadow:none;border:1px solid #cfd6da;color:var(--txt-2);font-weight:500}