/**
 * Adapted from n8n-chatbot-template, revision b648bbfef4f78e5c38a6b30e9ec6baa4561b6ac8.
 *
 * Copyright (c) 2025 Juan Sebastian Solano
 * Licensed under the MIT License.
 */

:root {
    --supernova-chat-primary-color: #0040FF;
    --supernova-chat-secondary-color: #07112C;
    --supernova-chat-background-color: #ffffff;
    --supernova-chat-font-color: #090B0E;
    --supernova-chat-surface: #F5F7FF;
    --supernova-chat-gray-text: #757575;
    --supernova-chat-gray-disabled: #D4D4D4;
    --supernova-chat-dark-bg: #07112C;
    --supernova-chat-dark-surface: #07163E;
    --supernova-chat-dark-input-bg: #0E2155;
    --supernova-chat-dark-button-bg: #0E2155;
    --supernova-chat-dark-button-hover: #1D3F9A;
    --supernova-chat-dark-button-disabled: #1E3B8C;
    --supernova-chat-light-button-disabled: #D4D4D4;
    --supernova-chat-dark-placeholder: #BBD1FF;
    --supernova-chat-dark-user-message: #0F1E48;
    --supernova-chat-hover-surface: #E9F0FF;
    --supernova-chat-active-surface: #BBD1FF;
}

.supernova-chat-widget {
    --chat--color-primary: var(--supernova-chat-primary-color);
    --chat--color-secondary: var(--supernova-chat-secondary-color);
    --chat--color-background: var(--supernova-chat-background-color);
    --chat--color-font: var(--supernova-chat-font-color);
    --supernova-chat-offset-x: 80px;
    --supernova-chat-offset-y: 44px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.supernova-chat-widget *,
.supernova-chat-widget *::before,
.supernova-chat-widget *::after {
    box-sizing: border-box;
}

.supernova-chat-widget .chat-container {
    position: fixed;
    bottom: var(--supernova-chat-offset-y);
    right: var(--supernova-chat-offset-x);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 544px;
    height: 709px;
    max-height: calc(100dvh - (var(--supernova-chat-offset-y) * 2));
    background: var(--chat--color-background);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(7, 17, 44, 0.15);
    border: 1px solid rgba(7, 17, 44, 0.08);
    overflow: hidden;
    font-family: inherit;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s, background-color 0.3s ease;
}

.supernova-chat-widget .chat-container.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.supernova-chat-widget .brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 24px 20px 24px;
    position: relative;
}

.supernova-chat-widget .brand-logo {
    width: 76px;
    height: 76px;
    flex: none;
}

.supernova-chat-widget .brand-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding-right: 44px;
}

.supernova-chat-widget .brand-name {
    font-family: 'Clash Display', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
    text-transform: uppercase;
    color: var(--supernova-chat-font-color);
}

.supernova-chat-widget .brand-tagline {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 400;
    line-height: 120%;
    color: var(--supernova-chat-font-color);
}

.supernova-chat-widget .close-button {
    position: absolute;
    right: 12px;
    top: 16px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    opacity: 0.8;
}

.supernova-chat-widget .close-button:hover {
    opacity: 1;
}

