/* ===== SofIA FAB — boton flotante siempre visible con mini acciones ===== */

.sofia-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 64px;
    height: 64px;
    z-index: 9000;
    pointer-events: none; /* hijos rehabilitan pointer events */
}

/* Avatar central */
.sofia-fab-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 24px rgba(0, 62, 145, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sofia-fab-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.sofia-fab-avatar.is-listening {
    box-shadow: 0 0 0 4px rgba(42, 112, 176, 0.45),
                0 8px 24px rgba(42, 112, 176, 0.45);
    animation: sofiaFabAvatarPulse 2.2s ease-out infinite;
}

@keyframes sofiaFabAvatarPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(42, 112, 176, 0.45), 0 8px 24px rgba(42, 112, 176, 0.45); }
    50%      { box-shadow: 0 0 0 9px rgba(42, 112, 176, 0.0),  0 8px 24px rgba(42, 112, 176, 0.22); }
}

/* Mini botones de acción (radial, cuarto superior izquierdo) */
.sofia-fab-mini {
    position: absolute;
    /* Centrar el mini boton respecto al centro del avatar (32, 32) */
    top: 21px;   /* 32 - 11 (mitad de 22) */
    left: 21px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
    color: #003E91;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    pointer-events: auto;
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28),
                background 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease;
}

.sofia-fab-mini:hover {
    background: rgba(255, 255, 255, 0.92);
    color: #0078D4;
    box-shadow: 0 6px 16px rgba(0, 120, 212, 0.18);
}

.sofia-fab-mini.is-on {
    color: #003E91;
    background: rgba(0, 120, 212, 0.18);
    border-color: rgba(0, 120, 212, 0.38);
}

/* Posiciones radiales en arco (cuadrante superior izquierdo del FAB) */
/* Radio: 60px. 5 iconos a pasos uniformes de 22.5° (90, 112.5, 135, 157.5, 180) */
.sofia-fab-mini.pos-90  { transform: translate(0, -60px); }                   /* 90° arriba */
.sofia-fab-mini.pos-112 { transform: translate(-23px, -55px); }               /* 112.5° */
.sofia-fab-mini.pos-135 { transform: translate(-42px, -42px); }               /* 135° */
.sofia-fab-mini.pos-158 { transform: translate(-55px, -23px); }               /* 157.5° */
.sofia-fab-mini.pos-180 { transform: translate(-60px, 0); }                   /* 180° izquierda */

.sofia-fab-mini.pos-90:hover  { transform: translate(0, -60px) scale(1.18); }
.sofia-fab-mini.pos-112:hover { transform: translate(-23px, -55px) scale(1.18); }
.sofia-fab-mini.pos-135:hover { transform: translate(-42px, -42px) scale(1.18); }
.sofia-fab-mini.pos-158:hover { transform: translate(-55px, -23px) scale(1.18); }
.sofia-fab-mini.pos-180:hover { transform: translate(-60px, 0) scale(1.18); }

/* Boton de stop (visible solo cuando Sofia esta hablando/pensando) */
.sofia-fab-mini.sofia-fab-stop {
    background: rgba(209, 52, 56, 0.92);
    border-color: rgba(209, 52, 56, 0.95);
    color: white;
    animation: sofiaFabStopPulse 1.2s ease-in-out infinite;
}

.sofia-fab-mini.sofia-fab-stop:hover {
    background: #b02a2e;
    border-color: #b02a2e;
    color: white;
}

@keyframes sofiaFabStopPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(209, 52, 56, 0.5), 0 4px 10px rgba(0,0,0,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(209, 52, 56, 0),   0 4px 10px rgba(0,0,0,0.10); }
}

/* Indicador de estado del mic (no es boton, es solo lectura) */
.sofia-fab-status {
    cursor: default;
}

.sofia-fab-status.is-off {
    color: #9CA3AF;
    background: rgba(156, 163, 175, 0.18);
    border-color: rgba(156, 163, 175, 0.38);
}

.sofia-fab-status.is-paused {
    color: #B25500;
    background: rgba(255, 140, 0, 0.18);
    border-color: rgba(255, 140, 0, 0.45);
}

.sofia-fab-status.is-listening {
    color: #2A70B0;
    background: rgba(42, 112, 176, 0.14);
    border-color: rgba(42, 112, 176, 0.45);
    animation: sofiaFabStatusPulse 1.4s ease-out infinite;
}

@keyframes sofiaFabStatusPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Responsive: en mobile baja un poco para no chocar con barras nativas */
@media (max-width: 768px) {
    .sofia-fab {
        bottom: 18px;
        right: 18px;
    }
}