/* Chat UI Kit theme overrides to align with globals.css variables */

/* Container backgrounds */
.cs-main-container, .cs-chat-container, .cs-message-list, .cs-typing-indicator {
  background: var(--content-card-background) !important;
  color: var(--text-main) !important;
}

/* Header area */
.cs-chat-header, .cs-message-list__typing-indicator-container {
  background: var(--content-card-background) !important;
  border-color: var(--icon-button-secondary) !important;
}

/* Message bubbles */
.cs-message__content {
  background: var(--bubble-background) !important;
  color: var(--bubble-foreground) !important;
  border: 1px solid var(--icon-button-secondary) !important;
}

/* Incoming/outgoing differentiation */
.cs-message--incoming .cs-message__content {
  background: var(--bubble-background) !important;
}
.cs-message--outgoing .cs-message__content {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) !important;
  color: white !important;
  border-color: transparent !important;
}

/* Input area */
.cs-message-input__content-editor, .cs-message-input__content-editor-wrapper {
  background: var(--input-background) !important;
  color: var(--text-main) !important;
}
.cs-message-input, .cs-message-input__tools, .cs-message-input__content-editor-wrapper {
  border-color: var(--icon-button-secondary) !important;
}
.cs-message-input {
  background: var(--content-card-background) !important;
}
.cs-message-input__send-button {
  background: var(--gradient-start) !important;
  color: #fff !important;
}
.cs-message-input__send-button:hover {
  background: var(--icon-accent-hover) !important;
}

/* Placeholder color for chatscope contenteditable */
.cs-message-input__content-editor[data-placeholder]:empty::before {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* Focus outlines/rings - remove white glow and use subtle border */
.cs-message-input__content-editor:focus, .cs-message-input__content-editor-wrapper:focus-within, .cs-message-input:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--icon-button-secondary) !important;
}
.cs-message-input__send-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Custom input in ChatWindowStreaming */
.kyd-chat-input {
  background: var(--input-background);
  color: var(--text-main);
  border-color: var(--icon-button-secondary);
}
.kyd-chat-input::placeholder {
  color: var(--text-secondary);
}
.kyd-chat-input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--icon-button-secondary);
}
.kyd-chat-button {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  color: #fff;
}
.kyd-chat-button:hover {
  background: var(--icon-accent-hover);
}
.kyd-chat-button:focus {
  outline: none;
  box-shadow: none;
}

/* Scrollbar subtle styling */
.cs-message-list::-webkit-scrollbar {
  width: 8px;
}
.cs-message-list::-webkit-scrollbar-thumb {
  background: var(--icon-button-secondary);
  border-radius: 8px;
}

/* Typing indicator */
.cs-typing-indicator__text {
  color: var(--text-secondary) !important;
}

/* Pulsing three dots for assistant placeholder */
.kyd-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kyd-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--text-secondary);
  display: inline-block;
  animation: kyd-bounce 1.2s infinite ease-in-out;
}
.kyd-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.kyd-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kyd-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* Prevent scroll chaining to the page so background doesn't bounce */
.cs-main-container,
.cs-chat-container,
.cs-message-list {
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}