/*
 * Aimo character — SVG персонаж + 9 эмоций.
 * Подключается отдельным <link> в index.html после home-today.css.
 *
 * Эмоции (классы на .htm-aimo-orb):
 *   idle / listening / thinking / speaking / happy / excited / confused / sleeping / error
 *   + legacy: active≡idle, completed≡happy
 *   + typing — кратковременный glow pulse при наборе текста
 */

/* ============ ХОЛОДНАЯ ПАЛИТРА ORB (переопределяет тёплую) ============ */
.htm-aimo-orb {
    background: radial-gradient(circle at 50% 50%, #1a1f3a 0%, #0a0e1f 70%, #050714 100%) !important;
    border-color: rgba(125, 211, 252, 0.30) !important;
    box-shadow:
        inset 0 0 28px rgba(125, 211, 252, 0.20),
        0 0 44px rgba(56, 189, 248, 0.25) !important;
    overflow: hidden;
    animation: aimo-orb-breathe 4.5s ease-in-out infinite;
}

.htm-aimo-orb-container::before,
.htm-aimo-orb-container::after {
    border-color: rgba(125, 211, 252, 0.18) !important;
}

@keyframes aimo-orb-breathe {

    0%,
    100% {
        box-shadow:
            inset 0 0 28px rgba(125, 211, 252, 0.20),
            0 0 44px rgba(56, 189, 248, 0.25);
    }

    50% {
        box-shadow:
            inset 0 0 34px rgba(125, 211, 252, 0.30),
            0 0 60px rgba(56, 189, 248, 0.35);
    }
}

/* Скрываем старый текстовый «Aimo» — теперь он на животике персонажа */
.htm-orb-inner {
    display: none;
}

/* ============ SVG БАЗА ============ */
.aimo-char {
    width: 100%;
    height: 67%;
    display: block;
    overflow: visible;
}

/* Тень */
.aimo-shadow {
    fill: rgba(0, 0, 0, 0.35);
    filter: blur(2px);
}

/* Тело */
.aimo-body {
    stroke: rgba(56, 189, 248, 0.15);
    stroke-width: 0.5;
}

/* Руки */
.aimo-arm {
    fill: #d6e8f5;
    stroke: rgba(56, 189, 248, 0.12);
    stroke-width: 0.5;
}

/* Шапка */
.aimo-hat-stripe {
    stroke: rgba(255, 255, 255, 0.10);
    stroke-width: 1.5;
    fill: none;
}

.aimo-hat-brim {
    fill: #2e0a13;
}

.aimo-pompom-shadow {
    fill: rgba(0, 0, 0, 0.35);
}

.aimo-pompom {
    fill: #d49aa6;
}

.aimo-pompom-highlight {
    fill: rgba(255, 255, 255, 0.55);
}

/* Имя "aimo" над персонажем */
.aimo-name-label {
    fill: #e2e2f0;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 37px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.5px;
    user-select: none;
}

/* Щёчки */
.aimo-cheeks ellipse {
    fill: rgba(248, 113, 113, 0.55);
}

/* Глаза — слой смещается за курсором */
.aimo-eyes-tracker {
    transform: translate(var(--aimo-eye-x, 0px), var(--aimo-eye-y, 0px));
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.aimo-eye {
    fill: #0a0a14;
}

.aimo-eye-shine {
    fill: rgba(255, 255, 255, 0.85);
}

/* Все альтернативные глаза/рты скрыты по умолчанию */
.aimo-eyes-arc,
.aimo-eyes-x,
.aimo-eyes-stars,
.aimo-eyes-sleep,
.aimo-mouth-open,
.aimo-mouth-flat,
.aimo-mouth-big,
.aimo-mouth-zig,
.aimo-cheeks,
.aimo-acc {
    display: none;
}

/* Альтернативные глаза — стили */
.aimo-eyes-arc path {
    stroke: #0a0a14;
    stroke-width: 3.2;
    stroke-linecap: round;
    fill: none;
}

.aimo-eyes-x line {
    stroke: #0a0a14;
    stroke-width: 2.8;
    stroke-linecap: round;
}

.aimo-eyes-stars path {
    fill: #fbbf24;
}

.aimo-eyes-sleep path {
    stroke: #0a0a14;
    stroke-width: 2.8;
    stroke-linecap: round;
    fill: none;
}

/* Рты */
.aimo-mouth-default,
.aimo-mouth-flat,
.aimo-mouth-big,
.aimo-mouth-zig {
    stroke: #0a0a14;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.aimo-mouth-open {
    fill: #0a0a14;
    stroke: none;
}

/* ============ MINI AVATAR (для аватарок сообщений в чате) ============
   Компактный вариант персонажа без аксессуаров; eyes-blink + body-breathe.
   Используется в CM_Renderer и HTM_ChatPopup как аватар "Aimo".
============================================================================ */
.aimo-mini-avatar {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.aimo-mini-character {
    transform-origin: 100px 130px;
    transform-box: fill-box;
    animation: aimo-breathe 3.6s ease-in-out infinite;
}

.aimo-mini-arm {
    fill: #d6e8f5;
}

.aimo-mini-body {
    stroke: rgba(56, 189, 248, 0.15);
    stroke-width: 0.5;
}

.aimo-mini-eye {
    fill: #0a0a14;
    transform-box: fill-box;
    transform-origin: center center;
    animation: aimo-blink 5.5s ease-in-out infinite;
}

.aimo-mini-mouth {
    stroke: #0a0a14;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

@media (prefers-reduced-motion: reduce) {
    .aimo-mini-character,
    .aimo-mini-eye {
        animation: none !important;
    }
}

/* ============ MUTED STATE (TAPED MOUTH) ============ */
.aimo-mouth-taped {
    display: none;
}

.htm-aimo-orb.muted .aimo-mouth,
.htm-aimo-orb.muted .aimo-mouth-default,
.htm-aimo-orb.muted .aimo-mouth-flat,
.htm-aimo-orb.muted .aimo-mouth-big,
.htm-aimo-orb.muted .aimo-mouth-zig,
.htm-aimo-orb.muted .aimo-mouth-open {
    display: none !important;
    animation: none !important;
}

.htm-aimo-orb.muted .aimo-mouth-taped {
    display: block !important;
}

/* Аксессуары над головой */
.aimo-acc-dots .aimo-dot {
    fill: #7dd3fc;
}

.aimo-acc-question {
    fill: #fbbf24;
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
}

.aimo-zzz {
    fill: #cbd5e1;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 700;
}

.aimo-spark {
    fill: #fde68a;
}

/* ============ БАЗОВЫЕ АНИМАЦИИ ============ */
.aimo-character {
    transform-origin: 100px 130px;
    transform-box: fill-box;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation: aimo-breathe 3.6s ease-in-out infinite;
}

@keyframes aimo-breathe {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-1px) scale(1.012);
    }
}

/* Моргание — на каждом глазе индивидуально, чтобы он сжимался к своему центру
   и не смещался относительно тела */
.aimo-eye {
    transform-box: fill-box;
    transform-origin: center center;
    animation: aimo-blink 5.5s ease-in-out infinite;
}

@keyframes aimo-blink {

    0%,
    92%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0.08);
    }

    97% {
        transform: scaleY(1);
    }
}

