/* أوبتس — طبقة التحسين البصري 2026-11-12 (فرع claude/visual-web-20261112).
 * ملف إضافي ينحمّل بعد chat.css: ما يغيّر أي ملف موجود، وإذا انشال ترجع الواجهة مثل ما كانت.
 * الهوية نفسها: حبر أسود وأبيض وفضي، بلا ذهبي. كل الاتجاهات منطقية (inline-start/end). */

/* ---------- 1) طبقة الرموز المشتركة (نفس الأسماء بسطح المكتب والموقع والهاتف قدر الإمكان) ---------- */
:root {
  /* الخط والمقاسات */
  --op-fs-2xs: 11.5px; --op-fs-xs: 12.5px; --op-fs-sm: 13.5px; --op-fs-md: 15px; --op-fs-lg: 18px; --op-fs-xl: 24px; --op-fs-2xl: 30px;
  --op-lh-ar: 1.8; --op-lh-lat: 1.62; --op-lh-ui: 1.45; --op-lh-tight: 1.25;
  /* الإيقاع (شبكة 4) */
  --op-s1: 4px; --op-s2: 8px; --op-s3: 12px; --op-s4: 16px; --op-s5: 24px; --op-s6: 32px; --op-s7: 48px; --op-s8: 64px;
  /* الزوايا: سلّم واحد بدل 6/7/8/10/12/14/18/20/26 المتفرقة */
  --op-r-xs: 6px; --op-r-sm: 10px; --op-r-md: 14px; --op-r-lg: 20px; --op-r-xl: 24px; --op-r-pill: 999px;
  /* الظلال: خفيفة جداً، والحافة 1px هي اللي ترسم */
  --op-e1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --op-e2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px -12px rgba(0, 0, 0, .7);
  --op-e3: 0 24px 64px -16px rgba(0, 0, 0, .8), 0 0 0 1px var(--line);
  --op-ring: 0 0 0 3px rgba(201, 202, 209, .16);
  /* الحركة */
  --op-ease: cubic-bezier(.2, .8, .2, 1); --op-ease-io: cubic-bezier(.65, 0, .35, 1);
  --op-fast: .12s; --op-base: .18s; --op-slow: .28s;
  /* السطح الزجاجي الأسود (نفس روح 1.5) */
  --op-glass: rgba(23, 23, 26, .72); --op-glass-line: rgba(255, 255, 255, .07);
  --op-sheen: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%);
}
:root[data-theme="light"] {
  --op-e1: 0 1px 2px rgba(17, 17, 20, .06);
  --op-e2: 0 10px 30px -14px rgba(17, 17, 20, .22), 0 1px 2px rgba(17, 17, 20, .05);
  --op-e3: 0 24px 64px -18px rgba(17, 17, 20, .28), 0 0 0 1px var(--line);
  --op-ring: 0 0 0 3px rgba(18, 18, 20, .12);
  --op-glass: rgba(255, 255, 255, .78); --op-glass-line: rgba(17, 17, 20, .08);
  --op-sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --op-e1: 0 1px 2px rgba(17, 17, 20, .06);
    --op-e2: 0 10px 30px -14px rgba(17, 17, 20, .22), 0 1px 2px rgba(17, 17, 20, .05);
    --op-e3: 0 24px 64px -18px rgba(17, 17, 20, .28), 0 0 0 1px var(--line);
    --op-ring: 0 0 0 3px rgba(18, 18, 20, .12);
    --op-glass: rgba(255, 255, 255, .78); --op-glass-line: rgba(17, 17, 20, .08);
    --op-sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%);
  }
}

/* ---------- 2) الخط العربي: سطر أوسع، بلا تباعد أحرف سالب (يقطع وصل الحروف) ---------- */
:root[lang="ar"] body { line-height: 1.7; }
:root[lang="ar"] .msg.bot .bub { line-height: var(--op-lh-ar); }
:root[lang="en"] .msg.bot .bub { line-height: var(--op-lh-lat); }
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3 { letter-spacing: 0; }
::selection { background: rgba(201, 202, 209, .28); color: inherit; }
:root[data-theme="light"] ::selection { background: rgba(18, 18, 20, .14); }

/* ---------- 3) رسالة المستخدم: كانت ترث قواعد ذيل الشريط الجانبي (.user) — خط فوقها وحشوة وخط 14px ---------- */
.msg.user { border-top: 0; padding: 0; margin-top: 0; gap: 0; font-size: inherit; }
.msg.user .bub { line-height: var(--op-lh-ui); padding: 10px 16px; border-radius: var(--op-r-lg); border-end-end-radius: var(--op-r-xs);
  background: var(--panel2); box-shadow: var(--op-e1); }
[dir="rtl"] .msg.user .bub { border-end-end-radius: var(--op-r-lg); border-end-start-radius: var(--op-r-xs); }
/* المسافة بين الأدوار: 20 → 28 حتى يتنفّس الحوار */
.msg { margin-bottom: 28px; }
.msg.user + .msg.bot { margin-top: -6px; }

