/* Стилі для виноски "Привіт!" */
.ai-greeting-bubble {
    position: fixed;
    bottom: 30px;
    right: 75px;
    background: rgba(20, 14, 25, 0.95);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid rgba(255, 105, 180, 0.7);
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    white-space: normal;
    max-width: 200px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 999;
    animation: greetingBubblePulse 3s infinite;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Додаємо ефект при наведенні на бульбашку */
.ai-greeting-bubble:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.8);
}

/* Ефект при натисканні - тільки зменшення розміру */
.ai-greeting-bubble:active {
    transform: scale(0.95);
    box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}

@keyframes greetingBubblePulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(255, 105, 180, 0.8);
    }
}

/* Стилі для інтегрованого чату */
.integrated-chat {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 25vw;
    min-width: 350px;
    max-height: 80vh;
    height: 0;
    background-color: rgba(20, 14, 25, 0.95);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(255, 105, 180, 0.3);
    border: 1px solid rgba(255, 105, 180, 0.5);
    backdrop-filter: blur(10px);
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    z-index: 10000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.integrated-chat.expanded {
    height: 80vh;
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Повноекранний режим для чату */
.integrated-chat.fullscreen {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    z-index: 10000 !important;
    transform: none !important;
}

/* Стилі для повідомлень */
.integrated-chat .message {
    margin-bottom: 12px;
    padding: 12px 15px;
    border-radius: 8px;
    max-width: 85%;
    animation: messageSlide 0.5s ease forwards;
    position: relative;
    overflow: visible; /* Змінено з hidden на visible */
    background-color: rgba(35, 25, 45, 0.7);
    color: #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    word-wrap: break-word; /* Додайте цю властивість для перенесення довгих слів */
    white-space: pre-wrap; /* Додайте цю властивість для збереження переносів рядків */
    line-height: 1.4; /* Покращить читабельність тексту */
    max-height: none; /* Забезпечить відображення всього вмісту */
    text-overflow: clip; /* Забезпечить повне відображення тексту */
}

.integrated-chat .message.user {
    align-self: flex-end;
    border-right: 3px solid #ff69b4;
    margin-left: auto;
}

.integrated-chat .message.bot {
    align-self: flex-start;
    border-left: 3px solid #ff69b4;
}

/* Стилі для UI-елементів чату */
.chat-ui-container {
    padding: 15px;
    background-color: rgba(20, 14, 25, 0.95);
    border-top: 1px solid rgba(255, 105, 180, 0.3);
}

.select-label {
    color: #fff;
    margin-bottom: 10px;
    font-size: 14px;
}

.industry-select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    background-color: rgba(35, 25, 45, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 105, 180, 0.5);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.2);
    appearance: none; /* Видаляє стандартну стрілку */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF69B4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
    padding-right: 40px;
}

.industry-select:hover {
    border-color: rgba(255, 105, 180, 0.8);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    background-color: rgba(45, 30, 55, 0.7);
}

.industry-select:focus {
    border-color: #ff69b4;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
    background-color: rgba(55, 35, 65, 0.8);
}

/* Додаткові стилі для селекта */
@media (max-width: 768px) {
    /* Зменшуємо розміри селекту для планшетів */
    .industry-select {
        padding: 10px 12px;
        font-size: 13px;
        margin-bottom: 12px;
        background-position: right 10px top 50%;
    }

    .select-label {
        font-size: 13px;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    /* Ще менші розміри для мобільних телефонів */
    .industry-select {
        padding: 8px 10px;
        font-size: 12px;
        margin-bottom: 10px;
        background-position: right 8px top 50%;
        background-size: 10px auto;
        padding-right: 30px;
    }

    .select-label {
        font-size: 12px;
        margin-bottom: 6px;
    }

    /* Зменшуємо висоту рядків у випадаючому списку */
    .industry-select option {
        padding: 6px !important;
        font-size: 12px !important;
    }

    /* Адаптуємо кнопки для мобільного відображення */
    .buttons-container .ui-button {
        padding: 7px 14px;
        font-size: 12px;
        margin-right: 8px;
        margin-bottom: 6px;
    }
}

/* Для дуже маленьких екранів */
@media (max-width: 360px) {
    .industry-select {
        padding: 6px 8px;
        font-size: 11px;
        padding-right: 25px;
        background-size: 8px auto;
    }

    .buttons-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .buttons-container .ui-button {
        width: 100%;
        margin-right: 0;
    }
}
/* Додатковий клас для селекта в фокусі */
.industry-select.select-focused {
    border-color: #ff69b4;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
    background-color: rgba(55, 35, 65, 0.8);
}

/* Стилізація select для Firefox */
@-moz-document url-prefix() {
    .industry-select {
        color: #fff;
        background-color: rgba(35, 25, 45, 0.6);
        border: 1px solid rgba(255, 105, 180, 0.5);
    }

    .industry-select option {
        background-color: rgba(35, 25, 45, 0.95);
        color: #fff;
    }

    .industry-select option:first-child {
        color: rgba(255, 255, 255, 0.7);
        font-style: italic;
    }
}

/* Стилізація для Webkit (Chrome, Safari) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .industry-select {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF69B4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 15px top 50%;
        background-size: 12px auto;
    }

    .industry-select option {
        background-color: rgba(35, 25, 45, 0.95) !important;
        color: #fff !important;
    }
}

/* Оновлений стиль для скролбара та селекта */

/* Оновлюємо стилізацію скролбарів для всього чату */

/* Стилізація скролбара для всіх елементів чату */
.integrated-chat::-webkit-scrollbar,
#messages::-webkit-scrollbar,
.industry-select::-webkit-scrollbar,
select::-webkit-scrollbar {
    width: 6px; /* тонший скролбар */
    height: 6px;
}

.integrated-chat::-webkit-scrollbar-track,
#messages::-webkit-scrollbar-track,
.industry-select::-webkit-scrollbar-track,
select::-webkit-scrollbar-track {
    background: rgba(35, 25, 45, 0.5);
    border-radius: 6px;
}

.integrated-chat::-webkit-scrollbar-thumb,
#messages::-webkit-scrollbar-thumb,
.industry-select::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color); /* без градієнта */
    border-radius: 6px;
    transition: all 0.3s ease;
    border: none; /* без кордону */
}

