/* =============================================================================
   Nimbus Chat – Alternative Color & SVG Update (Light Theme)
   (Only colors and SVG assets are changed; all spacing and typography remain)
============================================================================= */

/* Body */
.chatterkb-body {
  background-color: #F5F5F5;        /* Very light tone */
  /* Optional subtle grid pattern */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23F5F5F5'/%3E%3Cpath d='M0 0 L200 200 M200 0 L0 200' stroke='%23E0E0E0' stroke-width='1'/%3E%3C/svg%3E");
  font-family: 'Poppins', Arial, sans-serif;
}

/* Off-Canvas Sidebar */
.chatterkb-offcanvas {
  background-color: #ffffff;        /* White background */
  color: #37474F;                   /* Blue–gray text */
}

/* Knowledge Base Card (Main Chat Panel) */
.chatterkb-card {
  background-color: #ECEFF1;        /* Light blue–gray tone */
  /* Subtle patterned background using blue–gray shades */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.05'%3E%3Cpolygon fill='%23455A64' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23455A64' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23455A64' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23455A64' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23455A64' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23455A64' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23455A64' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23455A64' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23455A64' points='990 150 1080 0 900 0'/%3E%3C/g%3E%3C/svg%3E");
  color: #37474F;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-card-kb-name {
  color: #37474F;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-card-kb-description {
  color: #607D8B;
  font-family: 'Poppins', Arial, sans-serif;
}

/* Brand Text (Logo Text) */
.chatterkb-brand-text {
  color: #607D8B;
  font-family: 'Poppins', Arial, sans-serif;
}

/* Subscribe & Sign-Up Buttons */
.chatterkb-join-subscribe-btn {
  background-color: #4FC3F7;       /* Fun light blue */
  border: 1px solid #4FC3F7;
  color: #ffffff;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-join-subscribe-btn:hover {
  background-color: #039BE5;       /* Deeper blue on hover */
  color: #ffffff;
}

.chatterkb-join-sign-up-btn {
  background-color: #4FC3F7;       /* Fun light blue */
  border: 1px solid #4FC3F7;
  color: #ffffff;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-join-sign-up-btn:hover {
  background-color: #039BE5;       /* Deeper blue on hover */
  color: #ffffff;
}

.chatterkb-join-sign-in-btn {
  background-color: #607D8B;
  color: #ffffff;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-join-sign-in-btn:hover {
  background-color: #455A64;
  color: #ffffff;
}

.chatterkb-join-unsubscribe-btn {
  background-color: #607D8B;
  color: #ffffff;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-join-unsubscribe-btn:hover {
  background-color: #455A64;
  color: #ffffff;
}

/* Navigation Links */
.chatterkb-nav-link {
  color: #607D8B !important;
}

/* Conversation Title */
.chatterkb-conversation-name {
  color: #37474F !important;
  font-family: 'Poppins', Arial, sans-serif;
}

/* New Chat Button */
.chatterkb-new-chat-btn {
  background-color: #607D8B;
  color: #ffffff;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-new-chat-btn:hover {
  background-color: #455A64;
}

/* Response Button (e.g., quick replies) */
.chatterkb-response-button {
  color: #607D8B !important;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-response-button:hover {
  background-color: #CFD8DC !important;
  color: #ffffff !important;
}

/* Chat Sidebar */
.chatterkb-chat-sidebar {
  background-color: #ffffff;
  color: #37474F;
}

/* Conversations List Group */
.chatterkb-conversations-list-group {
  background-color: #FAFAFA !important;
}

