:root{
      --bg:#1c2733;
      --card:#0a0a0a;
      --muted:#94a3b8;
      --red:#8B0000;
      --red-glow: rgba(255,45,58,0.15);
      --blue:#00a6ff;
      --blue-glow: rgba(0,166,255,0.12);
      --glass: rgba(255,255,255,0.03);
      --header-bg: #003366;
      --sidebar-width: 320px;
      --btn-radius: 10px;
      --accent-red-1: linear-gradient(180deg,#ef4444,#f97316);
      --accent-red-2: linear-gradient(180deg,#dc2626,#ef4444);
      --shadow: rgba(0,0,0,0.6);
      --input-bg: rgba(255,255,255,0.02);
      --border: rgba(255,255,255,0.02);
      --text: #e6eef6;
    }
       .model-logo-small {
    width: 20px; /* أو أي حجم مناسب */
    height: 20px;
    margin-left: 8px; /* مسافة بين اللوجو والاسم */
}

/* تعديل عرض العنصر الأساسي */
.model-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* لضمان أن يبدأ كل من اللوجو والاسم من نفس الاتجاه */
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.model-item:hover {
    background-color: #f0f0f0;
}
    
    body[data-theme='light'] {
      --bg: #f5f5f5;
      --card: #ffffff;
      --text: #333333;
      --muted: #666666;
      --red:#0056b3;
      --red-glow: rgba(0,86,179,0.15);
      --blue:#007bff;
      --blue-glow: rgba(0,123,255,0.12);
      --glass: rgba(0,0,0,0.03);
      --header-bg: #e9ecef;
      --accent-red-1: linear-gradient(180deg, #007bff, #0056b3);
      --accent-red-2: linear-gradient(180deg, #0056b3, #007bff);
      --shadow: rgba(0,0,0,0.1);
      --input-bg: #f1f3f5;
      --border: #e9ecef;
      color: var(--text);
    }
    
    body[lang='en'] { font-family: 'Segoe UI', Arial, sans-serif; }
    body[lang='zh'] { font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; }
    body[lang='en'][dir='ltr'] { direction: ltr; }
    body[lang='zh'][dir='ltr'] { direction: ltr; }

    *{box-sizing:border-box}
    body{margin:0; font-family:'Tajawal',system-ui,Arial; background:linear-gradient(180deg,var(--bg), #061019 80%); color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px}
    body[data-theme='light']{ background: #f5f5f5; }

    .app{width:100%; max-width:1100px; height:92vh; display:grid; grid-template-columns:var(--sidebar-width) 1fr; gap:18px}
    [dir='ltr'] .app{grid-template-columns:1fr var(--sidebar-width);}

    .sidebar{
      background:var(--card);
      border-radius:12px;
      padding:12px;
      overflow:auto;
      transition:transform .28s cubic-bezier(.2,.9,.2,1);
      transform: translateX(var(--sidebar-width));
      z-index:50;
      display:flex;
      flex-direction:column;
    }
    [dir='ltr'] .sidebar{transform: translateX(calc(var(--sidebar-width) * -1));}
    .sidebar.visible{ transform: translateX(0); }

    .sidebar h3{margin:6px 0 12px}
    .model-item{padding:10px;border-radius:10px;cursor:pointer;margin-bottom:8px;border:1px solid var(--border)}
    .model-item:hover{background:var(--input-bg)}
    .model-item.active{background:linear-gradient(90deg,var(--red),var(--blue)); color:white; font-weight:700}
    body[data-theme='light'] .model-item.active{ background: linear-gradient(90deg, var(--blue), var(--red)); }

    .top-actions{display:flex; gap:8px; align-items:center; justify-content:flex-start; margin-bottom:10px}
    .action-btn{padding:8px 10px; border-radius:10px; cursor:pointer; border:none; font-weight:700}
    .history-btn{background:linear-gradient(90deg, rgba(40,199,111,0.14), rgba(40,199,111,0.06)); color:#c8f7dc; box-shadow:0 8px 20px rgba(40,199,111,0.03)}
    .new-chat-btn{background:linear-gradient(90deg,var(--red),var(--blue)); color:#fff}
    body[data-theme='light'] .new-chat-btn{ background:linear-gradient(90deg,var(--blue),var(--red)); }

    .sidebar-footer{
      margin-top:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:stretch;
      justify-content:flex-end;
      padding-top:12px;
      border-top:1px solid var(--border);
    }
    .sidebar-footer .footer-btn{
      width:100%;
      padding:12px 10px;
      border-radius:var(--btn-radius);
      cursor:pointer;
      border:1px solid var(--border);
      background:transparent;
      font-weight:800;
      font-size:15px;
      text-align:center;
      transition:transform .12s, box-shadow .12s, opacity .12s;
    }
    .sidebar-footer .footer-btn:active{ transform:translateY(1px) }
    .footer-support{ background: var(--accent-red-1); color: #fff; box-shadow: 0 8px 28px rgba(239,68,68,0.12); }
    .footer-settings{ background: var(--accent-red-2); color: #fff; box-shadow: 0 8px 28px rgba(220,38,38,0.12); }
    .footer-logout{ background: linear-gradient(180deg,#b91c1c,#ef4444); color: #fff; box-shadow: 0 8px 28px rgba(239,68,68,0.12); }
    body[data-theme='light'] .footer-logout { background: linear-gradient(180deg,#dc3545,#e74c3c); }

    .panel{background:var(--card); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
    .chat-header{display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--header-bg); border-bottom:1px solid var(--border); box-shadow:0 6px 24px var(--shadow)}
    .menu-btn{width:46px;height:46px;border-radius:10px;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer}
    .menu-icon{width:20px;height:16px;position:relative}
    .menu-icon span{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--blue));border-radius:2px}
    .menu-icon span:nth-child(1){top:0}
    .menu-icon span:nth-child(2){top:7px}
    .menu-icon span:nth-child(3){top:14px}
    .chat-title{font-weight:900; font-size:18px}
    .chat-sub{font-size:13px; color:var(--muted)}

    .messages{flex:1; padding:18px; overflow:auto; display:flex; flex-direction:column; gap:12px; background:linear-gradient(180deg, var(--glass), transparent)}
    .bubble{max-width:74%; padding:12px 14px; border-radius:16px; position:relative; word-wrap:break-word}
    .bubble.user{align-self:flex-end; background:linear-gradient(90deg,var(--red), #ff6b6b); color:#fff; border:1px solid rgba(255,45,58,0.18)}
    .bubble.user::after{content:''; position:absolute; inset:-3px; border-radius:18px; box-shadow:0 0 22px var(--red-glow); pointer-events:none}
    .bubble.bot{align-self:flex-start; background:linear-gradient(90deg,#04263a,var(--blue)); color:#fff; border:1px solid rgba(0,166,255,0.12)}
    .bubble.bot::after{content:''; position:absolute; inset:-3px; border-radius:18px; box-shadow:0 0 22px var(--blue-glow); pointer-events:none}
    .bubble.thinking{opacity:0.9; filter: blur(0.2px);}
    .msg-meta{font-size:12px;color:var(--muted); margin-top:6px}

    .attachment{display:block;margin-top:8px;border-radius:10px;overflow:hidden}
    .attachment img{max-width:320px;border-radius:8px;display:block}
    .attachment video{max-width:420px;border-radius:8px;display:block}
    .attachment .download-btn{display:inline-block;margin-top:6px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.04);color:var(--muted);font-size:13px;text-decoration:none}

    .bot-controls{display:flex; gap:8px; align-items:center; margin-top:8px}
    


    .composer{display:flex; flex-direction:column; gap:8px; padding:12px; border-top:1px solid var(--border); background:linear-gradient(180deg, var(--glass), transparent)}
    .controls{display:flex; gap:6px; align-items:center}
    .icon-btn{width:44px;height:44px;border-radius:12px;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer}
    .input-wrap{flex:1; display:flex; gap:8px; align-items:center; background:transparent; padding:8px;border-radius:12px}
    .input{flex:1; border:none; background:var(--input-bg); color:inherit; font-size:15px; padding:10px 12px; border-radius:10px; outline:none}
    .send-btn{background:linear-gradient(90deg,var(--red),var(--blue)); color:white; border:none; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; box-shadow:0 6px 24px var(--shadow)}
    body[data-theme='light'] .send-btn { background:linear-gradient(90deg, #007bff, #0056b3); box-shadow: 0 6px 24px rgba(0,0,0,0.2); }

    .deep-toggle{width:44px;height:44px;border-radius:12px;border:none;background:linear-gradient(90deg,#6b21a8,#8b5cf6);color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;font-size:16px; transition:transform .12s, box-shadow .12s, opacity .12s}
    .deep-toggle.active{box-shadow:0 10px 34px rgba(139,92,246,0.22); transform:translateY(-2px); background: linear-gradient(90deg,#1dd1a1,#06b6d4); color:#031018}
    body[data-theme='light'] .deep-toggle { background: linear-gradient(90deg, #007bff, #0056b3); }
    body[data-theme='light'] .deep-toggle.active { background: linear-gradient(90deg, #28a745, #218838); box-shadow: 0 10px 34px rgba(40, 167, 69, 0.22); color:white; }

    .persona-btn { background: linear-gradient(90deg, #ff9900, #ffc107); color: #fff; font-weight: 800; font-size: 16px; }
    body[data-theme='light'] .persona-btn { background: linear-gradient(90deg, #ffc107, #e0a800); color: #333; }

    .previews{display:flex; gap:8px; align-items:center}
    .preview-item{width:72px;height:56px;border-radius:8px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.04);background:#08121a}
    body[data-theme='light'] .preview-item { background: #e9ecef; border-color: #ddd; }
    
    .preview-item img, .preview-item video{width:100%; height:100%; object-fit:cover; display:block}
    .preview-remove{position:absolute; top:6px; left:6px; background:rgba(0,0,0,0.5); padding:4px; border-radius:6px; cursor:pointer}
    .preview-remove:hover { background: rgba(255,255,255,0.2); }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      z-index: 100;
    }
    .modal.show {
      opacity: 1;
      visibility: visible;
    }
    .modal-content {
      background: var(--card);
      border-radius: 12px;
      padding: 24px;
      width: 90%;
      max-width: 500px;
      position: relative;
      transform: scale(0.95);
      transition: transform 0.3s;
      display: flex;
      flex-direction: column;
    }
    .modal.show .modal-content {
      transform: scale(1);
    }
    .close-modal {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
      color: var(--muted);
      transition: color 0.2s;
    }
    .close-modal:hover { color: var(--text); }
    .modal-content h3{ margin-top:0; }

    .history-list, .persona-list{max-height: 400px; overflow-y: auto; display:flex; flex-direction:column; gap:12px; padding-right:8px}
    .history-item{padding:15px; border-radius:12px; background:var(--input-bg); border:1px solid var(--border); cursor:pointer; transition: background-color 0.2s, transform 0.2s}
    .history-item:hover{background:var(--border); transform: translateY(-2px)}
    .history-item-title{font-weight:700; font-size:1rem; margin-bottom:4px; color:var(--text)}
    .history-item-meta{font-size:0.8rem; color:var(--muted); display:flex; justify-content:space-between}

    .persona-list{display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
    .persona-card{background:var(--input-bg); border-radius:12px; padding:15px; text-align:center; cursor:pointer; border:2px solid transparent; transition:border-color .2s, transform .2s}
    .persona-card:hover{transform: translateY(-2px);}
    .persona-card.active{border-color:var(--blue); background: var(--glass)}
    .persona-card h4{margin:8px 0 4px; font-size:1rem; color:var(--text)}
    .persona-card p{font-size:0.8rem; color:var(--muted); margin:0}

    .overlay{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:40; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
    .overlay.show{opacity:1; visibility:visible}

    .deep-popup{
      position:fixed;
      bottom:120px;
      left:50%;
      transform:translateX(-50%);
      background:linear-gradient(90deg,#1dd1a1,#06b6d4);
      color:#031018;
      padding:10px 20px;
      border-radius:8px;
      font-weight:700;
      z-index:100;
      opacity:0;
      visibility:hidden;
      transition:opacity .3s, visibility .3s, transform .3s;
      box-shadow:0 4px 15px rgba(0,0,0,0.2);
    }
    .deep-popup.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(-10px)}

    .settings-icon { position: fixed; top: 45px; left: 16px; font-size: 24px; color: #00bfff; background: rgba(30, 30, 30, 0.8); padding: 8px 10px; border-radius: 12px; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease, color 0.3s ease; z-index: 10000; user-select: none; }
    [dir='ltr'] .settings-icon { left: auto; right: 16px; }
    .settings-icon:hover { background: #00bfff; color: #121212; }
    
    @media (max-width: 980px) {
      .app { height: 95vh; }
    }
    
    @media (max-width:980px){
      .app{grid-template-columns:1fr;}
      .sidebar{position:fixed; right:18px; top:18px; bottom:18px; width:var(--sidebar-width); transform:translateX(var(--sidebar-width)); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.6)}
      body[data-theme='light'] .sidebar { box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
      .sidebar.visible{transform:translateX(0)}
      [dir='ltr'] .sidebar{left:18px; right:auto; transform:translateX(calc(var(--sidebar-width) * -1));}
      [dir='ltr'] .sidebar.visible{transform:translateX(0)}
      .history-modal{right:8px; width:calc(100% - 40px)}
    }
    .rec-indicator{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:10px;
      background:rgba(255,0,0,0.08);
      color:#ffb3b3;
      font-weight:700;
      border:1px solid rgba(255,0,0,0.12);
      margin-left:8px;
    }
    body[data-theme='light'] .rec-indicator { background:rgba(220,53,69,0.1); color:#dc3545; border-color:rgba(220,53,69,0.2); }
    
    .code-container {
      position: relative;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      margin-top: 12px;
      padding: 12px;
      overflow: hidden;
      direction: ltr; /* لضمان اتجاه الكود */
      text-align: left;
    }
    [dir='ltr'] .code-container { direction: ltr; text-align: left; }
    [dir='rtl'] .code-container { direction: ltr; text-align: left; }

    [data-theme='light'] .code-container {
      background-color: rgba(0, 0, 0, 0.05);
    }

    .code-container pre {
      position: relative;
      margin: 0;
      padding-right: 40px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .code-container code {    
      position: relative; /* ✨ مهم جداً */
      font-family: 'Courier New', monospace;
      font-size: 14px;
      color: #c8f7dc;
    }

    [data-theme='light'] .code-container code {
      color: #333;
    }

    .copy-btn {
   position: absolute;
   top: 8px;
   left: 8px; /* ✨ استبدلنا right بـ left علشان يكون على اليسار */
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff;
   border: none;
   padding: 6px 12px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;
   transition: background-color 0.2s, color 0.2s;
   opacity: 0.8;
    }


    
    [dir='ltr'] .copy-btn { right: 8px; left: auto; }
    [dir='rtl'] .copy-btn { right: auto; left: 8px; }

    [data-theme='light'] .copy-btn {
      background-color: rgba(0, 0, 0, 0.1);
      color: #333;
    }

    .copy-btn:hover {
      background-color: rgba(255, 255, 255, 0.2);
      opacity: 1;
    }