:root {
    --max-width: 960px;
    --padding-small: 0.5rem;
    --padding-medium: 1rem;
    --padding-large: 1.5rem;
    --radius-large: 1rem;
    --radius-medium: 0.5rem;
    --radius-small: 0.5rem;
    --radius-round: 1.5rem;
    --padding-small-mob: 0.35rem;
    --radius-large-mob: 1rem;
    --radius-medium-mob: 0.75rem;
    --blue: #214889;
    --light-grey: #e8ebee;
    --white: #ffffff;
    --blur: 8px;
    --background-blur: rgba(238, 241, 246, 0.6);
    --gradient-light: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #fff 100%);
    --box-shadow-light: 0 -5px 50px 0 rgba(33, 72, 137, 0.15);
    --box-shadow-inset: inset 0 0 4px 0 rgba(21, 46, 81, 0.04);
    --focus-shadow: 0 0 0 .3rem rgba(33, 72, 137, 0.15);
}

.chat {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    max-width: 90%;
    width: var(--max-width);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99;
    overflow: hidden;
    border-radius: var(--radius-large);
}

.chat.oversize {
    position: fixed;
    width: 100%;
    max-width: 100%;
    left: 0;
    bottom: 0;
    transform: translateX(0);
    z-index: 9999999999999999999999999999;
    border-radius: 0;
    transition: transform 0.6s ease;
}


/* Класс для активации анимации */

.chat.animate-glow::before,
.chat.animate-glow::after {
    animation-play-state: running;
}


/* Свечение слева */

.chat::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -60px;
    width: 160px;
    height: 120px;
    background: var(--accent);
    filter: blur(40px);
    z-index: -1;
    opacity: 1;
    animation: moveLeftToRight 5s infinite alternate ease-in-out;
    animation-play-state: paused;
    /* Изначально анимация на паузе */
}


/* Свечение справа */

.chat::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -75px;
    width: 160px;
    height: 150px;
    background: var(--blue);
    filter: blur(40px);
    z-index: -2;
    opacity: 1;
    animation: moveRightToLeft 5s infinite alternate ease-in-out;
    animation-play-state: paused;
    /* Изначально анимация на паузе */
}


/* Ключевые кадры для движения слева направо */

@keyframes moveLeftToRight {
    0% {
        transform: translateX(0);
        opacity: 0.5;
    }
    100% {
        transform: translateX(960px);
        opacity: 1;
    }
}


/* Ключевые кадры для движения справа налево */

@keyframes moveRightToLeft {
    0% {
        transform: translateX(0);
        opacity: 0.5;
    }
    100% {
        transform: translateX(-960px);
        opacity: 1;
    }
}


/* Стиль для скрытия элемента */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    visibility: hidden;
}

.chat__container {
    width: 100%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-large);
    padding: var(--padding-small);
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--box-shadow-light);
    background: var(--background-blur);
    z-index: 3;
}

.chat__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
    border-radius: var(--radius-medium);
    padding: var(--padding-small);
    backdrop-filter: blur(var(--blur));
    background: var(--gradient-light);
}

.chat__enter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--padding-small);
}

.chat__messages {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.chat__messages-container {
    flex-grow: 1;
    overflow-y: auto;
    max-height: calc(50vh + 76px);
}
.chat__messages-content{
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
    padding: var(--padding-small);
    border-radius: var(--radius-small);
}

/* Стилизация скроллбара */
.chat__messages-container::-webkit-scrollbar {
    width: 5px;
}

.chat__messages-container::-webkit-scrollbar-track {
    background: var(--light-grey);
    border-radius: 10px;
}

.chat__messages-container::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 4px;
    transition: background 0.3s ease-in-out;
}

.chat__messages-container::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.message-user{
    padding: var(--padding-small);
    background: var(--light-grey);
    border-radius: var(--radius-small);
    color: var(--blue);
    overflow: hidden;
}

.chat__messages-content h1{
    font-size: clamp(20px, 1.2vw, 18px);
}

.chat__messages-content h2{
    font-size: clamp(18px, 1.2vw, 16px);
}

