/**
 * Styles personnalisés pour le widget de chat n8n
 * Adaptation aux couleurs et au thème de RushB avec DaisyUI
 * Utilise les variables CSS de n8n pour une intégration parfaite
 */

:root {
    /* Couleurs principales - alignées sur le thème RushB */
    --chat--color--primary: #3A1593;
    --chat--color--primary-shade-50: #2f1076;
    --chat--color--primary--shade-100: #250c5a;
    --chat--color--secondary: #6C2BD9;
    --chat--color-secondary-shade-50: #5722ad;
    
    /* Couleurs de base - utilisation des couleurs DaisyUI */
    --chat--color-white: #ffffff;
    --chat--color-light: oklch(100% 0 0);
    --chat--color-light-shade-50: oklch(97% 0 0);
    --chat--color-light-shade-100: oklch(94% 0 0);
    --chat--color-medium: #9ca3af;
    --chat--color-dark: #1f2937;
    --chat--color-disabled: #9ca3af;
    --chat--color-typing: #6b7280;

    /* Espacements et bordures - alignés sur DaisyUI */
    --chat--spacing: 1rem;
    --chat--border-radius: 1rem;
    --chat--transition-duration: 0.3s;

    /* Dimensions de la fenêtre de chat */
    --chat--window--width: 440px;
    --chat--window--height: 680px;

    /* En-tête du chat - dégradé violet élégant */
    --chat--header-height: auto;
    --chat--header--padding: 1.5rem;
    --chat--header--background: linear-gradient(135deg, #3A1593 0%, #6C2BD9 100%);
    --chat--header--color: #ffffff;
    --chat--header--border-top: none;
    --chat--header--border-bottom: none;
    --chat--heading--font-size: 1.5rem;
    --chat--subtitle--font-size: 0.875rem;
    --chat--subtitle--line-height: 1.5;

    /* Zone de texte */
    --chat--textarea--height: 56px;

    /* Messages - style moderne */
    --chat--message--font-size: 0.875rem;
    --chat--message--padding: 0.75rem 0.875rem;
    --chat--message--border-radius: 1rem;
    --chat--message-line-height: 1.5;
    
    /* Messages du bot - fond clair subtil */
    --chat--message--bot--background: oklch(97% 0 0);
    --chat--message--bot--color: #1f2937;
    --chat--message--bot--border: 1px solid oklch(94% 0 0);
    
    /* Messages de l'utilisateur - violet avec dégradé */
    --chat--message--user--background: #3A1593;
    --chat--message--user--color: #ffffff;
    --chat--message--user--border: none;
    
    /* Code dans les messages */
    --chat--message--pre--background: rgba(58, 21, 147, 0.08);

    /* Bouton toggle (bouton flottant) */
    --chat--toggle--background: #3A1593;
    --chat--toggle--hover--background: #4A1DB3;
    --chat--toggle--active--background: #2f1076;
    --chat--toggle--color: #ffffff;
    --chat--toggle--size: 68px;
}

/* Mode sombre - adaptation des couleurs */
[data-theme="dark"] {
    --chat--color-light: #1f2937;
    --chat--color-light-shade-50: #374151;
    --chat--color-light-shade-100: #4b5563;
    --chat--color-dark: #f9fafb;
    --chat--color-medium: #6b7280;
    
    /* Messages du bot en mode sombre */
    --chat--message--bot--background: #374151;
    --chat--message--bot--color: #f9fafb;
    --chat--message--bot--border: 1px solid #4b5563;
    
    /* Code en mode sombre */
    --chat--message--pre--background: rgba(255, 255, 255, 0.08);
}

/* Animations et améliorations visuelles */

/* Bouton toggle - style DaisyUI avec violet */
#n8n-chat button[aria-label*="toggle"],
#n8n-chat .chat-toggle {
    background: linear-gradient(135deg, #3A1593 0%, #6C2BD9 100%) !important;
    box-shadow: 0 10px 25px -5px rgba(58, 21, 147, 0.4), 0 8px 10px -6px rgba(58, 21, 147, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
}

#n8n-chat button[aria-label*="toggle"]:hover,
#n8n-chat .chat-toggle:hover {
    background: linear-gradient(135deg, #4A1DB3 0%, #7C3BE9 100%) !important;
    box-shadow: 0 20px 25px -5px rgba(58, 21, 147, 0.5), 0 8px 10px -6px rgba(58, 21, 147, 0.5);
    transform: translateY(-4px) scale(1.05);
}

#n8n-chat button[aria-label*="toggle"]:active,
#n8n-chat .chat-toggle:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 5px 15px -3px rgba(58, 21, 147, 0.4);
}

/* Fenêtre de chat - style DaisyUI card */
#n8n-chat > div[role="dialog"],
#n8n-chat .chat-window {
    animation: chatWindowSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: var(--chat--border-radius);
    border: 1px solid oklch(94% 0 0);
    overflow: hidden;
}

/* Police Inter pour tout le contenu du chat */
#n8n-chat,
#n8n-chat * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Zone de saisie - style DaisyUI input */
#n8n-chat textarea,
#n8n-chat input[type="text"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.2s ease;
    border-radius: 0.5rem !important;
    border-color: oklch(94% 0 0) !important;
}

#n8n-chat textarea:focus,
#n8n-chat input[type="text"]:focus {
    outline: none !important;
    border-color: #3A1593 !important;
    box-shadow: 0 0 0 4px rgba(58, 21, 147, 0.1) !important;
}

/* Boutons d'envoi - style DaisyUI btn */
#n8n-chat button:not([aria-label*="toggle"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.2s ease;
    border-radius: 0.5rem;
}