/* ============ STATE: IDLE (default) ============ */
.htm-aimo-orb.idle .aimo-eyes-default,
.htm-aimo-orb.active .aimo-eyes-default,
.htm-aimo-orb:not(.listening):not(.thinking):not(.speaking):not(.happy):not(.excited):not(.confused):not(.sleeping):not(.error):not(.completed) .aimo-eyes-default {
    display: block;
}

/* ============ STATE: LISTENING ============ */
.htm-aimo-orb.listening .aimo-character {
    animation: aimo-listen-sway 1.2s ease-in-out infinite;
}

.htm-aimo-orb.listening .aimo-eyes-default {
    display: block;
    transform-box: fill-box;
    transform-origin: center center;
    animation: aimo-listen-eyes-grow 1.2s ease-in-out infinite;
}

.htm-aimo-orb.listening .aimo-mouth-default {
    display: block;
}

@keyframes aimo-listen-sway {

    0%,
    100% {
        transform: rotate(-2deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-1px);
    }
}

@keyframes aimo-listen-eyes-grow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* ============ STATE: THINKING ============ */
.htm-aimo-orb.thinking {
    /* отменяем legacy-спин orb (он был из home-today.css) */
    animation: aimo-orb-breathe 4.5s ease-in-out infinite !important;
}

.htm-aimo-orb.thinking .aimo-eyes-tracker {
    /* глаза смотрят вверх */
    transform: translate(0, -3px);
    transition: transform 0.3s ease-out;
}

.htm-aimo-orb.thinking .aimo-eyes-default {
    display: block;
}

.htm-aimo-orb.thinking .aimo-mouth-flat {
    display: block;
}

.htm-aimo-orb.thinking .aimo-acc-dots {
    display: block;
}

.htm-aimo-orb.thinking .aimo-dot-1 {
    animation: aimo-dot-pulse 1.2s ease-in-out 0s infinite;
}

.htm-aimo-orb.thinking .aimo-dot-2 {
    animation: aimo-dot-pulse 1.2s ease-in-out 0.2s infinite;
}

