@section('main_content')
<div class="chat-app" data-theme="light">
    <!-- Sidebar -->
    <aside class="chat-sidebar" id="chatSidebar">
        <div class="sidebar-header">
            <button class="new-chat-btn" onclick="createNewChat()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 5v14M5 12h14"/>
                </svg>
                گفتگوی جدید
            </button>
        </div>

        <div class="sidebar-search">
            <input type="text" id="searchConversations" placeholder="جستجوی گفتگوها..." onkeyup="searchConversations()">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
            </svg>
        </div>

        <div class="conversations-list" id="conversationsList">
            <!-- Conversations will be loaded here -->
            <div class="conversation-item active" data-id="current">
                <div class="conversation-title">گفتگوی فعلی</div>
                <div class="conversation-date">الان</div>
            </div>
        </div>

        <div class="sidebar-footer">
            <button class="sidebar-btn" onclick="openSettings()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="3"></circle>
                    <path d="M12 1v6m0 6v6m-9-9h6m6 0h6"/>
                </svg>
                تنظیمات
            </button>
            <button class="sidebar-btn" onclick="toggleTheme()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path id="themeIcon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </svg>
                تم
            </button>
        </div>
    </aside>

    <!-- Main Chat Area -->
    <main class="chat-main">
        <!-- Toggle Sidebar Button (Mobile) -->
        <button class="toggle-sidebar-btn" id="toggleSidebarBtn" onclick="toggleSidebar()">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
        </button>

        <!-- Header -->
        <header class="chat-header">
            <div class="header-left">
                <div class="model-selector-wrapper">
                    <select id="modelSelector" class="model-selector" onchange="changeModel()">
                        <option value="claude-sonnet-4">🤖 Claude Sonnet 4</option>
                        <option value="claude-opus">🧠 Claude Opus</option>
                        <option value="gpt-4">✨ GPT-4</option>
                        <option value="gpt-3.5">⚡ GPT-3.5 Turbo</option>
                    </select>
                </div>
                <span class="model-status">
                    <span class="status-dot"></span>
                    آنلاین
                </span>
            </div>
            
            <div class="header-right">
                <div class="user-info">
                    <div class="token-display" title="توکن‌های رایگان">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        <span id="token-count">{{ auth()->user()->free_tokens }}</span>
                    </div>
                    <div class="wallet-display" title="موجودی کیف پول">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/>
                            <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/>
                            <path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/>
                        </svg>
                        <span id="wallet-balance">{{ number_format(auth()->user()->wallet_balance) }}</span>
                    </div>
                </div>
                
                <button class="header-btn" onclick="exportConversation()" title="خروجی گفتگو">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                        <polyline points="7 10 12 15 17 10"/>
                        <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                </button>
            </div>
        </header>

        <!-- Messages Container -->
        <div class="chat-messages" id="chat-messages">
            <div class="welcome-message">
                <div class="welcome-icon">🤖</div>
                <h2>سلام! من Claude هستم</h2>
                <p>چطور می‌تونم امروز به شما کمک کنم؟</p>
                
                <div class="suggestion-chips">
                    <button class="chip" onclick="useSuggestion('یک کد پایتون برای من بنویس')">
                        💻 کد بنویس
                    </button>
                    <button class="chip" onclick="useSuggestion('یک داستان کوتاه بنویس')">
                        📝 داستان بنویس
                    </button>
                    <button class="chip" onclick="useSuggestion('به من در یادگیری کمک کن')">
                        📚 کمک به یادگیری
                    </button>
                    <button class="chip" onclick="useSuggestion('یک ایده خلاقانه بده')">
                        💡 ایده بده
                    </button>
                </div>
            </div>
        </div>

        <!-- Typing Indicator -->
        <div class="typing-indicator" id="typingIndicator" style="display: none;">
            <div class="message-avatar ai-avatar">🤖</div>
            <div class="typing-dots">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

        <!-- Input Container -->
        <div class="chat-input-container">
            <div class="input-actions-top">
                <button class="action-btn" onclick="document.getElementById('fileInput').click()" title="پیوست فایل">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
                    </svg>
                </button>
                <input type="file" id="fileInput" style="display: none;" onchange="handleFileUpload(event)">
                
                <button class="action-btn" id="stopBtn" onclick="stopGeneration()" style="display: none;" title="توقف تولید">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <rect x="6" y="6" width="12" height="12" rx="2"/>
                    </svg>
                </button>
            </div>

            <div class="chat-input-wrapper">
                <textarea 
                    id="message-input" 
                    placeholder="پیام خود را بنویسید..." 
                    rows="1"
                    oninput="autoResize(this)"
                ></textarea>
                
                <button id="send-btn" class="send-btn" onclick="sendMessage()">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                    </svg>
                </button>
            </div>
            
            <div class="input-hint">
                <span>Enter برای ارسال • Shift+Enter برای خط جدید</span>
            </div>
        </div>
    </main>
