/* ── Ailo animated house avatar ───────────────────────────────────────────── */

.ai-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-avatar circle {
    fill: color-mix(in srgb, var(--ailo-color, #E91E63) 10%, white);
}

.ai-avatar .house {
    stroke: var(--ailo-color, #E91E63);
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.ai-avatar .window {
    fill: var(--ailo-color, #E91E63);
    opacity: 0.25;
}

.ai-avatar .core {
    fill: var(--ailo-color, #E91E63);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* ── idle ─────────────────────────────────────────────────────────────────── */

@keyframes ailo-core-idle {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(1.12); }
}

.ai-avatar.idle .core {
    animation: ailo-core-idle 3s ease-in-out infinite;
}

.ai-avatar.idle .window {
    opacity: 0.25;
}

/* ── thinking ─────────────────────────────────────────────────────────────── */

@keyframes ailo-core-thinking {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.35); }
}

@keyframes ailo-window-blink {
    0%, 100% { opacity: 0.15; }
    50%       { opacity: 0.85; }
}

.ai-avatar.thinking .core {
    animation: ailo-core-thinking 0.7s ease-in-out infinite;
}

.ai-avatar.thinking .window {
    animation: ailo-window-blink 0.7s ease-in-out infinite;
}

.ai-avatar.thinking .window:last-of-type {
    animation-delay: 0.35s;
}

/* ── speaking ─────────────────────────────────────────────────────────────── */

@keyframes ailo-core-speaking {
    0%   { transform: scale(1);    opacity: 1; }
    25%  { transform: scale(1.25); opacity: 1; }
    75%  { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes ailo-win-a {
    0%, 100% { opacity: 0.8; }
    50%       { opacity: 0.1; }
}

@keyframes ailo-win-b {
    0%, 100% { opacity: 0.1; }
    50%       { opacity: 0.8; }
}

.ai-avatar.speaking .core {
    animation: ailo-core-speaking 0.45s ease-in-out infinite;
}

.ai-avatar.speaking .window:first-of-type {
    animation: ailo-win-a 0.45s ease-in-out infinite;
}

.ai-avatar.speaking .window:last-of-type {
    animation: ailo-win-b 0.45s ease-in-out infinite;
}

/* ── attention ────────────────────────────────────────────────────────────── */

@keyframes ailo-attention {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.18); }
    40%  { transform: scale(0.93); }
    65%  { transform: scale(1.08); }
    85%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

.ai-avatar.attention {
    animation: ailo-attention 0.4s ease-in-out forwards;
}

.ai-avatar.attention .core {
    opacity: 1;
}

.ai-avatar.attention .window {
    opacity: 0.8;
}

/* ── Image avatar animations ──────────────────────────────────────────────── */

@keyframes thinkingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(0.95); }
}

@keyframes speakingWave {
    from { transform: rotate(-5deg); }
    to   { transform: rotate(5deg); }
}

@keyframes bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.15); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.ai-avatar.thinking img,
.ai-avatar.thinking .avatar-image {
    animation: thinkingPulse 1s ease-in-out infinite;
}

.ai-avatar.speaking img,
.ai-avatar.speaking .avatar-image {
    animation: speakingWave 0.6s ease-in-out infinite alternate;
}

.ai-avatar.attention img,
.ai-avatar.attention .avatar-image {
    animation: bounce 0.4s ease;
}

/* ── FAB context: white SVG on colored background ─────────────────────────── */

.ailo-fab .ai-avatar circle {
    fill: rgba(255, 255, 255, 0.15);
}

.ailo-fab .ai-avatar .house {
    stroke: white;
}

.ailo-fab .ai-avatar .window {
    fill: white;
}

.ailo-fab .ai-avatar .core {
    fill: white;
}