langflow-chatbot/dist/styles/langflow-chatbot.css

Add a Langflow-powered chatbot to your website.

/* === Langflow Chatbot Styles === */

:root {
    /* Palette Colors */
    --langflow-chatbot-palette-primary: #007bff;
    --langflow-chatbot-palette-primary-hover: #0056b3; /* For hover states of primary elements */
    --langflow-chatbot-palette-primary-text: white;   /* Text color for on-primary backgrounds */

    --langflow-chatbot-palette-background-widget: #fff;
    --langflow-chatbot-palette-background-input-area: #f8f9fa;
    --langflow-chatbot-palette-background-bot-message: #f0f0f0; /* Also for thinking bubble */

    --langflow-chatbot-palette-text-main: #333;         /* Primary text on light backgrounds */
    --langflow-chatbot-palette-text-secondary: #555;    /* For less prominent text like sender names */
    --langflow-chatbot-palette-text-on-dark-bg: #888; /* For thinking dots on their specific bg */

    --langflow-chatbot-palette-border-light: #e0e0e0;    /* Lighter borders (e.g., message area separator) */
    --langflow-chatbot-palette-border-input: #ced4da;   /* Input field border */

    --langflow-chatbot-palette-focus-ring: rgba(0,123,255,.25); /* For input focus shadow */
    --langflow-chatbot-palette-disabled-background: #a0a0a0; /* For disabled buttons */
    --langflow-chatbot-palette-shadow-fab: rgba(0,0,0,0.2);
    --langflow-chatbot-palette-shadow-panel: rgba(0,0,0,0.3);

    --langflow-chatbot-palette-error-text: #D8000C;
    --langflow-chatbot-palette-error-background: #FFD2D2;

    /* General Widget Styles */
    --langflow-chatbot-widget-background: var(--langflow-chatbot-palette-background-widget);
    --langflow-chatbot-widget-border-radius: 8px;
    --langflow-chatbot-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    /* Header Styles */
    --langflow-chatbot-header-background: var(--langflow-chatbot-palette-primary);
    --langflow-chatbot-header-text-color: var(--langflow-chatbot-palette-primary-text);
    --langflow-chatbot-header-icon-color: var(--langflow-chatbot-palette-primary-text); /* For icons like minimize */

    /* Message Area Styles */
    --langflow-chatbot-messages-border-color: var(--langflow-chatbot-palette-border-light);

    /* User Message Styles */
    --langflow-chatbot-user-message-background: var(--langflow-chatbot-palette-primary);
    --langflow-chatbot-user-message-text-color: var(--langflow-chatbot-palette-primary-text);
    --langflow-chatbot-user-message-bubble-border-radius: 18px;
    --langflow-chatbot-user-message-bubble-tail-border-radius: 6px;

    /* Bot Message Styles */
    --langflow-chatbot-bot-message-background: var(--langflow-chatbot-palette-background-bot-message);
    --langflow-chatbot-bot-message-text-color: var(--langflow-chatbot-palette-text-main);
    --langflow-chatbot-bot-message-bubble-border-radius: 18px;
    --langflow-chatbot-bot-message-bubble-tail-border-radius: 6px;

    /* Sender Name Styles */
    --langflow-chatbot-sender-name-text-color: var(--langflow-chatbot-palette-text-secondary);

    /* Thinking Indicator Styles */
    --langflow-chatbot-thinking-bubble-background: var(--langflow-chatbot-palette-background-bot-message);
    --langflow-chatbot-thinking-dot-color: var(--langflow-chatbot-palette-text-on-dark-bg);


    /* Input Area Styles */
    --langflow-chatbot-input-area-background: var(--langflow-chatbot-palette-background-input-area);
    --langflow-chatbot-input-area-border-color: var(--langflow-chatbot-palette-border-light);
    --langflow-chatbot-input-text-border-color: var(--langflow-chatbot-palette-border-input);
    --langflow-chatbot-input-text-border-radius: 18px;
    --langflow-chatbot-input-text-focus-border-color: var(--langflow-chatbot-palette-primary);
    --langflow-chatbot-input-text-focus-shadow: 0 0 0 0.2rem var(--langflow-chatbot-palette-focus-ring);

    /* Send Button Styles */
    --langflow-chatbot-send-button-background: var(--langflow-chatbot-palette-primary);
    --langflow-chatbot-send-button-text-color: var(--langflow-chatbot-palette-primary-text);
    --langflow-chatbot-send-button-border-radius: 18px;
    --langflow-chatbot-send-button-hover-background: var(--langflow-chatbot-palette-primary-hover);
    --langflow-chatbot-send-button-disabled-background: var(--langflow-chatbot-palette-disabled-background);

    /* Floating Action Button (FAB) Styles */
    --langflow-chatbot-fab-background: var(--langflow-chatbot-palette-primary);
    --langflow-chatbot-fab-icon-color: var(--langflow-chatbot-palette-primary-text);
    --langflow-chatbot-fab-hover-transform: scale(1.1);
    --langflow-chatbot-fab-shadow: 0 4px 8px var(--langflow-chatbot-palette-shadow-fab);

    /* Floating Chat Panel Styles */
    --langflow-chatbot-floating-panel-background: var(--langflow-chatbot-palette-background-widget);
    --langflow-chatbot-floating-panel-border-radius: 8px;
    --langflow-chatbot-floating-panel-shadow: 0 5px 15px var(--langflow-chatbot-palette-shadow-panel);

    --langflow-chatbot-message-datetime-font-size: 0.8em;

    /* Customizable Floating Panel Dimensions */
    --langflow-floating-panel-width: 600px; /* Default width */
    --langflow-floating-panel-max-width: 95vw; /* Responsive max width */
    --langflow-floating-panel-min-width: 300px; /* Optional: for responsiveness */
    
    /* Responsive Breakpoints */
    --langflow-floating-panel-tablet-width: 600px; /* Width for tablet screens */
    --langflow-floating-panel-tablet-max-width: 90vw; /* Max width for tablet screens */
    --langflow-floating-panel-mobile-width: 100vw; /* Width for mobile screens */
    --langflow-floating-panel-mobile-max-width: 100vw; /* Max width for mobile screens */
}