.htm-aimo-orb.thinking .aimo-dot-3 {
    animation: aimo-dot-pulse 1.2s ease-in-out 0.4s infinite;
}

@keyframes aimo-dot-pulse {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ============ STATE: SPEAKING ============ */
.htm-aimo-orb.speaking .aimo-eyes-default {
    display: block;
}

.htm-aimo-orb.speaking .aimo-mouth-default {
    display: none;
}

.htm-aimo-orb.speaking .aimo-mouth-open {
    display: block;
    transform-box: fill-box;
    transform-origin: center center;
    animation: aimo-mouth-talk 0.32s ease-in-out infinite alternate;
}

@keyframes aimo-mouth-talk {
    0% {
        transform: scaleY(0.4);
    }

    100% {
        transform: scaleY(1.15);
    }
}

/* ============ STATE: HAPPY (или completed) ============ */
.htm-aimo-orb.happy .aimo-character,
.htm-aimo-orb.completed .aimo-character {
    animation: aimo-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.htm-aimo-orb.happy .aimo-eyes-default,
.htm-aimo-orb.completed .aimo-eyes-default {
    display: none;
}

.htm-aimo-orb.happy .aimo-eyes-arc,
.htm-aimo-orb.completed .aimo-eyes-arc {
    display: block;
}

.htm-aimo-orb.happy .aimo-mouth-default,
.htm-aimo-orb.completed .aimo-mouth-default {
    display: none;
}

.htm-aimo-orb.happy .aimo-mouth-big,
.htm-aimo-orb.completed .aimo-mouth-big {
    display: block;
}

.htm-aimo-orb.happy .aimo-cheeks,
.htm-aimo-orb.completed .aimo-cheeks {
    display: block;
}

@keyframes aimo-bounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.04);
    }
}

/* ============ STATE: EXCITED ============ */
.htm-aimo-orb.excited .aimo-character {
    animation: aimo-excited-jump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.htm-aimo-orb.excited .aimo-eyes-default {
    display: none;
}

.htm-aimo-orb.excited .aimo-eyes-stars {
    display: block;
    transform-box: fill-box;
    transform-origin: center center;
    animation: aimo-stars-spin 1.6s linear infinite;
}

.htm-aimo-orb.excited .aimo-mouth-default {
    display: none;
}

.htm-aimo-orb.excited .aimo-mouth-big {
    display: block;
}

.htm-aimo-orb.excited .aimo-cheeks {
    display: block;
}

.htm-aimo-orb.excited .aimo-acc-sparks {
    display: block;
}

.htm-aimo-orb.excited .aimo-spark-1 {
    animation: aimo-spark-pulse 0.8s ease-in-out infinite;
}

.htm-aimo-orb.excited .aimo-spark-2 {
    animation: aimo-spark-pulse 0.8s ease-in-out 0.4s infinite;
}

@keyframes aimo-excited-jump {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-10px) scale(1.04);
    }

    70% {
        transform: translateY(-3px) scale(0.97);
    }
}

@keyframes aimo-stars-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes aimo-spark-pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ============ STATE: CONFUSED ============ */
.htm-aimo-orb.confused .aimo-character {
    transform: rotate(-7deg);
    animation: aimo-confused-tilt 2.4s ease-in-out infinite;
}

.htm-aimo-orb.confused .aimo-eyes-default {
    display: block;
}

.htm-aimo-orb.confused .aimo-eye-right {
    transform-box: fill-box;
    transform-origin: center center;
    /* отменяем blink + сжимаем правый глаз */
    animation: none;
    transform: scale(0.75);
}

.htm-aimo-orb.confused .aimo-mouth-default {
    display: none;
}

.htm-aimo-orb.confused .aimo-mouth-flat {
    display: block;
}

.htm-aimo-orb.confused .aimo-acc-question {
    display: block;
    transform-origin: 148px 28px;
    transform-box: fill-box;
    animation: aimo-question-wiggle 1.6s ease-in-out infinite;
}

@keyframes aimo-confused-tilt {

    0%,
    100% {
        transform: rotate(-7deg);
    }

    50% {
        transform: rotate(-2deg);
    }
}

@keyframes aimo-question-wiggle {

    0%,
    100% {
        transform: rotate(-8deg) scale(1);
    }

    50% {
        transform: rotate(8deg) scale(1.15);
    }
}

/* ============ STATE: SLEEPING ============ */
.htm-aimo-orb.sleeping .aimo-character {
    animation: aimo-sleep-breathe 3.2s ease-in-out infinite;
}

.htm-aimo-orb.sleeping .aimo-eyes-default {
    display: none;
}

.htm-aimo-orb.sleeping .aimo-eyes-sleep {
    display: block;
}

.htm-aimo-orb.sleeping .aimo-mouth-default {
    display: none;
}

