*{box-sizing:border-box}
:root{
  --header:#075e54;
  --wall:#ece5dd;
  --bubble-in:#ffffff;
  --bubble-out:#dcf8c6;
  --text:#111b21;
  --muted:#667781;
  --accent:#00a884;
  --tick:#53bdeb;
}
html,body{margin:0;width:100%;height:100%}
body{background:#d9dbd5;color:var(--text);font-family:Roboto,"Segoe UI",Helvetica,Arial,sans-serif;font-size:15px;display:flex;align-items:center;justify-content:center}
#chat-container{width:480px;height:calc(100dvh - 40px);max-height:920px;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.18);
  background-color:var(--wall);
  /* Padrão de desenhos próprio (notas musicais, corações, estrelas), discreto como o papel de parede do chat. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23d8cfc4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 38V18l14-4v20'/%3E%3Ccircle cx='16' cy='38' r='4'/%3E%3Ccircle cx='30' cy='34' r='4'/%3E%3Cpath d='M98 30c-4-6-14-3-12 4 1 4 12 11 12 11s11-7 12-11c2-7-8-10-12-4z'/%3E%3Cpath d='M136 14l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z'/%3E%3Cpath d='M44 92v-18'/%3E%3Ccircle cx='40' cy='92' r='4'/%3E%3Cpath d='M44 74c4 2 8 4 8 9'/%3E%3Ccircle cx='120' cy='96' r='12'/%3E%3Cpath d='M114 92h.01M126 92h.01M114 100c3 3 9 3 12 0'/%3E%3Cpath d='M76 130l2 5 5 1-4 3 1 5-4-3-4 3 1-5-4-3 5-1z'/%3E%3Cpath d='M18 136c4-6 14-6 18 0'/%3E%3Cpath d='M142 132c-3-4-9-2-8 3 1 3 8 7 8 7s7-4 8-7c1-5-5-7-8-3z'/%3E%3Cpath d='M70 60a8 8 0 1 0 16 0'/%3E%3C/svg%3E");}
#chat-header{height:60px;min-height:60px;padding:0 10px 0 6px;display:flex;align-items:center;gap:8px;background:var(--header);color:#fff;z-index:1}
.icon{width:24px;height:24px;fill:currentColor;flex-shrink:0}
.icon.back{width:24px;height:24px}
#header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;flex-shrink:0}
.profile-info{flex:1;min-width:0;padding-left:4px}
.profile-info h1{font-size:17px;line-height:21px;margin:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat-status{display:block;font-size:13px;line-height:17px;color:rgba(255,255,255,.85)}
#chat-status.active{font-style:italic}
.header-actions{display:flex;gap:20px;padding-right:4px}
#chat-body{flex:1;min-height:0;overflow-y:auto;padding:10px 14px 14px;scrollbar-width:none;overscroll-behavior:contain}
#chat-body::-webkit-scrollbar{display:none}
.day-chip{width:max-content;margin:4px auto 12px;padding:5px 12px;border-radius:8px;background:#e1f3fb;color:#54656f;font-size:12.5px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
#messages-container{display:flex;flex-direction:column;gap:4px}
.message{display:flex;flex-shrink:0}
.bot-message{justify-content:flex-start}
.user-message{justify-content:flex-end}
/* Espaço extra quando muda quem fala, como no app. */
.bot-message+.user-message,.user-message+.bot-message{margin-top:8px}
.bubble{position:relative;max-width:82%;padding:6px 9px 8px;line-height:20px;font-size:15px;border-radius:8px;overflow-wrap:anywhere;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bubble strong{font-weight:700}
.bot-bubble{background:var(--bubble-in)}
.user-bubble{background:var(--bubble-out)}
/* Rabinho do balão na primeira mensagem de cada sequência. */
.bot-message:first-child .bubble,.user-message+.bot-message .bubble{border-top-left-radius:0}
.bot-message:first-child .bubble::before,.user-message+.bot-message .bubble::before{content:"";position:absolute;top:0;left:-8px;border-top:0 solid transparent;border-right:8px solid var(--bubble-in);border-bottom:10px solid transparent}
.bot-message+.user-message .bubble{border-top-right-radius:0}
.bot-message+.user-message .bubble::before{content:"";position:absolute;top:0;right:-8px;border-left:8px solid var(--bubble-out);border-bottom:10px solid transparent}
.meta{float:right;margin:8px 0 -6px 10px;font-size:11px;line-height:15px;color:var(--muted);white-space:nowrap}
.ticks{margin-left:3px;color:var(--tick);letter-spacing:-3px;font-size:12px}
/* Áudio */
.audio-bubble{display:flex;align-items:center;gap:8px;width:300px;padding:8px 10px 6px}
.audio-avatar{position:relative;flex-shrink:0}
.audio-avatar img{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block}
.audio-mic{position:absolute;right:-4px;bottom:-2px;font-size:14px}
.audio-play{flex-shrink:0;width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:34px;box-shadow:none;cursor:pointer}
.audio-play:hover{background:rgba(0,0,0,.05)}
.audio-body{flex:1;min-width:0}
.audio-track{height:4px;margin:10px 0 8px;border-radius:2px;background:#d1d7db;cursor:pointer}
.audio-progress{width:0;height:100%;border-radius:2px;background:var(--accent)}
.audio-info{display:flex;justify-content:space-between;align-items:center}
.audio-time{font-size:11px;color:var(--muted)}
.audio-info .meta{float:none;margin:0}
/* Imagem */
.image-bubble{padding:3px;width:65%;max-width:260px}
.image-bubble img{display:block;width:100%;height:auto;border-radius:6px}
.image-bubble .meta{position:absolute;right:10px;bottom:8px;margin:0;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* Rodapé */
#chat-footer{padding:6px 8px 8px;flex-shrink:0}
#input-container{display:flex;flex-direction:column;gap:6px}
#input-container:not(:empty){margin-bottom:8px}
#input-container button{font:500 15px Roboto,"Segoe UI",Arial,sans-serif;color:var(--accent);background:#fff;border:0;border-radius:8px;min-height:44px;padding:10px 14px;line-height:20px;cursor:pointer;box-shadow:0 1px .5px rgba(11,20,26,.13)}
#input-container button:hover{background:#f5f6f6}
#input-container button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chat-form{display:flex;align-items:flex-end;gap:6px}
.input-pill{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;background:#fff;border-radius:24px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.pill-icon{color:#8696a0;width:24px;height:24px}
.input-pill input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 16px Roboto,"Segoe UI",Arial,sans-serif;color:var(--text);padding:12px 0}
.input-pill input::placeholder{color:#8696a0}
.input-pill input:disabled{cursor:not-allowed;-webkit-text-fill-color:#8696a0}
#chat-send{flex-shrink:0;width:48px;height:48px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#chat-send:disabled{cursor:not-allowed}
#chat-send .send{display:none}
#chat-send.has-text .send{display:block}
#chat-send.has-text .mic{display:none}
/* Checkout */
.checkout-button{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font:700 16px Roboto,"Segoe UI",Arial,sans-serif;color:#fff;background:#25d366;border-radius:8px;min-height:50px;padding:14px 16px;line-height:22px;box-shadow:0 4px 14px rgba(37,211,102,.35);animation:cta 1.6s ease-in-out infinite}
.checkout-button:hover{background:#1ebe5b}
.checkout-button:focus-visible{outline:2px solid var(--header);outline-offset:3px}
.checkout-note{display:block;text-align:center;color:var(--muted);font-size:12px;line-height:16px}
@keyframes cta{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media(max-width:520px){
  body{background:var(--wall)}
  #chat-container{width:100%;height:100dvh;max-height:none;border-radius:0;box-shadow:none}
  #chat-header{padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top))}
  #chat-footer{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .header-actions{gap:16px}
}
@media(prefers-reduced-motion:reduce){.checkout-button{animation:none}}
/* Indicador "digitando…" / "gravando áudio…" na conversa */
.typing-bubble{display:flex;align-items:center;gap:5px;width:max-content;height:38px;padding:0 14px}
.typing-bubble i{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:typing 1.2s infinite}
.typing-bubble i:nth-child(2){animation-delay:.16s}
.typing-bubble i:nth-child(3){animation-delay:.32s}
.typing-bubble.recording{gap:8px;font-size:13.5px;color:var(--muted);font-style:italic}
.rec-dot{width:8px;height:8px;border-radius:50%;background:#f15c6d;animation:blink 1s infinite}
@keyframes typing{0%,70%,100%{opacity:.45;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.typing-bubble i,.rec-dot{animation:none}}