.chat__messages-content h3{
    font-size: clamp(16px, 1.2vw, 16px);
}
.chat__messages-content h4{
    font-size: clamp(16px, 1.2vw, 16px);
}
.chat__messages-content h5{
    font-size: clamp(16px, 1.2vw, 16px);
}

.chat__messages-content p{
    font-size: clamp(12px, 1.2vw, 14px);
}
.chat__messages-content li{
    font-size: clamp(12px, 1.2vw, 14px);
}

.message-bot table{
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(10px, 1.2vw, 12px);
}
.message-bot th,
.message-bot td {
    border: 1px solid var(--blue);
    padding: 6px;
    text-align: left;
}
.message-bot thead {
    color: var(--white);
    background-color: var(--dark);
}

.chat__messages-input {
    display: block;
    /*width: calc(100% - 2.5rem - .375rem);*/
    height: 48px;
    min-height: 48px;
    max-height: 176px;
    font-size: clamp(12px, 1.2vw, 16px);
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
    border: none;
    border-radius: var(--radius-small);
    padding: .375rem .75rem .375rem 2.5rem;
    background-color: rgba(232, 235, 238, 0.45);
    background-image: url('data:image/svg+xml;utf8,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3266 2.9877L16.3624 0.80003C15.8916 -0.266677 14.377 -0.266677 13.9072 0.80003L12.9429 2.9877C12.8081 3.29411 12.5633 3.53888 12.257 3.67375L10.0695 4.63807C9.00203 5.10886 9.00203 6.6236 10.0695 7.09351L12.257 8.05783C12.5632 8.19259 12.8082 8.43761 12.9429 8.74388L13.9072 10.9316C14.377 11.9991 15.8916 11.9991 16.3624 10.9316L17.3266 8.74388C17.4614 8.43761 17.7063 8.19259 18.0126 8.05783L20.2 7.09351C21.2667 6.6236 21.2667 5.10886 20.2 4.63807L18.0126 3.67375C17.7062 3.53888 17.4615 3.29411 17.3266 2.9877ZM4.76187 8.33085L5.40936 9.79922C5.49948 10.0049 5.66398 10.1694 5.8696 10.2604L7.33694 10.9079C8.05443 11.2229 8.05443 12.2398 7.33694 12.5557L5.8696 13.2032C5.66388 13.2938 5.49942 13.4579 5.40848 13.6635L4.76099 15.1319C4.446 15.8486 3.42927 15.8486 3.1134 15.1319L2.46592 13.6635C2.37519 13.4581 2.21107 13.294 2.00568 13.2032L0.537458 12.5557C-0.179153 12.2407 -0.179153 11.2229 0.537458 10.907L2.00568 10.2595C2.2113 10.1694 2.37579 10.0049 2.46592 9.79922L3.1134 8.33085C3.4284 7.61505 4.446 7.61505 4.76187 8.33085ZM12.5711 14.9586L13.1031 16.168C13.1783 16.3368 13.3131 16.4725 13.4828 16.5469L14.692 17.0806C14.8232 17.1389 14.9347 17.234 15.013 17.3544C15.0912 17.4748 15.1328 17.6153 15.1328 17.7588C15.1328 17.9024 15.0912 18.0429 15.013 18.1633C14.9347 18.2836 14.8232 18.3787 14.692 18.437L13.4828 18.9708C13.3135 19.0455 13.1781 19.1805 13.1031 19.3497L12.5711 20.5582C12.5129 20.6896 12.4178 20.8014 12.2974 20.8798C12.1769 20.9582 12.0363 21 11.8925 21C11.7488 21 11.6081 20.9582 11.4877 20.8798C11.3672 20.8014 11.2721 20.6896 11.214 20.5582L10.6802 19.3497C10.6056 19.1804 10.4705 19.045 10.3014 18.9699L9.09303 18.437C8.96183 18.3787 8.85035 18.2836 8.77211 18.1633C8.69387 18.0429 8.65222 17.9024 8.65222 17.7588C8.65222 17.6153 8.69387 17.4748 8.77211 17.3544C8.85035 17.234 8.96183 17.1389 9.09303 17.0806L10.3014 16.5469C10.4707 16.4722 10.6061 16.3371 10.6811 16.168L11.214 14.9586C11.2723 14.8274 11.3673 14.7159 11.4877 14.6377C11.6081 14.5594 11.7485 14.5178 11.8921 14.5178C12.0357 14.5178 12.1761 14.5594 12.2965 14.6377C12.4169 14.7159 12.5128 14.8274 12.5711 14.9586Z" fill="%23214889"/></svg>');
    background-repeat: no-repeat;
    background-position: 0.75rem 0.5rem;
    background-size: 1rem 1rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: var(--box-shadow-inset);
}

