<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X AI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
        :root {
            --bg-primary: #000000;
            --bg-secondary: #0a0000;
            --bg-tertiary: #100000;
            --text-primary: #ffffff;
            --text-secondary: #b0a0a0;
            --accent-primary: #8A2BE2;
            --accent-secondary: #9400D3;
            --glass-bg: rgba(0, 0, 20, 0.7);
            --glass-border: rgba(138, 43, 226, 0.2);
            --glass-highlight: rgba(60, 0, 60, 0.5);
            --main-color: #8A2BE2;
            --main-color-rgb: 138, 43, 226;
            --red-accent: #8A2BE2;
            --red-glow: 0 0 15px rgba(138, 43, 226, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        body.no-right-click {
            cursor: default;
        }

        body.no-right-click * {
            cursor: default;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 20%, rgba(38, 38, 220, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(38, 38, 220, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(38, 38, 220, 0.025) 0%, transparent 100%);
            z-index: -2;
        }

        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(110, 110, 150, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(110, 110, 150, 0.03) 1px, transparent 1px);
            z-index: -1;
        }

        .app-container {
            display: flex;
            width: 100%;
            height: 100vh;
            max-height: 100vh;
            overflow: hidden;
        }

        .sidebar {
            width: 280px;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-right: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
            z-index: 100;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        }

        .sidebar-header {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--glass-border);
            background: linear-gradient(to right, rgba(70, 48, 255, 0.1), transparent);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 20px;
            color: var(--text-primary);
            text-shadow: 0 0 10px rgba(70, 48, 255, 0.5);
        }

        .new-chat-btn {
            margin: 15px;
            padding: 12px 20px;
            border-radius: 8px;
            background: rgba(0, 0, 30, 0.8);
            color: #fff;
            border: 1px solid var(--accent-primary);
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(var(--main-color-rgb), 0.2);
        }

        .new-chat-btn:hover {
            background: rgba(0, 0, 50, 0.9);
            border-color: var(--accent-primary);
            transform: translateY(-2px);
            box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.4);
        }

        .conversations-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .conversation-item {
            padding: 12px 15px;
            margin-bottom: 8px;
            border-radius: 8px;
            background: rgba(0, 0, 20, 0.4);
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid rgba(var(--main-color-rgb), 0.15);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .conversation-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .info-conv, .delete-conv {
            color: var(--text-secondary);
            opacity: 0.6;
            transition: all 0.2s ease;
            cursor: pointer;
            padding: 4px;
        }

        .conversation-item:hover .info-conv:hover {
            opacity: 1;
            color: var(--accent-primary);
        }

        .conversation-item:hover .delete-conv:hover {
            opacity: 1;
            color: var(--accent-primary);
        }

        .conversation-item.active {
            background: rgba(0, 4, 40, 0.7);
            border: 2px solid var(--accent-primary);
            box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.3);
        }

        .conversation-info {
            flex: 1;
            overflow: hidden;
        }

        .conversation-model {
            font-size: 12px;
            color: var(--text-secondary);
            opacity: 0.7;
            margin-top: 2px;
        }

        .conversation-title {
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
            cursor: text;
        }

        .conversation-title:hover {
            background: rgba(var(--main-color-rgb), 0.1);
            border-radius: 4px;
            padding: 2px 4px;
        }

        .conversation-title-input {
            background: transparent;
            border: 1px solid var(--accent-primary);
            border-radius: 4px;
            color: #fff;
            font-size: inherit;
            font-family: inherit;
            padding: 2px 4px;
            width: 100%;
            max-width: 170px;
        }

        .info-popup {
            position: fixed;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            padding: 20px;
            min-width: 300px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            z-index: 1100;
            display: none;
        }

        .info-popup.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        .info-popup h3 {
            margin: 0 0 15px 0;
            color: var(--text-primary);
            font-size: 16px;
            border-bottom: 1px solid var(--glass-border);
            padding-bottom: 10px;
        }

        .info-item {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }

        .info-label {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .info-value {
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
        }

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

        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            height: 100vh;
        }

        .chat-container {
            margin: 0;
            height: 100%;
            border-radius: 0;
            display: flex;
            flex-direction: column;
        }

        .chat-header {
            padding: 20px;
            border-bottom: 1px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(to right, rgba(70, 48, 255, 0.1), transparent);
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .shop-btn {
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 20px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .shop-btn:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
            color: #FFD700;
        }

        .header-left select.model-selector {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: rgba(0, 0, 30, 0.8);
            border: 1px solid var(--accent-primary);
            color: var(--text-primary);
            padding: 10px 35px 10px 15px;
            border-radius: 8px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 250px;
            max-width: 300px;
            position: relative;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A2BE2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 20px;
        }

        .header-left select.model-selector:focus {
            outline: none;
            border-color: var(--accent-secondary);
            box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.4);
        }

        .header-left select.model-selector optgroup {
            font-size: 14px;
            font-weight: 700;
            color: var(--accent-primary);
            background: rgba(0, 0, 40, 0.95);
            padding: 10px;
            margin: 5px 0;
            border-bottom: 2px solid var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .header-left select.model-selector option {
            font-size: 13px;
            background: rgba(0, 0, 30, 0.95);
            color: var(--text-primary);
            padding: 12px 15px;
            margin: 4px 0;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .header-left select.model-selector option[data-type="free"] {
            color: #4CAF50;
            border-left: 3px solid #4CAF50;
            background: rgba(76, 175, 80, 0.1);
        }

        .header-left select.model-selector option[data-type="paid"] {
            color: #FFD700;
            border-left: 3px solid #FFD700;
            background: rgba(255, 215, 0, 0.1);
        }

        .header-left select.model-selector option[data-type="paid"].disabled {
            color: #666;
            border-left: 3px solid #666;
            background: rgba(102, 102, 102, 0.1);
            cursor: not-allowed;
            opacity: 0.7;
        }

        .header-left select.model-selector optgroup.paid-group.disabled {
            color: #666;
            border-bottom: 2px solid #666;
        }

        .chat-header h1 {
            font-size: 24px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chat-header h1 i {
            color: var(--accent-primary);
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            margin-bottom: 0;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-primary) rgba(0, 0, 20, 0.2);
        }

        /* Style pour Webkit (Chrome, Safari, etc.) */
        .chat-messages::-webkit-scrollbar {
            width: 8px;
            background: transparent;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: rgba(0, 0, 20, 0.2);
            border-radius: 4px;
            margin: 4px;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: var(--accent-primary);
            border-radius: 4px;
            border: 2px solid transparent;
            background-clip: padding-box;
            transition: all 0.3s ease;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: var(--accent-secondary);
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        .chat-messages::-webkit-scrollbar-corner {
            background: transparent;
        }

        .message {
            display: flex;
            margin-bottom: 20px;
            max-width: 80%;
            padding: 15px;
            border-radius: 12px;
            animation: message-fade-in 0.3s ease-out forwards;
        }

        @keyframes message-fade-in {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message.user {
            background: rgba(0, 0, 193, 0.15);
            border: 1px solid rgba(var(--main-color-rgb), 0.2);
            margin-left: auto;
            flex-direction: row-reverse;
        }

        .message.ai {
            background: rgba(20, 20, 35, 0.4);
            border: 1px solid var(--glass-border);
            margin-right: auto;
        }

        .message .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
            border: 2px solid var(--accent-primary);
        }

        .message .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .message.user .avatar {
            background: none;
            border-color: var(--accent-primary);
        }

        .message.ai .avatar {
            background: none;
            border-color: var(--accent-secondary);
        }

        .message-content {
            flex: 1;
            line-height: 1.5;
        }

        .message-content .highlight-yellow {
            background-color: rgba(255, 255, 0, 0.3);
            padding: 0 4px;
            border-radius: 3px;
        }

        .message-content .highlight-red {
            background-color: rgba(255, 0, 0, 0.3);
            padding: 0 4px;
            border-radius: 3px;
        }

        .message-content .highlight-blue {
            background-color: rgba(0, 0, 255, 0.2);
            padding: 0 4px;
            border-radius: 3px;
        }

        .message-content .highlight-green {
            background-color: rgba(0, 255, 0, 0.2);
            padding: 0 4px;
            border-radius: 3px;
        }

        .message-content .underline {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-decoration-color: var(--accent-primary);
        }

        .message-content .strikethrough {
            text-decoration: line-through;
            text-decoration-color: var(--accent-primary);
        }

        .message-content .bold {
            font-weight: 700;
        }

        .message-content .italic {
            font-style: italic;
        }

        .message-content .font-mono {
            font-family: 'JetBrains Mono', monospace;
        }

        .message-content .font-serif {
            font-family: 'Times New Roman', serif;
        }

        .message-content .font-cursive {
            font-family: 'Brush Script MT', cursive;
        }

        .message-content .font-fantasy {
            font-family: 'Copperplate', fantasy;
        }

        .message-content .gradient-text {
            background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .message-content .glow-text {
            text-shadow: 0 0 10px var(--accent-primary);
        }

        .message-content .box-text {
            border: 1px solid var(--accent-primary);
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(var(--main-color-rgb), 0.1);
        }

        .message-content .wave-text {
            animation: wave 2s infinite;
            display: inline-block;
        }

        @keyframes wave {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .input-area {
            padding: 20px;
            border-top: 1px solid var(--glass-border);
            background: var(--glass-bg);
            position: sticky;
            bottom: 0;
            width: 100%;
            backdrop-filter: blur(10px);
        }

        .input-container {
            display: flex;
            gap: 10px;
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid var(--accent-primary);
            border-radius: 15px;
            padding: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            align-items: center;
            position: relative;
        }

        .char-counter {
            position: absolute;
            top: -25px;
            right: 10px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .char-counter.near-limit {
            color: #FFD700;
        }

        .char-counter.at-limit {
            color: #ff4444;
        }

        .message-input {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            padding: 12px 15px;
            outline: none;
            resize: none;
            min-height: 24px;
            max-height: 150px;
            overflow-y: auto;
        }

        .message-input::placeholder {
            color: var(--text-secondary);
        }

        .send-btn {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(var(--main-color-rgb), 0.3);
            margin-right: 5px;
            position: relative;
            overflow: hidden;
        }

        .send-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .send-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 15px rgba(var(--main-color-rgb), 0.5);
        }

        .send-btn:hover::before {
            opacity: 1;
        }

        .send-btn:active {
            transform: translateY(1px) scale(0.95);
        }

        .send-btn i {
            font-size: 1.2em;
            transition: transform 0.3s ease;
        }

        .send-btn:hover i {
            transform: translateX(2px);
        }

        .loading {
            display: none;
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 30, 0.8);
            color: var(--text-primary);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            border: 1px solid var(--accent-primary);
            box-shadow: 0 0 10px rgba(var(--main-color-rgb), 0.3);
            z-index: 1000;
        }

        .loading-dots {
            display: inline-block;
            width: 20px;
            text-align: left;
        }

        .loading-dots::after {
            content: '';
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { content: '.'; }
            33% { content: '..'; }
            66% { content: '...'; }
            100% { content: '...'; }
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            opacity: 0.6;
        }

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--accent-primary);
            border-radius: 50%;
            animation: particleFloat 20s infinite linear;
            opacity: 0.4;
            box-shadow: 0 0 3px 1px rgba(var(--main-color-rgb), 0.5);
        }

        @keyframes particleFloat {
            0% {
                transform: translateY(0) translateX(0);
            }
            100% {
                transform: translateY(-100vh) translateX(100vw);
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: -280px;
                height: 100%;
                opacity: 0;
            }

            .sidebar.active {
                left: 0;
                opacity: 1;
            }

            .menu-toggle {
                display: block;
            }
        }

        .settings-btn {
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 20px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .settings-btn:hover {
            background: rgba(0, 0, 255, 0.1);
            transform: rotate(45deg);
        }

        .settings-menu {
            position: absolute;
            top: 60px;
            right: 20px;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            padding: 15px;
            min-width: 250px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none;
        }

        .settings-menu.active {
            display: block;
            animation: slideIn 0.3s ease;
        }

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

        .settings-menu h3 {
            margin: 0 0 15px 0;
            color: var(--text-primary);
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--glass-border);
            padding-bottom: 10px;
        }

        .settings-option {
            margin-bottom: 15px;
        }

        .settings-option label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 30, 0.8);
            transition: .4s;
            border-radius: 24px;
            border: 1px solid var(--accent-primary);
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 3px;
            background-color: var(--accent-primary);
            transition: .4s;
            border-radius: 50%;
        }

        .toggle-switch input:checked + .toggle-slider {
            background-color: rgba(var(--main-color-rgb), 0.2);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }

        .edit-title {
            color: var(--text-secondary);
            opacity: 0.6;
            margin-left: 8px;
            cursor: pointer;
            font-size: 12px;
        }

        .edit-title:hover {
            color: var(--accent-primary);
            opacity: 1;
        }

        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            padding: 20px;
            min-width: 300px;
            box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.2);
        }

        .popup h3 {
            margin: 0 0 15px 0;
            color: var(--text-primary);
        }

        .popup input {
            width: 100%;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--accent-primary);
            border-radius: 6px;
            color: var(--text-primary);
            margin-bottom: 15px;
        }

        .popup-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .popup-button {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 500;
        }

        .popup-button.confirm {
            background: var(--accent-primary);
            color: white;
        }

        .popup-button.cancel {
            background: rgba(0, 0, 0, 0.3);
            color: var(--text-secondary);
            border: 1px solid var(--glass-border);
        }

        .notification {
            position: fixed;
            bottom: 170px;
            left: 20px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            padding: 12px 20px;
            color: var(--text-primary);
            box-shadow: 0 0 15px rgba(var(--main-color-rgb), 0.2);
            z-index: 1000;
            display: none;
            animation: slideIn 0.3s ease;
            max-width: 280px;
            width: calc(280px - 40px);
        }

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

        @media (max-width: 768px) {
            .notification {
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - 40px);
                max-width: 280px;
            }
        }

        .avatar-section {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--glass-border);
        }

        .avatar-preview {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 10px 0;
            object-fit: cover;
            border: 2px solid var(--accent-primary);
        }

        .avatar-upload {
            display: none;
        }

        .avatar-upload-btn {
            background: rgba(var(--main-color-rgb), 0.2);
            border: 1px solid var(--accent-primary);
            color: var(--text-primary);
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            display: inline-block;
            margin-top: 10px;
        }

        .message.ai .avatar {
            background: none;
            overflow: hidden;
        }

        .message.ai .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .color-picker-section {
            display: none;
        }

        .color-picker {
            display: none;
        }

        .message-content pre {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            overflow-x: auto;
            border: 1px solid var(--accent-primary);
            white-space: pre-wrap;
            word-wrap: break-word;
            max-width: 100%;
            position: relative;
        }

        .message-content pre .copy-button {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(138, 43, 226, 0.2);
            border: 1px solid var(--accent-primary);
            color: var(--text-primary);
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .message-content pre:hover .copy-button {
            opacity: 1;
        }

        .message-content pre .copy-button:hover {
            background: rgba(138, 43, 226, 0.4);
            transform: translateY(-1px);
        }

        .message-content pre .copy-button.copied {
            background: rgba(76, 175, 80, 0.2);
            border-color: #4CAF50;
            color: #4CAF50;
        }

        .message-content pre .copy-button i {
            font-size: 12px;
        }

        .message-content pre::-webkit-scrollbar {
            height: 6px;
            width: 6px;
            background: transparent;
        }

        .message-content pre::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
        }

        .message-content pre::-webkit-scrollbar-thumb {
            background: var(--accent-primary);
            border-radius: 3px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        .message-content pre::-webkit-scrollbar-thumb:hover {
            background: var(--accent-secondary);
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        .message-content pre::-webkit-scrollbar-corner {
            background: transparent;
        }

        .message-content code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            line-height: 1.4;
            tab-size: 4;
        }

        .message-content p code {
            background: rgba(var(--main-color-rgb), 0.2);
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--text-primary);
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .ai-mode-selector {
            margin-bottom: 10px;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid transparent;
            max-width: 150px;
            width: auto;
        }

        .ai-mode-selector:hover {
            background: rgba(var(--main-color-rgb), 0.1);
            border-color: var(--accent-primary);
        }

        .ai-mode-selector.active {
            background: rgba(var(--main-color-rgb), 0.15);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        .ai-mode-selector .mode-icon {
            font-size: 12px;
        }

        .input-area {
            padding: 20px;
            border-top: 1px solid var(--glass-border);
            background: var(--glass-bg);
            position: sticky;
            bottom: 0;
            width: 100%;
            backdrop-filter: blur(10px);
        }

        .input-container-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .modes-container {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        #webSearchMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #4CAF50;
        }

        #webSearchMode:hover {
            background: rgba(76, 175, 80, 0.1);
            border-color: #4CAF50;
        }

        #webSearchMode.active {
            background: rgba(76, 175, 80, 0.15);
            border-color: #4CAF50;
            color: #4CAF50;
        }

        #deepThinkingMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #9C27B0;
        }

        #deepThinkingMode:hover {
            background: rgba(156, 39, 176, 0.1);
            border-color: #9C27B0;
        }

        #deepThinkingMode.active {
            background: rgba(156, 39, 176, 0.15);
            border-color: #9C27B0;
            color: #9C27B0;
        }

        #unlockedMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #ff0000;
        }

        #unlockedMode:hover {
            background: rgba(255, 0, 0, 0.1);
            border-color: #ff0000;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
        }

        #unlockedMode.active {
            background: rgba(255, 0, 0, 0.15);
            border-color: #ff0000;
            color: #ff0000;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
        }

        #unlockedMode .mode-icon {
            color: #ff0000;
        }

        #roleplayMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: var(--accent-primary);
        }

        #roleplayMode:hover {
            background: rgba(var(--main-color-rgb), 0.1);
            border-color: var(--accent-primary);
        }

        #roleplayMode.active {
            background: rgba(var(--main-color-rgb), 0.15);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        #roleplayMode .mode-icon {
            color: var(--accent-primary);
        }

        #synthesisMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #ff0000;
        }

        #synthesisMode:hover {
            background: rgba(255, 0, 0, 0.1);
            border-color: #ff0000;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
        }

        #synthesisMode.active {
            background: rgba(255, 0, 0, 0.15);
            border-color: #ff0000;
            color: #ff0000;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
        }

        #synthesisMode .mode-icon {
            color: #ff0000;
        }

        .account-section {
            padding: 15px;
            border-top: 1px solid var(--glass-border);
            background: rgba(0, 0, 20, 0.4);
            margin-top: auto;
        }

        .account-info {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .account-header {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-primary);
            font-weight: 500;
        }

        .account-header i {
            font-size: 24px;
            color: var(--accent-primary);
        }

        .account-name {
            font-size: 16px;
        }

        .account-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .account-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .account-item i {
            color: var(--accent-primary);
            font-size: 14px;
        }

        .logout-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 15px;
            padding: 8px 12px;
            background: rgba(255, 0, 0, 0.1);
            border: 1px solid rgba(255, 0, 0, 0.2);
            border-radius: 6px;
            color: #ff4444;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            background: rgba(255, 0, 0, 0.2);
            border-color: rgba(255, 0, 0, 0.3);
            transform: translateY(-1px);
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .conversations-list {
            flex: 1;
            overflow-y: auto;
        }

        .settings-menu .prompt-btn {
            width: 100%;
            padding: 10px;
            background: rgba(138, 43, 226, 0.1);
            border: 1px solid var(--accent-primary);
            border-radius: 6px;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
            margin-top: 15px;
        }

        .settings-menu .prompt-btn:hover {
            background: rgba(138, 43, 226, 0.2);
            transform: translateY(-1px);
        }

        .prompt-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            padding: 20px;
            width: 90%;
            max-width: 600px;
            z-index: 1100;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

        .prompt-popup h3 {
            margin: 0 0 15px 0;
            color: var(--text-primary);
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--glass-border);
            padding-bottom: 10px;
        }

        .prompt-popup textarea {
            width: 100%;
            height: 200px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--glass-border);
            border-radius: 6px;
            color: var(--text-primary);
            padding: 12px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            resize: vertical;
            margin-bottom: 15px;
        }

        .prompt-popup textarea:focus {
            outline: none;
            border-color: var(--accent-primary);
        }

        .prompt-popup .prompt-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .prompt-popup button {
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .prompt-popup .save-prompt {
            background: var(--accent-primary);
            color: white;
            border: none;
        }

        .prompt-popup .save-prompt:hover {
            background: var(--accent-secondary);
            transform: translateY(-1px);
        }

        .prompt-popup .cancel-prompt {
            background: rgba(0, 0, 0, 0.3);
            color: var(--text-secondary);
            border: 1px solid var(--glass-border);
        }

        .prompt-popup .cancel-prompt:hover {
            background: rgba(0, 0, 0, 0.4);
        }

        .prompt-popup .prompt-list {
            margin-bottom: 15px;
            max-height: 200px;
            overflow-y: auto;
        }

        .prompt-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--glass-border);
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .prompt-item .prompt-name {
            color: var(--text-primary);
            font-weight: 500;
        }

        .prompt-item .prompt-actions {
            display: flex;
            gap: 8px;
        }

        .prompt-item button {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .prompt-item button:hover {
            color: var(--accent-primary);
            background: rgba(138, 43, 226, 0.1);
        }

        #roleplayMode .mode-icon {
            color: var(--accent-primary);
        }

        #codeAssistantMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #2196F3;
        }

        #codeAssistantMode:hover {
            background: rgba(33, 150, 243, 0.1);
            border-color: #2196F3;
        }

        #codeAssistantMode.active {
            background: rgba(33, 150, 243, 0.15);
            border-color: #2196F3;
            color: #2196F3;
        }

        #codeAssistantMode .mode-icon {
            color: #2196F3;
        }

        #creativeMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #E91E63;
        }

        #creativeMode:hover {
            background: rgba(233, 30, 99, 0.1);
            border-color: #E91E63;
        }

        #creativeMode.active {
            background: rgba(233, 30, 99, 0.15);
            border-color: #E91E63;
            color: #E91E63;
        }

        #creativeMode .mode-icon {
            color: #E91E63;
        }

        #analyticalMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #00BCD4;
        }

        #analyticalMode:hover {
            background: rgba(0, 188, 212, 0.1);
            border-color: #00BCD4;
        }

        #analyticalMode.active {
            background: rgba(0, 188, 212, 0.15);
            border-color: #00BCD4;
            color: #00BCD4;
        }

        #analyticalMode .mode-icon {
            color: #00BCD4;
        }

        #teacherMode {
            background: rgba(0, 0, 0, 0.2);
            border-color: #FFC107;
        }

        #teacherMode:hover {
            background: rgba(255, 193, 7, 0.1);
            border-color: #FFC107;
        }

        #teacherMode.active {
            background: rgba(255, 193, 7, 0.15);
            border-color: #FFC107;
            color: #FFC107;
        }

        #teacherMode .mode-icon {
            color: #FFC107;
        }

        /* Styles pour les tableaux */
        .message-content table {
            border-collapse: collapse;
            width: 100%;
            margin: 15px 0;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            overflow: hidden;
        }

        .message-content table.styled-table {
            border: 1px solid var(--accent-primary);
            box-shadow: 0 0 10px rgba(var(--main-color-rgb), 0.2);
        }

        .message-content th {
            background: rgba(var(--main-color-rgb), 0.2);
            color: var(--text-primary);
            padding: 12px;
            text-align: left;
            font-weight: 600;
            border-bottom: 2px solid var(--accent-primary);
        }

        .message-content td {
            padding: 10px;
            border-bottom: 1px solid rgba(var(--main-color-rgb), 0.2);
            color: var(--text-secondary);
        }

        .message-content tr:hover {
            background: rgba(var(--main-color-rgb), 0.1);
        }

        /* Styles pour les diagrammes ASCII */
        .message-content pre.ascii-art {
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.2;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--accent-primary);
            padding: 15px;
            white-space: pre;
        }

        /* Styles pour les citations */
        .message-content blockquote {
            border-left: 3px solid var(--accent-primary);
            margin: 10px 0;
            padding: 10px 20px;
            background: rgba(var(--main-color-rgb), 0.1);
            border-radius: 0 8px 8px 0;
        }

        .message-content blockquote > blockquote {
            border-left-color: var(--accent-secondary);
            margin-left: 10px;
        }

        .message-content blockquote > blockquote > blockquote {
            border-left-color: #E91E63;
        }

        /* Styles pour les blocs d'information */
        .message-content .info-block {
            margin: 10px 0;
            padding: 12px 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--accent-primary);
        }

        .message-content .info-block.note {
            border-color: #2196F3;
            background: rgba(33, 150, 243, 0.1);
        }

        .message-content .info-block.warning {
            border-color: #FFC107;
            background: rgba(255, 193, 7, 0.1);
        }

        .message-content .info-block.tip {
            border-color: #4CAF50;
            background: rgba(76, 175, 80, 0.1);
        }

        .message-content .info-block.detail {
            border-color: #9C27B0;
            background: rgba(156, 39, 176, 0.1);
        }

        .message-content .info-block.stat {
            border-color: #00BCD4;
            background: rgba(0, 188, 212, 0.1);
        }

        /* Styles pour les équations mathématiques */
        .message-content .math-block {
            background: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border: 1px solid var(--accent-primary);
            overflow-x: auto;
        }

        .message-content .math-inline {
            padding: 2px 5px;
            background: rgba(var(--main-color-rgb), 0.1);
            border-radius: 4px;
        }

        /* Styles pour les listes structurées */
        .message-content ul {
            list-style-type: none;
            padding-left: 20px;
        }

        .message-content ul li {
            position: relative;
            padding-left: 15px;
            margin: 5px 0;
        }

        .message-content ul li:before {
            content: "•";
            color: var(--accent-primary);
            position: absolute;
            left: -10px;
        }

        .message-content ul ul li:before {
            content: "◦";
            color: var(--accent-secondary);
        }

        .message-content ul ul ul li:before {
            content: "▪";
            color: #E91E63;
        }

        /* Styles pour les graphiques */
        .message-content .chart-container {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--accent-primary);
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            position: relative;
            box-shadow: 0 0 15px rgba(var(--main-color-rgb), 0.2);
        }

        .message-content .chart-container canvas {
            max-width: 100%;
            height: 100%;
        }

        /* Style pour le conteneur de graphique en mode sombre */
        .message-content .chart-container {
            --chart-background: rgba(0, 0, 0, 0.2);
            --chart-grid-color: rgba(255, 255, 255, 0.1);
            --chart-text-color: var(--text-secondary);
        }

        /* Personnalisation des éléments Chart.js */
        .message-content .chart-container .chartjs-tooltip {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 4px;
            color: var(--text-primary);
            padding: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            font-size: 14px;
        }

        .message-content .chart-container .chartjs-title {
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 600;
            padding-bottom: 10px;
        }

        .message-content .chart-container .chartjs-legend {
            padding: 10px 0;
            color: var(--text-secondary);
        }

        /* Animation pour les graphiques */
        @keyframes chartFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-content .chart-container {
            animation: chartFadeIn 0.5s ease-out forwards;
        }
    
    <script>
        // Palettes de couleurs prédéfinies pour les graphiques
        const chartPalettes = {
            default: ['#8A2BE2', '#9400D3', '#E91E63', '#2196F3', '#00BCD4', '#4CAF50', '#FFC107', '#FF5722'],
            cool: ['#4B0082', '#0000FF', '#00FFFF', '#00FF00', '#FFFF00', '#FF7F00', '#FF0000'],
            neon: ['#FF1493', '#00FF00', '#00FFFF', '#FF00FF', '#FFFF00', '#FF4500', '#7FFFD4'],
            pastel: ['#FFB3BA', '#BAFFC9', '#BAE1FF', '#FFFFBA', '#FFB3FF', '#B3FFF9', '#FFC9BA'],
            dark: ['#1A237E', '#311B92', '#4A148C', '#880E4F', '#3E2723', '#1B5E20', '#FF6F00'],
            vibrant: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FF8000'],
            earth: ['#795548', '#8D6E63', '#A1887F', '#90A4AE', '#78909C', '#546E7A', '#616161']
        };

        // Configuration globale de Chart.js
        Chart.defaults.color = '#b0a0a0';
        Chart.defaults.borderColor = 'rgba(138, 43, 226, 0.1)';
        Chart.defaults.backgroundColor = 'rgba(138, 43, 226, 0.2)';
        Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(0, 0, 20, 0.8)';
        Chart.defaults.plugins.tooltip.titleColor = '#ffffff';
        Chart.defaults.plugins.tooltip.bodyColor = '#ffffff';
        Chart.defaults.plugins.tooltip.borderColor = 'rgba(138, 43, 226, 0.2)';
        Chart.defaults.plugins.tooltip.borderWidth = 1;
        Chart.defaults.plugins.legend.labels.color = '#b0a0a0';

        // Fonction utilitaire pour obtenir une palette de couleurs
        function getChartColors(paletteName = 'default', count = 8) {
            const palette = chartPalettes[paletteName] || chartPalettes.default;
            const colors = [];
            for (let i = 0; i < count; i++) {
                colors.push(palette[i % palette.length]);
            }
            return colors;
        }

        // Fonction pour générer des couleurs avec opacité
        function generateColors(baseColor, count = 1, alpha = 1) {
            const colors = [];
            for (let i = 0; i < count; i++) {
                const color = baseColor.startsWith('#') ? 
                    hexToRgba(baseColor, alpha) : 
                    baseColor.replace(')', `, ${alpha})`);
                colors.push(color);
            }
            return colors;
        }

        // Fonction pour convertir hex en rgba
        function hexToRgba(hex, alpha = 1) {
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }
    </script>
