/* AI Summary Section Styling */
#ai-summary-section {
    border-left: 3px solid #007cba;
    background-color: #e8e9ea;
    margin-bottom: 20px;
    padding: 5px;
}

#ai-summary-section .sec > div:first-child {
    color: #007cba;
    font-weight: bold;
    margin-bottom: 10px;
}

#ai-summary-loading p {
    margin: 10px 0;
    font-style: italic;
    color: #666;
}

#ai-summary-content p {
    line-height: 1.6;
    color: #333;
    margin: 10px 0;
}

#ai-summary-error p {
    color: #999;
    font-size: 12px;
    margin: 10px 0;
}

/* Loading animation */
#ai-summary-loading::after {
    content: "...";
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { 
        color: rgba(102, 102, 102, 0.2);
        text-shadow: 0.25em 0 0 rgba(102, 102, 102, 0.2),
                     0.5em 0 0 rgba(102, 102, 102, 0.2),
                     0.75em 0 0 rgba(102, 102, 102, 0.2);
    }
    40% { 
        color: rgba(102, 102, 102, 1);
        text-shadow: 0.25em 0 0 rgba(102, 102, 102, 0.2),
                     0.5em 0 0 rgba(102, 102, 102, 0.2),
                     0.75em 0 0 rgba(102, 102, 102, 0.2);
    }
    60% { 
        text-shadow: 0.25em 0 0 rgba(102, 102, 102, 1),
                     0.5em 0 0 rgba(102, 102, 102, 0.2),
                     0.75em 0 0 rgba(102, 102, 102, 0.2);
    }
    80%, 100% { 
        text-shadow: 0.25em 0 0 rgba(102, 102, 102, 1),
                     0.5em 0 0 rgba(102, 102, 102, 1),
                     0.75em 0 0 rgba(102, 102, 102, 1);
    }
}