/* --- Core Chat Widget Structure --- */
.chat-widget {
    display: flex;
    flex-direction: column;
    height: 70vh; 
    max-height: 500px; 
    background-color: var(--langflow-chatbot-widget-background); 
    font-family: var(--langflow-chatbot-font-family);
    border-radius: var(--langflow-chatbot-widget-border-radius); /* Rounded corners for the entire widget */
    box-sizing: border-box;
}

/* --- Chat Messages Area --- */
.chat-widget .chat-messages {
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 10px; 
    border-bottom: 1px solid var(--langflow-chatbot-messages-border-color); /* Separator line above input area */
}

/* --- Individual Messages --- */
.chat-widget .message-block {
    margin-bottom: 15px;
    padding: 5px 10px; /* Padding around the entire message block (sender + bubble) */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.chat-widget .message-bubble {
    padding: 10px 14px;
    border-radius: 18px; /* General bubble shape */
    display: inline-block;
    max-width: 85%;
    line-height: 1.4;
    box-sizing: border-box;
}

.chat-widget .sender-name-display {
    font-size: 0.8em;
    color: var(--langflow-chatbot-sender-name-text-color);
    margin-bottom: 3px;
    margin-top: 0;
    padding: 0;
}

.chat-widget .user-message.message-block {
    align-items: flex-end; /* Align user messages to the right */
}

.chat-widget .user-message .message-bubble {
    background-color: var(--langflow-chatbot-user-message-background); /* Default user message color (can be themed) */
    color: var(--langflow-chatbot-user-message-text-color);
    border-bottom-right-radius: var(--langflow-chatbot-user-message-bubble-tail-border-radius); /* Slightly different rounding for "tail" effect */
}

.chat-widget .user-message .message-datetime {
    text-align: right;
    color: var(--langflow-chatbot-sender-name-text-color);
    font-size: var(--langflow-chatbot-message-datetime-font-size);
    margin-top: 2px;
    margin-bottom: 0;
    padding: 0;
}

.chat-widget .bot-message.message-block {
    align-items: flex-start; /* Align bot messages to the left */
}

.chat-widget .bot-message .message-bubble {
    background-color: var(--langflow-chatbot-bot-message-background); /* Default bot message color */
    color: var(--langflow-chatbot-bot-message-text-color);
    border-bottom-left-radius: var(--langflow-chatbot-bot-message-bubble-tail-border-radius); /* Slightly different rounding for "tail" effect */
}

.chat-widget .bot-message .message-datetime {
    text-align: left;
    color: var(--langflow-chatbot-sender-name-text-color);
    font-size: var(--langflow-chatbot-message-datetime-font-size);
    margin-top: 2px;
    margin-bottom: 0;
    padding: 0;
} 

/* --- Thinking Indicator --- */
.chat-widget .thinking-bubble {
    display: inline-block;
    padding: 10px 14px; 
    background-color: var(--langflow-chatbot-thinking-bubble-background); 
    border-radius: 18px;
    border-bottom-left-radius: var(--langflow-chatbot-bot-message-bubble-tail-border-radius); 
    line-height: 1; 
    margin: 0;
    box-sizing: border-box;
}

.chat-widget .thinking-bubble span.dot {
    display: inline-block;
    width: 8px; 
    height: 8px; 
    background-color: var(--langflow-chatbot-thinking-dot-color); 
    border-radius: 50%;
    margin: 0 2px; 
    animation: pensee 1.4s infinite both;
    padding: 0;
}

.chat-widget .thinking-bubble span.dot:nth-child(1) {
    animation-delay: -0.32s;
}

.chat-widget .thinking-bubble span.dot:nth-child(2) {
    animation-delay: -0.16s;
}

/* --- Chat Input Area --- */
.chat-widget .chat-input-area {
    display: flex;
    padding: 10px;
    background-color: var(--langflow-chatbot-input-area-background); /* Light background for the input area */
    border-top: 1px solid var(--langflow-chatbot-input-area-border-color); /* Separator line from messages */
    margin: 0;
    box-sizing: border-box;
}

.chat-widget .chat-input {
    flex-grow: 1;
    border: 1px solid var(--langflow-chatbot-input-text-border-color); /* Standard input border */
    border-radius: var(--langflow-chatbot-input-text-border-radius); /* Rounded input field */
    padding: 10px 15px;
    font-size: 1rem;
    margin-right: 8px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    outline: none;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-sizing: border-box;
}
.chat-widget .chat-input:focus {
    border-color: var(--langflow-chatbot-input-text-focus-border-color); /* Highlight color on focus, can be themed */
    box-shadow: 0 0 0 0.2rem var(--langflow-chatbot-input-text-focus-shadow); /* Glow effect on focus */
}

.chat-widget .send-button {
    border: none;
    background-color: var(--langflow-chatbot-send-button-background); /* Default button color (can be themed) */
    color: var(--langflow-chatbot-send-button-text-color);
    padding: 10px 15px;
    border-radius: var(--langflow-chatbot-send-button-border-radius); /* Rounded button */
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin: 0;
    box-sizing: border-box;
}
.chat-widget .send-button:hover {
    background-color: var(--langflow-chatbot-send-button-hover-background); /* Darker shade on hover */
}
.chat-widget .send-button:disabled {
    background-color: var(--langflow-chatbot-send-button-disabled-background); /* Muted color when disabled */
    cursor: not-allowed;
}

/* Message content specific style (if any) - currently just for text formatting */
.chat-widget .message-bubble .message-text-content {
    white-space: normal; /* Normal whitespace handling for better formatting */
    word-wrap: break-word; /* Break long words to prevent overflow */
    margin: 0;
    padding: 0;
}

/* --- Chat Widget Header (Common for Embedded and Floating) --- */
.chat-widget .chat-widget-header {
    padding: 10px 15px;
    background-color: var(--langflow-chatbot-header-background); /* Default header theme (can be themed) */
    color: var(--langflow-chatbot-header-text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    margin: 0;
    box-sizing: border-box;
}

.chat-widget .chat-widget-header .chat-widget-title-text {
    font-weight: bold;
    text-align: left; /* Ensure title text aligns left */
    margin: 0;
    padding: 0;
}

/* Styles for the minimize button, typically only used in Floating Widget context */
.chat-widget .chat-widget-header .chat-widget-minimize-button {
    background: none;
    border: none;
    color: var(--langflow-chatbot-header-icon-color);
    cursor: pointer;
    padding: 5px; /* Adjust as needed, similar to reset button's padding */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.chat-widget .chat-widget-header .chat-widget-minimize-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor; /* Use button's color property */
}

.chat-widget .chat-widget-reset-button {
    background: none;
    border: none;
    padding: 4px; /* Adjust as needed */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--langflow-chatbot-header-icon-color); /* Match icon color */
    margin: 0;
}

.chat-widget .chat-widget-reset-button svg {
    width: 18px; /* Or your preferred size */
    height: 18px; /* Or your preferred size */
    stroke: currentColor; /* Inherit color from parent button */
}

.chat-widget .chat-widget-reset-button:hover {
    opacity: 0.8; /* Simple hover effect */
}

/* --- Floating Widget Specifics --- */
/* Styles for the floating action button (FAB) */
.floating-chat-button {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--langflow-chatbot-fab-background); /* Default FAB color (can be themed) */
    color: var(--langflow-chatbot-fab-icon-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--langflow-chatbot-fab-shadow);
    z-index: 9998; /* Below the chat window itself */
    transition: transform 0.3s ease-in-out;
}

