/* Tataki cuerpo entero: pies en el suelo, mascota y ventana a la IZQUIERDA */

.tataki-launcher {
  position: fixed;
  left: 8px;
  bottom: 0;
  z-index: 100000000;
  width: 112px;
  height: 132px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  overflow: visible;
  transform: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
}

.tataki-launcher:hover,
.tataki-launcher:focus,
.tataki-launcher:active,
.tataki-launcher:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none;
}

.tataki-launcher.tataki-launcher--visible .tataki-launcher__blink {
  animation: tataki-float 4.8s ease-in-out infinite;
}

.tataki-launcher__blink.tataki-launcher__hop {
  animation: tataki-hop 0.62s cubic-bezier(0.34, 1.25, 0.64, 1) 1 !important;
}

@keyframes tataki-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  18% {
    transform: translateY(-11px);
  }
  36% {
    transform: translateY(0);
  }
  52% {
    transform: translateY(-6px);
  }
  68% {
    transform: translateY(0);
  }
}

.tataki-launcher[hidden] {
  display: none !important;
}

.tataki-launcher:hover .tataki-launcher__img {
  filter: drop-shadow(0 6px 14px rgba(42, 66, 49, 0.28)) brightness(1.07);
}

.tataki-bubble.tataki-bubble--hover {
  border-color: #3d5c45;
  box-shadow: 0 8px 22px rgba(61, 92, 69, 0.18);
}

@keyframes tataki-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.tataki-launcher__blink {
  display: block;
  width: 100%;
  height: 100%;
}

.tataki-launcher__blink .fe-mascot-blink__body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.tataki-launcher__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 4px 10px rgba(42, 66, 49, 0.22));
  pointer-events: none;
  user-select: none;
}

.tataki-launcher .fe-mascot-blink--full .fe-mascot-blink__lid--left {
  left: 31%;
  top: 28%;
  width: 15%;
  height: 11%;
}

.tataki-launcher .fe-mascot-blink--full .fe-mascot-blink__lid--right {
  left: 49%;
  top: 28%;
  width: 15%;
  height: 11%;
}

.tataki-bubble {
  position: fixed;
  left: 118px;
  bottom: 78px;
  z-index: 100000000;
  max-width: min(260px, calc(100vw - 140px));
  margin: 0;
  padding: 12px 16px;
  border: 2px solid #1a1a1a;
  border-radius: 22px;
  background: #fff;
  color: #222;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tataki-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tataki-bubble[hidden] {
  display: none !important;
}

.tataki-bubble__text {
  display: block;
  white-space: pre-line;
}

.tataki-bubble::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: #fff;
  border-left: 2px solid #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  transform: rotate(45deg);
}

.tataki-panel {
  position: fixed;
  left: 22px;
  bottom: 36px;
  z-index: 100000001;
  width: min(320px, calc(100vw - 24px));
  height: min(620px, calc(100vh - 56px));
  display: none;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  box-sizing: border-box;
}

.tataki-panel.is-open {
  display: block;
  pointer-events: auto;
}

.tataki-panel,
.tataki-panel *,
.tataki-panel *::before,
.tataki-panel *::after {
  box-sizing: border-box;
}

.tataki-panel__host {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.tataki-panel__host .fe-chat {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f4f0e8;
  border: 1.5px solid rgba(42, 66, 49, 0.35);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.tataki-panel__host.fe-chat-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.tataki-panel__host.fe-chat-root > .fe-chat {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.tataki-panel__host .fe-chat__header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  transform: none !important;
  display: flex !important;
  flex-shrink: 0 !important;
  background-image: none !important;
}

.tataki-panel__host .fe-chat__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100% !important;
}

.tataki-panel__host .fe-chat__form {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  transform: none !important;
  display: flex !important;
  flex-shrink: 0 !important;
}

.tataki-panel__host .fe-chat__credit {
  display: none !important;
}

.tataki-panel__host .fe-chat__bubble {
  border-radius: 16px !important;
  color: #2c2c2c !important;
}

.tataki-panel__host .fe-chat__row--bot .fe-chat__bubble {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.tataki-panel__host .fe-chat__row--user .fe-chat__bubble {
  background: #3d5c45 !important;
  background-color: #3d5c45 !important;
  color: #ffffff !important;
  border-bottom-right-radius: 4px !important;
}

.tataki-panel__host .fe-chat__header {
  border-radius: 16px 16px 0 0 !important;
}

.tataki-panel__host .fe-chat__input,
.tataki-panel__host .fe-chat__send {
  border-radius: 10px !important;
}

.tataki-panel__host .fe-chat__ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.tataki-panel__host .fe-chat__cta {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #3d5c45 !important;
  background: #3d5c45 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.tataki-panel__host .fe-chat__cta--link {
  background: #ffffff !important;
  color: #3d5c45 !important;
}

.tataki-panel__host .fe-chat__reset,
.tataki-panel__host .fe-chat__close,
.tataki-panel__host .fe-chat__send,
.tataki-panel__host .fe-chat__shortcut {
  text-transform: none !important;
  letter-spacing: normal !important;
  appearance: none !important;
}

@media (max-width: 480px) {
  .tataki-launcher {
    left: 2px;
    bottom: 0;
    width: 96px;
    height: 114px;
  }

  .tataki-bubble {
    left: 100px;
    bottom: 68px;
    max-width: min(180px, calc(100vw - 112px));
    font-size: 13px;
    padding: 10px 14px;
  }

  .tataki-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: calc(100vh - 16px);
  }
}