.integrated-chat::-webkit-scrollbar-thumb:hover,
#messages::-webkit-scrollbar-thumb:hover,
.industry-select::-webkit-scrollbar-thumb:hover,
select::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        to bottom,
        rgba(255, 105, 180, 0.9),
        rgba(255, 85, 170, 1)
    );
    border: 1px solid rgba(35, 25, 45, 0.3);
}

/* Стилізація Firefox скролбара */
.integrated-chat,
#messages,
.industry-select,
select {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Прибираємо глобальні стилі скролбара для всього body */
body::-webkit-scrollbar {
    width: auto; /* повертаємо стандартний розмір */
}

body::-webkit-scrollbar-track {
    background: initial; /* повертаємо стандартний фон */
}

body::-webkit-scrollbar-thumb {
    background: initial; /* повертаємо стандартний фон */
    border-radius: initial;
}

body {
    scrollbar-width: auto; /* повертаємо стандартну ширину */
    scrollbar-color: initial; /* повертаємо стандартний колір */
}

/* Оновлені стилі для кнопок UI з кольорами, що відповідають дизайну чату */

.ui-button {
    padding: 10px 20px;
    margin-right: 12px;
    margin-bottom: 8px;
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.2),
        rgba(140, 82, 255, 0.3)
    );
    color: #fff;
    border: 1px solid rgba(140, 82, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(140, 82, 255, 0.2);
    position: relative;
    overflow: hidden;
}

/* .ui-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 50%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: all 0.6s ease;
} */

.ui-button:hover {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.3),
        rgba(140, 82, 255, 0.4)
    );
    /* transform: translateY(-3px); */
    box-shadow: 0 5px 15px rgba(140, 82, 255, 0.3);
}

.ui-button:hover::before {
    left: 100%;
}

.ui-button:active {
    transform: translateY(-1px);
}

/* Стилі для кнопки "Обрати" - фіолетова з елементами рожевого */
.confirm-button,
.upload-icon-button.confirm-button,
.ui-button.confirm-button {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.18),
        rgba(255, 105, 180, 0.18)
    );
    border-color: rgba(140, 82, 255, 0.35);
    color: #fff;
}

.confirm-button:disabled,
.upload-icon-button:disabled {
    opacity: 0.45 !important;
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.13),
        rgba(255, 105, 180, 0.13)
    ) !important;
    color: #fff !important;
    border-color: #b48be3 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    filter: none;
}

.confirm-button.active,
.upload-icon-button.confirm-button.active,
.ui-button.confirm-button.active {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.22),
        rgba(255, 105, 180, 0.26)
    );
    border-color: #e3a7f7;
    box-shadow: 0 0 6px #e3a7f7;
}

.confirm-button:hover,
.upload-icon-button.confirm-button:hover {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.25),
        rgba(255, 105, 180, 0.25)
    );
    border-color: rgba(140, 82, 255, 0.5);
    box-shadow: 0 5px 15px rgba(140, 82, 255, 0.15),
        0 0 5px rgba(255, 105, 180, 0.13);
}

/* Стилі для кнопки "Пропустити" - з рожевим відтінком */
.skip-button {
    background: linear-gradient(
        to right,
        rgba(202, 120, 212, 0.2),
        rgba(202, 120, 212, 0.3)
    );
    border-color: rgba(202, 120, 212, 0.5);
}

.skip-button:hover {
    background: linear-gradient(
        to right,
        rgba(202, 120, 212, 0.3),
        rgba(202, 120, 212, 0.4)
    );
    box-shadow: 0 5px 15px rgba(202, 120, 212, 0.3),
        0 0 5px rgba(255, 105, 180, 0.2);
    border-color: rgba(202, 120, 212, 0.6);
}

/* Додаємо стиль для контейнера кнопок для кращого вигляду */
.buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
    width: 100%;
}

/* Модифікація стилів для контейнера повідомлень */
#messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 15px 15px 15px 15px; /* без padding-top! */
    margin: 0;
    background: rgba(35, 25, 45, 0.96);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 105, 180, 0.5) rgba(20, 14, 25, 0.4);
}

/* Стиль для хедера чату */
.chat-top-bar {
    background-image: linear-gradient(45deg, #614f75, #140e19);
    border-bottom: 1px solid rgba(255, 105, 180, 0.3);
    padding: 4px 15px; /* Зменшуємо відступи для компактності */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 50px;
}

/* Контейнер для заголовка чату */
.chat-title-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-title-container h3 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Контейнер для кнопок керування - повертаємо до горизонтального розташування */
.chat-controls {
    display: flex;
    flex-direction: row; /* Повертаємо до рядка */
    gap: 12px; /* Відступ між кнопками */
    margin-right: 5px;
    z-index: 10;
}

/* Стилі кнопок керування */
.chat-control-btn {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.chat-control-btn:hover {
    color: #ff69b4;
    transform: scale(1.1);
}

.chat-control-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

/* Додаємо CSS змінні для скролбарів */

:root {
    --scrollbar-thumb-color: rgba(
        255,
        105,
        180,
        0.5
    ); /* зменшили непрозорість */
    --scrollbar-track-color: rgba(35, 25, 45, 0.5);
    --scrollbar-thumb-hover-color: rgba(
        255,
        105,
        180,
        0.7
    ); /* зменшили непрозорість */
    --scrollbar-track-hover-color: rgba(35, 25, 45, 0.7);

    /* Змінні для прогрес-бару */
    --progress-bg: rgba(20, 14, 25, 0.5);
    --progress-active-bg: rgba(140, 82, 255, 0.15);
    --progress-completed-bg: rgba(35, 25, 45, 0.15);
    --progress-active-border: rgba(255, 105, 180, 0.8);
    --progress-completed-border: rgba(140, 82, 255, 0.5);
    --progress-text-color: rgba(255, 255, 255, 0.5);
    --progress-active-text-color: #fff;
    --progress-completed-text-color: rgba(255, 255, 255, 0.7);
}

/* Використовуємо змінні в стилях скролбарів */
.integrated-chat::-webkit-scrollbar-thumb,
#messages::-webkit-scrollbar-thumb,
.industry-select::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color); /* без градієнта */
    border-radius: 6px;
    transition: all 0.3s ease;
    border: none; /* без кордону */
}