/* ---------- 4) الجداول: تتبع اتجاه محتواها (كانت تلتصق يسار الرد العربي) + إطار مدوّر ---------- */
.bub .tbl:has(> table:dir(rtl)) { direction: rtl; }
.bub .tbl:has(> table:dir(ltr)) { direction: ltr; }
.bub table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--op-r-md); overflow: hidden; }
.bub th, .bub td { border: 0; border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); padding: 9px 14px; line-height: var(--op-lh-ui); }
.bub th:first-child, .bub td:first-child { border-inline-start: 0; }
.bub tr:last-child td { border-bottom: 0; }
.bub th { font-size: var(--op-fs-sm); color: var(--accent); }
.bub tbody tr:hover td { background: rgba(255, 255, 255, .02); }

/* ---------- 5) كتل الكود ---------- */
.bub .codebox { border-radius: var(--op-r-md); box-shadow: var(--op-e1); }
.bub .codebar { padding: 6px 8px 6px 14px; background: rgba(255, 255, 255, .02); letter-spacing: .04em; }
:root[data-theme="light"] .bub .codebar { background: rgba(17, 17, 20, .025); }
.bub .codebar button { min-height: 26px; padding: 2px 10px; border-radius: var(--op-r-xs); font-family: var(--font); letter-spacing: 0; }
.bub pre { padding: 14px 16px; }
.bub pre code { line-height: 1.65; }
/* العربي داخل الكود ينكتب بخطنا مو بخط بديل من النظام */
.bub code, .bub pre code { font-family: Consolas, "Cascadia Mono", ui-monospace, "Noto Sans Arabic Variable", monospace; }
.bub :not(pre) > code { border: 1px solid var(--line); padding: 0 6px; }

/* ---------- 6) صندوق الكتابة: سطح زجاجي مرتفع شوية + حلقة تركيز ناعمة ---------- */
.composer { border-radius: var(--op-r-xl); border-color: var(--line); background-image: var(--op-sheen); box-shadow: var(--op-e2);
  transition: border-color var(--op-base) var(--op-ease), box-shadow var(--op-base) var(--op-ease); }
.composer:focus-within { border-color: var(--line2); box-shadow: var(--op-e2), var(--op-ring); }
.composer textarea { padding: 10px 10px 2px; }
.hero .composer { min-height: 112px; justify-content: space-between; }
.send { transition: background var(--op-base) var(--op-ease), color var(--op-base) var(--op-ease), transform var(--op-fast) ease; }
.send:not(:disabled) { box-shadow: 0 4px 14px -4px rgba(244, 244, 246, .35); }
:root[data-theme="light"] .send:not(:disabled) { box-shadow: 0 4px 14px -4px rgba(18, 18, 20, .35); }
.foot { font-size: var(--op-fs-2xs); opacity: .9; padding-top: var(--op-s2); }
.chip { border: 1px solid var(--line); }

/* ---------- 7) الواجهة العلوية والبطل ---------- */
.top { gap: var(--op-s1); padding: var(--op-s2) var(--op-s3); }
.hero h1 { font-weight: 600; margin-bottom: 28px; letter-spacing: -.01em; }
:root[lang="ar"] .hero h1 { letter-spacing: 0; }
.model-btn { border-radius: var(--op-r-sm); gap: 8px; }
.model-menu { border-radius: var(--op-r-md); padding: var(--op-s1); box-shadow: var(--op-e3); border-color: var(--op-glass-line);
  background: var(--panel); background-image: var(--op-sheen); animation: pop var(--op-base) var(--op-ease) both; }
.model-menu button { min-height: 40px; border-radius: var(--op-r-sm); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ib.sm { border-radius: var(--op-r-sm); }
.jump { box-shadow: var(--op-e2); }

/* ---------- 8) الشريط الجانبي ---------- */
.side { padding: var(--op-s4) var(--op-s3) var(--op-s3); }
.brand { padding: 4px 6px 16px; }
.brand-name { letter-spacing: .14em; font-size: 15px; }
.new-chat { border-radius: var(--op-r-md); min-height: 42px; background-image: var(--op-sheen); box-shadow: var(--op-e1); font-weight: 600; }
.search input { border-radius: var(--op-r-sm); min-height: 38px; padding-inline-start: 34px; background: transparent no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-position: right 12px center; transition: border-color var(--op-base) var(--op-ease); }
[dir="ltr"] .search input { background-position: left 12px center; }
.search input:focus { border-color: var(--line2); outline: none; box-shadow: var(--op-ring); }
.search input::placeholder { color: var(--mute); }
.group-title { font-size: var(--op-fs-2xs); font-weight: 600; letter-spacing: .02em; padding: 16px 10px 6px; }
.item { border-radius: var(--op-r-sm); }
.item.on { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--op-glass-line); }
.user { padding: 12px 6px 2px; }
.avatar { border: 1px solid var(--line2); font-weight: 600; font-size: 13px; color: var(--accent); }
/* على اللمس: أزرار إعادة التسمية والحذف كانت ظاهرة بقوة بكل سطر — نخففها حتى تبقى القائمة نظيفة، وتبقى كاملة للمحادثة المفتوحة */
@media (hover: none) { .item .ia { opacity: .42; } .item.on .ia { opacity: .85; } }

