/* ==========================================================================
   1. ОБЩИЕ НАСТРОЙКИ КОНТЕЙНЕРА ЭКШЕНОВ (Скрыт по умолчанию)
   ========================================================================== */
.chat-msg__content converse-message-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 0.1s ease-in-out,
        visibility 0.1s ease-in-out;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
}

/* ХАК: Создаем невидимый мост между сообщением и кнопками */
.chat-msg__content converse-message-actions::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    bottom: -20px !important;
    left: -20px !important;
    right: -20px !important;
    z-index: -1 !important;
}

/* ==========================================================================
   2. СТИЛИЗАЦИЯ КНОПКИ СМАЙЛИКА (Только иконка, цвет fill, без фонов)
   ========================================================================== */
.chat-msg__content
    converse-message-actions
    .chat-msg__action-react-wrapper
    converse-emoji-dropdown
    button.toggle-emojis {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Красим SVG иконку смайлика */
.chat-msg__content
    converse-message-actions
    .chat-msg__action-react-wrapper
    converse-emoji-dropdown
    button.toggle-emojis
    converse-icon
    svg {
    fill: rgb(184, 240, 244) !important;
}
.chat-msg__content converse-message-actions converse-emoji-dropdown[purpose='reaction'] .toggle-emojis svg {
    color: rgb(184, 240, 244) !important;
}

/* Скрываем текст "Додати реакцію" возле вынесенного смайла */
.chat-msg__content
    converse-message-actions
    .chat-msg__action-react-wrapper
    converse-emoji-dropdown
    button.toggle-emojis
    span {
    display: none !important;
}

.chat-msg__content
    converse-message-actions
    .chat-msg__action-react-wrapper
    converse-emoji-dropdown
    button.toggle-emojis:hover
    converse-icon
    svg {
    filter: drop-shadow(0 0 2px rgba(184, 240, 244, 0.6));
    opacity: 0.8;
}

/* ==========================================================================
   3. ЛОГИКА ХОВЕРА И ПОЗИЦИИ: ДЛЯ МОИХ СООБЩЕНИЙ (Слева)
   ========================================================================== */
.chat-msg__content--me converse-message-actions {
    left: -84px !important;
    right: auto !important;
}

emoji-skintone-picker {
    display: none !important;
}

.conversejs .message.chat-msg:hover .btn--standalone {
    opacity: 1;
}

/* Твои сообщения: стандартный порядок (сначала смайл, потом три точки) */
.chat-msg__content--me converse-message-actions .chat-msg__action-react-wrapper {
    order: 1 !important;
}
.chat-msg__content--me converse-message-actions converse-dropdown {
    order: 2 !important;
}

.message.chat-msg:hover .chat-msg__content--me converse-message-actions,
.chat-msg__content--me converse-message-actions:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.conversejs .chat-msg__action-react-btn converse-icon svg {
    color: #b8f0f4 !important;
}

/* ==========================================================================
   4. ЛОГИКА ХОВЕРА И ПОЗИЦИИ: ДЛЯ ВХОДЯЩИХ (Чужих) СООБЩЕНИЙ (Справа)
   ========================================================================== */
.chat-msg__content--them converse-message-actions {
    right: -77px !important;
    left: auto !important;
}

/* Входящие сообщения: меняем порядок (сначала три точки, потом смайл) */
.chat-msg__content--them converse-message-actions converse-dropdown {
    order: 1 !important;
}
.chat-msg__content--them converse-message-actions .chat-msg__action-react-wrapper {
    order: 2 !important;
}

.message.chat-msg:hover .chat-msg__content--them converse-message-actions,
.chat-msg__content--them converse-message-actions:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   5. ДОПОЛНИТЕЛЬНЫЕ КОРРЕКЦИИ ОТОБРАЖЕНИЯ МЕНЮ
   ========================================================================== */

/* Скрываем дубликат смайла внутри развернутого списка */
.chat-msg__content ul.dropdown-menu .chat-msg__action-react-wrapper {
    display: none !important;
}
/* ЖЕЛЕЗОБЕТОННЫЙ ORDER: Меняем порядок элементов (сначала три точки, потом смайл) */
.chat-msg__content--them converse-message-actions converse-dropdown,
.chat-msg__content--them converse-message-actions .chat-msg__actions {
    order: 1 !important;
}

.chat-msg__content--them:hover converse-message-actions,
.chat-msg__content--them converse-message-actions:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* Возвращаем три точки в общий поток флексбокса внутри экшенов, 
   чтобы order: 1 наконец-то заработал */
.conversejs .message.chat-msg.groupchat converse-message-actions .chat-msg__actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
}