.integrated-chat::-webkit-scrollbar-track,
#messages::-webkit-scrollbar-track,
.industry-select::-webkit-scrollbar-track,
select::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: 6px;
}

/* Оновлюємо Firefox стилі з використанням змінних */
.integrated-chat,
#messages,
.industry-select,
select {
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Стилізація опцій селекта - виправлення кольорів */

/* Стилізація опцій селекта */
.industry-select option {
    background-color: rgba(35, 25, 45, 0.95) !important;
    color: #fff !important;
    padding: 8px !important;
}

/* Стилізація вибраної опції */
.industry-select option:checked,
.industry-select option:selected,
.industry-select option:hover,
.industry-select option:focus {
    background-color: rgba(
        140,
        82,
        255,
        0.7
    ) !important; /* фіолетовий, як у кнопок */
    color: #fff !important;
    box-shadow: 0 0 10px rgba(140, 82, 255, 0.5) !important;
}

/* Стилізація першої опції (placeholder) */
.industry-select option:first-child {
    background-color: rgba(50, 40, 65, 0.95) !important; /* темніший фон */
    color: rgba(255, 255, 255, 0.7) !important;
    font-style: italic !important;
}

/* Додаткові стилі для різних браузерів */
@-moz-document url-prefix() {
    .industry-select option:checked,
    .industry-select option:selected,
    .industry-select option:hover,
    .industry-select option:focus {
        background-color: rgba(140, 82, 255, 0.7) !important;
        color: #fff !important;
        box-shadow: 0 0 10px rgba(140, 82, 255, 0.5) !important;
    }
}

/* Форсуємо стилізацію для всіх браузерів */
select option:hover,
select option:focus,
select option:active {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.7),
        rgba(255, 105, 180, 0.5)
    ) !important;
    background-color: rgba(140, 82, 255, 0.7) !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(140, 82, 255, 0.5) !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Адаптивні стилі */
@media (max-width: 768px) {
    .integrated-chat {
        width: 90vw;
        right: 5vw;
        left: 5vw;
    }

    .ai-greeting-bubble {
        font-size: 16px;
        bottom: 40px;
    }
}

@media (max-width: 480px) {
    .avatar-buttons-row {
        gap: 5px;
    }

    #ai-assistant-btn-id {
        margin-right: 5px;
    }

    .ai-greeting-bubble {
        font-size: 14px;
        bottom: 35px;
    }
}

/* Стилі для прогрес-бару */
.chat-progress-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 15px 15px 10px;
    margin-bottom: 15px;
    height: auto;
    border: none !important;
    border-bottom: none !important;
    background-color: rgba(20, 14, 25, 0.5);
    position: relative;
    z-index: 99; /* Важливий параметр - прогрес-бар має бути вище контенту */
    box-sizing: border-box;
}

/* Видаляємо всі лінії та псевдоелементи */
.chat-progress-bar::before,
.chat-progress-bar::after {
    display: none !important;
}

/* Оновлюємо контейнер для прогрес-бару */
.progress-container {
    width: 100%;
    padding: 5px 0 10px; /* Прибираємо бічні відступи, залишаємо тільки верхній і нижній */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Запобігаємо виходу вмісту за межі */
}

/* Контейнер з даними про кроки та прогрес */
.progress-top-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
}

/* Назва поточного кроку - тепер зліва з центруванням */
.current-step-name {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 105, 180, 0.5);
    margin: 0;
    flex-grow: 1;
    text-align: left;
    max-width: 70%;
}

/* Інформація про прогрес - справа */
.progress-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

/* Кількість кроків */
.progress-steps-count {
    background: rgba(35, 25, 45, 0.7);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Приховуємо відсотки прогресу */
.progress-percent {
    display: none;
}

/* Контейнер треку прогресу */
.progress-track-container {
    position: relative;
    width: 100%;
    height: 10px; /* Збільшуємо висоту для кращої видимості */
    padding: 0;
    margin: 0 8px;
    border-radius: 5px;
    border: 1px solid rgba(140, 82, 255, 0.3);
    overflow: visible;
    box-shadow: 0 0 10px rgba(140, 82, 255, 0.2);
    max-width: calc(100% - 16px);
}

/* Прогресс трек з чіткими початком і кінцем */
.progress-track {
    width: 100%;
    height: 100%;
    background-color: rgba(35, 25, 45, 0.6);
    border-radius: 3px;
    position: relative;
    overflow: visible;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Покращуємо стиль для заповнення прогрес-бару */
.progress-fill {
    position: absolute;
    height: 100%;
    width: 0; /* Початкова ширина 0% */
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.6),
        rgba(255, 105, 180, 0.6)
    );
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
    z-index: 1;
}

