/* Word Counter & Progress Bar */
    .word-count-feedback {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 12px;
        color: #6b7280;
        position: relative; 
        overflow: hidden; 
        height: 1.5em; /* Set a fixed height for smooth animation */
    }
    .word-count-text,
    .word-count-success-text {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 500;
        transition: transform 0.4s ease, opacity 0.4s ease;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
    .feedback-text-incomplete {
        font-style: italic;
        color: #9ca3af;
        margin-left: 8px;
    }
    .word-count-success-text {
        opacity: 0;
        transform: translateY(150%);
        font-weight: 600;
        color: #16a34a;
    }
    .word-count-success-text i {
        margin-right: 5px;
        font-size: 14px;
        transform: scale(0);
    }

    .progress-bar-container {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100px;
        height: 6px;
        background-color: #e5e7eb;
        border-radius: 3px;
        overflow: hidden;
    }
    .progress-bar {
        width: 0;
        height: 100%;
        background-color: #ef4444; /* Start with red */
        border-radius: 3px;
        transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s ease;
    }

    /* Transition State (e.g., 15/30 words) */
.word-count-feedback.in-progress .progress-bar

 {
    background-color: #e94d65;
}

    /* Success State Active */
    .word-count-feedback.success .word-count-text {
        transform: translateY(-150%);
        opacity: 0;
    }
    .word-count-feedback.success .word-count-success-text {
        opacity: 1;
        transform: translateY(-50%);
    }
    .word-count-feedback.success .word-count-success-text i {
        animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.2s forwards;
    }
    .word-count-feedback.success .progress-bar {
        background-color: #22c55e; /* Bright Green */
    }

    @keyframes pop-in {
        to { transform: scale(1); }
    }