.chatterkb-conversations-list-item {
  background-color: #f8f9fa;
  color: #6c757d;
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-conversations-list-item:hover {
  background-color: #ECEFF1;
}

.chatterkb-conversations-list-item.active {
  background-color: #B0BEC5 !important;
  color: #37474F;
}

/* Chat Prompt (User Input/Message Preview) */
.chatterkb-prompt {
  background-color: #FFFFFF;
}

/* Chat Response (Messages) */
.chatterkb-response {
  color: #37474F !important;
  /* (Background-color intentionally not set here so individual messages can vary) */
}

/* Input Text Field */
.chatterkb-input-text {
  background-color: #ffffff;
  border: 1px solid #CFD8DC;
}

/* Input Container (Light Theme) */
.chatterkb-input-container {
  background-color: #ffffff;
  border-top: 1px solid #CFD8DC;
}

/* Footer (Light Theme) */
.chatterkb-footer {
  background-color: #ECEFF1;
  color: #607D8B;
}

.chatterkb-chat-new-btn {
  background-color: #607D8B;
  color: #ffffff;
  border-radius: 4px;
}

.chatterkb-chat-new-btn:hover {
  background-color: #455A64;
}

/* Send Button (Light Theme) */
.chatterkb-chat-send-btn {
  background-color: #607D8B;
  color: #ffffff;
  border-radius: 4px;
}

.chatterkb-chat-send-btn:hover {
  background-color: #455A64;
}


/* =============================================================================
   Nimbus Chat – Dark Theme Overrides
============================================================================= */

.chatterkb-body[data-bs-theme="dark"] {
  background-color: #263238;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23263238'/%3E%3Cpath d='M0 0 L200 200 M200 0 L0 200' stroke='%2337474F' stroke-width='1'/%3E%3C/svg%3E");
  font-family: 'Poppins', Arial, sans-serif;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-offcanvas {
  background-color: #263238;        /* Dark blue–gray background */
  color: #ECEFF1;                   /* Light text */
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-card {
  background-color: #37474F;        /* Darker card background */
  /* Pattern with a lighter fill for subtle contrast */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.05'%3E%3Cpolygon fill='%2390A4AE' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%2390A4AE' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%2390A4AE' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%2390A4AE' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%2390A4AE' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%2390A4AE' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%2390A4AE' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%2390A4AE' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%2390A4AE' points='990 150 1080 0 900 0'/%3E%3C/g%3E%3C/svg%3E");
  color: #ECEFF1;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-card-kb-name {
  color: #ECEFF1;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-card-kb-description {
  color: #B0BEC5;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-subscribe-btn {
  /* Keep the same bright blue buttons */
  background-color: #4FC3F7;
  border: 1px solid #4FC3F7;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-subscribe-btn:hover {
  background-color: #039BE5;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-sign-up-btn {
  background-color: #4FC3F7;
  border: 1px solid #4FC3F7;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-sign-up-btn:hover {
  background-color: #039BE5;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-sign-in-btn {
  background-color: #607D8B;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-sign-in-btn:hover {
  background-color: #455A64;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-unsubscribe-btn {
  background-color: #607D8B;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-join-unsubscribe-btn:hover {
  background-color: #455A64;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-nav-link {
  color: #90A4AE !important;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-conversation-name {
  color: #ECEFF1 !important;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-new-chat-btn {
  background-color: #455A64;
  color: #ffffff;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-new-chat-btn:hover {
  background-color: #607D8B;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-response-button {
  color: #90A4AE !important;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-response-button:hover {
  background-color: #455A64 !important;
  color: #ffffff !important;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-chat-sidebar {
  background-color: #212529;
  color: #f8f9fa;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-conversations-list-group {
  background-color: #37474F !important;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-conversations-list-item {
  background-color: #343a40;
  color: #adb5bd;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-conversations-list-item:hover {
  background-color: #455A64;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-conversations-list-item.active {
  background-color: #607D8B !important;
  color: #ECEFF1;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-prompt {
  background-color: #424242;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-response {
  color: #ECEFF1 !important;
  background-color: #455A64;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-input-text {
  background-color: #37474F;
  border: 1px solid #607D8B;
  color: #ECEFF1;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-input-container {
  background-color: #37474F;
  border-top: 1px solid #607D8B;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-footer {
  background-color: #37474F;
  color: #CFD8DC;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-chat-send-btn {
  background-color: #607D8B;
  color: #ffffff;
  border-radius: 4px;
}

.chatterkb-body[data-bs-theme="dark"] .chatterkb-chat-send-btn:hover {
  background-color: #455A64;
}