/* Responsive Design */

/* Tablettes */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .tabs-nav {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    
    .message-user,
    .message-assistant {
        max-width: 90%;
    }
    
    .input-area {
        flex-wrap: wrap;
    }
    
    .message-input {
        order: -1;
        width: 100%;
    }
    
    .modal-content {
        width: 95%;
        padding: var(--spacing-lg);
    }
    
    .rating-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* Mobiles */
@media (max-width: 480px) {
    .login-container {
        padding: var(--spacing-lg);
        margin: var(--spacing-md);
    }
    
    .header-logo h1 {
        font-size: var(--font-size-base);
    }
    
    .tab-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .chat-container {
        padding: var(--spacing-sm);
    }
    
    .messages-area {
        padding: var(--spacing-md);
    }
    
    .btn-primary {
        font-size: var(--font-size-sm);
    }
}