/* Стилі для індикатора прогресу (повзунка) */
.progress-indicator {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: linear-gradient(
        135deg,
        rgba(255, 105, 180, 0.9),
        rgba(140, 82, 255, 0.9)
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.7),
        0 0 15px rgba(140, 82, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7);
    transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Стилі для крапок на шкалі прогресу */
.step-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: rgba(35, 25, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: all 0.3s ease;
    cursor: pointer;
}

.step-dot.active {
    background-color: rgba(255, 105, 180, 0.8);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    width: 12px;
    height: 12px;
}

.step-dot.completed {
    background-color: rgba(140, 82, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 5px rgba(140, 82, 255, 0.3);
}

/* Покращення видимості треку прогресу */
.progress-track {
    width: 100%;
    height: 100%;
    background-color: rgba(35, 25, 45, 0.6);
    border-radius: 3px;
    position: relative;
    overflow: visible;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Покращуємо контейнер треку прогресу */
.progress-track-container {
    position: relative;
    width: 100%;
    height: 10px; /* Збільшуємо висоту для кращої видимості */
    padding: 0;
    margin: 0 8px;
    border-radius: 5px;
    border: 1px solid rgba(140, 82, 255, 0.3);
    overflow: visible;
    box-shadow: 0 0 10px rgba(140, 82, 255, 0.2);
    max-width: calc(100% - 16px);
}

/* Додаємо стиль для крапок на шкалі прогресу */
.step-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: rgba(35, 25, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: all 0.3s ease;
    cursor: pointer;
}

.step-dot.active {
    background-color: rgba(255, 105, 180, 0.8);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    width: 12px;
    height: 12px;
}

.step-dot.completed {
    background-color: rgba(140, 82, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 5px rgba(140, 82, 255, 0.3);
}

/* Додаємо псевдоелемент для кінця заповнення */
.progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    animation: progressShine 1.5s infinite linear;
}

/* Додаємо позначку фінішу */
.progress-finish-icon {
    position: absolute;
    top: -12px;
    right: -4px; /* Змінюємо з -8px на -4px, щоб було ближче до краю, але не виходило за контейнер */
    font-size: 14px;
    z-index: 5;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Анімуємо позначку фінішу при наближенні до неї */
.progress-finish-icon.near {
    opacity: 1;
    transform: scale(1.2);
    animation: finishPulse 1.5s infinite alternate;
}

/* Анімація пульсації для фінішної позначки */
@keyframes finishPulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    }
    100% {
        transform: scale(1.3);
        text-shadow: 0 0 10px rgba(255, 105, 180, 0.8),
            0 0 15px rgba(140, 82, 255, 0.6);
    }
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 480px) {
    .progress-container {
        padding: 5px 10px 8px;
    }

    .current-step-name {
        font-size: 12px;
        max-width: 60%;
    }

    .progress-info {
        font-size: 10px;
        gap: 4px;
    }

    .progress-steps-count {
        padding: 2px 4px;
    }

    .progress-track-container {
        height: 6px;
    }

    .progress-track {
        height: 100%;
    }

    .step-dot {
        width: 6px;
        height: 6px;
    }

    .step-dot.active {
        width: 8px;
        height: 8px;
    }

    .progress-start-marker,
    .progress-end-marker {
        height: 8px;
    }
}

/* Стилі для тултіпів з назвами кроків */
.step-tooltip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 14, 25, 0.95);
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    border: 1px solid rgba(255, 105, 180, 0.3);
    box-shadow: 0 0 8px rgba(140, 82, 255, 0.4);
    pointer-events: none;
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.step-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: rgba(20, 14, 25, 0.95) transparent transparent transparent;
}

.step-dot:hover .step-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: 25px;
}

/* Стилі для введення компанії */

.company-input-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
    position: relative;
}

.company-input {
    width: 100%;
    padding: 12px 15px;
    padding-right: 45px;
    background-color: rgba(20, 14, 25, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 105, 180, 0.5);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.2);
}

.company-input:focus {
    border-color: rgba(255, 105, 180, 0.8);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.4);
}

.company-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.send-company-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 105, 180, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    padding: 0;
}

.send-company-btn svg {
    width: 20px;
    height: 20px;
    stroke: rgba(255, 105, 180, 0.7);
    fill: none;
    transition: all 0.3s ease;
}

.send-company-btn:hover svg {
    stroke: rgba(255, 105, 180, 1);
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.7));
}

.send-company-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.instruction-text {
    margin-bottom: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* Стилі для кнопки видалення сесії */
#delete-session {
    color: rgba(255, 105, 180, 0.8);
}

#delete-session:hover {
    color: rgba(255, 0, 0, 0.9);
    transform: scale(1.1);
}

/* Анімація для підтвердження видалення */
@keyframes deleteWarningPulse {
    0%,
    100% {
        background-color: rgba(255, 0, 0, 0.1);
    }
    50% {
        background-color: rgba(255, 0, 0, 0.3);
    }
}

.delete-warning {
    animation: deleteWarningPulse 1s infinite;
}

/* Футуристичний лоадер для пошуку в інтернеті */
.search-loader-container {
    padding: 12px 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    max-width: 85%;
    position: relative;
    background-color: rgba(35, 25, 45, 0.85);
    color: #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-left: 3px solid #ff69b4;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-loader-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(140, 82, 255, 0.1),
        transparent
    );
    animation: searchLoaderPulse 1.5s linear infinite;
}

@keyframes searchLoaderPulse {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.search-loader-text {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.search-loader-text .text-pulse {
    margin-left: 5px;
    display: inline-flex;
}

.search-loader-text .dot {
    width: 4px;
    height: 4px;
    margin: 0 2px;
    background-color: #ff69b4;
    border-radius: 50%;
    opacity: 0.6;
    animation: dotPulse 1.5s infinite;
}

.search-loader-text .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.search-loader-text .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

.search-progress-bar {
    width: 100%;
    height: 3px;
    background-color: rgba(35, 25, 45, 0.8);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.search-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.7),
        rgba(255, 105, 180, 0.7)
    );
    border-radius: 3px;
    animation: searchProgress 3s ease-in-out infinite;
}

@keyframes searchProgress {
    0% {
        width: 0%;
    }
    50% {
        width: 70%;
    }
    70% {
        width: 85%;
    }
    80% {
        width: 90%;
    }
    90% {
        width: 95%;
    }
    100% {
        width: 98%;
    }
}

