#basic-addon2 {
    display: none;
}

.conversejs form.converse-form {
    background: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    padding: 2rem !important;
}

.conversejs .btn-primary {
    background-color: #005691 !important;
    border-color: #005691 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.conversejs .btn-primary:hover {
    background-color: #ff8400 !important;
    border-color: #ff8400 !important;
}

.conversejs #controlbox.logged-out .box-flyout .controlbox-pane,
.conversejs converse-chats.converse-fullscreen #controlbox converse-login-form {
    background: white;
}

.conversejs converse-chats.converse-fullscreen #controlbox converse-brand-logo {
    padding-bottom: 0;
    margin-top: 4em;
}

/* =========================
       CORE LAYOUT
       ========================= */
:root {
    --sonata-left: 24.6667%;
    --sonata-right: calc(100% - var(--sonata-left));
}

.conversejs converse-chats.converse-fullscreen #controlbox .flyout {
    border: none !important;
}

/* Desktop layout */
@media (min-width: 768px) {
    .conversejs converse-chats.converse-embedded #controlbox,
    .conversejs converse-chats.converse-fullscreen #controlbox,
    .conversejs converse-chats.converse-fullscreen #controlbox .box-flyout {
        flex: 0 0 var(--sonata-left) !important;
        width: var(--sonata-left) !important;
        max-width: var(--sonata-left) !important;
    }

    .conversejs converse-chats.converse-fullscreen:not(.converse-singleton) .chatbox:not(#controlbox),
    .conversejs converse-chats.converse-fullscreen:not(.converse-singleton) .chatbox:not(#controlbox) .box-flyout,
    .conversejs converse-chats.converse-fullscreen:not(.converse-singleton) .chatbox {
        flex: 0 0 var(--sonata-right) !important;
        width: var(--sonata-right) !important;
        max-width: var(--sonata-right) !important;
    }
}

@media (max-width: 767px) {
    #sonata-resizer {
        display: none;
    }
    .conversejs #controlbox,
    .conversejs .chatbox {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Ensure the background covers the entire area */
.conversejs converse-chats.converse-fullscreen .chatbox .chat-body,
.conversejs .chatbox .chat-content .chat-content__notifications {
    background: rgba(21, 33, 66, 1);
}
.conversejs #controlbox .box-flyout {
    background: rgba(16, 26, 51, 1);
    color: #e8f0ff;
}

.chat-content__messages,
.conversejs #controlbox .controlbox-pane {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 rgba(21, 33, 66, 1);

    scroll-behavior: smooth;
    overflow-y: auto;
}

.conversejs converse-muc-occupants .occupants .items-list.occupant-list {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 rgba(21, 33, 66, 1);

    scroll-behavior: smooth;
    overflow-y: auto;
}

.conversejs converse-muc-occupants .occupants .items-list.occupant-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.conversejs converse-muc-occupants .occupants .items-list.occupant-list::-webkit-scrollbar-track {
    background: rgba(21, 33, 66, 1);
    border-radius: 10px;
}

.chat-content__messages::-webkit-scrollbar,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.chat-content__messages::-webkit-scrollbar-track,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar-track {
    background: rgba(21, 33, 66, 1);
    border-radius: 10px;
}

.conversejs converse-chat-heading converse-dropdown.btn-group {
    display: none;
}

.chat-content__messages::-webkit-scrollbar-thumb,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 10px;
    border: 1px solid rgba(21, 33, 66, 1);
}

.chat-content__messages::-webkit-scrollbar-thumb:hover,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

