/* Black & White Glassmorphism Theme for Chat Widget */

/* Override the base chat widget styles with black and white theme */
.token-chat-widget {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

.chat-widget-header {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px 20px 0 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chat-widget-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.chat-widget-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-widget-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-widget-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.chat-widget-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ai-message {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    0 2px 8px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
  padding: 10px 14px !important;
  min-height: auto !important;
  height: auto !important;
}

.user-message {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 2px 8px 0 rgba(0, 0, 0, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  padding: 10px 14px !important;
  min-height: auto !important;
  height: auto !important;
}

.chat-widget-input-container {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 0 20px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chat-widget-input {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.chat-widget-input:focus {
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.chat-widget-send {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 2px 8px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

.chat-widget-send:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 4px 12px 0 rgba(0, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

.chat-toggle-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 4px 16px 0 rgba(0, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

.chat-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 6px 20px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

.typing-indicator {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 14px !important;
  min-height: auto !important;
  height: auto !important;
}

.typing-dots span {
  background: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
}

.chat-widget {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 2px 8px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

/* Remove animation for cleaner black/white look */
.token-chat-widget.open {
  animation: none !important;
}

/* Ensure text doesn't overflow and messages adjust height */
.chat-message {
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  min-height: auto !important;
  height: auto !important;
  margin-bottom: 4px !important;
}

.chat-message * {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Make sure messages have dynamic height based on content */
.chat-message p {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  padding-bottom: 2px !important;
}

/* Additional styling for clean black and white theme */
.chat-widget-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Make all icons white */
.chat-ai-icon,
.chat-widget-close img,
.chat-widget-send img,
.chat-toggle-btn img {
  filter: brightness(0) invert(1) !important;
}

/* Make scrollbar match black/white theme */
.chat-widget-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-widget-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* Ensure proper spacing between messages */
.chat-widget-messages {
  gap: 12px !important;
  padding-bottom: 5px !important;
}