/*
 * AI Friends CSS
 */

.aifl-main {
    min-height: 100svh;
    padding-top: max(5.25rem, calc(4.25rem + env(safe-area-inset-top)));
    padding-bottom: 80px;
    position: relative;
    background:
        radial-gradient(circle at 12% 0%, rgba(125, 211, 252, 0.10), transparent 32%),
        radial-gradient(circle at 90% 20%, rgba(251, 113, 133, 0.08), transparent 30%),
        linear-gradient(180deg, #070a13 0%, #090c16 100%);
    overflow-x: hidden;
}

.aifl-shell {
    position: relative;
    z-index: 1;
}

.aifl-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 1.75rem 0 1.25rem;
    margin-bottom: 1.25rem;
}

.aifl-hero-copy {
    max-width: 680px;
}

.aifl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(125, 211, 252, 0.20);
    background: rgba(12, 16, 28, 0.42);
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(16px);
}

.aifl-title {
    margin: 14px 0 8px;
    color: #f5f7ff;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.aifl-subtitle {
    margin: 0;
    max-width: 560px;
    color: rgba(219, 229, 255, 0.72);
    font-size: 0.98rem;
    line-height: 1.65;
}

.aifl-hero-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(111, 152, 255, 0.18);
    background: rgba(10, 14, 24, 0.82);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    color: #dbe5ff;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.aifl-login-card {
    text-align: center;
    padding: 44px 24px;
    background: rgba(18, 18, 22, 0.7);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(111, 152, 255, 0.12);
    border-radius: 28px;
    margin-bottom: 40px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

.friends-grid.aifl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.friend-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 4 / 5;
    transform: translateZ(0);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, box-shadow .2s ease;
}

.aifl-create-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 22px;
    border: 1px dashed rgba(125, 211, 252, 0.34);
    background:
        radial-gradient(circle at top, rgba(125, 211, 252, 0.16), transparent 55%),
        radial-gradient(circle at bottom right, rgba(251, 113, 133, 0.12), transparent 50%),
        linear-gradient(180deg, rgba(18, 24, 39, 0.94), rgba(10, 12, 22, 0.96));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.30);
    text-align: center;
}

.aifl-create-card:focus-visible {
    border-color: rgba(127, 169, 255, 0.5);
    outline: none;
}
.aifl-create-card:hover,
.aifl-friend-card:hover {
    transform: translateY(-5px) translateZ(0);
    border-color: rgba(125, 211, 252, 0.42);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42), 0 0 36px rgba(125, 211, 252, .10);
}

.aifl-create-icon-shell {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 211, 252, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.24);
}

.aifl-create-title {
    margin: 0;
    color: #f4f7ff;
    font-size: 1.12rem;
    font-weight: 800;
}

.aifl-create-copy {
    margin: 0;
    color: rgba(214, 221, 240, 0.72);
    font-size: 0.87rem;
    line-height: 1.55;
}

.aifl-friend-card {
    cursor: pointer;
    background: #11141d;
    border: 1px solid rgba(125, 211, 252, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 14px 30px rgba(0, 0, 0, 0.26);
}

.aifl-friend-card:focus-visible {
    border-color: rgba(127, 169, 255, 0.5);
    outline: none;
}

.aifl-friend-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .36s ease, filter .28s ease;
}
.aifl-friend-card:hover .aifl-friend-image {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.04);
}

.aifl-friend-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(7, 9, 16, 0.98) 0%, rgba(7, 9, 16, 0.74) 38%, rgba(7, 9, 16, 0.12) 66%),
        linear-gradient(180deg, rgba(111, 152, 255, 0.06), transparent 30%);
}

.aifl-friend-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}

.aifl-friend-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aifl-friend-name {
    margin: 0;
    color: #fff;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.aifl-friend-tagline {
    margin: 0;
    color: rgba(232, 237, 250, 0.7);
    font-size: 0.82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aifl-friend-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.aifl-primary-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7dd3fc, #fb7185);
    color: #07101e;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(255, 255, 255, 0.1);
}

