/* Спільні стилі для модальних вікон */
.modal-content.custom-border {
    border-left: 5px solid #ff7e5f !important;
}

.modal-content.custom-border-warning {
    border-left: 5px solid #ffc107 !important;
}

.modal-content.custom-border-danger {
    border-left: 5px solid #dc3545 !important;
}

/* Стилі для feedPhotoModal (модальне вікно фотографій) */
.feed-photo-dialog {
    min-height: calc(100vh - 2rem);
    max-width: 130%;
}

.feed-photo-content {
    max-height: 90vh;
}

.feed-photo-img {
    max-height: 85vh;
    width: 100%;
    object-fit: contain;
}

.feed-photo-info {
    max-height: 85vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .feed-photo-dialog {
        min-height: calc(100dvh - 2rem);
        max-width: 100%;
        margin: 0.5rem !important;
    }

    .feed-photo-content {
        max-height: 95dvh;
    }

    .feed-photo-img {
        max-height: 50dvh;
    }

    .feed-photo-info {
        max-height: 35dvh;
    }
}

/* Специфічні стилі для commentsModal */
#comments-container {
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    #comments-container {
        max-height: 70dvh;
    }
}

#commentsModal .comment-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 50rem;
    padding: 0.5rem 1rem;
    background-color: #fff;
}

#commentsModal #comment-textarea {
    border: 0;
    box-shadow: none;
    flex: 1;
    resize: none;
    min-height: 40px;
    overflow-y: hidden;
}

#commentsModal #comment-textarea-feed {
    border: 0;
    box-shadow: none;
    flex: 1;
    resize: none;
    min-height: 40px;
    overflow-y: hidden;
}

/* Примусова кругла форма для кнопок */
#commentsModal .btn-gradient-animated {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

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

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