</div>

<!-- Settings Modal -->
<div class="modal" id="settingsModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>تنظیمات</h3>
            <button class="close-btn" onclick="closeSettings()">×</button>
        </div>
        <div class="modal-body">
            <div class="setting-item">
                <label>دمای مدل (Temperature)</label>
                <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7">
                <span id="tempValue">0.7</span>
            </div>
            <div class="setting-item">
                <label>حداکثر توکن پاسخ</label>
                <input type="number" id="maxTokens" value="2000" min="100" max="4000" step="100">
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="streamResponse" checked>
                    نمایش تدریجی پاسخ (Streaming)
                </label>
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="saveHistory" checked>
                    ذخیره تاریخچه گفتگوها
                </label>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-primary" onclick="saveSettings()">ذخیره</button>
            <button class="btn-secondary" onclick="closeSettings()">انصراف</button>
        </div>
    </div>
</div>

<style>
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f8;
    --bg-tertiary: #ececf1;
    --text-primary: #0d0d0d;
    --text-secondary: #565869;
    --border-color: #d9d9e3;
    --accent-color: #667eea;
    --accent-hover: #5568d3;
    --ai-msg-bg: #f7f7f8;
    --user-msg-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --sidebar-bg: #f9f9fb;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3d3d3d;
    --text-primary: #ececec;
    --text-secondary: #b4b4b4;
    --border-color: #404040;
    --ai-msg-bg: #2d2d2d;
    --sidebar-bg: #252525;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    direction: rtl;
    overflow: hidden;
}

.chat-app {
    display: flex;
    height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
}

/* ========== SIDEBAR ========== */
.chat-sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    z-index: 100;
}

.sidebar-header {
    padding: 1rem;
}

.new-chat-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.new-chat-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.sidebar-search {
    padding: 0 1rem 1rem;
    position: relative;
}

.sidebar-search input {
    width: 100%;
    padding: 0.7rem 2.5rem 0.7rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--transition);
}

.sidebar-search input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.sidebar-search svg {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem;
}

.conversation-item {
    padding: 0.85rem 1rem;
    margin: 0.25rem 0;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.conversation-item:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.conversation-item.active {
    background: var(--accent-color);
    color: white;
}

.conversation-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-date {
    font-size: 0.75rem;
    opacity: 0.7;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
}

.sidebar-btn {
    flex: 1;
    padding: 0.7rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    transition: var(--transition);
}

.sidebar-btn:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

/* ========== MAIN CHAT ========== */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.toggle-sidebar-btn {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition);
}

.toggle-sidebar-btn:hover {
    background: var(--bg-tertiary);
}

