/* TreeKnow AI 3.5 — launcher móvil sin tapar la compra, chat con teclado visible y reacciones elegantes. */
.tkai .tk35-launch-icon{display:none}
@media(max-width:767px){
 body .tkai{bottom:calc(var(--tk35-launch-bottom,160px) + env(safe-area-inset-bottom,0px))!important;right:14px!important;left:auto!important;z-index:10010!important}
 .tkai .tkai-launch{display:grid;place-items:center;box-sizing:border-box;width:48px;height:48px;min-width:48px;min-height:48px;padding:0!important;border:1px solid #3a4141;border-radius:50%;background:#171d1e;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.22);touch-action:manipulation}
 .tkai .tk35-launch-label{display:none!important}
 .tkai .tk35-launch-icon{display:block}
 .tkai.tk35-panel-open .tkai-launch{visibility:hidden;pointer-events:none}
 .tkai .tkai-panel{box-sizing:border-box;bottom:64px!important;left:auto!important;right:0!important;width:min(360px,calc(100vw - 24px))!important;height:min(480px,calc(100dvh - 240px))!important;max-height:calc(100dvh - 155px)!important;border-radius:19px}
 .tkai .tkai-header{flex:0 0 auto;min-height:58px;box-sizing:border-box}
 .tkai .tkai-close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;font-size:27px;touch-action:manipulation}
 .tkai .tkai-messages{flex:1 1 auto;min-height:0;overscroll-behavior:contain;overflow-y:auto}
 .tkai .tkai-form{flex:0 0 auto;min-height:60px;box-sizing:border-box;padding:8px 10px;align-items:stretch;gap:7px;background:#fff}
 .tkai .tkai-form input[name=question]{height:44px;min-height:44px;font-size:16px!important;line-height:1.3;padding:8px 10px;box-sizing:border-box;min-width:0}
 .tkai .tkai-form button[type=submit]{height:44px;min-width:43px;flex:0 0 43px}
 .tkai .tkai-form .tkai-attach{min-width:41px;width:41px;height:44px;flex:0 0 41px}
 .tkai .tkai-nudge{right:0;bottom:60px!important;max-width:min(290px,calc(100vw - 28px))}
 /* Cuando Android o una WebView abre el teclado: ventana anclada al viewport visible, con X e input siempre dentro. */
 body .tkai.tk35-keyboard-open .tkai-panel:not([hidden]){
  position:fixed!important;z-index:10011!important;
  top:calc(var(--tk35-vv-top,0px) + 10px)!important;
  bottom:auto!important;left:12px!important;right:12px!important;
  width:calc(100vw - 24px)!important;
  height:calc(var(--tk35-vv-height,400px) - 20px)!important;
  max-height:calc(var(--tk35-vv-height,400px) - 20px)!important;
  min-height:0!important;margin:0!important;transform:none!important;
  display:flex;flex-direction:column;overflow:hidden;
 }
 body .tkai.tk35-keyboard-open .tkai-header{min-height:49px;padding:7px 12px}
 body .tkai.tk35-keyboard-open .tkai-messages{padding:9px 12px;min-height:0;flex:1}
 body .tkai.tk35-keyboard-open .tkai-form{padding:6px 9px 8px;min-height:56px}
}
/* Mantener los datos del backend, pero no mostrar contadores en un chat privado 1:1. */
.tkai .tkai-heart{font-size:0!important;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:30px;padding:4px!important;border-radius:50%;color:#8c98a4}
.tkai .tkai-heart small{display:none!important}
.tkai .tkai-heart:before{content:"";display:block;width:21px;height:21px;background:currentColor;mask:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.8%204.9a5.5%205.5%200%200%200-7.8%200L12%205.9l-1-1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.3a5.5%205.5%200%200%200%200-7.8Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.25%22%2F%3E%3C%2Fsvg%3E) center/contain no-repeat;-webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.8%204.9a5.5%205.5%200%200%200-7.8%200L12%205.9l-1-1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.3a5.5%205.5%200%200%200%200-7.8Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.25%22%2F%3E%3C%2Fsvg%3E) center/contain no-repeat}
.tkai .tkai-heart.is-hearted,.tkai .tkai-heart-received{color:#e83d73}
.tkai .tkai-heart.is-hearted:before,.tkai .tkai-heart-received:before{mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.8%204.9a5.5%205.5%200%200%200-7.8%200L12%205.9l-1-1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.3a5.5%205.5%200%200%200%200-7.8Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E);-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.8%204.9a5.5%205.5%200%200%200-7.8%200L12%205.9l-1-1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.3a5.5%205.5%200%200%200%200-7.8Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E)}
.tkai .tkai-heart.heart-burst:before{animation:tk35-heart-bounce .48s cubic-bezier(.2,1.4,.42,1)}
.tkai .tkai-heart.heart-burst:after{content:'♥ ♥ ✦ ♥';position:absolute;inset:-8px -22px auto auto;font-size:11px;color:#ff6d93;letter-spacing:3px;pointer-events:none;animation:tk35-heart-particles .72s ease-out forwards}
@keyframes tk35-heart-bounce{0%{transform:scale(.76)}44%{transform:scale(1.5)}70%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes tk35-heart-particles{0%{transform:translateY(4px) scale(.55);opacity:0}28%{opacity:1}100%{transform:translateY(-32px) translateX(6px) scale(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){.tkai .tkai-heart.heart-burst:before,.tkai .tkai-heart.heart-burst:after{animation:none!important}}


/* V3.5.1 — posición NORMAL realmente anclada abajo, independiente de la altura del launcher.
   El modo teclado sigue dentro de visualViewport sin ocultar la X ni el formulario. */
@media(max-width:767px){
 body .tkai{bottom:calc(var(--tk351-launch-bottom,112px) + env(safe-area-inset-bottom,0px))!important;right:12px!important;}
 body .tkai .tkai-panel:not([hidden]){
  position:fixed!important;
  top:auto!important;
  bottom:calc(var(--tk351-panel-bottom,104px) + env(safe-area-inset-bottom,0px))!important;
  left:auto!important;right:12px!important;
  width:min(360px,calc(100vw - 24px))!important;
  height:min(480px,calc(100dvh - var(--tk351-panel-bottom,104px) - 32px))!important;
  max-height:calc(100dvh - var(--tk351-panel-bottom,104px) - 32px)!important;
  min-height:0!important;margin:0!important;transform:none!important;
  display:flex;flex-direction:column;overflow:hidden;
 }
 body .tkai.tk35-keyboard-open .tkai-panel:not([hidden]){
  position:fixed!important;
  top:calc(var(--tk35-vv-top,0px) + 8px)!important;
  bottom:auto!important;
  left:12px!important;right:12px!important;
  width:calc(100vw - 24px)!important;
  height:calc(var(--tk35-vv-height,400px) - 16px)!important;
  max-height:calc(var(--tk35-vv-height,400px) - 16px)!important;
  min-height:0!important;
 }
}

/* V3.5.1 — los corazones son reacciones por FUERA de la burbuja, no texto enviado.
   El espacio inferior separa las reacciones del siguiente mensaje. */
.tkai .tkai-messages{row-gap:12px}
.tkai .tkai-bubble{position:relative!important;overflow:visible!important;margin-bottom:12px!important}
.tkai .tkai-bubble .tkai-heart{
 position:absolute!important;right:7px!important;left:auto!important;
 bottom:-13px!important;top:auto!important;
 display:inline-flex!important;justify-content:center;align-items:center;
 box-sizing:border-box;min-width:24px!important;width:24px!important;
 min-height:24px!important;height:24px!important;
 padding:0!important;margin:0!important;
 background:#fff!important;border:1px solid #e2e7eb!important;
 border-radius:50%!important;box-shadow:0 2px 6px #0002!important;
 z-index:3!important;font-size:0!important;line-height:1!important;
 color:#8995a1;touch-action:manipulation;
}
.tkai .tkai-bubble .tkai-heart[hidden]{display:none!important}
.tkai .tkai-bubble .tkai-heart:before{width:16px!important;height:16px!important}
.tkai .tkai-bubble .tkai-heart.is-hearted,
.tkai .tkai-bubble .tkai-heart.tkai-heart-received{color:#ee3e72!important}
.tkai .tkai-bubble .tkai-heart:focus-visible{outline:2px solid #e83d73;outline-offset:3px}
/* Basado en los destellos de discussion.blade.php: pequeñas partículas y pop. */
.tkai .tkai-bubble .tkai-heart.heart-burst:before{animation:tk351-heart-pop .38s cubic-bezier(.18,.8,.28,1.25) both!important}
.tkai .tkai-bubble .tkai-heart.heart-burst:after{
 content:""!important;position:absolute!important;pointer-events:none!important;
 left:10px!important;top:9px!important;
 width:4px!important;height:4px!important;border-radius:50%!important;
 background:#ff668e!important;
 box-shadow:12px -8px #ffc4d4,-13px -7px #ff9db8,13px 9px #ff6b97,-10px 12px #ff9cce,1px -16px #ff6f98,-1px 17px #ffc5da!important;
 animation:tk351-heart-sparks .66s ease-out both!important;
}
@keyframes tk351-heart-pop{0%{transform:scale(.65)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes tk351-heart-sparks{0%{opacity:1;scale:.35;transform:rotate(-15deg)}100%{opacity:0;scale:2;transform:rotate(35deg)}}
@media(prefers-reduced-motion:reduce){.tkai .tkai-bubble .tkai-heart.heart-burst:before,.tkai .tkai-bubble .tkai-heart.heart-burst:after{animation:none!important}}


/* TreeKnow AI 3.5.2 — hearts outside the bubble, without a white circular badge. */
.tkai .tkai-messages .tkai-bubble{overflow:visible!important;position:relative!important;margin-bottom:15px!important}
.tkai .tkai-messages .tkai-bubble .tkai-heart{
 top:auto!important;bottom:-13px!important;z-index:4!important;
 min-width:24px!important;min-height:24px!important;width:24px!important;height:24px!important;
 padding:0!important;border:none!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
.tkai .tkai-messages .tkai-bubble.tkai-user .tkai-heart{left:5px!important;right:auto!important}
.tkai .tkai-messages .tkai-bubble.tkai-bot .tkai-heart{right:5px!important;left:auto!important}
.tkai .tkai-messages .tkai-bubble .tkai-heart:before{width:17px!important;height:17px!important}
.tkai .tkai-message-time{display:block;font-size:10px;line-height:1.3;opacity:.77;font-weight:500;
 margin-top:6px;white-space:nowrap;letter-spacing:.01em;pointer-events:none}
.tkai .tkai-bubble.tkai-user .tkai-message-time{text-align:right;color:#e1e7ec}
.tkai .tkai-bubble.tkai-bot .tkai-message-time{text-align:left;color:#667085}


/* TreeKnow AI 3.5.3 — posiciones laterales, sin solapamiento con la burbuja.
   IMPORTANTE: [hidden] debe prevalecer frente al display:flex de V3.5.2;
   de lo contrario cada mensaje propio aparenta haber recibido un corazón. */
.tkai .tkai-messages .tkai-bubble .tkai-heart{
  box-sizing:border-box!important;
  width:22px!important;height:22px!important;
  min-width:22px!important;min-height:22px!important;
  top:auto!important;bottom:5px!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  margin:0!important;padding:0!important;
}
/* Mensaje propio oscuro a la derecha: corazón junto a su borde izquierdo. */
.tkai .tkai-messages .tkai-bubble.tkai-user .tkai-heart{
  left:-27px!important;right:auto!important;
}
/* Respuesta clara a la izquierda: corazón junto a su borde derecho. */
.tkai .tkai-messages .tkai-bubble.tkai-bot .tkai-heart{
  right:-27px!important;left:auto!important;
}
/* Misma especificidad que los estilos de V3.5.2 y declaración posterior:
   nunca mostrar una reacción recibida que el servidor aún no confirma. */
.tkai .tkai-messages .tkai-bubble .tkai-heart[hidden]{display:none!important}