.search-sources {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.search-source {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background-color: rgba(140, 82, 255, 0.15);
    border: 1px solid rgba(140, 82, 255, 0.3);
    white-space: nowrap;
    animation: sourceAppear 0.5s forwards;
    transform: translateY(10px);
    opacity: 0;
}

.search-source:nth-child(1) {
    animation-delay: 0.2s;
}

.search-source:nth-child(2) {
    animation-delay: 0.6s;
}

.search-source:nth-child(3) {
    animation-delay: 1s;
}

.search-source:nth-child(4) {
    animation-delay: 1.4s;
}

.search-source:nth-child(5) {
    animation-delay: 1.8s;
}

@keyframes sourceAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.search-result {
    height: 3px;
    background-color: rgba(140, 82, 255, 0.1);
    border-radius: 2px;
    animation: resultPulse 1.8s infinite;
}

.search-result:nth-child(1) {
    width: 95%;
    animation-delay: 0.1s;
}

.search-result:nth-child(2) {
    width: 85%;
    animation-delay: 0.3s;
}

.search-result:nth-child(3) {
    width: 75%;
    animation-delay: 0.5s;
}

@keyframes resultPulse {
    0%,
    100% {
        background-color: rgba(140, 82, 255, 0.1);
    }
    50% {
        background-color: rgba(255, 105, 180, 0.2);
    }
}

.ai-icon {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    color: #ff69b4;
    animation: aiIconPulse 2s infinite;
}

@keyframes aiIconPulse {
    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 105, 180, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.8));
    }
}

/* Стилі для форми введення даних про компанію */
.company-data-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company-input-container {
    position: relative;
    width: 100%;
}

.company-input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border-radius: 6px;
    border: 1px solid rgba(140, 82, 255, 0.3);
    background-color: rgba(35, 25, 45, 0.6);
    color: #f0f0f0;
    font-size: 14px;
    transition: all 0.3s ease;
}

.company-input:focus {
    outline: none;
    border-color: rgba(255, 105, 180, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2);
}

.company-input::placeholder {
    color: rgba(240, 240, 240, 0.5);
}

.send-company-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ff69b4;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.send-company-btn:hover {
    color: rgba(255, 105, 180, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.send-company-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Стилі для рекомендацій */
.recommendations-title {
    margin-bottom: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.recommendations-container {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 20px;
}

/* 2. Повертаємо стандартну висоту #messages */
#messages,
.integrated-chat.expanded #messages,
.integrated-chat.fullscreen #messages {
    height: calc(100% - 240px) !important;
}

.recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: rgba(35, 25, 45, 0.6);
    padding: 12px;
    border-radius: 8px;
    border-left: 2px solid rgba(140, 82, 255, 0.5);
    transition: all 0.3s ease;
}

.recommendation-item:hover {
    background-color: rgba(35, 25, 45, 0.8);
    border-left-color: rgba(255, 105, 180, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.recommendation-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(140, 82, 255, 0.5);
    border-radius: 4px;
    background-color: rgba(20, 14, 25, 0.6);
    cursor: pointer;
    position: relative;
    margin-top: 3px;
    transition: all 0.2s ease;
}

.recommendation-checkbox:checked {
    background-color: rgba(255, 105, 180, 0.7);
    border-color: rgba(255, 105, 180, 0.9);
}

.recommendation-checkbox:checked::after {
    content: "✓";
    position: absolute;
    color: #fff;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.recommendation-label {
    flex: 1;
    cursor: pointer;
}

.recommendation-title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.recommendation-reasoning {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-style: italic;
}

.recommendations-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(35, 25, 45, 0.6);
    border-radius: 8px;
    margin: 10px 0;
    border-left: 2px solid rgba(255, 105, 180, 0.7);
}
/* Стилі для завантаження документів */
.document-upload-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 8px;
    overflow: hidden;
}

.inline-actions-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.icon-only-button {
    width: 32px;
    height: 32px;
    min-width: 0;
    padding: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-input-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    flex: 0 0 auto;
}

.file-input-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 20px;
}

.file-input-label svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.selected-files-list {
    max-height: 120px;
    overflow-y: auto;
    width: 100%;
    margin-top: 5px;
}

.selected-files-list div,
.selected-files-list .selected-file-item,
.selected-files-list .selected-filename {
    color: #fff !important;
    font-size: 13px;
    max-width: 70%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    background: transparent;
    display: block;
    margin-bottom: 2px;
}

.uploaded-docs-container {
    background-color: rgba(35, 25, 45, 0.6);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid rgba(140, 82, 255, 0.3);
    max-height: 200px;
    overflow-y: auto;
}

