/**
 * Chat Widget - Client-side Styles
 * Responsive chat bubble and popup
 */

/* ============================================
   CHAT WIDGET BUBBLE
   ============================================ */
.csw-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #615EF0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  overflow: hidden;
}

.csw-bubble:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Chat Icon (shown when closed) */
.csw-bubble-icon {
  width: 24px;
  height: 24px;
  color: #ffffff;
  display: block;
  flex-shrink: 0;
}

/* Avatar (hidden when bubble is closed, only used in popup header) */
.csw-bubble-avatar {
  display: none !important;
}

/* ============================================
   CHAT WIDGET POPUP
   ============================================ */
.csw-popup {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 360px;
  height: 520px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  z-index: 999999;
  overflow: hidden;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
}

.csw-popup.csw-popup--open {
  display: flex;
}

/* ============================================
   POPUP HEADER
   ============================================ */
.csw-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E0E0E0;
  background: #ffffff;
  flex-shrink: 0;
}

.csw-popup-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.csw-popup-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.csw-popup-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.csw-popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #212121;
  margin: 0;
  padding: 0;
}

.csw-popup-status {
  font-size: 12px;
  color: #4CAF50;
}

.csw-popup-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #666666;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.csw-popup-close:hover {
  background: #F5F5F5;
  color: #212121;
}

/* ============================================
   POPUP MESSAGES AREA
   ============================================ */
.csw-popup-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.csw-message {
  display: flex;
  width: 100%;
}

.csw-message--agent {
  justify-content: flex-start;
}

.csw-message--user {
  justify-content: flex-end;
}

.csw-message-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

/* Unified message bubble style - #4F46E5 at 15% opacity for all messages */
.csw-message--agent .csw-message-bubble,
.csw-message--user .csw-message-bubble {
  background: rgba(79, 70, 229, 0.15); /* #4F46E5 at 15% opacity */
  color: #212121; /* Dark text for readability */
}

.csw-message--agent .csw-message-bubble {
  border-bottom-left-radius: 4px;
}

.csw-message--user .csw-message-bubble {
  border-bottom-right-radius: 4px;
}

/* System Messages - WhatsApp/Messenger Style Status Messages */
/* CRITICAL: System messages must NEVER have bubbles, avatars, or left/right alignment */
.csw-message--system {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 0 !important;
  /* Remove any flex alignment that would position it left/right */
  align-self: center !important;
  /* Override any parent flex alignment - no horizontal margins */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Override parent padding to allow full width with minimal spacing (5px from edges) */
  margin-left: -15px !important; /* Compensate for parent 20px padding, leaving 5px */
  margin-right: -15px !important; /* Compensate for parent 20px padding, leaving 5px */
}

/* Ensure system messages NEVER get bubble styling */
.csw-message--system .csw-message-bubble {
  display: none !important;
}

.csw-message-system {
  position: relative;
  padding: 6px 5px !important; /* Minimal horizontal padding: 5px left/right, 6px top/bottom */
  font-size: 12px;
  font-weight: 400;
  color: rgba(68, 68, 68, 0.65) !important; /* Light gray */
  text-align: center !important;
  line-height: 1.4;
  /* NO background bubble - absolutely transparent */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  /* NO box shadow */
  box-shadow: none !important;
  /* Ensure it's centered and uses full available width */
  display: inline-block;
  max-width: 100% !important; /* Use full available width (parent negative margin handles spacing) */
  margin: 0 auto;
  /* Override any inherited styles */
  width: auto !important;
  /* Allow text to wrap only when absolutely necessary, prefer single line */
  white-space: normal;
}

/* Optional: Subtle horizontal separator lines above and below (like WhatsApp) */
.csw-message-system::before,
.csw-message-system::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: rgba(68, 68, 68, 0.15);
}

.csw-message-system::before {
  top: -6px;
}

.csw-message-system::after {
  bottom: -6px;
}

/* ============================================
   POPUP INPUT AREA
   ============================================ */
.csw-popup-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #E0E0E0;
  background: #ffffff;
  flex-shrink: 0;
}

.csw-popup-input-field {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  font-size: 14px;
  color: #212121;
  background: #F5F5F5;
  transition: all 0.2s ease;
}

.csw-popup-input-field:focus {
  outline: none;
  border-color: #1976D2;
  background: #ffffff;
}

.csw-popup-input-field::placeholder {
  color: #999999;
}

.csw-popup-send {
  width: 40px;
  height: 40px;
  border: none;
  background: #1976D2;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.csw-popup-send:hover {
  background: #1565C0;
}

.csw-popup-send:disabled {
  background: #BDBDBD;
  cursor: not-allowed;
}

/* ============================================
   RESPONSIVE: MOBILE (15% smaller)
   ============================================ */
@media (max-width: 768px) {
  .csw-popup {
    width: 306px; /* 85% of 360px */
    height: 442px; /* 85% of 520px */
    bottom: 80px;
    right: 15px;
  }
  
  .csw-bubble {
    bottom: 15px;
    right: 15px;
    width: 56px; /* Slightly smaller on mobile */
    height: 56px;
  }
}

/* Ensure popup never overflows viewport */
@media (max-width: 400px) {
  .csw-popup {
    width: calc(100vw - 30px);
    max-width: 306px;
    right: 15px;
    left: 15px;
    margin: 0 auto;
  }
}

/* Scrollbar styling */
.csw-popup-messages::-webkit-scrollbar {
  width: 6px;
}

.csw-popup-messages::-webkit-scrollbar-track {
  background: #F5F5F5;
}

.csw-popup-messages::-webkit-scrollbar-thumb {
  background: #BDBDBD;
  border-radius: 3px;
}

.csw-popup-messages::-webkit-scrollbar-thumb:hover {
  background: #999999;
}