/* ============================================
   AI CHAT ASSISTANT PRO - TEMAS PREDEFINIDOS
   3 Temas Premium Listos para Usar
   ============================================ */

/* ============================================
   TEMA 1: ELEGANT (Elegante - Azul Oscuro)
   ============================================ */
[data-aica-theme="elegant"] {
    --primary-color: #1e3a8a;
    --primary-color-dark: #1e40af;
    --secondary-color: #3b82f6;
    --text-color: #1f2937;
    --bg-gradient-start: #1e3a8a;
    --bg-gradient-end: #3b82f6;
}

[data-aica-theme="elegant"] #aica-chat-button {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

[data-aica-theme="elegant"] .aica-chat-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

[data-aica-theme="elegant"] .aica-message.user .aica-message-content {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

[data-aica-theme="elegant"] #aica-send-button,
[data-aica-theme="elegant"] .aica-submit-button {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

/* ============================================
   TEMA 2: MINIMAL (Minimalista - Gris)
   ============================================ */
[data-aica-theme="minimal"] {
    --primary-color: #374151;
    --primary-color-dark: #1f2937;
    --secondary-color: #6b7280;
    --text-color: #111827;
    --bg-gradient-start: #374151;
    --bg-gradient-end: #6b7280;
}

[data-aica-theme="minimal"] #aica-chat-button {
    background: #374151;
    box-shadow: 0 4px 20px rgba(55, 65, 81, 0.3);
}

[data-aica-theme="minimal"] .aica-chat-header {
    background: #374151;
}

[data-aica-theme="minimal"] .aica-message.user .aica-message-content {
    background: #374151;
    color: #ffffff;
}

[data-aica-theme="minimal"] #aica-send-button,
[data-aica-theme="minimal"] .aica-submit-button {
    background: #374151;
}

[data-aica-theme="minimal"] .aica-channel-option:hover {
    border-color: #374151;
}

[data-aica-theme="minimal"] .aica-channel-option:hover .aica-channel-icon {
    background: linear-gradient(135deg, #374151 0%, #6b7280 100%);
}

/* Minimal theme - remove animations for cleaner look */
[data-aica-theme="minimal"] #aica-chat-button::before {
    animation: none;
}

[data-aica-theme="minimal"] .aica-avatar {
    animation: none;
}

/* ============================================
   TEMA 3: VIBRANT (Vibrante - Colorido)
   ============================================ */
[data-aica-theme="vibrant"] {
    --primary-color: #ec4899;
    --primary-color-dark: #db2777;
    --secondary-color: #f472b6;
    --text-color: #1f2937;
    --bg-gradient-start: #ec4899;
    --bg-gradient-end: #8b5cf6;
}

[data-aica-theme="vibrant"] #aica-chat-button {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
}

[data-aica-theme="vibrant"] .aica-chat-header {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

[data-aica-theme="vibrant"] .aica-message.user .aica-message-content {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
}

[data-aica-theme="vibrant"] #aica-send-button,
[data-aica-theme="vibrant"] .aica-submit-button {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
}

[data-aica-theme="vibrant"] #aica-send-button:hover,
[data-aica-theme="vibrant"] .aica-submit-button:hover {
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.5);
}

[data-aica-theme="vibrant"] .aica-channel-option:hover {
    border-color: #ec4899;
}

[data-aica-theme="vibrant"] .aica-channel-option:hover .aica-channel-icon {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

/* Vibrant theme - enhanced animations */
[data-aica-theme="vibrant"] #aica-chat-button::before {
    animation: vibrantPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes vibrantPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* ============================================
   TEMA 4: NATURE (Naturaleza - Verde)
   ============================================ */
[data-aica-theme="nature"] {
    --primary-color: #10b981;
    --primary-color-dark: #059669;
    --secondary-color: #34d399;
    --text-color: #1f2937;
    --bg-gradient-start: #10b981;
    --bg-gradient-end: #34d399;
}

[data-aica-theme="nature"] #aica-chat-button {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

[data-aica-theme="nature"] .aica-chat-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

[data-aica-theme="nature"] .aica-message.user .aica-message-content {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

[data-aica-theme="nature"] #aica-send-button,
[data-aica-theme="nature"] .aica-submit-button {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

/* ============================================
   TEMA 5: SUNSET (Atardecer - Naranja/Rojo)
   ============================================ */
[data-aica-theme="sunset"] {
    --primary-color: #f59e0b;
    --primary-color-dark: #d97706;
    --secondary-color: #fbbf24;
    --text-color: #1f2937;
    --bg-gradient-start: #f59e0b;
    --bg-gradient-end: #ef4444;
}

[data-aica-theme="sunset"] #aica-chat-button {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

[data-aica-theme="sunset"] .aica-chat-header {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

[data-aica-theme="sunset"] .aica-message.user .aica-message-content {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

[data-aica-theme="sunset"] #aica-send-button,
[data-aica-theme="sunset"] .aica-submit-button {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

/* ============================================
   TEMA 6: OCEAN (Océano - Azul Claro)
   ============================================ */
[data-aica-theme="ocean"] {
    --primary-color: #06b6d4;
    --primary-color-dark: #0891b2;
    --secondary-color: #22d3ee;
    --text-color: #1f2937;
    --bg-gradient-start: #06b6d4;
    --bg-gradient-end: #3b82f6;
}

[data-aica-theme="ocean"] #aica-chat-button {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

[data-aica-theme="ocean"] .aica-chat-header {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

[data-aica-theme="ocean"] .aica-message.user .aica-message-content {
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
}

[data-aica-theme="ocean"] #aica-send-button,
[data-aica-theme="ocean"] .aica-submit-button {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

/* ============================================
   ADVANCED CUSTOMIZATION
   ============================================ */

/* Custom avatar support */
.aica-avatar.has-custom-image {
    background: transparent;
}

.aica-avatar img {
    border-radius: 50%;
}

/* Sound notification indicator */
.aica-sound-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #ffffff;
    animation: soundPulse 1s ease-in-out infinite;
}

@keyframes soundPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Enhanced typing indicator */
.aica-typing-enhanced {
    position: relative;
}

.aica-typing-enhanced::after {
    content: 'AI is typing';
    position: absolute;
    bottom: 100%;
    left: 50px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
}

/* Theme selector preview */
.aica-theme-preview {
    width: 100px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.aica-theme-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.aica-theme-preview.active {
    border-color: #10b981;
}

.aica-theme-preview::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    background: #10b981;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.aica-theme-preview.active::after {
    display: flex;
}

/* Theme specific previews */
.aica-theme-preview.elegant { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.aica-theme-preview.minimal { background: #374151; }
.aica-theme-preview.vibrant { background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); }
.aica-theme-preview.nature { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.aica-theme-preview.sunset { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.aica-theme-preview.ocean { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); }