.oversize .chat__messages-input {
    height: 100%;
}

.chat__messages-input::placeholder {
    color: var(--blue);
    opacity: 1;
}

.chat__messages-input:focus {
    background-color: var(--white);
    border-color: var(--blue);
    box-shadow: var(--focus-shadow);
    color: inherit;
    outline: 0;
}
.message-bot-btn{
    display: flex;
    align-items: end;
    justify-content: end;
}
.message-user-icon{
    padding: 1px 2px;
    background-color: var(--light-grey);
    border-radius: var(--radius);
}
.btn-message-bot{
    border: none;
    background-color: transparent;
    color: var(--blue);
}
.btn-message-bot:hover{
    color: var(--accent);
}

.chat__btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chat__btn-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--padding-small);
    padding-inline: var(--padding-small);
    margin-bottom: var(--padding-small);
    opacity: 1;
    overflow: hidden;
    pointer-events: auto;
    /* Элемент реагирует на клики */
    transform: translateY(0);
    /* Исходное положение */
    transition: opacity 0.6s ease, max-height 0.6s ease, transform 0.6s ease, margin-bottom 0.6s ease;
}

.chat__btn-wrapper.visually-hidden {
    opacity: 0;
    max-height: 0;
    margin-bottom: 10px;
    transform: translateY(20px);
    /* Смещение вниз при скрытии */
    pointer-events: none;
    /* Элемент не реагирует на клики когда скрыт */
    transition: opacity 0.6s ease, max-height 0.6s ease, transform 0.6s ease, margin-bottom 0.6s ease;
}

.chat__btn-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 32px;
    height: 32px;
    color: var(--blue);
    background: none;
    opacity: 0.7;
    transition: all .6s ease-in-out;
    border-radius: var(--radius-round);
}

.chat__btn-tools:hover {
    background: var(--light-grey);
    opacity: 1;
}

.chat__btn-tools.expand {
    transition: transform 0.6s ease-in-out;
}

.chat__btn-tools.expand.rotated {
    transform: rotate(180deg);
}

.chat__send {
    border-radius: var(--radius-small);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 13px 18px;
}

.chat__hotkey {
    display: flex;
    flex-direction: row;
    gap: var(--padding-small);
    justify-content: space-between;
    align-content: center;
}

.chat__hotkey-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--padding-small);
}

.chat__hotkey-btn {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    background-color: var(--light-grey);
    color: var(--blue);
    font-size: clamp(10px, 1.2vw, 14px);
;
    transition: all .35s ease-in-out;
}

.chat__hotkey-btn:hover {
    background-color: var(--blue);
    color: var(--light-grey);
}

.chat__hotkey-icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

.chat__powered {
    font-size: clamp(8px, 1.2vw, 10px);
    opacity: 0.7;
    color: var(--blue);
}


/* Адаптив под планшеты */

@media (max-width: 768px) {
    .chat {
        width: 100%;
        left: 10px;
        transform: translateX(0);
    }
}

@media (max-width: 567px) {
    .chat {
        max-width: 97%;
        left: 50%;
        bottom: 0.5rem;
        transform: translateX(-50%);
        border-radius: var(--radius-large-mob);
    }
    .chat__container {
        padding: var(--padding-small-mob);
        border-radius: var(--radius-large-mob);
    }
    .chat__wrapper {
        padding: var(--padding-small-mob);
        border-radius: var(--radius-medium-mob);
        gap: var(--padding-small-mob);
    }
    .chat__hotkey {
        align-items: flex-end;
    }
    .chat__hotkey-wrapper {
        gap: var(--padding-small-mob);
    }
    .chat__enter {
        gap: var(--padding-small-mob);
    }
    .chat__send {
        padding: 10px 18px;
    }
    .chat__powered {
        text-align: right;
    }
}