/* ===== SofIA Ambient Frame — overlay tipo Siri/Galaxy AI ===== */

.sofia-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none; /* No bloquea clics en el contenido */
    z-index: 9990;
    overflow: hidden;
    animation: sofiaAmbientFadeIn 0.35s ease-out;
}

@keyframes sofiaAmbientFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Capa 1: glow rotativo conic-gradient — recortado al contorno con mask radial */
.sofia-ambient-glow {
    position: absolute;
    inset: -120px;
    background: conic-gradient(
        from 0deg,
        rgba(42, 112, 176, 0)     0%,
        rgba(42, 112, 176, 0.95) 18%,
        rgba(120, 180, 230, 0.85) 32%,
        rgba(170, 110, 220, 0.8)  48%,
        rgba(255, 170, 120, 0.7)  62%,
        rgba(80, 200, 200, 0.8)   78%,
        rgba(42, 112, 176, 0.95)  92%,
        rgba(42, 112, 176, 0)    100%
    );
    filter: blur(70px);
    animation: sofiaAmbientSpin 9s linear infinite;
    opacity: 0.85;
    /* Mask radial: centro totalmente transparente, contorno opaco */
    -webkit-mask: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 78%, #000 95%);
    mask: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 78%, #000 95%);
}

@keyframes sofiaAmbientSpin {
    to { transform: rotate(1turn); }
}

/* Capa 2: glow interno pulsante — concentrado en el contorno */
.sofia-ambient-vignette {
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 0 50px 14px rgba(42, 112, 176, 0.7),
        inset 0 0 110px 24px rgba(120, 180, 230, 0.35);
    animation: sofiaAmbientBreathe 2.6s ease-in-out infinite;
}

@keyframes sofiaAmbientBreathe {
    0%, 100% {
        box-shadow:
            inset 0 0 50px 14px rgba(42, 112, 176, 0.7),
            inset 0 0 110px 24px rgba(120, 180, 230, 0.35);
    }
    50% {
        box-shadow:
            inset 0 0 70px 18px rgba(42, 112, 176, 0.85),
            inset 0 0 140px 30px rgba(170, 110, 220, 0.4);
    }
}

/* Capa 3: borde luminoso fino que define el contorno */
.sofia-ambient-edge {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.35),
        inset 0 0 0 6px rgba(42, 112, 176, 0.45),
        inset 0 0 22px 4px rgba(120, 180, 230, 0.55);
}

/* Burbuja de estado al pie con avatar + texto */
.sofia-ambient-status {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px 10px 12px;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 62, 145, 0.22);
    color: #003E91;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    max-width: 80vw;
    pointer-events: auto;
}

.sofia-ambient-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(42, 112, 176, 0.25);
}

.sofia-ambient-text {
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

/* Boton de callar a Sofia dentro de la burbuja */
.sofia-ambient-mute {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(209, 52, 56, 0.55);
    background: rgba(209, 52, 56, 0.92);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-left: 4px;
    box-shadow: 0 2px 8px rgba(209, 52, 56, 0.28);
    animation: sofiaAmbientMutePulse 1.4s ease-in-out infinite;
    transition: transform 0.15s ease, background 0.15s ease;
}

.sofia-ambient-mute:hover {
    background: #b02a2e;
    border-color: #b02a2e;
    transform: scale(1.08);
}

@keyframes sofiaAmbientMutePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(209, 52, 56, 0.55), 0 2px 8px rgba(209, 52, 56, 0.28); }
    50%      { box-shadow: 0 0 0 6px rgba(209, 52, 56, 0),   0 2px 8px rgba(209, 52, 56, 0.18); }
}

@media (max-width: 768px) {
    .sofia-ambient-status {
        bottom: 22px;
        padding: 8px 16px 8px 8px;
        font-size: 0.85rem;
    }
    .sofia-ambient-avatar {
        width: 30px;
        height: 30px;
    }
}