/* =========================
       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);
}

/* The Jitsi call overlay (converse-jitsi-conference) renders full-screen at
   z-index:9999 — one below the resizer's 10000, so the resizer's draggable
   strip stayed visible and clickable on top of an active video call. */
body:has(converse-jitsi-conference) #sonata-resizer {
    display: none;
}

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;
}

.conversejs converse-message-actions .chat-msg__actions .dropdown-item.chat-msg__action.chat-msg__action-hide-previews {
    display: none !important;
}

.quoted-message-preview__content-new {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
}

converse-icon.fa-sign-out-alt svg {
    width: 13px;
    height: 13px;
}

converse-alert-modal .modal-content {
    background: #1d2a4d !important;
    color: var(--Typography-accent, #9ab9ff) !important;
}

.quoted-message-preview__author-new {
    display: block;
    font-weight: bold;
    font-size: 1em;
    color: rgba(232, 240, 255, 1);
    margin-bottom: 2px;
}
.quoted-message-preview__text-new {
    font-size: 1em;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #c7d7d7;
}
.emoji-skintone-picker {
    visibility: hidden !important;
}
.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: 5px 12px 5px 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;
}
/* Уніфікація розміру аватара у списках. Незбережені контакти рендеряться
   іншим шаблоном з аватаром 30px — вирівнюємо фото (svg + image) до 56px,
   як в ініціалів вище, щоб усі рядки виглядали однаково. */
li.list-item converse-avatar > svg.avatar,
li.list-item converse-avatar > svg.avatar > image {
    width: 56px !important;
    height: 56px !important;
    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;
}

/* 1:1 contact rows (controlbox-padded without available-chatroom, which is
   room rows only) use their own offsets — kept separate from the room/
   roster-contact rule above so tweaking one never touches the other. */
.controlbox-padded:not(.available-chatroom) .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: -3px;
}

.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%;
}