.chat-header {
    padding: 1rem 2rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.model-selector-wrapper {
    position: relative;
}

.model-selector {
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    appearance: none;
}

.model-selector:hover {
    border-color: var(--accent-color);
}

.model-selector:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.model-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info {
    display: flex;
    gap: 0.75rem;
}

.token-display, .wallet-display {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: var(--transition);
}

.token-display:hover, .wallet-display:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.header-btn {
    padding: 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.header-btn:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

/* ========== MESSAGES ========== */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    background: var(--bg-secondary);
    scroll-behavior: smooth;
}

.welcome-message {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.welcome-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.welcome-message h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.welcome-message p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 2rem;
}

.chip {
    padding: 0.75rem 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.chip:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.ai-message, .user-message {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    animation: messageSlide 0.3s ease-out;
}

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

.user-message {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ai-avatar {
    background: var(--ai-msg-bg);
}

.user-avatar {
    background: var(--user-msg-bg);
}

.message-content {
    max-width: 70%;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    background: var(--ai-msg-bg);
    color: var(--text-primary);
    line-height: 1.6;
    position: relative;
}

.user-message .message-content {
    background: var(--user-msg-bg);
    color: white;
}

.message-content p {
    margin: 0.5rem 0;
}

.message-content pre {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.75rem 0;
}

.message-content code {
    background: var(--bg-tertiary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.message-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.message-action-btn {
    padding: 0.4rem 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: var(--transition);
}

.message-action-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* ========== TYPING INDICATOR ========== */
.typing-indicator {
    display: flex;
    gap: 1rem;
    padding: 0 2rem 1rem;
    background: var(--bg-secondary);
}

.typing-dots {
    display: flex;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    background: var(--ai-msg-bg);
    border-radius: 18px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typing 1.4s infinite;
}

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

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

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* ========== INPUT ========== */
.chat-input-container {
    padding: 1rem 2rem 1.5rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

.input-actions-top {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.action-btn {
    padding: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition);
}

.action-btn:hover {
    background: var(--bg-tertiary);
}

.chat-input-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 0.5rem;
    transition: var(--transition);
}

.chat-input-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#message-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.75rem;
    font-size: 1rem;
    resize: none;
    max-height: 150px;
    color: var(--text-primary);
    font-family: inherit;
}

#message-input:focus {
    outline: none;
}

.send-btn {
    padding: 0.75rem;
    background: var(--accent-color);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.send-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-hint {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ========== MODAL ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlide 0.3s ease-out;
}

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

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}

.close-btn:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.setting-item {
    margin-bottom: 1.5rem;
}

.setting-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight:600;
    color: var(--text-primary);
}

.setting-item input[type="range"] {
    width: 80%;
    margin-left: 1rem;
}

.setting-item input[type="number"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.setting-item input[type="checkbox"] {
    margin-left: 0.5rem;
}

.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-primary, .btn-secondary {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
}

.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .chat-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .chat-sidebar.active {
        transform: translateX(0);
    }
    
    .toggle-sidebar-btn {
        display: block;
    }
    
    .chat-header {
        padding: 1rem;
        flex-wrap: wrap;
    }
    
    .header-left, .header-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .user-info {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
    
    .chat-messages {
        padding: 1rem;
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .suggestion-chips {
        flex-direction: column;
    }
    
    .chip {
        width: 100%;
    }
    
    .chat-input-container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .welcome-message {
        padding: 2rem 1rem;
    }
    
    .welcome-icon {
        font-size: 3rem;
    }
    
    .welcome-message h2 {
        font-size: 1.5rem;
    }
    
    .model-selector {
        font-size: 0.85rem;
        padding: 0.5rem 2rem 0.5rem 0.8rem;
    }
    
    .token-display, .wallet-display {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* ========== CODE HIGHLIGHTING ========== */
.message-content pre code {
    display: block;
    padding: 0;
    background: none;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px 8px 0 0;
    margin-bottom: -0.5rem;
}

.code-language {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.copy-code-btn {
    padding: 0.3rem 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-primary);
    transition: var(--transition);
}

.copy-code-btn:hover {
    background: var(--accent-color);
    color: white;
}

/* ========== LOADING STATES ========== */
.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
    height: 20px;
    margin: 0.5rem 0;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ========== TOOLTIP ========== */
[title] {
    position: relative;
}

/* ========== PRINT STYLES ========== */
@media print {
    .chat-sidebar,
    .chat-header,
    .chat-input-container,
    .toggle-sidebar-btn {
        display: none !important;
    }
    
    .chat-main {
        width: 100%;
    }
    
    .chat-messages {
        overflow: visible;
        height: auto;
    }
}
</style>



<script>
// ========== GLOBAL VARIABLES ==========
const chatMessages = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');
const tokenCount = document.getElementById('token-count');
const walletBalance = document.getElementById('wallet-balance');
const typingIndicator = document.getElementById('typingIndicator');
const stopBtn = document.getElementById('stopBtn');
const chatSidebar = document.getElementById('chatSidebar');
const settingsModal = document.getElementById('settingsModal');

let currentConversationId = null;
let conversationHistory = [];
let isGenerating = false;
let abortController = null;

// ========== INITIALIZATION ==========
document.addEventListener('DOMContentLoaded', function() {
    loadConversations();
    loadSettings();
    initializeEventListeners();
    
    // Load saved theme
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.querySelector('.chat-app').setAttribute('data-theme', savedTheme);
});

// ========== EVENT LISTENERS ==========
function initializeEventListeners() {
    // Enter to send message
    messageInput.addEventListener('keydown', function(e) {
        if(e.key === 'Enter' && !e.shiftKey){
            e.preventDefault();
            sendMessage();
        }
    });
    
    // Auto resize textarea
    messageInput.addEventListener('input', function() {
        autoResize(this);
    });
    
    // Temperature slider
    const tempSlider = document.getElementById('temperature');
    if(tempSlider) {
        tempSlider.addEventListener('input', function() {
            document.getElementById('tempValue').textContent = this.value;
        });
    }
}

// ========== THEME TOGGLE ==========
function toggleTheme() {
    const app = document.querySelector('.chat-app');
    const currentTheme = app.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    app.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    
    // Update icon
    const themeIcon = document.getElementById('themeIcon');
    if(newTheme === 'dark') {
        themeIcon.setAttribute('d', 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z');
    } else {
        themeIcon.setAttribute('d', 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z');
    }
}

// ========== SIDEBAR TOGGLE (MOBILE) ==========
function toggleSidebar() {
    chatSidebar.classList.toggle('active');
}

// ========== AUTO RESIZE TEXTAREA ==========
function autoResize(textarea) {
    textarea.style.height = 'auto';
    textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
}

// ========== SEND MESSAGE ==========
async function sendMessage() {
    const message = messageInput.value.trim();
    if(!message || isGenerating) return;
    
    // Add user message to UI
    appendMessage(message, 'user');
    
    // Clear input
    messageInput.value = '';
    messageInput.style.height = 'auto';
    
    // Hide welcome message
    const welcomeMsg = document.querySelector('.welcome-message');
    if(welcomeMsg) welcomeMsg.style.display = 'none';
    
    // Show typing indicator
    typingIndicator.style.display = 'flex';
    sendBtn.disabled = true;
    isGenerating = true;
    stopBtn.style.display = 'block';
    
    // Create abort controller for stopping generation
    abortController = new AbortController();
    
    try {
        const response = await fetch("{{ route('ai.send') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ 
                prompt: message,
                conversation_id: currentConversationId,
                model: document.getElementById('modelSelector').value,
                temperature: parseFloat(document.getElementById('temperature')?.value || 0.7),
                max_tokens: parseInt(document.getElementById('maxTokens')?.value || 2000)
            }),
            signal: abortController.signal
        });
        
        const data = await response.json();
        
        // Hide typing indicator
        typingIndicator.style.display = 'none';
        
        if(data.success) {
            // Add AI response
            appendMessage(data.response || 'بدون پاسخ', 'ai');
            
            // Update conversation ID
            if(data.conversation_id) {
                currentConversationId = data.conversation_id;
            }
            
            // Update tokens/balance
            if(data.tokens_used) {
                updateTokenCount(data.tokens_used);
            }
            
            if(data.cost) {
                updateWalletBalance(data.cost);
            }
            
            // Save to history
            conversationHistory.push({
                user: message,
                ai: data.response,
                timestamp: new Date().toISOString()
            });
            
            // Update conversations list
            updateConversationsList();
            
        } else {
            appendMessage(
                `<span style="color:#ef4444;">${data.message || 'خطا در ارسال پیام'}</span>`, 
                'ai'
            );
        }
        
    } catch(error) {
        typingIndicator.style.display = 'none';
        
        if(error.name === 'AbortError') {
            appendMessage('<span style="color:#f59e0b;">تولید متن متوقف شد</span>', 'ai');
        } else {
            appendMessage('<span style="color:#ef4444;">خطا در ارتباط با سرور</span>', 'ai');
            console.error(error);
        }
    } finally {
        sendBtn.disabled = false;
        isGenerating = false;
        stopBtn.style.display = 'none';
        abortController = null;
    }
}

// ========== STOP GENERATION ==========
function stopGeneration() {
    if(abortController) {
        abortController.abort();
    }
}

// ========== APPEND MESSAGE ==========
function appendMessage(content, sender = 'ai') {
    const wrapper = document.createElement('div');
    wrapper.classList.add(sender + '-message');
    
    const avatar = document.createElement('div');
    avatar.classList.add('message-avatar', sender + '-avatar');
    avatar.textContent = sender === 'ai' ? '🤖' : '👤';
    
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message-content');
    
    // Parse markdown-like content
    const formattedContent = formatMessage(content);
    messageDiv.innerHTML = formattedContent;
    
    wrapper.appendChild(avatar);
    wrapper.appendChild(messageDiv);
    
    // Add message actions for AI messages
    if(sender === 'ai') {
        const actions = document.createElement('div');
        actions.classList.add('message-actions');
        actions.innerHTML = `
            <button class="message-action-btn" onclick="copyMessage(this)" title="کپی">
                📋 کپی
            </button>
            <button class="message-action-btn" onclick="regenerateResponse()" title="تولید مجدد">
                🔄 تولید مجدد
            </button>
        `;
        messageDiv.appendChild(actions);
    }
    
    chatMessages.appendChild(wrapper);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// ========== FORMAT MESSAGE (MARKDOWN SUPPORT) ==========
function formatMessage(content) {
    // Convert markdown to HTML
    let formatted = content;
    
    // Code blocks
    formatted = formatted.replace(/```(\w+)?\n([\s\S]*?)```/g, function(match, lang, code) {
        const language = lang || 'code';
        return `
            <div class="code-header">
                <span class="code-language">${language}</span>
                <button class="copy-code-btn" onclick="copyCode(this)">کپی کد</button>
            </div>
            <pre><code>${escapeHtml(code.trim())}</code></pre>
        `;
    });
    
    // Inline code
    formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');
    
    // Bold
    formatted = formatted.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
    
    // Italic
    formatted = formatted.replace(/\*([^*]+)\*/g, '<em>$1</em>');
    
    // Line breaks
    formatted = formatted.replace(/\n/g, '<br>');
    
    return formatted;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// ========== COPY MESSAGE ==========
function copyMessage(btn) {
    const messageContent = btn.closest('.message-content').querySelector('p, pre code');
    const text = messageContent ? messageContent.innerText : '';
    
    navigator.clipboard.writeText(text).then(() => {
        const originalText = btn.innerHTML;
        btn.innerHTML = '✅ کپی شد';
        setTimeout(() => {
            btn.innerHTML = originalText;
        }, 2000);
    });
}

// ========== COPY CODE ==========
function copyCode(btn) {
    const codeBlock = btn.closest('.message-content').querySelector('code');
    const text = codeBlock ? codeBlock.innerText : '';
    
    navigator.clipboard.writeText(text).then(() => {
        btn.textContent = '✅ کپی شد';
        setTimeout(() => {
            btn.textContent = 'کپی کد';
        }, 2000);
    });
}

// ========== REGENERATE RESPONSE ==========
function regenerateResponse() {
    if(conversationHistory.length > 0) {
        const lastMessage = conversationHistory[conversationHistory.length - 1].user;
        messageInput.value = lastMessage;
        sendMessage();
    }
}

// ========== USE SUGGESTION ==========
function useSuggestion(text) {
    messageInput.value = text;
    messageInput.focus();
    autoResize(messageInput);
}

// ========== UPDATE TOKEN COUNT ==========
function updateTokenCount(used) {
    const current = parseInt(tokenCount.textContent);
    const newCount = Math.max(0, current - used);
    tokenCount.textContent = newCount;
    
    // Animate
    tokenCount.parentElement.style.transform = 'scale(1.1)';
    setTimeout(() => {
        tokenCount.parentElement.style.transform = 'scale(1)';
    }, 300);
}

// ========== UPDATE WALLET BALANCE ==========
function updateWalletBalance(cost) {
    const current = parseInt(walletBalance.textContent.replace(/,/g, ''));
    const newBalance = Math.max(0, current - cost);
    walletBalance.textContent = newBalance.toLocaleString('fa-IR');
    
    // Animate
    walletBalance.parentElement.style.transform = 'scale(1.1)';
    setTimeout(() => {
        walletBalance.parentElement.style.transform = 'scale(1)';
    }, 300);
}

// ========== CREATE NEW CHAT ==========
function createNewChat() {
    if(confirm('آیا می‌خواهید گفتگوی جدیدی شروع کنید؟')) {
        currentConversationId = null;
        conversationHistory = [];
        chatMessages.innerHTML = `
            <div class="welcome-message">
                <div class="welcome-icon">🤖</div>
                <h2>سلام! من Claude هستم</h2>
                <p>چطور می‌تونم امروز به شما کمک کنم؟</p>
                
                <div class="suggestion-chips">
                    <button class="chip" onclick="useSuggestion('یک کد پایتون برای من بنویس')">
                        💻 کد بنویس
                    </button>
                    <button class="chip" onclick="useSuggestion('یک داستان کوتاه بنویس')">
                        📝 داستان بنویس
                    </button>
                    <button class="chip" onclick="useSuggestion('به من در یادگیری کمک کن')">
                        📚 کمک به یادگیری
                    </button>
                    <button class="chip" onclick="useSuggestion('یک ایده خلاقانه بده')">
                        💡 ایده بده
                    </button>
                </div>
            </div>
        `;
    }
}

// ========== CHANGE MODEL ==========
function changeModel() {
    const model = document.getElementById('modelSelector').value;
    console.log('Model changed to:', model);
    // You can add additional logic here if needed
}

// ========== FILE UPLOAD ==========
function handleFileUpload(event) {
    const file = event.target.files[0];
    if(!file) return;
    
    // Show file info
    appendMessage(`📎 فایل "${file.name}" آپلود شد (${(file.size / 1024).toFixed(2)} KB)`, 'user');
    
    // Here you can implement file upload logic
    // For example, upload to server and get URL
    console.log('File uploaded:', file);
}

// ========== EXPORT CONVERSATION ==========
function exportConversation() {
    if(conversationHistory.length === 0) {
        alert('هیچ گفتگویی برای خروجی وجود ندارد!');
        return;
    }
    
    let content = 'گفتگو با هوش مصنوعی\n';
    content += '='.repeat(50) + '\n\n';
    
    conversationHistory.forEach((item, index) => {
        content += `[${index + 1}] شما:\n${item.user}\n\n`;
        content += `[${index + 1}] AI:\n${item.ai}\n\n`;
        content += '-'.repeat(50) + '\n\n';
    });
    
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `conversation_${new Date().getTime()}.txt`;
    a.click();
    URL.revokeObjectURL(url);
}

// ========== SEARCH CONVERSATIONS ==========
function searchConversations() {
    const searchTerm = document.getElementById('searchConversations').value.toLowerCase();
    const conversations = document.querySelectorAll('.conversation-item');
    
    conversations.forEach(conv => {
        const title = conv.querySelector('.conversation-title').textContent.toLowerCase();
        if(title.includes(searchTerm)) {
            conv.style.display = 'block';
        } else {
            conv.style.display = 'none';
        }
    });
}

// ========== LOAD CONVERSATIONS ==========
function loadConversations() {
    // Load from localStorage or fetch from server
    const saved = localStorage.getItem('conversations');
    if(saved) {
        const conversations = JSON.parse(saved);
        updateConversationsListUI(conversations);
    }
}

// ========== UPDATE CONVERSATIONS LIST ==========
function updateConversationsList() {
    // Save current conversation
    if(conversationHistory.length > 0) {
        const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
        
        const firstUserMessage = conversationHistory[0].user;
        const title = firstUserMessage.substring(0, 30) + (firstUserMessage.length > 30 ? '...' : '');
        
        conversations.unshift({
            id: currentConversationId || Date.now(),
            title: title,
            date: new Date().toLocaleString('fa-IR'),
            history: conversationHistory
        });
        
        // Keep only last 20 conversations
        if(conversations.length > 20) {
            conversations.length = 20;
        }
        
        localStorage.setItem('conversations', JSON.stringify(conversations));
        updateConversationsListUI(conversations);
    }
}

function updateConversationsListUI(conversations) {
    const list = document.getElementById('conversationsList');
    list.innerHTML = '<div class="conversation-item active" data-id="current"><div class="conversation-title">گفتگوی فعلی</div><div class="conversation-date">الان</div></div>';
    
    conversations.forEach(conv => {
        const item = document.createElement('div');
        item.classList.add('conversation-item');
        item.setAttribute('data-id', conv.id);
        item.innerHTML = `
            <div class="conversation-title">${conv.title}</div>
            <div class="conversation-date">${conv.date}</div>
        `;
        item.onclick = () => loadConversation(conv.id);
        list.appendChild(item);
    });
}

function loadConversation(id) {
    const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
    const conv = conversations.find(c => c.id == id);
    
    if(conv) {
        currentConversationId = conv.id;
        conversationHistory = conv.history;
        
        // Clear and reload messages
        chatMessages.innerHTML = '';
        conversationHistory.forEach(item => {
            appendMessage(item.user, 'user');
            appendMessage(item.ai, 'ai');
        });
        
        // Update active state
        document.querySelectorAll('.conversation-item').forEach(el => {
            el.classList.remove('active');
        });
        document.querySelector(`[data-id="${id}"]`).classList.add('active');
        
        // Close sidebar on mobile
        if(window.innerWidth <= 768) {
            toggleSidebar();
        }
    }
}

// ========== SETTINGS ==========
function openSettings() {
    settingsModal.classList.add('active');
}

function closeSettings() {
    settingsModal.classList.remove('active');
}

function saveSettings() {
    const settings = {
        temperature: document.getElementById('temperature').value,
        maxTokens: document.getElementById('maxTokens').value,
        streamResponse: document.getElementById('streamResponse').checked,
        saveHistory: document.getElementById('saveHistory').checked
    };
    
    localStorage.setItem('chatSettings', JSON.stringify(settings));
    closeSettings();
    
    alert('تنظیمات ذخیره شد!');
}

function loadSettings() {
    const saved = localStorage.getItem('chatSettings');
    if(saved) {
        const settings = JSON.parse(saved);
        if(document.getElementById('temperature')) {
            document.getElementById('temperature').value = settings.temperature || 0.7;
            document.getElementById('tempValue').textContent = settings.temperature || 0.7;
        }
        if(document.getElementById('maxTokens')) {
            document.getElementById('maxTokens').value = settings.maxTokens || 2000;
        }
        if(document.getElementById('streamResponse')) {
            document.getElementById('streamResponse').checked = settings.streamResponse !== false;
        }
        if(document.getElementById('saveHistory')) {
            document.getElementById('saveHistory').checked = settings.saveHistory !== false;
        }
    }
}

// Close modal on outside click
window.onclick = function(event) {
    if(event.target === settingsModal) {
        closeSettings();
    }
}
</script>