/* Aparência do widget é controlável via tema (Comercial → Chatbot → Tema),
 * lido em runtime por site/chatbot.js::applyTheme() que grava essas custom
 * properties em .site-chatbot. Toda regra abaixo usa var(--cb-x, PADRÃO) —
 * sem tema (ou campo não preenchido no tema), o PADRÃO é exatamente o visual
 * já publicado, então nada quebra pra quem nunca abriu o painel de tema. */
.site-chatbot{display:flex;flex-direction:column;height:var(--cb-container-max-height,520px);max-width:var(--cb-container-max-width,520px);margin:0 auto;background:var(--cb-container-bg,var(--bg-light-paper,#f7f6f3));color:var(--cb-container-text,var(--text-main,#2b2523));border-radius:var(--cb-container-radius,20px);box-shadow:var(--shadow-md,0 12px 32px rgba(0,0,0,.18));overflow:hidden;border:1px solid var(--cb-container-border,var(--glass-border-light,rgba(122,18,23,.12)));font-family:var(--cb-font,var(--font-sans,sans-serif))}
.site-chatbot-progress{height:4px;background:rgba(0,0,0,.06);flex:0 0 auto}
.site-chatbot-progress-fill{height:100%;width:0%;background:var(--cb-button-bg,var(--burgundy-primary,#1f2937));transition:width .35s ease}
.site-chatbot-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px}
.site-chatbot-bubble{max-width:80%;padding:11px 14px;font-size:14px;line-height:1.45;overflow-wrap:break-word;word-break:break-word;box-sizing:border-box;animation:site-chatbot-bubble-in .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes site-chatbot-bubble-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.site-chatbot-bubble.is-bot{position:relative;align-self:flex-start;margin-left:34px;background:var(--cb-bot-bubble-bg,var(--text-main,#2b2523));color:var(--cb-bot-bubble-text,#fff);border:var(--cb-bot-bubble-border,none);border-radius:var(--cb-bot-bubble-radius,16px);border-bottom-left-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,.12)}
/* Avatar do bot (padrão: marca do cliente, se configurada) — só na bolha mais recente do
 * bot (:last-child), igual ao Typebot: acompanha a conversa em vez de
 * repetir em toda bolha. Some sozinho quando uma bolha nova entra depois.
 * Desligado via tema: .no-bot-avatar remove o respiro e some com a bolinha. */
.site-chatbot-bubble.is-bot:last-child::before{content:'';position:absolute;left:-34px;bottom:0;width:26px;height:26px;border-radius:8px;background:#fff var(--cb-bot-avatar-url,none) center/70% no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.18);border:1px solid var(--glass-border-light,rgba(122,18,23,.12))}
.site-chatbot.no-bot-avatar .site-chatbot-bubble.is-bot{margin-left:0}
.site-chatbot.no-bot-avatar .site-chatbot-bubble.is-bot::before{content:none}
.site-chatbot-bubble.is-visitor{position:relative;align-self:flex-end;margin-right:34px;background:var(--cb-user-bubble-bg,var(--burgundy-primary,#1f2937));color:var(--cb-user-bubble-text,#fff);border:var(--cb-user-bubble-border,none);border-radius:var(--cb-user-bubble-radius,16px);border-bottom-right-radius:4px}
.site-chatbot-bubble.is-visitor::after{content:'';position:absolute;right:-34px;bottom:0;width:26px;height:26px;border-radius:8px;background:#fff var(--cb-user-avatar-url,none) center/70% no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.18);border:1px solid var(--glass-border-light,rgba(122,18,23,.12))}
.site-chatbot.no-user-avatar .site-chatbot-bubble.is-visitor{margin-right:0}
.site-chatbot.no-user-avatar .site-chatbot-bubble.is-visitor::after{content:none}
.site-chatbot-bubble.is-media{padding:6px;max-width:70%}
.site-chatbot-bubble.is-media img,.site-chatbot-bubble.is-media video{display:block;width:100%;border-radius:11px}
.site-chatbot-unavailable{padding:20px;text-align:center;color:var(--text-muted,#6e645e);font-size:13px}
.site-chatbot-footer{padding:14px 16px;border-top:1px solid var(--glass-border-light,rgba(122,18,23,.12));background:#fff}
.site-chatbot-bubble.is-typing{display:flex;align-items:center;gap:4px;padding:13px 14px}
.site-chatbot-bubble.is-typing span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);animation:site-chatbot-typing 1s infinite ease-in-out}
.site-chatbot-bubble.is-typing span:nth-child(2){animation-delay:.15s}
.site-chatbot-bubble.is-typing span:nth-child(3){animation-delay:.3s}
@keyframes site-chatbot-typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.site-chatbot-input-row{display:flex;gap:10px;align-items:center}
.site-chatbot-input-row input{flex:1;padding:12px 18px;border:var(--cb-input-border,1px solid var(--glass-border-light,rgba(122,18,23,.12)));border-radius:var(--cb-input-radius,999px);font-size:13px;background:var(--cb-input-bg,#fff);color:var(--cb-input-text,var(--text-main,#2b2523))}
.site-chatbot-input-row input::placeholder{color:var(--cb-input-placeholder,var(--text-muted,#9c928c))}
.site-chatbot-input-row input:focus{outline:none;border-color:var(--burgundy-primary,#1f2937)}
.site-chatbot-ddi{flex:0 0 auto;padding:12px 8px;border:var(--cb-input-border,1px solid var(--glass-border-light,rgba(122,18,23,.12)));border-radius:var(--cb-input-radius,999px);font-size:13px;background:var(--cb-input-bg,#fff);color:var(--cb-input-text,var(--text-main,#2b2523))}
/* Botão de enviar vira um círculo com ícone (SVG embutido); o texto original
 * ("Enviar"/"Enviando...") continua no DOM pra leitor de tela, só fica
 * visualmente escondido via font-size/color. */
.site-chatbot-input-row button{width:46px;height:46px;flex:0 0 46px;padding:0;border:var(--cb-button-border,none);border-radius:var(--cb-button-radius,50%);background:var(--cb-button-bg,var(--burgundy-primary,#1f2937)) var(--cb-send-icon,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 11l18-8-8 18-2.5-6.5L3 11z'/%3E%3C/svg%3E")) center/18px no-repeat;color:transparent;font-size:0;cursor:pointer;box-shadow:0 4px 10px rgba(122,18,23,.32);transition:transform .15s ease}
.site-chatbot-input-row button:hover{transform:scale(1.06)}
.site-chatbot-input-row button:disabled{opacity:.6;cursor:default;transform:none}
.site-chatbot-options{display:flex;flex-wrap:var(--cb-buttons-wrap,wrap);gap:8px;overflow-x:auto;padding-bottom:2px}
.site-chatbot-option{padding:9px 13px;border:var(--cb-button-border,1px solid var(--burgundy-primary,#1f2937));border-radius:var(--cb-button-radius,999px);background:var(--cb-button-bg,#fff);color:var(--cb-button-text,var(--burgundy-primary,#1f2937));font-size:12.5px;font-weight:700;cursor:pointer}
.site-chatbot-option:hover{filter:brightness(.93)}
.site-chatbot-option.is-selected{background:var(--burgundy-primary,#1f2937);color:#fff;box-shadow:inset 0 0 0 1px var(--burgundy-primary,#1f2937)}
.site-chatbot-choice-confirm{margin-top:10px;width:100%;padding:11px 16px;border:none;border-radius:var(--cb-button-radius,999px);background:var(--cb-button-bg,var(--burgundy-primary,#1f2937));color:var(--cb-button-text,#fff);font-size:13px;font-weight:700;cursor:pointer}
.site-chatbot-choice-confirm:disabled{opacity:.45;cursor:not-allowed}
.site-chatbot-options.is-image-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.site-chatbot-option.is-image{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;text-align:center}
.site-chatbot-option.is-image img{width:100%;height:80px;object-fit:cover;border-radius:8px}
.site-chatbot-cards{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.site-chatbot-card{flex:0 0 200px;scroll-snap-align:start;border:1px solid var(--glass-border-light,rgba(122,18,23,.12));border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.site-chatbot-card img{width:100%;height:110px;object-fit:cover}
.site-chatbot-card-body{padding:10px 12px;flex:1}
.site-chatbot-card-body b{display:block;font-size:13px;color:var(--text-main,#2b2523)}
.site-chatbot-card-body p{margin:5px 0 0;font-size:11.5px;color:var(--text-muted,#6e645e)}
.site-chatbot-card-btn{margin:0 12px 12px;padding:9px;border:var(--cb-button-border,none);border-radius:9px;background:var(--cb-button-bg,var(--burgundy-primary,#1f2937));color:var(--cb-button-text,#fff);font-weight:700;font-size:12px;cursor:pointer}
.site-chatbot-rating{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.site-chatbot-rating-btn{width:36px;height:36px;border-radius:var(--cb-button-radius,50%);border:var(--cb-button-border,1px solid var(--burgundy-primary,#1f2937));background:var(--cb-button-bg,#fff);color:var(--cb-button-text,var(--burgundy-primary,#1f2937));font-weight:800;cursor:pointer}
.site-chatbot-rating-btn:hover{filter:brightness(.93)}
.site-chatbot-rating-label{font-size:10.5px;color:var(--text-muted,#6e645e)}
@media(max-width:560px){.site-chatbot{height:min(var(--cb-container-max-height,520px),460px);border-radius:14px}}