/* ==========================================================================
   ASTRA AUTOMATION & ROBOTICS - ULTRA-PREMIUM CHATBOT & WHATSAPP STYLES
   Refined Dark Navy + Gold + White Palette (Production-Ready 2026 Edition)
   ========================================================================== */

:root {
  /* Chatbot Brand Theme Colors (Astra Refined Palette) */
  --chat-panel-bg: #0B1F3A;       /* Deep panel backing color */
  --chat-header-bg: #071A33;      /* Main dark navy */
  --chat-canvas-bg: #F4F6F8;      /* Light gray conversation canvas surface */
  --chat-input-bg: #071A33;       /* Dark navy input well background */
  
  --chat-gold: #D6A84F;           /* Premium gold */
  --chat-gold-hover: #F0C66A;     /* Soft gold hover */
  
  --chat-bubble-bot: #102B4A;      /* Secondary navy for assistant message bubbles */
  --chat-bubble-bot-text: #FFFFFF; /* Crisp white text for bot bubbles */
  
  --chat-bubble-user: #D6A84F;     /* Gold for user message bubbles */
  --chat-bubble-user-text: #0E1B2A; /* Dark navy text for user bubbles */
  
  --chat-text-dark: #0E1B2A;      /* Dark text for cards, options, and chips */
  --chat-text-muted: #6B7280;     /* Muted slate text for sub-elements */
  --chat-border-gray: #D9DEE7;    /* Elegant border gray */
  
  --chat-cyan-glow: rgba(34, 211, 238, 0.4);  /* Subtle cyan glow for mascot icon */
  --chat-cyan-glow-hover: rgba(34, 211, 238, 0.65);
  
  --chat-transition-subtle: cubic-bezier(0.25, 0.8, 0.25, 1); /* Elegant, professional transition */

  /* Independent WhatsApp Aero-Dark-Glass Theme Variables */
  --wa-bg-dark: #0B1F3A;
  --wa-text-white: rgba(255, 255, 255, 0.92);
  --wa-text-muted: rgba(255, 255, 255, 0.6);
  --wa-glass-border: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   CHATBOT WIDGET CONTROLLER
   ========================================================================== */
.chatbot-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  width: min(420px, calc(100vw - 48px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px) scale(0.97);
  transition: 
    opacity 300ms var(--chat-transition-subtle), 
    transform 300ms var(--chat-transition-subtle), 
    visibility 300ms ease;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.chatbot-widget.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.chatbot-widget * {
  box-sizing: border-box;
}

/* ==========================================================================
   LAUNCHER BUTTON: FLOATING & GLOWING ROBOT MASCOT
   ========================================================================== */
.chatbot-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  min-width: 72px;
  height: 72px;
  margin-left: auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  overflow: visible;
  transition: 
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1), 
    opacity 360ms ease,
    visibility 360ms ease;
  animation: bot-widget-float 6s infinite ease-in-out alternate;
  animation-delay: 1.5s;
}

/* Stunning glowing pulse rings rippling out from the robot launcher */
.chatbot-launch::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, transparent 70%);
  z-index: -1;
  animation: launcher-pulse-ripples 2.4s infinite ease-out;
  pointer-events: none;
}

@keyframes launcher-pulse-ripples {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

@keyframes bot-widget-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.chatbot-launch:hover,
.chatbot-launch:focus-visible {
  outline: 0;
  transform: translateY(-8px) scale(1.04);
}

.chatbot-launch-icon {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.bot-launcher-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px var(--chat-cyan-glow));
  transition: transform 250ms var(--chat-transition-subtle), filter 250ms ease;
}

.chatbot-launch:hover .bot-launcher-img {
  filter: drop-shadow(0 6px 14px var(--chat-cyan-glow-hover));
}

/* ==========================================================================
   CHAT PANEL: HIGH-END CORPORATE PANEL
   ========================================================================== */
