shkikel

Paused

App Files Files Community

CORVO-AI commited on Mar 28

Commit

f799773

verified ·

1 Parent(s): f9ae9c1

Upload templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +2145 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,2145 @@

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>SHKIKEL GROUP - OBD-II</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        :root {
+            --bg: #ffffff;
+            --surface: #f8f8f8;
+            --surface2: #f0f0f0;
+            --surface3: #e8e8e8;
+            --border: rgba(0,0,0,0.08);
+            --border2: rgba(0,0,0,0.14);
+            --accent: #dc2626;
+            --accent2: #b91c1c;
+            --accent-dim: rgba(220,38,38,0.08);
+            --accent-glow: rgba(220,38,38,0.22);
+            --text: #0a0a0a;
+            --text2: #444444;
+            --muted: #999999;
+            --green: #16a34a;
+            --red: #dc2626;
+            --dark: #111111;
+            --dark2: #1a1a1a;
+            --radius: 14px;
+        }
+        html, body {
+            height: 100%;
+            height: 100dvh;
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'Cairo', sans-serif;
+            overflow: hidden;
+        }
+        /* ══════════════════════════════
+           LAYOUT
+        ══════════════════════════════ */
+        .app {
+            display: flex;
+            height: 100vh;
+            height: 100dvh;
+            position: relative;
+        }
+        /* ══════════════════════════════
+           SIDEBAR
+        ══════════════════════════════ */
+        .sidebar {
+            width: 270px;
+            background: var(--dark);
+            border-left: 1px solid rgba(220,38,38,0.18);
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 0;
+            overflow: hidden;
+            position: relative;
+        }
+        .sidebar::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent), #ff6b6b, var(--accent));
+            background-size: 200% 100%;
+            animation: shimmer 3s linear infinite;
+        }
+        @keyframes shimmer {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+        /* Logo area */
+        .sidebar-logo {
+            padding: 32px 20px 22px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+            border-bottom: 1px solid rgba(255,255,255,0.06);
+            background: linear-gradient(180deg, rgba(220,38,38,0.06) 0%, transparent 100%);
+        }
+        .logo-ring {
+            position: relative;
+            width: 88px;
+            height: 88px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .logo-ring::before {
+            content: '';
+            position: absolute;
+            inset: -3px;
+            border-radius: 50%;
+            background: conic-gradient(var(--accent), transparent, var(--accent));
+            animation: spin 4s linear infinite;
+        }
+        .logo-ring::after {
+            content: '';
+            position: absolute;
+            inset: -1px;
+            border-radius: 50%;
+            background: var(--dark);
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .logo-img {
+            width: 72px;
+            height: 72px;
+            object-fit: contain;
+            filter: drop-shadow(0 0 18px rgba(220,38,38,0.5));
+            position: relative;
+            z-index: 1;
+        }
+        .logo-name {
+            font-size: 13px;
+            font-weight: 800;
+            letter-spacing: 2.5px;
+            color: #ffffff;
+            text-align: center;
+        }
+        .logo-sub {
+            font-size: 8.5px;
+            color: var(--accent);
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 2px;
+            text-align: center;
+            margin-top: -5px;
+        }
+        .status-pill {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(22,163,74,0.1);
+            border: 1px solid rgba(22,163,74,0.25);
+            border-radius: 20px;
+            padding: 4px 12px;
+            font-size: 10px;
+            color: #4ade80;
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 1px;
+            margin-top: 2px;
+        }
+        .s-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #4ade80;
+            animation: blink 2s infinite;
+            box-shadow: 0 0 6px #4ade80;
+        }
+        @keyframes blink {
+            0%,100% { opacity:1; }
+            50% { opacity:0.3; }
+        }
+        /* Sidebar buttons */
+        .sidebar-btns {
+            padding: 14px 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 7px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        .sb-btn {
+            display: flex;
+            align-items: center;
+            gap: 9px;
+            padding: 10px 14px;
+            border-radius: 10px;
+            border: 1px solid rgba(255,255,255,0.07);
+            background: rgba(255,255,255,0.03);
+            color: rgba(255,255,255,0.65);
+            font-family: 'Cairo', sans-serif;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            width: 100%;
+            text-align: right;
+        }
+        .sb-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
+        .sb-btn:hover {
+            background: rgba(220,38,38,0.12);
+            color: #ffffff;
+            border-color: rgba(220,38,38,0.3);
+            transform: translateX(-2px);
+        }
+        .sb-btn.red:hover {
+            background: rgba(220,38,38,0.15);
+            color: #ff6b6b;
+            border-color: rgba(220,38,38,0.35);
+        }
+        /* Quick prompts */
+        .sidebar-quick {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px 16px;
+        }
+        .sidebar-quick::-webkit-scrollbar { width: 3px; }
+        .sidebar-quick::-webkit-scrollbar-thumb { background: rgba(220,38,38,0.3); border-radius: 2px; }
+        .ql {
+            font-size: 9px;
+            color: rgba(255,255,255,0.25);
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 2.5px;
+            text-transform: uppercase;
+            margin-bottom: 12px;
+            padding-right: 2px;
+        }
+        .qp-btn {
+            display: flex;
+            align-items: flex-start;
+            gap: 9px;
+            padding: 10px 12px;
+            border-radius: 10px;
+            border: 1px solid rgba(255,255,255,0.05);
+            background: rgba(255,255,255,0.02);
+            color: rgba(255,255,255,0.55);
+            font-family: 'Cairo', sans-serif;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s;
+            width: 100%;
+            text-align: right;
+            margin-bottom: 6px;
+            line-height: 1.55;
+        }
+        .qp-btn svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
+        .qp-btn:hover {
+            background: rgba(220,38,38,0.1);
+            border-color: rgba(220,38,38,0.25);
+            color: #ffffff;
+            transform: translateX(-2px);
+        }
+        /* ══════════════════════════════
+           MAIN CHAT AREA
+        ══════════════════════════════ */
+        .main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            background: var(--bg);
+            position: relative;
+        }
+        /* Subtle grid pattern on bg */
+        .main::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-image:
+                linear-gradient(rgba(220,38,38,0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(220,38,38,0.03) 1px, transparent 1px);
+            background-size: 40px 40px;
+            pointer-events: none;
+            z-index: 0;
+        }
+        /* Messages scroll area */
+        .messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 28px 28px 16px;
+            scroll-behavior: smooth;
+            position: relative;
+            z-index: 1;
+        }
+        .messages::-webkit-scrollbar { width: 4px; }
+        .messages::-webkit-scrollbar-thumb { background: rgba(220,38,38,0.2); border-radius: 2px; }
+        /* ══════════════════════════════
+           WELCOME SCREEN
+        ══════════════════════════════ */
+        .welcome {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 55vh;
+            text-align: center;
+            padding: 40px 20px;
+            gap: 14px;
+        }
+        .welcome-logo-wrap {
+            position: relative;
+            width: 120px;
+            height: 120px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .welcome-logo-wrap::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(220,38,38,0.15) 0%, transparent 70%);
+            animation: pulse 3s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%,100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.15); opacity: 0.6; }
+        }
+        .welcome-logo {
+            width: 100px;
+            height: 100px;
+            object-fit: contain;
+            filter: drop-shadow(0 0 30px rgba(220,38,38,0.45));
+            animation: float 4s ease-in-out infinite;
+            position: relative;
+            z-index: 1;
+        }
+        @keyframes float {
+            0%,100% { transform: translateY(0); }
+            50% { transform: translateY(-8px); }
+        }
+        .welcome h1 {
+            font-size: 28px;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--dark) 0%, var(--accent) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .welcome p {
+            color: var(--text2);
+            font-size: 13px;
+            max-width: 400px;
+            line-height: 1.85;
+        }
+        .ready-tag {
+            display: inline-flex;
+            align-items: center;
+            gap: 7px;
+            padding: 6px 16px;
+            background: var(--dark);
+            border: 1px solid rgba(220,38,38,0.3);
+            border-radius: 20px;
+            font-size: 10px;
+            color: var(--accent);
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 1.5px;
+            box-shadow: 0 4px 20px rgba(220,38,38,0.12);
+        }
+        .welcome-chips {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            justify-content: center;
+            max-width: 480px;
+            margin-top: 4px;
+        }
+        .chip {
+            padding: 6px 14px;
+            background: var(--surface);
+            border: 1px solid var(--border2);
+            border-radius: 20px;
+            font-size: 11px;
+            color: var(--text2);
+            cursor: pointer;
+            transition: all 0.18s;
+            font-family: 'Cairo', sans-serif;
+        }
+        .chip:hover {
+            background: var(--accent);
+            color: #fff;
+            border-color: var(--accent);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(220,38,38,0.25);
+        }
+        /* ══════════════════════════════
+           MESSAGES
+        ══════════════════════════════ */
+        .msg {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            animation: fadeUp 0.25s ease;
+        }
+        @keyframes fadeUp {
+            from { opacity:0; transform:translateY(10px); }
+            to { opacity:1; transform:translateY(0); }
+        }
+        .msg.user { flex-direction: row-reverse; }
+        .msg-av {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            overflow: hidden;
+        }
+        .msg.user .msg-av {
+            background: linear-gradient(135deg, var(--accent), #ff6b6b);
+            box-shadow: 0 4px 12px rgba(220,38,38,0.3);
+        }
+        .msg.assistant .msg-av {
+            background: var(--dark);
+            border: 1px solid rgba(220,38,38,0.2);
+        }
+        .msg-av svg { width: 17px; height: 17px; color: #fff; }
+        .msg-av img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
+        .msg-body {
+            max-width: 72%;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+        }
+        .msg.user .msg-body { align-items: flex-end; }
+        .msg-bubble {
+            padding: 12px 16px;
+            border-radius: 16px;
+            font-size: 14px;
+            line-height: 1.75;
+            word-break: break-word;
+        }
+        .msg.user .msg-bubble {
+            background: linear-gradient(135deg, var(--accent), #ff6b6b);
+            color: #fff;
+            border-bottom-left-radius: 4px;
+            box-shadow: 0 4px 16px rgba(220,38,38,0.25);
+        }
+        .msg.assistant .msg-bubble {
+            background: #ffffff;
+            border: 1px solid var(--border2);
+            color: var(--text);
+            border-bottom-right-radius: 4px;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+        }
+        .msg-time {
+            font-size: 10px;
+            color: var(--muted);
+            margin-top: 5px;
+            font-family: 'JetBrains Mono', monospace;
+            padding: 0 3px;
+        }
+        /* Bubble content styles */
+        .msg-bubble h1,.msg-bubble h2,.msg-bubble h3,.msg-bubble h4 {
+            font-weight: 700; margin: 10px 0 5px; color: var(--accent);
+        }
+        .msg-bubble h1{font-size:17px} .msg-bubble h2{font-size:15px}
+        .msg-bubble h3{font-size:14px} .msg-bubble h4{font-size:13px}
+        .msg-bubble p { margin: 5px 0; }
+        .msg-bubble ul,.msg-bubble ol { padding-right: 18px; margin: 5px 0; }
+        .msg-bubble li { margin: 3px 0; }
+        .msg-bubble strong { color: var(--accent); font-weight: 700; }
+        .msg-bubble em { color: #7c3aed; }
+        .msg-bubble a { color: var(--accent); text-decoration: underline; }
+        .msg-bubble blockquote {
+            border-right: 3px solid var(--accent);
+            padding-right: 10px;
+            color: var(--text2);
+            margin: 6px 0;
+            background: var(--accent-dim);
+            border-radius: 0 6px 6px 0;
+            padding: 6px 10px;
+        }
+        .msg-bubble hr { border:none; border-top:1px solid var(--border2); margin:8px 0; }
+        .msg-bubble code {
+            background: rgba(220,38,38,0.08);
+            border: 1px solid rgba(220,38,38,0.18);
+            padding: 1px 6px;
+            border-radius: 4px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            color: var(--accent);
+        }
+        .msg-bubble pre {
+            background: var(--dark);
+            border: 1px solid rgba(220,38,38,0.15);
+            border-radius: 10px;
+            overflow: hidden;
+            margin: 8px 0;
+            position: relative;
+        }
+        .msg-bubble pre .code-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 7px 12px;
+            background: rgba(220,38,38,0.08);
+            border-bottom: 1px solid rgba(220,38,38,0.12);
+        }
+        .msg-bubble pre .code-lang {
+            font-size: 10px;
+            color: var(--accent);
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 1px;
+        }
+        .msg-bubble pre code {
+            display: block;
+            padding: 12px;
+            background: transparent;
+            border: none;
+            font-size: 12px;
+            color: #e2e8f0;
+            overflow-x: auto;
+            white-space: pre;
+        }
+        .copy-btn {
+            background: transparent;
+            border: 1px solid rgba(255,255,255,0.12);
+            color: rgba(255,255,255,0.4);
+            padding: 3px 8px;
+            border-radius: 5px;
+            font-size: 10px;
+            cursor: pointer;
+            font-family: 'JetBrains Mono', monospace;
+            transition: all 0.15s;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .copy-btn:hover {
+            color: #fff;
+            border-color: rgba(220,38,38,0.4);
+            background: rgba(220,38,38,0.1);
+        }
+        .copy-btn svg { width: 11px; height: 11px; }
+        /* DTC badge */
+        .dtc-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            background: rgba(220,38,38,0.08);
+            border: 1px solid rgba(220,38,38,0.25);
+            border-radius: 6px;
+            padding: 2px 8px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--accent);
+        }
+        .dtc-led {
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background: var(--accent);
+            animation: blink 1.5s infinite;
+            box-shadow: 0 0 5px var(--accent);
+        }
+        /* Message images */
+        .msg-images {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            margin-bottom: 8px;
+        }
+        .msg-images img {
+            width: 120px;
+            height: 90px;
+            object-fit: cover;
+            border-radius: 8px;
+            cursor: pointer;
+            border: 1px solid var(--border2);
+            transition: all 0.2s;
+        }
+        .msg-images img:hover {
+            opacity: 0.85;
+            transform: scale(1.02);
+            box-shadow: 0 4px 14px rgba(220,38,38,0.2);
+        }
+        /* Web results */
+        .web-results {
+            margin-top: 10px;
+            background: var(--surface);
+            border: 1px solid var(--border2);
+            border-radius: 10px;
+            padding: 12px;
+            font-size: 12px;
+        }
+        .web-results h4 {
+            color: var(--accent) !important;
+            font-size: 12px !important;
+            margin: 0 0 8px !important;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .web-results h4 svg { width: 13px; height: 13px; }
+        .web-result-item {
+            padding: 7px 0;
+            border-bottom: 1px solid var(--border);
+        }
+        .web-result-item:last-child { border-bottom: none; }
+        .web-result-title {
+            font-weight: 700;
+            color: var(--text);
+            margin-bottom: 3px;
+            font-size: 12px;
+        }
+        .web-result-snippet {
+            color: var(--text2);
+            font-size: 11px;
+            line-height: 1.5;
+            margin-bottom: 3px;
+        }
+        .web-result-url {
+            color: var(--accent);
+            font-size: 10px;
+            text-decoration: none;
+            font-family: 'JetBrains Mono', monospace;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .web-result-url svg { width: 10px; height: 10px; }
+        /* Image results */
+        .img-results {
+            margin-top: 10px;
+        }
+        .img-results-header {
+            font-size: 11px;
+            color: var(--text2);
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .img-results-header svg { width: 12px; height: 12px; color: var(--accent); }
+        .img-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 6px;
+        }
+        .img-card {
+            aspect-ratio: 4/3;
+            border-radius: 8px;
+            overflow: hidden;
+            background: var(--surface2);
+            border: 1px solid var(--border2);
+            cursor: pointer;
+            position: relative;
+        }
+        .img-card img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.2s;
+        }
+        .img-card:hover img { transform: scale(1.05); }
+        .img-card-overlay {
+            position: absolute;
+            inset: 0;
+            background: rgba(220,38,38,0.55);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.2s;
+            font-size: 11px;
+            color: #fff;
+            gap: 4px;
+        }
+        .img-card-overlay svg { width: 13px; height: 13px; }
+        .img-card:hover .img-card-overlay { opacity: 1; }
+        .img-card.errored { cursor: default; }
+        .img-card.errored img { display: none; }
+        .img-err {
+            position: absolute;
+            inset: 0;
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            color: var(--muted);
+            font-size: 10px;
+        }
+        .img-err svg { width: 16px; height: 16px; }
+        .img-card.errored .img-err { display: flex; }
+        /* Typing indicator */
+        .typing-wrap {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 18px;
+            align-items: flex-start;
+        }
+        .typing-av {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            background: var(--dark);
+            border: 1px solid rgba(220,38,38,0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            overflow: hidden;
+        }
+        .typing-av img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
+        .typing-dots {
+            background: #ffffff;
+            border: 1px solid var(--border2);
+            border-radius: 16px;
+            border-bottom-right-radius: 4px;
+            padding: 13px 18px;
+            display: flex;
+            gap: 5px;
+            align-items: center;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+        }
+        .typing-dots span {
+            width: 7px;
+            height: 7px;
+            border-radius: 50%;
+            background: var(--muted);
+            animation: bounce 1.2s infinite;
+        }
+        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes bounce {
+            0%,60%,100% { transform: translateY(0); background: var(--muted); }
+            30% { transform: translateY(-6px); background: var(--accent); }
+        }
+        /* ══════════════════════════════
+           INPUT AREA
+        ══════════════════════════════ */
+        .input-area {
+            padding: 12px 24px 18px;
+            background: var(--bg);
+            border-top: 1px solid var(--border2);
+            position: relative;
+            z-index: 1;
+        }
+        .input-area::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(220,38,38,0.3), transparent);
+        }
+        .file-prev {
+            margin-bottom: 8px;
+        }
+        .file-prev-inner {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: var(--surface);
+            border: 1px solid var(--border2);
+            border-radius: 8px;
+            padding: 6px 10px;
+            font-size: 12px;
+            color: var(--text2);
+        }
+        .file-prev-inner svg { width: 13px; height: 13px; color: var(--accent); }
+        .file-rm {
+            background: transparent;
+            border: none;
+            color: var(--muted);
+            cursor: pointer;
+            padding: 0 2px;
+            display: flex;
+            align-items: center;
+            transition: color 0.15s;
+        }
+        .file-rm:hover { color: var(--red); }
+        .file-rm svg { width: 13px; height: 13px; }
+        /* Image previews */
+        .img-prev-header {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 11px;
+            color: var(--text2);
+            margin-bottom: 6px;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .img-prev-header svg { width: 12px; height: 12px; color: var(--accent); }
+        .img-prev-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+        }
+        .img-prev-item {
+            position: relative;
+            width: 62px;
+            height: 62px;
+            border-radius: 9px;
+            overflow: hidden;
+            border: 1px solid rgba(220,38,38,0.2);
+            box-shadow: 0 2px 8px rgba(220,38,38,0.1);
+        }
+        .img-prev-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .img-prev-rm {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: rgba(220,38,38,0.85);
+            border: none;
+            color: #fff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.15s;
+        }
+        .img-prev-rm:hover { background: var(--accent); }
+        .img-prev-rm svg { width: 10px; height: 10px; }
+        .img-uploading {
+            position: absolute;
+            inset: 0;
+            background: rgba(0,0,0,0.6);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 3px;
+            font-size: 9px;
+            color: #fff;
+        }
+        /* Input row */
+        .input-row {
+            display: flex;
+            gap: 8px;
+            align-items: flex-end;
+        }
+        .input-box {
+            flex: 1;
+            background: #ffffff;
+            border: 1.5px solid var(--border2);
+            border-radius: 14px;
+            display: flex;
+            align-items: flex-end;
+            gap: 4px;
+            padding: 9px 12px;
+            transition: all 0.2s;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+        .input-box:focus-within {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px rgba(220,38,38,0.08), 0 2px 10px rgba(0,0,0,0.05);
+        }
+        .input-box textarea {
+            flex: 1;
+            background: transparent;
+            border: none;
+            outline: none;
+            color: var(--text);
+            font-family: 'Cairo', sans-serif;
+            font-size: 14px;
+            resize: none;
+            line-height: 1.5;
+            max-height: 130px;
+            min-height: 24px;
+            padding: 0;
+            direction: rtl;
+        }
+        .input-box textarea::placeholder { color: var(--muted); }
+        .input-icons {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            flex-shrink: 0;
+        }
+        .ic-btn {
+            width: 30px;
+            height: 30px;
+            border-radius: 7px;
+            border: none;
+            background: transparent;
+            color: var(--muted);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s;
+            flex-shrink: 0;
+        }
+        .ic-btn:hover {
+            background: var(--accent-dim);
+            color: var(--accent);
+        }
+        .ic-btn svg { width: 15px; height: 15px; }
+        .ic-btn.active { color: var(--accent); }
+        input[type="file"] { display: none; }
+        .send-btn {
+            width: 46px;
+            height: 46px;
+            border-radius: 13px;
+            border: none;
+            background: linear-gradient(135deg, var(--accent), #ff6b6b);
+            color: #fff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.2s;
+            box-shadow: 0 4px 16px rgba(220,38,38,0.35);
+        }
+        .send-btn:hover {
+            transform: scale(1.06);
+            box-shadow: 0 6px 22px rgba(220,38,38,0.45);
+        }
+        .send-btn:disabled {
+            opacity: 0.5;
+            transform: none;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+        .send-btn svg { width: 18px; height: 18px; }
+        /* Spinner */
+        .spinner {
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spinAnim 0.7s linear infinite;
+        }
+        .spinner-sm {
+            width: 12px;
+            height: 12px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spinAnim 0.7s linear infinite;
+        }
+        @keyframes spinAnim { to { transform: rotate(360deg); } }
+        /* Status toast */
+        .toast {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 9px 14px;
+            border-radius: 9px;
+            font-size: 12px;
+            margin-bottom: 10px;
+            animation: fadeUp 0.2s ease;
+        }
+        .toast.success {
+            background: rgba(22,163,74,0.08);
+            border: 1px solid rgba(22,163,74,0.2);
+            color: var(--green);
+        }
+        .toast.error {
+            background: rgba(220,38,38,0.08);
+            border: 1px solid rgba(220,38,38,0.2);
+            color: var(--red);
+        }
+        .toast svg { width: 13px; height: 13px; flex-shrink: 0; }
+        /* ══════════════════════════════
+           IMAGE MODAL
+        ══════════════════════════════ */
+        .modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.94);
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s;
+        }
+        .modal.active { opacity: 1; pointer-events: all; }
+        .modal img {
+            max-width: 90vw;
+            max-height: 88vh;
+            border-radius: 12px;
+            object-fit: contain;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
+        }
+        .modal-close {
+            position: absolute;
+            top: 16px;
+            left: 16px;
+            width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            background: rgba(220,38,38,0.15);
+            border: 1px solid rgba(220,38,38,0.3);
+            color: #fff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s;
+        }
+        .modal-close:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+        .modal-close svg { width: 16px; height: 16px; }
+        /* ══════════════════════════════
+           MOBILE TOGGLE BUTTON
+        ══════════════════════════════ */
+        .mob-toggle {
+            display: none;
+            position: fixed;
+            top: 12px;
+            right: 12px;
+            z-index: 200;
+            width: 40px;
+            height: 40px;
+            border-radius: 11px;
+            background: var(--dark);
+            border: 1px solid rgba(220,38,38,0.25);
+            color: #ffffff;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s;
+            box-shadow: 0 4px 14px rgba(0,0,0,0.2);
+        }
+        .mob-toggle:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+        .mob-toggle svg { width: 17px; height: 17px; }
+        /* Sidebar overlay for mobile */
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.65);
+            z-index: 150;
+            backdrop-filter: blur(2px);
+        }
+        /* ══════════════════════════════
+           RESPONSIVE — MOBILE
+        ══════════════════════════════ */
+        @media (max-width: 768px) {
+            .mob-toggle { display: flex; }
+            .sidebar {
+                position: fixed;
+                top: 0;
+                right: 0;
+                height: 100%;
+                z-index: 160;
+                transform: translateX(100%);
+                transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
+                width: 265px;
+            }
+            .sidebar.open { transform: translateX(0); }
+            .sidebar-overlay.active { display: block; }
+            .main { width: 100%; }
+            .messages { padding: 60px 14px 12px; }
+            .msg-body { max-width: 84%; }
+            .msg-bubble { font-size: 13px; padding: 10px 13px; }
+            .welcome { min-height: 50vh; padding: 60px 16px 20px; }
+            .welcome-logo { width: 80px; height: 80px; }
+            .welcome h1 { font-size: 21px; }
+            .welcome p { font-size: 12px; }
+            .input-area { padding: 8px 12px 14px; }
+            .input-box textarea { font-size: 13px; }
+            .send-btn { width: 42px; height: 42px; border-radius: 11px; }
+            .img-grid { grid-template-columns: repeat(2, 1fr); }
+            .welcome-chips { display: none; }
+        }
+        @media (max-width: 400px) {
+            .msg-body { max-width: 90%; }
+            .msg-bubble { font-size: 12px; }
+            .welcome h1 { font-size: 18px; }
+        }
+    </style>
+</head>
+<body>
+<div class="app">
+    <!-- ── SIDEBAR ── -->
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-logo">
+            <div class="logo-ring">
+                <img src="{{ url_for('static', filename='logo.png') }}" alt="SHKIKEL" class="logo-img">
+            </div>
+            <div class="logo-name">SHKIKEL GROUP</div>
+            <div class="logo-sub">OBD-II DIAGNOSTIC SYSTEM</div>
+            <div class="status-pill" id="statusPill">
+                <div class="s-dot" id="sDot"></div>
+                <span id="sLabel">ONLINE</span>
+            </div>
+        </div>
+        <div class="sidebar-btns">
+            <button class="sb-btn" onclick="exportChat()">
+                <i data-lucide="download"></i>
+                <span>تصدير السجل</span>
+            </button>
+            <button class="sb-btn red" onclick="clearChat()">
+                <i data-lucide="trash-2"></i>
+                <span>مسح المحادثة</span>
+            </button>
+        </div>
+        <div class="sidebar-quick">
+            <div class="ql">اقتراحات سريعة</div>
+            <button class="qp-btn" onclick="qs('عندي كود P0300 على تويوتا كامري 2019. شو يعني وكيف أصلحه؟')">
+                <i data-lucide="wrench"></i>
+                تشخيص كود عطل OBD-II
+            </button>
+            <button class="qp-btn" onclick="qs('لمبة الماكينة مولعة والسيارة بترجف على الرالنتي. شو المشكلة؟')">
+                <i data-lucide="alert-triangle"></i>
+                وصف أعراض السيارة
+            </button>
+            <button class="qp-btn" onclick="document.getElementById('imageInput').click()">
+                <i data-lucide="camera"></i>
+                تحليل صورة / شاشة ماسح
+            </button>
+            <button class="qp-btn" onclick="qs('شو هي ال��كواد من P0100 لـ P0199 وعلى شو بتدل؟')">
+                <i data-lucide="list"></i>
+                مرجع أكواد OBD-II
+            </button>
+            <button class="qp-btn" onclick="qs('كيف أعمل صيانة دورية لسيارتي وشو أهم النقاط؟')">
+                <i data-lucide="settings"></i>
+                نصائح الصيانة الدورية
+            </button>
+        </div>
+    </aside>
+    <!-- Overlay for mobile -->
+    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
+    <!-- Mobile toggle -->
+    <button class="mob-toggle" id="mobToggle" onclick="toggleSidebar()">
+        <i data-lucide="menu"></i>
+    </button>
+    <!-- ── MAIN ── -->
+    <main class="main">
+        <div class="messages" id="messages">
+            <div class="welcome" id="welcomeScreen">
+                <div class="welcome-logo-wrap">
+                    <img src="{{ url_for('static', filename='logo.png') }}" alt="SHKIKEL" class="welcome-logo
+You: complete from the same point you sttoped dont back to 0
+AI THINKING...AI: Continuing from where I stopped:
+```html
+                    ">
+                </div>
+                <h1>مساعد التشخيص الذكي</h1>
+                <p>أدخل رمز العطل OBD-II أو صوّر أعراض سيارتك. سأشخّص المشكلة وأوضح السبب وأريك موقع القطعة بالصور.</p>
+                <div class="ready-tag">
+                    <div class="s-dot"></div>
+                    READY FOR DIAGNOSTICS
+                </div>
+                <div class="welcome-chips">
+                    <span class="chip" onclick="qs('شو يعني كود P0420؟')">P0420 كود</span>
+                    <span class="chip" onclick="qs('سيارتي بتدخن دخان أبيض')">دخان أبيض</span>
+                    <span class="chip" onclick="qs('السيارة ما بتشتغل بالصبح')">مشكلة تشغيل</span>
+                    <span class="chip" onclick="qs('شو يعني كود P0171؟')">P0171 كود</span>
+                    <span class="chip" onclick="qs('فرامل السيارة بتصرصر')">صوت فرامل</span>
+                    <span class="chip" onclick="qs('كيف أغير زيت المحرك؟')">تغيير زيت</span>
+                </div>
+            </div>
+        </div>
+        <div class="input-area">
+            <div class="file-prev" id="filePrev"></div>
+            <div id="imgPrevContainer"></div>
+            <div class="input-row">
+                <div class="input-box">
+                    <textarea id="msgInput" placeholder="أدخل كود العطل (مثال: P0420) أو اوصف المشكلة..." rows="1"></textarea>
+                    <div class="input-icons">
+                        <button class="ic-btn" onclick="document.getElementById('fileInput').click()" title="رفع ملف">
+                            <i data-lucide="paperclip"></i>
+                        </button>
+                        <button class="ic-btn" onclick="document.getElementById('imageInput').click()" title="رفع صورة">
+                            <i data-lucide="image"></i>
+                        </button>
+                        <button class="ic-btn" id="micBtn" title="إدخال صوتي">
+                            <i data-lucide="mic"></i>
+                        </button>
+                    </div>
+                </div>
+                <button class="send-btn" id="sendBtn" onclick="sendMessage()">
+                    <i data-lucide="send"></i>
+                </button>
+            </div>
+            <input type="file" id="fileInput" accept=".txt,.json,.csv,.md,.log" onchange="handleFileSelect(event)">
+            <input type="file" id="imageInput" accept="image/png,image/jpeg,image/jpg,image/gif,image/webp,image/bmp" multiple onchange="handleImageSelect(event)">
+        </div>
+    </main>
+</div>
+<!-- Image Modal -->
+<div class="modal" id="imgModal" onclick="closeModal()">
+    <button class="modal-close" onclick="closeModal()"><i data-lucide="x"></i></button>
+    <img id="modalImg" src="" alt="" onclick="event.stopPropagation()">
+</div>
+<script>
+    /* ── INIT ── */
+    document.addEventListener('DOMContentLoaded', () => {
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+        initSpeech();
+        checkHealth();
+        msgInput.focus();
+    });
+    function ri() { if (typeof lucide !== 'undefined') setTimeout(() => lucide.createIcons(), 50); }
+    const sessionId = 'session_' + Date.now();
+    let selectedFile = null;
+    let selectedImages = [];
+    let uploadedImageUrls = [];
+    let isSending = false;
+    /* ── TEXTAREA AUTO-RESIZE ── */
+    const msgInput = document.getElementById('msgInput');
+    msgInput.addEventListener('input', function () {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 130) + 'px';
+    });
+    msgInput.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+    });
+    /* ── SIDEBAR TOGGLE ── */
+    function toggleSidebar() {
+        const sb = document.getElementById('sidebar');
+        const ov = document.getElementById('sidebarOverlay');
+        sb.classList.toggle('open');
+        ov.classList.toggle('active');
+    }
+    function closeSidebar() {
+        document.getElementById('sidebar').classList.remove('open');
+        document.getElementById('sidebarOverlay').classList.remove('active');
+    }
+    /* ── UTILS ── */
+    function escHtml(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
+    function qs(text) { msgInput.value = text; closeSidebar(); sendMessage(); }
+    /* ── IMAGE HANDLING ── */
+    async function handleImageSelect(e) {
+    const files = Array.from(e.target.files);
+    if (!files.length) return;
+    // Mobile fix: reset input so same file can be selected again
+    const inputEl = document.getElementById('imageInput');
+    const valid = ['image/png','image/jpeg','image/jpg','image/gif','image/webp','image/bmp'];
+    const invalidFiles = files.filter(f => !valid.includes(f.type.toLowerCase()));
+    if (invalidFiles.length > 0) {
+        showToast('نوع ملف غير مدعوم. استخدم: PNG, JPG, GIF, WEBP', 'error');
+        inputEl.value = '';
+        return;
+    }
+    const oversized = files.filter(f => f.size > 10 * 1024 * 1024);
+    if (oversized.length > 0) {
+        showToast('حجم الصورة يجب أن يكون أقل من 10MB', 'error');
+        inputEl.value = '';
+        return;
+    }
+    selectedImages = files;
+    renderImgPreviews(files);
+    await uploadAllImages();
+}
+    function renderImgPreviews(files) {
+        const c = document.getElementById('imgPrevContainer');
+        c.innerHTML = '';
+        if (!files.length) return;
+        const wrap = document.createElement('div');
+        wrap.className = 'img-prev-wrap';
+        const hdr = document.createElement('div');
+        hdr.className = 'img-prev-header';
+        hdr.innerHTML = `<i data-lucide="image"></i><span>الصور المحددة (${files.length})</span>`;
+        wrap.appendChild(hdr);
+        const grid = document.createElement('div');
+        grid.className = 'img-prev-grid';
+        files.forEach((file, i) => {
+            const item = document.createElement('div');
+            item.className = 'img-prev-item';
+            item.dataset.index = i;
+            const img = document.createElement('img');
+            img.src = URL.createObjectURL(file);
+            item.appendChild(img);
+            const rm = document.createElement('button');
+            rm.className = 'img-prev-rm';
+            rm.innerHTML = '<i data-lucide="x"></i>';
+            rm.onclick = (ev) => { ev.stopPropagation(); removeImage(i); };
+            item.appendChild(rm);
+            const upl = document.createElement('div');
+            upl.className = 'img-uploading';
+            upl.innerHTML = '<div class="spinner-sm"></div><span>رفع...</span>';
+            item.appendChild(upl);
+            grid.appendChild(item);
+        });
+        wrap.appendChild(grid);
+        c.appendChild(wrap);
+        ri();
+    }
+    async function uploadAllImages() {
+    uploadedImageUrls = [];
+    for (let i = 0; i < selectedImages.length; i++) {
+        const file = selectedImages[i];
+        const item = document.querySelector(`.img-prev-item[data-index="${i}"]`);
+        try {
+            // Mobile fix: convert to blob first to ensure proper encoding
+            const blob = await readFileAsBlob(file);
+            const fd = new FormData();
+            fd.append('image', blob, file.name || `image_${i}.jpg`);
+            const res = await fetch('/api/upload-image', {
+                method: 'POST',
+                body: fd,
+                // Mobile fix: do NOT set Content-Type header manually
+                // Let the browser set it with the correct boundary
+            });
+            if (!res.ok) {
+                throw new Error(`HTTP error: ${res.status}`);
+            }
+            const data = await res.json();
+            if (data.success && data.url) {
+                uploadedImageUrls.push(data.url);
+                if (item) {
+                    const u = item.querySelector('.img-uploading');
+                    if (u) u.remove();
+                }
+            } else {
+                throw new Error(data.error || 'فشل رفع الصورة');
+            }
+        } catch (err) {
+            console.error('Upload error:', err);
+            showToast(`فشل رفع الصورة ${i+1}: ${err.message}`, 'error');
+            if (item) {
+                item.style.opacity = '0.5';
+                item.style.border = '2px solid var(--red)';
+            }
+        }
+    }
+    if (uploadedImageUrls.length > 0) {
+        showToast(`تم رفع ${uploadedImageUrls.length} صورة بنجاح`, 'success');
+    }
+}
+function readFileAsBlob(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const arr = new Uint8Array(e.target.result);
+            const blob = new Blob([arr], { type: file.type || 'image/jpeg' });
+            resolve(blob);
+        };
+        reader.onerror = () => reject(new Error('فشل قراءة الملف'));
+        reader.readAsArrayBuffer(file);
+    });
+}
+    function removeImage(index) {
+        selectedImages = selectedImages.filter((_,i) => i !== index);
+        uploadedImageUrls = uploadedImageUrls.filter((_,i) => i !== index);
+        if (!selectedImages.length) {
+            document.getElementById('imgPrevContainer').innerHTML = '';
+            document.getElementById('imageInput').value = '';
+        } else {
+            renderImgPreviews(selectedImages);
+            uploadAllImages();
+        }
+    }
+    function clearImgPreviews() {
+        selectedImages = [];
+        uploadedImageUrls = [];
+        document.getElementById('imgPrevContainer').innerHTML = '';
+        document.getElementById('imageInput').value = '';
+    }
+    /* ── FILE HANDLING ── */
+    function handleFileSelect(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        selectedFile = file;
+        const prev = document.getElementById('filePrev');
+        prev.innerHTML = '';
+        const inner = document.createElement('div');
+        inner.className = 'file-prev-inner';
+        inner.innerHTML = `<i data-lucide="file-text"></i><span>${escHtml(file.name)} (${(file.size/1024).toFixed(1)} KB)</span>`;
+        const rm = document.createElement('button');
+        rm.className = 'file-rm';
+        rm.innerHTML = '<i data-lucide="x"></i>';
+        rm.onclick = removeFile;
+        inner.appendChild(rm);
+        prev.appendChild(inner);
+        ri();
+    }
+    function removeFile() {
+        selectedFile = null;
+        document.getElementById('filePrev').innerHTML = '';
+        document.getElementById('fileInput').value = '';
+    }
+    /* ── FORMAT MESSAGE ── */
+    function formatMsg(text) {
+        if (!text) return '';
+        let f = text;
+        f = f.replace(/```(\w*)\n?([\s\S]*?)```/g, (m, lang, code) => {
+            const l = lang || 'code';
+            return `<pre><div class="code-header"><span class="code-lang">${l}</span><button class="copy-btn" onclick="copyCode(this)"><i data-lucide="copy"></i> نسخ</button></div><code>${escHtml(code.trim())}</code></pre>`;
+        });
+        f = f.replace(/`([^`]+)`/g, '<code>$1</code>');
+        f = f.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
+        f = f.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+        f = f.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+        f = f.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+        f = f.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        f = f.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>');
+        f = f.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+        f = f.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>');
+        f = f.replace(/<\/blockquote>\n?<blockquote>/g, '<br>');
+        f = f.replace(/^---$/gm, '<hr>');
+        f = f.replace(/\b([PBCU][0-9]{4})\b/g, '<span class="dtc-badge"><span class="dtc-led"></span>$1</span>');
+        f = f.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
+        f = f.replace(/((?:<li>.*<\/li>\n?)+)/g, m => '<ul>' + m + '</ul>');
+        f = f.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+        f = f.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+        f = f.replace(/(?<!href="|">)(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>');
+        f = f.replace(/\n\n/g, '</p><p>');
+        f = f.replace(/\n/g, '<br>');
+        f = f.replace(/<\/(h[1-6]|pre|ul|ol|blockquote|hr)><br>/g, '</$1>');
+        f = f.replace(/<br><(h[1-6]|pre|ul|ol|blockquote|hr)/g, '<$1');
+        f = f.replace(/<p><\/p>/g, '');
+        if (!/^<(h[1-6]|pre|ul|ol|blockquote|hr|p|div)/.test(f.trim())) f = '<p>' + f + '</p>';
+        return f;
+    }
+    function copyCode(btn) {
+        const code = btn.closest('pre').querySelector('code');
+        if (!code) return;
+        navigator.clipboard.writeText(code.textContent).then(() => {
+            btn.innerHTML = '<i data-lucide="check"></i> تم';
+            ri();
+            setTimeout(() => { btn.innerHTML = '<i data-lucide="copy"></i> نسخ'; ri(); }, 2000);
+        });
+    }
+    /* ── SEND MESSAGE ── */
+    async function sendMessage() {
+        if (isSending) return;
+        const message = msgInput.value.trim();
+        if (!message && !uploadedImageUrls.length && !selectedFile) return;
+        isSending = true;
+        const welcome = document.getElementById('welcomeScreen');
+        if (welcome) welcome.remove();
+        setSendLoading(true);
+        msgInput.disabled = true;
+        if (message || uploadedImageUrls.length > 0) {
+            addMessage('user', message, null, null, uploadedImageUrls);
+        }
+        msgInput.value = '';
+        msgInput.style.height = 'auto';
+        const typingId = showTyping();
+        try {
+            let data;
+            if (selectedFile) {
+                data = await uploadFile(selectedFile, message);
+                selectedFile = null;
+                document.getElementById('filePrev').innerHTML = '';
+            } else {
+                const res = await fetch('/api/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        message: message || 'ما هذا في الصورة؟ حلل المشكلة.',
+                        session_id: sessionId,
+                        image_urls: uploadedImageUrls
+                    })
+                });
+                data = await res.json();
+            }
+            removeTyping(typingId);
+            if (data && data.status === 'success') {
+                addMessage('assistant', data.message, data.web_searches, data.image_searches);
+            } else if (data && data.error) {
+                throw new Error(data.error);
+            }
+            clearImgPreviews();
+        } catch (err) {
+            removeTyping(typingId);
+            addMessage('assistant', `**خطأ في الاتصال**\n\n${err.message}\n\nيرجى التحقق من الاتصال والمحاولة مرة أخرى.`);
+        } finally {
+            setSendLoading(false);
+            msgInput.disabled = false;
+            msgInput.focus();
+            isSending = false;
+        }
+    }
+    async function uploadFile(file, comment) {
+        const fd = new FormData();
+        fd.append('file', file);
+        fd.append('comment', comment);
+        fd.append('session_id', sessionId);
+        const r = await fetch('/api/upload', { method: 'POST', body: fd });
+        const d = await r.json();
+        if (d.status === 'success') showToast(`تم رفع الملف "${d.filename}" بنجاح`, 'success');
+        return d;
+    }
+    /* ── ADD MESSAGE ── */
+    function addMessage(role, content, webSearches, imageSearches, userImages) {
+        const container = document.getElementById('messages');
+        const msg = document.createElement('div');
+        msg.className = `msg ${role}`;
+        /* Avatar */
+        const av = document.createElement('div');
+        av.className = 'msg-av';
+        if (role === 'user') {
+            av.innerHTML = '<i data-lucide="user"></i>';
+        } else {
+            const img = document.createElement('img');
+            img.src = "{{ url_for('static', filename='logo.png') }}";
+            img.alt = 'AI';
+            img.onerror = function() {
+                this.parentElement.innerHTML = '<i data-lucide="key" style="color:var(--accent);width:17px;height:17px;"></i>';
+                ri();
+            };
+            av.appendChild(img);
+        }
+        /* Body */
+        const body = document.createElement('div');
+        body.className = 'msg-body';
+        const bubble = document.createElement('div');
+        bubble.className = 'msg-bubble';
+        /* User images */
+        if (userImages && userImages.length > 0) {
+            const imgDiv = document.createElement('div');
+            imgDiv.className = 'msg-images';
+            userImages.forEach(url => {
+                const im = document.createElement('img');
+                im.src = url;
+                im.alt = 'صورة مرفقة';
+                im.onclick = () => openModal(url);
+                imgDiv.appendChild(im);
+            });
+            bubble.appendChild(imgDiv);
+        }
+        /* Text content */
+        if (content) {
+            const textDiv = document.createElement('div');
+            textDiv.innerHTML = formatMsg(content);
+            bubble.appendChild(textDiv);
+        }
+        /* Web results */
+        if (webSearches && webSearches.length > 0) {
+            webSearches.forEach(s => bubble.appendChild(buildWebResults(s)));
+        }
+        /* Image results */
+        if (imageSearches && imageSearches.length > 0) {
+            imageSearches.forEach(s => bubble.appendChild(buildImgResults(s)));
+        }
+        body.appendChild(bubble);
+        /* Time */
+        const time = document.createElement('div');
+        time.className = 'msg-time';
+        time.textContent = new Date().toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit' });
+        body.appendChild(time);
+        msg.appendChild(av);
+        msg.appendChild(body);
+        container.appendChild(msg);
+        container.scrollTop = container.scrollHeight;
+        ri();
+    }
+    /* ── WEB RESULTS ── */
+    function buildWebResults(search) {
+        const d = document.createElement('div');
+        d.className = 'web-results';
+        let h = `<h4><i data-lucide="search"></i> بحث: ${escHtml(search.query)}</h4>`;
+        if (search.results && search.results.length > 0) {
+            search.results.forEach((r, i) => {
+                h += `<div class="web-result-item">
+                    <div class="web-result-title">${i+1}. ${escHtml(r.name)}</div>
+                    <div class="web-result-snippet">${escHtml(r.snippet)}</div>
+                    <a href="${escHtml(r.url)}" target="_blank" rel="noopener" class="web-result-url">
+                        <i data-lucide="external-link"></i> ${escHtml(r.url)}
+                    </a>
+                </div>`;
+            });
+        }
+        d.innerHTML = h;
+        return d;
+    }
+    /* ── IMAGE RESULTS ── */
+    function buildImgResults(search) {
+        const section = document.createElement('div');
+        section.className = 'img-results';
+        const hdr = document.createElement('div');
+        hdr.className = 'img-results-header';
+        hdr.innerHTML = `<i data-lucide="image"></i> صور: ${escHtml(search.query)}`;
+        section.appendChild(hdr);
+        const grid = document.createElement('div');
+        grid.className = 'img-grid';
+        const images = search.images || [];
+        if (!images.length) {
+            const p = document.createElement('p');
+            p.style.cssText = 'color:var(--muted);font-size:11px;grid-column:1/-1;text-align:center;padding:16px;';
+            p.textContent = 'لم يتم العثور على صور';
+            grid.appendChild(p);
+            section.appendChild(grid);
+            return section;
+        }
+        images.forEach(item => {
+            let displayUrl = '', originalUrl = '';
+            if (typeof item === 'object' && item !== null) {
+                displayUrl = item.proxy_url || item.contentUrl || item.thumbnailUrl || item.url || item.src || '';
+                originalUrl = item.original_url || item.contentUrl || item.url || displayUrl;
+            } else if (typeof item === 'string') {
+                displayUrl = originalUrl = item;
+            }
+            if (!displayUrl) return;
+            const card = document.createElement('div');
+            card.className = 'img-card';
+            const img = document.createElement('img');
+            img.alt = 'صورة تشخيصية';
+            img.loading = 'lazy';
+            img.onload = () => card.classList.add('loaded');
+            img.onerror = function() {
+                if (!this.dataset.retried && originalUrl && this.src !== originalUrl) {
+                    this.dataset.retried = 'true';
+                    this.src = originalUrl;
+                    return;
+                }
+                card.classList.add('errored', 'loaded');
+            };
+            img.src = displayUrl;
+            card.appendChild(img);
+            const overlay = document.createElement('div');
+            overlay.className = 'img-card-overlay';
+            overlay.innerHTML = '<i data-lucide="maximize-2"></i> تكبير';
+            card.appendChild(overlay);
+            const err = document.createElement('div');
+            err.className = 'img-err';
+            err.innerHTML = '<i data-lucide="image-off"></i><span>تعذر التحميل</span>';
+            card.appendChild(err);
+            card.addEventListener('click', () => {
+                if (!card.classList.contains('errored')) openModal(originalUrl || displayUrl);
+            });
+            grid.appendChild(card);
+        });
+        section.appendChild(grid);
+        return section;
+    }
+    /* ── TYPING INDICATOR ── */
+    function showTyping() {
+        const container = document.getElementById('messages');
+        const id = 'typing_' + Date.now();
+        const wrap = document.createElement('div');
+        wrap.className = 'typing-wrap';
+        wrap.id = id;
+        const av = document.createElement('div');
+        av.className = 'typing-av';
+        const img = document.createElement('img');
+        img.src = "{{ url_for('static', filename='logo.png') }}";
+        img.onerror = function() {
+            this.parentElement.innerHTML = '<i data-lucide="key" style="color:var(--accent);width:17px;height:17px;"></i>';
+            ri();
+        };
+        av.appendChild(img);
+        const dots = document.createElement('div');
+        dots.className = 'typing-dots';
+        dots.innerHTML = '<span></span><span></span><span></span>';
+        wrap.appendChild(av);
+        wrap.appendChild(dots);
+        container.appendChild(wrap);
+        container.scrollTop = container.scrollHeight;
+        ri();
+        return id;
+    }
+    function removeTyping(id) {
+        const el = document.getElementById(id);
+        if (el) el.remove();
+    }
+    /* ── SEND BUTTON STATE ── */
+    function setSendLoading(v) {
+        const btn = document.getElementById('sendBtn');
+        if (v) {
+            btn.innerHTML = '<div class="spinner"></div>';
+            btn.disabled = true;
+        } else {
+            btn.innerHTML = '<i data-lucide="send"></i>';
+            btn.disabled = false;
+            ri();
+        }
+    }
+    /* ── TOAST ── */
+    function showToast(message, type) {
+        const container = document.getElementById('messages');
+        const t = document.createElement('div');
+        t.className = `toast ${type}`;
+        t.innerHTML = `<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}"></i><span>${escHtml(message)}</span>`;
+        container.appendChild(t);
+        container.scrollTop = container.scrollHeight;
+        ri();
+        setTimeout(() => {
+            t.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+            t.style.opacity = '0';
+            t.style.transform = 'translateY(-8px)';
+            setTimeout(() => t.remove(), 300);
+        }, 3000);
+    }
+    /* ── CLEAR CHAT ── */
+    async function clearChat() {
+        if (!confirm('هل تريد مسح سجل التشخيص بالكامل؟')) return;
+        try {
+            await fetch('/api/clear', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ session_id: sessionId })
+            });
+        } catch(e) {}
+        const container = document.getElementById('messages');
+        container.innerHTML = '';
+        const welcome = document.createElement('div');
+        welcome.className = 'welcome';
+        welcome.id = 'welcomeScreen';
+        welcome.innerHTML = `
+            <img src="{{ url_for('static', filename='logo.png') }}" alt="SHKIKEL" class="welcome-logo">
+            <h1>مساعد التشخيص الذكي</h1>
+            <p>أدخل رمز العطل OBD-II أو صوّر أعراض سيارتك. سأشخّص المشكلة وأوضح السبب وأريك موقع القطعة بالصور.</p>
+            <div class="ready-tag">
+                <div class="s-dot"></div>
+                READY FOR DIAGNOSTICS
+            </div>`;
+        container.appendChild(welcome);
+        clearImgPreviews();
+        removeFile();
+        closeSidebar();
+        showToast('تم مسح سجل التشخيص', 'success');
+        ri();
+    }
+    /* ── EXPORT CHAT ── */
+    function exportChat() {
+        const msgs = document.querySelectorAll('.msg');
+        if (!msgs.length) { showToast('لا توجد رسائل للتصدير', 'error'); return; }
+        let text = '═══════════════════════════════════════════\n';
+        text += '  SHKIKEL GROUP - سجل التشخيص\n';
+        text += '  ' + new Date().toLocaleString('ar-SA') + '\n';
+        text += '═══════════════════════════════════════════\n\n';
+        msgs.forEach(m => {
+            const role = m.classList.contains('user') ? 'المستخدم' : 'المساعد';
+            const bubble = m.querySelector('.msg-bubble');
+            if (!bubble) return;
+            const clone = bubble.cloneNode(true);
+            clone.querySelectorAll('.msg-images,.web-results,.img-results').forEach(el => el.remove());
+            text += `[${role}]\n${clone.textContent.trim()}\n\n${'─'.repeat(43)}\n\n`;
+        });
+        const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `diagnostic_${new Date().toISOString().slice(0,10)}.txt`;
+        a.click();
+        URL.revokeObjectURL(url);
+        closeSidebar();
+        showToast('تم تصدير سجل التشخيص', 'success');
+    }
+    /* ── IMAGE MODAL ── */
+    function openModal(url) {
+        const modal = document.getElementById('imgModal');
+        const img = document.getElementById('modalImg');
+        img.src = '';
+        img.removeAttribute('data-retried');
+        img.onerror = function() {
+            if (!this.dataset.retried) {
+                this.dataset.retried = 'true';
+                if (!url.startsWith('/api/proxy-image')) {
+                    this.src = '/api/proxy-image?url=' + encodeURIComponent(url);
+                }
+            }
+        };
+        img.src = url;
+        modal.classList.add('active');
+    }
+    function closeModal() {
+        document.getElementById('imgModal').classList.remove('active');
+    }
+    document.addEventListener('keydown', e => {
+        if (e.key === 'Escape') closeModal();
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); msgInput.focus(); }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'l') { e.preventDefault(); clearChat(); }
+    });
+    /* ── SPEECH RECOGNITION ── */
+    function initSpeech() {
+        if (!('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) return;
+        const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+        const rec = new SR();
+        rec.continuous = false;
+        rec.interimResults = false;
+        rec.lang = 'ar-SA';
+        let listening = false;
+        const micBtn = document.getElementById('micBtn');
+        micBtn.onclick = (e) => {
+            e.preventDefault();
+            if (listening) { rec.stop(); return; }
+            rec.start();
+            listening = true;
+            micBtn.classList.add('active');
+            micBtn.innerHTML = '<i data-lucide="mic-off"></i>';
+            ri();
+            showToast('جاري الاستماع...', 'success');
+        };
+        rec.onresult = e => {
+            msgInput.value = e.results[0][0].transcript;
+            msgInput.dispatchEvent(new Event('input'));
+            showToast('تم استقبال الإدخال الصوتي', 'success');
+        };
+        rec.onerror = () => showToast('فشل الإدخال الصوتي', 'error');
+        rec.onend = () => {
+            listening = false;
+            micBtn.classList.remove('active');
+            micBtn.innerHTML = '<i data-lucide="mic"></i>';
+            ri();
+        };
+    }
+    /* ── HEALTH CHECK ── */
+    async function checkHealth() {
+        try {
+            const r = await fetch('/api/health');
+            const d = await r.json();
+            console.log('%c[DIAG] API OK', 'color:#22c55e;font-weight:bold;', d);
+        } catch(e) {
+            const dot = document.getElementById('sDot');
+            const label = document.getElementById('sLabel');
+            const pill = document.getElementById('statusPill');
+            if (dot) dot.style.background = 'var(--red)';
+            if (label) label.textContent = 'OFFLINE';
+            if (pill) {
+                pill.style.background = 'rgba(239,68,68,0.08)';
+                pill.style.borderColor = 'rgba(239,68,68,0.18)';
+                pill.style.color = 'var(--red)';
+            }
+        }
+    }
+    /* ── ONLINE / OFFLINE ── */
+    window.addEventListener('online', () => {
+        showToast('تم استعادة الاتصال', 'success');
+        const dot = document.getElementById('sDot');
+        const label = document.getElementById('sLabel');
+        const pill = document.getElementById('statusPill');
+        if (dot) dot.style.background = 'var(--green)';
+        if (label) label.textContent = 'ONLINE';
+        if (pill) {
+            pill.style.background = 'rgba(34,197,94,0.08)';
+            pill.style.borderColor = 'rgba(34,197,94,0.18)';
+            pill.style.color = 'var(--green)';
+        }
+    });
+    window.addEventListener('offline', () => {
+        showToast('لا يوجد اتصال بالإنترنت', 'error');
+        const dot = document.getElementById('sDot');
+        const label = document.getElementById('sLabel');
+        const pill = document.getElementById('statusPill');
+        if (dot) dot.style.background = 'var(--red)';
+        if (label) label.textContent = 'OFFLINE';
+        if (pill) {
+            pill.style.background = 'rgba(239,68,68,0.08)';
+            pill.style.borderColor = 'rgba(239,68,68,0.18)';
+            pill.style.color = 'var(--red)';
+        }
+    });
+    /* ── PASTE IMAGE ── */
+    msgInput.addEventListener('paste', e => {
+        for (let i = 0; i < e.clipboardData.items.length; i++) {
+            if (e.clipboardData.items[i].type.indexOf('image') !== -1) {
+                e.preventDefault();
+                const blob = e.clipboardData.items[i].getAsFile();
+                const file = new File([blob], `pasted-${Date.now()}.png`, { type: blob.type });
+                selectedImages = [file];
+                renderImgPreviews([file]);
+                uploadAllImages();
+                showToast('تم لصق الصورة - جاري الرفع...', 'success');
+                break;
+            }
+        }
+    });
+    /* ── AUTO SCROLL ── */
+    new MutationObserver(() => {
+        const c = document.getElementById('messages');
+        c.scrollTop = c.scrollHeight;
+    }).observe(document.getElementById('messages'), { childList: true, subtree: true });
+    /* ── FOCUS ON VISIBILITY ── */
+    document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) msgInput.focus();
+    });
+</script>
+</body>
+</html>