/* ============================================
   Logo Animation - מילה Loading Indicator
   V → X → מ (Full Logo) Sequence
   ============================================ */

/* Container for the animated logo */
.logo-loader {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-loader.small {
    width: 24px;
    height: 24px;
}

.logo-loader.medium {
    width: 40px;
    height: 40px;
}

.logo-loader.large {
    width: 60px;
    height: 60px;
}

/* Each logo part */
.logo-loader img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

/* Animation keyframes for V → X → Full sequence */
@keyframes logoSequenceV {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    5% { opacity: 1; transform: scale(1); }
    25% { opacity: 1; transform: scale(1); }
    30% { opacity: 0; transform: scale(0.9); }
}

@keyframes logoSequenceX {
    0%, 30% { opacity: 0; transform: scale(0.8); }
    35% { opacity: 1; transform: scale(1); }
    55% { opacity: 1; transform: scale(1); }
    60% { opacity: 0; transform: scale(0.9); }
}

@keyframes logoSequenceFull {
    0%, 60% { opacity: 0; transform: scale(0.8); }
    65% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}

/* Apply animations */
.logo-loader .logo-v {
    animation: logoSequenceV 2.4s ease-in-out infinite;
}

.logo-loader .logo-x {
    animation: logoSequenceX 2.4s ease-in-out infinite;
}

.logo-loader .logo-full {
    animation: logoSequenceFull 2.4s ease-in-out infinite;
}

/* ============================================
   Nav Logo Animation (V → X → Full on page load)
   ============================================ */

.nav-logo-animated {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-logo-animated img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.nav-logo-animated .logo-v {
    animation: logoSequenceV 2.4s ease-in-out infinite;
}

.nav-logo-animated .logo-x {
    animation: logoSequenceX 2.4s ease-in-out infinite;
}

.nav-logo-animated .logo-full {
    animation: logoSequenceFull 2.4s ease-in-out infinite;
}

/* ============================================
   Alternative: Subtle pulse for nav logo
   (on page load and every few minutes)
   ============================================ */

.nav-logo-img.animate-pulse {
    animation: logoPulse 2s ease-in-out;
}

@keyframes logoPulse {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.05); filter: brightness(1.1); }
    50% { transform: scale(1); filter: brightness(1); }
    75% { transform: scale(1.03); filter: brightness(1.05); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Subtle glow effect */
.nav-logo-img.animate-glow {
    animation: logoGlow 3s ease-in-out;
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(30, 58, 95, 0.5));
    }
}

/* ============================================
   Status Bar Loading Animation
   Replaces fa-spinner in panel status
   ============================================ */

.status-logo-loader {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-logo-loader img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.status-logo-loader .logo-v {
    animation: logoSequenceV 2.4s ease-in-out infinite;
}

.status-logo-loader .logo-x {
    animation: logoSequenceX 2.4s ease-in-out infinite;
}

.status-logo-loader .logo-full {
    animation: logoSequenceFull 2.4s ease-in-out infinite;
}

/* ============================================
   Unified Suggestions Loading State
   ============================================ */

.unified-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 30px;
}

.unified-loading-content .logo-loader {
    width: 48px;
    height: 48px;
}

.unified-loading-content .logo-loader.medium {
    width: 48px;
    height: 48px;
}

/* ============================================
   V/X Icons for Apply/Dismiss Buttons
   ============================================ */

.btn-icon-v,
.btn-icon-x {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
}

/* Larger icons for bulk action buttons */
.bulk-action-btn .btn-icon-v,
.bulk-action-btn .btn-icon-x,
.panel-footer-btn .btn-icon-v,
.panel-footer-btn .btn-icon-x {
    width: 18px;
    height: 18px;
}

/* Popup tooltip icons */
.popup-btn .btn-icon-v,
.popup-btn .btn-icon-x,
.popup-change-mini-btn .btn-icon-v,
.popup-change-mini-btn .btn-icon-x {
    width: 14px;
    height: 14px;
}

/* Suggestion card action icons */
.suggestion-action-btn .btn-icon-v,
.suggestion-action-btn .btn-icon-x {
    width: 16px;
    height: 16px;
}

/* Unified suggestion minimal action icons */
.unified-action-btn-minimal .btn-icon-v,
.unified-action-btn-minimal .btn-icon-x {
    width: 14px;
    height: 14px;
}

/* Loading indicator V icon */
.loading-icon-v {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Unified loading indicator with logo */
.unified-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
}

.unified-loading .logo-loader.small {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Loading message item with logo */
.loading-message-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.loading-message-item .logo-loader.small {
    flex-shrink: 0;
}

/* ============================================
   Button spinner replacement
   ============================================ */

.btn-logo-spinner {
    position: relative;
    width: 16px;
    height: 16px;
    display: none;
}

.btn-logo-spinner img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.btn-logo-spinner .logo-v {
    animation: logoSequenceV 2.4s ease-in-out infinite;
}

.btn-logo-spinner .logo-x {
    animation: logoSequenceX 2.4s ease-in-out infinite;
}

.btn-logo-spinner .logo-full {
    animation: logoSequenceFull 2.4s ease-in-out infinite;
}

/* Show spinner when processing */
.processing .btn-logo-spinner {
    display: inline-flex;
}

.processing .btn-logo-spinner img {
    /* Animations will handle opacity */
}

/* ============================================
   Chunking Progress Logo Animation
   ============================================ */

.chunking-logo-spinner {
    width: 24px;
    height: 24px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chunking-logo-spinner img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.chunking-logo-spinner .logo-v {
    animation: logoSequenceV 2.4s ease-in-out infinite;
}

.chunking-logo-spinner .logo-x {
    animation: logoSequenceX 2.4s ease-in-out infinite;
}

.chunking-logo-spinner .logo-full {
    animation: logoSequenceFull 2.4s ease-in-out infinite;
}

/* ============================================
   Simple Fade Animation (Alternative)
   For simpler V → X → Full transition
   ============================================ */

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

.logo-loader.simple .logo-v {
    animation: fadeInOut 2.4s ease-in-out infinite;
    animation-delay: 0s;
}

.logo-loader.simple .logo-x {
    animation: fadeInOut 2.4s ease-in-out infinite;
    animation-delay: 0.8s;
}

.logo-loader.simple .logo-full {
    animation: fadeInOut 2.4s ease-in-out infinite;
    animation-delay: 1.6s;
}