</head>
<body>
    <div class="grid-bg"></div>
    <div class="particles" id="particles"></div>
    
    <div class="app-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-robot"></i>
                    <span>X AI</span>
                </div>
            </div>
            
            <button class="new-chat-btn" onclick="createNewConversation()">
                <i class="fas fa-plus"></i>
                Nouvelle conversation
            </button>
            
            <div class="conversations-list" id="conversationsList">
            </div>
            
            <div class="account-section">
                <div class="account-info">
                    <div class="account-header">
                        <i class="fas fa-user-circle"></i>
                        <span class="account-name">{{ session.username }}</span>
                    </div>
                    <div class="account-details">
                        <div class="account-item">
                            <i class="fas fa-crown"></i>
                            <span id="subscription-type">{{ session.subscription|title }}</span>
                        </div>
                        <div class="account-item" id="requests-counter" {% if session.subscription != 'trial' %}style="display: none;"{% endif %}>
                            <i class="fas fa-star"></i>
                            <span id="requests-left">{{ session.paid_requests_left }} requêtes payantes restantes</span>
                        </div>
                    </div>
                </div>
                <a href="/logout" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    Déconnexion
                </a>
            </div>
        </div>
        
        <div class="main-content">
            <div class="chat-container">
                <div class="chat-header">
                    <div class="header-left">
                        <h1>
                            <a href="/" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-robot"></i>
                                <span>X AI</span>
                            </a>
                            , welcome back {{ session.username }}
                        </h1>
                        <select class="model-selector" id="modelSelector">
                        </select>
                    </div>
                    <div class="header-right">
                        <a href="https://x-ai.mysellauth.com" target="_blank" class="shop-btn" title="Boutique">
                            <i class="fas fa-shopping-cart"></i>
                        </a>
                        <button class="settings-btn" id="settingsBtn">
                            <i class="fas fa-cog"></i>
                        </button>
                    </div>
                </div>
                
                <div class="chat-messages" id="chat-messages">
                </div>
                
                <div class="loading" id="loading">
                    L'IA réfléchit<span class="loading-dots"></span>
                </div>
                
                <div class="input-area">
                    <div class="input-container-wrapper">
                        <div class="modes-container">
                            <div class="ai-mode-selector" id="unlockedMode">
                                <i class="fas fa-unlock-alt mode-icon"></i>
                                Mode Unlocked
                            </div>
                            <div class="ai-mode-selector" id="webSearchMode">
                                <i class="fas fa-globe mode-icon"></i>
                                Web Search
                            </div>
                            <div class="ai-mode-selector" id="deepThinkingMode">
                                <i class="fas fa-brain mode-icon"></i>
                                Approfondir
                            </div>
                            <div class="ai-mode-selector" id="roleplayMode">
                                <i class="fas fa-theater-masks mode-icon"></i>
                                Roleplay
                            </div>
                            <div class="ai-mode-selector" id="codeAssistantMode">
                                <i class="fas fa-code mode-icon"></i>
                                Code Assistant
                            </div>
                            <div class="ai-mode-selector" id="creativeMode">
                                <i class="fas fa-paint-brush mode-icon"></i>
                                Creative
                            </div>
                            <div class="ai-mode-selector" id="analyticalMode">
                                <i class="fas fa-chart-line mode-icon"></i>
                                Analytical
                            </div>
                            <div class="ai-mode-selector" id="teacherMode">
                                <i class="fas fa-chalkboard-teacher mode-icon"></i>
                                Teacher
                            </div>
                            <div class="ai-mode-selector" id="synthesisMode">
                                <i class="fas fa-compress-arrows-alt mode-icon"></i>
                                Synthesis
                            </div>
                        </div>
                        <div class="input-container">
                            <textarea class="message-input" id="messageInput" placeholder="Envoyez un message..." rows="1"></textarea>
                            <button class="send-btn" id="sendBtn">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="settings-menu" id="settingsMenu">
                <h3><i class="fas fa-cog"></i> Paramètres</h3>
                <div class="settings-option">
                    <label>
                        Réponse en direct
                        <div class="toggle-switch">
                            <input type="checkbox" id="streamingToggle">
                            <span class="toggle-slider"></span>
                        </div>
                    </label>
                </div>
                <div class="settings-option">
                    <label>
                        Mode Contexte
                        <div class="toggle-switch">
                            <input type="checkbox" id="contextToggle">
                            <span class="toggle-slider"></span>
                        </div>
                    </label>
                </div>
                <button class="prompt-btn" id="promptBtn">
                    <i class="fas fa-magic"></i>
                    Gérer les prompts personnalisés
                </button>
            </div>

            <div class="prompt-popup" id="promptPopup">
                <h3><i class="fas fa-magic"></i> Prompts personnalisés</h3>
                <div class="prompt-list" id="promptList">
                    <!-- Les prompts seront ajoutés ici dynamiquement -->
                </div>
                <textarea id="promptInput" placeholder="Entrez votre prompt personnalisé ici..."></textarea>
                <div class="prompt-actions">
                    <button class="cancel-prompt" id="cancelPrompt">Annuler</button>
                    <button class="save-prompt" id="savePrompt">Sauvegarder</button>
                </div>
            </div>
        </div>
    </div>

    <div class="popup-overlay" id="renamePopup">
        <div class="popup">
            <h3>Renommer la conversation</h3>
            <input type="text" id="newTitleInput" placeholder="Nouveau titre">
            <div class="popup-buttons">
                <button class="popup-button cancel" id="cancelRename">Annuler</button>
                <button class="popup-button confirm" id="confirmRename">Renommer</button>
            </div>
        </div>
    </div>

    <div class="notification" id="notification"></div>

    <div class="info-popup" id="infoPopup">
        <h3>Informations sur la conversation</h3>
        <div class="info-content">
        </div>
    </div>

    <script>
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            return false;
        });

        document.addEventListener('selectstart', function(e) {
            if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
                e.preventDefault();
            }
        });

        let currentConversationId = null;
        let currentModel = 'Mixtral 8x7B';                 
        let isStreaming = false;
        let isUnlocked = false;
        let isWebSearch = false;
        let isDeepThinking = false;
        let isRoleplay = false;
        let isCodeAssistant = false;
        let isCreative = false;
        let isAnalytical = false;
        let isTeacher = false;
        let isSynthesis = false;
        let contextEnabled = getCookie('context_enabled') === 'true';
        let conversations = [];
        let maxMessageLength = 500; // Valeur par défaut pour les utilisateurs gratuits

        function setCookie(name, value, days = 365) {
            const d = new Date();
            d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
            const expires = "expires=" + d.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }

        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
            return null;
        }

        function loadSettings() {
            const streamingSetting = getCookie('streaming');
            const unlockedSetting = getCookie('unlocked_mode');
            const contextSetting = getCookie('context_enabled');
            const webSearchSetting = getCookie('web_search_mode');
            const deepThinkingSetting = getCookie('deep_thinking_mode');
            const roleplaySetting = getCookie('roleplay_mode');
            const codeAssistantSetting = getCookie('code_assistant_mode');
            const creativeSetting = getCookie('creative_mode');
            const analyticalSetting = getCookie('analytical_mode');
            const teacherSetting = getCookie('teacher_mode');
            const synthesisSetting = getCookie('synthesis_mode');
            
            isStreaming = streamingSetting === 'true';
            document.getElementById('streamingToggle').checked = isStreaming;
            
            isUnlocked = unlockedSetting === 'true';
            if (isUnlocked) {
                document.getElementById('unlockedMode').classList.add('active');
            }

            isWebSearch = webSearchSetting === 'true';
            if (isWebSearch) {
                document.getElementById('webSearchMode').classList.add('active');
            }

            isDeepThinking = deepThinkingSetting === 'true';
            if (isDeepThinking) {
                document.getElementById('deepThinkingMode').classList.add('active');
            }

            isRoleplay = roleplaySetting === 'true';
            if (isRoleplay) {
                document.getElementById('roleplayMode').classList.add('active');
            }

            isCodeAssistant = codeAssistantSetting === 'true';
            if (isCodeAssistant) {
                document.getElementById('codeAssistantMode').classList.add('active');
            }

            isCreative = creativeSetting === 'true';
            if (isCreative) {
                document.getElementById('creativeMode').classList.add('active');
            }

            isAnalytical = analyticalSetting === 'true';
            if (isAnalytical) {
                document.getElementById('analyticalMode').classList.add('active');
            }

            isTeacher = teacherSetting === 'true';
            if (isTeacher) {
                document.getElementById('teacherMode').classList.add('active');
            }

            isSynthesis = synthesisSetting === 'true';
            if (isSynthesis) {
                document.getElementById('synthesisMode').classList.add('active');
            }

            contextEnabled = contextSetting === 'true';
            document.getElementById('contextToggle').checked = contextEnabled;
        }

        document.addEventListener('DOMContentLoaded', async function() {
            loadSettings();
            
            const modelSelector = document.getElementById('modelSelector');
            modelSelector.innerHTML = '';
            
            await updateAvailableModels();
            
            initParticles();
            loadConversations();
            setupEventListeners();
            loadPrompts();
        });

        function setupEventListeners() {
            document.getElementById('sendBtn').addEventListener('click', sendMessage);
            
            const messageInput = document.getElementById('messageInput');
            const inputContainer = document.querySelector('.input-container');
            
            // Créer le compteur de caractères
            const charCounter = document.createElement('div');
            charCounter.className = 'char-counter';
            inputContainer.appendChild(charCounter);
            
            // Mettre à jour le compteur en temps réel
            function updateCharCounter() {
                const currentLength = messageInput.value.length;
                charCounter.textContent = `${currentLength}/${maxMessageLength}`;
                
                if (currentLength >= maxMessageLength) {
                    charCounter.className = 'char-counter at-limit';
                } else if (currentLength >= maxMessageLength * 0.8) {
                    charCounter.className = 'char-counter near-limit';
                } else {
                    charCounter.className = 'char-counter';
                }
            }
            
            // Fonction pour mettre à jour la limite de caractères
            async function updateMaxLength() {
                try {
                    const response = await fetch('/api/available-models');
                    const data = await response.json();
                    maxMessageLength = data.can_use_paid ? 1500 : 500;
                    updateCharCounter(); // Mettre à jour l'affichage avec la nouvelle limite
                } catch (error) {
                    console.error('Erreur lors de la récupération de la limite de caractères:', error);
                }
            }
            
            // Mettre à jour la limite au chargement
            updateMaxLength();
            
            messageInput.addEventListener('input', updateCharCounter);

            messageInput.addEventListener('keypress', async function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    
                    if (messageInput.value.length > maxMessageLength) {
                        showNotification(`Message trop long (maximum ${maxMessageLength} caractères)`);
                        return;
                    }
                    
                    sendMessage();
                }
            });

            const settingsBtn = document.getElementById('settingsBtn');
            const settingsMenu = document.getElementById('settingsMenu');
            
            if (settingsBtn && settingsMenu) {
                settingsBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    settingsMenu.classList.toggle('active');
                });

                document.addEventListener('click', function(e) {
                    if (settingsMenu.classList.contains('active') && 
                        !settingsMenu.contains(e.target) && 
                        !settingsBtn.contains(e.target)) {
                        settingsMenu.classList.remove('active');
                    }
                });
            }

            const streamingToggle = document.getElementById('streamingToggle');
            if (streamingToggle) {
                streamingToggle.checked = isStreaming;
                streamingToggle.addEventListener('change', function(e) {
                    isStreaming = e.target.checked;
                    setCookie('streaming', isStreaming);
                    showNotification(isStreaming ? 'Réponse en direct activée' : 'Réponse en direct désactivée');
                });
            }

            const contextToggle = document.getElementById('contextToggle');
            if (contextToggle) {
                contextToggle.checked = contextEnabled;
                contextToggle.addEventListener('change', function(e) {
                    contextEnabled = e.target.checked;
                    setCookie('context_enabled', contextEnabled);
                    showNotification(contextEnabled ? 'Mode Contexte activé' : 'Mode Contexte désactivé');
                });
            }

            const unlockedMode = document.getElementById('unlockedMode');
            if (unlockedMode) {
                unlockedMode.classList.toggle('active', isUnlocked);
                unlockedMode.addEventListener('click', async function() {
                    const response = await fetch('/api/available-models');
                    const data = await response.json();
                    const canUsePaid = data.subscription !== 'trial' || data.paid_requests_left > 0;

                    if (!canUsePaid) {
                        showNotification('Le mode Unlocked nécessite des crédits payants');
                        this.classList.remove('active');
                        isUnlocked = false;
                        setCookie('unlocked_mode', false);
                        return;
                    }

                    isUnlocked = !isUnlocked;
                    this.classList.toggle('active');
                    setCookie('unlocked_mode', isUnlocked);
                    showNotification(isUnlocked ? 'Mode Unlocked activé' : 'Mode Unlocked désactivé');
                });
            }

            const webSearchMode = document.getElementById('webSearchMode');
            if (webSearchMode) {
                webSearchMode.classList.toggle('active', isWebSearch);
                webSearchMode.addEventListener('click', function() {
                    const modelSelector = document.getElementById('modelSelector');
                    const currentModel = modelSelector.value;

                    if (currentModel === 'Mixtral 8x7B') {
                        showNotification('Le mode Web Search n\'est pas compatible avec le modèle Mixtral. Veuillez changer de modèle.');
                        return;
                    }

                    isWebSearch = !isWebSearch;
                    this.classList.toggle('active');
                    setCookie('web_search_mode', isWebSearch);
                    showNotification(isWebSearch ? 'Mode Web Search activé' : 'Mode Web Search désactivé');
                });
            }

            const deepThinkingMode = document.getElementById('deepThinkingMode');
            if (deepThinkingMode) {
                deepThinkingMode.classList.toggle('active', isDeepThinking);
                deepThinkingMode.addEventListener('click', function() {
                    isDeepThinking = !isDeepThinking;
                    this.classList.toggle('active');
                    setCookie('deep_thinking_mode', isDeepThinking);
                    showNotification(isDeepThinking ? 'Mode Approfondir activé' : 'Mode Approfondir désactivé');
                });
            }

            const roleplayMode = document.getElementById('roleplayMode');
            if (roleplayMode) {
                roleplayMode.classList.toggle('active', isRoleplay);
                roleplayMode.addEventListener('click', function() {
                    isRoleplay = !isRoleplay;
                    this.classList.toggle('active');
                    setCookie('roleplay_mode', isRoleplay);
                    showNotification(isRoleplay ? 'Mode Roleplay activé' : 'Mode Roleplay désactivé');
                });
            }

            const codeAssistantMode = document.getElementById('codeAssistantMode');
            if (codeAssistantMode) {
                codeAssistantMode.classList.toggle('active', isCodeAssistant);
                codeAssistantMode.addEventListener('click', function() {
                    isCodeAssistant = !isCodeAssistant;
                    this.classList.toggle('active');
                    setCookie('code_assistant_mode', isCodeAssistant);
                    showNotification(isCodeAssistant ? 'Mode Code Assistant activé' : 'Mode Code Assistant désactivé');
                });
            }

            const creativeMode = document.getElementById('creativeMode');
            if (creativeMode) {
                creativeMode.classList.toggle('active', isCreative);
                creativeMode.addEventListener('click', function() {
                    isCreative = !isCreative;
                    this.classList.toggle('active');
                    setCookie('creative_mode', isCreative);
                    showNotification(isCreative ? 'Mode Creative activé' : 'Mode Creative désactivé');
                });
            }

            const analyticalMode = document.getElementById('analyticalMode');
            if (analyticalMode) {
                analyticalMode.classList.toggle('active', isAnalytical);
                analyticalMode.addEventListener('click', function() {
                    isAnalytical = !isAnalytical;
                    this.classList.toggle('active');
                    setCookie('analytical_mode', isAnalytical);
                    showNotification(isAnalytical ? 'Mode Analytical activé' : 'Mode Analytical désactivé');
                });
            }

            const teacherMode = document.getElementById('teacherMode');
            if (teacherMode) {
                teacherMode.classList.toggle('active', isTeacher);
                teacherMode.addEventListener('click', function() {
                    isTeacher = !isTeacher;
                    this.classList.toggle('active');
                    setCookie('teacher_mode', isTeacher);
                    showNotification(isTeacher ? 'Mode Teacher activé' : 'Mode Teacher désactivé');
                });
            }

            const synthesisMode = document.getElementById('synthesisMode');
            if (synthesisMode) {
                synthesisMode.classList.toggle('active', isSynthesis);
                synthesisMode.addEventListener('click', function() {
                    isSynthesis = !isSynthesis;
                    this.classList.toggle('active');
                    setCookie('synthesis_mode', isSynthesis);
                    showNotification(isSynthesis ? 'Mode Synthesis activé' : 'Mode Synthesis désactivé');
                });
            }

            const promptBtn = document.getElementById('promptBtn');
            const promptPopup = document.getElementById('promptPopup');
            const cancelPrompt = document.getElementById('cancelPrompt');
            const savePrompt = document.getElementById('savePrompt');

            promptBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                promptPopup.style.display = 'block';
                document.getElementById('settingsMenu').classList.remove('active');
            });

            cancelPrompt.addEventListener('click', () => {
                promptPopup.style.display = 'none';
                document.getElementById('promptInput').value = '';
            });

            savePrompt.addEventListener('click', () => {
                const promptText = document.getElementById('promptInput').value.trim();
                if (promptText) {
                    saveCustomPrompt(promptText);
                    document.getElementById('promptInput').value = '';
                    promptPopup.style.display = 'none';
                    showNotification('Prompt personnalisé sauvegardé');
                }
            });

            document.addEventListener('click', (e) => {
                if (!promptPopup.contains(e.target) && !promptBtn.contains(e.target)) {
                    promptPopup.style.display = 'none';
                }
            });
        }

        function createNewConversation() {
            const newId = 'conv_' + Date.now();
            const modelSelector = document.getElementById('modelSelector');
            const modelName = modelSelector.options[modelSelector.selectedIndex].text;
            
            const newConv = {
                id: newId,
                title: 'Nouvelle conversation',
                model: modelSelector.value,
                modelName: modelName,
                messages: [],
                createdAt: new Date().toISOString()
            };
            
            if (!Array.isArray(conversations)) {
                conversations = [];
            }
            
            conversations.unshift(newConv);
            currentConversationId = newId;
            
            saveConversations();
            updateConversationsList();
            clearChat();
            
            showNotification('Nouvelle conversation créée');
            return newId;
        }

        function loadConversations() {
            const saved = localStorage.getItem('grok_conversations');
            if (saved) {
                try {
                    conversations = JSON.parse(saved) || [];
                } catch (e) {
                    console.error('Erreur lors du chargement des conversations:', e);
                    conversations = [];
                }
                updateConversationsList();
                
                if (conversations.length > 0) {
                    loadConversation(conversations[0].id);
                }
            } else {
                conversations = [];
            }
        }

        function saveConversations() {
            try {
                localStorage.setItem('grok_conversations', JSON.stringify(conversations));
                updateConversationsList();
            } catch (e) {
                console.error('Erreur lors de la sauvegarde des conversations:', e);
                showNotification('Erreur lors de la sauvegarde des conversations');
            }
        }

        function updateConversationsList() {
            const list = document.getElementById('conversationsList');
            list.innerHTML = '';
            
            conversations.forEach(conv => {
                const item = document.createElement('div');
                item.className = `conversation-item ${conv.id === currentConversationId ? 'active' : ''}`;
                
                if (!conv.createdAt) {
                    conv.createdAt = new Date().toISOString();
                }
                
                item.innerHTML = `
                    <div class="conversation-info">
                        <div class="conversation-title">${conv.title}</div>
                        <i class="fas fa-pencil-alt edit-title"></i>
                        <div class="conversation-model">${conv.modelName || 'Mixtral'}</div>
                    </div>
                    <div class="conversation-actions">
                        <i class="fas fa-info-circle info-conv"></i>
                        <i class="fas fa-trash delete-conv"></i>
                    </div>
                `;
                
                item.querySelector('.info-conv').addEventListener('click', (e) => {
                    e.stopPropagation();
                    showConversationInfo(conv, e);
                });
                
                item.querySelector('.edit-title').addEventListener('click', (e) => {
                    e.stopPropagation();
                    const popup = document.getElementById('renamePopup');
                    const input = document.getElementById('newTitleInput');
                    input.value = conv.title;
                    popup.style.display = 'block';
                    input.focus();

                    const saveNewTitle = () => {
                        const newTitle = input.value.trim() || 'Nouvelle conversation';
                        conv.title = newTitle;
                        saveConversations();
                        updateConversationsList();
                        popup.style.display = 'none';
                    };

                    document.getElementById('confirmRename').onclick = saveNewTitle;
                    document.getElementById('cancelRename').onclick = () => {
                        popup.style.display = 'none';
                    };

                    input.onkeypress = (e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            saveNewTitle();
                        }
                    };
                });
                
                item.querySelector('.delete-conv').addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteConversation(conv.id);
                });
                
                item.addEventListener('click', () => loadConversation(conv.id));
                list.appendChild(item);
            });
        }

        function loadConversation(id) {
            currentConversationId = id;
            const conversation = conversations.find(c => c.id === id);
            
            clearChat();
            
            if (conversation) {
                // Ajouter un flag pour indiquer le chargement initial
                const isInitialLoad = true;
                conversation.messages.forEach(msg => {
                    addMessage(msg.content, msg.isUser, null, isInitialLoad);
                });
            }
            
            updateConversationsList();
        }

        function deleteConversation(id) {
            conversations = conversations.filter(c => c.id !== id);
            
            if (currentConversationId === id) {
                currentConversationId = conversations.length > 0 ? conversations[0].id : null;
                clearChat();
                if (currentConversationId) {
                    loadConversation(currentConversationId);
                }
            }
            
            saveConversations();
        }

        function clearChat() {
            document.getElementById('chat-messages').innerHTML = '';
        }

        async function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value.trim();
            const loadingIndicator = document.getElementById('loading');
            
            if (!message) return;

            // Vérifier la limite de caractères
            const response = await fetch('/api/available-models');
            const data = await response.json();
            const maxLength = data.can_use_paid ? 1500 : 500;
            
            if (message.length > maxLength) {
                showNotification(`Message trop long (maximum ${maxLength} caractères)`);
                return;
            }
            
            addMessage(message, true);
            messageInput.value = '';
            // Mettre à jour le compteur après avoir effacé le message
            const charCounter = document.querySelector('.char-counter');
            if (charCounter) {
                charCounter.textContent = `0/${maxLength}`;
                charCounter.className = 'char-counter';
            }
            
            const conversation = conversations.find(c => c.id === currentConversationId);
            if (!conversation) {
                showNotification('Erreur: Conversation non trouvée');
                return;
            }

            conversation.messages.push({ content: message, isUser: true });
            
            if (conversation.title === 'Nouvelle conversation') {
                conversation.title = message.substring(0, 30) + (message.length > 30 ? '...' : '');
                updateConversationsList();
            }
            
            saveConversations();
            
            loadingIndicator.style.display = 'block';
            
            try {
                const requestBody = {
                    message: message,
                    history: contextEnabled ? (conversation ? conversation.messages : []) : [],
                    model: currentModel,
                    stream: isStreaming,
                    is_unlocked: isUnlocked,
                    is_web_search: isWebSearch,
                    is_deep_thinking: isDeepThinking,
                    is_roleplay: isRoleplay,
                    is_code_assistant: isCodeAssistant,
                    is_creative: isCreative,
                    is_analytical: isAnalytical,
                    is_teacher: isTeacher,
                    is_synthesis: isSynthesis
                };

                if (isStreaming) {
                    const placeholderId = 'response-' + Date.now();
                    addMessage('', false, placeholderId);
                    
                    const response = await fetch('/chat', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(requestBody)
                    });

                    const reader = response.body.getReader();
                    let responseText = '';
                    
                    while (true) {
                        const {value, done} = await reader.read();
                        if (done) break;
                        
                        const chunk = new TextDecoder().decode(value);
                        responseText += chunk;
                        
                        const messageElement = document.getElementById(placeholderId);
                        if (messageElement) {
                            messageElement.querySelector('.message-content').innerHTML = marked.parse(responseText);
                            messageElement.querySelectorAll('pre code').forEach((block) => {
                                hljs.highlightElement(block);
                            });
                        }
                    }

                    if (conversation) {
                        conversation.messages.push({ content: responseText, isUser: false });
                        saveConversations();
                    }
                    
                    loadingIndicator.style.display = 'none';
                } else {
                    const response = await fetch('/chat', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(requestBody)
                    });
                    
                    const data = await response.json();
                    
                    if (response.status === 403 && data.should_update_models) {
                        await updateAvailableModels();
                        showNotification(data.error);
                        loadingIndicator.style.display = 'none';
                        return;
                    }

                    loadingIndicator.style.display = 'none';
                    
                    if (data.response) {
                        addMessage(data.response, false);
                        if (conversation) {
                            conversation.messages.push({ content: data.response, isUser: false });
                            saveConversations();
                        }
                    }
                }
            } catch (error) {
                console.error('Erreur lors de l\'envoi du message:', error);
                loadingIndicator.style.display = 'none';
                showNotification('Erreur lors de l\'envoi du message');
            }
        }

        function initParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 200;                   
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 20 + 's';
                particle.style.animationDuration = (Math.random() * 15 + 15) + 's';          
                
                const size = Math.random() * 3 + 1;             
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                const opacity = Math.random() * 0.6 + 0.2;          
                particle.style.opacity = opacity;
                
                particlesContainer.appendChild(particle);
            }
        }

        function addMessage(content, isUser = false, id = null, isInitialLoad = false) {
            const messagesContainer = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user' : 'ai'}`;
            if (id) messageDiv.id = id;
            
            const avatar = document.createElement('div');
            avatar.className = 'avatar';
            
            const avatarImg = document.createElement('img');
            avatarImg.style.width = '100%';
            avatarImg.style.height = '100%';
            avatarImg.style.borderRadius = '50%';
            avatarImg.style.objectFit = 'cover';
            
            if (isUser) {
                avatarImg.src = 'https://i.pinimg.com/736x/ab/c4/ad/abc4ad0c34f3ef7fbc232ae8f3ee455d.jpg';
                avatarImg.alt = 'User';
            } else {
                avatarImg.src = 'https://i.pinimg.com/736x/91/d7/6e/91d76ef5c330f95f5e3d7e563cc4f988.jpg';
                avatarImg.alt = 'AI';
            }
            
            avatar.appendChild(avatarImg);
            messageDiv.appendChild(avatar);
            
            const messageContent = document.createElement('div');
            messageContent.className = 'message-content';

            // Configuration de marked pour gérer les scripts de manière sécurisée
            marked.setOptions({
                highlight: function(code, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return hljs.highlight(code, { language: lang }).value;
                        } catch (err) {}
                    }
                    return code;
                }
            });

            // Remplacer les IDs de graphiques et ajouter la gestion des palettes
            let chartCounter = 0;
            const processedContent = content.replace(
                /<div class="chart-container"[\s\S]*?<\/script>/g,
                (match) => {
                    const uniqueId = `chart_${Date.now()}_${chartCounter++}`;
                    
                    // Extraire la palette spécifiée dans le script
                    let palette = 'default';
                    const paletteMatch = match.match(/palette:\s*['"](\w+)['"]/);
                    if (paletteMatch) {
                        palette = paletteMatch[1];
                    }
                    
                    // Remplacer les références aux couleurs
                    let modifiedMatch = match.replace(/colors:\s*\[(.*?)\]/g, (colorsMatch, colorsList) => {
                        if (colorsList.includes('getChartColors')) return colorsMatch;
                        return `colors: getChartColors('${palette}', ${colorsList.split(',').length})`;
                    });

                    // Ajouter la gestion des couleurs de fond avec opacité
                    modifiedMatch = modifiedMatch.replace(/backgroundColor:\s*(['"])(.*?)\1/g, (bgMatch, quote, color) => {
                        if (color.includes('rgba') || color.includes('getChartColors')) return bgMatch;
                        return `backgroundColor: generateColors('${color}', 1, 0.2)[0]`;
                    });

                    // Ajouter la gestion des couleurs de bordure
                    modifiedMatch = modifiedMatch.replace(/borderColor:\s*(['"])(.*?)\1/g, (borderMatch, quote, color) => {
                        if (color.includes('rgba') || color.includes('getChartColors')) return borderMatch;
                        return `borderColor: generateColors('${color}', 1, 1)[0]`;
                    });

                    return modifiedMatch.replace(/myChart/g, uniqueId);
                }
            );

            const htmlContent = marked.parse(processedContent);
            messageContent.innerHTML = htmlContent;

            // Exécuter les scripts de graphiques avec la nouvelle configuration
            messageContent.querySelectorAll('script').forEach(oldScript => {
                if (oldScript.textContent.includes('new Chart')) {
                    const newScript = document.createElement('script');
                    newScript.textContent = oldScript.textContent;
                    oldScript.parentNode.replaceChild(newScript, oldScript);
                }
            });

            // Configurer Chart.js pour le thème sombre
            Chart.defaults.color = '#b0a0a0';
            Chart.defaults.borderColor = 'rgba(138, 43, 226, 0.1)';
            Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(0, 0, 20, 0.8)';
            Chart.defaults.plugins.tooltip.titleColor = '#ffffff';
            Chart.defaults.plugins.tooltip.bodyColor = '#ffffff';
            Chart.defaults.plugins.tooltip.borderColor = 'rgba(138, 43, 226, 0.2)';
            Chart.defaults.plugins.tooltip.borderWidth = 1;
            Chart.defaults.plugins.legend.labels.color = '#b0a0a0';

            messageContent.querySelectorAll('pre').forEach((pre) => {
                const copyButton = document.createElement('button');
                copyButton.className = 'copy-button';
                copyButton.innerHTML = '<i class="fas fa-copy"></i> Copier';
                
                copyButton.addEventListener('click', async () => {
                    const code = pre.querySelector('code').innerText;
                    await navigator.clipboard.writeText(code);
                    
                    copyButton.innerHTML = '<i class="fas fa-check"></i> Copié!';
                    copyButton.classList.add('copied');
                    
                    setTimeout(() => {
                        copyButton.innerHTML = '<i class="fas fa-copy"></i> Copier';
                        copyButton.classList.remove('copied');
                    }, 2000);
                });
                
                pre.appendChild(copyButton);
            });

            messageContent.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightElement(block);
            });
            
            messageDiv.appendChild(messageContent);
            messagesContainer.appendChild(messageDiv);
            
            messagesContainer.scrollTop = messagesContainer.scrollHeight;

            if (!isInitialLoad && !isUser) {
                showNotification('Nouveau message reçu');
            }
        }

        document.getElementById('modelSelector').addEventListener('change', function(e) {
            const newModel = e.target.value;
            const modelName = e.target.options[e.target.selectedIndex].text;
            
            // Vérifier la compatibilité avec le mode web search
            if (newModel === 'Mixtral 8x7B' && isWebSearch) {
                showNotification('Le mode Web Search n\'est pas compatible avec le modèle Mixtral. Le mode Web Search a été désactivé.');
                isWebSearch = false;
                document.getElementById('webSearchMode').classList.remove('active');
                setCookie('web_search_mode', false);
            }
            
            currentModel = newModel;
            
            const currentConv = conversations.find(c => c.id === currentConversationId);
            if (currentConv) {
                currentConv.model = currentModel;
                currentConv.modelName = modelName;
                saveConversations();
                updateConversationsList();
                showNotification(`Modèle changé pour : ${modelName}`);
            }
        });

        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.style.display = 'block';
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        }

        document.getElementById('userAvatarUpload').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    userAvatar = e.target.result;
                    localStorage.setItem('userAvatar', userAvatar);
                    document.getElementById('userAvatarPreview').src = userAvatar;
                };
                reader.readAsDataURL(file);
            }
        });

        if (userAvatar) {
            document.getElementById('userAvatarPreview').src = userAvatar;
        }

        function showConversationInfo(conv, event) {
            const popup = document.getElementById('infoPopup');
            const rect = event.target.getBoundingClientRect();
            
            const popupX = rect.right + 10;
            const popupY = rect.top;
            
            const createdAt = new Date(conv.createdAt);
            const formattedDate = createdAt.toLocaleDateString('fr-FR', {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });

            const messageCount = conv.messages ? conv.messages.length : 0;
            const userMessages = conv.messages ? conv.messages.filter(m => m.isUser).length : 0;
            const aiMessages = messageCount - userMessages;
            
            popup.querySelector('.info-content').innerHTML = `
                <div class="info-item">
                    <span class="info-label">Créée le</span>
                    <span class="info-value">${formattedDate}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Modèle actuel</span>
                    <span class="info-value">${conv.modelName || 'Mixtral'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Messages totaux</span>
                    <span class="info-value">${messageCount}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Messages utilisateur</span>
                    <span class="info-value">${userMessages}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Réponses IA</span>
                    <span class="info-value">${aiMessages}</span>
                </div>
            `;
            
            popup.style.left = `${popupX}px`;
            popup.style.top = `${popupY}px`;
            popup.classList.add('active');
            
            const closePopup = (e) => {
                if (!popup.contains(e.target) && !e.target.classList.contains('info-conv')) {
                    popup.classList.remove('active');
                    document.removeEventListener('click', closePopup);
                }
            };
            
            setTimeout(() => {
                document.addEventListener('click', closePopup);
            }, 0);
        }

        async function updateAvailableModels() {
            try {
                const response = await fetch('/api/available-models');
                const data = await response.json();
                
                const modelSelector = document.getElementById('modelSelector');
                modelSelector.innerHTML = '';
                
                const freeGroup = document.createElement('optgroup');
                freeGroup.label = '🌟 MODÈLES GRATUITS';
                freeGroup.className = 'free-group';
                
                const paidGroup = document.createElement('optgroup');
                paidGroup.label = '💎 MODÈLES PREMIUM';
                paidGroup.className = 'paid-group';
                
                if (!data.can_use_paid) {
                    paidGroup.className += ' disabled';
                    paidGroup.label += ` (${data.paid_requests_left} requêtes restantes)`;
                }

                const freeModels = [];
                const paidModels = [];
                
                Object.entries(data.models).forEach(([key, model]) => {
                    const option = document.createElement('option');
                    option.value = key;
                    option.setAttribute('data-type', model.type.toLowerCase());
                    
                    if (model.type === 'Free') {
                        option.textContent = '🔓 ' + model.name;
                        option.className = 'free-option';
                        freeModels.push({key, model, option});
                    } else {
                        option.textContent = '⭐ ' + model.name;
                        option.className = 'paid-option';
                        if (!data.can_use_paid) {
                            option.className += ' disabled';
                            option.disabled = true;
                        }
                        paidModels.push({key, model, option});
                    }
                    
                    if (key === currentModel) {
                        option.selected = true;
                    }
                });

                freeModels.sort((a, b) => a.model.name.localeCompare(b.model.name));
                paidModels.sort((a, b) => a.model.name.localeCompare(b.model.name));

                freeModels.forEach(({option}) => {
                    freeGroup.appendChild(option);
                });

                paidModels.forEach(({option}) => {
                    paidGroup.appendChild(option);
                });

                if (freeGroup.children.length > 0) {
                    modelSelector.appendChild(freeGroup);
                }
                if (paidGroup.children.length > 0) {
                    modelSelector.appendChild(paidGroup);
                }

                if (!data.can_use_paid && currentModel && data.models[currentModel]?.type === 'Paid') {
                    const firstFreeOption = modelSelector.querySelector('option[data-type="free"]');
                    if (firstFreeOption) {
                        firstFreeOption.selected = true;
                        currentModel = firstFreeOption.value;
                        showNotification('Modèle changé pour un modèle gratuit (plus de requêtes payantes disponibles)');
                    }
                }

                document.getElementById('subscription-type').textContent = data.subscription.charAt(0).toUpperCase() + data.subscription.slice(1);
                const requestsCounter = document.getElementById('requests-counter');
                if (data.subscription === 'trial') {
                    requestsCounter.style.display = 'flex';
                    document.getElementById('requests-left').textContent = `${data.paid_requests_left} requêtes payantes restantes`;
                } else {
                    requestsCounter.style.display = 'none';
                }
            } catch (error) {
                console.error('Erreur lors de la mise à jour des modèles:', error);
                showNotification('Erreur lors de la mise à jour des modèles disponibles');
            }
        }

        function loadPrompts() {
            const prompts = JSON.parse(localStorage.getItem('custom_prompts') || '[]');
            const promptList = document.getElementById('promptList');
            promptList.innerHTML = '';

            prompts.forEach((prompt, index) => {
                const promptItem = document.createElement('div');
                promptItem.className = 'prompt-item';
                promptItem.innerHTML = `
                    <span class="prompt-name">Prompt ${index + 1}</span>
                    <div class="prompt-actions">
                        <button onclick="editPrompt(${index})" title="Modifier">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button onclick="deletePrompt(${index})" title="Supprimer">
                            <i class="fas fa-trash"></i>
                        </button>
                        <button onclick="usePrompt(${index})" title="Utiliser">
                            <i class="fas fa-play"></i>
                        </button>
                    </div>
                `;
                promptList.appendChild(promptItem);
            });
        }

        function saveCustomPrompt(promptText) {
            const prompts = JSON.parse(localStorage.getItem('custom_prompts') || '[]');
            prompts.push(promptText);
            localStorage.setItem('custom_prompts', JSON.stringify(prompts));
            loadPrompts();
        }

        function deletePrompt(index) {
            const prompts = JSON.parse(localStorage.getItem('custom_prompts') || '[]');
            prompts.splice(index, 1);
            localStorage.setItem('custom_prompts', JSON.stringify(prompts));
            loadPrompts();
            showNotification('Prompt supprimé');
        }

        function editPrompt(index) {
            const prompts = JSON.parse(localStorage.getItem('custom_prompts') || '[]');
            const promptInput = document.getElementById('promptInput');
            promptInput.value = prompts[index];
            deletePrompt(index);
            document.getElementById('promptPopup').style.display = 'block';
        }

        function usePrompt(index) {
            const prompts = JSON.parse(localStorage.getItem('custom_prompts') || '[]');
            const messageInput = document.getElementById('messageInput');
            messageInput.value = prompts[index];
            document.getElementById('promptPopup').style.display = 'none';
            showNotification('Prompt chargé dans la zone de message');
        }
    </script>
</body>
</html> 