/* 
 * Button state management styles
 * Enhanced version with stronger specificity and forced visual feedback
 */

/* Base button styles */
.btn {
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Generating state styles with high specificity */
.btn.generating,
button.generating,
#generate-btn.generating,
#generate-personal-btn.generating {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: #bbbbbb !important;
}

/* Ensure disabled buttons show visual feedback */
.btn:disabled,
button:disabled,
#generate-btn:disabled,
#generate-personal-btn:disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: #bbbbbb !important;
}

/* Animation for generating state */
@keyframes pulse {
    0% { opacity: 0.8; }
    50% { opacity: 0.6; }
    100% { opacity: 0.8; }
}

.btn.generating,
button.generating,
#generate-btn.generating,
#generate-personal-btn.generating {
    animation: pulse 1.5s infinite ease-in-out !important;
}

/* Specific styles for baby section button */
#personal-tool #generate-personal-btn.generating,
#personal-tool #generate-personal-btn:disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: #bbbbbb !important;
    animation: pulse 1.5s infinite ease-in-out !important;
}

/* Ensure hover states don't override disabled state */
.btn.generating:hover,
button.generating:hover,
#generate-btn.generating:hover,
#generate-personal-btn.generating:hover,
.btn:disabled:hover,
button:disabled:hover,
#generate-btn:disabled:hover,
#generate-personal-btn:disabled:hover {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: #bbbbbb !important;
}

/* Force immediate visual feedback with !important */
.generating-text::after {
    content: "Generating..." !important;
}