.floating-chat-button:hover {
    transform: var(--langflow-chatbot-fab-hover-transform);
}

.floating-chat-button svg {
    width: 32px;
    height: 32px;
    fill: var(--langflow-chatbot-fab-icon-color);
}

/* Container for the floating chat window */
.floating-chat-panel {
    position: fixed;
    width: var(--langflow-floating-panel-width); 
    max-width: var(--langflow-floating-panel-max-width);
    min-width: var(--langflow-floating-panel-min-width);
    height: auto; 
    max-height: calc(100vh - 100px); /* Avoid full screen height */
    background-color: var(--langflow-chatbot-floating-panel-background);
    border-radius: var(--langflow-chatbot-floating-panel-border-radius); /* Rounded corners for the floating panel */
    box-shadow: var(--langflow-chatbot-floating-panel-shadow);
    display: none; /* Initially hidden, shown via JS */
    flex-direction: column;
    overflow: hidden; /* Ensures inner ChatWidget respects rounded corners */
    z-index: 9999; /* Above most other content */
    font-family: var(--langflow-chatbot-font-family); /* Ensure consistent font */
}

/* Positioning classes for floating button and container */
.floating-chat-button.bottom-right, .floating-chat-panel.bottom-right {
    bottom: 20px;
    right: 20px;
}
.floating-chat-button.bottom-left, .floating-chat-panel.bottom-left {
    bottom: 20px;
    left: 20px;
}
.floating-chat-button.top-right, .floating-chat-panel.top-right {
    top: 20px;
    right: 20px;
}
.floating-chat-button.top-left, .floating-chat-panel.top-left {
    top: 20px;
    left: 20px;
}

