Chat-ipad

Sleeping

App Files Files Community

Dooratre commited on Jan 3

Commit

94cba3f

verified ·

1 Parent(s): b5d0134

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +1153 -1161

templates/index.html CHANGED Viewed

@@ -1,1162 +1,1154 @@
-<!DOCTYPE html>
-<html lang="ar" dir="rtl">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-  <title>مساعد ITGS226 - مقدمة في الإنترنت</title>
-  <!-- Highlight.js -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-  <!-- Arabic font -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
-  <style>
-    :root{
-      --bg0:#0b1220;
-      --bg1:#0f1a2e;
-      --text:#eaf0ff;
-      --muted:#a9b7d6;
-      --brand:#6ea8ff;
-      --brand2:#7c5cff;
-      --shadow: 0 10px 30px rgba(0,0,0,.35);
-      --radius: 18px;
-    }
-    *{ box-sizing:border-box; margin:0; padding:0; }
-    html, body { height:100%; }
-    body{
-      font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
-      background:
-        radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
-        radial-gradient(900px 600px at 80% 20%, rgba(110,168,255,.22), transparent 55%),
-        linear-gradient(180deg, var(--bg0), var(--bg1));
-      color: var(--text);
-      overflow: hidden;
-    }
-    .app{
-      height: 100dvh;
-      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-      display:flex;
-      flex-direction:column;
-    }
-    .topbar{
-      flex: 0 0 auto;
-      padding: 14px 14px 10px;
-      display:flex;
-      align-items:center;
-      justify-content:space-between;
-      gap: 10px;
-    }
-    .brand{
-      display:flex;
-      align-items:center;
-      gap: 10px;
-      min-width: 0;
-    }
-    .logo{
-      width: 42px; height: 42px;
-      border-radius: 14px;
-      background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(124,92,255,.95));
-      box-shadow: 0 10px 25px rgba(124,92,255,.25);
-      display:grid;
-      place-items:center;
-      font-weight:800;
-      letter-spacing:.5px;
-    }
-    .brandText{
-      min-width:0;
-      display:flex;
-      flex-direction:column;
-      gap:2px;
-    }
-    .brandText .title{
-      font-size: 16px;
-      font-weight: 800;
-      white-space:nowrap;
-      overflow:hidden;
-      text-overflow:ellipsis;
-    }
-    .brandText .subtitle{
-      font-size: 12px;
-      color: var(--muted);
-      white-space:nowrap;
-      overflow:hidden;
-      text-overflow:ellipsis;
-    }
-    .actions{
-      display:flex;
-      gap: 8px;
-      flex: 0 0 auto;
-    }
-    .btn{
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(15,27,51,.55);
-      color: var(--text);
-      padding: 10px 12px;
-      border-radius: 12px;
-      cursor:pointer;
-      font-weight:700;
-      font-size: 13px;
-      transition: transform .12s ease, border-color .12s ease;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      display:inline-flex;
-      align-items:center;
-      gap: 8px;
-      user-select:none;
-    }
-    .btn:hover{ transform: translateY(-1px); border-color: rgba(110,168,255,.35); }
-    .btn:active{ transform: translateY(0px); }
-    .btn.danger:hover{ border-color: rgba(251,113,133,.45); }
-    .chatCard{
-      flex: 1 1 auto;
-      margin: 0 14px 12px;
-      border-radius: var(--radius);
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(15,27,51,.35);
-      box-shadow: var(--shadow);
-      overflow:hidden;
-      display:flex;
-      flex-direction:column;
-      min-height: 0;
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-    }
-    .messages{
-      flex: 1 1 auto;
-      padding: 16px 14px;
-      overflow:auto;
-      scroll-behavior:smooth;
-      min-height: 0;
-    }
-    .messages::-webkit-scrollbar{ width: 10px; }
-    .messages::-webkit-scrollbar-track{ background: transparent; }
-    .messages::-webkit-scrollbar-thumb{
-      background: rgba(255,255,255,.12);
-      border-radius: 10px;
-      border: 2px solid transparent;
-      background-clip: content-box;
-    }
-    .empty{
-      padding: 22px 14px;
-      border: 1px dashed rgba(255,255,255,.18);
-      border-radius: 16px;
-      background: rgba(0,0,0,.12);
-      color: var(--muted);
-      line-height: 1.9;
-    }
-    .empty h2{
-      color: var(--text);
-      font-size: 18px;
-      margin-bottom: 6px;
-      font-weight: 800;
-    }
-    .msgRow{
-      display:flex;
-      gap: 10px;
-      margin-bottom: 12px;
-      align-items:flex-end;
-    }
-    .msgRow.user{ justify-content:flex-start; flex-direction: row-reverse; }
-    .msgRow.ai{ justify-content:flex-start; }
-    /* ===== Pro avatar + name ===== */
-    .avatarCol{
-      width: 56px;
-      flex: 0 0 auto;
-      display:flex;
-      flex-direction:column;
-      align-items:center;
-      gap: 6px;
-    }
-    .avatar{
-      width: 44px; height: 44px;
-      border-radius: 16px;
-      display:grid;
-      place-items:center;
-      border: 1px solid rgba(255,255,255,.12);
-      box-shadow: 0 10px 25px rgba(0,0,0,.25);
-      overflow:hidden;
-      position: relative;
-      user-select:none;
-    }
-    .avatarName{
-      max-width: 56px;
-      font-size: 11px;
-      color: rgba(234,240,255,.78);
-      text-align:center;
-      white-space:nowrap;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      line-height: 1.2;
-    }
-    .avatar.ai{
-      background: linear-gradient(135deg, rgba(110,168,255,.25), rgba(124,92,255,.25));
-      color: rgba(234,240,255,.95);
-      font-weight: 900;
-      letter-spacing: .5px;
-    }
-    /* Normal user: emoji avatar (not text) */
-    .avatar.userDefault{
-      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
-                  linear-gradient(135deg, rgba(110,168,255,.75), rgba(124,92,255,.35));
-      border-color: rgba(110,168,255,.35);
-      color: #081022;
-      font-size: 20px;
-    }
-    /* Bissan: flower + pink bg + subtle sparkle */
-    .avatar.userBissan{
-      background:
-        radial-gradient(circle at 25% 25%, rgba(255,255,255,.45), transparent 55%),
-        radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%),
-        linear-gradient(135deg, rgba(255,105,180,.75), rgba(255,182,193,.35));
-      border-color: rgba(255,105,180,.40);
-      color: #2b0b1a;
-      font-size: 20px;
-    }
-    .avatar.userBissan::after{
-      content:"";
-      position:absolute;
-      inset:-40%;
-      background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.25), transparent);
-      animation: spin 3.8s linear infinite;
-      opacity:.55;
-    }
-    .avatar.userBissan > span{
-      position: relative;
-      z-index: 2;
-      filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
-    }
-    @keyframes spin{
-      to{ transform: rotate(360deg); }
-    }
-    .bubbleWrap{
-      max-width: min(760px, 86%);
-      display:flex;
-      flex-direction:column;
-      gap: 6px;
-      min-width: 0;
-    }
-    .bubble{
-      border-radius: 16px;
-      padding: 12px 14px;
-      line-height: 1.95;
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(0,0,0,.12);
-      word-break: break-word;
-      overflow-wrap: anywhere;
-      white-space: normal;
-    }
-    .user .bubble{
-      background: linear-gradient(135deg, rgba(110,168,255,.18), rgba(124,92,255,.18));
-      border-color: rgba(110,168,255,.22);
-    }
-    .ai .bubble{
-      background: rgba(15,26,46,.55);
-      border-color: rgba(255,255,255,.10);
-    }
-    .meta{
-      font-size: 12px;
-      color: var(--muted);
-      padding: 0 6px;
-      display:flex;
-      gap: 10px;
-      align-items:center;
-      flex-wrap:wrap;
-    }
-    .pill{
-      font-size: 12px;
-      padding: 4px 10px;
-      border-radius: 999px;
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(0,0,0,.12);
-      color: var(--muted);
-    }
-    .arabicText{
-      direction: rtl;
-      text-align: right;
-      unicode-bidi: plaintext;
-    }
-    /* Code blocks */
-    .codeBlock{
-      margin: 10px 0;
-      border-radius: 14px;
-      overflow:hidden;
-      border: 1px solid rgba(255,255,255,.10);
-      background: #1e1e1e;
-    }
-    .codeHeader{
-      display:flex;
-      align-items:center;
-      justify-content:space-between;
-      padding: 8px 10px;
-      background: #252526;
-      border-bottom: 1px solid #2a2a2a;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-      direction:ltr;
-    }
-    .codeLeft{ display:flex; align-items:center; gap: 10px; min-width:0; }
-    .dots{ display:flex; gap:6px; }
-    .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
-    .dot.r{ background:#ff5f56; }
-    .dot.y{ background:#ffbd2e; }
-    .dot.g{ background:#27c93f; }
-    .lang{
-      font-size: 12px;
-      color:#cfcfcf;
-      opacity:.9;
-      white-space:nowrap;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      max-width: 220px;
-      text-transform: lowercase;
-    }
-    .copyBtn{
-      border: 1px solid #3c3c3c;
-      background: transparent;
-      color:#cfcfcf;
-      padding: 6px 10px;
-      border-radius: 10px;
-      cursor:pointer;
-      font-size: 12px;
-    }
-    .copyBtn:hover{ background:#2a2d2e; border-color:#4c4c4c; }
-    .copyBtn.copied{ background:#0e639c; border-color:#0e639c; color:#fff; }
-    pre{ margin:0; overflow:auto; }
-    pre code{
-      display:block;
-      padding: 14px 14px;
-      font-size: 13px;
-      line-height: 1.7;
-      direction:ltr;
-      text-align:left;
-      white-space: pre;
-      tab-size: 4;
-    }
-    /* Composer */
-    .composer{
-      flex: 0 0 auto;
-      padding: 12px;
-      border-top: 1px solid rgba(255,255,255,.10);
-      background: rgba(15,27,51,.45);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-    }
-    .composerRow{
-      display:flex;
-      gap: 10px;
-      align-items:flex-end;
-    }
-    textarea{
-      flex: 1 1 auto;
-      resize:none;
-      max-height: 160px;
-      min-height: 46px;
-      padding: 12px 12px;
-      border-radius: 14px;
-      border: 1px solid rgba(255,255,255,.12);
-      background: rgba(0,0,0,.18);
-      color: var(--text);
-      outline:none;
-      font-size: 14px;
-      line-height: 1.8;
-      font-family: inherit;
-    }
-    textarea::placeholder{ color: rgba(234,240,255,.55); }
-    .sendBtn{
-      flex: 0 0 auto;
-      padding: 12px 14px;
-      border-radius: 14px;
-      border: 1px solid rgba(110,168,255,.35);
-      background: linear-gradient(135deg, rgba(110,168,255,.85), rgba(124,92,255,.85));
-      color: #081022;
-      font-weight: 900;
-      cursor:pointer;
-      min-width: 92px;
-    }
-    .sendBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
-    .sendBtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
-    /* Thinking bubble */
-    .thinking{
-      display:inline-flex;
-      align-items:center;
-      gap: 10px;
-      color: var(--muted);
-      font-weight: 700;
-    }
-    .dotsAnim{ display:inline-flex; gap: 4px; align-items:center; }
-    .dotsAnim span{
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: rgba(234,240,255,.55);
-      display:inline-block;
-      animation: bounce 1.1s infinite ease-in-out;
-    }
-    .dotsAnim span:nth-child(2){ animation-delay: .15s; }
-    .dotsAnim span:nth-child(3){ animation-delay: .30s; }
-    @keyframes bounce{
-      0%, 80%, 100%{ transform: translateY(0); opacity:.55; }
-      40%{ transform: translateY(-5px); opacity:1; }
-    }
-    /* Typing cursor */
-    .typeCursor{
-      display:inline-block;
-      width: 10px;
-      margin-right: 2px;
-      opacity: .9;
-      animation: blink 1s infinite;
-    }
-    @keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
-    /* MCQ */
-    .mcq{
-      margin-top: 10px;
-      border-radius: 16px;
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(0,0,0,.12);
-      overflow:hidden;
-    }
-    .mcqHead{
-      padding: 12px 12px;
-      border-bottom: 1px solid rgba(255,255,255,.10);
-      display:flex;
-      align-items:center;
-      justify-content:space-between;
-      gap: 10px;
-    }
-    .mcqTitle{ font-weight: 900; color: var(--text); line-height: 1.7; }
-    .mcqBadge{
-      font-size: 12px;
-      padding: 4px 10px;
-      border-radius: 999px;
-      border: 1px solid rgba(255,255,255,.10);
-      color: var(--muted);
-      background: rgba(15,26,46,.55);
-      white-space:nowrap;
-    }
-    .mcqBody{ padding: 10px 10px 12px; display:flex; flex-direction:column; gap: 8px; }
-    .opt{
-      padding: 12px 12px;
-      border-radius: 14px;
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(15,26,46,.45);
-      cursor:pointer;
-      display:flex;
-      align-items:center;
-      gap: 10px;
-      user-select:none;
-    }
-    .opt:hover{ transform: translateY(-1px); border-color: rgba(110,168,255,.35); }
-    .opt.disabled{ cursor: default; opacity: .95; }
-    .opt.correct{ border-color: rgba(45,212,191,.55); background: rgba(45,212,191,.12); }
-    .opt.wrong{ border-color: rgba(251,113,133,.55); background: rgba(251,113,133,.10); }
-    .optKey{
-      width: 30px; height: 30px;
-      border-radius: 12px;
-      display:grid;
-      place-items:center;
-      font-weight: 900;
-      background: rgba(255,255,255,.08);
-      border: 1px solid rgba(255,255,255,.10);
-      flex: 0 0 auto;
-    }
-    .optText{ flex: 1 1 auto; line-height: 1.8; }
-    .optIcon{ flex: 0 0 auto; font-weight: 900; }
-    @media (max-width: 520px){
-      .topbar{ padding: 12px 12px 8px; }
-      .chatCard{ margin: 0 10px 10px; border-radius: 16px; }
-      .messages{ padding: 14px 12px; }
-      .bubbleWrap{ max-width: 92%; }
-      .sendBtn{ min-width: 78px; }
-      .avatarCol{ width: 52px; }
-      .avatarName{ max-width: 52px; }
-    }
-  </style>
-</head>
-<body>
-  <div class="app">
-    <div class="topbar">
-      <div class="brand">
-        <div class="logo">IT</div>
-        <div class="brandText">
-          <div class="title">مساعد ITGS226</div>
-          <div class="subtitle">مقدمة في الإنترنت • دردشة ذ��ية + أسئلة اختيار من متعدد</div>
-        </div>
-      </div>
-      <div class="actions">
-        <button class="btn danger" onclick="clearHistory()">مسح المحادثة</button>
-      </div>
-    </div>
-    <div class="chatCard">
-      <div class="messages" id="messages">
-        <div class="empty" id="emptyState">
-          <h2>أهلًا بك</h2>
-          <p>
-            اكتب سؤالك في مادة <b>ITGS226 مقدمة في الإنترنت</b> وسأساعدك بشرح واضح ومنظم.
-            <br/>يمكنني أيضًا إنشاء أسئلة اختيار من متعدد (MCQ) للتدريب.
-          </p>
-          <p style="margin-top:10px;color:rgba(234,240,255,.75)">
-            لتحديد اسم المستخدم من الرابط:
-            <br>
-            <code style="direction:ltr;unicode-bidi:plaintext">/?name=Ahmed</code>
-            <br>
-            أو
-            <code style="direction:ltr;unicode-bidi:plaintext">/?name=بيسان</code>
-          </p>
-        </div>
-      </div>
-      <div class="composer">
-        <div class="composerRow">
-          <textarea id="input" rows="1" placeholder="اكتب سؤالك هنا... (Enter للإرسال، Shift+Enter لسطر جديد)"></textarea>
-          <button class="sendBtn" id="sendBtn" onclick="sendMessage()">إرسال</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script>
-    const messagesEl = document.getElementById('messages');
-    const inputEl = document.getElementById('input');
-    const sendBtn = document.getElementById('sendBtn');
-    const emptyState = document.getElementById('emptyState');
-    // Loaded from backend (/session_info)
-    let USER_PROFILE = {
-      display_name: 'أنت',
-      is_bissan: false
-    };
-    // MCQ state
-    let mcqAnswers = {};
-    let mcqCounter = 0;
-    // Auto-resize textarea
-    inputEl.addEventListener('input', function(){
-      this.style.height = 'auto';
-      this.style.height = Math.min(this.scrollHeight, 160) + 'px';
-    });
-    inputEl.addEventListener('keydown', function(e){
-      if (e.key === 'Enter' && !e.shiftKey){
-        e.preventDefault();
-        sendMessage();
-      }
-    });
-    function scrollToBottom(){
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-    function escapeHtml(text){
-      const div = document.createElement('div');
-      div.textContent = text;
-      return div.innerHTML;
-    }
-    function normalizeTextClient(text){
-      if (!text) return '';
-      return text
-        .replace(/[\u200B-\u200F\u202A-\u202E\u2066-\u2069]/g, '')
-        .replace(/\r\n/g, '\n')
-        .replace(/\r/g, '\n')
-        .replace(/\n{3,}/g, '\n\n')
-        .trim();
-    }
-    function parseCodeBlocks(text){
-      const codeRegex = /<code_(\w+)>([\s\S]*?)<\/code_\1>/g;
-      const parts = [];
-      let lastIndex = 0;
-      let match;
-      while ((match = codeRegex.exec(text)) !== null){
-        if (match.index > lastIndex){
-          parts.push({ type:'text', content: text.substring(lastIndex, match.index) });
-        }
-        parts.push({ type:'code', language: match[1], content: match[2].trim() });
-        lastIndex = match.index + match[0].length;
-      }
-      if (lastIndex < text.length){
-        parts.push({ type:'text', content: text.substring(lastIndex) });
-      }
-      return parts.length ? parts : [{ type:'text', content:text }];
-    }
-    function createCodeBlock(language, code){
-      const wrap = document.createElement('div');
-      wrap.className = 'codeBlock';
-      const header = document.createElement('div');
-      header.className = 'codeHeader';
-      const left = document.createElement('div');
-      left.className = 'codeLeft';
-      const dots = document.createElement('div');
-      dots.className = 'dots';
-      dots.innerHTML = `<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>`;
-      const lang = document.createElement('span');
-      lang.className = 'lang';
-      lang.textContent = (language || 'text').toLowerCase();
-      left.appendChild(dots);
-      left.appendChild(lang);
-      const copyBtn = document.createElement('button');
-      copyBtn.className = 'copyBtn';
-      copyBtn.textContent = 'نسخ';
-      copyBtn.addEventListener('click', () => copyCode(code, copyBtn));
-      header.appendChild(left);
-      header.appendChild(copyBtn);
-      const pre = document.createElement('pre');
-      const codeEl = document.createElement('code');
-      const safeLang = (language || 'plaintext').toLowerCase();
-      codeEl.className = `language-${safeLang}`;
-      codeEl.textContent = code;
-      pre.appendChild(codeEl);
-      wrap.appendChild(header);
-      wrap.appendChild(pre);
-      setTimeout(() => { try { hljs.highlightElement(codeEl); } catch(e){} }, 0);
-      return wrap;
-    }
-    async function copyCode(code, btn){
-      try{
-        await navigator.clipboard.writeText(code);
-        btn.classList.add('copied');
-        btn.textContent = 'تم النسخ';
-        setTimeout(() => {
-          btn.classList.remove('copied');
-          btn.textContent = 'نسخ';
-        }, 1200);
-      }catch(e){
-        btn.textContent = 'فشل النسخ';
-        setTimeout(() => btn.textContent = 'نسخ', 1200);
-      }
-    }
-    function parseMCQ(text){
-      const mcqRegex = /<mcq>([\s\S]*?)<\/mcq>/g;
-      const mcqs = [];
-      let match;
-      while ((match = mcqRegex.exec(text)) !== null){
-        const mcqContent = match[1];
-        const qMatch = mcqContent.match(/<q>([\s\S]*?)<\/q>/);
-        const question = qMatch ? qMatch[1].trim() : '';
-        const options = [];
-        const optionRegex = /<(true|false)>([\s\S]*?)<\/(true|false)>/g;
-        let optMatch;
-        while ((optMatch = optionRegex.exec(mcqContent)) !== null){
-          options.push({ text: optMatch[2].trim(), isCorrect: optMatch[1] === 'true' });
-        }
-        if (question && options.length) mcqs.push({ question, options });
-      }
-      return mcqs;
-    }
-    function removeMCQTags(text){
-      return text.replace(/<mcq>[\s\S]*?<\/mcq>/g, '').trim();
-    }
-    function createMCQElement(mcqData, mcqId){
-      const box = document.createElement('div');
-      box.className = 'mcq';
-      box.dataset.mcqId = mcqId;
-      const head = document.createElement('div');
-      head.className = 'mcqHead';
-      const title = document.createElement('div');
-      title.className = 'mcqTitle arabicText';
-      title.textContent = `سؤال ${mcqId + 1}: ${mcqData.question}`;
-      const badge = document.createElement('div');
-      badge.className = 'mcqBadge';
-      badge.textContent = 'اختر الإجابة الصحيحة';
-      head.appendChild(title);
-      head.appendChild(badge);
-      const body = document.createElement('div');
-      body.className = 'mcqBody';
-      mcqData.options.forEach((opt, idx) => {
-        const row = document.createElement('div');
-        row.className = 'opt arabicText';
-        row.dataset.correct = opt.isCorrect ? 'true' : 'false';
-        row.dataset.index = idx;
-        const key = document.createElement('div');
-        key.className = 'optKey';
-        key.textContent = String.fromCharCode(65 + idx);
-        const text = document.createElement('div');
-        text.className = 'optText';
-        text.textContent = opt.text;
-        const icon = document.createElement('div');
-        icon.className = 'optIcon';
-        icon.textContent = '';
-        row.appendChild(key);
-        row.appendChild(text);
-        row.appendChild(icon);
-        row.addEventListener('click', () => handleMCQClick(mcqId, idx, row, body));
-        body.appendChild(row);
-      });
-      box.appendChild(head);
-      box.appendChild(body);
-      return box;
-    }
-    function handleMCQClick(mcqId, selectedIndex, selectedRow, body){
-      if (body.dataset.answered === 'true') return;
-      const rows = body.querySelectorAll('.opt');
-      body.dataset.answered = 'true';
-      const isCorrect = selectedRow.dataset.correct === 'true';
-      rows.forEach(r => r.classList.add('disabled'));
-      if (isCorrect){
-        selectedRow.classList.add('correct');
-        selectedRow.querySelector('.optIcon').textContent = '✓';
-      } else {
-        selectedRow.classList.add('wrong');
-        selectedRow.querySelector('.optIcon').textContent = '✗';
-        rows.forEach(r => {
-          if (r.dataset.correct === 'true'){
-            r.classList.add('correct');
-            r.querySelector('.optIcon').textContent = '✓';
-          }
-        });
-      }
-      mcqAnswers[mcqId] = selectedIndex + 1;
-    }
-    function getMCQAnswersText(){
-      if (!Object.keys(mcqAnswers).length) return '';
-      let t = '\n\n[إجابات أسئلة الاختيار السابقة:\n';
-      Object.keys(mcqAnswers).sort((a,b)=>parseInt(a)-parseInt(b)).forEach(id=>{
-        t += `${parseInt(id)+1}. ${mcqAnswers[id]}\n`;
-      });
-      t += ']';
-      return t;
-    }
-    function createAvatarCol(role){
-      const col = document.createElement('div');
-      col.className = 'avatarCol';
-      const avatar = document.createElement('div');
-      const nameEl = document.createElement('div');
-      nameEl.className = 'avatarName';
-      if (role === 'ai'){
-        avatar.className = 'avatar ai';
-        avatar.textContent = 'AI';
-        nameEl.textContent = 'المساعد';
-      } else {
-        if (USER_PROFILE.is_bissan){
-          avatar.className = 'avatar userBissan';
-          avatar.innerHTML = '<span>🌸</span>';
-          nameEl.textContent = USER_PROFILE.display_name || 'بيسان';
-        } else {
-          avatar.className = 'avatar userDefault';
-          avatar.textContent = '👤'; // emoji (not text)
-          nameEl.textContent = USER_PROFILE.display_name || 'أنت';
-        }
-      }
-      col.appendChild(avatar);
-      col.appendChild(nameEl);
-      return col;
-    }
-    function createMessageRow(role){
-      if (emptyState) emptyState.remove();
-      const row = document.createElement('div');
-      row.className = `msgRow ${role}`;
-      const avatarCol = createAvatarCol(role);
-      const wrap = document.createElement('div');
-      wrap.className = 'bubbleWrap';
-      const bubble = document.createElement('div');
-      bubble.className = 'bubble arabicText';
-      const meta = document.createElement('div');
-      meta.className = 'meta';
-      wrap.appendChild(bubble);
-      wrap.appendChild(meta);
-      row.appendChild(avatarCol);
-      row.appendChild(wrap);
-      messagesEl.appendChild(row);
-      scrollToBottom();
-      return { row, bubble, meta, wrap };
-    }
-    function setMeta(metaEl, sheet, time){
-      metaEl.innerHTML = '';
-      if (sheet){
-        const p1 = document.createElement('span');
-        p1.className = 'pill';
-        p1.textContent = `ورقة: ${sheet}`;
-        metaEl.appendChild(p1);
-      }
-      if (time){
-        const p2 = document.createElement('span');
-        p2.className = 'pill';
-        p2.textContent = `الوقت: ${time}`;
-        metaEl.appendChild(p2);
-      }
-    }
-    function addUserMessage(text){
-      const { bubble } = createMessageRow('user');
-      bubble.innerHTML = escapeHtml(normalizeTextClient(text)).replace(/\n/g,'<br>');
-    }
-    function showThinking(){
-      const { row, bubble } = createMessageRow('ai');
-      row.id = 'thinkingRow';
-      bubble.innerHTML = `
-        <div class="thinking arabicText">
-          <span>جاري التفكير</span>
-          <span class="dotsAnim" aria-hidden="true">
-            <span></span><span></span><span></span>
-          </span>
-        </div>
-      `;
-    }
-    function hideThinking(){
-      const r = document.getElementById('thinkingRow');
-      if (r) r.remove();
-    }
-    /* Mini-Markdown */
-    function renderMiniMarkdownToHtml(text){
-      let s = normalizeTextClient(text);
-      s = escapeHtml(s);
-      s = s.replace(/^\s*---\s*$/gm, '<hr>');
-      s = s.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
-      s = s.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
-      s = s.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
-      s = s.replace(/`([^`]+)`/g, '<code class="inlineCode">$1</code>');
-      const lines = s.split('\n');
-      let out = '';
-      let inUl = false;
-      let inOl = false;
-      const closeLists = () => {
-        if (inUl){ out += '</ul>'; inUl = false; }
-        if (inOl){ out += '</ol>'; inOl = false; }
-      };
-      for (let line of lines){
-        const ulMatch = line.match(/^\s*-\s+(.+)$/);
-        const olMatch = line.match(/^\s*(\d+)\.\s+(.+)$/);
-        if (ulMatch){
-          if (inOl){ out += '</ol>'; inOl = false; }
-          if (!inUl){ out += '<ul>'; inUl = true; }
-          out += `<li>${ulMatch[1]}</li>`;
-          continue;
-        }
-        if (olMatch){
-          if (inUl){ out += '</ul>'; inUl = false; }
-          if (!inOl){ out += '<ol>'; inOl = true; }
-          out += `<li>${olMatch[2]}</li>`;
-          continue;
-        }
-        closeLists();
-        if (line.trim() === ''){
-          out += '<br>';
-        } else if (line.startsWith('<h2>') || line.startsWith('<h3>') || line.startsWith('<hr>')){
-          out += line;
-        } else {
-          out += `<p>${line}</p>`;
-        }
-      }
-      closeLists();
-      return out;
-    }
-    function renderAssistantParts(containerBubble, parts){
-      containerBubble.innerHTML = '';
-      parts.forEach(part => {
-        if (part.type === 'code'){
-          containerBubble.appendChild(createCodeBlock(part.language, part.content));
-        } else {
-          const block = document.createElement('div');
-          block.className = 'arabicText';
-          block.innerHTML = renderMiniMarkdownToHtml(part.content);
-          containerBubble.appendChild(block);
-        }
-      });
-    }
-    function tokenizeHtml(html){
-      const tokens = [];
-      const re = /(<[^>]+>)/g;
-      const parts = html.split(re).filter(Boolean);
-      for (const part of parts){
-        if (part.startsWith('<') && part.endsWith('>')){
-          tokens.push(part);
-        } else {
-          for (const ch of part) tokens.push(ch);
-        }
-      }
-      return tokens;
-    }
-    async function typeAssistantMessage(containerBubble, fullText){
-      const normalized = normalizeTextClient(fullText);
-      const mcqs = parseMCQ(normalized);
-      const withoutMCQ = removeMCQTags(normalized);
-      const parts = parseCodeBlocks(withoutMCQ);
-      const textOnly = parts
-        .filter(p => p.type === 'text')
-        .map(p => p.content)
-        .join('')
-        .trim();
-      const formattedHtml = renderMiniMarkdownToHtml(textOnly);
-      const tokens = tokenizeHtml(formattedHtml);
-      containerBubble.innerHTML = '';
-      const typingWrap = document.createElement('div');
-      typingWrap.className = 'arabicText';
-      containerBubble.appendChild(typingWrap);
-      const cursor = document.createElement('span');
-      cursor.className = 'typeCursor';
-      cursor.textContent = '▍';
-      containerBubble.appendChild(cursor);
-      let out = '';
-      const speed = 6;
-      for (let i = 0; i < tokens.length; i++){
-        const tok = tokens[i];
-        out += tok;
-        typingWrap.innerHTML = out;
-        const isTag = tok.startsWith('<') && tok.endsWith('>');
-        if (!isTag){
-          scrollToBottom();
-          await new Promise(r => setTimeout(r, speed));
-        }
-      }
-      cursor.remove();
-      renderAssistantParts(containerBubble, parts);
-      return mcqs;
-    }
-    // ✅ IMPORTANT: send name to AI as prefix: "Name: message"
-    function buildMessageForAI(rawMsg){
-      const name = (USER_PROFILE.display_name || 'User').trim();
-      // Example: "bissan: hi there"
-      return `${name}: ${rawMsg}`;
-    }
-    async function sendMessage(){
-      const msg = inputEl.value.trim();
-      if (!msg) return;
-      inputEl.disabled = true;
-      sendBtn.disabled = true;
-      addUserMessage(msg);
-      // Send to AI with name prefix + MCQ answers
-      const fullMessage = buildMessageForAI(msg) + getMCQAnswersText();
-      inputEl.value = '';
-      inputEl.style.height = 'auto';
-      mcqAnswers = {};
-      showThinking();
-      try{
-        const res = await fetch('/send_message', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ message: fullMessage })
-        });
-        const data = await res.json();
-        hideThinking();
-        if (!data.success){
-          const { bubble } = createMessageRow('ai');
-          bubble.innerHTML = escapeHtml(data.error || 'حدث خطأ').replace(/\n/g,'<br>');
-          return;
-        }
-        // Update profile if backend returns it
-        if (data.user){
-          USER_PROFILE = data.user;
-        }
-        const { bubble, meta, wrap } = createMessageRow('ai');
-        setMeta(meta, data.sheet_number, data.timestamp);
-        const mcqs = await typeAssistantMessage(bubble, data.response);
-        if (mcqs && mcqs.length){
-          mcqs.forEach(mcq => {
-            const el = createMCQElement(mcq, mcqCounter);
-            wrap.appendChild(el);
-            mcqCounter++;
-          });
-        }
-        scrollToBottom();
-      }catch(e){
-        hideThinking();
-        const { bubble } = createMessageRow('ai');
-        bubble.innerHTML = 'تعذر الاتصال بالخادم. تأكد من تشغيل السيرفر ثم أعد المحاولة.';
-        console.error(e);
-      }finally{
-        inputEl.disabled = false;
-        sendBtn.disabled = false;
-        inputEl.focus();
-      }
-    }
-    async function clearHistory(){
-      if (!confirm('هل تريد مسح المحادثة بالكامل؟')) return;
-      try{
-        const res = await fetch('/clear_history', { method:'POST', headers:{'Content-Type':'application/json'} });
-        const data = await res.json();
-        if (data.success){
-          messagesEl.innerHTML = `
-            <div class="empty" id="emptyState">
-              <h2>تم مسح المحادثة</h2>
-              <p>ابدأ بسؤال جديد في <b>ITGS226 مقدمة في الإنترنت</b>.</p>
-            </div>
-          `;
-          mcqAnswers = {};
-          mcqCounter = 0;
-        }
-      }catch(e){
-        alert('فشل مسح المحادثة');
-        console.error(e);
-      }
-    }
-    async function showHistory(){
-      try{
-        const res = await fetch('/get_history');
-        const data = await res.json();
-        if (data.history && data.history.length){
-          let t = 'سجل المحادثة:\n\n';
-          data.history.forEach((m, i) => {
-            const who = m.role === 'user' ? (USER_PROFILE.display_name || 'المستخدم') : 'المساعد';
-            const snippet = (m.content || '').replace(/\s+/g,' ').slice(0, 120);
-            t += `${i+1}) ${who}: ${snippet}${snippet.length>=120?'...':''}\n\n`;
-          });
-          alert(t);
-        } else {
-          alert('لا يوجد سجل بعد');
-        }
-      }catch(e){
-        alert('فشل تحميل السجل');
-        console.error(e);
-      }
-    }
-    function downloadChatJson(){
-      window.open('/bissan/download', '_blank');
-    }
-    async function loadSessionInfo(){
-      try{
-        const res = await fetch('/session_info');
-        const data = await res.json();
-        if (data && data.user){
-          USER_PROFILE = data.user;
-        }
-      }catch(e){
-        console.warn('Failed to load session_info', e);
-      }
-    }
-    window.addEventListener('load', async () => {
-      await loadSessionInfo();
-      inputEl.focus();
-    });
-  </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>مساعد ITGS226 - مقدمة في الإنترنت</title>
+  <!-- Highlight.js -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <!-- Arabic font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
+  <style>
+    :root{
+      --bg0:#0b1220;
+      --bg1:#0f1a2e;
+      --text:#eaf0ff;
+      --muted:#a9b7d6;
+      --brand:#6ea8ff;
+      --brand2:#7c5cff;
+      --shadow: 0 10px 30px rgba(0,0,0,.35);
+      --radius: 18px;
+    }
+    *{ box-sizing:border-box; margin:0; padding:0; }
+    html, body { height:100%; }
+    body{
+      font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
+      background:
+        radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
+        radial-gradient(900px 600px at 80% 20%, rgba(110,168,255,.22), transparent 55%),
+        linear-gradient(180deg, var(--bg0), var(--bg1));
+      color: var(--text);
+      overflow: hidden;
+    }
+    .app{
+      height: 100dvh;
+      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+      display:flex;
+      flex-direction:column;
+    }
+    .topbar{
+      flex: 0 0 auto;
+      padding: 14px 14px 10px;
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      gap: 10px;
+    }
+    .brand{
+      display:flex;
+      align-items:center;
+      gap: 10px;
+      min-width: 0;
+    }
+    .logo{
+      width: 42px; height: 42px;
+      border-radius: 14px;
+      background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(124,92,255,.95));
+      box-shadow: 0 10px 25px rgba(124,92,255,.25);
+      display:grid;
+      place-items:center;
+      font-weight:800;
+      letter-spacing:.5px;
+    }
+    .brandText{
+      min-width:0;
+      display:flex;
+      flex-direction:column;
+      gap:2px;
+    }
+    .brandText .title{
+      font-size: 16px;
+      font-weight: 800;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+    }
+    .brandText .subtitle{
+      font-size: 12px;
+      color: var(--muted);
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+    }
+    .actions{
+      display:flex;
+      gap: 8px;
+      flex: 0 0 auto;
+    }
+    .btn{
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,27,51,.55);
+      color: var(--text);
+      padding: 10px 12px;
+      border-radius: 12px;
+      cursor:pointer;
+      font-weight:700;
+      font-size: 13px;
+      transition: transform .12s ease, border-color .12s ease;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      display:inline-flex;
+      align-items:center;
+      gap: 8px;
+      user-select:none;
+    }
+    .btn:hover{ transform: translateY(-1px); border-color: rgba(110,168,255,.35); }
+    .btn:active{ transform: translateY(0px); }
+    .btn.danger:hover{ border-color: rgba(251,113,133,.45); }
+    .chatCard{
+      flex: 1 1 auto;
+      margin: 0 14px 12px;
+      border-radius: var(--radius);
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,27,51,.35);
+      box-shadow: var(--shadow);
+      overflow:hidden;
+      display:flex;
+      flex-direction:column;
+      min-height: 0;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .messages{
+      flex: 1 1 auto;
+      padding: 16px 14px;
+      overflow:auto;
+      scroll-behavior:smooth;
+      min-height: 0;
+    }
+    .messages::-webkit-scrollbar{ width: 10px; }
+    .messages::-webkit-scrollbar-track{ background: transparent; }
+    .messages::-webkit-scrollbar-thumb{
+      background: rgba(255,255,255,.12);
+      border-radius: 10px;
+      border: 2px solid transparent;
+      background-clip: content-box;
+    }
+    .empty{
+      padding: 22px 14px;
+      border: 1px dashed rgba(255,255,255,.18);
+      border-radius: 16px;
+      background: rgba(0,0,0,.12);
+      color: var(--muted);
+      line-height: 1.9;
+    }
+    .empty h2{
+      color: var(--text);
+      font-size: 18px;
+      margin-bottom: 6px;
+      font-weight: 800;
+    }
+    .msgRow{
+      display:flex;
+      gap: 10px;
+      margin-bottom: 12px;
+      align-items:flex-end;
+    }
+    .msgRow.user{ justify-content:flex-start; flex-direction: row-reverse; }
+    .msgRow.ai{ justify-content:flex-start; }
+    /* ===== Pro avatar + name ===== */
+    .avatarCol{
+      width: 56px;
+      flex: 0 0 auto;
+      display:flex;
+      flex-direction:column;
+      align-items:center;
+      gap: 6px;
+    }
+    .avatar{
+      width: 44px; height: 44px;
+      border-radius: 16px;
+      display:grid;
+      place-items:center;
+      border: 1px solid rgba(255,255,255,.12);
+      box-shadow: 0 10px 25px rgba(0,0,0,.25);
+      overflow:hidden;
+      position: relative;
+      user-select:none;
+    }
+    .avatarName{
+      max-width: 56px;
+      font-size: 11px;
+      color: rgba(234,240,255,.78);
+      text-align:center;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      line-height: 1.2;
+    }
+    .avatar.ai{
+      background: linear-gradient(135deg, rgba(110,168,255,.25), rgba(124,92,255,.25));
+      color: rgba(234,240,255,.95);
+      font-weight: 900;
+      letter-spacing: .5px;
+    }
+    /* Normal user: emoji avatar (not text) */
+    .avatar.userDefault{
+      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
+                  linear-gradient(135deg, rgba(110,168,255,.75), rgba(124,92,255,.35));
+      border-color: rgba(110,168,255,.35);
+      color: #081022;
+      font-size: 20px;
+    }
+    /* Bissan: flower + pink bg + subtle sparkle */
+    .avatar.userBissan{
+      background:
+        radial-gradient(circle at 25% 25%, rgba(255,255,255,.45), transparent 55%),
+        radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%),
+        linear-gradient(135deg, rgba(255,105,180,.75), rgba(255,182,193,.35));
+      border-color: rgba(255,105,180,.40);
+      color: #2b0b1a;
+      font-size: 20px;
+    }
+    .avatar.userBissan::after{
+      content:"";
+      position:absolute;
+      inset:-40%;
+      background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.25), transparent);
+      animation: spin 3.8s linear infinite;
+      opacity:.55;
+    }
+    .avatar.userBissan > span{
+      position: relative;
+      z-index: 2;
+      filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
+    }
+    @keyframes spin{
+      to{ transform: rotate(360deg); }
+    }
+    .bubbleWrap{
+      max-width: min(760px, 86%);
+      display:flex;
+      flex-direction:column;
+      gap: 6px;
+      min-width: 0;
+    }
+    .bubble{
+      border-radius: 16px;
+      padding: 12px 14px;
+      line-height: 1.95;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(0,0,0,.12);
+      word-break: break-word;
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+    .user .bubble{
+      background: linear-gradient(135deg, rgba(110,168,255,.18), rgba(124,92,255,.18));
+      border-color: rgba(110,168,255,.22);
+    }
+    .ai .bubble{
+      background: rgba(15,26,46,.55);
+      border-color: rgba(255,255,255,.10);
+    }
+    .meta{
+      font-size: 12px;
+      color: var(--muted);
+      padding: 0 6px;
+      display:flex;
+      gap: 10px;
+      align-items:center;
+      flex-wrap:wrap;
+    }
+    .pill{
+      font-size: 12px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(0,0,0,.12);
+      color: var(--muted);
+    }
+    .arabicText{
+      direction: rtl;
+      text-align: right;
+      unicode-bidi: plaintext;
+    }
+    /* Code blocks */
+    .codeBlock{
+      margin: 10px 0;
+      border-radius: 14px;
+      overflow:hidden;
+      border: 1px solid rgba(255,255,255,.10);
+      background: #1e1e1e;
+    }
+    .codeHeader{
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      padding: 8px 10px;
+      background: #252526;
+      border-bottom: 1px solid #2a2a2a;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      direction:ltr;
+    }
+    .codeLeft{ display:flex; align-items:center; gap: 10px; min-width:0; }
+    .dots{ display:flex; gap:6px; }
+    .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
+    .dot.r{ background:#ff5f56; }
+    .dot.y{ background:#ffbd2e; }
+    .dot.g{ background:#27c93f; }
+    .lang{
+      font-size: 12px;
+      color:#cfcfcf;
+      opacity:.9;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      max-width: 220px;
+      text-transform: lowercase;
+    }
+    .copyBtn{
+      border: 1px solid #3c3c3c;
+      background: transparent;
+      color:#cfcfcf;
+      padding: 6px 10px;
+      border-radius: 10px;
+      cursor:pointer;
+      font-size: 12px;
+    }
+    .copyBtn:hover{ background:#2a2d2e; border-color:#4c4c4c; }
+    .copyBtn.copied{ background:#0e639c; border-color:#0e639c; color:#fff; }
+    pre{ margin:0; overflow:auto; }
+    pre code{
+      display:block;
+      padding: 14px 14px;
+      font-size: 13px;
+      line-height: 1.7;
+      direction:ltr;
+      text-align:left;
+      white-space: pre;
+      tab-size: 4;
+    }
+    /* Composer */
+    .composer{
+      flex: 0 0 auto;
+      padding: 12px;
+      border-top: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,27,51,.45);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .composerRow{
+      display:flex;
+      gap: 10px;
+      align-items:flex-end;
+    }
+    textarea{
+      flex: 1 1 auto;
+      resize:none;
+      max-height: 160px;
+      min-height: 46px;
+      padding: 12px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,.12);
+      background: rgba(0,0,0,.18);
+      color: var(--text);
+      outline:none;
+      font-size: 14px;
+      line-height: 1.8;
+      font-family: inherit;
+    }
+    textarea::placeholder{ color: rgba(234,240,255,.55); }
+    .sendBtn{
+      flex: 0 0 auto;
+      padding: 12px 14px;
+      border-radius: 14px;
+      border: 1px solid rgba(110,168,255,.35);
+      background: linear-gradient(135deg, rgba(110,168,255,.85), rgba(124,92,255,.85));
+      color: #081022;
+      font-weight: 900;
+      cursor:pointer;
+      min-width: 92px;
+    }
+    .sendBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
+    .sendBtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
+    /* Thinking bubble */
+    .thinking{
+      display:inline-flex;
+      align-items:center;
+      gap: 10px;
+      color: var(--muted);
+      font-weight: 700;
+    }
+    .dotsAnim{ display:inline-flex; gap: 4px; align-items:center; }
+    .dotsAnim span{
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: rgba(234,240,255,.55);
+      display:inline-block;
+      animation: bounce 1.1s infinite ease-in-out;
+    }
+    .dotsAnim span:nth-child(2){ animation-delay: .15s; }
+    .dotsAnim span:nth-child(3){ animation-delay: .30s; }
+    @keyframes bounce{
+      0%, 80%, 100%{ transform: translateY(0); opacity:.55; }
+      40%{ transform: translateY(-5px); opacity:1; }
+    }
+    /* Typing cursor */
+    .typeCursor{
+      display:inline-block;
+      width: 10px;
+      margin-right: 2px;
+      opacity: .9;
+      animation: blink 1s infinite;
+    }
+    @keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
+    /* MCQ */
+    .mcq{
+      margin-top: 10px;
+      border-radius: 16px;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(0,0,0,.12);
+      overflow:hidden;
+    }
+    .mcqHead{
+      padding: 12px 12px;
+      border-bottom: 1px solid rgba(255,255,255,.10);
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      gap: 10px;
+    }
+    .mcqTitle{ font-weight: 900; color: var(--text); line-height: 1.7; }
+    .mcqBadge{
+      font-size: 12px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(255,255,255,.10);
+      color: var(--muted);
+      background: rgba(15,26,46,.55);
+      white-space:nowrap;
+    }
+    .mcqBody{ padding: 10px 10px 12px; display:flex; flex-direction:column; gap: 8px; }
+    .opt{
+      padding: 12px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,26,46,.45);
+      cursor:pointer;
+      display:flex;
+      align-items:center;
+      gap: 10px;
+      user-select:none;
+    }
+    .opt:hover{ transform: translateY(-1px); border-color: rgba(110,168,255,.35); }
+    .opt.disabled{ cursor: default; opacity: .95; }
+    .opt.correct{ border-color: rgba(45,212,191,.55); background: rgba(45,212,191,.12); }
+    .opt.wrong{ border-color: rgba(251,113,133,.55); background: rgba(251,113,133,.10); }
+    .optKey{
+      width: 30px; height: 30px;
+      border-radius: 12px;
+      display:grid;
+      place-items:center;
+      font-weight: 900;
+      background: rgba(255,255,255,.08);
+      border: 1px solid rgba(255,255,255,.10);
+      flex: 0 0 auto;
+    }
+    .optText{ flex: 1 1 auto; line-height: 1.8; }
+    .optIcon{ flex: 0 0 auto; font-weight: 900; }
+    @media (max-width: 520px){
+      .topbar{ padding: 12px 12px 8px; }
+      .chatCard{ margin: 0 10px 10px; border-radius: 16px; }
+      .messages{ padding: 14px 12px; }
+      .bubbleWrap{ max-width: 92%; }
+      .sendBtn{ min-width: 78px; }
+      .avatarCol{ width: 52px; }
+      .avatarName{ max-width: 52px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <div class="topbar">
+      <div class="brand">
+        <div class="logo">IT</div>
+        <div class="brandText">
+          <div class="title">مساعد ITGS226</div>
+          <div class="subtitle">مقدمة في الإنترنت • دردشة ذكية + أسئلة اختيار من متعدد</div>
+        </div>
+      </div>
+      <div class="actions">
+        <button class="btn danger" onclick="clearHistory()">مسح المحادثة</button>
+      </div>
+    </div>
+    <div class="chatCard">
+      <div class="messages" id="messages">
+        <div class="empty" id="emptyState">
+          <h2>أهلًا بك</h2>
+          <p>
+            اكتب سؤالك في مادة <b>ITGS226 مقدمة في الإنترنت</b> وسأساعدك بشرح واضح ومنظم.
+            <br/>يمكنني أيضًا إنشاء أسئلة اختيار من متعدد (MCQ) للتدريب.
+          </p>
+        </div>
+      </div>
+      <div class="composer">
+        <div class="composerRow">
+          <textarea id="input" rows="1" placeholder="اكتب سؤالك هنا... (Enter للإرسال، Shift+Enter لسطر جديد)"></textarea>
+          <button class="sendBtn" id="sendBtn" onclick="sendMessage()">إرسال</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const messagesEl = document.getElementById('messages');
+    const inputEl = document.getElementById('input');
+    const sendBtn = document.getElementById('sendBtn');
+    const emptyState = document.getElementById('emptyState');
+    // Loaded from backend (/session_info)
+    let USER_PROFILE = {
+      display_name: 'أنت',
+      is_bissan: false
+    };
+    // MCQ state
+    let mcqAnswers = {};
+    let mcqCounter = 0;
+    // Auto-resize textarea
+    inputEl.addEventListener('input', function(){
+      this.style.height = 'auto';
+      this.style.height = Math.min(this.scrollHeight, 160) + 'px';
+    });
+    inputEl.addEventListener('keydown', function(e){
+      if (e.key === 'Enter' && !e.shiftKey){
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+    function scrollToBottom(){
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+    function escapeHtml(text){
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    function normalizeTextClient(text){
+      if (!text) return '';
+      return text
+        .replace(/[\u200B-\u200F\u202A-\u202E\u2066-\u2069]/g, '')
+        .replace(/\r\n/g, '\n')
+        .replace(/\r/g, '\n')
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+    }
+    function parseCodeBlocks(text){
+      const codeRegex = /<code_(\w+)>([\s\S]*?)<\/code_\1>/g;
+      const parts = [];
+      let lastIndex = 0;
+      let match;
+      while ((match = codeRegex.exec(text)) !== null){
+        if (match.index > lastIndex){
+          parts.push({ type:'text', content: text.substring(lastIndex, match.index) });
+        }
+        parts.push({ type:'code', language: match[1], content: match[2].trim() });
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < text.length){
+        parts.push({ type:'text', content: text.substring(lastIndex) });
+      }
+      return parts.length ? parts : [{ type:'text', content:text }];
+    }
+    function createCodeBlock(language, code){
+      const wrap = document.createElement('div');
+      wrap.className = 'codeBlock';
+      const header = document.createElement('div');
+      header.className = 'codeHeader';
+      const left = document.createElement('div');
+      left.className = 'codeLeft';
+      const dots = document.createElement('div');
+      dots.className = 'dots';
+      dots.innerHTML = `<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>`;
+      const lang = document.createElement('span');
+      lang.className = 'lang';
+      lang.textContent = (language || 'text').toLowerCase();
+      left.appendChild(dots);
+      left.appendChild(lang);
+      const copyBtn = document.createElement('button');
+      copyBtn.className = 'copyBtn';
+      copyBtn.textContent = 'نسخ';
+      copyBtn.addEventListener('click', () => copyCode(code, copyBtn));
+      header.appendChild(left);
+      header.appendChild(copyBtn);
+      const pre = document.createElement('pre');
+      const codeEl = document.createElement('code');
+      const safeLang = (language || 'plaintext').toLowerCase();
+      codeEl.className = `language-${safeLang}`;
+      codeEl.textContent = code;
+      pre.appendChild(codeEl);
+      wrap.appendChild(header);
+      wrap.appendChild(pre);
+      setTimeout(() => { try { hljs.highlightElement(codeEl); } catch(e){} }, 0);
+      return wrap;
+    }
+    async function copyCode(code, btn){
+      try{
+        await navigator.clipboard.writeText(code);
+        btn.classList.add('copied');
+        btn.textContent = 'تم النسخ';
+        setTimeout(() => {
+          btn.classList.remove('copied');
+          btn.textContent = 'نسخ';
+        }, 1200);
+      }catch(e){
+        btn.textContent = 'فشل النسخ';
+        setTimeout(() => btn.textContent = 'نسخ', 1200);
+      }
+    }
+    function parseMCQ(text){
+      const mcqRegex = /<mcq>([\s\S]*?)<\/mcq>/g;
+      const mcqs = [];
+      let match;
+      while ((match = mcqRegex.exec(text)) !== null){
+        const mcqContent = match[1];
+        const qMatch = mcqContent.match(/<q>([\s\S]*?)<\/q>/);
+        const question = qMatch ? qMatch[1].trim() : '';
+        const options = [];
+        const optionRegex = /<(true|false)>([\s\S]*?)<\/(true|false)>/g;
+        let optMatch;
+        while ((optMatch = optionRegex.exec(mcqContent)) !== null){
+          options.push({ text: optMatch[2].trim(), isCorrect: optMatch[1] === 'true' });
+        }
+        if (question && options.length) mcqs.push({ question, options });
+      }
+      return mcqs;
+    }
+    function removeMCQTags(text){
+      return text.replace(/<mcq>[\s\S]*?<\/mcq>/g, '').trim();
+    }
+    function createMCQElement(mcqData, mcqId){
+      const box = document.createElement('div');
+      box.className = 'mcq';
+      box.dataset.mcqId = mcqId;
+      const head = document.createElement('div');
+      head.className = 'mcqHead';
+      const title = document.createElement('div');
+      title.className = 'mcqTitle arabicText';
+      title.textContent = `سؤال ${mcqId + 1}: ${mcqData.question}`;
+      const badge = document.createElement('div');
+      badge.className = 'mcqBadge';
+      badge.textContent = 'اختر الإجابة الصحيحة';
+      head.appendChild(title);
+      head.appendChild(badge);
+      const body = document.createElement('div');
+      body.className = 'mcqBody';
+      mcqData.options.forEach((opt, idx) => {
+        const row = document.createElement('div');
+        row.className = 'opt arabicText';
+        row.dataset.correct = opt.isCorrect ? 'true' : 'false';
+        row.dataset.index = idx;
+        const key = document.createElement('div');
+        key.className = 'optKey';
+        key.textContent = String.fromCharCode(65 + idx);
+        const text = document.createElement('div');
+        text.className = 'optText';
+        text.textContent = opt.text;
+        const icon = document.createElement('div');
+        icon.className = 'optIcon';
+        icon.textContent = '';
+        row.appendChild(key);
+        row.appendChild(text);
+        row.appendChild(icon);
+        row.addEventListener('click', () => handleMCQClick(mcqId, idx, row, body));
+        body.appendChild(row);
+      });
+      box.appendChild(head);
+      box.appendChild(body);
+      return box;
+    }
+    function handleMCQClick(mcqId, selectedIndex, selectedRow, body){
+      if (body.dataset.answered === 'true') return;
+      const rows = body.querySelectorAll('.opt');
+      body.dataset.answered = 'true';
+      const isCorrect = selectedRow.dataset.correct === 'true';
+      rows.forEach(r => r.classList.add('disabled'));
+      if (isCorrect){
+        selectedRow.classList.add('correct');
+        selectedRow.querySelector('.optIcon').textContent = '✓';
+      } else {
+        selectedRow.classList.add('wrong');
+        selectedRow.querySelector('.optIcon').textContent = '✗';
+        rows.forEach(r => {
+          if (r.dataset.correct === 'true'){
+            r.classList.add('correct');
+            r.querySelector('.optIcon').textContent = '✓';
+          }
+        });
+      }
+      mcqAnswers[mcqId] = selectedIndex + 1;
+    }
+    function getMCQAnswersText(){
+      if (!Object.keys(mcqAnswers).length) return '';
+      let t = '\n\n[إجابات أسئلة الاختيار السابقة:\n';
+      Object.keys(mcqAnswers).sort((a,b)=>parseInt(a)-parseInt(b)).forEach(id=>{
+        t += `${parseInt(id)+1}. ${mcqAnswers[id]}\n`;
+      });
+      t += ']';
+      return t;
+    }
+    function createAvatarCol(role){
+      const col = document.createElement('div');
+      col.className = 'avatarCol';
+      const avatar = document.createElement('div');
+      const nameEl = document.createElement('div');
+      nameEl.className = 'avatarName';
+      if (role === 'ai'){
+        avatar.className = 'avatar ai';
+        avatar.textContent = 'AI';
+        nameEl.textContent = 'المساعد';
+      } else {
+        if (USER_PROFILE.is_bissan){
+          avatar.className = 'avatar userBissan';
+          avatar.innerHTML = '<span>🌸</span>';
+          nameEl.textContent = USER_PROFILE.display_name || 'بيسان';
+        } else {
+          avatar.className = 'avatar userDefault';
+          avatar.textContent = '👤'; // emoji (not text)
+          nameEl.textContent = USER_PROFILE.display_name || 'أنت';
+        }
+      }
+      col.appendChild(avatar);
+      col.appendChild(nameEl);
+      return col;
+    }
+    function createMessageRow(role){
+      if (emptyState) emptyState.remove();
+      const row = document.createElement('div');
+      row.className = `msgRow ${role}`;
+      const avatarCol = createAvatarCol(role);
+      const wrap = document.createElement('div');
+      wrap.className = 'bubbleWrap';
+      const bubble = document.createElement('div');
+      bubble.className = 'bubble arabicText';
+      const meta = document.createElement('div');
+      meta.className = 'meta';
+      wrap.appendChild(bubble);
+      wrap.appendChild(meta);
+      row.appendChild(avatarCol);
+      row.appendChild(wrap);
+      messagesEl.appendChild(row);
+      scrollToBottom();
+      return { row, bubble, meta, wrap };
+    }
+    function setMeta(metaEl, sheet, time){
+      metaEl.innerHTML = '';
+      if (sheet){
+        const p1 = document.createElement('span');
+        p1.className = 'pill';
+        p1.textContent = `ورقة: ${sheet}`;
+        metaEl.appendChild(p1);
+      }
+      if (time){
+        const p2 = document.createElement('span');
+        p2.className = 'pill';
+        p2.textContent = `الوقت: ${time}`;
+        metaEl.appendChild(p2);
+      }
+    }
+    function addUserMessage(text){
+      const { bubble } = createMessageRow('user');
+      bubble.innerHTML = escapeHtml(normalizeTextClient(text)).replace(/\n/g,'<br>');
+    }
+    function showThinking(){
+      const { row, bubble } = createMessageRow('ai');
+      row.id = 'thinkingRow';
+      bubble.innerHTML = `
+        <div class="thinking arabicText">
+          <span>جاري التفكير</span>
+          <span class="dotsAnim" aria-hidden="true">
+            <span></span><span></span><span></span>
+          </span>
+        </div>
+      `;
+    }
+    function hideThinking(){
+      const r = document.getElementById('thinkingRow');
+      if (r) r.remove();
+    }
+    /* Mini-Markdown */
+    function renderMiniMarkdownToHtml(text){
+      let s = normalizeTextClient(text);
+      s = escapeHtml(s);
+      s = s.replace(/^\s*---\s*$/gm, '<hr>');
+      s = s.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+      s = s.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+      s = s.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
+      s = s.replace(/`([^`]+)`/g, '<code class="inlineCode">$1</code>');
+      const lines = s.split('\n');
+      let out = '';
+      let inUl = false;
+      let inOl = false;
+      const closeLists = () => {
+        if (inUl){ out += '</ul>'; inUl = false; }
+        if (inOl){ out += '</ol>'; inOl = false; }
+      };
+      for (let line of lines){
+        const ulMatch = line.match(/^\s*-\s+(.+)$/);
+        const olMatch = line.match(/^\s*(\d+)\.\s+(.+)$/);
+        if (ulMatch){
+          if (inOl){ out += '</ol>'; inOl = false; }
+          if (!inUl){ out += '<ul>'; inUl = true; }
+          out += `<li>${ulMatch[1]}</li>`;
+          continue;
+        }
+        if (olMatch){
+          if (inUl){ out += '</ul>'; inUl = false; }
+          if (!inOl){ out += '<ol>'; inOl = true; }
+          out += `<li>${olMatch[2]}</li>`;
+          continue;
+        }
+        closeLists();
+        if (line.trim() === ''){
+          out += '<br>';
+        } else if (line.startsWith('<h2>') || line.startsWith('<h3>') || line.startsWith('<hr>')){
+          out += line;
+        } else {
+          out += `<p>${line}</p>`;
+        }
+      }
+      closeLists();
+      return out;
+    }
+    function renderAssistantParts(containerBubble, parts){
+      containerBubble.innerHTML = '';
+      parts.forEach(part => {
+        if (part.type === 'code'){
+          containerBubble.appendChild(createCodeBlock(part.language, part.content));
+        } else {
+          const block = document.createElement('div');
+          block.className = 'arabicText';
+          block.innerHTML = renderMiniMarkdownToHtml(part.content);
+          containerBubble.appendChild(block);
+        }
+      });
+    }
+    function tokenizeHtml(html){
+      const tokens = [];
+      const re = /(<[^>]+>)/g;
+      const parts = html.split(re).filter(Boolean);
+      for (const part of parts){
+        if (part.startsWith('<') && part.endsWith('>')){
+          tokens.push(part);
+        } else {
+          for (const ch of part) tokens.push(ch);
+        }
+      }
+      return tokens;
+    }
+    async function typeAssistantMessage(containerBubble, fullText){
+      const normalized = normalizeTextClient(fullText);
+      const mcqs = parseMCQ(normalized);
+      const withoutMCQ = removeMCQTags(normalized);
+      const parts = parseCodeBlocks(withoutMCQ);
+      const textOnly = parts
+        .filter(p => p.type === 'text')
+        .map(p => p.content)
+        .join('')
+        .trim();
+      const formattedHtml = renderMiniMarkdownToHtml(textOnly);
+      const tokens = tokenizeHtml(formattedHtml);
+      containerBubble.innerHTML = '';
+      const typingWrap = document.createElement('div');
+      typingWrap.className = 'arabicText';
+      containerBubble.appendChild(typingWrap);
+      const cursor = document.createElement('span');
+      cursor.className = 'typeCursor';
+      cursor.textContent = '▍';
+      containerBubble.appendChild(cursor);
+      let out = '';
+      const speed = 6;
+      for (let i = 0; i < tokens.length; i++){
+        const tok = tokens[i];
+        out += tok;
+        typingWrap.innerHTML = out;
+        const isTag = tok.startsWith('<') && tok.endsWith('>');
+        if (!isTag){
+          scrollToBottom();
+          await new Promise(r => setTimeout(r, speed));
+        }
+      }
+      cursor.remove();
+      renderAssistantParts(containerBubble, parts);
+      return mcqs;
+    }
+    // ✅ IMPORTANT: send name to AI as prefix: "Name: message"
+    function buildMessageForAI(rawMsg){
+      const name = (USER_PROFILE.display_name || 'User').trim();
+      // Example: "bissan: hi there"
+      return `${name}: ${rawMsg}`;
+    }
+    async function sendMessage(){
+      const msg = inputEl.value.trim();
+      if (!msg) return;
+      inputEl.disabled = true;
+      sendBtn.disabled = true;
+      addUserMessage(msg);
+      // Send to AI with name prefix + MCQ answers
+      const fullMessage = buildMessageForAI(msg) + getMCQAnswersText();
+      inputEl.value = '';
+      inputEl.style.height = 'auto';
+      mcqAnswers = {};
+      showThinking();
+      try{
+        const res = await fetch('/send_message', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message: fullMessage })
+        });
+        const data = await res.json();
+        hideThinking();
+        if (!data.success){
+          const { bubble } = createMessageRow('ai');
+          bubble.innerHTML = escapeHtml(data.error || 'حدث خطأ').replace(/\n/g,'<br>');
+          return;
+        }
+        // Update profile if backend returns it
+        if (data.user){
+          USER_PROFILE = data.user;
+        }
+        const { bubble, meta, wrap } = createMessageRow('ai');
+        setMeta(meta, data.sheet_number, data.timestamp);
+        const mcqs = await typeAssistantMessage(bubble, data.response);
+        if (mcqs && mcqs.length){
+          mcqs.forEach(mcq => {
+            const el = createMCQElement(mcq, mcqCounter);
+            wrap.appendChild(el);
+            mcqCounter++;
+          });
+        }
+        scrollToBottom();
+      }catch(e){
+        hideThinking();
+        const { bubble } = createMessageRow('ai');
+        bubble.innerHTML = 'تعذر الاتصال بالخادم. تأكد من تشغيل السيرفر ثم أعد المحاولة.';
+        console.error(e);
+      }finally{
+        inputEl.disabled = false;
+        sendBtn.disabled = false;
+        inputEl.focus();
+      }
+    }
+    async function clearHistory(){
+      if (!confirm('هل تريد مسح المحادثة بالكامل؟')) return;
+      try{
+        const res = await fetch('/clear_history', { method:'POST', headers:{'Content-Type':'application/json'} });
+        const data = await res.json();
+        if (data.success){
+          messagesEl.innerHTML = `
+            <div class="empty" id="emptyState">
+              <h2>تم مسح المحادثة</h2>
+              <p>ابدأ بسؤال جديد في <b>ITGS226 مقدمة في الإنترنت</b>.</p>
+            </div>
+          `;
+          mcqAnswers = {};
+          mcqCounter = 0;
+        }
+      }catch(e){
+        alert('فشل مسح المحادثة');
+        console.error(e);
+      }
+    }
+    async function showHistory(){
+      try{
+        const res = await fetch('/get_history');
+        const data = await res.json();
+        if (data.history && data.history.length){
+          let t = 'سجل المحادثة:\n\n';
+          data.history.forEach((m, i) => {
+            const who = m.role === 'user' ? (USER_PROFILE.display_name || 'المستخدم') : 'المساعد';
+            const snippet = (m.content || '').replace(/\s+/g,' ').slice(0, 120);
+            t += `${i+1}) ${who}: ${snippet}${snippet.length>=120?'...':''}\n\n`;
+          });
+          alert(t);
+        } else {
+          alert('لا يوجد سجل بعد');
+        }
+      }catch(e){
+        alert('فشل تحميل السجل');
+        console.error(e);
+      }
+    }
+    function downloadChatJson(){
+      window.open('/bissan/download', '_blank');
+    }
+    async function loadSessionInfo(){
+      try{
+        const res = await fetch('/session_info');
+        const data = await res.json();
+        if (data && data.user){
+          USER_PROFILE = data.user;
+        }
+      }catch(e){
+        console.warn('Failed to load session_info', e);
+      }
+    }
+    window.addEventListener('load', async () => {
+      await loadSessionInfo();
+      inputEl.focus();
+    });
+  </script>
+</body>
 </html>