/**
 * FriendlyForce Ticker System Styles
 * Loading states, animations, and status messages
 */

/* Status message container */
.ff-ticker-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    padding: 8px 16px;
    min-height: 24px;
    transition: opacity 0.3s ease;
}

/* Animated dots */
.ff-ticker-dots {
    display: inline-block;
    min-width: 20px;
}

.ff-ticker-dots::after {
    content: '';
    animation: ff-dots-animation 1.5s infinite;
}

@keyframes ff-dots-animation {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Location badge (optional, for showing detected location) */
.ff-ticker-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    margin-top: 8px;
}

.ff-ticker-location::before {
    content: '\1F4CD'; /* Pin emoji */
    font-size: 10px;
}

/* Loading shimmer effect for ticker text */
.ff-ticker-loading .typing-text {
    background: linear-gradient(
        90deg,
        var(--text-secondary, #64748b) 25%,
        var(--text-primary, #1e293b) 50%,
        var(--text-secondary, #64748b) 75%
    );
    background-size: 200% 100%;
    animation: ff-shimmer 1.5s infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes ff-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulse animation for status icon */
.ff-ticker-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--success-color, #22c55e);
    border-radius: 50%;
    margin-right: 8px;
    animation: ff-pulse 2s infinite;
}

@keyframes ff-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Fade in animation for when content loads */
.ff-ticker-fade-in {
    animation: ff-fade-in 0.5s ease-out;
}

@keyframes ff-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinner for extended loading */
.ff-ticker-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: ff-spin 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes ff-spin {
    to { transform: rotate(360deg); }
}

/* Status message with icon variations */
.ff-ticker-status[data-ff-state="discovering"]::before {
    content: '\1F30D'; /* Globe emoji */
    margin-right: 6px;
}

.ff-ticker-status[data-ff-state="found"]::before {
    content: '\1F4CD'; /* Pin emoji */
    margin-right: 6px;
}

.ff-ticker-status[data-ff-state="personalizing"]::before {
    content: '\2728'; /* Sparkles emoji */
    margin-right: 6px;
}

.ff-ticker-status[data-ff-state="gathering"]::before {
    content: '\1F4E1'; /* Satellite emoji */
    margin-right: 6px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .ff-ticker-status {
        color: rgba(255, 255, 255, 0.7);
    }

    .ff-ticker-location {
        color: #60a5fa;
        background: rgba(96, 165, 250, 0.15);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ff-ticker-status {
        font-size: 13px;
        padding: 6px 12px;
    }

    .ff-ticker-location {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Smooth transition when switching from loading to content */
/* Also make ticker clickable to populate chat input */
#typingText {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

#typingText:hover {
    opacity: 0.7;
}

/* Ensure cursor continues to blink during loading */
.typing-container .cursor {
    animation: ff-cursor-blink 1s infinite;
}

@keyframes ff-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}