/* Animated icons (used with iconify-icon) */

.ui-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

h1 .logo-icon {
    font-size: 2rem;
    color: #0ea5e9;
}

h2 .panel-icon {
    font-size: 1.35rem;
    color: #8b5cf6;
}

.tab-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.tab-btn .ui-icon {
    font-size: 1.2rem;
}

.tab-btn:hover .ui-icon {
    animation: iconWiggle 0.45s ease;
}

.tab-btn.active .ui-icon {
    color: #fff;
    animation: iconPulse 2s ease-in-out infinite;
}

.btn .btn-icon {
    font-size: 1.05rem;
    margin-left: 0.15rem;
}

[dir="rtl"] .btn .btn-icon {
    margin-left: 0;
    margin-right: 0.15rem;
}

.btn:hover .btn-icon {
    animation: iconBounce 0.5s ease;
}

.connection-icon {
    font-size: 1.35rem;
    color: var(--accent);
}

.connection-icon.is-online {
    color: var(--success);
    animation: iconPulse 2s ease-in-out infinite;
}

.connection-icon.is-offline {
    color: var(--danger);
    animation: iconShake 0.6s ease;
}

.connection-icon.is-loading {
    color: var(--accent-2);
    animation: iconSpin 1s linear infinite;
}

h1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

h2.panel-title,
.panel-header-row h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.signal-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: inherit;
}

.signal-with-icon .ui-icon {
    font-size: 1.1rem;
}

.signal-with-icon.icon-signal-buy .ui-icon {
    color: #059669;
    animation: iconBounce 1.2s ease infinite;
}

.signal-with-icon.icon-signal-bull .ui-icon {
    color: #10b981;
}

.signal-with-icon.icon-signal-risk .ui-icon {
    color: #d97706;
    animation: iconShake 2s ease infinite;
}

.signal-with-icon.icon-signal-dump .ui-icon {
    color: #dc2626;
    animation: iconShake 0.8s ease infinite;
}

.signal-with-icon.icon-signal-watch .ui-icon {
    color: #0ea5e9;
    animation: iconPulse 2.5s ease infinite;
}

.loading-row .ui-icon {
    animation: iconSpin 0.9s linear infinite;
    color: var(--accent-2);
}

.liquidity-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.liquidity-inflow {
    color: #059669;
}

.liquidity-inflow .ui-icon {
    animation: iconBounce 1.2s ease-in-out infinite;
}

.liquidity-outflow {
    color: #dc2626;
}

.liquidity-outflow .ui-icon {
    animation: iconShake 1.5s ease-in-out infinite;
}

.liquidity-balanced {
    color: #64748b;
}

/* Keyframes */
@keyframes iconPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.12);
        opacity: 0.85;
    }
}

@keyframes iconBounce {
    0%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-1px);
    }
}

@keyframes iconWiggle {
    0%,
    100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-8deg);
    }
    75% {
        transform: rotate(8deg);
    }
}

@keyframes iconSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes iconFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes iconShake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-3px);
    }
    40% {
        transform: translateX(3px);
    }
    60% {
        transform: translateX(-2px);
    }
    80% {
        transform: translateX(2px);
    }
}

.anim-float {
    animation: iconFloat 3s ease-in-out infinite;
}

.anim-spin {
    animation: iconSpin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ui-icon,
    .tab-btn .ui-icon,
    .signal-with-icon .ui-icon,
    .connection-icon,
    .anim-float,
    .anim-spin {
        animation: none !important;
    }
}