.chatbot-panel {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: min(640px, calc(100vh - 110px));
  height: min(640px, calc(100svh - 110px));
  overflow: hidden;
  border-radius: 28px; /* High-end hardware rounded feel */
  background: linear-gradient(135deg, rgba(11, 31, 58, 0.98), rgba(7, 26, 51, 0.99));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(214, 168, 79, 0.15); /* Premium gold border */
  box-shadow: 
    0 24px 56px rgba(0, 0, 0, 0.4), 
    0 0 40px rgba(214, 168, 79, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  
  /* Opens from the launcher corner instead of popping into place. */
  transform-origin: bottom right;
  opacity: 0;
  transform: translate3d(38px, 46px, 0) scale(0.68);
  clip-path: inset(58% 0 0 72% round 30px);
  filter: blur(14px);
  will-change: opacity, transform, clip-path, filter;
  transition: 
    opacity 360ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 620ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 480ms ease,
    border-color 300ms ease;
}

.chatbot-panel.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  clip-path: inset(0 0 0 0 round 28px);
  filter: blur(0);
  border-color: rgba(214, 168, 79, 0.38); /* Brighter gold accent when active */
}

.chatbot-widget.is-closing .chatbot-panel {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.98);
  clip-path: inset(0 0 0 0 round 28px);
  filter: blur(5px);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 220ms ease,
    border-color 220ms ease;
}

.chatbot-panel::after {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.18) 34%, transparent 56%);
  transform: translateX(-125%) skewX(-18deg);
}

.chatbot-panel.is-active::after {
  animation: chatbot-panel-sheen 760ms 120ms ease-out both;
}

@keyframes chatbot-panel-sheen {
  0% {
    opacity: 0;
    transform: translateX(-125%) skewX(-18deg);
  }
  24% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateX(125%) skewX(-18deg);
  }
}

.chatbot-header,
.chatbot-messages,
.chatbot-input {
  opacity: 0;
}

