@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300&family=Inter:wght@300;400;500;600;700;800;900&display=swap');
        
        body { font-family: 'Inter', sans-serif; }
        h1, h2, h3, .article-text { font-family: 'Merriweather', serif; }
        
        .widget-transition { transition: all 0.3s ease; }
        .answer-content { 
            max-height: 0; 
            opacity: 0; 
            overflow: hidden; 
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in;
        }
        .answer-content.open { 
            opacity: 1; 
        }
        
        /* Cursor blinking effect */
        .typing-cursor {
            display: inline-block;
            width: 2px;
            height: 1em;
            background-color: #dc2626;
            margin-left: 2px;
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        
        /* Thinking dots animation */
        .thinking-dots {
            display: inline-flex;
            gap: 4px;
            align-items: center;
        }
        
        .thinking-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #dc2626;
            animation: thinking-bounce 1.4s infinite ease-in-out;
        }
        
        .thinking-dots span:nth-child(1) {
            animation-delay: -0.32s;
        }
        
        .thinking-dots span:nth-child(2) {
            animation-delay: -0.16s;
        }
        
        @keyframes thinking-bounce {
            0%, 80%, 100% { 
                transform: scale(0);
                opacity: 0.5;
            }
            40% { 
                transform: scale(1);
                opacity: 1;
            }
        }
        
        /* Subtle shimmer effect for the header icon */
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .shimmer-bg {
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            background-size: 200% 100%;
            animation: shimmer 3s infinite;
        }

        /* Running border animation */
        @keyframes border-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .running-border {
            position: relative;
            padding: 3px; 
            border-radius: 8px;
            background: burlywood;
            overflow: hidden;
        }

        .running-border::before {
            content: '';
            position: absolute;
            inset: -150%;
            background: conic-gradient(
                from 0deg,
                transparent 0deg 90deg,
                #dc2626 90deg 180deg,
                #ea580c 180deg 270deg,
                transparent 270deg 360deg
            );
            animation: border-rotate 3s linear infinite;
        }

        .inner-widget {
            position: relative;
            z-index: 10; 
            background-color: white;
            border-radius: 8px;
            overflow: hidden; 
        }
        
        /* Enhancement for CTR: Interactive hover state for question buttons */
        .question-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
        }
        
        /* Generating animation */
        @keyframes pulse-generating {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .generating-pulse {
            animation: pulse-generating 1.5s ease-in-out infinite;
        }
        
        /* Thinking state animation */
        .thinking-pulse {
            animation: pulse-generating 1s ease-in-out infinite;
        }