/* ============================================
   Aspara Technologies - SalesIQ Custom Theme
   V2 Design System with Purple/Indigo/Teal
   ============================================ */

/* ===== Chat Window Container - REDUCED SIZE ===== */
.zsiq_chatbox,
.zsiq_chatbox.zsiq_theme1,
.zsiq_chatbox.zsiq_theme2,
div[id*="zsiq_chat"],
.siqcht {
  background: #0f172a !important;
  /* slate-950 */
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  /* purple border */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  width: 380px !important;
  /* Force exact width */
  max-width: 380px !important;
  min-width: 380px !important;
  height: 550px !important;
  /* Force exact height */
  max-height: 550px !important;
  min-height: 550px !important;
}

/* Additional size enforcement */
.zsiq_chatbox iframe,
.zsiq_chatbox .zsiq_chatbox_body {
  max-width: 380px !important;
  max-height: 550px !important;
}

/* ===== Chat Launcher Button ===== */
.zsiq_floatmain {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
  /* purple gradient */
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  width: 56px !important;
  /* Slightly smaller */
  height: 56px !important;
}

.zsiq_floatmain:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Purple glow effect */
.zsiq_floatmain::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #a855f7, #8b5cf6);
  filter: blur(8px);
  opacity: 0.5;
  z-index: -1;
}

/* ===== Chat Header ===== */
.zsiq_header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
  padding: 14px 16px !important;
  position: relative !important;
  /* Context for absolute positioning */
  min-height: 60px !important;
}

.zsiq_header .zsiq_min {
  display: none !important;
  /* Hide minimize to avoid clutter */
}

/* Force Close Button to Top Right - CRITICAL */
.zsiq_header .zsiq_close,
.zsiq_close,
.siq_close,
[data-id="zsiq_close"],
.zsiq_chatbox .zsiq_close,
.zsiq_header>.zsiq_close,
.zsiq_cnt .zsiq_close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #94a3b8 !important;
  background: rgba(30, 41, 59, 0.8) !important;
  /* Dark bg for contrast */
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  /* Maximum z-index */
  font-size: 24px !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* Force visible */
  pointer-events: auto !important;
  /* Force clickable */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
}

/* Ensure close button SVG/icon is visible */
.zsiq_close svg,
.zsiq_close span,
.siq_close svg,
.siq_close span {
  pointer-events: none !important;
  /* Let clicks pass through to button */
  color: inherit !important;
  fill: currentColor !important;
}

.zsiq_header .zsiq_close:hover,
.zsiq_close:hover,
.siq_close:hover {
  background: #a855f7 !important;
  /* Purple bg on hover */
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.1) !important;
}

/* Header text */
.zsiq_header .zsiq_cnt {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  /* Slightly smaller */
}

.zsiq_header_text {
  color: #cbd5e1 !important;
  font-size: 12px !important;
}

/* ===== Chat Body/Messages Area ===== */
.zsiq_chatbox .zsiq_chatbox_body,
.zsiq_chatbox .zsiq_cnt {
  background: #0f172a !important;
}

/* Visitor messages (user's messages) */
.zsiq_cuser_msg {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
  /* purple gradient */
  color: #ffffff !important;
  border-radius: 12px 12px 4px 12px !important;
  padding: 9px 12px !important;
  /* Slightly smaller */
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
  font-size: 14px !important;
}

/* Operator messages (bot's messages) */
.zsiq_cagent_msg {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  /* indigo border */
  border-radius: 12px 12px 12px 4px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
}

/* Message timestamps */
.zsiq_time {
  color: #64748b !important;
  font-size: 10px !important;
}

/* ===== Input Area ===== */
.zsiq_flt_rel {
  background: #1e293b !important;
  border-top: 1px solid rgba(139, 92, 246, 0.2) !important;
  padding: 10px !important;
  /* Reduced padding */
}

/* Text input */
.zsiq_chatbox .zsiq_textarea,
.zsiq_chatbox textarea {
  background: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 9px 11px !important;
  /* Slightly smaller */
  font-size: 13px !important;
  min-height: 38px !important;
  /* Reduced height */
}

.zsiq_chatbox .zsiq_textarea:focus,
.zsiq_chatbox textarea:focus {
  border-color: #a855f7 !important;
  /* purple focus */
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1) !important;
}

/* Placeholder text */
.zsiq_chatbox .zsiq_textarea::placeholder,
.zsiq_chatbox textarea::placeholder {
  color: #64748b !important;
}