/* Staged content entrance keeps the panel motion smooth and readable. */
.chatbot-panel.is-active .chatbot-header {
  animation: chatbot-content-drop 460ms 110ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chatbot-panel.is-active .chatbot-messages {
  animation: chatbot-content-rise 500ms 170ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chatbot-panel.is-active .chatbot-input {
  animation: chatbot-content-rise 500ms 230ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes chatbot-content-drop {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes chatbot-content-rise {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.chatbot-panel[hidden] {
  display: none;
}

.chatbot-widget.is-open .chatbot-launch {
  opacity: 0;
  transform: translate(16px, 18px) scale(0.42) rotate(18deg);
  pointer-events: none;
  visibility: hidden;
  animation: none;
}

.chatbot-widget.is-open .chatbot-launch::before {
  animation: none;
  opacity: 0;
}

/* Premium Gold Top Border Line */
.chatbot-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: var(--chat-gold);
  z-index: 5;
}

/* ==========================================================================
   HEADER SECTION: DEEP NAVY & WARM CREAM TITLE
   ========================================================================== */
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 80px;
  padding: 1.1rem 1.4rem;
  color: #ffffff;
  background: var(--chat-header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 2;
}

.chatbot-header > div {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

/* Subtle Glowing Avatar Frame */
.chatbot-avatar-frame {
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 6px var(--chat-cyan-glow));
  animation: avatar-entrance 450ms var(--chat-transition-subtle) both;
}

.bot-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: avatar-breath 5s infinite ease-in-out;
}

@keyframes avatar-entrance {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes avatar-breath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.chatbot-header-title {
  display: block;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.2;
  color: #F8F5EE; /* Premium warm cream/gold */
}

/* Close Button with gold hover effect */
.chatbot-close {
  position: relative;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.chatbot-close:hover,
.chatbot-close:focus-visible {
  background: rgba(214, 168, 79, 0.15);
  border-color: var(--chat-gold);
  outline: 0;
  transform: scale(1.05);
}

.chatbot-close::before,
.chatbot-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 2px;
  border-radius: 99px;
  content: "";
  background: #ffffff;
}

.chatbot-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.chatbot-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ==========================================================================
   CONVERSATION HISTORY CANVAS: LIGHT GRAY SURFACE
   ========================================================================== */
.chatbot-messages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain; /* Prevents parent page scroll chaining */
  padding: 1.4rem 1.2rem;
  background: var(--chat-canvas-bg); /* Clean light gray canvas background */
  scrollbar-color: var(--chat-gold) transparent;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

/* Elegant Scrollbar Styling */
.chatbot-messages::-webkit-scrollbar {
  width: 4px;
}
.chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}
.chatbot-messages::-webkit-scrollbar-thumb {
  background: rgba(214, 168, 79, 0.25);
  border-radius: 99px;
}
.chatbot-messages::-webkit-scrollbar-thumb:hover {
  background: var(--chat-gold);
}

/* ==========================================================================
   MESSAGE BUBBLES: SHARP & PROFESSIONAL
   ========================================================================== */
.chatbot-message {
  max-width: 86%;
  border-radius: 16px;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  animation: message-slide-in 300ms var(--chat-transition-subtle) both;
}

@keyframes message-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chatbot-message p { margin: 0; }
.chatbot-message p + p { margin-top: 0.5rem; }

/* Bot Message: Deep Navy Glass Tile with White Text */
.chatbot-message-bot {
  align-self: flex-start;
  color: var(--chat-bubble-bot-text); /* #FFFFFF */
  border-bottom-left-radius: 4px;
  background: var(--chat-bubble-bot); /* #102B4A */
  box-shadow: 0 2px 8px rgba(16, 43, 74, 0.08);
  border: 0;
}

/* User Message: Warm Gold Card with Dark Text (Gold Gradient with Sparkle) */
.chatbot-message-user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  color: var(--chat-bubble-user-text); /* #0E1B2A */
  font-weight: 600;
  background: linear-gradient(135deg, #F0C66A 0%, #D6A84F 100%); /* Gold gradient */
  box-shadow: 0 3px 12px rgba(214, 168, 79, 0.2);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.chatbot-message-user::before {
  content: "✨";
  font-size: 0.9rem;
  line-height: 1;
}

/* Typography styles inside Bot Message bubbles */
.chatbot-message-bot strong {
  color: #ffffff;
  font-weight: 700;
}

.chatbot-message-bot em {
  font-style: italic;
  color: var(--chat-gold);
}

.chatbot-message-bot h4 {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0.6rem 0 0.35rem 0;
  color: var(--chat-gold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.chatbot-message-bot ul {
  margin: 0.5rem 0 0.5rem 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.88);
}

.chatbot-message-bot li {
  list-style-type: disc;
  font-size: 0.86rem;
  line-height: 1.4;
}

.chatbot-message-bot a {
  color: var(--chat-gold-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: color 200ms ease;
}

.chatbot-message-bot a:hover {
  color: #ffffff;
}

/* ==========================================================================
   INTERACTIVE GRID OPTIONS: THIN GOLD BORDERS & LIGHT GRAY CARDS
   ========================================================================== */
.chatbot-message-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
  margin: 0.3rem 0 0.5rem 0;
  animation: message-slide-in 300ms var(--chat-transition-subtle) both;
}

.chatbot-option {
  min-height: 44px;
  border: 1px solid var(--chat-gold); /* Thin gold border */
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  color: var(--chat-text-dark); /* #0E1B2A */
  background: var(--white-surface, #FFFFFF); /* White card */
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(14, 27, 42, 0.03);
  transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.chatbot-option:hover,
.chatbot-option:focus-visible {
  border-color: var(--chat-gold-hover);
  background: var(--chat-canvas-bg); /* Light gray surface #F4F6F8 */
  color: var(--chat-text-dark);
  box-shadow: 0 4px 12px rgba(214, 168, 79, 0.12);
  outline: 0;
  transform: translateY(-2px);
}

.chatbot-option:active {
  transform: translateY(0) scale(0.98);
}

.chatbot-option-secondary {
  color: var(--chat-gold);
  background: var(--white-surface, #FFFFFF);
  border-color: var(--chat-gold);
}

.chatbot-option-secondary:hover {
  background: var(--chat-canvas-bg);
  border-color: var(--chat-gold-hover);
  color: var(--chat-text-dark);
}

/* ==========================================================================
   INPUT PANEL FOOTER: ROUNDED PILL WELL
   ========================================================================== */
.chatbot-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  padding: 1rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--chat-input-bg); /* Dark navy background */
}

.chatbot-input.has-phone-code {
  grid-template-columns: minmax(94px, 118px) minmax(0, 1fr) auto;
  align-items: center;
}

/* Country code dropdown selection */
.chatbot-phone-code {
  width: 100%;
  min-width: 0;
  max-width: 118px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 0 1.55rem 0 0.8rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  outline: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6A84F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.65rem;
}

.chatbot-phone-code:focus,
.chatbot-phone-code:hover {
  border-color: var(--chat-gold);
  background-color: rgba(255, 255, 255, 0.08);
}

.chatbot-phone-code option {
  background-color: #071A33;
  color: #ffffff;
}

/* Chat text input field - Rounded pill well */
.chatbot-input input:not(.chatbot-trap) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--chat-border-gray);
  border-radius: 22px; /* Pill */
  padding: 0 1.2rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08); /* Dark navy transparent field background */
  font: inherit;
  font-size: 0.88rem;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.chatbot-input input:not(.chatbot-trap)::placeholder {
  color: rgba(255, 255, 255, 0.45); /* Readable placeholder text */
}

.chatbot-input input:not(.chatbot-trap):focus,
.chatbot-input input:not(.chatbot-trap):hover {
  border-color: var(--chat-gold);
  background: rgba(255, 255, 255, 0.12);
  outline: 0;
  box-shadow: 0 0 8px rgba(214, 168, 79, 0.2);
}

.chatbot-input input:disabled {
  color: var(--chat-text-muted);
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.04);
}

/* Send button - Gold circular button */
.chatbot-input button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%; /* Circular */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-header-bg); /* #071A33 dark navy icon */
  background: var(--chat-gold); /* Gold send button */
  box-shadow: 0 2px 8px rgba(214, 168, 79, 0.3);
  cursor: pointer;
  transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.chatbot-input button svg {
  width: 1.1rem;
  height: 1.1rem;
  transform: translate(-1px, 1px);
  transition: transform 200ms ease;
}

.chatbot-input button:hover,
.chatbot-input button:focus-visible {
  background: var(--chat-gold-hover);
  box-shadow: 0 4px 12px rgba(214, 168, 79, 0.45);
  outline: 0;
  transform: scale(1.05);
}

.chatbot-input button:hover svg {
  transform: translate(1px, -1px);
}

.chatbot-input button:active {
  transform: scale(0.97);
}

.chatbot-input button:disabled {
  cursor: wait;
  opacity: 0.55;
  box-shadow: none;
}

.chatbot-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ==========================================================================
   TYPING INDICATOR
   ========================================================================== */
.chatbot-message-typing {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: rgba(19, 34, 56, 0.05); /* Soft slate-grey bubble */
  border: 1px solid rgba(19, 34, 56, 0.08); /* Silver-slate border */
  box-shadow: 
    0 8px 24px rgba(12, 24, 42, 0.04), 
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 0.8rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
}

.chatbot-typing-dot {
  width: 7px;
  height: 7px;
  background-color: var(--chat-gold);
  border-radius: 50%;
  opacity: 0.35;
  animation: chatbot-typing-bounce 1.4s infinite ease-in-out both;
}

.chatbot-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatbot-typing-bounce {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.35;
  }
  40% {
    transform: scale(1.1);
    opacity: 0.95;
    background-color: var(--chat-gold-hover);
    box-shadow: 0 0 6px rgba(214, 168, 79, 0.4);
  }
}

/* ==========================================================================
   QUICK REPLIES CHIPS: THIN GOLD BORDERS & LIGHT CARDS (STACKED CAPSULE)
   ========================================================================== */
.chatbot-quick-replies {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.95rem 1.05rem;
  margin: 0.2rem 1.2rem 0.8rem;
  background: rgba(14, 27, 42, 0.035); /* Soft gray/blue backing card */
  border: 1px solid rgba(14, 27, 42, 0.05);
  border-radius: 20px;
  box-shadow: inset 0 1px 2px rgba(14, 27, 42, 0.01);
  animation: message-slide-in 300ms var(--chat-transition-subtle) both;
}

.chatbot-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(214, 168, 79, 0.25); /* Thin gold/cream border */
  border-radius: 24px;
  color: var(--chat-text-dark); /* #0E1B2A */
  background: var(--white-surface, #FFFFFF);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1.5px 5px rgba(14, 27, 42, 0.03);
  transition: transform 250ms var(--chat-transition-subtle), 
              background-color 250ms ease, 
              border-color 250ms ease, 
              box-shadow 250ms ease;
  white-space: normal;
  position: relative;
}

.chatbot-chip:hover,
.chatbot-chip:focus-visible {
  outline: none;
  background: var(--white-surface, #FFFFFF);
  border-color: var(--chat-gold);
  color: var(--chat-text-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(214, 168, 79, 0.15);
}

.chatbot-chip:active {
  transform: translateY(-0.5px) scale(0.99);
}

/* Option left-side circle icon */
.chatbot-chip::before {
  content: "";
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background-color: rgba(214, 168, 79, 0.06);
  border: 1px solid rgba(214, 168, 79, 0.2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.chatbot-chip:hover::before {
  background-color: rgba(214, 168, 79, 0.12);
  border-color: var(--chat-gold);
}

/* Map exact icons based on data-icon attribute */
.chatbot-chip[data-icon="gear"]::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6A84F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='3'%3e%3c/circle%3e%3cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'%3e%3c/path%3e%3c/svg%3e");
}

.chatbot-chip[data-icon="location"]::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6A84F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3e%3c/path%3e%3ccircle cx='12' cy='10' r='3'%3e%3c/circle%3e%3c/svg%3e");
}

.chatbot-chip[data-icon="quote"]::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6A84F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3e%3c/path%3e%3cpolyline points='14 2 14 8 20 8'%3e%3c/polyline%3e%3cline x1='16' y1='13' x2='8' y2='13'%3e%3c/line%3e%3cline x1='16' y1='17' x2='8' y2='17'%3e%3c/line%3e%3cpolyline points='10 9 9 9 8 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.chatbot-chip[data-icon="roadmap"]::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6A84F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'%3e%3c/polyline%3e%3c/svg%3e");
}

.chatbot-chip[data-icon="default"]::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6A84F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3e%3c/polygon%3e%3c/svg%3e");
}

/* Option right-side chevron > */
.chatbot-chip::after {
  content: "";
  width: 6px;
  height: 10px;
  display: block;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6A84F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 200ms ease;
}

.chatbot-chip:hover::after {
  transform: translateX(2.5px);
}

/* ==========================================================================
   WHATSAPP WIDGET STYLES (INDEPENDENT COSMIC AERO-DARK-GLASS)
   ========================================================================== */
.whatsapp-widget {
  position: fixed;
  right: 24px;
  bottom: 112px; /* Positioned exactly above the chatbot launcher button */
  z-index: 119;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(15px) scale(0.97);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  transition: 
    opacity 300ms ease, 
    transform 350ms var(--chat-transition-subtle), 
    visibility 300ms ease;
}

.whatsapp-widget.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Sibling selector that automatically hides WhatsApp launcher button when Main Chatbot panel is open */
.chatbot-widget.is-open ~ .whatsapp-widget {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
}

.whatsapp-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  min-width: 72px;
  height: 72px;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(18, 140, 126, 0.35);
  transition: transform 300ms var(--chat-transition-subtle), box-shadow 300ms ease;
  animation: bot-widget-float 6s infinite ease-in-out alternate;
  animation-delay: 1.5s;
}

