:root {
    --ai-bg: #ffffff;
    --ai-text: #1f2937;
    --ai-header-hover: #f9fafb;
    --ai-subtitle: #6b7280;
    --ai-chevron: #374151;
    --ai-border-gradient: linear-gradient(90deg, #a855f7, #ec4899, #3b82f6);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ai-bg: #1a1a1a;
        --ai-text: #e5e7eb;
        --ai-header-hover: #252525;
        --ai-subtitle: #9ca3af;
        --ai-chevron: #fff;
    }
}

.ai-accordion-container {
    background: var(--ai-bg);
    border-radius: 12px;
    padding: 2px;
    /* For gradient border */
    background-image: var(--ai-border-gradient);
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.ai-accordion-header {
    background: var(--ai-bg);
    padding: 16px 20px;
    border-radius: 10px;
    /* Inner radius */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s, border-radius 0.2s;
    /* Smooth transition for radius */
}

.ai-accordion-container.active .ai-accordion-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ai-accordion-header:hover {
    background: var(--ai-header-hover);
}

.ai-accordion-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-sparkle-icon {
    font-size: 20px;
}

.ai-accordion-title {
    color: #a855f7;
    /* Purple tint - keeps branding consistent */
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
}

.ai-accordion-subtitle {
    color: var(--ai-subtitle);
    font-size: 12px;
    margin-top: 2px;
}

.ai-accordion-chevron {
    color: var(--ai-chevron);
    transition: transform 0.3s ease;
}

.ai-accordion-container.active .ai-accordion-chevron {
    transform: rotate(180deg);
}

.ai-accordion-body {
    background: var(--ai-bg);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: var(--ai-text);
    line-height: 1.6;
    font-size: 15px;
}

.ai-content-result {
    padding: 0 20px 20px 20px;
}

.ai-content-result p {
    margin-bottom: 1em;
}

.ai-content-result .error {
    color: #ef4444;
}