/* Import N8N Chat CSS from CDN */
@import url('https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css');

/* Custom Chatbot Styles */
:root {
    --chat--color-primary: #6610f2;
    --chat--color-primary-shade-50: #5a0ed4;
    --chat--color-primary-shade-100: #5a0ed4;
    --chat--color-secondary: #EDE9FD;
    --chat--color-secondary-shade-50: #e3def8;
    --chat--color-white: #ffffff;
    --chat--color-light: #f2f4f8;
    --chat--color-light-shade-50: #e6e9f1;
    --chat--color-light-shade-100: #c2c5cc;
    --chat--color-medium: #d2d4d9;
    --chat--color-dark: #101330;
    --chat--color-disabled: #cdcdcd;
    --chat--color-typing: #404040;

    --chat--spacing: 1rem;
    --chat--border-radius: 0.25rem;
    --chat--transition-duration: 0.15s;

    --chat--window--width: 400px;
    --chat--window--height: 600px;

    --chat--header-height: auto;
    --chat--header--padding: var(--chat--spacing);
    --chat--header--background: var(--chat--color-primary);
    --chat--header--color: var(--chat--color-light);
    --chat--header--border-top: none;
    --chat--header--border-bottom: none;
    --chat--header--border-bottom: none;
    --chat--header--border-bottom: none;
    --chat--heading--font-size: 2em;
    --chat--header--color: var(--chat--color-light);
    --chat--subtitle--font-size: inherit;
    --chat--subtitle--line-height: 22px;

    --chat--textarea--height: 50px;

    --chat--message--font-size: 1rem;
    --chat--message--padding: var(--chat--spacing);
    --chat--message--border-radius: var(--chat--border-radius);
    --chat--message-line-height: 22px;
    --chat--message--bot--background: var(--chat--color-white);
    --chat--message--bot--color: var(--chat--color-dark);
    --chat--message--bot--border: none;
    --chat--message--user--background: var(--chat--color-secondary);
    --chat--message--user--color: var(--chat--color-white);
    --chat--message--user--border: none;
    --chat--message--pre--background: rgba(0, 0, 0, 0.05);

    --chat--toggle--background: var(--chat--color-primary);
    --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
    --chat--toggle--active--background: var(--chat--color-primary-shade-100);
    --chat--toggle--color: var(--chat--color-white);
    --chat--toggle--size: 64px;
}

.chat-footer .chat-get-started-footer {
    font-size: 14px !important;
    color: #b3b3b3 !important;
    padding: 4px 10px !important;
}

.chat-footer .chat-powered-by {
    display: none !important;
}

.chat-inputs textarea {
    padding: 10px !important;
    font-family: var(--bs-font-sans-serif) !important;
    font-size: 16px !important;
}

.chat-message {
    padding: 10px;
    margin-top: 6px !important;
}

.chat-layout .chat-header {
    flex-direction: row;
    align-items: center;
}


.chat-layout .chat-header .reset-chat-button {
    margin-left: auto;
    background: #eee;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
}

.chat-layout .chat-header p {
    font-size: 15px !important;
}

.chat-window-wrapper .chat-window {
    box-shadow: 0px 0px 9px -4px rgba(0, 0, 0, 0.5)
}

.grecaptcha-badge {
    right: -18rem !important;
}

.chat-layout .chat-header .chat-heading {
    display: none !important;
}

.chat-message-from-user p {
    color: #333 !important;
}

.chat-message-typing .chat-message-typing-circle {
    height: 5px;
    width: 5px;
}

.chat-message-typing .chat-message-typing-body {
    padding-top: 6px;
}

.chat-input-send-button {
    color: var(--chat--color-primary) !important;
}

.chat-input-send-button[disabled] {
    color: var(--chat--color-disabled) !important;
}