@charset "utf-8";

/* ==========================================================
   Profile Message Modal
   ========================================================== */

.profile-message-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);

    display: grid;
    place-items: center;
}

.profile-message-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(20, 15, 18, 0.72);
    backdrop-filter: blur(3px);
}

.profile-message-modal__panel {
    position: relative;
    z-index: var(--z-modal);

    width: min(560px, 100%);
    max-height: calc(100svh - 40px);
    overflow-y: auto;

    padding: clamp(24px, 5vw, 38px);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);

    pointer-events: auto;
}

.profile-message-modal__close-form {
    position: absolute;
    top: 14px;
    right: 14px;

    margin: 0;
}

.profile-message-modal__header {
    padding-right: 52px;
}

.profile-message-modal__header > p:last-child {
    margin-top: 10px;
    color: var(--color-muted);
}

.profile-message-form {
    display: grid;
    gap: 22px;

    margin-top: 28px;
}

@media (max-width: 620px) {

    .profile-message-modal {
        padding: 10px;
    }

    .profile-message-modal__panel {
        max-height: calc(100svh - 20px);
    }
}