.whatsapp-launch:hover,
.whatsapp-launch:focus-visible {
  outline: 0;
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 12px 32px rgba(18, 140, 126, 0.55);
}

.whatsapp-launch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 34px;
  height: 34px;
  transition: transform 250ms var(--chat-transition-subtle);
}

.whatsapp-launch:hover .whatsapp-launch-icon {
  transform: scale(1.04);
}

.whatsapp-svg-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* WhatsApp Panel - Floating Glass Card (Reverted to Aero-Dark-Glass Theme) */
.whatsapp-panel {
  position: absolute;
  bottom: 88px; /* 72px button height + 16px offset */
  right: 0;
  width: 320px;
  border-radius: 24px;
  background: var(--wa-bg-dark); /* Cosmic Navy Glass */
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--wa-glass-border);
  box-shadow: 
    0 20px 50px rgba(12, 24, 42, 0.4), 
    0 0 30px rgba(18, 140, 126, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 
    opacity 300ms var(--chat-transition-subtle), 
    transform 300ms var(--chat-transition-subtle), 
    visibility 300ms ease;
  z-index: 120;
}

.whatsapp-widget.is-open .whatsapp-panel {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.whatsapp-widget.is-open .whatsapp-launch {
  transform: scale(0.9);
  opacity: 0.8;
}

/* Stunning Emerald Green Neon Top Accent Line */
.whatsapp-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3.5px;
  content: "";
  background: linear-gradient(90deg, #128c7e, #25d366, #128c7e);
  z-index: 5;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
}

/* Header */
.whatsapp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
  border-bottom: 1px solid var(--wa-glass-border);
}

.whatsapp-header > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.whatsapp-avatar-frame {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(18, 140, 126, 0.12);
  border: 1px solid rgba(18, 140, 126, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 1.1rem;
}

.whatsapp-avatar-fallback {
  filter: drop-shadow(0 0 4px #25d366);
  line-height: 1;
}

/* Online status pulsing dot */
.whatsapp-avatar-frame::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  background: #25d366;
  border: 2px solid #132238;
  border-radius: 50%;
  box-shadow: 0 0 6px #25d366;
  animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-header-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff; /* Elegant white text */
  letter-spacing: 0.02em;
}

.whatsapp-header-status {
  display: block;
  font-size: 0.7rem;
  color: #25d366;
  font-weight: 700;
  margin-top: 1px;
}

.whatsapp-close {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--wa-glass-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 250ms ease;
}

.whatsapp-close:hover,
.whatsapp-close:focus-visible {
  outline: none;
  background: rgba(18, 140, 126, 0.2);
  border-color: #25d366;
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.3);
}

.whatsapp-close::before,
.whatsapp-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #ffffff; /* Elegant white close lines */
  content: "";
  border-radius: 99px;
}

.whatsapp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.whatsapp-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Body */
.whatsapp-body {
  padding: 1.3rem;
  color: var(--wa-text-white);
  font-size: 0.86rem;
  line-height: 1.55;
}