.supernova-chat-widget .close-icon {
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--supernova-chat-font-color, #090B0E);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.925 14.2604C15.225 14.5687 15.225 15.0312 14.925 15.3396C14.775 15.4937 14.55 15.5708 14.4 15.5708C14.25 15.5708 14.025 15.4937 13.875 15.3396L7.575 8.86458L1.275 15.3396C1.125 15.4937 0.9 15.5708 0.75 15.5708C0.600001 15.5708 0.375 15.4937 0.225 15.3396C-0.075 15.0312 -0.075 14.5687 0.225 14.2604L6.525 7.78542L0.225 1.31042C-0.075 1.00208 -0.075 0.539583 0.225 0.23125C0.525 -0.0770833 0.975 -0.0770833 1.275 0.23125L7.575 6.70625L13.875 0.23125C14.175 -0.0770833 14.625 -0.0770833 14.925 0.23125C15.225 0.539583 15.225 1.00208 14.925 1.31042L8.625 7.78542L14.925 14.2604Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.925 14.2604C15.225 14.5687 15.225 15.0312 14.925 15.3396C14.775 15.4937 14.55 15.5708 14.4 15.5708C14.25 15.5708 14.025 15.4937 13.875 15.3396L7.575 8.86458L1.275 15.3396C1.125 15.4937 0.9 15.5708 0.75 15.5708C0.600001 15.5708 0.375 15.4937 0.225 15.3396C-0.075 15.0312 -0.075 14.5687 0.225 14.2604L6.525 7.78542L0.225 1.31042C-0.075 1.00208 -0.075 0.539583 0.225 0.23125C0.525 -0.0770833 0.975 -0.0770833 1.275 0.23125L7.575 6.70625L13.875 0.23125C14.175 -0.0770833 14.625 -0.0770833 14.925 0.23125C15.225 0.539583 15.225 1.00208 14.925 1.31042L8.625 7.78542L14.925 14.2604Z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Dark theme: icons are white */
.supernova-chat-widget.supernova-chat--dark .close-icon,
.is-light .supernova-chat-widget .close-icon {
    background-color: #FFFFFF;
}

.supernova-chat-widget .chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 24px 24px;
    background: var(--supernova-chat-surface);
    border-radius: 8px;
}

.supernova-chat-widget .chat-welcome {
    flex: 1;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 16px;
    text-align: center;
}

.supernova-chat-widget .chat-container:not(.is-conversation) .chat-welcome {
    display: flex;
}

.supernova-chat-widget .welcome-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    line-height: 130%;
    text-transform: uppercase;
    color: var(--supernova-chat-font-color);
}

.supernova-chat-widget .welcome-caption::before {
    content: '';
    width: 4px;
    height: 12px;
    flex: none;
    background:
        radial-gradient(circle, var(--supernova-chat-primary-color) 2px, transparent 2.5px) 0 0 / 4px 4px no-repeat,
        radial-gradient(circle, var(--supernova-chat-primary-color) 2px, transparent 2.5px) 0 8px / 4px 4px no-repeat;
}

.supernova-chat-widget .welcome-text {
    margin: 0;
    font-family: 'Clash Display', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
    text-transform: uppercase;
    color: var(--supernova-chat-font-color);
}

/* Continue button: same pill as the site's .ai-assistant__button (+ .trigger-blue-hover / .trigger-white-hover) */
.supernova-chat-widget .chat-continue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 10px 32px;
    background-color: var(--supernova-chat-primary-color);
    color: #FFFFFF;
    border: none;
    border-radius: 100px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.35s ease;
}

.supernova-chat-widget .chat-continue-btn[hidden] {
    display: none;
}

/* Avoid sticky :hover on touch devices */
@media (hover: hover) and (pointer: fine) {
    .supernova-chat-widget .chat-continue-btn:hover {
        background-color: var(--supernova-chat-secondary-color);
    }
}

.supernova-chat-widget .chat-continue-btn:active {
    background-color: var(--supernova-chat-font-color);
}

.supernova-chat-widget .chat-messages {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    overflow-y: auto;
    padding: 16px;
    gap: 16px;
}

.supernova-chat-widget .chat-container.is-conversation .chat-messages {
    display: flex;
}

.supernova-chat-widget .chat-message-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.supernova-chat-widget .chat-message-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
}

.supernova-chat-widget .chat-message-avatar img {
    display: block;
    width: 32px;
    height: 32px;
}

.supernova-chat-widget .chat-message {
    padding: 10px 16px;
    border-radius: 8px;
    max-width: 80%;
    word-wrap: break-word;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    line-height: 120%;
}

.supernova-chat-widget .chat-message.user {
    background: var(--supernova-chat-background-color);
    color: var(--supernova-chat-font-color);
    border-radius: 8px 8px 0 8px;
}

.supernova-chat-widget .chat-message.bot {
    background: transparent;
    color: var(--supernova-chat-font-color);
    align-self: center;
    flex: 1;
    max-width: calc(100% - 44px);
    padding: 0;
}