.file-list-header {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.selected-file-item,
.selected-filename {
    color: #fff !important;
    font-size: 13px;
    max-width: 70%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.uploaded-doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 5px;
    background-color: rgba(45, 35, 55, 0.7);
    color: #fff;
    font-size: 13px;
}

.selected-file-item svg {
    flex-shrink: 0;
}

.uploaded-doc-item svg {
    flex-shrink: 0;
}

.file-size {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    flex-shrink: 0;
}

.doc-view-link {
    margin-left: auto;
    color: rgba(255, 105, 180, 0.8);
    text-decoration: none;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.doc-view-link:hover {
    background-color: rgba(255, 105, 180, 0.2);
    color: rgba(255, 105, 180, 1);
}

/* Стилі для форми редагування резюме */
.summary-edit-form {
    max-height: 70vh;
    overflow-y: auto;
    padding: 15px;
    max-width: 100%; /* Обмежуємо ширину форми */
}

.form-title {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 105, 180, 0.3);
    padding-bottom: 5px;
}

/* Зменшуємо відступи для оптимального використання простору */
.form-field {
    width: 100%;
    max-width: 100%;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.form-field label {
    margin-bottom: 4px;
    color: #ffffff; /* Білий колір для лейблів */
    font-size: 14px;
    display: block;
}

/* Зменшуємо висоту полів на малих екранах */
@media (max-height: 700px) {
    .edit-input {
        padding: 6px 10px;
    }

    textarea.edit-input {
        min-height: 60px;
    }

    .form-title {
        margin-bottom: 5px;
        padding-bottom: 3px;
    }
}

.edit-input {
    width: 100%;
    padding: 8px 12px;
    background-color: rgba(20, 14, 25, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 105, 180, 0.4);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.edit-input:focus {
    border-color: rgba(255, 105, 180, 0.8);
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}

textarea.edit-input {
    min-height: 38px;
    max-height: none !important;
    overflow-y: visible !important;
    white-space: pre-wrap;
    resize: none;
}

/* Виправлення поведінки кнопки "Зберегти зміни" при наведенні */
.edit-buttons .ui-button {
    transform: none !important; /* Забороняємо трансформацію при hover */
    position: static; /* Змінюємо з relative на static */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Видаляємо top з transition */
}

.edit-buttons .ui-button:hover {
    transform: none !important;
    top: 0; /* Фіксуємо на місці */
    box-shadow: 0 0 15px rgba(140, 82, 255, 0.3); /* Змінюємо тінь, щоб був ефект без руху */
}

.documents-section {
    margin-top: 15px;
    max-width: 100%;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: rgba(45, 35, 55, 0.7);
    border-radius: 6px;
    max-width: 100%;
}

.document-item a {
    color: #ffffff; /* Переконуємося, що посилання також білі */
    text-decoration: none;
    transition: color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%;
}
/* Оптимізація для мобільних пристроїв */
@media (max-width: 480px) {
    .summary-edit-form {
        padding: 10px;
    }

    .form-field label {
        font-size: 13px;
    }
}
.document-item a:hover {
    color: rgba(255, 105, 180, 0.9);
    text-decoration: underline;
}

.delete-doc-btn {
    background: none;
    border: none;
    color: rgba(255, 105, 180, 0.7);
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.delete-doc-btn:hover {
    color: rgba(255, 0, 0, 0.9);
    transform: scale(1.1);
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.selected-file {
    font-size: 14px;
    color: #fff;
    background-color: rgba(45, 35, 55, 0.7);
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 5px;
}

/* Стилі для форми з вкладками */
.tabbed-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: rgba(35, 25, 45, 0.6);
    border-radius: 8px;
    /* height: 450px; Фіксована висота замість max-height */
    overflow: hidden;
}

.edit-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 105, 180, 0.3);
    background-color: rgba(20, 14, 25, 0.7);
    border-radius: 8px 8px 0 0;
}

.edit-tab {
    padding: 10px 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    flex: 1;
    text-align: center;
}

.edit-tab:hover {
    color: #fff;
    background-color: rgba(35, 25, 45, 0.6);
}

.edit-tab.active {
    color: #fff;
    font-weight: 500;
    background-color: rgba(140, 82, 255, 0.15);
}

.edit-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(140, 82, 255, 0.7),
        rgba(255, 105, 180, 0.7)
    );
}

.tab-content {
    position: relative;
    max-height: 48vh; /* або 350px, або інше значення, щоб не перекривало прогрес-бар */
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 10px; /* Зменшуємо відступи */
    padding-top: 90px;
    width: 100%;
    flex: 1;
}

/* Вміст кожної вкладки має однакову висоту */
.fields-container,
.documents-container {
    width: 100%;
    max-width: 100%;
    height: 100%; /* Займає всю висоту контейнера */
    box-sizing: border-box;
}

/* Забезпечуємо відповідне відображення довгих текстів */
.edit-input,
.doc-name,
.section-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
/* Довгі URL можуть виходити за межі, тому додаємо спеціальну обробку */
input[type="url"].edit-input {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Використовуємо flex-grow для кнопок, щоб вони завжди були внизу */
.edit-buttons {
    margin-top: auto;
    padding: 10px 15px;
    background-color: rgba(20, 14, 25, 0.7);
    border-top: 1px solid rgba(255, 105, 180, 0.3);
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: center;
}

.section-title {
    font-size: 14px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 500;
}

.doc-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    max-width: 80%;
}

.doc-icon {
    color: rgba(255, 105, 180, 0.8);
    flex-shrink: 0;
}

.doc-name {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-name:hover {
    text-decoration: underline;
    color: rgba(255, 105, 180, 0.9);
}

.doc-actions {
    display: flex;
    gap: 5px;
}

.doc-action-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    color: rgba(255, 0, 0, 0.9);
    background-color: rgba(255, 0, 0, 0.1);
}

.no-docs-message {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    padding: 5px 0;
}

.compact-upload-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
}

.upload-button.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.confirm-button.active {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.5),
        rgba(255, 105, 180, 0.7)
    );
    border-color: #ff69b4;
    box-shadow: 0 0 10px #ff69b4;
}

.file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(45, 35, 55, 0.7);
    padding: 5px 10px;
    border-radius: 6px;
}

/* .selected-filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 13px;
} */

.small-button {
    padding: 5px 10px;
    font-size: 12px;
}

/* Оновлені стилі для кнопок завантаження файлів - більш схожі на основні кнопки чату */
.upload-icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    margin: 0;
}

.upload-icon-button:hover {
    /* transform: translateY(-3px); */
    box-shadow: 0 5px 15px rgba(140, 82, 255, 0.3);
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.3),
        rgba(140, 82, 255, 0.4)
    );
}

.upload-icon-button:disabled {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.upload-icon-button.confirm-button {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.3),
        rgba(140, 82, 255, 0.4)
    );
    border-color: rgba(140, 82, 255, 0.6);
}

.upload-icon-button.confirm-button:hover {
    background: linear-gradient(
        to right,
        rgba(140, 82, 255, 0.4),
        rgba(140, 82, 255, 0.5)
    );
    box-shadow: 0 5px 15px rgba(140, 82, 255, 0.3),
        0 0 5px rgba(255, 105, 180, 0.3);
}

.upload-icon-button svg {
    width: 14px;
    height: 14px;
}

/* Для вирівнювання по центру */
.file-input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.buttons-container .ui-button {
    margin: 0;
    padding: 8px 15px;
    font-size: 13px;
    height: 36px;
    flex: 0 0 auto;
}
/* Повний розмір для скрола контенту */
.selected-files-list {
    max-height: 150px;
    width: 100%;
}
/* Менший розмір кнопки "Пропустити" */
.skip-button {
    margin: 0;
    padding: 8px 15px;
    font-size: 13px;
    height: 36px;
}

/* Додаємо відступ між вкладками і контентом форми */
.document-upload-form {
    padding: 8px;
    gap: 5px;
}
/* Стилі для форми редагування з іконками замість тексту */
.tab-content,
.tabbed-edit-form {
    max-height: 60vh;
    overflow-y: auto !important;
    overflow-x: hidden;
}