/* ===== Send Button ===== */
.zsiq_send_btn,
.zsiq_chatbox .zsiq_send {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
  /* purple gradient */
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  /* Slightly smaller */
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  font-size: 13px !important;
}

.zsiq_send_btn:hover,
.zsiq_chatbox .zsiq_send:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* ===== Quick Reply Buttons ===== */
.zsiq_qreply_btn,
.zsiq_bot_btn {
  background: #1e293b !important;
  color: #a855f7 !important;
  /* purple text */
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  /* Smaller */
  transition: all 0.2s ease !important;
  font-size: 13px !important;
}

.zsiq_qreply_btn:hover,
.zsiq_bot_btn:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: #a855f7 !important;
  transform: translateY(-1px) !important;
}

/* ===== Typing Indicator ===== */
.zsiq_typing_indicator {
  background: #1e293b !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
}

.zsiq_typing_dot {
  background: #a855f7 !important;
  /* purple dots */
}

/* ===== Scrollbar ===== */
.zsiq_chatbox ::-webkit-scrollbar {
  width: 5px !important;
  /* Thinner scrollbar */
}

.zsiq_chatbox ::-webkit-scrollbar-track {
  background: #1e293b !important;
}

.zsiq_chatbox ::-webkit-scrollbar-thumb {
  background: #475569 !important;
  border-radius: 3px !important;
}

.zsiq_chatbox ::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* ===== Glassmorphic Effect ===== */
.zsiq_chatbox {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ===== Links in Messages ===== */
.zsiq_chatbox a {
  color: #14b8a6 !important;
  /* teal links for contrast */
  text-decoration: underline !important;
}

.zsiq_chatbox a:hover {
  color: #2dd4bf !important;
  /* lighter teal */
}

/* ===== File Upload Area ===== */
.zsiq_upload {
  background: #1e293b !important;
  border: 2px dashed rgba(168, 85, 247, 0.3) !important;
  border-radius: 8px !important;
}

/* ===== Rating Stars ===== */
.zsiq_rating_star {
  color: #64748b !important;
}

.zsiq_rating_star.selected,
.zsiq_rating_star:hover {
  color: #fbbf24 !important;
  /* amber for ratings */
}

/* ===== Notification Badge ===== */
.zsiq_unreadcnt {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 640px) {
  .zsiq_chatbox {
    border-radius: 0 !important;
    height: 100vh !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .zsiq_floatmain {
    bottom: 16px !important;
    right: 16px !important;
    width: 54px !important;
    height: 54px !important;
  }
}

/* ===== Pre-chat Form ===== */
.zsiq_prechat_form {
  background: #0f172a !important;
}

.zsiq_prechat_form input,
.zsiq_prechat_form textarea,
.zsiq_prechat_form select {
  background: #1e293b !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 9px 11px !important;
}

.zsiq_prechat_form input:focus,
.zsiq_prechat_form textarea:focus,
.zsiq_prechat_form select:focus {
  border-color: #a855f7 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1) !important;
}

.zsiq_prechat_form label {
  color: #cbd5e1 !important;
  font-size: 13px !important;
}

/* Submit button in pre-chat form */
.zsiq_prechat_form button[type="submit"],
.zsiq_prechat_submit {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ===== Department/Category Selection ===== */
.zsiq_dept_name {
  color: #e2e8f0 !important;
  font-size: 13px !important;
}

/* ===== Powered by Footer ===== */
.zsiq_footer {
  opacity: 0.5 !important;
  font-size: 11px !important;
}

/* ===== Smooth Animations ===== */
.zsiq_chatbox,
.zsiq_floatmain,
.zsiq_qreply_btn,
.zsiq_bot_btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== Accent Colors for Special Elements ===== */
.zsiq_online_indicator {
  background: #14b8a6 !important;
  /* teal for online */
}

.zsiq_offline_indicator {
  background: #64748b !important;
  /* gray for offline */
}

/* ===== Compact Mode Adjustments ===== */
.zsiq_chatbox .zsiq_msg {
  margin-bottom: 10px !important;
  /* Reduced spacing between messages */
}

.zsiq_chatbox .zsiq_agent_img,
.zsiq_chatbox .zsiq_visitor_img {
  width: 28px !important;
  /* Smaller avatars */
  height: 28px !important;
}

/* ===== End of Custom Styles ===== */