.htm-aimo-orb.sleeping .aimo-mouth-flat {
    display: block;
}

.htm-aimo-orb.sleeping .aimo-acc-zzz {
    display: block;
}

.htm-aimo-orb.sleeping .aimo-zzz-1 {
    animation: aimo-zzz-float 2.4s ease-out 0s infinite;
}

.htm-aimo-orb.sleeping .aimo-zzz-2 {
    animation: aimo-zzz-float 2.4s ease-out 0.6s infinite;
}

.htm-aimo-orb.sleeping .aimo-zzz-3 {
    animation: aimo-zzz-float 2.4s ease-out 1.2s infinite;
}

@keyframes aimo-sleep-breathe {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(2px) scale(0.99);
    }
}

@keyframes aimo-zzz-float {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(8px, -14px) scale(1.2);
    }
}

/* ============ STATE: ERROR ============ */
.htm-aimo-orb.error {
    border-color: rgba(248, 113, 113, 0.45) !important;
    box-shadow:
        inset 0 0 28px rgba(248, 113, 113, 0.30),
        0 0 50px rgba(239, 68, 68, 0.40) !important;
    animation: aimo-error-flash 1.2s ease-in-out infinite !important;
}

.htm-aimo-orb.error .aimo-character {
    animation: aimo-error-shake 0.18s ease-in-out infinite;
}

.htm-aimo-orb.error .aimo-eyes-default {
    display: none;
}

.htm-aimo-orb.error .aimo-eyes-x {
    display: block;
}

.htm-aimo-orb.error .aimo-mouth-default {
    display: none;
}

.htm-aimo-orb.error .aimo-mouth-zig {
    display: block;
}

@keyframes aimo-error-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

@keyframes aimo-error-flash {

    0%,
    100% {
        box-shadow: inset 0 0 28px rgba(248, 113, 113, 0.30), 0 0 50px rgba(239, 68, 68, 0.40);
    }

    50% {
        box-shadow: inset 0 0 38px rgba(248, 113, 113, 0.45), 0 0 70px rgba(239, 68, 68, 0.55);
    }
}

/* ============ TYPING — glow pulse без смены state ============ */
.htm-aimo-orb.typing {
    animation: aimo-typing-pulse 0.9s ease-out !important;
}

@keyframes aimo-typing-pulse {
    0% {
        box-shadow:
            inset 0 0 28px rgba(125, 211, 252, 0.20),
            0 0 44px rgba(56, 189, 248, 0.25);
    }

    40% {
        box-shadow:
            inset 0 0 40px rgba(125, 211, 252, 0.55),
            0 0 80px rgba(56, 189, 248, 0.65);
    }

    100% {
        box-shadow:
            inset 0 0 28px rgba(125, 211, 252, 0.20),
            0 0 44px rgba(56, 189, 248, 0.25);
    }
}

/* ============ Снимаем legacy thinking-spin (orb крутился целиком) ============ */
.htm-aimo-orb.thinking {
    animation: aimo-orb-breathe 4.5s ease-in-out infinite !important;
    border-color: rgba(125, 211, 252, 0.40) !important;
    box-shadow:
        inset 0 0 28px rgba(125, 211, 252, 0.30),
        0 0 50px rgba(56, 189, 248, 0.35) !important;
}

/* completed: legacy-цвета на orb тоже перекрашиваем в холодную палитру */
.htm-aimo-orb.completed {
    border-color: rgba(125, 211, 252, 0.50) !important;
    box-shadow:
        inset 0 0 28px rgba(125, 211, 252, 0.30),
        0 0 50px rgba(56, 189, 248, 0.40) !important;
    animation: aimo-orb-breathe 4.5s ease-in-out infinite !important;
}

/* Уважение reduce-motion */
@media (prefers-reduced-motion: reduce) {

    .htm-aimo-orb,
    .aimo-character,
    .aimo-eyes-default,
    .htm-aimo-orb.listening .aimo-character,
    .htm-aimo-orb.thinking .aimo-character,
    .htm-aimo-orb.speaking .aimo-mouth-open,
    .htm-aimo-orb.happy .aimo-character,
    .htm-aimo-orb.excited .aimo-character,
    .htm-aimo-orb.confused .aimo-character,
    .htm-aimo-orb.sleeping .aimo-character,
    .htm-aimo-orb.error .aimo-character,
    .htm-aimo-orb.error,
    .htm-aimo-orb.thinking .aimo-dot-1,
    .htm-aimo-orb.thinking .aimo-dot-2,
    .htm-aimo-orb.thinking .aimo-dot-3,
    .aimo-eyes-tracker {
        animation: none !important;
        transition: none !important;
    }
}