/* Custom Animations */
@keyframes fadeText {
    0% { opacity: 0.2; }  /* Start with low opacity */
    50% { opacity: 1; }   /* Full opacity at the middle of the animation */
    100% { opacity: 0.2; } /* Fade back to low opacity */
}

/* Apply the fadeText animation */
.fade-text {
    animation: fadeText 2s infinite; /* Pulsing effect with a 2-second duration */
}

/* Spinner replacement - Red Dot */
.recording-dot {
    width: 12px;  /* Dot width */
    height: 12px; /* Dot height */
    background-color: red;  /* Red color for the dot */
    border-radius: 50%;  /* Make it round */
    margin-left: 10px;  /* Space between the dot and text */
    animation: fadeText 1.5s infinite;  /* Apply fadeText animation for pulsing effect */
}

/* Button Styles */
#toggle-btn.start {
    background-color: #22c55e; /* Green background for the start button */
}

#toggle-btn.stop {
    background-color: #ef4444; /* Red background for the stop button */
}

/* Table Styles */
#grammar-errors tr {
    border-bottom: 1px solid #4b5563; /* Tailwind gray-700 color for row borders */
}

/* Spinner (unused but preserved for reference) */
.spinner {
    border: 4px solid #ccc; /* Light gray border */
    border-top: 4px solid #4ade80; /* Green color for the spinning top */
    border-radius: 50%; /* Make the spinner circular */
    width: 16px; /* Spinner size */
    height: 16px; /* Spinner size */
    animation: spin 0.8s linear infinite; /* Rotate the spinner indefinitely */
}

@keyframes spin {
    to { transform: rotate(360deg); } /* Define the rotation animation */
}

/* Fade-out effect for elements */
.fade-out {
    opacity: 0; /* Set opacity to 0 for fading out */
    transition: opacity 0.8s ease-out; /* Transition the opacity over 0.8 seconds */
}

/* Typing effect styling */
.typing-text {
    white-space: pre-wrap; /* Preserve spaces and line breaks */
    font-family: 'Poppins', sans-serif; /* Use Poppins font for the typing text */
}