.edit-tabs {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(255, 105, 180, 0.3);
    background-color: rgba(20, 14, 25, 0.7);
    border-radius: 8px 8px 0 0;
}

.edit-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-tab svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.edit-tab:hover {
    color: #fff;
    background-color: rgba(35, 25, 45, 0.6);
}

.edit-tab.active {
    color: #fff;
    background-color: rgba(140, 82, 255, 0.15);
}

.edit-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(140, 82, 255, 0.7),
        rgba(255, 105, 180, 0.7)
    );
}

.form-field {
    position: relative;
}

.edit-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Важливо для правильного розрахунку ширини */
    padding: 8px 10px;
    background-color: rgba(20, 14, 25, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 105, 180, 0.4);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.edit-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.edit-input:focus {
    border-color: rgba(255, 105, 180, 0.8);
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}

.edit-buttons {
    padding: 10px 15px;
    background-color: rgba(20, 14, 25, 0.7);
    border-top: 1px solid rgba(255, 105, 180, 0.3);
    margin-top: auto;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: center;
}

/* Стилі для документів */
.documents-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: rgba(45, 35, 55, 0.7);
    border-radius: 6px;
}

.doc-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    max-width: 80%;
}

.doc-icon {
    color: rgba(255, 105, 180, 0.8);
    flex-shrink: 0;
}

.doc-name {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-name:hover {
    text-decoration: underline;
    color: rgba(255, 105, 180, 0.9);
}

.doc-actions {
    display: flex;
    gap: 5px;
}

.doc-action-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    color: rgba(255, 0, 0, 0.9);
    background-color: rgba(255, 0, 0, 0.1);
}

.no-docs-message {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    padding: 5px 0;
}

/* Кнопки завантаження документів */
.file-input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
}

.upload-icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon-button svg {
    width: 14px;
    height: 14px;
}

.selected-files-list {
    max-height: 100px;
    overflow-y: auto;
    background-color: rgba(35, 25, 45, 0.5);
    border-radius: 6px;
    padding: 5px;
    margin-top: 5px;
}

.selected-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background-color: rgba(45, 35, 55, 0.7);
    border-radius: 4px;
    margin-bottom: 3px;
    font-size: 12px;
}

.file-size {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}
/* Стилі для лейблів полів форми */
.field-label {
    display: block;
    font-size: 12px;
    color: #ffffff !important; /* Форсуємо білий колір */
    margin-bottom: 4px;
    font-weight: 500;
}
/* Стилі для функції renderFields */
.form-field label {
    display: block;
    font-size: 12px;
    color: #ffffff !important; /* Форсуємо білий колір */
    margin-bottom: 4px;
    font-weight: 500;
}
/* Зменшуємо відступи для оптимального використання простору */
.form-field {
    margin-bottom: 12px;
    max-width: 100%;
}

/* Оновлюємо стиль поля вводу */
.edit-input {
    width: 100%;
    padding: 8px 10px;
    background-color: rgba(20, 14, 25, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 105, 180, 0.4);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    /* Додаємо: */
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: unset;
}

/* Покращуємо скрол у формі з вкладками */
.tab-content {
    padding: 12px;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 105, 180, 0.5) rgba(20, 14, 25, 0.4);
}

/* Покращуємо скрол для всіх контейнерів із прокруткою */
.tab-content::-webkit-scrollbar,
.documents-container::-webkit-scrollbar,
.selected-files-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: block !important;
}

.tab-content::-webkit-scrollbar-track,
.documents-container::-webkit-scrollbar-track,
.selected-files-list::-webkit-scrollbar-track {
    background: rgba(35, 25, 45, 0.5);
    border-radius: 6px;
}

.tab-content::-webkit-scrollbar-thumb,
.documents-container::-webkit-scrollbar-thumb,
.selected-files-list::-webkit-scrollbar-thumb {
    background: rgba(255, 105, 180, 0.5);
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Додаємо скрол до всієї форми */
.tabbed-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: rgba(35, 25, 45, 0.6);
    border-radius: 8px;
    /* max-height: 450px; */
    overflow: hidden;
}
/* Застосовуємо box-sizing до всіх елементів форми */
.tabbed-edit-form,
.tabbed-edit-form * {
    box-sizing: border-box;
}

/* Стилі для індикатора завантаження */
.upload-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 10px;
}

.upload-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(140, 82, 255, 0.2);
    border-top-color: #ff69b4;
    border-radius: 50%;
    animation: upload-spin 1s linear infinite;
}

@keyframes upload-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Стилі для повідомлень про помилку */
.upload-error {
    color: rgb(255, 100, 100);
    font-size: 12px;
    margin-left: 10px;
}
.edit-buttons .ui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 20px;
    min-width: 180px;
}

.edit-buttons .ui-button svg {
    flex-shrink: 0;
}

.edit-buttons .ui-button span {
    font-weight: 500;
    white-space: nowrap;
}

/* Стилі для авторизації в чаті */
.login-container {
    margin: 20px auto;
    max-width: 320px;
    text-align: center;
}

.google-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    color: #333;
    padding: 16px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.4s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    min-width: 240px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.google-login-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(213, 121, 248, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.google-login-btn:hover::before {
    left: 100%;
}

.google-login-btn:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(213, 121, 248, 0.3);
    border-color: rgba(213, 121, 248, 0.3);
}

.google-login-btn svg {
    flex-shrink: 0;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 480px) {
    .google-login-btn {
        padding: 14px 20px;
        font-size: 14px;
        min-width: 200px;
    }
}

/* Стилі для AI Assistant */

/* Стилізація кнопки Google для чату */
.integrated-chat .google-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: linear-gradient(
        135deg,
        rgba(35, 25, 45, 0.9) 0%,
        rgba(20, 14, 25, 0.95) 100%
    );
    color: #fff;
    padding: 16px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 105, 180, 0.5);
    position: relative;
    overflow: hidden;
    min-width: 240px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    margin: 15px auto;
}

.integrated-chat .google-login-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 105, 180, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.integrated-chat .google-login-btn:hover::before {
    left: 100%;
}