.supernova-chat-widget .chat-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.supernova-chat-widget .chat-prompts {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.supernova-chat-widget .chat-prompts::-webkit-scrollbar {
    display: none;
}

.supernova-chat-widget .chat-prompt {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    background: var(--supernova-chat-background-color);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    line-height: 120%;
    color: var(--supernova-chat-font-color);
    transition: color 0.2s;
}

.supernova-chat-widget .chat-prompt:hover,
.supernova-chat-widget .chat-prompt:active {
    color: var(--supernova-chat-primary-color);
}

.supernova-chat-widget .chat-prompt:disabled {
    color: var(--supernova-chat-gray-disabled);
    cursor: default;
}

.supernova-chat-widget .chat-input {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.supernova-chat-widget .chat-input textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 84px;
    padding: 10px 16px;
    background: var(--supernova-chat-background-color);
    color: var(--supernova-chat-font-color);
    border: none;
    border-radius: 8px;
    resize: none;
    overflow-y: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    line-height: 120%;
    scrollbar-width: thin;
    scrollbar-color: var(--supernova-chat-gray-disabled) transparent;
}

.supernova-chat-widget .chat-input textarea::-webkit-scrollbar {
    width: 4px;
}

.supernova-chat-widget .chat-input textarea::-webkit-scrollbar-thumb {
    background: var(--supernova-chat-gray-disabled);
    border-radius: 99px;
}

.supernova-chat-widget .chat-input textarea:focus {
    outline: none;
}

.supernova-chat-widget .chat-input textarea::placeholder {
    color: var(--supernova-chat-gray-text);
}

.supernova-chat-widget .chat-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--supernova-chat-primary-color);
    color: var(--supernova-chat-background-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.supernova-chat-widget .chat-send:hover:not(:disabled),
.supernova-chat-widget .chat-send:active:not(:disabled) {
    background: var(--supernova-chat-secondary-color);
}

.supernova-chat-widget .chat-send:disabled {
    background: var(--supernova-chat-gray-disabled);
    cursor: default;
}

.supernova-chat-widget .chat-send-icon {
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--supernova-chat-background-color, #FFFFFF);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M18 8.98596C18 9.52677 17.7286 10.0676 17.1858 10.338C15.3764 11.4197 11.9387 13.3127 9.40554 14.5747C7.23429 15.6563 4.24889 16.9183 2.16812 17.8197C1.98719 17.9098 1.71578 18 1.53485 18C1.17298 18 0.720645 17.8197 0.449241 17.5493C-0.00309892 17.0986 -0.093567 16.4676 0.0873691 15.8366L1.98719 10.2479C2.07766 9.88731 2.43953 9.70704 2.8014 9.70704H7.32483C7.68663 9.70704 8.04852 9.43659 8.04852 8.98596C8.04852 8.53524 7.77717 8.26479 7.32483 8.26479H2.8014C2.43953 8.26479 2.07766 7.99434 1.98719 7.6338L0.0873691 2.04507C-0.093567 1.50423 -0.00309903 0.873246 0.539709 0.422535C0.99204 -0.0281668 1.62532 -0.118311 2.16812 0.152112C3.88702 0.873246 7.14386 2.3155 9.40554 3.39719C11.9387 4.65916 15.3764 6.64225 17.1858 7.6338C17.7286 7.90425 18 8.44506 18 8.98596Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M18 8.98596C18 9.52677 17.7286 10.0676 17.1858 10.338C15.3764 11.4197 11.9387 13.3127 9.40554 14.5747C7.23429 15.6563 4.24889 16.9183 2.16812 17.8197C1.98719 17.9098 1.71578 18 1.53485 18C1.17298 18 0.720645 17.8197 0.449241 17.5493C-0.00309892 17.0986 -0.093567 16.4676 0.0873691 15.8366L1.98719 10.2479C2.07766 9.88731 2.43953 9.70704 2.8014 9.70704H7.32483C7.68663 9.70704 8.04852 9.43659 8.04852 8.98596C8.04852 8.53524 7.77717 8.26479 7.32483 8.26479H2.8014C2.43953 8.26479 2.07766 7.99434 1.98719 7.6338L0.0873691 2.04507C-0.093567 1.50423 -0.00309903 0.873246 0.539709 0.422535C0.99204 -0.0281668 1.62532 -0.118311 2.16812 0.152112C3.88702 0.873246 7.14386 2.3155 9.40554 3.39719C11.9387 4.65916 15.3764 6.64225 17.1858 7.6338C17.7286 7.90425 18 8.44506 18 8.98596Z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Dark theme: icons are white, disabled is special blue */
.supernova-chat-widget.supernova-chat--dark .chat-send-icon,
.is-light .supernova-chat-widget .chat-send-icon {
    background-color: #FFFFFF;
}

.supernova-chat-widget.supernova-chat--dark .chat-send:disabled .chat-send-icon,
.is-light .supernova-chat-widget .chat-send:disabled .chat-send-icon {
    background-color: var(--supernova-chat-dark-button-disabled);
}

.supernova-chat-widget .chat-toggle {
    position: fixed;
    bottom: var(--supernova-chat-offset-y);
    right: var(--supernova-chat-offset-x);
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 56px;
    padding: 12px 12px 12px 8px;
    border-radius: 32px;
    background: var(--supernova-chat-surface);
    box-shadow: 0 4px 12px rgba(7, 17, 44, 0.18);
    z-index: 999;
    transition: transform 0.3s, background 0.3s;
}

.supernova-chat-widget .chat-toggle-logo {
    display: block;
    width: 44px;
    height: 44px;
    flex: none; 
}

.supernova-chat-widget .chat-toggle-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    line-height: 120%;
    color: var(--supernova-chat-font-color);
    white-space: nowrap;
    padding-right: 4px;
    transition: color 0.3s;
}

.supernova-chat-widget button:focus-visible,
.supernova-chat-widget textarea:focus-visible,
.supernova-chat-widget a:focus-visible {
    outline: 3px solid var(--supernova-chat-primary-color);
    outline-offset: 2px;
}

/* Double-label hover swap, same as the site's .swap-trigger (theme globals.scss) */
.supernova-chat-widget .chat-swap__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.supernova-chat-widget .chat-swap__current,
.supernova-chat-widget .chat-swap__next {
    display: inline-block;
    white-space: nowrap;
    backface-visibility: hidden;
    transition:
        transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.2s ease;
}

.supernova-chat-widget .chat-swap__next {
    position: absolute;
    inset: 0 auto auto 0;
    transform: translateY(100%);
    opacity: 0;
}

/* Avoid sticky :hover on touch devices */
@media (hover: hover) and (pointer: fine) {
    .supernova-chat-widget .chat-swap:hover:not(:disabled) .chat-swap__current {
        transform: translateY(-100%);
        opacity: 0;
    }

    .supernova-chat-widget .chat-swap:hover:not(:disabled) .chat-swap__next {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .supernova-chat-widget .chat-swap__current,
    .supernova-chat-widget .chat-swap__next {
        transition: none;
    }
}

/* Responsive styles for chat container */
@media (max-width: 1440px) {
    .supernova-chat-widget {
        --supernova-chat-offset-x: 56px;
    }

    .supernova-chat-widget .chat-container {
        height: 656px;
        width: 500px;
    }

    .supernova-chat-widget .chat-footer {
        padding: 16px 8px;
    }
}

@media (max-width: 960px) {
    .supernova-chat-widget {
        --supernova-chat-offset-x: 48px;
    }

    .supernova-chat-widget .chat-container {
        height: 576px;
        width: 460px;
    }

    .supernova-chat-widget .brand-header {
        padding: 20px 20px 16px 20px;
    }

    .supernova-chat-widget .chat-body {
        margin: 0 20px 20px;
    }

    .supernova-chat-widget .brand-name {
        font-size: 21px;
    }

    .supernova-chat-widget .welcome-text {
        font-size: 21px;
    }

    .supernova-chat-widget .chat-footer {
        padding: 12px 8px;
    }

    .supernova-chat-widget .chat-toggle {
        width: 56px;
        height: 56px;
        padding: 6px;
    }

    .supernova-chat-widget .chat-toggle-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .supernova-chat-widget {
        --supernova-chat-offset-y: 32px;
        --supernova-chat-offset-x: 29px;
    }

    .supernova-chat-widget .chat-container {
        height: 624px;
        width: min(422px, calc(100vw - 32px));
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .supernova-chat-widget .brand-header {
        padding: 16px;
    }

    .supernova-chat-widget .chat-body {
        margin: 0 16px 16px;
    }

    .supernova-chat-widget .brand-name {
        font-size: 18px;
    }

    .supernova-chat-widget .welcome-text {
        font-size: 18px;
    }

    .supernova-chat-widget .chat-welcome {
        padding: 12px;
        gap: 12px;
    }

    .supernova-chat-widget .chat-messages {
        padding: 12px;
    }

    .supernova-chat-widget .brand-logo{
        display: none;
    }

    .supernova-chat-widget .chat-message-avatar{
        display: none;
    }

    .supernova-chat-widget .chat-continue-btn {
        padding: 10px 20px;
    }
}

@media (max-width: 360px) {
    .supernova-chat-widget .chat-container {
        height: 544px;
        width: min(328px, calc(100vw - 32px));
    }

    .supernova-chat-widget .chat-footer {
        padding: 8px;
    }
}

/* Thinking indicator (Figma Frame 812): 16px mono label + 3 staircase dots.
   Colors come from the message color: #090B0E in light theme, white via the dark override. */
.supernova-chat-widget .chat-message--thinking {
    display: flex;
    align-items: flex-end;
    align-self: center;
    gap: 4px;
    padding: 0;
    color: var(--supernova-chat-font-color);
}

/* SVG circles, not 4px CSS boxes: box edges get pixel-snapped into ovals at fractional DPR. */
.supernova-chat-widget .thinking-dots {
    flex: none;
    width: 16px;
    height: 9px;
    fill: currentColor;
    overflow: visible;
}

/* Negative delays keep the 0.15s lag between dots from the first frame. */
.supernova-chat-widget .thinking-dots-dot {
    animation: thinking-wave 1.2s ease-in-out infinite;
}

.supernova-chat-widget .thinking-dots-dot:nth-child(2) {
    opacity: 0.5;
    animation-delay: -1.05s;
}

.supernova-chat-widget .thinking-dots-dot:nth-child(3) {
    opacity: 0.3;
    animation-delay: -0.9s;
}

@keyframes thinking-wave {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .supernova-chat-widget .thinking-dots-dot {
        animation: none;
    }
}

/* ========================================
   DARK THEME (contrast for light sections)
   Applied via:
   1. CSS cascade: .is-light .supernova-chat-widget (when widget is inside light section)
   2. JS class: .supernova-chat--dark (when widget is outside but over light section)
   ======================================== */

.supernova-chat-widget.supernova-chat--dark,
.is-light .supernova-chat-widget {
    --chat--color-background: #07112C;
    --chat--theme-bg: #07112C;
    --chat--theme-surface: #07163E;
    --chat--theme-input-bg: #0E2155;
    --chat--theme-text: #ffffff;
}

.supernova-chat-widget.supernova-chat--dark .chat-container,
.is-light .supernova-chat-widget .chat-container {
    background: var(--chat--theme-bg);
}

.supernova-chat-widget.supernova-chat--dark .chat-body,
.supernova-chat-widget.supernova-chat--dark .chat-welcome,
.supernova-chat-widget.supernova-chat--dark .chat-messages,
.supernova-chat-widget.supernova-chat--dark .chat-footer,
.supernova-chat-widget.supernova-chat--dark .chat-prompts,
.is-light .supernova-chat-widget .chat-body,
.is-light .supernova-chat-widget .chat-welcome,
.is-light .supernova-chat-widget .chat-messages,
.is-light .supernova-chat-widget .chat-footer,
.is-light .supernova-chat-widget .chat-prompts {
    background: var(--chat--theme-surface);
}

.supernova-chat-widget.supernova-chat--dark .brand-name,
.supernova-chat-widget.supernova-chat--dark .brand-tagline,
.is-light .supernova-chat-widget .brand-name,
.is-light .supernova-chat-widget .brand-tagline {
    color: var(--chat--theme-text);
}

.supernova-chat-widget.supernova-chat--dark .welcome-caption,
.supernova-chat-widget.supernova-chat--dark .welcome-text,
.is-light .supernova-chat-widget .welcome-caption,
.is-light .supernova-chat-widget .welcome-text {
    color: var(--chat--theme-text);
}

/* Continue button in dark theme: white pill, like .ai-assistant__button--light + .trigger-white-hover */
.supernova-chat-widget.supernova-chat--dark .chat-continue-btn,
.is-light .supernova-chat-widget .chat-continue-btn {
    background-color: #FFFFFF;
    color: var(--supernova-chat-font-color);
}

@media (hover: hover) and (pointer: fine) {
    .supernova-chat-widget.supernova-chat--dark .chat-continue-btn:hover,
    .is-light .supernova-chat-widget .chat-continue-btn:hover {
        background-color: var(--supernova-chat-hover-surface);
    }
}

.supernova-chat-widget.supernova-chat--dark .chat-continue-btn:active,
.is-light .supernova-chat-widget .chat-continue-btn:active {
    background-color: var(--supernova-chat-active-surface);
}

.supernova-chat-widget.supernova-chat--dark .chat-prompt,
.is-light .supernova-chat-widget .chat-prompt {
    background: var(--chat--theme-input-bg);
    color: var(--chat--theme-text);
}

.supernova-chat-widget.supernova-chat--dark .chat-prompt:hover:not(:disabled),
.is-light .supernova-chat-widget .chat-prompt:hover:not(:disabled) {
    background: var(--supernova-chat-dark-button-hover);
}

/* Same disabled blue as the dark send icon */
.supernova-chat-widget.supernova-chat--dark .chat-prompt:disabled,
.is-light .supernova-chat-widget .chat-prompt:disabled {
    color: var(--supernova-chat-dark-button-disabled);
}

.supernova-chat-widget.supernova-chat--dark .chat-input,
.is-light .supernova-chat-widget .chat-input {
    background: var(--chat--theme-surface);
}

.supernova-chat-widget.supernova-chat--dark .chat-input textarea,
.is-light .supernova-chat-widget .chat-input textarea {
    background: var(--chat--theme-input-bg);
    color: var(--chat--theme-text);
    scrollbar-color: var(--supernova-chat-dark-placeholder) transparent;
}

.supernova-chat-widget.supernova-chat--dark .chat-input textarea::placeholder,
.is-light .supernova-chat-widget .chat-input textarea::placeholder {
    color: var(--supernova-chat-dark-placeholder);
}

.supernova-chat-widget.supernova-chat--dark .chat-input textarea::-webkit-scrollbar-thumb,
.is-light .supernova-chat-widget .chat-input textarea::-webkit-scrollbar-thumb {
    background: var(--supernova-chat-dark-placeholder);
}

/* Send button in dark theme */
.supernova-chat-widget.supernova-chat--dark .chat-send,
.is-light .supernova-chat-widget .chat-send {
    background: var(--chat--theme-input-bg);
}

.supernova-chat-widget.supernova-chat--dark .chat-send:hover:not(:disabled),
.supernova-chat-widget.supernova-chat--dark .chat-send:active:not(:disabled),
.is-light .supernova-chat-widget .chat-send:hover:not(:disabled),
.is-light .supernova-chat-widget .chat-send:active:not(:disabled) {
    background: var(--supernova-chat-dark-button-hover);
}

.supernova-chat-widget.supernova-chat--dark .chat-send:disabled,
.is-light .supernova-chat-widget .chat-send:disabled {
    background: var(--chat--theme-input-bg);
}

.supernova-chat-widget.supernova-chat--dark .chat-message,
.is-light .supernova-chat-widget .chat-message {
    color: var(--chat--theme-text);
}

.supernova-chat-widget.supernova-chat--dark .chat-message.user,
.is-light .supernova-chat-widget .chat-message.user {
    background: var(--supernova-chat-dark-user-message);
}