#n8n-chat button:not([aria-label*="toggle"]):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes chatWindowSlideIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Messages en streaming */
#n8n-chat .streaming-message,
#n8n-chat [data-streaming="true"] {
    animation: fadeIn 0.3s ease-in;
}

/* Indicateur de frappe */
#n8n-chat .typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
}

#n8n-chat .typing-indicator span {
    width: 8px;
    height: 8px;
    background-color: #6b7280;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

#n8n-chat .typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

#n8n-chat .typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Scrollbar style DaisyUI */
#n8n-chat *::-webkit-scrollbar {
    width: 10px;
}

#n8n-chat *::-webkit-scrollbar-track {
    background: transparent;
}

#n8n-chat *::-webkit-scrollbar-thumb {
    background: oklch(94% 0 0);
    border-radius: 0.5rem;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#n8n-chat *::-webkit-scrollbar-thumb:hover {
    background: #3A1593;
    background-clip: padding-box;
}

/* Bouton copier pour les messages bot */
#n8n-chat [class*="bot"] [class*="message"],
#n8n-chat .bot-message {
    position: relative;
}

#n8n-chat [class*="bot"]:hover .copy-button,
#n8n-chat .bot-message:hover .copy-button {
    opacity: 1;
}

.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid oklch(94% 0 0);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #3A1593;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.copy-button:hover {
    background: #3A1593;
    color: white;
    border-color: #3A1593;
}

.copy-button.copied {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

/* Responsive - adaptation mobile */
@media (max-width: 768px) {
    :root {
        --chat--window--width: 100vw;
        --chat--window--height: 100vh;
        --chat--toggle--size: 60px;
        --chat--message--font-size: 0.8125rem;
    }
    
    #n8n-chat > div[role="dialog"],
    #n8n-chat .chat-window {
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    .copy-button {
        opacity: 1;
    }
    
    .quick-prompts-buttons {
        flex-direction: column;
    }
    
    .quick-prompt-btn {
        width: 100% !important;
    }
}

/* ========================================
   NOUVELLES FONCTIONNALITÉS UX
   ======================================== */

/* Cacher le bouton "+" par défaut de n8n */
#n8n-chat .chat-header button:first-child,
#n8n-chat [class*="header"] button:first-child {
    display: none !important;
}

/* Désactiver l'effet de focus/outline sur l'input et la zone de texte */
#n8n-chat textarea,
#n8n-chat input[type="text"],
#n8n-chat [class*="chat-input"],
#n8n-chat [class*="input"] textarea,
#n8n-chat [class*="input"] input {
    outline: none !important;
    box-shadow: none !important;
}

#n8n-chat textarea:focus,
#n8n-chat input[type="text"]:focus,
#n8n-chat [class*="chat-input"]:focus,
#n8n-chat [class*="input"] textarea:focus,
#n8n-chat [class*="input"] input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* Suggestions de démarrage (Quick Prompts) */
.quick-prompts {
    padding: 1rem;
    margin: 1rem 0;
    animation: fadeIn 0.4s ease-in;
}

.quick-prompts-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.875rem;
    text-align: center;
}

.quick-prompts-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.quick-prompt-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: oklch(97% 0 0);
    border: 1.5px solid oklch(94% 0 0);
    border-radius: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.quick-prompt-btn:hover {
    background: #3A1593;
    border-color: #3A1593;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(58, 21, 147, 0.2);
}

.quick-prompt-btn:active {
    transform: translateY(0);
}

.quick-prompt-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.quick-prompt-text {
    flex: 1;
    line-height: 1.4;
}

/* Mode sombre pour les suggestions */
#n8n-chat[data-theme="dark"] .quick-prompt-btn {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

#n8n-chat[data-theme="dark"] .quick-prompt-btn:hover {
    background: #4A1DB3;
    border-color: #4A1DB3;
}

#n8n-chat[data-theme="dark"] .quick-prompts-title {
    color: #9ca3af;
}

/* Boutons d'en-tête (Agrandir & Nouveau chat) */
.chat-expand-btn,
.chat-new-btn {
    background: transparent;
    border: none;
    color: white !important;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.25rem;
    flex-shrink: 0;
    opacity: 1 !important;
}

.chat-expand-btn svg,
.chat-new-btn svg {
    opacity: 0.9;
    stroke: white !important;
    fill: none !important;
}

.chat-expand-btn:hover,
.chat-new-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.chat-expand-btn:active,
.chat-new-btn:active {
    transform: scale(0.95);
}

.chat-expand-btn:hover svg,
.chat-new-btn:hover svg {
    opacity: 1;
}

/* Positionner les boutons dans l'en-tête */
#n8n-chat .chat-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

#n8n-chat .chat-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.5rem !important;
}

#n8n-chat .chat-heading h1 {
    margin: 0 !important;
    flex: 1 !important;
}

#n8n-chat .custom-buttons-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
}

/* Réduire la marge du sous-titre */
#n8n-chat .chat-header > p {
    margin: 0 !important;
    padding: 0 !important;
}

/* S'assurer que le titre reste à gauche */
#n8n-chat [class*="header"] > div:first-child {
    flex: 1 !important;
}

/* Mode agrandi */
#n8n-chat .chat-expanded {
    width: 90vw !important;
    height: 90vh !important;
    max-width: 1200px !important;
    max-height: 900px !important;
    animation: expandChat 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes expandChat {
    from {
        width: 440px;
        height: 680px;
    }
    to {
        width: 90vw;
        height: 90vh;
    }
}

/* Adaptation responsive pour mode agrandi */
@media (max-width: 768px) {
    #n8n-chat .chat-expanded {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
}