/* =====================================================================
   Meshy AI - shared dialog
   Loaded on both the generator page and My Account, because the
   "file is too large" notice is raised from either one.
   ===================================================================== */

.meshy-modal-backdrop {
    /* The dialog is appended to <body>, outside .meshy-ai-container, so it
       carries its own copy of the tokens it needs. */
    --meshy-grad:      linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #ec4899 100%);
    --meshy-accent-2:  #ec4899;
    --meshy-radius-sm: 10px;
    --meshy-radius-lg: 24px;
    --meshy-font:      ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                       Roboto, "Helvetica Neue", Arial, "Noto Sans Hebrew",
                       "Heebo", "Rubik", sans-serif;
    --meshy-ease:      cubic-bezier(.22, 1, .36, 1);

    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 5, 18, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s var(--meshy-ease);
}
.meshy-modal-backdrop.is-open { opacity: 1; }

.meshy-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 30px 26px 24px;
    border-radius: var(--meshy-radius-lg);
    border: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(160deg, #1a1030 0%, #110a22 100%);
    color: #f5f3ff;
    font-family: var(--meshy-font, inherit);
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    transform: translateY(12px) scale(.97);
    transition: transform .25s var(--meshy-ease);
}
.meshy-modal-backdrop.is-open .meshy-modal { transform: none; }

.meshy-modal__close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #b8b2d1;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.meshy-modal__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.meshy-modal__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 58, 237, .28), rgba(236, 72, 153, .28));
    color: #f5f3ff;
}
.meshy-modal__icon svg { width: 30px; height: 30px; }

.meshy-modal__title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
}

.meshy-modal__text {
    margin: 0 0 18px;
    font-size: .95rem;
    line-height: 1.65;
    color: #cfc9e6;
}

.meshy-modal__contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.meshy-modal__contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--meshy-radius-sm);
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #f5f3ff;
    text-align: start;
    text-decoration: none;
    transition: background .2s var(--meshy-ease), border-color .2s var(--meshy-ease);
}
.meshy-modal__contact:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(236, 72, 153, .55);
}

.meshy-modal__contact-icon { display: inline-grid; place-items: center; flex: none; }
.meshy-modal__contact-icon svg { width: 22px; height: 22px; display: block; }

.meshy-modal__contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meshy-modal__contact-label { font-size: .78rem; color: #a49dc4; }
.meshy-modal__contact-value {
    font-size: .95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.meshy-modal__dismiss {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: #f5f3ff;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.meshy-modal__dismiss:hover { background: rgba(255, 255, 255, .12); }

@media (prefers-reduced-motion: reduce) {
    .meshy-modal-backdrop,
    .meshy-modal { transition: none; }
}