/* ---------- 9) الشعار: صورة أوبتس الحقيقية بدل حرف O ---------- */
.logo { font-size: 0 !important; color: transparent; border: 1px solid var(--line2);
  background: #fff url("../icons/icon-192.png") center / 112% no-repeat; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line); }
.gate .card .logo, .splash .logo { width: 64px; height: 64px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--line), 0 18px 48px -10px rgba(0, 0, 0, .8); }
:root[data-theme="light"] .logo { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line); }

/* ---------- 10) شاشة الدخول ---------- */
.gate { background:
  radial-gradient(60% 45% at 50% 28%, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 70%),
  radial-gradient(40% 30% at 50% 100%, rgba(201, 202, 209, .05), rgba(201, 202, 209, 0) 70%), var(--bg); }
:root[data-theme="light"] .gate { background: radial-gradient(60% 45% at 50% 28%, rgba(17, 17, 20, .045), rgba(17, 17, 20, 0) 70%), var(--bg); }
.gate .card { width: min(400px, 100%); padding: 36px 32px 24px; border: 1px solid var(--op-glass-line); border-radius: var(--op-r-xl);
  background: var(--op-glass); background-image: var(--op-sheen); box-shadow: var(--op-e3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.card .logo { margin-bottom: 22px; }
.card h1 { font-size: var(--op-fs-xl); font-weight: 700; line-height: var(--op-lh-tight); margin-bottom: 10px; }
.card p { line-height: 1.7; font-size: var(--op-fs-md); margin-bottom: 26px; }
.card .btn, .card .field { min-height: 48px; border-radius: var(--op-r-md); }
.card .btn { font-size: var(--op-fs-md); }
.card .field { background: var(--bg); transition: border-color var(--op-base) var(--op-ease), box-shadow var(--op-base) var(--op-ease); }
.card .field:focus { border-color: var(--line2); box-shadow: var(--op-ring); outline: none; }
#pwForm { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); }
.gate .legal { margin-top: 22px; }
#gateLang { margin-top: 2px; }
@media (max-width: 480px) { .gate .card { padding: 28px 20px 18px; border-radius: var(--op-r-lg); } }

/* ---------- 11) النوافذ والإعدادات ---------- */
.sheet { border-radius: var(--op-r-lg); box-shadow: var(--op-e3); }
.set-layout .tabs button { min-height: 40px; }
.card-set { border-radius: var(--op-r-md); }
.grp { font-size: var(--op-fs-2xs); text-transform: none; }

/* ---------- 12) أيقونات موحّدة لأزرار الرموز (⧉ ✎ ↻ ✕ ☰) — polish.js يحط data-ic، وبدونه يبقى الرمز القديم ---------- */
.sb[data-ic], .ia[data-ic], #burger { font-size: 0 !important; position: relative; }
.sb[data-ic]::before, .ia[data-ic]::before, #burger::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#burger::before { width: 20px; height: 20px; }
[data-ic="copy"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M15 9V6.5A2.5 2.5 0 0012.5 4h-6A2.5 2.5 0 004 6.5v6A2.5 2.5 0 006.5 15H9'/%3E%3C/svg%3E"); }
[data-ic="edit"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 00-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
[data-ic="retry"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 10-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E"); }
[data-ic="del"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 002 2h6a2 2 0 002-2l1-12M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2'/%3E%3C/svg%3E"); }
[data-ic="done"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); color: var(--ok) !important; }
#burger { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }
[dir="rtl"] #burger::before { transform: scaleX(-1); }
.sb { border-radius: var(--op-r-xs); }
.stats { gap: 2px; margin-top: 8px; }

/* ---------- 13) شريط التمرير الرفيع ---------- */
.stage, .sheet-body, .model-menu { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* ---------- 14) حركة أهدأ ---------- */
.msg { animation-duration: var(--op-slow); animation-timing-function: var(--op-ease); }
@media (prefers-reduced-motion: reduce) { .model-menu { animation: none; } }
:root[data-motion="reduce"] .model-menu { animation: none; }

/* ---------- 15) شاشات صغيرة ---------- */
@media (max-width: 760px) {
  .msg { margin-bottom: 24px; }
  .hero h1 { margin-bottom: 22px; }
  .hero .composer { min-height: 104px; }
  .bub th, .bub td { padding: 8px 12px; }
}