.chat-window-wrapper {
    margin-right: 16px !important;
    margin-bottom: 16px !important;
}

.chat-window-toggle {
    border-radius: 10px !important;
    width: auto !important;
    padding-inline: 1rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--chat--color--dark) !important;

    svg {
        margin-left: 1rem;
    }

    &::before {
        content: "Atendimento Agora";
    }
}

:root {
    --chat--color--primary: #1F7F27;
    --chat--color--primary-shade-50: #197621;
    --chat--color--primary--shade-100: #135314;
    --chat--color--secondary: #20b39e;
    --chat--color-secondary-shade-50: #19917f;
    --chat--color-white: #ffffff;
    --chat--color-light: #f4f6fa;
    --chat--color-light-shade-50: #e1e3e8;
    --chat--color-light-shade-100: #cfd2d8;
    --chat--color-medium: #888996;
    --chat--color-dark: #2c2f38;
    --chat--color-disabled: #b0b2b8;
    --chat--color-typing: #6c757d;

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

    --chat--window--width: 400px;
    --chat--window--height: 550px;
    --chat--window--border: 1px solid var(--chat--color-medium);

    --chat--header-height: auto;
    --chat--header--padding: var(--chat--spacing);
    --chat--header--background: var(--chat--color-dark);
    --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: 1.6em;
    --chat--header--color: var(--chat--color-light);
    --chat--subtitle--font-size: inherit;
    --chat--subtitle--line-height: 1.2;

    --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: 1.8;
    --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: 56px;
}

@media (max-width: 500px) {
    .chat-window-wrapper {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
}