@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --primary-blue: #1E40AF; /* Deep Factored Blue */
    --surface-white: #FFFFFF;
    --bg-light: #F9FAFB;
    --text-main: #111827;
    --text-muted: #6B7280;
    --bubble-ai: #F8FAFC;
    --bubble-user: #EFF6FF;
}

body, .cl-chat-messages, .cl-message-content {
    background-color: var(--surface-white) !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--text-main) !important;
}

/* Ensure the main container is pure white to match the logo */
main {
    background-color: var(--surface-white) !important;
}

/* Style for the welcome screen and titles */
h1, h2, h3, .cl-welcome-screen-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
}

/* User Message Bubble */
.cl-message[data-author-role="user"] .cl-message-content {
    background-color: var(--bubble-user) !important;
    border-radius: 20px 20px 0px 20px !important;
    border: 1px solid #DBEAFE !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* AI Message Bubble (No bubble, just text on white to merge with background) */
.cl-message[data-author-role="assistant"] .cl-message-content {
    background-color: transparent !important;
    padding-left: 0 !important;
}

/* Thinking Process / Details toggle */
details {
    background-color: var(--bg-light) !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    margin-bottom: 10px !important;
}

details > summary {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    color: var(--text-muted) !important;
}

/* Buttons and Actions */
button {
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* Search Results Cards */
.cl-search-results {
    background-color: var(--bg-light) !important;
    border: 1px solid #E2E8F0 !important;
}
