/* ==========================================================================
   RitIA — conversa simulada com a Rita (conversa.html)
   Mobile: tela cheia estilo WhatsApp. Desktop (>=900px): painel de venda + chat (estilo WhatsApp Web).
   ========================================================================== */
@font-face{font-family:"Roboto"; font-weight:400; font-display:swap; src:url("../assets/fonts/Roboto-Regular.ttf") format("truetype");}
@font-face{font-family:"Roboto"; font-weight:500; font-display:swap; src:url("../assets/fonts/Roboto-Medium.ttf") format("truetype");}
@font-face{font-family:"Roboto"; font-weight:700; font-display:swap; src:url("../assets/fonts/Roboto-Bold.ttf") format("truetype");}
@font-face{font-family:"Roboto"; font-weight:900; font-display:swap; src:url("../assets/fonts/Roboto-Black.ttf") format("truetype");}

:root{
  color-scheme:only light;
  --wa-header:#075E54; --wa-header-dark:#054c43;
  --wa-bg:#e6ded3;
  --wa-out:#d9fdd3; --wa-in:#ffffff;
  --ink:#111b21; --sub:#667781; --time:#8696a0; --link:#027eb5;
  --whatsapp:#25d366; --whatsapp-dark:#1da851;
  --navy-950:#060d1a; --navy-900:#0a1526; --navy-800:#101f38;
  --cyan-500:#0092ca; --cyan-400:#3eb7d9; --blue-600:#2b5da9;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0; font-family:"Roboto",Arial,sans-serif; color:var(--ink); background:var(--wa-bg); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}
button{font-family:inherit;}

.app{height:100dvh; display:flex;}

/* ---------- Painel de venda (só desktop) ---------- */
.pitch{display:none;}

/* ---------- Painel do chat ---------- */
.chat-panel{flex:1; min-width:0; display:flex; flex-direction:column; height:100%; background:var(--wa-bg); position:relative;}
.statusbar{background:var(--wa-header-dark); color:#fff; display:flex; justify-content:space-between; align-items:center; padding:6px 16px; padding-top:calc(6px + env(safe-area-inset-top,0px)); font-size:12px; font-weight:700; letter-spacing:.02em; flex:none;}
.statusicons{display:flex; align-items:center; gap:5px;}
.statusicons svg{width:15px; height:15px; fill:#fff;}
.wa-head{background:var(--wa-header); color:#fff; display:flex; align-items:center; gap:12px; padding:10px 14px; flex:none;}
.wa-head .back{display:flex; align-items:center; margin-right:-4px;}
.avatar{position:relative; width:38px; height:38px; border-radius:50%; background:var(--navy-900); display:flex; align-items:center; justify-content:center; flex:none;}
.avatar::after{content:""; position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; background:var(--whatsapp); border:2px solid var(--wa-header); border-radius:50%;}
.who{flex:1; min-width:0;}
.who .name{font-weight:700; font-size:16px;}
.who .status{font-size:12.5px; color:rgba(255,255,255,.78); min-height:15px;}
.skip{background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;}
.skip:hover{background:rgba(255,255,255,.24);}
.skip[hidden]{display:none;}

.chat{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 12px 18px; scroll-behavior:smooth;
  background-color:var(--wa-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23d3c9b6' stroke-width='1.4'%3E%3Cpath d='M14 18 q5 -9 10 0 q5 9 10 0'/%3E%3Cpath d='M48 58 q8 8 16 0'/%3E%3Cpath d='M8 68 l6 6 m-6 0 l6 -6'/%3E%3Cpath d='M74 44 q4 6 0 12'/%3E%3Cpath d='M35 10 q3 5 -2 7 q-5 2 -2 7'/%3E%3Cpath d='M80 78 q5 -3 5 -8'/%3E%3Cpath d='M55 32 l4 4 m0 -4 l-4 4'/%3E%3Cpath d='M20 50 q6 2 4 8'/%3E%3C/g%3E%3Cg fill='%23d3c9b6'%3E%3Ccircle cx='62' cy='14' r='2.6'/%3E%3Ccircle cx='30' cy='72' r='2'/%3E%3Ccircle cx='6' cy='42' r='2'/%3E%3C/g%3E%3C/svg%3E");}
.thread{display:flex; flex-direction:column; gap:4px; max-width:760px; margin:0 auto;}

.row{display:flex; margin:3px 0; animation:pop .28s ease both;}
.row.out{justify-content:flex-end;}
.row.in{justify-content:flex-start;}
.row.center{justify-content:center;}
@keyframes pop{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

.bubble{max-width:82%; padding:8px 10px 6px; border-radius:8px; font-size:14.5px; line-height:1.45; box-shadow:0 1px 1px rgba(0,0,0,.08); position:relative;}
.bubble.out{background:var(--wa-out); border-top-right-radius:2px;}
.bubble.out::before{content:""; position:absolute; top:0; right:-6px; border-top:6px solid var(--wa-out); border-right:6px solid transparent;}
.bubble.in{background:var(--wa-in); border-top-left-radius:2px;}
.bubble.in::before{content:""; position:absolute; top:0; left:-6px; border-top:6px solid var(--wa-in); border-left:6px solid transparent;}
.bubble.in.cont::before, .bubble.out.cont::before{display:none;}
.bubble.in.cont{border-top-left-radius:8px;} .bubble.out.cont{border-top-right-radius:8px;}
.bubble b{font-weight:700;}
.bubble time{display:flex; justify-content:flex-end; align-items:center; gap:3px; font-size:10.5px; color:var(--time); margin-top:3px;}
.bubble time svg{width:14px; height:14px;}
.bubble .viz{width:100%; height:auto; margin-top:8px;}
.bubble.has-viz{width:300px;}

/* CTA dentro do balão (estilo botão de WhatsApp Business) */
.bubble-ctas{margin:8px -10px -6px; border-top:1px solid #e9edef;}
.bubble-cta{display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 10px; color:var(--link); font-size:14.5px; font-weight:500; border-bottom:1px solid #e9edef;}
.bubble-cta:last-child{border-bottom:0;}
.bubble-cta:hover{background:#f5f6f6;}
.bubble-cta svg{width:17px; height:17px; flex:none;}
.bubble-cta.primary{color:#fff; background:var(--whatsapp); border-radius:0 0 8px 8px; font-weight:700;}
.bubble-cta.primary:hover{background:var(--whatsapp-dark);}
.bubble time + .bubble-ctas{margin-top:6px;}

.sys{background:#fff5c4; color:#54656f; font-size:12px; line-height:1.45; text-align:center; padding:6px 12px; border-radius:8px; margin:6px auto 10px; max-width:88%; box-shadow:0 1px 1px rgba(0,0,0,.06);}
.gap-divider{background:#e1f0f7; color:#5b7083; font-size:11.5px; font-weight:500; padding:5px 12px; border-radius:8px; margin:8px auto; box-shadow:0 1px 1px rgba(0,0,0,.06);}

.typing{display:inline-flex; gap:4px; padding:12px 14px;}
.typing span{width:7px; height:7px; border-radius:50%; background:#9aa6ad; animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.3;} 40%{opacity:1;}}

/* Respostas rápidas (o usuário escolhe) */
.quick{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:10px 0 4px; animation:pop .28s ease both;}
.quick-label{width:100%; text-align:right; font-size:11.5px; color:var(--sub); margin-bottom:-2px;}
.quick button{background:#fff; color:var(--link); border:1px solid #cfe3ec; border-radius:18px; padding:9px 14px; font-size:14px; font-weight:500; cursor:pointer; box-shadow:0 1px 1px rgba(0,0,0,.06); text-align:left;}
.quick button:hover{background:#f0f9fc; border-color:var(--cyan-400);}
.quick button.go{background:var(--whatsapp); border-color:var(--whatsapp); color:#fff; font-weight:700;}
.quick button.go:hover{background:var(--whatsapp-dark);}

.inputbar{flex:none; background:#f0f2f5; display:flex; align-items:center; gap:10px; padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(0,0,0,.06);}
.fake-input{flex:1; min-width:0; background:#fff; border-radius:22px; padding:11px 16px; color:var(--sub); font-size:14.5px; display:flex; align-items:center; gap:10px; white-space:nowrap; overflow:hidden;}
.fake-input span{overflow:hidden; text-overflow:ellipsis; direction:ltr;}
.fake-input svg{width:20px; height:20px; stroke:var(--sub); fill:none; stroke-width:1.8; flex:none;}
.send{width:44px; height:44px; border-radius:50%; background:var(--whatsapp); display:flex; align-items:center; justify-content:center; flex:none;}
.send svg{width:20px; height:20px; fill:#fff;}
.inputbar:hover .send{background:var(--whatsapp-dark);}
.inputbar.is-typing .fake-input span{color:var(--ink);}
.inputbar.is-typing .fake-input span::after{content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--cyan-500); animation:caret .8s steps(1) infinite;}
.inputbar.is-sending .send{transform:scale(.86); background:var(--whatsapp-dark);}
.send{transition:transform .15s ease, background .15s ease;}
@keyframes caret{50%{opacity:0;}}
.bubble time .ticks{color:#8696a0; transition:color .25s ease;}
.bubble time .ticks.read{color:#53bdeb;}

/* ---------- Desktop: estilo WhatsApp Web ---------- */
@media(min-width:900px){
  body{background:#d1d7db;}
  body::before{content:""; position:fixed; inset:0 0 auto 0; height:200px; background:linear-gradient(135deg,var(--navy-950),var(--navy-800)); z-index:0;}
  .app{position:relative; z-index:1; max-width:1240px; height:calc(100dvh - 48px); margin:24px auto; padding:0 24px; gap:24px; display:grid; grid-template-columns:minmax(0,1fr) 420px;}
  .statusbar{display:none;}
  .chat-panel{border-radius:14px; overflow:hidden; box-shadow:0 20px 60px -20px rgba(6,13,26,.45);}
  .pitch{display:flex; flex-direction:column; justify-content:center; background:linear-gradient(165deg,var(--navy-900),var(--navy-800)); color:#fff; border-radius:14px; padding:48px 52px; overflow-y:auto; box-shadow:0 20px 60px -20px rgba(6,13,26,.45);}
}
@media(min-width:1200px){ .app{grid-template-columns:minmax(0,1fr) 460px;} }

.pitch .logo{height:32px; width:auto; margin-bottom:34px;}
.pitch .eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-400);}
.pitch .eyebrow::before{content:""; width:20px; height:2px; background:currentColor;}
.pitch h1{font-size:42px; font-weight:900; line-height:1.12; margin:14px 0 16px; max-width:560px;}
.pitch h1 em{font-style:normal; color:var(--cyan-400);}
.pitch .lead{font-size:16.5px; line-height:1.65; color:rgba(255,255,255,.75); max-width:520px; margin:0 0 24px;}
.pitch ul{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px;}
.pitch li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; color:rgba(255,255,255,.88);}
.pitch li svg{width:20px; height:20px; flex:none; stroke:var(--cyan-400); fill:none; stroke-width:2.4; margin-top:1px;}
.pitch-price{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:520px; padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); margin-bottom:26px;}
.pitch-price p{margin:0; font-size:14px; color:rgba(255,255,255,.65);}
.pitch-price b{display:block; font-size:22px; font-weight:900; color:#fff;}
.pitch-price a{color:var(--cyan-400); font-weight:700; font-size:14px; border-bottom:1px solid rgba(62,183,217,.4);}
.pitch-actions{display:flex; gap:12px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 26px; border-radius:999px; font-weight:700; font-size:15px; white-space:nowrap;}
.btn-whatsapp{background:var(--whatsapp); color:#fff;}
.btn-whatsapp:hover{background:var(--whatsapp-dark);}
.btn-ghost{border:1px solid rgba(255,255,255,.28); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.channel-note{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 0; font-size:13px; color:rgba(255,255,255,.6);}
.channel-note b{color:#fff; font-weight:500;}
.channel-note .arrow{color:var(--cyan-400);}

@media(prefers-reduced-motion:reduce){ .row,.quick{animation:none;} .chat{scroll-behavior:auto;} .typing span{animation:none; opacity:.6;} }

/* Prévia de link (igual ao WhatsApp) — leva ao site clássico */
.link-preview{display:block; margin:-4px -6px 8px; background:#f5f6f6; border-radius:6px; overflow:hidden; border-left:3px solid var(--cyan-500);}
.link-preview:hover{background:#eef0f1;}
.link-preview img{width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover;}
.lp-body{display:block; padding:8px 10px 9px;}
.lp-body b{display:block; font-size:13.5px; line-height:1.3; color:var(--ink);}
.lp-body span{display:block; font-size:12.5px; line-height:1.35; color:var(--sub); margin-top:2px;}
.lp-body small{display:block; font-size:11.5px; color:var(--time); margin-top:4px;}
.inline-link{color:var(--link); text-decoration:underline; word-break:break-all;}

/* Resumo da tabela comparativa dentro do balão */
.mini-cmp{width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px; line-height:1.25;}
.mini-cmp th, .mini-cmp td{padding:6px 3px; border-bottom:1px solid #e9edef; text-align:center; vertical-align:middle;}
.mini-cmp tr:first-child th{font-size:11px; color:var(--ink); border-bottom:2px solid #d8dee2;}
.mini-cmp tr:first-child th:nth-child(3){color:var(--cyan-500);}
.mini-cmp th:first-child{text-align:left; font-weight:500; color:var(--sub); padding-left:0;}
.mini-cmp td.ck{color:var(--cyan-500); font-weight:900; font-size:13px;}
.mini-cmp td.no{color:#b8c0c6;}
.mini-cmp td.pop{background:rgba(0,146,202,.06);}
.mini-cmp td:nth-child(3){background:rgba(0,146,202,.06);}
.mini-cmp tr:last-child th, .mini-cmp tr:last-child td{border-bottom:0; font-weight:700; color:var(--ink);}