@import url(https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css);

/* ---------- Contenedor principal ---------- */
chatty,chatty *{box-sizing:border-box;font-family:Ubuntu,sans-serif}
chatty{font-size:16px;z-index:100000;transition:1s;position:fixed;bottom:12px;right:12px;background:#efefef;border-radius:5px;width:100%;max-width:450px;padding:35px 12px;border:1px solid #ccc}
chatty history{border:1px solid #ccc;background:#fff;padding:12px;display:block;margin-bottom:12px;border-radius:8px;min-height:100px;height:calc(100vh - 200px);overflow:auto}
chatty user{background:#fff;display:flex;border-radius:50px;width:100%}
chatty input{padding:12px 21px!important;width:calc(100% - 50px)!important;height:50px!important;border:none!important;border-radius:50px 5px 5px 50px!important}
chatty input:disabled{opacity:.6}
#chatty_send{width:50px;padding:12px;border-radius:50px;cursor:pointer}
#chatty_send:hover{background:#ccc}
#chatty_send path{stroke-width:0;fill:#ddd}
#chatty_send:hover path{fill:#666}

/* ---------- Burbujas ---------- */
chatty timestamp{display:block;font-size:12px;margin:12px 0 4px 0;color:rgba(0,0,0,.5)}
answer,question{width:100%;display:block}
answer>div,question>div{width:75%;padding:12px;border-radius:8px;margin-bottom:12px;font-weight:400}
question>div{float:right;background:#00ceff}
answer>div{margin-left:40px;float:left;background:#ddd}
answer>div::before{content:"";background-image:url(avatar.png);width:30px;height:30px;background-position:center;background-size:contain;background-repeat:no-repeat;float:left;margin-left:-53px}
chatty img{margin:4px;border-radius:5px;width:100%}
chatty history iframe{border-radius:8px;width:100%;max-height:300px;margin-bottom:12px}

/* ---------- Introducción ---------- */
chatty intro{margin-bottom:21px;display:block;text-align:center}
chatty intro div{background:#EE7510;display:block;border-radius:50px;padding:8px;margin-bottom:5px;color:#fff;margin-top:68px}
chatty intro div img{display:block;margin:-68px auto 12px auto}
chatty intro button{background:#999;color:#fff;border-radius:50px;padding:8px 21px;display:block;width:fit-content;border:none;margin:5px auto;cursor:pointer}
chatty intro button:hover{background:#777}

/* ---------- Redes sociales ---------- */
sociallink{display:flex;text-align:center;margin:21px auto;width:100%;padding:12px}
sociallink a{background:#ddd;color:#999;padding:12px;border-radius:5px;margin:5px}
sociallink a:hover{background:#999;color:#efefef}

/* ---------- Indicador "escribiendo" ---------- */
chatty answering{display:none;align-items:center;gap:6px;color:#666;background:#ddd;width:fit-content;max-width:70%;min-height:30px;padding:4px 16px;border-radius:50px;margin:-46px 0 26px 12px;font-size:14px}
.chatty-typing-dots{display:inline-flex;gap:4px;align-items:center}
.chatty-typing-dots i{width:7px;height:7px;border-radius:50%;background:#888;display:inline-block;animation:chattyBlink 1.2s infinite both}
.chatty-typing-dots i:nth-child(2){animation-delay:.2s}
.chatty-typing-dots i:nth-child(3){animation-delay:.4s}
@keyframes chattyBlink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chatty-typing-text{animation:chattyPulse 1.4s infinite}
@keyframes chattyPulse{0%,100%{opacity:.45}50%{opacity:1}}
.chatty-typing-gif{height:28px!important;width:auto!important;margin:0!important;border-radius:0!important}

/* ---------- Minimizar / nueva conversación ---------- */
minimize{position:absolute;margin-top:-42px;border:1px solid #ccc;padding:12px 18px;font-size:20px;margin-left:-29px;font-weight:900;border-radius:50px;background:#fff;cursor:pointer;color:#666}
minimize:hover{background:#ccc}
chatty online{display:none}
chatty.minimized online{display:block;cursor:pointer}
chatty.minimized{max-width:250px;padding:12px 12px 0 12px}
chatty online img{width:20px!important;vertical-align:middle;display:inline-block!important}
chatty online span{line-height:48px;float:right;color:#08c308;font-size:48px;margin-top:-12px;text-shadow:0 1px #fff,0 -1px #fff,1px 0 #fff,-1px 0 #fff}
chatty.minimized history,chatty.minimized minimize,chatty.minimized n,chatty.minimized user,chatty.minimized answering{display:none}
n{position:absolute;margin-top:-64px;padding:10px;background:#ffffffBB;width:426px;border-radius:0 0 5px 5px;text-align:center;display:none}
n button{border:none;border-radius:50px;padding:8px 12px;background:#999;cursor:pointer}
n button:hover{background:#666;color:#fff}

/* ---------- Tarjetas de producto (formato fila) ---------- */
.chatty-product-card{display:flex;align-items:center;width:100%;margin:6px 0;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.1);background:#fff;border:1px solid #eee;transition:transform .15s,box-shadow .15s}
.chatty-product-card:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.15)}
.chatty-product-card a{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 4px 8px 8px;text-decoration:none;color:inherit}
.chatty-add-cart{flex:0 0 auto;width:38px;height:38px;margin:0 10px 0 4px;border:none;border-radius:50%;background:#EE7510;color:#fff;font-size:17px;line-height:1;cursor:pointer;transition:background .15s;padding:0}
.chatty-add-cart:hover{background:#c7610b}
.chatty-add-cart.loading{opacity:.6;pointer-events:none}
.chatty-add-cart.added{background:#10b318}
.chatty-product-card img{width:56px;height:56px;object-fit:cover;flex:0 0 56px;display:block;margin:0;border-radius:8px}
.chatty-product-noimg{width:56px;height:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:center;font-size:24px;background:#f2f2f5;border-radius:8px}
.chatty-product-info{flex:1;min-width:0;text-align:left}
.chatty-product-info strong{display:block;font-size:13px;line-height:1.3;color:#333;margin-bottom:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chatty-product-info span{display:block;font-size:14px;color:#EE7510;font-weight:700}
.chatty-product-go{flex:0 0 auto;font-size:26px;line-height:1;color:#bbb;font-weight:700}
.chatty-product-card:hover .chatty-product-go{color:#EE7510}

/* ---------- Listas y títulos dentro de respuestas ---------- */
answer ul{margin:6px 0 6px 4px;padding-left:18px}
answer li{margin-bottom:4px;list-style:disc}
answer li .chatty-product-card{margin:4px 0}
answer h1,answer h2,answer h3{font-size:16px;margin:10px 0 4px;line-height:1.3}

/* ---------- Mapa ---------- */
.chatty-map{position:relative;width:100%;margin:12px 0;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.chatty-map iframe{display:block;margin-bottom:0}
.chatty-map-info{padding:12px;background:#f8f9fa;border-top:1px solid #dee2e6;font-size:14px}
.chatty-map-info>strong{display:block;margin-bottom:8px;color:#495057}
.chatty-map-info div{margin-bottom:6px}

/* ---------- Formularios interactivos (quiz) ---------- */
.chatty-quiz{background:#fff;border:1px solid #e2e2e6;border-radius:12px;padding:21px;margin:8px 0 16px 0;box-shadow:0 2px 10px rgba(0,0,0,.08);text-align:center}
.chatty-quiz-step{font-size:11px;letter-spacing:1px;color:#999;margin-bottom:8px}
.chatty-quiz-title{font-size:20px;font-weight:700;color:#222;margin-bottom:4px}
.chatty-quiz-sub{font-size:14px;color:#999;margin-bottom:16px}
.chatty-quiz-opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0}
.chatty-quiz-opt{background:#fff;border:1px solid #ddd;border-radius:10px;padding:10px 22px;font-size:16px;cursor:pointer;color:#333;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:all .15s}
.chatty-quiz-opt:hover{border-color:#8a87a5}
.chatty-quiz-opt.selected{background:#807CA1;border-color:#807CA1;color:#fff}
.chatty-quiz-input{display:block;width:85%;margin:10px auto 0;padding:10px 16px;border:1px solid #ddd;border-radius:10px;font-size:15px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.chatty-quiz-input:focus{outline:none;border-color:#807CA1}
.chatty-quiz-next{display:block;margin-left:auto;margin-top:12px;background:#243B8F;color:#fff;border:none;border-radius:8px;padding:10px 26px;font-size:16px;cursor:pointer;transition:background .15s}
.chatty-quiz-next:hover{background:#1a2c6d}
.chatty-quiz.done{opacity:.6;pointer-events:none}
.chatty-quiz.done .chatty-quiz-next{visibility:hidden}
.chatty-quiz-shake{animation:chattyShake .4s}
@keyframes chattyShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- Responsive ---------- */
@media only screen and (max-width:768px){
  chatty{left:50%;transform:translate(-50%);right:auto;max-width:95%}
  minimize{margin-left:-17px;margin-top:-68px}
  chatty.minimized{right:12px;transform:none;left:auto}
  n{max-width:93%}
}