.conversejs .chatbox .bottom-panel .chat-message-form {
    display: flex;
    flex-direction: row;
    background-color: #152142;
    padding: 0 16px;
}
.conversejs converse-muc-message-form .chat-message-form .send-button {
    margin-left: 17px;
}
.conversejs .chat-message-form .send-button {
    background: var(--Bg-accent_primary, #3b6bff);
    border-radius: 20px;
    width: 40px;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.conversejs .chat-message-form .send-button svg {
    width: 1.3em !important;
    height: 1.3em !important;
}

.conversejs .chat-message-form converse-chat-toolbar span .send-button {
    display: none;
}

.conversejs .btn-group.toolbar-buttons {
    display: flex;
    align-items: baseline; /* Змінено з baseline на center для кращого вирівнювання іконок */
    flex-direction: row;

    /* Відступи для контейнера: 16px зліва, 8px справа */
    padding-left: 16px;
    padding-right: 8px;

    /* Відстань між кнопками всередині групи */
    gap: 8px;

    /* Прибираємо старий margin, якщо він заважає */
    margin: 0;
}

/* Додатково прибираємо внутрішні відступи кнопок, якщо вони занадто великі */
.conversejs .btn-group.toolbar-buttons .btn {
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.conversejs .chatbox converse-chat-toolbar {
    background: #152142;
}
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea {
    outline: none;
    display: flex;
    /* height: 40px !important;  */
    max-height: 40px !important;
    min-height: 40px !important;
    padding: 10px 16px;
    border-radius: 20px !important;
    transition: border-radius 0.2s ease;
    margin-bottom: 13px;
    background-color: #253e75;
    color: #7c96d6;
    font-size: 15px;
    line-height: 20px;
    overflow: hidden;
    resize: none;
}
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea,
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea:focus,
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea:disabled,
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea.disabled {
    /* height: 40px !important; */
    max-height: 40px !important;
    min-height: 40px !important;
    display: block;
    background-color: #253e75 !important; /* Щоб не блимало сірим при disabled */
    color: #7c96d6 !important;
    margin-right: 17px;
    padding: 10px 16px !important;
    line-height: 20px !important;
    min-height: 40px !important;
    max-height: 140px !important;
    height: auto !important; /* Позволяем контенту диктовать высоту */
    field-sizing: content !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 13px !important;
}

/* file text color */
.conversejs a,
.conversejs a:visited,
.conversejs a:not([href]):not([tabindex]),
.conversejs .clickable {
    color: rgba(232, 240, 255, 1);
}

/* Настройка для Firefox (оставляем для базовой совместимости) */
.chat-content__messages,
.conversejs #controlbox .controlbox-pane,
.chat-textarea {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 rgba(0, 0, 0, 0); /* Прозрачный фон для Firefox */
}

/* Настройка для Chrome, Safari, Edge и современных браузеров */

/* 1. Общая ширина дорожки */
.chat-content__messages::-webkit-scrollbar,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar,
.chat-textarea::-webkit-scrollbar {
    width: 6px; /* Тонкий скролл */
}

/* 2. Фон дорожки (track) */
.chat-content__messages::-webkit-scrollbar-track,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar-track,
.chat-textarea::-webkit-scrollbar-track {
    background: transparent; /* Делаем фон прозрачным, чтобы не загромождать интерфейс */
}

/* 3. Сам ползунок (thumb) */
.chat-content__messages::-webkit-scrollbar-thumb,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar-thumb,
.chat-textarea::-webkit-scrollbar-thumb {
    background-color: #4a5568; /* Твой цвет из scrollbar-color */
    border-radius: 10px; /* Полностью скругленный */
    border: 1px solid transparent; /* Отступ, если нужно визуально сузить */
}

/* 4. Ползунок при наведении */
.chat-content__messages::-webkit-scrollbar-thumb:hover,
.conversejs #controlbox .controlbox-pane::-webkit-scrollbar-thumb:hover,
.chat-textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--Icon-active, #4c84fa); /* Подсвечиваем активным цветом при наведении */
}

.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea,
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea:focus,
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea:disabled,
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea.disabled {
    display: block;
    resize: none;
    min-height: 40px !important;
    max-height: 140px !important;
    field-sizing: content !important;
    height: auto;
    background-color: rgb(37, 62, 117) !important;
    color: var(--Typography-primary, #e8f0ff) !important;
    padding: 10px 17px !important;
    line-height: 20px !important;
    overflow-y: auto !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
    box-shadow: none !important;
}
.conversejs .message.chat-msg.chat-msg--action .retraction {
    color: rgba(232, 240, 255, 1);
}

.conversejs converse-image-modal .modal-header {
    background: #1f43b3;
    color: #e8f0ff;
}

.conversejs converse-user-details-modal .sonata-card {
    background: #1d2a4d;
    border-radius: 20px;
    margin-bottom: 16px;
    padding: 4px 0;
}
.conversejs converse-user-details-modal .sonata-card .info-item {
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    transition: background 0.2s;
    display: flex;
}
.conversejs converse-user-details-modal .sonata-card .info-item .info-label {
    color: var(--Typography-accent, #9ab9ff);
    flex-grow: 1;
    font-size: 15px;
    font-weight: 400;
}
.conversejs converse-user-details-modal .sonata-card .info-item .info-value {
    color: var(--Typography-secondary, #b0cbff);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
    font-size: 15px;
    overflow: hidden;
}

.conversejs converse-user-details-modal .modal-footer {
    display: none;
}

.conversejs a:hover,
.conversejs a:visited:hover,
.conversejs a:not([href]):not([tabindex]):hover,
.conversejs .clickable:hover {
    color: #e2e5f9;
}
.conversejs converse-user-details-modal converse-avatar {
    border-radius: 50px;
}

.conversejs converse-user-details-modal .nav-pills .nav-link,
converse-bg .nav-pills .nav-link {
    color: var(--Typography-secondary, #b0cbff);
}
.conversejs converse-user-details-modal.modal .nav-item a.nav-link {
    padding: 0.5rem 0;
}
.conversejs converse-user-details-modal.modal .nav-item {
    padding-right: 1rem;
}
.conversejs converse-user-details-modal .modal-header,
converse-bg .modal-header {
    padding: 1rem 1 rem;
}

.conversejs converse-user-details-modal .modal-footer,
converse-bg .modal-footer {
    border-top: none;
}

.conversejs converse-user-details-modal .nav-item:hover .nav-link.active {
    background-color: transparent !important;
    color: #4c84fa !important;
}

.conversejs converse-user-details-modal.modal .nav-item:hover .nav-link {
    background-color: transparent !important;
    color: #6b92a7 !important;
}
.conversejs converse-user-details-modal converse-avatar .avatar {
    border-radius: 50px;
}
.conversejs converse-user-details-modal .tab-content .centered {
    font-size: 18px;
}

.conversejs converse-user-details-modal .nav-pills.justify-content-center {
    justify-content: flex-start !important;
    border-bottom: 1px solid #1f3b85;
}
.conversejs converse-user-details-modal .nav-pills .nav-link.active,
.conversejs .nav-pills .show > .nav-link {
    background-color: transparent;
    /* color: #4C84FA!important; */
}
.conversejs converse-user-details-modal.modal .nav-item .nav-link.active {
    background-color: transparent;
    color: #4c84fa !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-color: #4c84fa;
    border-bottom: 2px solid #3b82f6;
    border-radius: 0;
}

.conversejs converse-user-details-modal .modal-title {
    display: none;
}

.conversejs converse-user-details-modal converse-avatar div {
    color: #44d1e1;
    border-radius: 50px;
    font-size: 28px !important;
}

.conversejs converse-emoji-dropdown .dropdown-menu,
.conversejs converse-dropdown .dropdown-menu {
    background-color: #efefef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Мягкая тень вместо стандартной */
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 5px 0;
    margin-top: -0.2em !important;
}

.conversejs .dropdown-menu .chat-msg__action,
.conversejs .dropdown-menu .dropdown-item {
    color: rgb(102, 102, 102) !important;
    font-size: 14px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

converse-message-actions .chat-msg__actions .chat-msg__action:hover,
.conversejs .dropdown-menu .dropdown-item:hover {
    background-color: rgba(76, 132, 250, 0.1) !important;
    color: #4c84fa !important;
}

.conversejs converse-user-details-modal .modal-content {
    color: var(--Typography-accent, #9ab9ff) !important;
}

.conversejs converse-user-details-modal .centered {
    margin-bottom: 1rem !important;
}

.conversejs converse-user-details-modal .modal-header .btn svg {
    fill: var(--Icon-primary, #9ab9ff);
    width: 1.05em !important;
    height: 1.05em !important;
}

.conversejs converse-user-details-modal .modal-content,
.conversejs converse-user-details-modal .modal-header {
    background-color: rgba(29, 46, 90, 1);
    color: var(--Typography-accent, #9ab9ff);
    padding-bottom: 0;
}

.conversejs converse-user-details-modal .modal-content {
    max-width: 390px;
    height: 670px;
}

.conversejs converse-image-modal .modal-header .modal-title a {
    color: var(--background-color);
    max-width: 200px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.conversejs converse-image-modal .modal-content {
    max-width: 80%;
}

/* Прибираємо зміну фону при вимкненому полі */
.conversejs textarea:disabled {
    background-color: #253e75 !important;
    opacity: 0.95; /* Можна додати легку прозорість замість зміни кольору */
}
.conversejs .btn-group > :not(.btn-check:first-child) + .btn,
button.toggle-emojis {
    background: #253e75 !important;
    border-radius: 999px !important;
    height: 40px;
    width: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
converse-chat-toolbar converse-icon.fa-paperclip svg,
converse-chat-toolbar converse-icon.fa-lock svg,
converse-chat-toolbar converse-icon.fa.fa-smile svg {
    fill: #9ab9ff !important;
    color: #9ab9ff !important;
    height: 20px !important;
    width: 20px !important;
}

/* Chrome, Firefox, Opera, Safari */
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea::placeholder {
    color: #7c96d6;
    font-size: 15px;
    opacity: 1; /* Firefox за замовчуванням знижує прозорість */
}

/* Internet Explorer 10-11 */
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea:-ms-input-placeholder {
    color: #7c96d6;
    font-size: 15px;
}

/* Microsoft Edge */
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea::-ms-input-placeholder {
    color: #7c96d6;
    font-size: 15px;
}

.conversejs .chatbox .bottom-panel .chat-message-form {
    border-top: none;
}

/* =========================
       RESIZER
       ========================= */
#sonata-resizer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--sonata-left);
    width: 8px;
    transform: translateX(-50%);
    cursor: col-resize;
    z-index: 10000;
    background: transparent;
    touch-action: none;
    user-select: none;
}

#sonata-resizer:hover {
    background: rgba(0, 86, 145, 0.1);
}

#sonata-resizer.active {
    background: rgba(0, 86, 145, 0.2);
}

body.sonata-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

body.sonata-resizing .conversejs converse-chats {
    contain: layout style;
    pointer-events: none;
}

body.sonata-resizing .chatbox-body {
    opacity: 0.92;
}

body.sonata-resizing .chat-msg__content {
    box-shadow: none !important;
}

/*chat Header*/
.conversejs .chatbox .chat-head.chat-head-chatbox {
    background: rgba(24, 38, 74, 1) !important;
    border-bottom: 1px solid rgba(24, 38, 74, 1) !important;
}

.conversejs .chatbox .chatbox-title__text {
    display: flex;
    align-items: center;
}

.conversejs .chatbox .chat-head .show-msg-author-modal {
    color: var(--Typography-primary, #e8f0ff) !important;
    font-size: var(--Size-Subheadline, 14px);
    font-weight: 500;
    line-height: var(--Line-height-sm, 20px); /* 142.857% */
    font-family: Helvetica, Arial, sans-serif;
}

.show-msg-author-modal converse-avatar .avatar-initials,
.show-msg-author-modal converse-avatar .avatar {
    width: 36px !important;
    height: 36px !important;
    color: var(--Avatar-Blue-element, #49aaf4);
    font-size: 13px !important;
    border-radius: var(--Unlim, 999px) !important;
    background-color: rgba(22, 49, 77, 0.5) !important;
}
.chat-head-chatroom converse-avatar .avatar-initials {
    font-size: 13px !important;
    border-radius: var(--Unlim, 999px) !important;
}

.conversejs converse-muc.chatroom .chat-head-chatroom {
    background: rgba(24, 38, 74, 1) !important;
    border-bottom: 1px solid rgba(24, 38, 74, 1) !important;
    border-bottom: 1px solid rgba(24, 38, 74, 1) !important;
}

.conversejs converse-muc converse-muc-bottom-panel .chat-message-form {
    border-top: none !important;
}

/* .show-msg-author-modal converse-avatar .avatar-initials[style*="background-color"] {
    background-color: rgba(22, 49, 77, 0.50) !important;
    background: rgba(22, 49, 77, 0.50) !important; /* Додаємо як background для страховки */
/* }  */

/*groups*/

/* 1. Сетка: Аватар слева, Бабл справа */
/* 1. Сетка: Аватар слева, Бабл справа */
.conversejs .message.chat-msg.groupchat {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-areas: 'msg-avatar msg-content' !important;
    gap: 12px !important;
    align-items: end !important; /* Глобально прижимаем всё к низу */
    margin-bottom: 12px !important;
    background: transparent !important;
}

/* 2. АВАТАР ВНИЗУ */
.conversejs .message.chat-msg.groupchat > .show-msg-author-modal {
    grid-area: msg-avatar !important;
    display: block !important;
    align-self: end !important; /* Явно толкаем вниз */
}

/* 3. Контейнер контента (Бабл) */
.conversejs .message.chat-msg.groupchat .chat-msg__content {
    grid-area: msg-content !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--Bg-messages_box-secondary, #18264a) !important;
    border-radius: 16px 16px 16px 4px !important;
    padding: 8px 12px 10px 12px !important; /* Уменьшаем нижний падинг, так как хедер будет в потоке */
    position: relative !important;
    width: fit-content !important;
    min-width: 140px !important;
    max-width: 85% !important;
}

/* 4. ИМЯ АВТОРА — ВВЕРХУ */
.conversejs .message.chat-msg.groupchat .chat-msg__author {
    order: 1 !important; /* Имя первое */
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    color: #a0b3ff !important;
}

/* 5. ТЕЛО СООБЩЕНИЯ (Текст/Картинка) */
.conversejs .message.chat-msg.groupchat .chat-msg__body {
    order: 2 !important; /* Тело второе */
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.conversejs .message.chat-msg.groupchat .chat-msg__content--me .chat-msg__body {
    order: 2 !important; /* Если это наше сообщение, то тело ставим вторым, а хедер последним */
}

/* 6. НИЖНЯЯ ПАНЕЛЬ (Замок и Время) */
.conversejs .message.chat-msg.groupchat .chat-msg__heading {
    order: 1 !important; /* Хедер (со временем) уходит в самый низ бабла */
    display: flex !important;
    /* color: var(--Typography-secondary, #B0CBFF); */
    flex-direction: row !important;
    justify-content: flex-start !important; /* Прижимаем вправо */
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
    background: transparent !important;
}

.conversejs .message.chat-msg.groupchat .chat-msg__content--me .chat-msg__heading,
.conversejs .message.chat-msg.groupchat .chat-msg__heading .chat-msg__time,
.conversejs .message.chat-msg.groupchat .chat-msg__heading .fa-lock {
    display: none !important;
}

.conversejs .message.chat-msg.groupchat .chat-msg__footer {
    order: 3;
    display: flex;
    justify-content: end;
    flex-direction: row-reverse;
}

.conversejs .message.chat-msg.groupchat .show-msg-author-modal {
    color: var(--Typography-secondary, #b0cbff) !important;
}

/* ЗАМОК ПЕРЕД ВРЕМЕНЕМ */
.conversejs .message.chat-msg.groupchat .fa-lock {
    order: 1 !important;
    font-size: 11px !important;
    margin: 0 !important;
}

/* ВРЕМЯ ПОСЛЕ ЗАМКА */
.conversejs .message.chat-msg.groupchat .chat-msg__time {
    order: 2 !important;
    font-size: 11px !important;
    opacity: 0.7;
    color: #e8f0ff !important;
    padding-right: 4px;
    padding-top: 2px;
}

/* 7. КНОПКА МЕНЮ — СПРАВА СВЕРХУ */
.conversejs .message.chat-msg.groupchat .chat-msg__actions {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
}

/* 8. СВОИ СООБЩЕНИЯ */
.conversejs .message.chat-msg.groupchat:has(.chat-msg__content--me) {
    grid-template-areas: 'msg-content msg-avatar' !important;
    grid-template-columns: 1fr auto !important;
    justify-items: end !important;
}

.conversejs .message.chat-msg.groupchat:has(.chat-msg__content--me) .chat-msg__content {
    background: #3b6bff !important;
    border-radius: 16px 16px 4px 16px !important;
}

.conversejs .message.chat-msg.groupchat:has(.chat-msg__content--me) .chat-msg__author {
    display: none !important;
}
.conversejs #chatrooms converse-rooms-list .list-item .open-room {
    height: auto !important;
}

.conversejs #controlbox .controlbox-padded {
    padding: 0.3em 1em;
}

.conversejs .items-list .list-item.open:hover {
    background-color: #152142;
}

.chat-message-form .suggestion-box {
    width: 100%;
}
.conversejs converse-muc converse-muc-bottom-panel .chat-message-form .chat-textarea {
    outline: none !important;
}

/*contact list*/

.conversejs .items-list .list-item .list-item-link,
.conversejs .items-list .list-item.open:hover .list-item-link,
.conversejs .items-list .list-item.open a {
    color: #e8f0ff;
}

.conversejs #chatrooms converse-rooms-list .list-item .open-room span {
    display: flex;
    align-items: center;
}

.conversejs #converse-roster .roster-contacts .roster-group-contacts .list-item,
.conversejs .list-item.available-chatroom {
    /* Автоматична висота або трохи більша за 56px */
    height: auto !important;
    min-height: 56px; /* 56px аватар + 4px зверху + 4px знизу */
    box-sizing: border-box;
    display: flex !important;
    align-items: center; /* Центрує аватар і текст по вертикалі */
    padding: 4px 0; /* Рівномірний відступ */
    padding-left: 15px;
}
.conversejs #converse-roster .roster-contacts .list-item .open-chat converse-icon.chat-status {
    display: none;
}
.conversejs .items-list .list-item.open {
    background-color: #152142;
}

.conversejs .items-list .list-item:hover .list-item-link,
.conversejs .items-list .list-item .list-item-link:hover {
    color: #9ab9ff !important;
}

li.list-item converse-avatar .avatar-initials {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--Unlim, 999px) !important;
    font: 15px Arial !important;
    padding-top: 18px;
}

li.list-item converse-avatar .avatar {
    border-radius: 999px;
}
li.list-item converse-avatar {
    margin-right: 0.5em;
}

.conversejs #converse-roster .roster-contacts .list-item .open-chat .contact-name,
.conversejs #converse-roster .roster-contacts .list-item .open-chat .contact-name.contact-name--offline {
    margin-left: 12px !important;
}

.conversejs #converse-roster .roster-contacts .list-item:hover,
.conversejs .items-list .list-item:hover {
    background-color: #152142;
}

.conversejs #converse-roster .roster-contacts converse-roster-contact .contact-actions converse-icon svg,
.conversejs converse-muc.chatroom converse-icon svg {
    fill: rgb(232, 240, 255) !important;
}

.conversejs converse-muc.chatroom .dropdown-menu converse-icon svg {
    fill: #706f6f !important;
}

.conversejs ul.items-list.active-chats converse-roster-contact span.contact-actions,
.conversejs ul.items-list.active-chats .list-item-action.close-room {
    display: none;
}

.conversejs converse-roster-contact .contact-name {
    margin-left: 5px;
    font-size: 15px;
    margin-top: -15px;
}

converse-roster-contact .msgs-indicator.badge,
.list-item-link.open-room .msgs-indicator.badge {
    font-size: 13px;
    position: absolute;
    right: 6px;
    color: rgba(232, 240, 255, 1);
    background: var(--Bg-accent_primary, #3b6bff);
    border-radius: 20px;
    bottom: 9px;
}
.list-item-link.open-room .msgs-indicator.badge {
    right: -8px;
    bottom: 7px;
}

.conversejs .chat-message-form .send-button:hover {
    background: #5a85ff; /* Чуть светлее основного #3B6BFF */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 107, 255, 0.3);
    transition: all 0.2s ease-in-out;
}

/* Эффект при клике (нажатии) */
.conversejs .chat-message-form .send-button:active {
    transform: scale(0.95); /* Кнопка слегка уменьшается */
    background: #2d52c8; /* Темнеет при нажатии */
}

.d-flex {
    padding-top: 3px;
}

.conversejs converse-roster-contact {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    z-index: 10;
}
.conversejs converse-roster-contact a {
    display: flex;
    align-items: center;
    width: 100%;
}

/* =========================
       FAST MESSAGE RENDERING (FROM OLD CODE)
       ========================= */

/* CRITICAL: display: contents for fast rendering */
.conversejs converse-chat-message {
    display: contents !important;
}

.conversejs converse-message-history {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 15px !important;
    gap: 8px !important;
}

.conversejs .message.chat-msg {
    display: grid !important;
    /* max-width: 900px !important; */
    margin: 0 auto !important;
    width: 100% !important;
    grid-template-columns: 0px 1fr !important;
    grid-template-areas: 'msg-avatar msg-content' !important;
    align-items: start !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 4px !important;
}

.conversejs .message.chat-msg.chat .chat-msg__footer {
    display: none !important;
}

.conversejs .message.chat-msg .avatar {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    /* border-radius: 8px !important; */
}

.conversejs .chat-msg__content {
    grid-area: msg-content !important;
    display: block !important;
    max-width: 85% !important;
    border-radius: 16px;
    width: fit-content !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    word-wrap: break-word;
    position: relative;
}

.conversejs .message.chat-msg:has(.chat-msg__content--them) {
    justify-items: start !important;
}

.conversejs .chat-msg__content--them {
    background: var(--Bg-messages_box-secondary, #18264a);
    border-radius: 16px;
    color: #e8f0ff;
}

div.chat-msg.chat a.show-msg-author-modal {
    grid-area: msg-avatar !important;
    display: none;
}

/* .conversejs .message.chat-msg .message-avatar,
    .conversejs .message.chat-msg > a {
      grid-area: msg-avatar !important;
      display: none;
    } */

.conversejs .message.chat-msg:has(.chat-msg__content--me) {
    grid-template-columns: 1fr !important;
    grid-template-areas: 'msg-content' !important;
    justify-items: end !important;
}

.conversejs .chat-msg__content--me {
    background: #3b6bff;
    color: rgba(232, 240, 255, 1);
}

.conversejs .message.chat-msg:has(.chat-msg__content--me) .avatar,
.conversejs .message.chat-msg:has(.chat-msg__content--me) .show-msg-author-modal,
.conversejs .chat-msg__content--me .chat-msg__author {
    display: none !important;
}

/* Status checkmarks - global styles */
.conversejs .chat-msg__receipt {
    display: none !important;
}
.chat-msg__body--wrapper {
    display: inline-flex !important;
    align-items: center;
    width: 100%;
}
.chat-msg__body--wrapper::after {
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    font-weight: bold;
}

/* .chat-msg__content--me .chat-msg__body--wrapper::after { 
      content: "✓"; 
      color: #adb5bd !important; 
    }
    
     .chat-msg__content--me .chat-msg__body--received .chat-msg__body--wrapper::after { 
      content: "✓✓" !important; 
      color: #adb5bd !important; 
      letter-spacing: -3px; 
    }
    
    .chat-msg__content--me .chat-msg__body--displayed .chat-msg__body--wrapper::after { 
      content: "✓✓" !important; 
      color: #1e9652 !important; 
      letter-spacing: -3px; 
    } */

/* 1. Основна структура: Текст зверху, Інфо-блок знизу праворуч */
.conversejs .chat-msg__content {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px 6px 12px !important;
    min-width: 120px; /* Запас ширини для коротких слів */
}

/* Контейнер з текстом */
.conversejs .chat-msg__body {
    order: 1 !important;
    margin-bottom: 2px !important;
}

/* Контейнер для нижнього рядка (Час, Галочки, Замок) */
.conversejs .chat-msg__heading {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Притискаємо до правого краю */
    gap: 6px !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 2. ГАЛОЧКИ (Твій SVG) */
.chat-msg__content--me .chat-msg__heading::before {
    content: '';
    order: 1; /* Галочки будуть першими в рядку */
    width: 15px;
    height: 8px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    /* Використовуємо твій SVG з оригінальним кольором #E8F0FF */
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0423 0.178727C10.2736 -0.0595757 10.6476 -0.0595756 10.8789 0.178727C11.1101 0.417029 11.1101 0.802508 10.8789 1.04081L4.30024 7.82127C4.069 8.05958 3.69398 8.05958 3.46274 7.82127L0.173432 4.43154C-0.0578105 4.19324 -0.0578106 3.80676 0.173432 3.56846C0.404633 3.33038 0.778772 3.33038 1.00997 3.56846L3.88101 6.52616L10.0423 0.178727Z' fill='%23E8F0FF'/%3E%3Cpath d='M13.9892 0.178727C14.2205 -0.0595756 14.5955 -0.0595757 14.8267 0.178727C15.0578 0.416988 15.0578 0.802549 14.8267 1.04081L8.24715 7.82127C8.01595 8.05935 7.64181 8.05935 7.41061 7.82127C7.17937 7.58297 7.17937 7.1965 7.41061 6.9582L13.9892 0.178727Z' fill='%23E8F0FF'/%3E%3C/svg%3E");
}

/* 3. ЧАС ТА ЗАМОК */
.conversejs .chat-msg__time {
    order: 2 !important;
    font-size: 11px !important;
    opacity: 0.8;
    color: #e8f0ff !important;
    margin: 0 !important;
}

.conversejs .chat-msg__heading converse-icon {
    order: 3 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
}

/* Прибираємо ім'я автора в моїх повідомленнях */
.chat-msg__content--me .chat-msg__author {
    display: none !important;
}

/* Очищення від попередніх експериментів з галочками */
.chat-msg__body--wrapper::after {
    display: none !important;
}
/* 1. БАЗОВИЙ СТИЛЬ: ОДНА ГАЛОЧКА (Відправлено) */
/* Показується завжди, поки не спрацюють умови нижче */
.chat-msg__content--me .chat-msg__heading::before {
    content: '';
    order: 1;
    width: 15px;
    height: 8px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* ОДНА ГАЛОЧКА (STROKE) */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4 7L10 1' stroke='%23adb5bd' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* 2. ДОСТАВЛЕНО: ДВІ ПОРОЖНІ ГАЛОЧКИ */
/* Перевіряємо, чи є в батьківському контенті блок body з класом received */
.chat-msg__content--me:has(.chat-msg__body--received) .chat-msg__heading::before {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4 7L10 1' stroke='%23adb5bd' stroke-width='1.2'/%3E%3Cpath d='M5 4L8 7L14 1' stroke='%23adb5bd' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* 3. ПРОЧИТАНО: ДВІ ЗАФАРБОВАНІ ГАЛОЧКИ */
/* Перевіряємо, чи є в батьківському контенті блок body з класом displayed */
.chat-msg__content--me:has(.chat-msg__body--displayed) .chat-msg__heading::before {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0423 0.178727C10.2736 -0.0595757 10.6476 -0.0595756 10.8789 0.178727C11.1101 0.417029 11.1101 0.802508 10.8789 1.04081L4.30024 7.82127C4.069 8.05958 3.69398 8.05958 3.46274 7.82127L0.173432 4.43154C-0.0578105 4.19324 -0.0578106 3.80676 0.173432 3.56846C0.404633 3.33038 0.778772 3.33038 1.00997 3.56846L3.88101 6.52616L10.0423 0.178727Z' fill='%23E8F0FF'/%3E%3Cpath d='M13.9892 0.178727C14.2205 -0.0595756 14.5955 -0.0595757 14.8267 0.178727C15.0578 0.416988 15.0578 0.802549 14.8267 1.04081L8.24715 7.82127C8.01595 8.05935 7.64181 8.05935 7.41061 7.82127C7.17937 7.58297 7.17937 7.1965 7.41061 6.9582L13.9892 0.178727Z' fill='%23E8F0FF'/%3E%3C/svg%3E");
}

/* Вирівнювання елементів у заголовку */
.conversejs .chat-msg__heading {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
}

/* Порядок елементів у рядку */
.chat-msg__heading::before {
    order: 1 !important;
} /* Галочки */
.chat-msg__time {
    order: 2 !important;
} /* Час */
.chat-msg__heading converse-icon {
    order: 3 !important;
} /* Замок */

.conversejs .chatbox .new-msgs-indicator {
    cursor: pointer;
    background-color: #152142;
    width: 100%;
    color: var(--background-color);
    text-align: center;
    z-index: 20;
    white-space: nowrap;
    margin-bottom: 0.25em;
    padding: 0.5em;
    font-size: 0.9em;
    position: relative;
}

.conversejs .message.date-separator .separator-text,
.conversejs .message.separator .separator-text {
    background: #18264a;
    color: #c3f0ff;
}

.conversejs .chat-msg__content converse-icon svg {
    fill: #b8f0f4;
}

/* converse-muc-occupants */
converse-muc-occupants {
    background: #152142;
}

.conversejs converse-muc-occupants .occupants .items-list .list-item.occupant .occupant-nick-badge .occupant-nick {
    color: #e8f0ff;
}

.conversejs converse-muc.chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
    background-color: #1a284d;
}

.conversejs converse-muc.chatroom converse-split-resize {
    background: #1f3161;
}

.conversejs converse-muc-occupants .occupants .items-list .list-item.occupant .chat-status {
    display: none;
}

.conversejs converse-muc-occupants .occupants .items-list .list-item {
    padding-left: 0.27em;
}

.conversejs converse-muc-occupants .occupants .items-list .list-item.occupant .occupant-nick-badge {
    padding-left: 12px;
}

/* =========================
       STYLING
       ========================= */
.conversejs .message.chat-msg .chat-msg__message .chat-msg__body--wrapper .chat-msg__text {
    color: rgba(232, 240, 255, 1);
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    padding: 0;
}

.conversejs .modal-content {
    color: #333333 !important;
}
.conversejs .modal-title {
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {
    .conversejs .modal-title {
        color: #005691 !important;
    }
}

.conversejs .close {
    color: #000000 !important;
    text-shadow: none !important;
    opacity: 0.5;
}

.conversejs .btn-primary {
    background-color: #005691 !important;
    border-color: #005691 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.conversejs .btn-primary:hover,
.conversejs .btn-primary:active,
.conversejs .btn-primary:focus {
    background-color: #004471 !important;
    border-color: #004471 !important;
    color: #ffffff !important;
}

.conversejs .btn-primary * {
    color: #ffffff !important;
}

:root {
    --sonata-button-text: #ffffff;
}

.conversejs converse-muc-details-modal div.room-info {
    color: #e8f0ff !important;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sonata-button-text: #ffffff;
    }
    .conversejs #controlbox converse-login-form .btn {
        color: var(--sonata-button-text) !important;
    }
}
@media (prefers-color-scheme: dark) {
    .conversejs converse-accept-contact-request-modal .modal-title,
    .conversejs converse-alert-modal .modal-header,
    .conversejs converse-muc-occupant-modal .modal-header,
    .conversejs converse-muc-occupant-modal .modal-title,
    .conversejs converse-alert-modal .modal-title,
    .conversejs converse-confirm-modal .modal-title,
    .conversejs converse-muc-details-modal .modal-header,
    .conversejs converse-muc-details-modal .modal-title,
    .conversejs converse-profile-modal .modal-header,
    .conversejs converse-profile-modal .modal-title,
    .conversejs converse-image-modal .modal-header,
    .conversejs converse-image-modal .modal-title,
    .conversejs converse-muc-nickname-modal .modal-header,
    .conversejs converse-muc-nickname-modal .modal-title {
        color: #e8f0ff !important;
        background-color: #1f3b85 !important;
    }
    .conversejs converse-muc-details-modal .room-info {
        color: #e8f0ff !important;
    }
    .conversejs converse-alert-modal .modal-body {
        color: #e8f0ff !important;
    }

    .conversejs converse-muc-details-modal div.room-info {
        color: #e8f0ff !important;
    }
    .conversejs #converse-modals converse-muc-occupant-modal.modal .modal-body {
        background-color: rgba(29, 46, 90, 1);
        margin-bottom: 0;
    }

    .conversejs converse-muc-occupant-modal .text-start,
    .conversejs converse-muc-occupant-modal .text-end {
        color: #e8f0ff !important;
    }
    converse-dropdown button svg {
        fill: #e8f0ff !important;
    }

    .conversejs .badge-info {
        background-color: #1f3b85 !important;
        color: #e8f0ff !important;
    }
    .conversejs converse-image-modal .modal-header {
        justify-content: flex-end;
    }
    .conversejs converse-image-modal .modal-title {
        display: none;
    }

    converse-dropdown .dropdown-item svg {
        fill: darkblue !important;
    }

    .conversejs converse-accept-contact-request-modal .modal-footer .conversejs converse-confirm-modal .modal-footer,
    .conversejs converse-muc-details-modal .modal-footer,
    .conversejs converse-muc-nickname-modal .modal-footer,
    .conversejs converse-alert-modal .modal-footer,
    .conversejs converse-muc-occupant-modal .modal-footer,
    .conversejs converse-profile-modal .modal-footer,
    .conversejs converse-image-modal .modal-footer {
        display: none;
    }

    .conversejs .chat-content__notifications {
        color: rgba(232, 240, 255, 1) !important;
    }

    .conversejs converse-contact-approval-alert .btn-group > :not(.btn-check:first-child) + .btn {
        background: #ac354f !important;
    }

    .conversejs converse-login-form .alert-danger,
    .conversejs .btn.btn-danger.remove-contact {
        color: #e8f0ff !important;
    }

    .conversejs converse-confirm-modal .modal-header {
        background-color: #1f3b85;
        color: #e8f0ff !important;
    }

    .conversejs .modal-header .btn svg {
        fill: #9ab9ff !important;
    }
}

.conversejs label,
converse-bg label {
    display: inline-block;
    color: #666;
}

:root {
    --sonata-quote-gray: #666666;
}

.conversejs sonata-logout-modal converse-icon {
    display: none !important;
}

.conversejs sonata-logout-modal .modal-content {
    width: 316px;
    height: 206px;
    border-radius: 24px;
}
.conversejs sonata-logout-modal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    column-gap: 2;
    justify-content: center;
    gap: 15px;
    padding: 0;
    border-radius: 24px;
}

.conversejs sonata-logout-modal .btn-danger,
.conversejs sonata-logout-modal .btn-secondary {
    display: flex;
    height: 54px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 252px;
    flex: 1 0 0;
    border-radius: var(--Unlim, 999px);
    background: var(--Bg-negative, #f15b50);
    border: none;
}

.conversejs sonata-logout-modal .btn-secondary {
    border-radius: var(--Unlim, 999px);
    background: var(--Button-secondary, #1d2e5a);
}

.conversejs sonata-logout-modal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
conversejs sonata-logout-modal .modal-header {
    border-radius: 24px;
}
.conversejs converse-add-muc-modal .search-wrapper svg {
    margin: 10px;
}
.conversejs .bg-dark converse-add-muc-modal textarea,
.conversejs #converse-modals converse-add-muc-modal textarea {
    background-color: #18264a !important;
}

.conversejs converse-add-muc-modal .modal-content .modal-body button {
    background-color: var(--Button-primary, #3a6de0) !important;
    color: var(--Typography-on-surface, #e8f0ff);
    font-size: var(--Size-Callout, 16px);
    font-style: normal;
    text-transform: none !important;
    font-weight: 500;
    line-height: var(--Line-height-lg, 24px); /* 150% */
    letter-spacing: var(--Letter-spacing-Callout, 0);
}

.conversejs converse-add-muc-modal .alphabet-separator {
    color: var(--Typography-secondary, #b0cbff) !important;
    background-color: transparent;
    font-size: var(--Size-Subheadline, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-sm, 20px); /* 142.857% */
    letter-spacing: var(--Letter-spacing-Subheadline, 0);
}
.conversejs converse-add-muc-modal input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    background-color: #9ab9ff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 12px;
    cursor: pointer;
}
.conversejs converse-add-muc-modal .modal-content {
    width: 404px;
}
.conversejs converse-add-muc-modal .contacts-list {
    scrollbar-width: thin;
    /* Перший колір - повзунок, другий - доріжка */
    scrollbar-color: #3a528f rgba(21, 33, 66, 1);
}

.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar-track {
    background: rgba(21, 33, 66, 1);
    border-radius: 10px;
}

.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar-thumb {
    background: #3a528f; /* Зроби його світлішим за track, щоб бачити */
    border-radius: 10px;
}
.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar-thumb:hover {
    background: #4e6bb3;
}

.conversejs #converse-modals converse-add-muc-modal .modal-content .modal-body {
    margin-bottom: 0;
}

.conversejs #converse-modals converse-add-muc-modal .avatar-initials {
    font-size: 18px !important;
}
.conversejs #converse-modals converse-add-muc-modal input {
    display: flex;
    height: 36px;
    padding: 8px 4px 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 999px;
    background-color: var(--Bg-text_field, #18264a) !important;
}

.conversejs #converse-modals converse-add-muc-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: normal;
}

.conversejs #converse-modals converse-add-muc-modal .overflow-hidden {
    color: var(--Typography-primary, #e8f0ff);
    font-size: var(--Size-Body, 15px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-sm, 20px); /* 133.333% */
    letter-spacing: var(--Letter-spacing-Body, 0);
}
.conversejs #converse-modals converse-add-muc-modal .modal-title {
    order: 2;
    margin-left: 24%;
}

.conversejs #converse-modals converse-add-muc-modal .modal-header button {
    order: 1;
}

.conversejs #converse-modals converse-add-muc-modal input::placeholder {
    color: var(--Typography-tetriary, #7c96d6);
    font-size: var(--Size-Subheadline, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-sm, 20px); /* 142.857% */
    letter-spacing: var(--Letter-spacing-Subheadline, 0);
}

.conversejs #converse-modals .modal-header,
.conversejs #converse-modals .modal-content {
    background: #152142;
}

.conversejs sonata-logout-modal .modal-header,
.conversejs sonata-logout-modal form.converse-form,
.conversejs sonata-logout-modal .modal-title,
.conversejs sonata-logout-modal .modal-content {
    background-color: var(--bg-surface-alert, #253e75) !important;
    font-size: 18px;
    justify-content: center;
    border: none !important;
    color: var(--Typography-primary, #e8f0ff);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sonata-quote-gray: #a0a0a0;
    }
}

.conversejs .message blockquote {
    border-left: 0.3em solid rgba(232, 240, 255, 1);
    color: rgba(232, 240, 255, 1) !important;
    /* border-left-color: var(--sonata-quote-gray) !important; */
    display: block !important;
    margin: 5px 0 !important;
}

.conversejs #controlbox converse-login-form .btn {
    color: var(--sonata-button-text) !important;
}

:root {
    --sonata-author-color: #2d3991;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sonata-author-color: #4a5edb;
    }
}

.conversejs .message .show-msg-author-modal {
    align-self: flex-start;
    color: var(--sonata-author-color) !important;
    font-family: Helvetica, Arial, sans-serif;
}

.conversejs .message.chat-info.chat-error,
.conversejs .chat-error {
    color: #d93025 !important;
    font-weight: 700;
    text-align: center;
    padding: 5px;
}

@media (prefers-color-scheme: dark) {
    .conversejs .message.chat-info.chat-error,
    .conversejs .chat-error {
        color: #ff6b6b !important;
    }
    .conversejs .chat-info {
        color: #adb5bd !important;
    }
}

div.chat-info__message {
    text-align: center;
}

#conversejs-bg {
    pointer-events: none;
}

/* Login & Loader */
#conversejs converse-login-form,
#conversejs .converse-login-form,
#conversejs #controlbox #converse-login-form {
    display: none !important;
}

#conversejs {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

#conversejs.converse-ready {
    opacity: 1;
    pointer-events: auto;
    background-color: #152142;
}

#sonata-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #005691;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

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

#sonata-auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f4f7f9;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    font-family: sans-serif;
}

.auth-box {
    background: white;
    padding: 30px 30px 3px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 340px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-box h2 {
    color: #005691;
    margin-bottom: 20px;
    margin-top: 0;
    font-size: 24px;
    font-weight: 600;
}

.auth-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.auth-box button {
    width: 100%;
    padding: 12px;
    background: #005691;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.auth-logo {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    border: 1px solid #eee;
}

#auth-msg-container {
    min-height: 40px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#auth-msg {
    color: #d93025;
    font-size: 13px;
    text-align: center;
    line-height: 1.2;
}

.auth-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 86, 145, 0.1);
    border-top: 2px solid #005691;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
    margin-bottom: 5px;
}

