.webchat-widget.theme-whatsapp {
  --webchat-primary: #075E54;
  --webchat-primary-hover: #054d44;
}

.scroll-top {
  display: none !important;
}

/* Header: dark WhatsApp green */
.webchat-widget.theme-whatsapp .webchat-header {
  background: #075E54;
}

/* Hide trash icon in header */
.webchat-widget.theme-whatsapp .webchat-header-actions button:first-child {
  display: none;
}

/* Hide three dots menu on messages */
.webchat-widget.theme-whatsapp .webchat-message-actions {
  display: none !important;
}

.webchat-widget.theme-whatsapp .webchat-launcher {
  bottom: 30px;
  right: 30px;
  width: 84px;
  height: 84px;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M24 4C12.954 4 4 12.954 4 24c0 3.53.922 6.84 2.534 9.716L4 44l10.57-2.452A19.91 19.91 0 0 0 24 44c11.046 0 20-8.954 20-20S35.046 4 24 4z' stroke='%2325D366' stroke-width='3.5' fill='none'/%3E%3Cpath d='M17.2 14.8c-.4-.9-.8-.9-1.2-.9h-1c-.4 0-1 .1-1.5.6s-2 1.9-2 4.7 2 5.4 2.3 5.8c.3.4 3.9 6.2 9.6 8.4 4.8 1.9 5.7 1.5 6.7 1.4 1-.1 3.2-1.3 3.7-2.5.4-1.2.4-2.3.3-2.5-.1-.2-.5-.4-1-.6-.5-.3-3.1-1.5-3.6-1.7-.5-.2-.8-.3-1.2.3-.4.5-1.4 1.7-1.7 2.1-.3.4-.6.4-1.2.1-.5-.3-2.2-.8-4.2-2.5-1.5-1.4-2.6-3-2.9-3.5-.3-.5 0-.8.2-1 .2-.2.5-.6.8-.9.2-.3.3-.5.5-.9.2-.4.1-.7 0-1-.1-.2-1.2-2.8-1.6-3.8z' fill='%2325D366'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px 45px;
  box-shadow: none;
}

.webchat-widget.theme-whatsapp .webchat-launcher svg {
  display: none;
}

.webchat-widget.theme-whatsapp .webchat-launcher.open {
  display: none;
}

.webchat-widget.theme-whatsapp .webchat-launcher:hover {
  opacity: 0.85;
}

/* Chat background: exact WhatsApp color */
.webchat-widget.theme-whatsapp .webchat-messages {
  background: #E5DDD5;
}

/* User messages (right): light green */
.webchat-widget.theme-whatsapp .webchat-message.inbound {
  background: #DCF8C6;
  color: #111;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  align-self: flex-end;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 16px;
}

/* Bot messages (left): white */
.webchat-widget.theme-whatsapp .webchat-message.outbound {
  background: #ffffff;
  color: #111;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  align-self: flex-start;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 16px;
}

/* Swap message wrapper direction */
.webchat-widget.theme-whatsapp .webchat-message-wrapper.inbound {
  flex-direction: row-reverse;
}

.webchat-widget.theme-whatsapp .webchat-message-wrapper.outbound {
  flex-direction: row;
}

/* Fix context menu position for swapped directions */
.webchat-widget.theme-whatsapp .webchat-message.inbound .webchat-message-menu-overlay {
  left: auto;
  right: 0;
}

.webchat-widget.theme-whatsapp .webchat-message.outbound .webchat-message-menu-overlay {
  left: 0;
  right: auto;
}

.webchat-widget.theme-whatsapp .webchat-message.outbound .webchat-message-time,
.webchat-widget.theme-whatsapp .webchat-message.inbound .webchat-message-time {
  color: #667781;
  opacity: 1;
}

.webchat-widget.theme-whatsapp .webchat-input-area {
  background: #F0F0F0;
}

.webchat-widget.theme-whatsapp .webchat-input {
  background: #ffffff;
}

/* Round send button with WhatsApp green */
.webchat-widget.theme-whatsapp .webchat-send-btn {
  background: #00A884;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webchat-widget.theme-whatsapp .webchat-send-btn:hover {
  background: #008f6f;
}

.webchat-widget.theme-whatsapp .webchat-powered {
  background: #F0F0F0;
  border-top-color: #e0e0e0;
}

.webchat-widget.theme-whatsapp .webchat-input,
.webchat-widget.theme-whatsapp .webchat-input:focus {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  outline: none;
  box-shadow: none;
  transition: none;
}

/* Trigger bubble */
.webchat-trigger-bubble {
  position: fixed;
  bottom: 120px;
  right: 30px;
  background: #25D366;
  color: #fff;
  padding: 12px 36px 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 9998;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 220px;
}

.webchat-trigger-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

.webchat-trigger-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 30px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #25D366;
}

.webchat-trigger-close {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}

.webchat-trigger-close:hover {
  opacity: 1;
}

.webchat-trigger-bubble:hover {
  background: #20bd5a;
}

.webchat-trigger-bubble:hover::after {
  border-top-color: #20bd5a;
}

/* Mobile: move chat icon to left bottom */
@media (max-width: 768px) {
  .webchat-widget.theme-whatsapp .webchat-launcher {
    left: 20px;
    right: auto;
    bottom: 20px;
    width: 59px;
    height: 59px;
    background-color: #fff;
    background-size: 36px 36px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .webchat-trigger-bubble {
    left: 20px;
    right: auto;
  }

  .webchat-trigger-bubble::after {
    left: 30px;
    right: auto;
  }

  /* Full screen chat on mobile */
  .webchat-widget.theme-whatsapp .webchat-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: env(keyboard-inset-height, 0px);
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header stays at top */
  .webchat-widget.theme-whatsapp .webchat-header {
    flex-shrink: 0;
    border-radius: 0;
  }

  /* Messages area fills available space and scrolls */
  .webchat-widget.theme-whatsapp .webchat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Input area stays at bottom above keyboard */
  .webchat-widget.theme-whatsapp .webchat-input-area {
    flex-shrink: 0;
    background: #F0F0F0;
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }

  /* Powered by footer */
  .webchat-widget.theme-whatsapp .webchat-powered {
    flex-shrink: 0;
  }
}