/*--------------------------------------------------------------
# Demo Section Styles
--------------------------------------------------------------*/
:root {
    --burgundy-primary: #800020;
    --burgundy-dark: #5c0018;
    --burgundy-light: #b3385e;
    --chat-bg-dark: #343541;
    --chat-sidebar-bg: #202123;
    --chat-input-bg: #40414f;
    --chat-user-bubble: #0d6efd; /* Bootstrap primary blue for user */
    --chat-assistant-bubble: #6c757d; /* Bootstrap secondary gray for assistant */
    --chat-text-light: #f8f9fa;
    --chat-text-dark: #212529;
    --chat-border-color: #454653;
}

.demo-header {
    background: linear-gradient(to right, var(--burgundy-primary), var(--burgundy-dark));
    color: white;
    position: relative;
}

.demo-header-decoration {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.1;
}

.demo-header-decoration > div {
    position: absolute;
    background-color: white;
    border-radius: 50%;
}

.chatbox-container-wrapper {
    height: 70vh;
    max-height: 600px;
    min-height: 450px;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
}

.chatbox-body {
    font-family: 'Inter', sans-serif;
    background-color: var(--chat-bg-dark);
    color: var(--chat-text-light);
    height: 100%;
    display: flex;
}

.chat-sidebar {
    background-color: var(--chat-sidebar-bg);
    border-right: 1px solid var(--chat-border-color);
    width: 250px; /* Fixed width for sidebar */
}

.chat-sidebar .nav-link {
    color: #adb5bd; /* Lighter gray for inactive links */
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chat-sidebar .nav-link:hover {
    background-color: #495057;
    color: var(--chat-text-light);
}

.chat-sidebar .nav-link.active {
    background-color: var(--chat-bg-dark);
    color: var(--chat-text-light);
    font-weight: 500;
}

.chat-sidebar .btn-new-chat {
    background-color: var(--chat-bg-dark);
    border: 1px solid var(--chat-border-color);
}

.chat-sidebar .btn-new-chat:hover {
    background-color: #495057;
}

.chat-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Takes remaining space */
}

.chat-header {
    background: linear-gradient(to right, #10a37f, #0d8f6f);
    color: white;
    border-bottom: 1px solid var(--chat-border-color);
}

.chat-header-decoration {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.15;
}

.chat-header-decoration > div {
    position: absolute;
    background-color: #10a37f; /* ChatGPT-like teal/green color */
    border-radius: 50%;
}

#chatContainer {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--chat-bg-dark); /* Slightly different for contrast if needed */
    padding: 1rem;
}

.message-wrapper {
    margin-bottom: 1rem;
    display: flex;
}

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

.message-wrapper.assistant {
    justify-content: flex-start;
}

.message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    max-width: 75%;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-bubble.user {
    background-color: var(--chat-user-bubble);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.message-bubble.assistant {
    background-color: var(--chat-assistant-bubble);
    color: white;
    border-bottom-left-radius: 0.25rem;
}

.message-bubble.loading {
     background-color: var(--chat-assistant-bubble);
     color: white;
     border-bottom-left-radius: 0.25rem;
}

.chat-footer {
    background-color: var(--chat-input-bg);
    border-top: 1px solid var(--chat-border-color);
}

#messageInput {
    background-color: var(--chat-input-bg);
    color: var(--chat-text-light);
    border-color: #6c757d; /* Bootstrap secondary */
    resize: none;
}

#messageInput::placeholder {
    color: #adb5bd;
}

#messageInput:focus {
    background-color: var(--chat-input-bg);
    color: var(--chat-text-light);
    border-color: #0d6efd; /* Bootstrap primary */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#sendButton {
    background-color: #198754; /* Bootstrap success */
    border-color: #198754;
}

#sendButton:hover {
    background-color: #157347;
    border-color: #146c43;
}

/* Custom styling for HTML content within messages */
.message-bubble .prose-custom-html img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem; /* rounded-lg */
}

.message-bubble .prose-custom-html h3,
.message-bubble .prose-custom-html h4 {
    color: var(--chat-text-light); /* Ensure heading color contrasts with bubble */
    margin-bottom: 0.5rem;
}

.message-bubble .prose-custom-html p {
    color: #e9ecef; /* Slightly lighter text for paragraphs */
    margin-bottom: 0.75rem;
}

.message-bubble .prose-custom-html ul {
    list-style: none;
    padding-left: 0;
}

.message-bubble .prose-custom-html li {
    color: #e9ecef;
    margin-bottom: 0.25rem;
}

.message-bubble .prose-custom-html a {
    color: #60a5fa; /* A light blue for links */
    text-decoration: underline;
}

.message-bubble .prose-custom-html a:hover {
    color: #93c5fd;
}

.message-bubble .card { /* For embedded cards in messages */
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent card */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--chat-text-light);
}

.message-bubble .card-title {
    color: var(--chat-text-light);
}

.message-bubble .card-text {
    color: #e0e0e0;
    font-size: 0.875rem;
}

.message-bubble .list-group-item {
    background-color: transparent;
    border-color: rgba(255,255,255,0.15);
    color: #e0e0e0;
    font-size: 0.875rem;
}

.message-bubble .btn-link-website {
    font-size: 0.875rem;
    color: #90cdf4; /* Light blue for link button */
}

.message-bubble .btn-link-website:hover {
    color: #63b3ed;
}

/* Animation for messages */
.message-enter {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.message-enter-active {
    opacity: 1;
    transform: translateY(0);
}

/* Scrollbar for chat container - WebKit */
#chatContainer::-webkit-scrollbar {
    width: 8px;
}

#chatContainer::-webkit-scrollbar-track {
    background: var(--chat-sidebar-bg);
}

#chatContainer::-webkit-scrollbar-thumb {
    background-color: #6c757d; /* Bootstrap secondary */
    border-radius: 4px;
    border: 2px solid var(--chat-sidebar-bg);
}

#chatContainer::-webkit-scrollbar-thumb:hover {
    background-color: #5a6268;
}

/* Scrollbar for sidebar - WebKit */
.chat-sidebar .flex-fill::-webkit-scrollbar {
    width: 6px;
}

.chat-sidebar .flex-fill::-webkit-scrollbar-track {
    background: var(--chat-sidebar-bg);
}

.chat-sidebar .flex-fill::-webkit-scrollbar-thumb {
    background-color: #495057;
    border-radius: 3px;
}

/* Demo chatbot width constraint */
.demo-chat-card {
    max-width: 900px;
    margin: 0 auto;
}