/* ============================================================
   chatbot.css — Infinite HSE Chatbot
   Hardened against Astra + Elementor + LearnDash theme stack.
   ============================================================ */

/* ── Scoped reset ───────────────────────────────────────────── */
#ihse-chatbot,
#ihse-chatbot div,
#ihse-chatbot span,
#ihse-chatbot p,
#ihse-chatbot strong,
#ihse-chatbot a,
#ihse-chatbot button,
#ihse-chatbot input,
#ihse-chatbot textarea,
#ihse-chatbot label {
  font-family: 'Segoe UI', Arial, sans-serif !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
}

#ihse-chatbot p,
#ihse-chatbot h1,#ihse-chatbot h2,#ihse-chatbot h3,
#ihse-chatbot h4,#ihse-chatbot h5,#ihse-chatbot h6 {
  margin: 0 !important; padding: 0 !important;
  font-size: inherit !important; font-weight: inherit !important;
  color: inherit !important; line-height: inherit !important;
  border: none !important; background: none !important; float: none !important;
}

#ihse-chatbot a,
#ihse-chatbot a:visited,
#ihse-chatbot a:hover {
  color: #1D9E75 !important; text-decoration: underline !important;
  background: none !important; border: none !important;
  padding: 0 !important; margin: 0 !important; font-size: inherit !important;
}
#ihse-chatbot .ihse-row.usr .ihse-bubble a,
#ihse-chatbot .ihse-row.usr .ihse-bubble a:hover { color: #d0f5e8 !important; }

#ihse-chatbot button.ihse-opt-btn {
  all: revert !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  box-sizing: border-box !important;
}

/* ── Container ──────────────────────────────────────────────── */
#ihse-chatbot {
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #1a1a1a !important;
  background: #f0f2f5 !important;
  border-radius: 16px !important;
  padding: 14px !important;
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
}

/* ── Header ─────────────────────────────────────────────────── */
#ihse-chatbot #ihse-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
  width: 100% !important;
}

/* ── Logo avatar ────────────────────────────────────────────── */
#ihse-chatbot .ihse-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#ihse-chatbot .ihse-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 50% !important;
}

/* ── Header info + verified badge ───────────────────────────── */
#ihse-chatbot .ihse-header-info p {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#ihse-chatbot .ihse-verified {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  margin-bottom: 1px !important;
}

#ihse-chatbot .ihse-header-info span {
  font-size: 12px !important;
  color: #1D9E75 !important;
  font-weight: 400 !important;
  display: block !important;
}

/* ── Messages area ──────────────────────────────────────────── */
#ihse-chatbot #ihse-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 300px !important;
  max-height: 500px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  scroll-behavior: smooth !important;
}

/* ── Message rows ───────────────────────────────────────────── */
#ihse-chatbot .ihse-row {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#ihse-chatbot .ihse-row.bot  { justify-content: flex-start !important; }
#ihse-chatbot .ihse-row.usr  { justify-content: flex-end !important; }
#ihse-chatbot .ihse-row > div {
  max-width: 88% !important;
  min-width: 0 !important;
  width: auto !important;
}

/* ── Bubbles ────────────────────────────────────────────────── */
#ihse-chatbot .ihse-bubble {
  display: block !important;
  width: 100% !important;
  min-width: 80px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  margin: 0 !important;
}
#ihse-chatbot .ihse-row.bot .ihse-bubble {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-bottom-left-radius: 4px !important;
  color: #111827 !important;
}
#ihse-chatbot .ihse-row.usr .ihse-bubble {
  background: #1D9E75 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom-right-radius: 4px !important;
}

/* ── Timestamp ──────────────────────────────────────────────── */
#ihse-chatbot .ihse-time {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  margin-top: 3px !important;
  padding: 0 3px !important;
  line-height: 1.4 !important;
  background: none !important;
  border: none !important;
}
#ihse-chatbot .ihse-row.usr .ihse-time { text-align: right !important; }

