/* ============================================================
   ELITE BANDHAN — RULE-BASED CHAT WIDGET
   Matches existing site theme: maroon #690915 / gold #c9973a
   ============================================================ */

#eb-chat-launcher {
  position: fixed;
  right: 92px; /* sits to the left of the WhatsApp button */
  bottom: 24px;
  z-index: 9998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #690915 0%, #4a060e 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(105, 9, 21, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#eb-chat-launcher:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(105, 9, 21, 0.5);
}
#eb-chat-launcher .eb-chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #c9973a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

#eb-chat-panel {
  position: fixed;
  right: 92px;
  bottom: 96px;
  z-index: 9999;
  width: 360px;
  max-width: 92vw;
  height: 520px;
  max-height: 75vh;
  background: #fffaf3;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
  border: 1px solid #e8ddd4;
}
#eb-chat-panel.eb-open { display: flex; }

.eb-chat-header {
  background: linear-gradient(135deg, #690915 0%, #4a060e 100%);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eb-chat-header img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  padding: 3px;
}
.eb-chat-header .eb-chat-title { flex: 1; }
.eb-chat-header .eb-chat-title strong { display: block; font-size: 15px; }
.eb-chat-header .eb-chat-title span { display: block; font-size: 12px; opacity: 0.85; }
.eb-chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  opacity: 0.85;
}
.eb-chat-close:hover { opacity: 1; }

.eb-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fffaf3;
}
.eb-chat-body::-webkit-scrollbar { width: 6px; }
.eb-chat-body::-webkit-scrollbar-thumb { background: #e8ddd4; border-radius: 3px; }

.eb-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
}
.eb-msg-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e8ddd4;
  color: #3b2b2b;
  border-bottom-left-radius: 3px;
}
.eb-msg-user {
  align-self: flex-end;
  background: #690915;
  color: #fff;
  border-bottom-right-radius: 3px;
}

.eb-chat-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}
.eb-chat-options button {
  background: #fff;
  border: 1.5px solid #690915;
  color: #690915;
  padding: 9px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.eb-chat-options button:hover {
  background: #690915;
  color: #fff;
}

.eb-chat-form-field {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eb-chat-form-field input,
.eb-chat-form-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid #e8ddd4;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  background: #faf8f6;
}
.eb-chat-form-field input:focus,
.eb-chat-form-field select:focus {
  border-color: #690915;
  background: #fff;
}
.eb-chat-form-row { display: flex; gap: 8px; }
.eb-chat-form-row select { flex: 0 0 34%; }
.eb-chat-form-row input { flex: 1; }
.eb-chat-form-field button.eb-chat-submit {
  background: linear-gradient(135deg, #690915 0%, #4a060e 100%);
  color: #fff;
  border: none;
  padding: 11px;
  border-radius: 22px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 2px;
}
.eb-chat-field-error { color: #b02a2a; font-size: 11.5px; margin-top: -4px; }

.eb-chat-footer {
  padding: 10px 14px;
  border-top: 1px solid #e8ddd4;
  background: #fff;
  text-align: center;
  font-size: 11px;
  color: #7a6e68;
}
.eb-chat-footer a { color: #690915; font-weight: 600; }

.eb-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e8ddd4;
  border-radius: 14px;
  border-bottom-left-radius: 3px;
}
.eb-typing span {
  width: 6px; height: 6px;
  background: #c9973a;
  border-radius: 50%;
  animation: eb-bounce 1.2s infinite ease-in-out;
}
.eb-typing span:nth-child(2) { animation-delay: 0.15s; }
.eb-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes eb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Tablet/mobile: switch to stacked (above WhatsApp) so they don't crowd side by side */
@media (max-width: 480px) {
  #eb-chat-launcher {
    right: 16px;
    bottom: 90px;
    width: 50px;
    height: 50px;
    font-size: 21px;
  }
  #eb-chat-panel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 154px;
    height: 65vh;
  }
}