*{box-sizing:border-box}
:root{--header:#202c33;--chat:#0b141a;--incoming:#202c33;--outgoing:#005c4b;--text:#e9edef;--muted:#8696a0;--accent:#00a884;--composer:#202c33;--bar:#111b21}
html,body{margin:0;width:100%;height:100%;max-width:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#050a0d;color:var(--text);-webkit-font-smoothing:antialiased}
button,input,a{font:inherit}button{-webkit-tap-highlight-color:transparent}
.app-shell{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:0}
.chat-app{width:min(820px,100%);max-width:100%;height:100dvh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--chat);box-shadow:0 0 36px rgba(0,0,0,.35)}
.chat-header{min-height:62px;display:flex;align-items:center;gap:7px;padding:max(7px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 7px max(4px,env(safe-area-inset-left));background:var(--header);border-bottom:1px solid #2f3b42;color:#fff;z-index:3;min-width:0}
.header-icon{width:34px;height:40px;border:0;background:transparent;color:#fff;display:grid;place-items:center;padding:0;cursor:default;flex:0 0 34px}.header-icon svg{width:22px;height:22px}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 40px;border:1px solid rgba(255,255,255,.15);background:#34434c}.avatar img{width:100%;height:100%;display:block;object-fit:cover}.profile-copy{min-width:0;flex:1}.profile-row{display:flex;align-items:center;gap:5px;min-width:0}.profile-row h1{margin:0;font-size:15px;font-weight:600;line-height:1.1;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.profile-copy p{margin:3px 0 0;font-size:11px;color:#aebac1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.verified,.verified svg{width:16px;height:16px;display:block;flex:none}.header-actions{display:flex;align-items:center;flex:0 0 auto}
.messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px max(6px,env(safe-area-inset-right)) 18px max(6px,env(safe-area-inset-left));background:#0b141a url('/assets/img/whatsapp-dark-wallpaper.png') center top/390px auto repeat;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.day-pill{width:max-content;margin:0 auto 14px;padding:6px 10px;border-radius:8px;background:#182229;color:#8696a0;font-size:11px;box-shadow:0 1px 1px rgba(0,0,0,.25)}.message-row{display:flex;width:100%;margin:3px 0}.incoming{justify-content:flex-start}.outgoing{justify-content:flex-end}.bubble{max-width:min(610px,88%);padding:8px 9px 7px;border-radius:8px;font-size:14px;line-height:1.43;box-shadow:0 1px 1px rgba(0,0,0,.25);overflow-wrap:anywhere;background:var(--incoming)}.incoming .bubble{border-top-left-radius:2px}.outgoing .bubble{background:var(--outgoing);border-top-right-radius:2px}.bubble-time{float:right;margin:6px 0 0 9px;color:#8d9ba4;font-size:10px;white-space:nowrap}.checks{color:#53bdeb;margin-left:3px;letter-spacing:-2px}.message-author{display:block;color:#53bdeb;font-size:11px;font-weight:700;margin-bottom:2px}
.media-card{width:min(430px,97%);margin:7px 0 12px;border-radius:8px;overflow:hidden;background:var(--incoming);box-shadow:0 1px 1px rgba(0,0,0,.25)}.media-image{display:block;width:100%;height:auto;object-fit:contain;background:#fff}.media-footer{padding:9px}.media-footer p{margin:0 0 8px;font-size:13px;line-height:1.4;color:#e5e9eb}.download-button{min-height:40px;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #33444e;border-radius:6px;background:#182229;color:#00c896;text-decoration:none;font-size:12.5px;font-weight:600}.download-button svg{width:17px;height:17px}
.quick-options{width:min(430px,97%);display:grid;gap:4px;margin:5px 0 12px}.quick-button{min-height:42px;border:1px solid #31414b;border-radius:7px;background:#1f2c34;color:#00c896;padding:8px 10px;font-size:12.5px;font-weight:600;cursor:pointer}.quick-button:disabled{opacity:.5}.sources-card{width:min(560px,97%);margin:5px 0 13px;padding:9px;border-radius:8px;background:#172128;border:1px solid #2a3942}.sources-title{font-size:11px;color:#aebac1;margin-bottom:6px;font-weight:600}.source-link{display:block;color:#53bdeb;text-decoration:none;font-size:11px;line-height:1.35;padding:5px 0;border-top:1px solid rgba(255,255,255,.05);overflow-wrap:anywhere}
.typing-row{display:none}.typing-row.show{display:flex}.typing-dots{display:flex;align-items:center;gap:4px;min-height:17px}.typing-dots i{width:6px;height:6px;border-radius:50%;background:#87969f;animation:dot 1.1s infinite}.typing-dots i:nth-child(2){animation-delay:.14s}.typing-dots i:nth-child(3){animation-delay:.28s}@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.chat-error{width:min(430px,97%);margin:7px 0 12px;padding:9px 10px;border-radius:7px;background:#3c2225;color:#ffd9dd;border:1px solid #654047;font-size:12px}
.composer{display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:end;gap:7px;padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:var(--bar);border-top:1px solid #1f2c34;min-width:0}.composer-box{min-width:0;min-height:46px;display:grid;grid-template-columns:38px minmax(0,1fr) 38px 38px;align-items:center;border-radius:24px;background:var(--composer)}.composer-icon{width:38px;height:44px;border:0;background:transparent;color:#8696a0;display:grid;place-items:center;padding:0}.composer-icon svg{width:22px;height:22px}.message-input{min-width:0;width:100%;height:44px;border:0;outline:0;background:transparent;color:#e9edef;padding:0 4px;font-size:14px}.message-input::placeholder{color:#8696a0}.send-circle{width:46px;height:46px;border:0;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center;padding:0;align-self:end}.send-circle svg{width:20px;height:20px}.send-svg{display:none}.send-circle.can-send .mic-svg{display:none}.send-circle.can-send .send-svg{display:block}
@media(min-width:821px){.app-shell{padding:12px}.chat-app{height:min(900px,calc(100dvh - 24px));min-height:0;border-radius:12px}}
@media(max-width:480px){.chat-header{min-height:58px}.avatar{width:38px;height:38px;flex-basis:38px}.profile-row h1{font-size:14.5px}.messages{padding:8px 5px 14px;background-size:350px auto}.bubble{max-width:92%;font-size:13.5px}.media-card,.quick-options,.sources-card,.chat-error{width:98%;max-width:none}.media-footer{padding:8px}.composer{grid-template-columns:minmax(0,1fr) 44px;gap:5px}.send-circle{width:44px;height:44px}.composer-box{grid-template-columns:36px minmax(0,1fr) 36px 36px}.composer-icon{width:36px}.message-input{font-size:16px}}
@media(max-width:360px){.camera-tool{display:none}.composer-box{grid-template-columns:34px minmax(0,1fr) 34px}.composer-icon{width:34px}.chat-header{gap:4px}.header-actions .header-icon:first-child{display:none}}


/* V6 public chat polish */
html,body{overflow:hidden}
body{background:#0a1014!important}
.messages{
  background-color:#0b141a!important;
  background-image:url('/assets/img/whatsapp-dark-wallpaper.png')!important;
  background-repeat:repeat!important;
  background-position:center top!important;
  background-size:420px auto!important;
}
.chat-app{height:min(920px,calc(100dvh - 20px))!important;max-height:calc(100dvh - 20px)!important}
.composer{padding-left:max(7px,env(safe-area-inset-left))!important;padding-right:max(7px,env(safe-area-inset-right))!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important;flex:none!important}
.composer-box{min-width:0!important}.message-input{min-width:0!important;width:100%!important}.send-circle{flex:0 0 46px!important}
@media(max-width:820px){.app-shell{padding:0!important}.chat-app{width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}.messages{background-size:360px auto!important}.composer{padding-left:max(5px,env(safe-area-inset-left))!important;padding-right:max(5px,env(safe-area-inset-right))!important}.send-circle{flex-basis:44px!important;width:44px!important;height:44px!important}.composer-box{overflow:hidden!important}.optional-tool{flex:0 0 36px!important}}
@media(max-width:350px){.camera-tool{display:none!important}.composer-icon{width:34px!important}}
@media(min-width:821px){.app-shell{padding:10px!important;align-items:center!important}.chat-app{border-radius:12px!important}}

/* V7 — templates informativos */
.message-text{white-space:pre-wrap}
.message-text strong{font-weight:700;color:#f3f6f8}
.message-footer{display:block;clear:both;margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.07);font-size:10.5px;line-height:1.35;color:#8696a0}



/* =========================================================
   V8.1 — STAND BY CORRIGIDO
   ========================================================= */

/*
 * O Stand by bloqueia somente interação/IA.
 * O desenho da conversa continua inteiro.
 */
.composer-locked .message-input{
  cursor:default!important;
  opacity:1!important;
  -webkit-text-fill-color:#8696a0!important;
}

.composer-locked .composer-icon,
.composer-locked .send-circle{
  cursor:default!important;
}

/*
 * Garante que nenhuma faixa de cor/overlay apareça entre
 * wallpaper e rodapé do composer.
 */
.messages{
  background-color:#0b141a!important;
  background-image:url('/assets/img/whatsapp-dark-wallpaper.png')!important;
  background-repeat:repeat!important;
  background-position:center top!important;
  background-size:420px auto!important;
  border-bottom:0!important;
  box-shadow:inset 0 -2px 0 #0b141a!important;
}

.composer{
  background:#111b21!important;
  border-top:1px solid #1f2c34!important;
  box-shadow:none!important;
}

/* Status visual permanece como conversa online. */
.profile-copy p{
  color:#aebac1!important;
}

/*
 * Nada de tratamento especial que remova o rodapé no Stand by.
 * Mantém sempre:
 * emoji + campo + clipe + câmera + microfone.
 */
@media(max-width:820px){
  .messages{
    background-size:360px auto!important;
  }
}


/* =========================================================
   V8.2 — TUTORIAL DO DOWNLOAD
   ========================================================= */

.download-coach{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  gap:8px;

  max-height:0;
  opacity:0;
  overflow:hidden;

  margin:0;
  padding:0 10px;

  border:1px solid transparent;
  border-radius:8px;

  background:#17242b;
  color:#e9edef;

  transform:translateY(-6px);
  pointer-events:none;

  transition:
    opacity .22s ease,
    transform .22s ease,
    max-height .25s ease,
    margin .25s ease,
    padding .25s ease;
}

.download-coach.show{
  max-height:78px;
  opacity:1;

  margin:8px 0 0;
  padding:8px 10px;

  border-color:#2d454f;

  transform:translateY(0);
}

.download-coach-arrow{
  display:grid;
  place-items:center;

  width:24px;
  height:24px;

  border-radius:50%;

  background:#00a884;
  color:#07231d;

  font-size:17px;
  font-weight:800;

  animation:downloadArrow 1s ease-in-out infinite;
}

.download-coach b{
  display:block;

  margin:0 0 2px;

  font-size:12px;
  font-weight:700;

  color:#f2f5f6;
}

.download-coach small{
  display:block;

  color:#aebac1;

  font-size:10.5px;
  line-height:1.35;
}

.download-button.tutorial-focus{
  position:relative;

  border-color:#00a884!important;

  animation:
    downloadPulse 1.05s ease-in-out 3;
}

@keyframes downloadPulse{
  0%,100%{
    box-shadow:
      0 0 0 0 rgba(0,168,132,0);
  }

  50%{
    box-shadow:
      0 0 0 7px rgba(0,168,132,.18);
  }
}

@keyframes downloadArrow{
  0%,100%{
    transform:translateY(-1px);
  }

  50%{
    transform:translateY(3px);
  }
}

@media (prefers-reduced-motion:reduce){
  .download-coach,
  .download-button.tutorial-focus,
  .download-coach-arrow{
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

@media(max-width:480px){
  .download-coach.show{
    margin-top:7px;
  }

  .download-coach b{
    font-size:11.5px;
  }

  .download-coach small{
    font-size:10px;
  }
}


/* =========================================================
   V8.3 — SPOTLIGHT NO BOTÃO SALVAR IMAGEM
   ========================================================= */

/* Remove o coach/dropdown da V8.2 caso algum HTML antigo permaneça em cache. */
.download-coach{
  display:none!important;
}

.phone-shell{
  position:relative;
}

.phone-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.38);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
  z-index:2;
}

body.tutorial-active .phone-shell::after{
  opacity:1;
}

.download-button{
  position:relative;
  z-index:1;
}

.download-button.tutorial-focus{
  z-index:4!important;
  border-color:#14d9ad!important;
  background:rgba(7,94,84,.22)!important;
  color:#eafff9!important;
  transform:translateY(-1px) scale(1.01);
  box-shadow:
    0 0 0 2px rgba(20,217,173,.36),
    0 0 0 10px rgba(20,217,173,.08),
    0 16px 34px rgba(0,0,0,.45);
  animation:downloadSpotPulse 1.06s ease-in-out infinite;
}

.download-button.tutorial-focus svg{
  color:#14d9ad!important;
}

@keyframes downloadSpotPulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(20,217,173,.36),
      0 0 0 10px rgba(20,217,173,.08),
      0 16px 34px rgba(0,0,0,.45);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(20,217,173,.62),
      0 0 0 18px rgba(20,217,173,.12),
      0 16px 34px rgba(0,0,0,.50);
  }
}

@media (prefers-reduced-motion:reduce){
  .phone-shell::after,
  .download-button.tutorial-focus{
    transition:none!important;
    animation:none!important;
  }
}
