.ai-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ai-logo-svg {
    overflow: visible;
}

.ai-logo--sm { width: 32px; height: 32px; }
.ai-logo--sm .ai-logo-svg { width: 32px; height: 32px; }

.ai-logo--md { width: 40px; height: 40px; }
.ai-logo--md .ai-logo-svg { width: 40px; height: 40px; }

.ai-logo--lg { width: 64px; height: 64px; }
.ai-logo--lg .ai-logo-svg { width: 64px; height: 64px; }

.ai-logo-circle-outer {
    fill: none;
    stroke: #581c87;
    stroke-width: 2;
    filter: url(#ai-logo-glow-purple);
}
.ai-logo-circle-mid {
    fill: none;
    stroke: #7c3aed;
    stroke-width: 2;
    filter: url(#ai-logo-glow-violet);
}
.ai-logo-circle-inner {
    fill: none;
    stroke: #fbbf24;
    stroke-width: 2;
    filter: url(#ai-logo-glow-yellow);
}

.ai-logo-line {
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none;
    opacity: 0.15;
    transition: opacity 0.2s ease;
}
.ai-logo-line-1 { stroke: url(#ai-logo-grad-1); }
.ai-logo-line-2 { stroke: url(#ai-logo-grad-2); }
.ai-logo-line-3 { stroke: url(#ai-logo-grad-3); }

.ai-logo-dot {
    r: 1.8;
    opacity: 0.7;
}
.ai-logo-dot-1 { fill: #581c87; }
.ai-logo-dot-2 { fill: #7c3aed; }
.ai-logo-dot-3 { fill: #fbbf24; }

.ai-logo-idle .ai-logo-circle-outer {
    animation: ai-logo-pulse 6s ease-in-out infinite;
}
.ai-logo-idle .ai-logo-circle-mid {
    animation: ai-logo-pulse 6s ease-in-out infinite 0.4s;
}
.ai-logo-idle .ai-logo-circle-inner {
    animation: ai-logo-pulse 6s ease-in-out infinite 0.8s;
}
.ai-logo-idle .ai-logo-dot-1 {
    animation: ai-logo-orbit-1 6s linear infinite;
}
.ai-logo-idle .ai-logo-dot-2 {
    animation: ai-logo-orbit-2 6s linear infinite 0.33s;
}
.ai-logo-idle .ai-logo-dot-3 {
    animation: ai-logo-orbit-3 6s linear infinite 0.66s;
}
.ai-logo-idle .ai-logo-line {
    animation: ai-logo-link-flash 4s ease-in-out infinite;
}
.ai-logo-idle .ai-logo-line-2 {
    animation-delay: 0.15s;
}
.ai-logo-idle .ai-logo-line-3 {
    animation-delay: 0.3s;
}

.ai-logo-thinking .ai-logo-circle-outer {
    animation: ai-logo-pulse 1.8s ease-in-out infinite;
    filter: url(#ai-logo-glow-purple) drop-shadow(0 0 3px rgba(88, 28, 135, 0.4));
}
.ai-logo-thinking .ai-logo-circle-mid {
    animation: ai-logo-pulse 1.8s ease-in-out infinite 0.12s;
    filter: url(#ai-logo-glow-violet) drop-shadow(0 0 3px rgba(124, 58, 237, 0.4));
}
.ai-logo-thinking .ai-logo-circle-inner {
    animation: ai-logo-pulse 1.8s ease-in-out infinite 0.24s;
    filter: url(#ai-logo-glow-yellow) drop-shadow(0 0 3px rgba(251, 191, 36, 0.4));
}
.ai-logo-thinking .ai-logo-dot-1 {
    animation: ai-logo-orbit-1 1.8s linear infinite;
    opacity: 1;
    r: 2;
}
.ai-logo-thinking .ai-logo-dot-2 {
    animation: ai-logo-orbit-2 1.8s linear infinite 0.1s;
    opacity: 1;
    r: 2;
}
.ai-logo-thinking .ai-logo-dot-3 {
    animation: ai-logo-orbit-3 1.8s linear infinite 0.2s;
    opacity: 1;
    r: 2;
}
.ai-logo-thinking .ai-logo-line {
    animation: ai-logo-link-flash-mid 1.2s ease-in-out infinite;
}
.ai-logo-thinking .ai-logo-line-2 {
    animation-delay: 0.04s;
}
.ai-logo-thinking .ai-logo-line-3 {
    animation-delay: 0.08s;
}

.ai-logo-active .ai-logo-circle-outer {
    animation: ai-logo-pulse-active 0.9s ease-in-out infinite;
    filter: url(#ai-logo-glow-purple) drop-shadow(0 0 6px rgba(88, 28, 135, 0.8));
}
.ai-logo-active .ai-logo-circle-mid {
    animation: ai-logo-pulse-active 0.9s ease-in-out infinite 0.06s;
    filter: url(#ai-logo-glow-violet) drop-shadow(0 0 6px rgba(124, 58, 237, 0.8));
}
.ai-logo-active .ai-logo-circle-inner {
    animation: ai-logo-pulse-active 0.9s ease-in-out infinite 0.12s;
    filter: url(#ai-logo-glow-yellow) drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
}
.ai-logo-active .ai-logo-dot-1 {
    animation: ai-logo-orbit-1 0.9s linear infinite;
    opacity: 1;
    r: 2.5;
}
.ai-logo-active .ai-logo-dot-2 {
    animation: ai-logo-orbit-2 0.9s linear infinite 0.05s;
    opacity: 1;
    r: 2.5;
}
.ai-logo-active .ai-logo-dot-3 {
    animation: ai-logo-orbit-3 0.9s linear infinite 0.1s;
    opacity: 1;
    r: 2.5;
}
.ai-logo-active .ai-logo-line {
    animation: ai-logo-link-flash-fast 0.6s ease-in-out infinite;
}
.ai-logo-active .ai-logo-line-2 {
    animation-delay: 0.02s;
}
.ai-logo-active .ai-logo-line-3 {
    animation-delay: 0.04s;
}

@keyframes ai-logo-pulse {
    0%, 100% { transform-origin: center; transform: scale(0.88); }
    50% { transform-origin: center; transform: scale(1.12); }
}
@keyframes ai-logo-pulse-active {
    0%, 100% { transform-origin: center; transform: scale(0.82); }
    50% { transform-origin: center; transform: scale(1.18); }
}

@keyframes ai-logo-orbit-1 {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}
@keyframes ai-logo-orbit-2 {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}
@keyframes ai-logo-orbit-3 {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}

@keyframes ai-logo-link-flash {
    0%, 70%, 100% { opacity: 0.15; stroke-width: 1.5; }
    75% { opacity: 0.6; stroke-width: 2; }
    80% { opacity: 0.15; stroke-width: 1.5; }
}
@keyframes ai-logo-link-flash-mid {
    0%, 60%, 100% { opacity: 0.4; stroke-width: 1.5; }
    65% { opacity: 0.85; stroke-width: 2.5; }
    75% { opacity: 0.4; stroke-width: 1.5; }
}
@keyframes ai-logo-link-flash-fast {
    0%, 40%, 100% { opacity: 0.6; stroke-width: 1.5; }
    45% { opacity: 1; stroke-width: 3; }
    55% { opacity: 0.6; stroke-width: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-logo-idle .ai-logo-circle-outer,
    .ai-logo-idle .ai-logo-circle-mid,
    .ai-logo-idle .ai-logo-circle-inner,
    .ai-logo-thinking .ai-logo-circle-outer,
    .ai-logo-thinking .ai-logo-circle-mid,
    .ai-logo-thinking .ai-logo-circle-inner,
    .ai-logo-active .ai-logo-circle-outer,
    .ai-logo-active .ai-logo-circle-mid,
    .ai-logo-active .ai-logo-circle-inner {
        animation: ai-logo-reduced 3s ease-in-out infinite !important;
    }
    .ai-logo-idle .ai-logo-dot-1,
    .ai-logo-idle .ai-logo-dot-2,
    .ai-logo-idle .ai-logo-dot-3,
    .ai-logo-thinking .ai-logo-dot-1,
    .ai-logo-thinking .ai-logo-dot-2,
    .ai-logo-thinking .ai-logo-dot-3,
    .ai-logo-active .ai-logo-dot-1,
    .ai-logo-active .ai-logo-dot-2,
    .ai-logo-active .ai-logo-dot-3 {
        animation: none !important;
        opacity: 0.6;
    }
    .ai-logo-idle .ai-logo-line,
    .ai-logo-thinking .ai-logo-line,
    .ai-logo-active .ai-logo-line {
        animation: none !important;
        opacity: 0.3;
    }
}
@keyframes ai-logo-reduced {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}