/* core/components/media_picker/media_picker.css — 183-3Н
 * Native <dialog> + glassmorphism через токены (R05/R07).
 */

@layer components {

    dialog.media_picker {
        /* 183-5Н: непрозрачный фон, консистентный с `.home-panel--types .slide-card`
           ∧ `.home-topbar` (gallery cards visual language) — пользователь явно
           попросил «непрозрачным и консистентным карточкам из галереи слайдов». */
        background: linear-gradient(145deg,
            rgba(30, 20, 50, 0.92),
            rgba(var(--surface-dark-rgb, 10 5 20), 0.96));
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(var(--text-main-rgb, 255 255 255), 0.1);
        border-radius: 16px;
        padding: var(--space-lg);
        /* 183-4Н: явный margin: auto восстанавливает UA-default центрирование native <dialog>[open].
           197-10.3Н: !important убран — universal reset (tokens.css:268) обёрнут в @layer reset,
           теперь @layer components > @layer reset → margin: auto естественно побеждает. */
        margin: auto;
        max-width: 480px;
        width: 90vw;
        color: var(--text-main);
        font-family: var(--font-body);
        box-shadow:
            0 24px 64px rgba(var(--black-rgb, 0 0 0), 0.7),
            0 4px 12px rgba(var(--black-rgb, 0 0 0), 0.4);
    }

    /* 183-5Н: hidden attribute должен скрывать elements даже при CSS display:block override */
    dialog.media_picker [hidden] {
        display: none !important; /* OPTICAL: UA hidden behavior preserved over component CSS */
    }

    dialog.media_picker::backdrop {
        background: rgba(0, 0, 0, 0.5);
        -webkit-backdrop-filter: blur(var(--blur-sm));
        backdrop-filter: blur(var(--blur-sm));
        -webkit-backdrop-filter: blur(var(--blur-sm));
    }

    .media_picker_close {
        position: absolute;
        top: var(--space-sm);
        right: var(--space-sm);
        background: transparent;
        border: none;
        color: var(--text-main);
        cursor: pointer;
        padding: var(--space-xs);
        border-radius: var(--radius-sm);
        transition: background var(--timing-fast) var(--ease-standard);
    }

    .media_picker_close:hover {
        background: var(--surface-border);
    }

    .media_picker_title {
        margin: 0 0 var(--space-md) 0;
        font-family: var(--font-head);
        font-size: var(--fs-h3);
        font-weight: 600;
        color: var(--text-main);
    }

    .media_picker_dropzone {
        border: 2px dashed var(--accent-secondary);
        border-radius: var(--radius-md);
        padding: var(--space-xl);
        cursor: pointer;
        text-align: center;
        transition: all var(--timing-fast) var(--ease-standard);
        background: rgba(var(--accent-secondary-rgb), 0.05);
    }

    .media_picker_dropzone:hover,
    .media_picker_dropzone.is-dragover {
        border-color: var(--accent-primary);
        background: rgba(var(--accent-primary-rgb), 0.1);
    }

    .media_picker_dropzone_hint {
        margin: 0;
        color: var(--text-secondary);
        font-size: var(--fs-body);
    }

    .media_picker_preview {
        display: block;
        max-width: 100%;
        max-height: 300px;
        margin: var(--space-md) auto 0;
        border-radius: var(--radius-md);
        border: 1px solid var(--surface-border);
    }

    .media_picker_error {
        margin-top: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        background: rgba(255, 100, 100, 0.15); /* OPTICAL: error visual cue, ¬в общей токен-палитре 183-3Н */
        border: 1px solid rgba(255, 100, 100, 0.3); /* OPTICAL: same */
        border-radius: var(--radius-sm);
        color: var(--text-main);
        font-size: var(--fs-body);
    }

    .media_picker_nav {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
    }

    .media_picker_btn {
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-md);
        border: 1px solid var(--surface-border);
        background: var(--surface-bg);
        color: var(--text-main);
        font-family: var(--font-body);
        font-size: var(--fs-body);
        cursor: pointer;
        min-height: var(--touch-min);
        transition: all var(--timing-fast) var(--ease-standard);
    }

    .media_picker_btn:hover:not(:disabled) {
        border-color: var(--accent-primary);
        background: rgba(var(--accent-primary-rgb), 0.1);
    }

    .media_picker_btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .media_picker_btn--confirm {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: var(--color-white);
    }

    .media_picker_btn--confirm:hover:not(:disabled) {
        filter: var(--hover-glow);
    }

}