/* Chat Container */
.chat-container {
    position: relative;
    height: calc(100vh - 180px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Background with avatar */
.avatar-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    filter: blur(8px);
    z-index: 0;
}

/* Chat Header */
.chat-header {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #e0e0e0;
}

/* Messages Container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.85);
}

/* Messages List */
.messages-list {
    display: flex;
    flex-direction: column;
}

/* Message Wrapper */
.message-wrapper {
    margin-bottom: 1rem;
    display: flex;
    max-width: 75%;
}

.message-user {
    align-self: flex-end;
    justify-content: flex-end;
}

.message-assistant {
    align-self: flex-start;
}

/* Message Bubble */
.message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.message-bubble:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Styles pour les classes générées par le JavaScript */
.user-bubble {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    color: white !important;
    border-bottom-right-radius: 0.25rem;
    border: none;
    box-shadow: 0 2px 8px rgba(30, 136, 229, 0.15);
}

/* Forcer la couleur blanche pour tout le contenu des bulles utilisateur */
.user-bubble *,
.user-bubble p,
.user-bubble .message-text,
.user-bubble .message-content {
    color: white !important;
}

.assistant-bubble {
    background: linear-gradient(135deg, #f5f7fa, #e9ecef);
    color: #37474f;
    border-bottom-left-radius: 0.25rem;
    border: 1px solid rgba(224, 224, 224, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Maintien de la compatibilité avec l'ancien système */
.message-user .message-bubble {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    color: white !important;
    border-bottom-right-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(30, 136, 229, 0.15);
}

/* Forcer la couleur blanche pour tout le contenu des bulles utilisateur (ancien système) */
.message-user .message-bubble *,
.message-user .message-bubble p,
.message-user .message-bubble .message-text,
.message-user .message-bubble .message-content {
    color: white !important;
}

.message-assistant .message-bubble {
    background: linear-gradient(135deg, #f5f7fa, #e9ecef);
    color: #37474f;
    border-bottom-left-radius: 0.25rem;
    border: 1px solid rgba(224, 224, 224, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Message Text */
.message-text {
    margin-bottom: 0.25rem;
    line-height: 1.5;
    word-wrap: break-word;
}

/* Message Time */
.message-time {
    font-size: 0.7rem;
    opacity: 0.8;
    text-align: right;
    margin-top: 0.25rem;
}

/* Styles pour les timestamps des nouvelles bulles */
.user-bubble .message-time {
    color: rgba(255, 255, 255, 0.85) !important;
}

.assistant-bubble .message-time {
    color: #78909c;
}

/* Maintien de la compatibilité */
.message-user .message-time {
    color: rgba(255, 255, 255, 0.85) !important;
}

.message-assistant .message-time {
    color: #78909c;
}

/* Chat Input Container */
.chat-input {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 0.75rem;
    border-top: 1px solid #e0e0e0;
}

/* Input Field */
#message-input {
    resize: none;
    border-radius: 1.5rem;
    padding: 0.75rem 1rem;
    transition: height 0.2s ease;
    max-height: 120px;
    background-color: #f8f9fa;
}

#message-input:focus {
    background-color: #fff;
    border-color: #1e88e5;
    box-shadow: 0 0 0 0.2rem rgba(30, 136, 229, 0.25);
}

/* Send Button */
#send-button {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Typing Indicator */
.typing-indicator {
    background: linear-gradient(135deg, #f5f7fa, #e9ecef);
    color: #37474f;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    border-bottom-left-radius: 0.25rem;
    border: 1px solid rgba(224, 224, 224, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 75%;
    margin-bottom: 1rem;
}

.typing-dots {
    display: flex;
    align-items: center;
}

.typing-dots span {
    height: 8px;
    width: 8px;
    background: #78909c;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    animation: typingAnimation 1.5s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.3s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.6s;
    margin-right: 0;
}

@keyframes typingAnimation {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 160px);
    }
    
    .message-wrapper {
        max-width: 85%;
    }
    
    #message-input {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .message-wrapper {
        max-width: 90%;
    }
    
    .message-bubble {
        padding: 0.5rem 0.75rem;
    }
    
    .chat-messages {
        padding: 0.5rem;
    }
    
    .chat-input {
        padding: 0.5rem;
    }
}

/* Styles pour le rendu markdown dans les messages de l'assistant */
.message-assistant .message-text p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.message-assistant .message-text p:last-child {
    margin-bottom: 0;
}

.message-assistant .message-text ol,
.message-assistant .message-text ul {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    line-height: 1.6;
}

.message-assistant .message-text ol:last-child,
.message-assistant .message-text ul:last-child {
    margin-bottom: 0;
}

.message-assistant .message-text li {
    margin-bottom: 0.25rem;
}

/* Styles markdown pour les nouvelles bulles assistant */
.assistant-bubble .message-content strong,
.message-assistant .message-text strong {
    font-weight: 600;
    color: #1e88e5;
}

.assistant-bubble .message-content em,
.message-assistant .message-text em {
    font-style: italic;
    color: #455a64;
}

.assistant-bubble .message-content h6,
.message-assistant .message-text h6 {
    color: #1e88e5;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.assistant-bubble .message-content h6:first-child,
.message-assistant .message-text h6:first-child {
    margin-top: 0;
}

.assistant-bubble .message-content code,
.message-assistant .message-text code {
    background-color: rgba(30, 136, 229, 0.1);
    color: #1e88e5;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
}

.assistant-bubble .message-content blockquote,
.message-assistant .message-text blockquote {
    border-left: 3px solid #1e88e5;
    margin: 0.5rem 0;
    padding-left: 1rem;
    font-style: italic;
    color: #455a64;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .chat-header,
    .chat-messages,
    .chat-input {
        background-color: rgba(33, 33, 33, 0.9);
    }
    
    #message-input {
        background-color: #333;
        color: #fff;
        border-color: #444;
    }
    
    /* Gradients adaptés pour le mode sombre */
    .user-bubble {
        background: linear-gradient(135deg, #1e88e5, #005cb2);
        color: white !important;
        box-shadow: 0 2px 8px rgba(30, 136, 229, 0.2);
    }
    
    /* Forcer la couleur blanche en mode sombre */
    .user-bubble *,
    .user-bubble p,
    .user-bubble .message-text,
    .user-bubble .message-content {
        color: white !important;
    }
    
    .assistant-bubble {
        background: linear-gradient(135deg, #2d3748, #4a5568);
        color: #e2e8f0;
        border: 1px solid rgba(113, 128, 150, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Compatibilité ancien système en mode sombre */
    .message-user .message-bubble {
        background: linear-gradient(135deg, #1e88e5, #005cb2);
        color: white !important;
        box-shadow: 0 2px 8px rgba(30, 136, 229, 0.2);
    }
    
    /* Forcer la couleur blanche en mode sombre (ancien système) */
    .message-user .message-bubble *,
    .message-user .message-bubble p,
    .message-user .message-bubble .message-text,
    .message-user .message-bubble .message-content {
        color: white !important;
    }
    
    .message-assistant .message-bubble {
        background: linear-gradient(135deg, #2d3748, #4a5568);
        color: #e2e8f0;
        border: 1px solid rgba(113, 128, 150, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .assistant-bubble .message-time,
    .message-assistant .message-time {
        color: #a0aec0;
    }
    
    /* Styles markdown pour mode sombre */
    .assistant-bubble .message-content strong,
    .message-assistant .message-text strong {
        color: #6ab7ff;
    }
    
    .assistant-bubble .message-content code,
    .message-assistant .message-text code {
        background-color: rgba(106, 183, 255, 0.1);
        color: #6ab7ff;
    }
    
    .assistant-bubble .message-content blockquote,
    .message-assistant .message-text blockquote {
        border-left: 3px solid #6ab7ff;
        color: #cbd5e0;
    }
    
    .typing-indicator {
        background: linear-gradient(135deg, #2d3748, #4a5568);
        color: #e2e8f0;
        border: 1px solid rgba(113, 128, 150, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .typing-dots span {
        background: #a0aec0;
    }
}