:root {
    /* Primary colors */
    --chat--color-primary: var(--bb-primary-color);
    --chat--color-primary-shade-50: rgba(var(--bb-primary-color-rgb), 0.8);
    --chat--color-primary-shade-100: rgba(var(--bb-primary-color-rgb), 0.6);

    /* Secondary colors */
    --chat--color-secondary: var(--bb-success-color);
    --chat--color-secondary-shade-50: rgba(var(--bb-success-color-rgb), 0.8);

    /* White and light shades */
    --chat--color-white: var(--bb-content-background-color);
    --chat--color-light: var(--bb-body-background-color);
    --chat--color-light-shade-50: rgba(var(--bb-body-background-color-rgb), 0.8);
    --chat--color-light-shade-100: var(--bb-content-border-color);

    /* Medium and dark shades */
    --chat--color-medium: var(--bb-content-border-color);
    --chat--color-dark: var(--bb-headings-color);

    /* Header and body backgrounds */
    --chat--header--background: #f8f8f8;
    --chat--header--border-bottom: 1px solid var(--chat--color-light-shade-100);
    --chat--body--background: #ffffff;

    /* Font sizes */
    --chat--font-size-xs: 0.625rem;
    --chat--font-size-small: 0.75rem;
    --chat--font-size-normal: 0.8rem;
    --chat--font-size-medium: 1rem;
    --chat--font-size-large: 1.25rem;

    /* Spacing and dimensions */
    --chat--spacing: 1rem;
    --chat--border-radius: 10px;
    --chat--transition-duration: 0.15s;

    /* Chat window size */
    --chat--window--width: 400px;
    --chat--window--height: 700px;

    /* Header styles */
    --chat--header-height: 50px;
    --chat--header--color: var(--chat--color-dark);
    --chat--heading--font-size: var(--chat--font-size-medium);
    --chat--heading--line-height: var(--chat--font-size-large);
    --chat--subtitle--font-size: var(--chat--font-size-small);
    --chat--subtitle--line-height: var(--chat--font-size-medium);
    --chat--subtitle--color: var(--chat--color-dark);

    /* Message styles */
    --chat--message--font-size: var(--chat--font-size-normal);
    --chat--message--padding: var(--chat--spacing);
    --chat--message--border-radius: var(--chat--border-radius);
    --chat--message-line-height: var(--chat--font-size-large);
    --chat--message--bot--background: #f8f8f8;
    --chat--message--bot--color: var(--chat--color-dark);
    --chat--message--bot--border: none;
    --chat--message--user--background: var(--chat--color-primary);
    --chat--message--user--color: var(--chat--color-white);
    --chat--message--user--border: none;

    /* Input area styles */
    --chat--textarea--font-size: var(--chat--message--font-size);
    --chat--textarea--height: 50px;
    --chat--textarea--background: #ffffff;

    /* Chat toggle button styles */
    --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: 50px;
}

/* Chat header */
.chat-layout .chat-header {
    gap: .5rem;
}

.chat-header {
    /* height: var(--chat--header-height); */
    display: flex;
    align-items: left;
    vertical-align: middle;
    gap: 5px;
    padding: 0;
    margin: 0;
    background-color: var(--chat--header--background);
}

/* Chat title */
.chat-heading h1 {
    font-size: 1.4em;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    text-align: left;
    color: var(--chat--color-dark);
    font-weight: 600;
    display: flex;
    align-items: left;
    gap: 8px;
}

/* Chat icon in header */
.chat-heading h1::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('./OneGuide-icon-white-yellow-1-150x150.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #334B63;
    border-radius: 50%;
}

/* Subtitle below H1 */
.chat-header p {
    display: none;
    font-size: 0.9em;
    padding: 0;
    margin: 0 0 0.5rem 0;
}

/* List item spacing */
.chat-message-markdown ol,
.chat-message-markdown ul {
    padding-left: 2.5em;
}

/* Expand button styles */
.chat-window-expanded {
    width: 600px !important;
    height: 800px !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    /* transition: width 0.2s, height 0.2s; */
}

.chat-window-wrapper .chat-window {
    transition: width 0.2s, height 0.2s;
}

.chat-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 0.5em;
    color: var(--chat--header--color, #fff);
    display: flex;
    align-items: center;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.15s;

}

.chat-expand-btn:hover,
.chat-expand-btn:focus,
.chat-expand-btn:active {
    opacity: 1;
    color: unset;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.chat-expand-btn svg {
    display: block;
}