.aifl-delete-btn {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(7, 11, 20, 0.6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.aifl-delete-btn:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

/* Wizard Animations & Effects */
.wizard-container {
    animation: wizUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes wizUp {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.wizard-step {
    animation: stepFade 0.3s ease forwards;
}

@keyframes stepFade {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.hover-border-indigo:hover {
    border-color: #818cf8 !important;
    background: rgba(129, 140, 248, 0.05);
}

.trait-card:has(input:checked) {
    border-color: #818cf8 !important;
    background: rgba(129, 140, 248, 0.1) !important;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.1);
}

.voice-card:has(input:checked) {
    border-color: #818cf8 !important;
    background: rgba(129, 140, 248, 0.1) !important;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.1);
}

.voice-card:hover:not(:has(input:checked)) {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.voice-play-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

.voice-play-btn.playing {
    background: #818cf8 !important;
}

.voice-play-btn:disabled,
.voice-play-btn.loading {
    opacity: 0.55;
    cursor: wait;
}

/* Common form utilities */
.wz-effect-checkbox:checked + .effect-chip {
    border-color: #818cf8;
    color: #818cf8;
}

/* Avatar Upload Animation */
@keyframes spinRing {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.upload-spinner-ring {
    animation: spinRing 1s linear infinite;
    transform-origin: center;
}

.upload-progress-track {
    width: 100%;
    max-width: 180px;
    height: 4px;
    background: rgba(129, 140, 248, 0.15);
    border-radius: 999px;
    margin: 0 auto;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 55%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(129, 140, 248, 0.6) 30%,
        #818cf8 50%,
        rgba(129, 140, 248, 0.6) 70%,
        transparent 100%
    );
    border-radius: 999px;
    animation: shimmer 1.4s ease-in-out infinite;
}

.avatar-card-uploading {
    border-color: #818cf8 !important;
    background: rgba(129, 140, 248, 0.07) !important;
    pointer-events: none;
    cursor: default;
}

@media (max-width: 900px) {
    .aifl-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .friends-grid.aifl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .friend-card {
        aspect-ratio: 4 / 5;
    }

    .aifl-create-card {
        min-height: 180px;
        padding: 18px 14px;
    }

    .aifl-friend-content {
        padding: 12px;
    }

    .aifl-friend-name {
        font-size: 1.08rem;
    }

    .aifl-friend-tagline {
        font-size: 0.76rem;
    }

    .aifl-primary-action,
    .aifl-delete-btn {
        min-height: 38px;
    }

    .wizard-container {
        height: 100svh;
        max-height: 100svh;
        border-radius: 0;
        border: none;
    }
}

/* v57 AI Friends premium mobile-first repair */
.aifl-main {
    padding-top: max(4.7rem, calc(3.85rem + env(safe-area-inset-top))) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.14), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(244, 114, 182, 0.12), transparent 30%),
        linear-gradient(180deg, #050814 0%, #080b14 100%) !important;
}
.aifl-shell {
    max-width: 1180px !important;
}
.aifl-hero {
    padding: 1.1rem 0 1.4rem !important;
    border-bottom: 1px solid rgba(125,211,252,.14);
    margin-bottom: 1.2rem !important;
}
.aifl-kicker {
    border-radius: 7px !important;
    background: rgba(45,212,191,.09) !important;
    border-color: rgba(45,212,191,.22) !important;
    color: #a7f3d0 !important;
}
.aifl-title {
    font-size: clamp(2.2rem, 7vw, 4.8rem) !important;
    letter-spacing: -.07em !important;
}
.aifl-subtitle {
    color: rgba(226,232,240,.76) !important;
}
.aifl-hero-pill,
.aifl-login-card {
    border-radius: 12px !important;
    background: rgba(15,23,42,.78) !important;
    border-color: rgba(125,211,252,.18) !important;
}
.friends-grid.aifl-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 16px !important;
}
.friend-card {
    border-radius: 16px !important;
    aspect-ratio: 3.8 / 5 !important;
}
.aifl-create-card {
    min-height: 250px;
    background:
        radial-gradient(circle at 50% 0%, rgba(45,212,191,.18), transparent 48%),
        radial-gradient(circle at 90% 92%, rgba(244,114,182,.13), transparent 42%),
        linear-gradient(180deg, rgba(15,23,42,.96), rgba(7,10,19,.98)) !important;
    border: 1px solid rgba(125,211,252,.28) !important;
}
.aifl-create-card:hover,
.aifl-friend-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
}
.aifl-create-icon-shell {
    background: linear-gradient(135deg, rgba(45,212,191,.20), rgba(244,114,182,.14)) !important;
    border-color: rgba(125,211,252,.28) !important;
}
.aifl-create-icon-shell svg {
    stroke: #a7f3d0 !important;
}
.aifl-friend-card {
    background: #050814 !important;
    border-color: rgba(125,211,252,.22) !important;
}
.aifl-friend-image {
    object-fit: cover !important;
    object-position: center top !important;
}
.aifl-friend-overlay {
    background:
        linear-gradient(to top, rgba(2,6,23,.98) 0%, rgba(2,6,23,.76) 34%, rgba(2,6,23,.18) 68%),
        radial-gradient(circle at 50% 100%, rgba(45,212,191,.16), transparent 44%) !important;
}
.aifl-friend-actions {
    gap: 7px !important;
}
.aifl-primary-action,
.aifl-delete-btn {
    border-radius: 11px !important;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease, background .18s ease !important;
}
.aifl-primary-action {
    background: linear-gradient(135deg, #2dd4bf, #7dd3fc 48%, #f472b6) !important;
    color: #020617 !important;
    box-shadow: 0 12px 26px rgba(45,212,191,.16) !important;
}
.aifl-primary-action:hover,
.aifl-delete-btn:hover {
    transform: translateY(-1px) !important;
    filter: saturate(1.12) brightness(1.05) !important;
}
.aifl-delete-btn {
    background: rgba(2,6,23,.68) !important;
    border-color: rgba(255,255,255,.16) !important;
}

@media (max-width: 760px) {
    .aifl-main {
        padding-top: max(4.2rem, calc(3.6rem + env(safe-area-inset-top))) !important;
        padding-bottom: 36px !important;
    }
    .aifl-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .aifl-hero {
        gap: 12px !important;
        padding-top: .75rem !important;
        padding-bottom: 1rem !important;
    }
    .aifl-title {
        margin-top: 10px !important;
        font-size: clamp(2rem, 12vw, 3.4rem) !important;
    }
    .aifl-subtitle {
        font-size: .9rem !important;
        line-height: 1.55 !important;
    }
    .friends-grid.aifl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .friend-card {
        aspect-ratio: 3.5 / 5 !important;
        border-radius: 14px !important;
    }
    .aifl-create-card {
        min-height: auto !important;
        padding: 14px 10px !important;
        gap: 8px !important;
    }
    .aifl-create-icon-shell {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }
    .aifl-create-title {
        font-size: .96rem !important;
    }
    .aifl-create-copy {
        font-size: .72rem !important;
        line-height: 1.35 !important;
    }
    .aifl-friend-content {
        padding: 10px !important;
    }
    .aifl-friend-name {
        font-size: 1rem !important;
    }
    .aifl-friend-tagline {
        display: none !important;
    }
    .aifl-friend-actions {
        margin-top: 9px !important;
    }
    .aifl-primary-action,
    .aifl-delete-btn {
        min-height: 34px !important;
        font-size: .72rem !important;
    }
    .aifl-delete-btn {
        width: 34px !important;
        min-width: 34px !important;
    }
}

/* v69.3 final override: simple plus, no create-card plus animation. */
.aifl-create-icon-shell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.aifl-create-plus-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    color: #f8fbff !important;
    animation: none !important;
    transform: none !important;
}

.aifl-create-card:hover .aifl-create-plus-icon,
.aifl-create-card:active .aifl-create-plus-icon,
.aifl-create-icon-shell:hover .aifl-create-plus-icon,
.aifl-create-card:hover .aifl-create-icon-shell {
    animation: none !important;
    transform: none !important;
}

#ai-wizard-overlay input:focus,
#ai-wizard-overlay textarea:focus,
#ai-wizard-overlay input:focus-visible,
#ai-wizard-overlay textarea:focus-visible,
#wz-custom-personality:focus,
#wz-custom-personality:focus-visible,
#wz-name:focus,
#wz-name:focus-visible,
#wz-tagline:focus,
#wz-tagline:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* v69.5 final AI Friends button tone: professional cyan glass, no over-pink chat CTA. */
.aifl-primary-action,
.aifl-friend-card .aifl-primary-action,
.friend-card .aifl-primary-action {
    background:
        radial-gradient(circle at 28% 20%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, rgba(125,211,252,.22), rgba(56,189,248,.16) 52%, rgba(129,140,248,.14)) !important;
    border: 1px solid rgba(125,211,252,.44) !important;
    color: #f8fbff !important;
    text-shadow: none !important;
    box-shadow: 0 12px 30px rgba(14,165,233,.13), inset 0 1px 0 rgba(255,255,255,.18) !important;
    filter: none !important;
}

.aifl-primary-action:hover,
.aifl-friend-card .aifl-primary-action:hover,
.friend-card .aifl-primary-action:hover {
    background:
        radial-gradient(circle at 28% 20%, rgba(255,255,255,.20), transparent 34%),
        linear-gradient(135deg, rgba(125,211,252,.26), rgba(56,189,248,.19) 52%, rgba(129,140,248,.16)) !important;
    border-color: rgba(125,211,252,.56) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 34px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.aifl-create-card:hover,
.aifl-friend-card:hover {
    border-color: rgba(125,211,252,.42) !important;
    box-shadow: 0 30px 78px rgba(0,0,0,.50), 0 0 34px rgba(56,189,248,.11) !important;
}
/* v69.5 final tail override: professional non-pink friend chat action. */
.aifl-primary-action,
.aifl-friend-card .aifl-primary-action,
.friend-card .aifl-primary-action {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, rgba(56,189,248,.24), rgba(14,165,233,.16) 48%, rgba(99,102,241,.16)) !important;
    border: 1px solid rgba(125,211,252,.42) !important;
    color: #f8fbff !important;
    text-shadow: none !important;
    box-shadow: 0 12px 28px rgba(14,165,233,.14), inset 0 1px 0 rgba(255,255,255,.18) !important;
    filter: none !important;
}

.aifl-primary-action:hover,
.aifl-friend-card .aifl-primary-action:hover,
.friend-card .aifl-primary-action:hover {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(135deg, rgba(56,189,248,.30), rgba(14,165,233,.20) 48%, rgba(99,102,241,.18)) !important;
    border-color: rgba(125,211,252,.58) !important;
    box-shadow: 0 14px 30px rgba(14,165,233,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
    transform: translateY(-1px) !important;
}

/* v69.5 final: professional non-pink friend chat action. */
.aifl-primary-action,
.aifl-friend-card .aifl-primary-action,
.friend-card .aifl-primary-action {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, rgba(56,189,248,.24), rgba(14,165,233,.16) 48%, rgba(99,102,241,.16)) !important;
    border: 1px solid rgba(125,211,252,.42) !important;
    color: #f8fbff !important;
    text-shadow: none !important;
    box-shadow: 0 12px 28px rgba(14,165,233,.14), inset 0 1px 0 rgba(255,255,255,.18) !important;
    filter: none !important;
}

.aifl-primary-action:hover,
.aifl-friend-card .aifl-primary-action:hover,
.friend-card .aifl-primary-action:hover {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(135deg, rgba(56,189,248,.30), rgba(14,165,233,.20) 48%, rgba(99,102,241,.18)) !important;
    border-color: rgba(125,211,252,.58) !important;
    box-shadow: 0 14px 30px rgba(14,165,233,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
    transform: translateY(-1px) !important;
}

/* v69.4: reduce pink weight on friend chat action. */
.aifl-primary-action {
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(135deg, rgba(125,211,252,.22), rgba(59,130,246,.16)) !important;
    border: 1px solid rgba(125,211,252,.38) !important;
    color: #f8fbff !important;
    text-shadow: none !important;
    box-shadow: 0 12px 28px rgba(56,189,248,.13), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.aifl-primary-action:hover {
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.26), transparent 34%),
        linear-gradient(135deg, rgba(125,211,252,.28), rgba(129,140,248,.16)) !important;
    border-color: rgba(125,211,252,.52) !important;
    box-shadow: 0 14px 30px rgba(56,189,248,.16), inset 0 1px 0 rgba(255,255,255,.22) !important;
    filter: none !important;
    transform: translateY(-1px) !important;
}

/* v69.3 simple create plus and quiet prompt focus states. */
.aifl-create-icon-shell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.aifl-create-plus-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    color: #f8fbff !important;
    animation: none !important;
    transform: none !important;
    transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), color 180ms cubic-bezier(.22, 1, .36, 1) !important;
}

