{{-- Styles for Gallery Picker V2 --}}
<link rel="stylesheet" href="{{ asset('assets/vendor/cropperjs/cropper.min.css') }}">
<style>
    .gallery-single-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .gallery-segment {
        border: 1px solid #e1e8ed;
        border-radius: 6px;
        background: #fff;
        padding: 15px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .gallery-segment-title {
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        color: #31708f;
        margin-top: 0;
        margin-bottom: 10px;
        border-bottom: 1px solid #f0f4f7;
        padding-bottom: 5px;
    }
    .gallery-grid-container {
        min-height: 200px;
        max-height: 300px;
        overflow-y: auto;
        padding: 10px;
        border: 1px solid #eee;
        background: #fafafa;
        border-radius: 4px;
    }
    .gallery-item-card {
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        padding: 4px;
        margin-bottom: 10px;
    }
    .gallery-item-card:hover, .gallery-item-card.selected {
        border-color: #3c8dbc;
        box-shadow: 0 0 8px rgba(60, 141, 188, 0.3);
    }
    .media-detail-preview-box {
        text-align: center;
        background: #f5f5f5;
        border-radius: 4px;
        padding: 15px;
        border: 1px solid #ddd;
    }
    @keyframes pulseUpload {
        0% { transform: scale(1); opacity: 0.9; }
        50% { transform: scale(1.03); opacity: 1; }
        100% { transform: scale(1); opacity: 0.9; }
    }
    .pulse-animation {
        animation: pulseUpload 2s infinite ease-in-out;
    }
    @keyframes waveBar {
        0% { height: 6px; }
        50% { height: 18px; }
        100% { height: 6px; }
    }
    .bar-anim {
        animation: waveBar 1.2s infinite ease-in-out;
        display: inline-block;
    }
    .bar-anim:nth-child(2) { animation-delay: 0.2s; }
    .bar-anim:nth-child(3) { animation-delay: 0.4s; }
    .bar-anim:nth-child(4) { animation-delay: 0.6s; }
</style>