/* =========================
       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;
    max-width: 85% !important;
    border-radius: 16px;
    width: fit-content !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    word-wrap: break-word;
    position: relative;
    /* Merged from a second identical-selector rule further down (display/padding
       here are overridden by it there); these are the properties that win. */
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px 6px 12px !important;
    min-width: 120px; /* Запас ширини для коротких слів */
}

.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);
    width: fit-content !important;
    max-width: 75% !important;
}

.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__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__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: 5px !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 2. ГАЛОЧКИ (Твій SVG) */
/* 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");
}

/* Порядок елементів у рядку */
.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;
}

/* .chat-msg__content--me converse-message-actions {
    position: absolute;
    left: -34px;
}

/* .chat-msg__content--me converse-message-actions converse-emoji-dropdown span {
    display: none;
} */

/* .chat-msg__content--me converse-message-actions converse-emoji-dropdown {
    display: none;
}

.chat-msg__content--me:hover converse-message-actions converse-emoji-dropdown {
    display: block;
} */
/* 1. Контейнер сообщения — точка отсчета */
.chat-msg__message {
    position: relative !important;
}

/* 2. Обнуляем влияние промежуточных тегов (ТІЛЬКИ для реакцій на повідомлення —
   без .chat-msg__message це правило ловило й <converse-emoji-dropdown> у
   тулбарі композера, ламаючи Popper-позиціонування головного пікера емодзі
   (він рендерився поза видимою областю, "під" повідомленнями). */
.chat-msg__message converse-message-actions,
.chat-msg__message converse-emoji-dropdown {
    position: static !important;
}

converse-muc-chatarea converse-message-actions {
    width: 45px;
}

/* 3. Пикер всегда растет вверх, но уходит вправо */
converse-muc-chatarea .chat-msg__content converse-emoji-dropdown .dropdown-menu.show,
.chat-area .chat-msg__content converse-emoji-dropdown .dropdown-menu.show {
    position: absolute !important;

    top: auto !important;
    left: auto !important;
    transform: none !important;

    /* Выталкиваем пикер полностью ВПРАВО за пределы сообщения */
    right: -100px !important;

    /* Привязываем НИЗ пикера к уровню экшенов (растет строго вверх) */
    bottom: -100px !important;

    /* Дополнительный косметический отступ, если нужно приподнять 
       над нижней границей сообщения (например, 5px-10px) */
    margin-bottom: 0px !important;

    /* Фиксируем габариты, чтобы сетка не ломалась */
    width: 320px !important;
    max-height: 350px !important;
    display: flex !important;
    flex-direction: column !important;

    z-index: 1050 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 4. Скролл для внутренней сетки смайлов */
converse-emoji-dropdown .dropdown-menu.show .emoji-picker__lists {
    max-height: 280px !important;
    overflow-y: auto !important;
}