.aifl-create-card:hover .aifl-create-plus-icon,
.aifl-create-card:active .aifl-create-plus-icon,
.aifl-create-icon-shell:hover .aifl-create-plus-icon {
    animation: none !important;
    transform: none !important;
}

.aifl-create-card:hover .aifl-create-icon-shell {
    transform: none !important;
}

#ai-wizard-overlay input:focus,
#ai-wizard-overlay textarea:focus,
#ai-wizard-overlay input:focus-visible,
#ai-wizard-overlay textarea:focus-visible,
#wz-custom-personality:focus,
#wz-custom-personality:focus-visible,
#wz-name:focus,
#wz-name:focus-visible,
#wz-tagline:focus,
#wz-tagline:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* v69.2 premium AI Friends motion pass: calm glass movement, wizard polish, and restrained hover. */
:root {
    --aif-motion-press: 120ms;
    --aif-motion-release: 260ms;
    --aif-motion-page: 520ms;
    --aif-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --aif-cyan-border: rgba(125, 211, 252, .34);
    --aif-cyan-glow: rgba(56, 189, 248, .18);
    --aif-rose-glow: rgba(236, 72, 153, .20);
}

@keyframes aifCardFadeUp {
    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes aifPlusIn {
    from { opacity: 0; transform: rotate(-28deg) scale(.94); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes aifWizardStepRight {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes aifWizardStepLeft {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes aifVoiceBars {
    0%, 100% { transform: scaleY(.52); opacity: .55; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes aifUploadShimmer {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes aifThumbIn {
    from { opacity: 0; transform: translateY(6px) scale(.985); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes aifSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
    .aifl-hero,
    .aifl-create-card,
    .aifl-friend-card {
        animation: aifCardFadeUp var(--aif-motion-page) var(--aif-motion-ease) both !important;
    }
    .friends-grid.aifl-grid > *:nth-child(1) { animation-delay: 0ms !important; }
    .friends-grid.aifl-grid > *:nth-child(2) { animation-delay: 40ms !important; }
    .friends-grid.aifl-grid > *:nth-child(3) { animation-delay: 80ms !important; }
    .friends-grid.aifl-grid > *:nth-child(4) { animation-delay: 120ms !important; }
    .friends-grid.aifl-grid > *:nth-child(5) { animation-delay: 160ms !important; }
    .friends-grid.aifl-grid > *:nth-child(6) { animation-delay: 200ms !important; }
    .friends-grid.aifl-grid > *:nth-child(n+7) { animation-delay: 240ms !important; }
    .aifl-create-plus-icon { animation: aifPlusIn 420ms var(--aif-motion-ease) both; }
}

.aifl-create-card,
.aifl-friend-card,
.trait-card,
.voice-card,
.voice-play-btn,
#wz-btn-back,
#wz-btn-next {
    transition-property: transform, opacity, background, border-color, box-shadow, color, filter !important;
    transition-duration: var(--aif-motion-release) !important;
    transition-timing-function: var(--aif-motion-ease) !important;
}

.aifl-create-card:active,
.aifl-friend-card:active,
.aifl-primary-action:active,
.aifl-delete-btn:active,
#wz-btn-back:active,
#wz-btn-next:active,
.voice-play-btn:active {
    transform: translateY(0) scale(.985) !important;
    transition-duration: var(--aif-motion-press) !important;
}

.aifl-create-card:hover,
.aifl-friend-card:hover {
    transform: translateY(-3px) translateZ(0) !important;
}

.aifl-create-card:hover .aifl-create-plus-icon {
    transform: rotate(48deg) translateZ(0) !important;
}

#ai-wizard-overlay {
    opacity: 0;
    background: rgba(5, 7, 14, 0) !important;
    backdrop-filter: blur(0) !important;
    -webkit-backdrop-filter: blur(0) !important;
    transition: opacity var(--aif-motion-release) var(--aif-motion-ease), background var(--aif-motion-release) var(--aif-motion-ease), backdrop-filter var(--aif-motion-release) var(--aif-motion-ease) !important;
}

#ai-wizard-overlay.is-visible {
    opacity: 1;
    background: rgba(5, 7, 14, .72) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

#ai-wizard-overlay .wizard-container {
    transform: translateY(8px) scale(.98);
    opacity: 0;
    background:
        radial-gradient(circle at 8% 0%, rgba(244,114,182,.10), transparent 36%),
        linear-gradient(180deg, rgba(20, 22, 31, .96), rgba(9, 10, 17, .98)) !important;
    border-color: rgba(125,211,252,.18) !important;
    box-shadow: 0 34px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(125,211,252,.05), inset 0 1px 0 rgba(255,255,255,.08) !important;
    transition: transform var(--aif-motion-release) var(--aif-motion-ease), opacity var(--aif-motion-release) var(--aif-motion-ease) !important;
}

#ai-wizard-overlay.is-visible .wizard-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

body.aif-wizard-open .aifl-main::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: rgba(3, 5, 12, .18) !important;
    z-index: 9 !important;
    animation: aifCardFadeUp 260ms var(--aif-motion-ease) both !important;
}

.wizard-step.is-active.from-right {
    animation: aifWizardStepRight 320ms var(--aif-motion-ease) both;
}

.wizard-step.is-active.from-left {
    animation: aifWizardStepLeft 320ms var(--aif-motion-ease) both;
}

.trait-card:hover,
.voice-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--aif-cyan-border) !important;
}

.trait-card:has(.wz-trait-checkbox:checked) {
    border-color: rgba(244,114,182,.56) !important;
    background: linear-gradient(180deg, rgba(244,114,182,.13), rgba(15,23,42,.50)) !important;
    box-shadow: inset 0 0 22px rgba(244,114,182,.12), 0 0 0 1px rgba(244,114,182,.08), 0 14px 34px rgba(0,0,0,.20) !important;
}

.voice-card:has(.voice-play-btn.playing) .voice-wave i,
.voice-card:has(input:checked) .voice-wave i {
    transform-origin: center bottom;
    animation: aifVoiceBars 700ms var(--aif-motion-ease) infinite;
}

.voice-card:has(.voice-play-btn.playing) .voice-wave i:nth-child(2) { animation-delay: 110ms; }
.voice-card:has(.voice-play-btn.playing) .voice-wave i:nth-child(3) { animation-delay: 220ms; }

.avatar-card-uploading {
    border-color: rgba(125,211,252,.42) !important;
    background: rgba(125,211,252,.045) !important;
    pointer-events: none !important;
}

.upload-progress-track {
    position: relative;
    overflow: hidden;
    width: min(220px, 80%);
    height: 5px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(148,163,184,.16);
}

.upload-progress-bar {
    position: absolute;
    inset: 0;
    width: 52%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(125,211,252,.86), transparent);
    animation: aifUploadShimmer 1.2s var(--aif-motion-ease) infinite;
}

#wz-avatar-preview-container.is-ready {
    animation: aifThumbIn 420ms var(--aif-motion-ease) both;
}

.aif-btn-spinner {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    border: 2px solid rgba(9,9,11,.20);
    border-top-color: currentColor;
    animation: aifSpin .72s linear infinite;
}

#wz-btn-next.is-loading,
#wz-btn-next.is-success {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#wz-btn-next.is-success {
    color: #052e2b !important;
    background: linear-gradient(135deg, #a7f3d0, #67e8f9) !important;
}

#aif-confirm-overlay.visible {
    animation: aifConfirmBackdrop 220ms var(--aif-motion-ease) both;
}