.is-loading .auth-spinner {
    display: block;
}
.is-loading #auth-msg {
    display: none;
}

/* =========================
       tabs
       ========================= */

.userinfo-header {
    padding: 12px 0px;
    background-color: #101a33;
}

converse-user-profile {
    border-bottom: none;
    padding: 1.8em 1.16em 0.75em;
}

.form-control.chat-search {
    background: var(--Bg-text_field, #18264a);
}

.form-control.chat-search::placeholder {
    color: var(--Typography-tetriary, #7c96d6);
    font-size: var(--Size-Subheadline, 14px);
}

.header-top-row {
    margin-bottom: 20px;
    height: 30px;
}

.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.header-icon-btn:hover {
    opacity: 0.7;
}

/* Стилі для поля пошуку */
.header-search-row {
    position: relative;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    pointer-events: none;
}

.chat-search {
    width: 100%;
    background: var(--Bg-text_field, #18264a);
    border: none !important;
    border-radius: 20px !important;
    padding: 8px 12px 8px 38px !important;
    color: white !important;
    font-size: 14px;
}

.chat-search::placeholder {
    color: #8696a0;
}

.chat-search:focus {
    box-shadow: none !important;
    background: #2a3942 !important;
}

/* style for tabs */
/* Основной контейнер табов */
.custom-tabs.nav-tabs {
    display: flex;
    background-color: #0a1a33; /* Темно-синий фон как на скрине */
    border-bottom: 1px solid #1a2d4d;
    padding: 0 16px;
    margin: 0;
    list-style: none;
}

.custom-tabs .nav-item {
    margin-right: 20px;
}

.custom-tabs .nav-link {
    display: block;
    padding: 15px 0;
    color: var(--link-color);
    text-decoration: none;
    font-size: 14px;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.conversejs #controlbox .chat-status--avatar {
    display: none;
}

.custom-tabs .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 0;
    color: var(--link-color);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
    border-top: none;
    border-left: none;
    border-right: none;
    /* Резервируем место под границу заранее, чтобы не было прыжков */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* Прижимаем к основной линии border-bottom родителя */
}

/* .conversejs .nav-tabs .nav-link:hover {
  border: none;
  /* isolation: auto; */
.conversejs .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--Typography-hover, #9ab9ff);
}

.conversejs .nav-tabs .nav-link {
    color: var(--Typography-secondary, #b0cbff);
}

.conversejs .nav-tabs .nav-link.active {
    color: var(--Typography-active, #4c84fa);
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-color: var(--Icon-active, #4c84fa);
}

/* Активный таб с синим подчеркиванием */
.custom-tabs .nav-link.active {
    color: #4a90e2; /* Голубой текст */
    background: transparent;
    border-bottom: 2px solid #3b82f6; /* Ярко-синяя полоска */
    font-weight: 500;
}

/* Анимация контента */
.fade-in-all {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.conversejs .box-flyout .nav-tabs .nav-link,
converse-bg .nav-tabs .nav-link {
    /* border: none !important; */
    margin-bottom: 0;
    background: none;
}

converse-rooms-list .available-chatroom.hidden,
converse-rooms-list .open-chatroom.hidden {
    display: none !important;
}

.conversejs #controlbox .controlbox-pane {
    overflow-anchor: none !important;
}
.conversejs #controlbox .items-list > .list-item {
    height: 80px !important;
    min-height: 60px !important;
    box-sizing: border-box;
    position: relative;
}
.conversejs #controlbox .controlbox-pane {
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
}

.conversejs #controlbox .available-chatroom .chat-time {
    margin-top: 6px;
}
.conversejs #controlbox span.chat-time {
    color: var(--Typography-secondary, #b0cbff) !important;
    margin-top: 17px;
}

/* чтобы браузер не пересчитывал маркеры списка */
.conversejs #controlbox .sonata-vs-ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

a.open-room span {
    font-size: 15px;
    margin-left: 5px;
    margin-top: 5px;
}
div.text-mute {
    color: var(--Typography-secondary, #b0cbff);
}
div.text-muted.text-truncate {
    font-size: 0.8em;
    padding-left: 68px;
    font-size: 14px;
    margin-top: -23px;
    color: var(--Typography-secondary, #b0cbff) !important;
}

.available-chatroom {
    position: relative;
}

.conversejs a.open-room.list-item-link {
    display: flex;
}

.conversejs converse-muc.chatroom .btn.send-button converse-icon {
    color: var(--Icon-inversion, #e8f0ff) !important;
    fill: #e8f0ff !important;
}

.available-chatroom div.text-muted.text-truncate {
    font-size: 1em;
    margin-top: 0;
    padding-left: 5px;
}

div.chat-info {
    margin-top: -3px;
}

div.w-100 {
    height: 56px;
}

#icon-paper-plane path {
    fill: rgba(232, 240, 255, 1) !important;
}

.conversejs .message blockquote {
    color: rgba(232, 240, 255, 1);
}

div.new-chat-list {
    margin: 0 16px;
}

div.new-contact-actions {
    display: flex;
    /* padding: 0 7px; */
    align-items: flex-start;
    border-radius: 24px;
    flex-direction: column;
    background: var(--Button-list, #1d2e5a);
    margin-bottom: 20px;
}
div.new-contact-actions div {
    cursor: pointer;
    padding: 14px;
    width: 100%;
    color: var(--Typography-accent, #9ab9ff);
    font-size: var(--Size-Body, 15px);
}
div.new-contact-actions div:hover {
    background-color: rgba(154, 185, 255, 0.1);
    color: #b2c9ff;
    border-radius: 8px;
    border-radius: 20px 26px 1px 0px;
}
div.new-contact-actions div:last-of-type:hover {
    border-radius: 0px 0px 26px 24px;
}

div.list-item-action svg {
    width: 22px;
    height: 22px;
}

div.new-contact-actions .list-item-action span {
    margin-left: 16px;
}