/* CSS Variables for Colors - Used for dynamic WordPress options */
:root {
  /* Bubbles */
  --chat-message-bot-bg: #ffffff;
  --chat-message-bot-text: #1f2937;
  --chat-message-user-bg: #2563eb;
  --chat-message-user-text: #ffffff;
  --chat-error-bg: #fee2e2;
  --chat-error-text: #991b1b;

  /* Layout */
  --chat-header-bg: #2563eb;
  --chat-header-icon: #ffffff;
  --chat-surface-bg: #ffffff;
  --chat-surface-border: #e5e7eb;

  /* Input */
  --chat-input-bg: #f9fafb;
  --chat-input-text: #111827;
  --chat-input-placeholder: #9ca3af;
  --chat-input-border: #d1d5db;
  --chat-input-focus: #2563eb;

  /* Send button */
  --chat-send-bg: #2563eb;
  --chat-send-text: #ffffff;
  --chat-send-hover-bg: #1d4ed8;

  /* Icons */
  --chat-icon-color: #4b5563;

  /* Scrollbar */
  --chat-scrollbar: #e5e7eb;
  --chat-scrollbar-thumb: #9ca3af;
}

/* Chatbox Widget (for widget.php) - Styles are handled by Tailwind, keeping only necessary overrides */
#widgetContainer {
  position: fixed;
  bottom: 20px;
}

#chatboxWacChatWidget {
  max-height: calc(100vh - 120px);
}

#widgetButton {
  flex-shrink: 0;
}

#mensajesWacChatWidget {
  scrollbar-width: thin;
  scrollbar-color: var(--chat-scrollbar-thumb) var(--chat-scrollbar);
  scroll-behavior: smooth;
}

#mensajesWacChatWidget::-webkit-scrollbar {
  width: 4px;
}

#mensajesWacChatWidget::-webkit-scrollbar-thumb {
  background: var(--chat-scrollbar-thumb);
  border-radius: 2px;
}

#mensajesWacChatWidget::-webkit-scrollbar-track {
  background: var(--chat-scrollbar);
  border-radius: 2px;
}

/* Widget button icon sizing */
#enviarWidget svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  display: block;
}

/* Container and chatbox sizing */
#wac-chat-container {
  width: 100%;
  max-width: 100%;
}

/* Messages Container - Scrollbar customization and smooth scroll */
#mensajesWacChat {
  scrollbar-width: thin;
  scrollbar-color: var(--chat-scrollbar-thumb) var(--chat-scrollbar);
  scroll-behavior: smooth;
}

/* Webkit Scrollbar Styles */
#mensajesWacChat::-webkit-scrollbar {
  width: 6px;
}

#mensajesWacChat::-webkit-scrollbar-thumb {
  background: var(--chat-scrollbar-thumb);
  border-radius: 3px;
}

#mensajesWacChat::-webkit-scrollbar-track {
  background: var(--chat-scrollbar);
  border-radius: 3px;
}

/* Message Styles - Override with CSS variables if needed */
.message-bot {
  background-color: var(--chat-message-bot-bg) !important;
  color: var(--chat-message-bot-text) !important;
}

.message-user {
  background-color: var(--chat-message-user-bg) !important;
  color: var(--chat-message-user-text) !important;
}

.message-error {
  background-color: var(--chat-error-bg) !important;
  color: var(--chat-error-text) !important;
}

/* Legacy class support - Used in chatbox.php */
.mssgChatbot {
  background-color: var(--chat-message-bot-bg) !important;
}

.mssgUsuario {
  background-color: var(--chat-message-user-bg) !important;
  color: var(--chat-message-user-text) !important;
  align-self: flex-end;
  margin-left: auto;
}

.mssgError {
  background-color: var(--chat-error-bg) !important;
  color: var(--chat-error-text) !important;
}

/* Icon sizing & color (unified) */
.wac-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  display: block;
}

/* Stream chat header and actions */
.wac-header {
  background-color: var(--chat-header-bg);
  border-bottom: 1px solid var(--chat-surface-border);
}

.wac-header .wac-icon {
  color: var(--chat-icon-color);
}

.wac-header #eliminar:hover {
  background: rgba(0,0,0,0.05);
}

/* Stream chat surface */
#chatboxWacChat {
  background-color: var(--chat-surface-bg);
  border-color: var(--chat-surface-border);
}

/* Send button (applies to stream, normal, widget) */
.wac-send {
  background-color: var(--chat-send-bg);
  color: var(--chat-icon-color);
}

.wac-send:hover {
  background-color: var(--chat-send-hover-bg);
}

/* Stream chat input */
#textoWacChat::placeholder {
  color: var(--chat-input-placeholder);
}

/* Input focus using primary color */
.wac-input:focus-within {
  border-color: var(--chat-input-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-input-focus) 20%, transparent);
  background-color: #ffffff;
}

.wac-icon {
  color: var(--chat-icon-color);
}

/* Ensure inline SVGs respect currentColor */
.wac-icon-svg,
.wac-icon-svg * {
  fill: currentColor !important;
  stroke: currentColor;
}

/* Input textarea adjustments */
#textoWacChat {
  min-height: 44px;
}

/* Metadata filter selects styling */
.chatFilterSelect,
select.chatFilterSelect,
.chat-input-section select.chatFilterSelect,
.chat-input-section .chatFilterSelect {
  width: auto !important;
  min-width: 150px;
  max-width: 250px;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5;
  border: 1px solid #d1d5db !important;
  border-radius: 0.5rem !important;
  background-color: white !important;
  color: #1f2937;
  transition: all 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem !important;
}

.chatFilterSelect:hover {
  border-color: #9ca3af !important;
}

.chatFilterSelect:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.chatFilterSelect option {
  padding: 0.5rem;
}

.textoInput.chatFilterSelect {
  width: auto !important;
  max-width: 250px !important;
}

.chat-input-section .flex.flex-wrap {
  align-items: flex-start;
}

.chat-input-section .col-12 {
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 250px;
}

/* Typing indicator animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Spinner for old chatbox.php */
#spinnerLoading {
  margin: 0;
  padding: 0;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 40px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #5e5d5d;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/* Responsive adjustments */
@media screen and (max-width: 1556px) {
  #chatboxWacChat {
    width: 90vw;
    max-width: 90vw;
  }
}

@media screen and (max-width: 640px) {
  #chatboxWacChat {
    width: 90vw;
    max-width: 90vw;
    min-height: 400px;
  }
  
  .message-wrapper {
    max-width: 85% !important;
  }
}

@media screen and (max-width: 480px) {
  #chatboxWacChat {
    width: 90vw;
    max-width: 90vw;
    min-height: 350px;
  }
  
  .message-wrapper {
    max-width: 90% !important;
  }
}