#aif-confirm-box {
    animation: aifConfirmIn 240ms var(--aif-motion-ease) both !important;
}

@keyframes aifConfirmBackdrop {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(10px); }
}

@keyframes aifConfirmIn {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #ai-wizard-overlay,
    #ai-wizard-overlay .wizard-container,
    .wizard-step,
    .aifl-hero,
    .aifl-create-card,
    .aifl-friend-card,
    .trait-card,
    .voice-card,
    .upload-progress-bar,
    #wz-avatar-preview-container,
    .aifl-create-plus-icon {
        animation: none !important;
        transition-duration: .001ms !important;
        transform: none !important;
        filter: none !important;
    }
}

/* v58 hard visibility + scroll repair for deployed theme/global CSS conflicts */
html:has(.aifl-main),
body:has(.aifl-main) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #050814 !important;
    color: #f8fbff !important;
}
.aifl-main,
.ai-friends-main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
}
.aifl-shell {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 1180px !important;
}
.aifl-hero,
.aifl-login-card,
.friends-grid.aifl-grid,
.friend-card,
.aifl-create-card,
.aifl-friend-card {
    visibility: visible !important;
    opacity: 1 !important;
}
.friends-grid.aifl-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
}
.aifl-create-card {
    display: flex !important;
    color: #f8fbff !important;
    min-height: 100% !important;
}
.aifl-friend-card {
    display: block !important;
}
.aifl-main * {
    box-sizing: border-box !important;
}
.aifl-title,
.aifl-create-title,
.aifl-friend-name,
.aifl-login-card,
.aifl-login-card p {
    color: #f8fbff !important;
}
.aifl-subtitle,
.aifl-create-copy,
.aifl-friend-tagline {
    color: rgba(219, 229, 255, .78) !important;
}
@media (max-width: 760px) {
    .friends-grid.aifl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* v66 compact premium cards: keep friend thumbnails from stretching into
   billboard-sized tiles when the user only has one or two companions. */
.aifl-shell {
    max-width: 1120px !important;
}
.friends-grid.aifl-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 238px)) !important;
    justify-content: start !important;
    gap: 14px !important;
}
.friend-card {
    width: 100% !important;
    max-width: 238px !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 16px !important;
}
.aifl-create-card {
    padding: 18px !important;
}
.aifl-create-icon-shell {
    width: 54px !important;
    height: 54px !important;
    border-radius: 15px !important;
}
.aifl-create-title,
.aifl-friend-name {
    font-size: 1.02rem !important;
    line-height: 1.1 !important;
    text-wrap: balance;
}
.aifl-create-copy,
.aifl-friend-tagline {
    font-size: .78rem !important;
    line-height: 1.42 !important;
}
.aifl-friend-content {
    padding: 12px !important;
}
.aifl-primary-action,
.aifl-delete-btn {
    min-height: 36px !important;
    border-radius: 10px !important;
}
.aifl-primary-action:active,
.aifl-delete-btn:active,
.aifl-create-card:active,
.aifl-friend-card:active {
    transform: scale(.96) !important;
}
@media (max-width: 760px) {
    .friends-grid.aifl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 10px !important;
    }
    .friend-card {
        max-width: none !important;
        border-radius: 14px !important;
    }
}