/* Specific styles for the ChatWidget when hosted inside the FloatingPanel */
.floating-chat-panel .chat-widget-inner-host {
    flex-grow: 1;
    position: relative;
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    min-height: 0; 
    box-sizing: border-box;
}

.floating-chat-panel .chat-widget-inner-host .chat-widget {
    height: 100%; 
    max-height: none; 
    box-sizing: border-box;
    min-height: 0;
}

/* Styles for the error message if chat fails to load in floating panel */
.floating-chat-panel .chat-load-error {
    color: var(--langflow-chatbot-palette-error-text);
    background-color: var(--langflow-chatbot-palette-error-background);
    padding: 20px;
    margin: auto; /* Centers the paragraph block in the flex container */
    text-align: center;
    border-radius: var(--langflow-chatbot-widget-border-radius); /* Use existing widget border radius */
}

/* --- Responsive Design --- */
/* Tablet adjustments */
@media screen and (max-width: 992px) {
    .floating-chat-panel {
        width: var(--langflow-floating-panel-tablet-width);
        max-width: var(--langflow-floating-panel-tablet-max-width);
    }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .floating-chat-panel {
        width: var(--langflow-floating-panel-mobile-width);
        max-width: var(--langflow-floating-panel-mobile-max-width);
    }
}

/* --- Animations --- */
@keyframes pensee {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0;
    }
    40% {
        transform: scale(1.0);
        opacity: 1;
    }
}