/* ── Option buttons wrapper ─────────────────────────────────── */
#ihse-chatbot .ihse-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-top: 6px !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* ── Option buttons ─────────────────────────────────────────── */
#ihse-chatbot button.ihse-opt-btn {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 9px 13px !important;
  margin: 0 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  color: #1D9E75 !important;
  background: #ffffff !important;
  border: 1px solid #1D9E75 !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  float: none !important;
  position: static !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}
#ihse-chatbot button.ihse-opt-btn:hover {
  background: #e8faf3 !important;
  color: #1D9E75 !important;
  border-color: #1D9E75 !important;
  box-shadow: none !important;
  transform: none !important;
}
#ihse-chatbot button.ihse-opt-btn:active  { background: #d0f5e8 !important; transform: scale(0.98) !important; }
#ihse-chatbot button.ihse-opt-btn:focus   { outline: 2px solid #1D9E75 !important; outline-offset: 1px !important; }
#ihse-chatbot button.ihse-opt-btn:disabled {
  opacity: 0.38 !important; cursor: default !important;
  transform: none !important; background: #ffffff !important;
  pointer-events: none !important;
}
#ihse-chatbot button.ihse-opt-btn.rtl { text-align: right !important; direction: rtl !important; }

/* ── Typing indicator ───────────────────────────────────────── */
#ihse-chatbot .ihse-typing {
  display: flex !important; align-items: center !important; gap: 4px !important;
  padding: 10px 14px !important; background: #ffffff !important;
  border: 1px solid #e5e7eb !important; border-radius: 14px !important;
  border-bottom-left-radius: 4px !important; width: fit-content !important;
  margin: 0 !important;
}
#ihse-chatbot .ihse-typing span {
  display: inline-block !important; width: 7px !important; height: 7px !important;
  min-width: 7px !important; border-radius: 50% !important; background: #9ca3af !important;
  padding: 0 !important; margin: 0 !important; border: none !important; font-size: 0 !important;
  animation: ihse-bounce 1.2s infinite !important;
}
#ihse-chatbot .ihse-typing span:nth-child(2) { animation-delay: 0.2s !important; }
#ihse-chatbot .ihse-typing span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes ihse-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}

/* ── Contact form ───────────────────────────────────────────── */
#ihse-chatbot .ihse-contact-form {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  border-bottom-left-radius: 4px !important;
  padding: 14px !important;
  width: 100% !important;
  max-width: 88% !important;
  margin: 0 !important;
}

#ihse-chatbot .ihse-field-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 4px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

#ihse-chatbot .ihse-field-label:first-child { margin-top: 0 !important; }

#ihse-chatbot input.ihse-input,
#ihse-chatbot textarea.ihse-input {
  display: block !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  color: #111827 !important;
  background: #f9fafb !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s !important;
}
#ihse-chatbot input.ihse-input:focus,
#ihse-chatbot textarea.ihse-input:focus {
  border-color: #1D9E75 !important;
  background: #fff !important;
}
#ihse-chatbot textarea.ihse-input {
  resize: vertical !important;
  min-height: 80px !important;
  line-height: 1.5 !important;
}

#ihse-chatbot button.ihse-submit-btn {
  display: block !important;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 10px 14px !important;
  background: #1D9E75 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  cursor: pointer !important;
  text-align: center !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background 0.15s !important;
  -webkit-appearance: none !important;
}
#ihse-chatbot button.ihse-submit-btn:hover   { background: #179162 !important; }
#ihse-chatbot button.ihse-submit-btn:active  { background: #137a55 !important; }
#ihse-chatbot button.ihse-submit-btn:disabled {
  opacity: 0.55 !important; cursor: default !important; background: #1D9E75 !important;
}

#ihse-chatbot .ihse-form-note {
  font-size: 11px !important;
  color: #9ca3af !important;
  margin-top: 8px !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  display: block !important;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
#ihse-chatbot #ihse-messages::-webkit-scrollbar       { width: 4px; }
#ihse-chatbot #ihse-messages::-webkit-scrollbar-track { background: transparent; }
#ihse-chatbot #ihse-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }