:root{
    --bg:#ffffff;      /* خلفية تشبه ChatGPT (الوضع الفاتح) */
    --panel:#ffffff;
    --border:#e5e7eb;
    --text:#111827;
    --muted:#6b7280;
    --accent:#10a37f;  /* أخضر ChatGPT */
    --bubble:#ffffff;
    --code-bg:#f3f4f6;
    --maxw:840px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--text);
    display:flex; flex-direction:column;
  }
  /* شريط محادثة مركزي */
  #wrap{width:100%; display:flex; justify-content:center; flex:1; overflow:hidden;}
#chat{
  width:100%; max-width:var(--maxw);
  padding:24px 16px calc(200px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
  .row{display:flex; gap:12px; margin:0 auto 14px; width:100%;}
  .avatar{
    flex:0 0 36px; height:36px; width:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel); border:1px solid var(--border); font-size:18px;
  }
  .msg{
    background:#f3f4f6; border:0px solid var(--border);
    padding:14px 16px; border-radius:16px; max-width:calc(var(--maxw) - 80px);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    line-height:1.7; word-wrap:break-word; overflow-wrap:anywhere;
  }
  .user .avatar{background:#eef2ff; border-color:#e0e7ff}
  .bot  .avatar{background:#ecfdf5; border-color:#d1fae5}
  .msg code{
    background:var(--code-bg); border:1px solid var(--border);
    padding:.15rem .35rem; border-radius:8px; font-size:.95em;
  }
  pre{background:var(--code-bg); border:1px solid var(--border); padding:14px; border-radius:12px; overflow:auto}
  pre code{background:transparent; border:0; padding:0}
  .msg ul{margin:.4rem 1.2rem; padding:0}
  .msg li{margin:.2rem 0}
  .meta{color:var(--muted); font-size:.85rem; margin-top:.5rem}
  /* منطقة الإدخال السفلية */
  #bar{
    position:fixed; left:0; right:0; bottom:0; background:linear-gradient(180deg,rgba(247,247,248,0), var(--bg) 22%);
    display:flex; justify-content:center; padding:10px;
    border-top:0px solid var(--border);
  }
  #inner{
    width:100%; max-width:var(--maxw); background:var(--panel);
    border:1px solid var(--border); border-radius:16px; padding:8px; display:flex; gap:8px; align-items:flex-end;
    box-shadow:0 4px 24px rgba(0,0,0,.06);
  }
  textarea{
    flex:1; min-height:20px; max-height:160px; resize:none; border:0; outline:0;
    font-size:16px; padding:10px 12px; background:transparent;
  }
  button#send{
    flex:0 0 40px; height:40px; width:40px; border-radius:10px; border:0; cursor:pointer;
    background:#ffffff; color:#868e96; font-size:18px; display:flex; align-items:center; justify-content:center;
  }
  button#send:disabled{opacity:.6; cursor:not-allowed}
  .hint{font-size:.85rem; color:var(--muted); text-align:center; margin-top:8px}
  /* RTL/LTR ضبط الاتجاه تلقائي */
  .rtl{text-align:right; direction:rtl}
  .ltr{text-align:left; direction:ltr}
  
/* رسائل المستخدم إلى اليمين مع عكس اتجاه العناصر */
#chat .row.user{
  flex-direction: row;       /* الاتجاه الطبيعي */
  justify-content: flex-end;
}
/* أفاتار الروبوت (الحجم/اللون) */
#chat .avatar{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#336aea;        /* بلا دائرة ملوّنة، عدّل لو أردت */
  flex:0 0 36px;
}
#chat .avatar svg{
  width:22px; height:22px;
  color:#ffffff;                 /* لون الأيقونة؛ يرث currentColor داخل الـSVG */
}

/*لون خلفية رسالة المستخدم*/

#chat .row.user .msg{
  background: #336aea;
  color:#fff;
}


#chat .msg .typing{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--typing-color);
  font-size:13px; user-select:none;
}

#chat .typing .dots{
  display:inline-grid; grid-auto-flow:column; gap:4px;
}

#chat .typing .dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.35;
  animation:typingBounce 1.2s infinite ease-in-out;
}
#chat .typing .dot:nth-child(1){ animation-delay:0s; }
#chat .typing .dot:nth-child(2){ animation-delay:.15s; }
#chat .typing .dot:nth-child(3){ animation-delay:.30s; }

@keyframes typingBounce{
  0%, 80%, 100% { transform:translateY(0);    opacity:.35; }
  40%           { transform:translateY(-4px); opacity:1;   }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  #chat .typing .dot{ animation:none; }
}

  @media (max-width: 640px){
#bar{
  position:fixed; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,rgba(247,247,248,0), var(--bg) 22%);
  display:flex; justify-content:center;
  padding:10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* ← مهم */
  border-top:0px solid var(--border);
  z-index: 2147480000; /* ← يتأكد يعلو أي عنصر آخر */
}

  }
  
  /* تمرير سلس، وهامش علوي افتراضي عند scrollIntoView */
@media (max-width:640px){
  /* لو احتجت مساحة أكبر على الشاشات الصغيرة */
  #chat{ padding-bottom: calc(220px + env(safe-area-inset-bottom)); }
}

:root{
  --font-ui: "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html, body { font-family: var(--font-ui); }
body { font-weight: 400; line-height: 1.65; }

/* عناصر الواجهة */
#inner, .msg, .hint, button, input, textarea {
  font-family: var(--font-ui);
}

/* أرقام متراصة (تُحسن المحاذاة) */
body { font-variant-numeric: tabular-nums; }

/* يمكن تعزيز الوضوح في كروم/سفاري على ماك */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }