/* ==========================================================================
   @tavosud/floating-button-whatsapp-modern — estilos
   Editar este archivo y ejecutar `npm run build` para actualizar los bundles.
   ========================================================================== */

/* ── Reset ────────────────────────────────────────────────────────────────── */
.fwm-widget *,
.fwm-widget *::before,
.fwm-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
}

/* ── CSS Custom Properties (defaults = colores WhatsApp originales) ────────── */
.fwm-widget {
  --fwm-header-bg:    #075E54;
  --fwm-header-text:  #FFFFFF;
  --fwm-body-bg:      #ECE5DD;
  --fwm-btn-bg:       #25D366;
  --fwm-btn-icon:     #FFFFFF;
  --fwm-send-bg:      #25D366;
  --fwm-send-text:    #FFFFFF;
  --fwm-bubble-bg:    #FFFFFF;
  --fwm-bubble-text:  #333333;
  /* Position variables — set per-instance */
  --fwm-z:          9999;
  --fwm-fab-t:      auto;
  --fwm-fab-b:      20px;
  --fwm-fab-l:      auto;
  --fwm-fab-r:      20px;
  --fwm-pop-t:      auto;
  --fwm-pop-b:      90px;
  --fwm-pop-l:      auto;
  --fwm-pop-r:      20px;
  --fwm-pop-origin: bottom right;
}

/* ── Shake animation ─────────────────────────────────────────────────────── */
@keyframes fwm-shake {
  0%,  60%, 100% { transform: rotate(0deg)   scale(1);    }
  62%            { transform: rotate(-14deg) scale(1.07); }
  64%            { transform: rotate(14deg)  scale(1.07); }
  66%            { transform: rotate(-11deg) scale(1.05); }
  68%            { transform: rotate(11deg)  scale(1.05); }
  70%            { transform: rotate(-7deg);              }
  72%            { transform: rotate(7deg);               }
  74%            { transform: rotate(-3deg);              }
  76%            { transform: rotate(3deg);               }
  78%            { transform: rotate(0deg);               }
}

/* ── Floating Action Button ──────────────────────────────────────────────── */
.fwm-fab {
  position: fixed;
  top:    var(--fwm-fab-t);
  bottom: var(--fwm-fab-b);
  left:   var(--fwm-fab-l);
  right:  var(--fwm-fab-r);
  z-index: var(--fwm-z);
  width:  60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--fwm-btn-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.38);
  outline: none;
  padding: 0;
  transition: box-shadow 0.2s ease;
  animation: fwm-shake 6s ease-in-out 3s infinite;
}
.fwm-fab:hover {
  box-shadow: 3px 6px 22px rgba(0, 0, 0, 0.42);
  animation-play-state: paused;
}
.fwm-fab:active {
  transform: scale(0.93) !important;
  animation-play-state: paused;
}
.fwm-fab svg {
  width: 34px;
  height: 34px;
  fill: var(--fwm-btn-icon);
}

/* ── Popup window ────────────────────────────────────────────────────────── */
.fwm-popup {
  position: fixed;
  top:    var(--fwm-pop-t);
  bottom: var(--fwm-pop-b);
  left:   var(--fwm-pop-l);
  right:  var(--fwm-pop-r);
  z-index: var(--fwm-z);
  width: 330px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  transform-origin: var(--fwm-pop-origin);
  transform: scale(0.82) translateY(12px);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.22s ease;
  pointer-events: none;
}
.fwm-popup.fwm-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.fwm-header {
  background-color: var(--fwm-header-bg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fwm-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.fwm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.28);
}
.fwm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.fwm-avatar svg {
  width: 28px;
  height: 28px;
  fill: rgba(255, 255, 255, 0.82);
}
/* Online indicator dot */
.fwm-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #44c767;
  border: 2px solid var(--fwm-header-bg);
}

.fwm-header-info {
  flex: 1;
  min-width: 0;
}
.fwm-name {
  color: var(--fwm-header-text);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fwm-slogan {
  color: var(--fwm-header-text);
  font-size: 12.5px;
  opacity: 0.88;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fwm-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}
.fwm-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.fwm-close-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--fwm-header-text);
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.fwm-body {
  background-color: var(--fwm-body-bg);
  padding: 20px 16px 16px;
  /* Subtle WhatsApp-style background pattern */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' opacity='0.06'%3E%3Ccircle cx='20' cy='20' r='14' fill='none' stroke='%23999' stroke-width='1'/%3E%3Ccircle cx='60' cy='60' r='14' fill='none' stroke='%23999' stroke-width='1'/%3E%3C/svg%3E");
}

/* ── Message bubble ──────────────────────────────────────────────────────── */
.fwm-bubble {
  background-color: var(--fwm-bubble-bg);
  color: var(--fwm-bubble-text);
  border-radius: 0 10px 10px 10px;
  padding: 10px 14px 8px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  position: relative;
  max-width: 92%;
  word-break: break-word;
}
/* Triangle tail — top-left (incoming message style) */
.fwm-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--fwm-bubble-bg) transparent transparent;
}

.fwm-bubble-sender {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fwm-header-bg);
  margin-bottom: 3px;
}
.fwm-bubble-text {
  display: block;
}
.fwm-bubble-time {
  font-size: 11px;
  color: var(--fwm-bubble-text);
  opacity: 0.52;
  text-align: right;
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.fwm-footer {
  background-color: var(--fwm-body-bg);
  padding: 10px 16px 18px;
}
.fwm-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 11px 20px;
  background-color: var(--fwm-send-bg);
  color: var(--fwm-send-text);
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.18s ease, transform 0.12s ease;
  line-height: 1;
}
.fwm-send-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.fwm-send-btn:active {
  filter: brightness(0.95);
  transform: translateY(0);
}
/* WhatsApp circle icon inside send button */
.fwm-send-icon {
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fwm-send-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--fwm-send-text);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .fwm-popup {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
  }
}