/* Input enhancements */
        .input-enhanced {
            transition: all 0.3s ease;
            border: 2px solid #e5e7eb;
        }
        
        .input-enhanced:focus {
            border-color: #4338ca;
            box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1);
            transform: translateY(-1px);
        }

        /* Button enhancements */
        .btn-primary {
            background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
            box-shadow: 0 4px 15px rgba(67, 56, 202, 0.3);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(67, 56, 202, 0.4);
        }

        .btn-secondary {
            border: 2px solid #4338ca;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background-color: #4338ca;
            color: white;
            transform: translateY(-1px);
        }

        /* Tab styling */
        .tab-button {
            position: relative;
            transition: all 0.3s ease;
            border-radius: 12px;
        }
        
        .tab-button.active {
            background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
            color: white;
        }
        
        .tab-button:not(.active):hover {
            background-color: rgba(67, 56, 202, 0.1);
        }

        /* Character card enhancements */
        .character-card {
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid #e5e7eb;
        }
        
        
        .character-card[data-character="podcast"]:hover {
            border-color: #f59e0b;
            background-color: rgba(255, 183, 3, 0.15);
            box-shadow: 0 4px 15px rgba(255, 183, 3, 0.2);
        }
        .character-card[data-character="sister"]:hover {
            border-color: #ec4899;
            background-color: rgba(236, 72, 153, 0.1);
            box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2);
        }

        .character-card[data-character="professor"]:hover {
            border-color: #166534;
            background-color: rgba(22, 101, 52, 0.1);
            box-shadow: 0 4px 15px rgba(22, 101, 52, 0.2);
        }

        .character-card[data-character="robot"]:hover {
            border-color: #0d9488; /* Teal-700 */
            background-color: rgba(13, 148, 136, 0.08); /* subtle teal tint */
            box-shadow: 0 4px 15px rgba(13, 148, 136, 0.2); /* teal shadow */
        }

        .character-card[data-character="harold"]:hover {
            border-color: #ef4444; /* Fiery red */
            background-color: rgba(255, 89, 94, 0.15); /* Light aggressive red tint */
            box-shadow: 0 4px 15px rgba(255, 89, 94, 0.2);
        }

        .character-card[data-character="podcast2"]:hover {
            border-color: #5b21b6; /* Deep purple */
            background-color: rgba(91, 33, 182, 0.1);
            box-shadow: 0 4px 15px rgba(91, 33, 182, 0.15), 0 0 5px rgba(72, 72, 74, 0.15); /* Subtle gray hint */
        }

        /* PODCAST HOST selected */
        .character-card[data-character="podcast"].selected {
            background: linear-gradient(135deg, rgba(255, 183, 3, 0.65), rgba(255, 102, 102, 0.65));
            color: white;
            border-color: #f59e0b;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 183, 3, 0.3);
        }
        /* BIG SISTER selected */
        .character-card[data-character="sister"].selected {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.7), rgba(251, 113, 133, 0.7), rgba(253, 186, 116, 0.7));
            color: white;
            border-color: #ec4899;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(236, 72, 153, 0.35);
        }

        /* PROFESSOR selected */
       .character-card[data-character="professor"].selected {
            background: linear-gradient(135deg, rgba(34, 139, 87, 0.65), rgba(107, 142, 35, 0.65));
            color: white;
            border-color: #166534;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(34, 139, 87, 0.3);
        }

        .character-card[data-character="robot"].selected {
            background: linear-gradient(135deg, rgba(13, 148, 136, 0.65), rgba(234, 88, 12, 0.65)); /* teal + button orange */
            color: white;
            border-color: #0d9488;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(13, 148, 136, 0.35);
        }

        .character-card[data-character="harold"].selected {
            background: linear-gradient(135deg, rgba(255, 11, 19, 0.65), rgba(255, 140, 0, 0.65)); /* Fire red to flame orange */
            color: white;
            border-color: #ef4444;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 89, 94, 0.3);
        }

        .character-card[data-character="podcast2"].selected {
            background: linear-gradient(135deg, rgba(91, 33, 182, 0.65), rgba(72, 72, 74, 0.65)); /* Purple to steel gray */
            color: white;
            border-color: #5b21b6;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(91, 33, 182, 0.3), 0 0 10px rgba(72, 72, 74, 0.2); /* Adds Chris’s presence */
        }

        

          /* Loading animation */
        .processing {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Demo button styles */
        .demo-btn {
            transition: all 0.3s ease;
        }
        
        .demo-btn:hover {
            transform: translateY(-1px);
        }

        /* Audio result styling */
        .audio-result-bg {
            background: linear-gradient(135deg, rgba(67, 56, 202, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
        }