.whatsapp-body p {
  margin: 0 0 1.1rem 0;
  color: var(--wa-text-muted);
}

/* Beautiful WhatsApp Connect Button */
.whatsapp-connect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 46px;
  border-radius: 23px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.88rem;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
  transition: 
    transform 300ms var(--chat-transition-subtle), 
    box-shadow 250ms ease, 
    background-color 250ms ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.whatsapp-connect-btn:hover,
.whatsapp-connect-btn:focus-visible {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  background: linear-gradient(135deg, #30e374 0%, #149c8c 100%);
}

.whatsapp-connect-btn:active {
  transform: translateY(0);
}

.whatsapp-btn-svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

/* ==========================================================================
   MOBILE VIEWPORTS OVERRIDES
   ========================================================================== */
@media (max-width: 480px) {
  .chatbot-widget {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }

  .chatbot-launch {
    width: 56px;
    min-width: 56px;
    height: 56px;
  }

  .chatbot-panel {
    height: calc(100vh - 100px);
    height: calc(100svh - 100px);
    border-radius: 20px;
  }

  .chatbot-header {
    padding: 1rem 1.2rem;
    min-height: 72px;
  }

  .chatbot-avatar-frame {
    width: 2.3rem;
    height: 2.3rem;
  }

  .chatbot-header-title {
    font-size: 1.05rem;
  }

  .chatbot-messages {
    padding: 1.1rem 0.95rem;
    gap: 0.85rem;
  }

  .chatbot-message {
    max-width: 90%;
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
  }

  .chatbot-message-options {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .chatbot-option {
    min-height: 42px;
  }

  .chatbot-quick-replies {
    margin: 0.1rem 0.95rem 0.7rem;
    padding: 0.8rem 0.9rem;
    gap: 0.55rem;
  }

  .chatbot-input {
    padding: 0.85rem 0.95rem 1rem;
  }

  .chatbot-input.has-phone-code {
    grid-template-columns: minmax(82px, 98px) minmax(0, 1fr) 42px;
    gap: 0.45rem;
  }

  .chatbot-input input:not(.chatbot-trap) {
    font-size: 0.86rem;
    min-height: 42px;
    padding: 0 0.75rem;
  }

  .chatbot-phone-code {
    max-width: 98px;
    min-height: 42px;
    padding: 0 1.35rem 0 0.65rem;
    font-size: 0.72rem;
    background-position: right 0.55rem center;
  }

  .chatbot-input button {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .whatsapp-widget {
    right: 16px;
    bottom: 84px; /* Chatbot bottom: 16px + launcher height: 56px + gap: 12px = 84px */
  }
  
  .whatsapp-launch {
    width: 56px;
    min-width: 56px;
    height: 56px;
  }

  .whatsapp-launch-icon {
    width: 26px;
    height: 26px;
  }
  
  .whatsapp-panel {
    width: calc(100vw - 32px);
    bottom: 68px; /* 56px button height + 12px gap */
  }
}