/* Simple input field indicator styling */

/* Basic form positioning */
#guess-form {
    position: relative;
    margin-bottom: 3rem !important;
    margin-top: 1rem;
    padding-bottom: 1rem;
    z-index: 10;
    transition: margin-bottom 0.3s ease-in-out;
}
#guess-form.input-focused {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Add a floating indicator for new users */
#start-typing-indicator {
    position: absolute !important;
    bottom: -35px !important;
    left: 50% !important;
    transform: translateX(-50%); /* removed !important to allow animation to override transform */
    color: var(--warning) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    animation: float-indicator 1.5s infinite alternate ease-in-out; /* removed !important */
    white-space: nowrap !important;
    transition: opacity 0.3s ease !important; 
    z-index: 999 !important;
    pointer-events: none !important;
}

@keyframes float-indicator {
    0% {
        transform: translateX(-50%) translateY(0px);
    }
    100% {
        transform: translateX(-50%) translateY(-12px);
    }
}

/* Hide the start-typing indicator only when explicitly needed */
.history-section-visible #start-typing-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}

.input-focused #start-typing-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Make sure the input is more visible on mobile */
@media (max-width: 768px) {
    
    #start-typing-indicator {
        font-size: 0.95rem;
    }
}

#guess-form.has-submitted {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transition: none !important;
}

#guess-form.has-submitted #start-typing-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}