/* =========================================================
    EDSTONE GLOBAL - STELLA AI CHATBOT THEME
    ========================================================= */

:root {

    /* =======================================================
       EDSTONE BRAND COLORS
       ======================================================= */

    --chat--color-primary: #244A80;
    --chat--color-primary-shade-50: #1D3E6B;
    --chat--color-primary-shade-100: #17345D;

    /* Accent / CTA Blue */
    --chat--color-secondary: #3D7FF5;
    --chat--color-secondary-shade-50: #326ED8;

    /* Basic Colors */
    --chat--color-white: #FFFFFF;
    --chat--color-light: #F5F7FA;
    --chat--color-light-shade-50: #E9EDF3;
    --chat--color-light-shade-100: #DCE2EA;
    --chat--color-medium: #B8C2D1;

    /* Text */
    --chat--color-dark: #172B4D;
    --chat--color-disabled: #8A8A8A;
    --chat--color-typing: #555555;

    /* Edstone Gold */
    --edstone-gold: #C7A55B;


    /* =======================================================
       GENERAL CHAT SETTINGS
       ======================================================= */

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


    /* =======================================================
       CHAT WINDOW
       ======================================================= */

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


    /* =======================================================
       CHAT HEADER
       ======================================================= */

    --chat--header-height: auto;
    --chat--header--padding: 1rem;

    --chat--header--background:
        linear-gradient(
            135deg,
            #244A80 0%,
            #1D3E6B 100%
        );

    --chat--header--color: #FFFFFF;

    --chat--header--border-top: none;

    --chat--header--border-bottom:
        3px solid var(--edstone-gold);


    /* =======================================================
       TYPOGRAPHY
       ======================================================= */

    --chat--heading--font-size: 1.35em;

    --chat--subtitle--font-size: 0.9rem;

    --chat--subtitle--line-height: 1.5;


    /* =======================================================
       TEXT AREA
       ======================================================= */

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


    /* =======================================================
       CHAT MESSAGES
       ======================================================= */

    --chat--message--font-size: 1rem;

    --chat--message--padding:
        0.85rem 1rem;

    --chat--message--border-radius:
        0.6rem;

    --chat--message-line-height:
        1.5;


    /* =======================================================
       BOT MESSAGE
       ======================================================= */

    --chat--message--bot--background:
        #F5F7FA;

    --chat--message--bot--color:
        #172B4D;

    --chat--message--bot--border:
        1px solid #E1E6ED;


    /* =======================================================
       USER MESSAGE
       ======================================================= */

    --chat--message--user--background:
        #3D7FF5;

    --chat--message--user--color:
        #FFFFFF;

    --chat--message--user--border:
        none;


    /* =======================================================
       CODE BLOCK
       ======================================================= */

    --chat--message--pre--background:
        rgba(36, 74, 128, 0.08);


    /* =======================================================
       CHAT TOGGLE BUTTON
       ======================================================= */

    --chat--toggle--background:
        #244A80;

    --chat--toggle--hover--background:
        #1D3E6B;

    --chat--toggle--active--background:
        #17345D;

    --chat--toggle--color:
        #FFFFFF;

    --chat--toggle--size:
        64px;
}


/* =========================================================
   STELLA CHAT HEADER
   ========================================================= */

.chat-header {
    position: relative;
}


/*
   Stella's name is inserted dynamically
   using the data-bot-name attribute.
*/

.chat-header::before {

    content: attr(data-bot-name);

    font-weight: 700;

    font-size: 1.35em;

    display: block;

    color: #FFFFFF;

    margin-bottom: 3px;
}


/* =========================================================
   CHAT MESSAGE TRANSITION
   ========================================================= */

.chat-message {

    transition:
        background-color
        var(--chat--transition-duration)
        ease;
}


/* =========================================================
   BOT MESSAGE
   ========================================================= */

.chat-message--bot {

    background: #F5F7FA;

    color: #172B4D;
}


/* =========================================================
   USER MESSAGE
   ========================================================= */

.chat-message--user {

    background: #3D7FF5;

    color: #FFFFFF;
}


/* =========================================================
   TEXT AREA
   ========================================================= */

textarea {

    border-color: #DCE2EA;
}


textarea:focus {

    border-color: #3D7FF5;

    outline: none;
}


/* =========================================================
   BUTTON TRANSITIONS
   ========================================================= */

button {

    transition:
        all 0.15s ease;
}