/**
 * ElevenLabs Audio Player Styling for Houtini Theme
 * 
 * Integrates the audio player into the article-meta section
 * with proper responsive behavior and visual consistency
 * 
 * Follows Houtini design system patterns:
 * - Uses --houtini CSS variables
 * - Matches .dark-theme selector pattern (not data-bs-theme)
 * - Respects existing article-meta styles
 */

/* ===== AUDIO PLAYER WRAPPER ===== */
.elevenlabs-audio-wrapper {
    background: var(--houtini-gray-100);
    border-radius: var(--houtini-radius-md);
    padding: var(--houtini-spacing-md);
    margin-top: 0.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid var(--houtini-gray-200);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    max-width: 800px; /* Centered, not quite full width */
}

/* Dark mode support - matches your .dark-theme pattern */
.dark-theme .elevenlabs-audio-wrapper {
    background: var(--houtini-gray-900);
    border: 1px solid var(--houtini-gray-800);
}

/* Loading state styling */
#elevenlabs-audionative-widget {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--houtini-text-secondary);
    font-size: var(--houtini-font-size-sm);
    transition: color 0.3s ease;
}

.dark-theme #elevenlabs-audionative-widget {
    color: var(--houtini-text-secondary);
}

/* Link styling matches article-meta pattern */
#elevenlabs-audionative-widget a {
    color: var(--houtini-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

#elevenlabs-audionative-widget a:hover {
    text-decoration: underline;
    color: var(--houtini-secondary);
}

.dark-theme #elevenlabs-audionative-widget a {
    color: var(--houtini-accent-cyan);
}

.dark-theme #elevenlabs-audionative-widget a:hover {
    color: var(--houtini-accent-pink);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 767px) {
    .elevenlabs-audio-wrapper {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: var(--houtini-spacing-sm);
    }
}

/* Ensure full width on all screen sizes within flex container */
.article-meta .w-100 {
    flex-basis: 100%;
}

/* Optional: Add subtle animation on load - matches theme animations */
.elevenlabs-audio-wrapper {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== IFRAME STYLING (when ElevenLabs loads) ===== */
.elevenlabs-audio-wrapper iframe {
    border-radius: var(--houtini-radius-sm);
    border: none;
}