/* Final polish: compact, dark, theme-native library layout. */
.aifl-main {
    padding-top: clamp(88px, 10svh, 118px) !important;
}
.aifl-hero {
    margin-bottom: 18px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(15,23,42,.72), rgba(6,10,22,.56)) !important;
    border: 1px solid rgba(125,211,252,.16) !important;
}
.aifl-kicker {
    font-size: .68rem !important;
    letter-spacing: .14em !important;
}
.aifl-title {
    font-size: clamp(1.7rem, 4vw, 2.7rem) !important;
    letter-spacing: -.045em !important;
}
.aifl-subtitle {
    max-width: 620px !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
}
.aifl-hero-pill {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: .76rem !important;
}
.aifl-primary-action {
    background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(129,140,248,.18)) !important;
    border: 1px solid rgba(125,211,252,.30) !important;
    color: #f8fbff !important;
}
.aifl-delete-btn {
    background: rgba(251,113,133,.09) !important;
    border: 1px solid rgba(251,113,133,.18) !important;
}
@media (max-width: 760px) {
    .aifl-main {
        padding-top: 76px !important;
    }
    .aifl-hero {
        align-items: flex-start !important;
        border-radius: 16px !important;
        padding: 14px !important;
    }
    .aifl-subtitle {
        display: none !important;
    }
    .aifl-create-title,
    .aifl-friend-name {
        font-size: .88rem !important;
    }
    .aifl-create-copy,
    .aifl-friend-tagline {
        font-size: .7rem !important;
    }
    .aifl-friend-content {
        padding: 10px !important;
    }
    .aifl-primary-action,
    .aifl-delete-btn {
        min-height: 32px !important;
    }
}

