/* Спільні стилі для модального вікна коментарів */

.modal-dialog-bottom-offset {
    display: flex;
    align-items: flex-end;
    margin: 0 auto 20px auto; /* 20px - відступ від низу */
    min-height: calc(100% - 20px);
}

/* Блок відображення контексту відповіді */
#reply-context {
    display: none;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

#reply-user-avatar {
    width: 35px;
    height: 35px;
    object-fit: cover;
}

.reply-context-card {
    margin-left: 8px;
}

/* Поле введення */
.comment-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 50rem;
    padding: 0.5rem 1rem; /* Змінюємо, щоб було симетрично */
    background-color: #fff;
}

.file-upload-label {
    cursor: pointer;
    color: #6c757d;
    font-size: 1.1rem;
    margin-right: 10px;
    margin-bottom: 0;
}

.emoji-trigger {
    cursor: pointer;
    color: #6c757d;
    font-size: 1.1rem;
    margin-right: 10px;
    margin-bottom: 0;
    background: none;
    border: none;
    padding: 0;
}

#comment-textarea {
    border: 0;
    box-shadow: none;
    flex: 1;
    resize: none; /* Забороняємо ручну зміну розміру */
    min-height: 40px; /* Мінімальна висота */
    overflow-y: hidden; /* Ховаємо скролбар */
}

/* Робимо кнопку відправки ідеально круглою */
.btn-gradient-animated {
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Робимо кнопку відправки ідеально круглою */
.btn-gradient-animated {
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Контейнер для емодзі */
#emoji-picker-container {
    margin-top: 0.5rem;
    display: none; /* Приховуємо за замовчуванням */
    width: 100% !important;
}

#emoji-picker-container.active {
    display: flex; /* Показуємо при додаванні класу active */
}

/* Примусово задаємо ширину для пікера всередині контейнера */
#emoji-picker-container em-emoji-picker {
    width: 100% !important;
}

/* Блок прев'ю зображення */
#image-preview-container {
    display: none;
    margin-top: 1rem;
}

.image-preview-wrapper {
    position: relative;
    display: inline-block;
}

#image-preview {
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
    display: block;
}

.clear-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* Адаптивні стилі для мобільних пристроїв */
@media (max-width: 576px) {
    /* Зменшуємо внутрішні відступи контейнера введення коментаря */
    .comment-input-wrapper {
        padding: 0.25rem 0.5rem !important;
    }

    /* Зменшуємо внутрішні відступи самого поля введення, щоб вивільнити місце, та зменшуємо шрифт */
    #comment-textarea {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        font-size: 0.875rem !important; /* 14px */
    }

    /* Зменшуємо розмір кнопок дій у контейнері введення */
    .comment-input-wrapper .btn-gradient-animated {
        width: 34px !important;
        height: 34px !important;
    }
}