.integrated-chat .google-login-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(45, 35, 55, 0.9) 0%,
        rgba(30, 20, 35, 0.95) 100%
    );
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 105, 180, 0.4);
    border-color: rgba(255, 105, 180, 0.7);
}

/* Змінюємо колір іконки Google */
.integrated-chat .google-login-btn svg path:first-child {
    fill: #ff69b4;
}
.integrated-chat .google-login-btn svg path:nth-child(2) {
    fill: #e056fd;
}
.integrated-chat .google-login-btn svg path:nth-child(3) {
    fill: #d579f8;
}
.integrated-chat .google-login-btn svg path:nth-child(4) {
    fill: #ff69b4;
}

/* Стилі для індикатора завантаження */
.integrated-chat .login-loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    color: #fff;
}

.integrated-chat .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 105, 180, 0.3);
    border-radius: 50%;
    border-top-color: #ff69b4;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Нові стилі для робота без конфліктів */
.ai-robot-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    background: linear-gradient(
        45deg,
        rgba(59, 44, 76, 0.8),
        rgba(20, 14, 25, 0.8)
    );
    border: 1px solid rgba(255, 105, 180, 0.7);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.9);
    overflow: hidden;
    z-index: 9999;
    /* Змінюємо transition для плавного збільшення розміру */
    transition: all 0.3s ease, transform 0.3s ease;
}

#ai-assistant-btn-new .pink-robot-svg {
    color: #ff69b4 !important;
    stroke: #ff69b4 !important;
    fill: none !important;
}

#ai-assistant-btn-new .pink-robot-svg rect,
#ai-assistant-btn-new .pink-robot-svg path {
    stroke: #ff69b4 !important;
    fill: none !important;
}

#ai-assistant-btn-new .pink-robot-svg circle {
    fill: #ff69b4 !important;
    stroke: none !important;
}

/* Змінюємо hover ефект: прибираємо translateY і збільшуємо розмір */
.ai-robot-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.9);
}

.ai-button-pressed {
    transform: scale(0.95) !important;
    box-shadow: 0 0 5px rgba(255, 105, 180, 0.5) !important;
}
/* Анімація для іконки робота - прозоро-рожева смуга зверху */
@keyframes robotGlowDiagonal {
    0% {
        box-shadow: -15px -15px 20px rgba(255, 105, 180, 0.2),
            -10px -10px 15px rgba(255, 105, 180, 0.4),
            -5px -5px 10px rgba(255, 105, 180, 0.6);
    }
    50% {
        box-shadow: 5px 5px 10px rgba(255, 105, 180, 0.6),
            10px 10px 15px rgba(255, 105, 180, 0.4),
            15px 15px 20px rgba(255, 105, 180, 0.2);
    }
    100% {
        box-shadow: -15px -15px 20px rgba(255, 105, 180, 0.2),
            -10px -10px 15px rgba(255, 105, 180, 0.4),
            -5px -5px 10px rgba(255, 105, 180, 0.6);
    }
}

/* Застосовуємо діагональну анімацію до кнопки робота */
.ai-robot-button {
    animation: robotGlowDiagonal 3s infinite;
}

/* Інтенсивніша анімація при наведенні */
.ai-robot-button:hover {
    animation: robotGlowDiagonal 2s infinite;
}

/* Стиль для анімованої діагональної смуги на кнопці робота */
#ai-robot-button {
    position: relative;
    overflow: hidden;
}

#ai-robot-button .robot-stripe {
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 40%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    pointer-events: none;
    animation: robot-stripe-move 3s linear infinite;
    z-index: 2;
}

@keyframes robot-stripe-move {
    0% {
        top: -100%;
    }
    100% {
        top: 200%;
    }
}

/* Видаляємо конфліктуючу анімацію свічення */
.ai-robot-button {
    animation: none !important; /* Відключаємо попередню анімацію */
}

/* Змінюємо селектор щоб стилі діагональної смуги працювали і для #ai-robot-button і для .ai-robot-button */
.ai-robot-button .robot-stripe {
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 40%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    pointer-events: none;
    animation: robot-stripe-move 3s linear infinite;
    z-index: 2;
}

/* Важливі стилі для textarea - прибираємо скрол */
#input-company_overview,
#input-company_services,
.tabbed-edit-form textarea.edit-input,
.form-field textarea.edit-input {
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 60px !important;
    resize: none !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

/* Забезпечуємо видимість хедера та прогрес-бару */
.chat-top-bar {
    position: sticky;
    top: 0;
    z-index: 101;
}

.chat-progress-bar {
    position: sticky;
    top: 50px; /* або стільки, скільки займає .chat-top-bar */
    z-index: 100;
}

.input-error-msg {
    position: absolute;
    top: 50px;
    left: 20px;
    width: 100%;
    color: #fff;
    background: transparent;
    font-size: 13px;
    margin-bottom: 6px;
    margin-top: 2px;
    min-height: 16px;
    transition: opacity 0.2s;
}

.chat-ui-container:empty {
    display: none !important;
}

/* Прибрати скроллбар у textarea для overview/services у вкладках */
.tabbed-edit-form textarea.edit-input,
.tab-content textarea.edit-input,
#input-company_overview,
#input-company_services {
    overflow: hidden !important; /* <-- важливо! */
    overflow-y: hidden !important; /* <-- важливо! */
    height: auto !important;
    min-height: 60px !important;
    max-height: none !important;
    resize: none !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    padding-bottom: 16px !important; /* щоб не обрізало останній рядок */
    scrollbar-width: none !important; /* Firefox */
}
.tabbed-edit-form textarea.edit-input::-webkit-scrollbar,
.tab-content textarea.edit-input::-webkit-scrollbar,
#input-company_overview::-webkit-scrollbar,
#input-company_services::-webkit-scrollbar {
    display: none !important;
}

.disabled-upload {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

#move-chat {
    cursor: move;
}

@media (max-width: 600px) {
    #move-chat {
        display: none !important;
    }
}

body.chat-open,
html.chat-open,
body.chat-open .p-main,
html.chat-open .p-main,
.p-main.chat-open {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none !important;
}