/* v68.5 reference-style AI Friends cards: glossy pink action deck, 4-up desktop. */
.aifl-main {
    background:
        radial-gradient(circle at 12% 0%, rgba(236,72,153,.18), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(56,189,248,.11), transparent 32%),
        linear-gradient(180deg, #050711 0%, #090710 48%, #050509 100%) !important;
}
.aifl-shell,
.aifl-shell.max-w-5xl {
    max-width: 1240px !important;
}
.aifl-hero {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 18px !important;
}
.aifl-kicker {
    display: none !important;
}
.aifl-title {
    font-size: clamp(2rem, 4vw, 3.4rem) !important;
    color: #fff !important;
    text-shadow: 0 0 30px rgba(236,72,153,.18) !important;
}
.aifl-subtitle {
    color: rgba(226,232,240,.68) !important;
}
.friends-grid.aifl-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    justify-content: stretch !important;
}
.friend-card,
.aifl-friend-card,
.aifl-create-card {
    max-width: none !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.05 !important;
    border-radius: 22px !important;
    border: 1px solid rgba(244,114,182,.28) !important;
    box-shadow: 0 24px 68px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.aifl-create-card {
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 24px !important;
    text-align: left !important;
    background:
        radial-gradient(circle at 28% 24%, rgba(244,114,182,.24), transparent 28%),
        radial-gradient(circle at 84% 88%, rgba(236,72,153,.28), transparent 34%),
        linear-gradient(135deg, rgba(18,18,22,.96), rgba(70,9,37,.84)) !important;
    overflow: hidden !important;
}
.aifl-create-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 50% 0%, rgba(244,114,182,.18), transparent 42%) !important;
    opacity: .55 !important;
    pointer-events: none !important;
}
.aifl-create-icon-shell {
    width: 70px !important;
    height: 70px !important;
    border-radius: 22px !important;
    color: #fff !important;
    background: rgba(244,114,182,.13) !important;
    border: 1px solid rgba(244,114,182,.30) !important;
    box-shadow: 0 0 44px rgba(236,72,153,.26), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.aifl-create-icon-shell svg {
    width: 38px !important;
    height: 38px !important;
    stroke: #ff69c8 !important;
    filter: drop-shadow(0 0 16px rgba(244,114,182,.62)) !important;
}
.aifl-create-plus-icon {
    display: block !important;
    color: #ff9fda !important;
    opacity: .98 !important;
    transform: translateZ(0) !important;
}
.aifl-create-card:hover .aifl-create-plus-icon {
    transform: rotate(48deg) translateZ(0) !important;
    color: #ffffff !important;
}
.aifl-create-title {
    margin-top: 18px !important;
    font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
    line-height: 1.02 !important;
    color: #fff !important;
    text-shadow: 0 0 16px rgba(236,72,153,.24) !important;
}
.aifl-create-copy {
    max-width: 210px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .88rem !important;
    line-height: 1.35 !important;
    font-family: Georgia, serif !important;
    font-style: italic !important;
}
.aifl-friend-card {
    background: #07070b !important;
    overflow: hidden !important;
}
.aifl-friend-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(120deg, transparent 26%, rgba(255,255,255,.12) 48%, transparent 72%) !important;
    transform: translateX(-130%) skewX(-18deg) !important;
    transition: transform .7s cubic-bezier(.22,1,.36,1) !important;
    pointer-events: none !important;
}
.aifl-friend-card:hover::after {
    transform: translateX(130%) skewX(-18deg) !important;
}
.aifl-friend-image {
    object-fit: cover !important;
    object-position: center top !important;
    filter: saturate(1.08) contrast(1.04) !important;
}
.aifl-friend-overlay {
    background:
        linear-gradient(to top, rgba(5,5,10,.98) 0%, rgba(5,5,10,.74) 32%, rgba(5,5,10,.10) 62%),
        radial-gradient(circle at 50% 100%, rgba(236,72,153,.26), transparent 42%) !important;
}
.aifl-friend-content {
    padding: 14px !important;
}
.aifl-friend-name {
    font-size: clamp(1.22rem, 2.1vw, 1.72rem) !important;
    line-height: .98 !important;
    color: #fff !important;
    text-transform: lowercase !important;
    text-shadow: 0 0 14px rgba(236,72,153,.5), 0 2px 0 rgba(0,0,0,.45) !important;
}
.aifl-friend-tagline {
    display: none !important;
}
.aifl-friend-actions {
    gap: 8px !important;
    margin-top: 10px !important;
}
.aifl-primary-action {
    min-height: 42px !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, rgba(56,189,248,.24), rgba(14,165,233,.16) 48%, rgba(99,102,241,.16)) !important;
    border: 1px solid rgba(125,211,252,.42) !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    box-shadow: 0 12px 28px rgba(14,165,233,.14), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.aifl-delete-btn {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    background: rgba(157,23,77,.58) !important;
    border: 1px solid rgba(255,184,225,.28) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.aifl-create-card:hover,
.aifl-friend-card:hover {
    transform: translateY(-3px) translateZ(0) !important;
    border-color: rgba(255,105,200,.64) !important;
    box-shadow: 0 34px 88px rgba(0,0,0,.55), 0 0 50px rgba(236,72,153,.18) !important;
}
.aifl-primary-action:hover,
.aifl-delete-btn:hover {
    filter: brightness(1.08) saturate(1.16) !important;
    transform: translateY(-1px) !important;
}
@media (max-width: 1100px) {
    .friends-grid.aifl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    .aifl-shell,
    .aifl-shell.max-w-5xl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .friends-grid.aifl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .friend-card,
    .aifl-friend-card,
    .aifl-create-card {
        aspect-ratio: 1 / 1.13 !important;
        border-radius: 16px !important;
    }
    .aifl-create-card {
        padding: 14px !important;
    }
    .aifl-create-icon-shell {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }
    .aifl-create-icon-shell svg {
        width: 28px !important;
        height: 28px !important;
    }
    .aifl-create-title,
    .aifl-friend-name {
        font-size: 1rem !important;
    }
    .aifl-create-copy {
        font-size: .68rem !important;
    }
    .aifl-friend-content {
        padding: 10px !important;
    }
    .aifl-primary-action,
    .aifl-delete-btn {
        min-height: 34px !important;
        border-radius: 10px !important;
        font-size: .76rem !important;
    }
    .aifl-delete-btn {
        width: 34px !important;
        min-width: 34px !important;
    }
}

/* v69.3 final override: simple plus, no create-card plus animation. */
.aifl-create-icon-shell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.aifl-create-plus-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    color: #f8fbff !important;
    animation: none !important;
    transform: none !important;
}

.aifl-create-card:hover .aifl-create-plus-icon,
.aifl-create-card:active .aifl-create-plus-icon,
.aifl-create-icon-shell:hover .aifl-create-plus-icon,
.aifl-create-card:hover .aifl-create-icon-shell {
    animation: none !important;
    transform: none !important;
}

#ai-wizard-overlay input:focus,
#ai-wizard-overlay textarea:focus,
#ai-wizard-overlay input:focus-visible,
#ai-wizard-overlay textarea:focus-visible,
#wz-custom-personality:focus,
#wz-custom-personality:focus-visible,
#wz-name:focus,
#wz-name:focus-visible,
#wz-tagline:focus,
#wz-tagline:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}