:root{
    /* ===== السلّم النصّي (v415) — مصدر واحد لكل مقاس ووزن ===== */
    --fs-1:21px;    /* عنوان رئيسي */
    --fs-2:17px;    /* عنوان قسم / نافذة */
    --fs-3:14px;    /* النصّ الأساسي */
    --fs-4:12.5px;  /* ثانوي / تسمية */
    --fs-5:11.5px;  /* تفصيل دقيق / تلميح */
    --w-bold:700;   /* العناوين والأزرار الرئيسية وحدها */
    --w-mid:500;    /* التسميات والثانوي */
    --w-body:500;   /* النصّ العادي */
    --lh-body:1.6;  /* إيقاع قراءة النصّ العربي */
    --lh-tight:1.3; /* العناوين */
    /* ===== سلّم الاستدارة (v419) — مصدر واحد لكل انحناء ===== */
    --r-1:6px;      /* شارة / رمز صغير */
    --r-2:10px;     /* زرّ / حقل / عنصر قائمة */
    --r-3:14px;     /* بطاقة / لوح */
    --r-4:20px;     /* نافذة / سطح كبير */
    --r-pill:999px; /* حبّة دواء */
    /* ===== سلّم العمق (v421) — مصدر واحد لكل ظلّ ===== */
    --sh-1:0 2px 10px rgba(0,0,0,.45);      /* شارة / عنصر صغير */
    --sh-2:0 8px 24px rgba(0,0,0,.45);      /* بطاقة / قائمة منسدلة */
    --sh-3:0 10px 40px rgba(0,0,0,.5);      /* لوح / نافذة */
    --sh-4:0 10px 50px rgba(0,0,0,.55);     /* نافذة كبيرة فوق طبقة تعتيم */
    --sh-gold:0 8px 22px -12px rgba(var(--accent-tint-rgb),.55); /* توهّج ذهبي عند المرور */
    --ease:cubic-bezier(.22,.61,.36,1);
    --t-fast:.14s; --t-mid:.26s;
    --bg:#000000; --bg2:#000000; --panel:#000000; --panel2:#000000; --border:rgba(255,255,255,.08);
    --text:#eef0f6; --muted:#9a9a9e; --accent:#6b7280; --accent-rgb:107,114,128; --accent-light:#9ca3af; --accent2:#9ca3af;
    /* ===== v439 — ترتيب الذهبيّ (ب): الذهبيّ للحدود والفواصل فقط ===== */
    --accent-ink:#eef0f6; --accent-surface:#2b2e35; --accent-on-surface:#eef0f6;
    --accent-tint-rgb:255,255,255; --accent-glow-rgb:255,255,255;
    --grad: linear-gradient(135deg,var(--accent-surface) 0%, var(--accent-surface) 100%);
    --shadow-glow: 0 0 40px rgba(var(--accent-glow-rgb),.25);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  /* v-ios-textsize: سفاري iOS يضخّم النص تلقائيًا في الكتل العريضة (شريط
     الأسهم طلع «وايد كبير») — 100% يقفل التضخيم فيطابق هواوي والكمبيوتر. */
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  /* v-ios-backdrop: مناطق الأمان (تحت مؤشر الهوم وفوق) كانت تكشف خلفية سوداء
     في الثيم الفاتح على الآيفون — الخلفية تتبع الثيم فتختفي الأشرطة الغريبة. */
  html{background:#0b0b0d;}
  html[data-mode="light"]{background:#f2f2f4;}
  /* v308: قفل أفقي كامل للصفحة — ثابتة مثل واتساب (iOS Safari) */
  html,body{overflow-x:hidden; max-width:100%; overscroll-behavior-x:none;}
  #messages{touch-action:pan-y; overscroll-behavior-x:none;}
  .msg{touch-action:pan-y;}
  body{
    font-family:'Plus Jakarta Sans','Tajawal','Inter',Tahoma,Arial,sans-serif;
    line-height:1.8; letter-spacing:0;
    background:var(--bg);
    color:var(--text);
    display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;
  }
  html[dir="ltr"] body{font-family:'Inter','Tajawal',Tahoma,Arial,sans-serif;}
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 8px; background:rgba(13,15,22,.7); backdrop-filter:blur(16px);
    flex-shrink:0; z-index:10;
  } /* v-onepage (طلب المالك): أُزيل border-bottom تحت الشريط العلوي — صفحة كاملة */
  /* v213: الهيدر يتبع اتجاه اللغة — عربي: الاسم يمين و⋮ يسار، إنجليزي: العكس */
  header h1{font-size: var(--fs-2); margin:0; display:flex; align-items:center; gap:10px; font-weight: var(--w-bold); letter-spacing:0;}
  header h1 .brand{display:none !important;}
  /* v-perf (شكوى عمران ١٣ سبتمبر «الشاشة ثقيلة»): كانت خلفيّة الصفحة تتحرّك
     بلا توقّف (bgShift كل ٢٢ ثانية) فتُعاد صباغة الشاشة كلّها ٦٠ مرّة في الثانية
     على الدوام — والخلفيّة لون واحد صلب في كلّ الأوضاع فلا شيء يُرى يتحرّك. */
  body{background-size:auto; animation:none;}
  @keyframes bgShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  #btnInstall{display:inline-flex;}
  #headerMenuWrap{position:relative; display:inline-flex;}
  #headerMenuDropdown{
    display:none; position:absolute; top:calc(100% + 6px); inset-inline-end:0;
    background:none; border:none; box-shadow:none; padding:6px; z-index:500;
    flex-direction:column; gap:4px; min-width:180px;
  }
  #headerMenuDropdown.show{display:flex;}
  /* v213: القائمة تنسدل دائمًا داخل الشاشة حسب اتجاه اللغة (inset-inline-end يتبع الاتجاه تلقائيًا) */
  #headerMenuDropdown{background:rgba(13,15,22,.97); backdrop-filter:blur(14px); border-radius:var(--r-3); box-shadow:0 12px 34px rgba(0,0,0,.55);}
  #headerMenuDropdown .btn{width:100%; justify-content:flex-start; background:none; border:none; gap:8px;}
  #headerMenuDropdown .btn svg.hmIcon{flex:0 0 auto; display:block; opacity:.85;}
  #headerMenuDropdown .btn:hover{background:rgba(var(--accent-tint-rgb),.12);}
  #btnHeaderMenu.active{border-color:var(--accent); background:rgba(var(--accent-tint-rgb),.12);}
  #headerMenuDropdown .btn span{display:inline-flex !important;}
  /* v224: خانات أكواد الألوان — اتجاه إنجليزي ثابت (# دائمًا بالبداية) وتراصف موحد */
  .hex-color-input{direction:ltr !important; unicode-bidi:isolate; text-align:center !important;}
  .color-field-wrap{direction:ltr;}
  /* v223: الهيدر معكوس في كل اللغات — عربي: الشعار يسار و⋮ يمين، إنجليزي: الشعار يمين و⋮ يسار */
  header{flex-direction:row-reverse;}
  #headerActions{flex-direction:row-reverse;}
  #headerMenuDropdown{inset-inline-end:auto; inset-inline-start:0;}
  header h1 .subtitle{font-size: var(--fs-5); color:var(--muted); font-weight: var(--w-mid); display:block; margin-top:1px;}
  header h1{cursor:pointer;}
  .brandTitle{position:relative; display:inline-flex; align-items:center; height:48px;}
  .brandImg{height:42px; width:auto; object-fit:contain; display:block;}


  header h1, header h1 .titles{overflow:visible !important;}
  html.mobile-ui header h1, html.mobile-ui header h1 .titles{overflow:visible !important;}
  header h1 .titles{display:flex; flex-direction:column; line-height:1.3;}
  .btn{
    background:var(--panel2); color:var(--text); border:1px solid var(--border);
    padding:8px 16px; border-radius:var(--r-2); cursor:pointer; font-size: var(--fs-3); font-weight: var(--w-mid);
    transition:all .18s ease; display:inline-flex; align-items:center; gap:6px;
  }
  .btn:hover{border-color:var(--accent); background:rgba(var(--accent-tint-rgb),.12); transform:translateY(-1px);}
  .btn.primary{background:var(--grad); border:none; color:white; font-weight:700; box-shadow:0 4px 18px rgba(var(--accent-glow-rgb),.35);}
  .btn.primary:hover{box-shadow:0 6px 24px rgba(var(--accent-glow-rgb),.5); transform:translateY(-1px);}
  .btn.primary:disabled{opacity:.5; cursor:not-allowed; transform:none;}
  .inputbar-tools-left .btn, #btnPortraitStyle.btn{background:none; border:none; padding:8px; box-shadow:none;}
  .inputbar-tools-left .btn:hover, #btnPortraitStyle.btn:hover{background:rgba(var(--accent-tint-rgb),.12); transform:none;}
  .iconBtn.btn{background:none; border:none; box-shadow:none;}
  .iconBtn.btn:hover{background:rgba(var(--accent-tint-rgb),.12); transform:none;}
  .quickChip.btn{background:none; border:none; box-shadow:none;}
  .quickChip.btn:hover{background:rgba(var(--accent-tint-rgb),.12); transform:none;}
  .langFlagBtn.btn{background:none; border:none; box-shadow:none;}
  .langFlagBtn.btn:hover{background:rgba(var(--accent-tint-rgb),.12); transform:none;}
  .langFlagBtn.active{background:rgba(var(--accent-tint-rgb),.15);}
  main{flex:1; display:flex; min-height:0;}
  #sidebar{
    width:250px; background:transparent; backdrop-filter:none;
    display:flex; flex-direction:column; flex-shrink:0;
  }
  /* About section videos: show only the videos matching the current UI language. */
  .lang-videos-en{display:none;}
  html:not([dir="rtl"]) .lang-videos-ar{display:none;}
  html:not([dir="rtl"]) .lang-videos-en{display:block;}
  html[dir="rtl"] #sidebar{border-left:1px solid var(--border);}
  html[dir="ltr"] #sidebar{border-right:1px solid var(--border);}
  #history{flex:1; overflow-y:auto; padding:10px;}
  .hist-item{
    padding:11px 12px; border-radius:var(--r-2); margin-bottom:2px; cursor:pointer; font-size: var(--fs-3);
    background:none; border:1px solid transparent; color:var(--muted);
    transition:all .15s ease;
    display:flex; align-items:center; gap:8px;
  }
  .hist-item:hover{color:var(--text);}
  .hist-item.active{color:var(--text); font-weight:700;}
  .hist-item .hist-title{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .hist-item .hist-del{
    flex:none; opacity:.5; background:none; border:none; color:inherit; cursor:pointer;
    font-size: var(--fs-3); padding:2px 4px; border-radius:var(--r-1); transition:all .15s ease; line-height:1;
  }
  .hist-item .hist-del:hover{opacity:1; color:#ff6b6b; background:rgba(255,107,107,.12);}
  /* v202: زر ⋮ لكل مشروع — يظهر عند التمرير على الكمبيوتر ودائمًا على الجوال */
  .hist-item .hist-menu-btn{
    flex:none; opacity:0; background:none; border:none; color:inherit; cursor:pointer;
    padding:3px 4px; border-radius:var(--r-1); transition:all .15s ease; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .hist-item:hover .hist-menu-btn, .hist-item.active .hist-menu-btn{opacity:.7;}
  .hist-item .hist-menu-btn:hover{opacity:1; background:rgba(var(--accent-tint-rgb),.15);}
  @media (hover:none), (max-width:860px){ .hist-item .hist-menu-btn{opacity:.7;} }
  #histItemMenu{
    position:fixed; z-index:10000; display:none; flex-direction:column; gap:1px;
    background:var(--panel,#151529); border:1px solid var(--border,#2a2f3d); border-radius:var(--r-2);
    box-shadow:var(--sh-2); padding:4px; min-width:130px;
  }
  #histItemMenu.show{display:flex;}
  #histItemMenu button{
    display:flex; align-items:center; gap:7px; width:100%; background:none; border:none;
    color:var(--text,#e8eaf1); font-size:12.5px; padding:6px 8px; border-radius:var(--r-1); cursor:pointer; text-align:start;
  }
  #histItemMenu button:hover{background:rgba(var(--accent-tint-rgb),.12);}
  #histItemMenu button.danger{color:#ff6b6b;}
  #histItemMenu button svg{flex:0 0 auto;}
  /* v202: لوحة التحكم (المالك) — خط أصغر ومسافات أضيق حتى تتسق بشكل نظيف */
  #adminSectionContent{zoom:.85; font-size:12px;}
  #adminSectionContent button{font-size: var(--fs-5) !important;}
  #adminSectionContent > div{margin-top:10px !important;}
  .hist-thumb{
    flex:none; width:44px; height:32px; border-radius:var(--r-1); overflow:hidden; position:relative;
    background:none; border:none; display:flex; align-items:center; justify-content:center;
  }
  .hist-thumb iframe{
    width:400%; height:400%; border:none; transform:scale(.25); transform-origin:top left;
    pointer-events:none; position:absolute; top:0; left:0; background:#fff;
  }
  .hist-thumb .hist-thumb-emoji{font-size:16px; opacity:.6;}
  #sidebar .newbtn{margin:10px; justify-content:center; width:calc(100% - 20px); background:none; border:none;}
  #sidebar .newbtn:hover{background:rgba(var(--accent-tint-rgb),.08); transform:none;}
  /* ===== المزودين التسعة — شبكة الدرج (كمبيوتر) + شريط التلفون ===== */
  #providerGridSidebar{flex-shrink:0; padding:10px 10px 8px;} /* v-sidebar-onepage (طلب المالك «صفحة كاملة بلا فواصل»): أُزيل الخطّ الفاصل */
  #providerGridTitle{font-size: var(--fs-5); opacity:.65; margin:0 4px 8px; text-align:center;}
  #providerGridCells{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
  .prov-cell{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px 6px; border-radius:var(--r-3); background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.09); cursor:pointer; opacity:.75; transition:opacity .15s, border-color .15s, box-shadow .15s, background .15s; user-select:none;}
  .prov-cell:hover{opacity:1; background:rgba(255,255,255,.08);}
  .prov-cell.active{opacity:1; border-color:var(--accent); background:transparent; box-shadow:0 0 8px rgba(var(--accent-glow-rgb),.35);}
  .prov-cell svg{width:20px; height:20px; display:block;}
  .prov-cell .prov-name{font-size:9.5px; line-height:1; font-weight:600; color:var(--muted,#aab); white-space:nowrap;}
  .prov-cell.active .prov-name{color:var(--accent-ink); font-weight:bold;}
  .prov-dot{position:absolute; top:4px; inset-inline-end:4px; width:7px; height:7px; border-radius:50%; background:transparent;}
  .prov-dot.ok{background:#22c55e;}
  .prov-dot.low{background:#eab308;}
  .prov-dot.out{background:#ef4444;}
  #providerStripMobile{display:none; gap:6px; overflow-x:auto; padding:7px 10px; background:rgba(0,0,0,.35); border-bottom:1px solid rgba(255,255,255,.08); scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  #providerStripMobile::-webkit-scrollbar{display:none;}
  .prov-chip-m{font-weight:600; position:relative; display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-4); background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1); font-size: var(--fs-5); color:var(--muted,#aab); white-space:nowrap; flex-shrink:0; cursor:pointer; user-select:none; opacity:.8;}
  .prov-chip-m svg{width:15px; height:15px; display:block;}
  .prov-chip-m.active{opacity:1; border-color:var(--accent); background:transparent; color:var(--accent-ink); font-weight:bold; box-shadow:0 0 6px rgba(var(--accent-glow-rgb),.35);}
  /* v336: عناصر القائمة المنسدلة — مخفية افتراضيًا (الجوال يظل مثل ما هو) */
  #provDropdownBtn{display:none;}
  #provSearchInput{display:none;}
  #provDropdownPanel{display:block; position:static; background:none; border:none; padding:0; box-shadow:none;}
  #waCollapseBtn{display:none;}
  #waReopen{display:none;}
  /* v336: (كمبيوتر فقط) قائمة المزودين المنسدلة + طي لوحة الكود/المعاينة */
  @media (min-width:861px){
    html:not(.mobile-ui) #providerGridSidebar{position:relative;}
    html:not(.mobile-ui) #provDropdownBtn{font-weight:600; display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:var(--r-3); background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1); cursor:pointer; color:var(--text); font-family:inherit; font-size: var(--fs-3); user-select:none;}
    html:not(.mobile-ui) #provDropdownBtn:hover{background:rgba(255,255,255,.09);}
    html:not(.mobile-ui) #provDDLogo{display:inline-flex; flex-shrink:0;}
    html:not(.mobile-ui) #provDDLogo svg{width:18px; height:18px; display:block;}
    html:not(.mobile-ui) #provDropdownBtn .provDDName{flex:1; text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500;}
    html:not(.mobile-ui) #provDropdownBtn .provDDChev{transition:transform .18s; opacity:.6; flex-shrink:0;}
    html:not(.mobile-ui) #providerGridSidebar.open #provDropdownBtn .provDDChev{transform:rotate(180deg);}
    html:not(.mobile-ui) #provDropdownPanel{display:none; position:absolute; top:calc(100% - 4px); inset-inline:10px; z-index:80; background:#000000; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-3); box-shadow:0 14px 40px rgba(0,0,0,.55); padding:8px; max-height:min(430px,60vh); overflow-y:auto;}
    html:not(.mobile-ui) #providerGridSidebar.open #provDropdownPanel{display:block;}
  #premiumToggleWrap{display:none; align-items:center; gap:8px; flex-wrap:wrap;}
  #premiumToggleWrap.pt-visible{display:flex;}
  #btnPremiumToggle{flex:1; display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:12px; background:var(--panel2, rgba(255,255,255,.05)); border:1.5px solid var(--border, rgba(255,255,255,.1)); color:var(--text); font-family:inherit; font-size:12.5px; font-weight: var(--w-mid); cursor:pointer; user-select:none; transition:box-shadow .18s, border-color .18s, background .18s;}
  #btnPremiumToggle:hover{background:rgba(255,255,255,.09);}
  #btnPremiumToggle .premCrown{flex-shrink:0; opacity:.75; transition:opacity .18s, color .18s; display:inline-flex; align-items:center; justify-content:center;}
  #btnPremiumToggle .premCrown svg{width:17px; height:17px; display:block;}
  #btnPremiumToggle .premLabel{flex:1; text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #premiumCostHint{flex-shrink:0; font-size: var(--fs-5); font-weight: var(--w-mid); color:var(--muted, #9aa0b5); opacity:.9;}
  #btnPremiumToggle.premium-on{border-color:var(--accent); background:transparent; box-shadow:0 0 0 1px var(--accent);}
  #btnPremiumToggle.premium-on .premCrown{opacity:1; color:var(--accent-ink);}
  #btnPremiumToggle.premium-on #premiumCostHint{color:var(--accent-ink); opacity:1;}
  /* Fair-Use: hidden by default (normal replies/images/sections feel free); shown only for premium-capable providers where the "professional reply" counter is relevant. */
  #premiumPointsChip{flex-shrink:0; display:none; align-items:center; gap:3px; padding:5px 8px; border-radius:10px; background:var(--panel2, rgba(255,255,255,.05)); border:1px solid var(--border, rgba(255,255,255,.1)); color:#e8e2ff; font-size:12px; font-weight: var(--w-mid);}
  #premiumPointsChip.pp-visible{display:inline-flex;}
  #premiumPointsChip svg{flex-shrink:0; opacity:.85;}
  .premium-deduct-fly{position:absolute; top:-6px; inset-inline-end:6px; z-index:90; font-size:12px; font-weight: var(--w-bold); color:var(--accent-ink); pointer-events:none; opacity:1; transform:translateY(0); transition:opacity 1.1s ease, transform 1.1s ease; text-shadow:0 1px 4px rgba(0,0,0,.5);}
  .premium-deduct-fly.gone{opacity:0; transform:translateY(-16px);}
    html:not(.mobile-ui) #provSearchInput{display:block; width:100%; box-sizing:border-box; padding:8px 12px; margin-bottom:6px; border-radius:var(--r-2); border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:var(--text); font-size:12.5px; font-family:inherit; outline:none;}
    html:not(.mobile-ui) #providerGridCells{display:flex; flex-direction:column; gap:2px;}
    html:not(.mobile-ui) .prov-cell{flex-direction:row; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-2); background:none; border:none; opacity:.85;}
    html:not(.mobile-ui) .prov-cell:hover{background:rgba(255,255,255,.07); opacity:1;}
    html:not(.mobile-ui) .prov-cell.active{background:transparent; box-shadow:none; opacity:1; border:none;}
    html:not(.mobile-ui) .prov-cell svg{width:17px; height:17px;}
    html:not(.mobile-ui) .prov-cell .prov-name{font-size:13px;}
    html:not(.mobile-ui) .prov-cell .prov-dot{position:static; margin-inline-start:auto; flex-shrink:0;}
    html:not(.mobile-ui) .prov-cell.active::after{content:'✓'; color:var(--accent-ink); font-weight:bold; font-size: var(--fs-3); margin-inline-start:4px;}
    /* طي لوحة الكود/المعاينة */
    html:not(.mobile-ui) #workarea.waCollapsed, html:not(.mobile-ui) #resizer2.waCollapsed{display:none !important;}
    html:not(.mobile-ui) #waCollapseBtn{display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:var(--muted); cursor:pointer; padding:10px 12px;}
    html:not(.mobile-ui) #waCollapseBtn:hover{color:var(--text);}
    html:not(.mobile-ui) body.waCollapsedMode #waReopen{display:flex; align-items:center; justify-content:center; position:fixed; top:50%; transform:translateY(-50%); inset-inline-end:0; z-index:70; width:22px; height:74px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-inline-end:none; border-start-start-radius:10px; border-end-start-radius:10px; color:var(--muted); cursor:pointer; padding:0;}
    html:not(.mobile-ui) body.waCollapsedMode #waReopen:hover{color:var(--text); background:rgba(255,255,255,.12);}
    /* عند الطي: المحادثة تتوسع وتاخذ كامل المساحة */
    html:not(.mobile-ui) body.waCollapsedMode #chatcol{width:auto !important; flex:1 1 auto;}
  }
  #btnNew.newbtn{margin:6px 10px; padding:7px 10px; font-size:12.5px; opacity:.9;}
  #chatcol{
    width:380px; display:flex; flex-direction:column;
    /* v-black-chat (طلب عمران): كانت الطبقة rgba(10,11,16,.35) ترمّد خلفية
       المحادثة فتبدو أفتح من صندوق الكتابة الأسود الصافي — نزيلها فتتّحد
       كلها على أسود واحد. */
    flex-shrink:0; background:transparent; position:relative;
  }
  html[dir="rtl"] #chatcol{border-left:1px solid var(--border);}
  html[dir="ltr"] #chatcol{border-right:1px solid var(--border);}
  #messages{flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 16px 3px; display:flex; flex-direction:column; gap:12px;}
  #chatJumpBottom{display:none;}
  html:not(.mobile-ui) #chatJumpBottom.visible{display:flex; position:absolute; z-index:25; inset-inline-start:50%; transform:translateX(-50%); bottom:126px; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); background:var(--panel); color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,.28); cursor:pointer; font-size:19px;}
  html[dir="rtl"]:not(.mobile-ui) #chatJumpBottom.visible{transform:translateX(50%);}
  /* v292: تثبيت الدردشة أفقيًا — لا حركة يمين/يسار أبدًا */
  .msg{max-width:92%; min-width:0; overflow-wrap:anywhere; word-break:break-word; line-height:var(--lh-body);}
  .msg p, .msg li{line-height:var(--lh-body);}
  .msg-text{max-width:100%; overflow-wrap:anywhere; word-break:break-word;}
  .msg img, .msg video, .msg iframe{max-width:100%;}
  .msg table{display:block; max-width:100%; overflow-x:auto;}
  .msg{padding:2px 2px; border-radius:0; font-size: var(--fs-3); line-height:1.7; max-width:92%; background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;}
  /* v-tap-fast: الرسائل خارج الشاشة تُستثنى من التخطيط والرسم — المحادثات
     الضخمة كانت تجمّد الجوال مع كل تفاعل (كتابة/تنقّل) فتضيع الضغطات.
     v-cv-webkit: حريق ٢٨ أغسطس — سفاري/آيفون لا يرسم العناصر المؤجّلة أبدًا
     (شاشة سوداء على ٣ هواتف) فالقاعدة مقيّدة بصنف cv-ok الذي لا يوضع إلا
     على المحركات السليمة (كروميوم/فايرفوكس) — انظر selfdiag.js. */
  html.cv-ok .msg{content-visibility:auto; contain-intrinsic-size:auto 160px;}
  /* v338: حجم خط المحادثة */
  html.fs-small .msg{font-size:12px;}
  html.fs-large .msg{font-size:15.5px;}
  html.fs-xlarge .msg{font-size:18px;}
  .fontSizeBtn{display:flex; align-items:center; justify-content:space-between; width:100%; padding:11px 12px; font-size: var(--fs-3); background:none; border:none; cursor:pointer; color:var(--text); text-align:start; border-radius:var(--r-2);}
  .fontSizeBtn .fsCheck{display:none; color:var(--accent-ink);}
  .fontSizeBtn.active .fsCheck{display:block;}

  /* اختيار خط المحادثة — المحتوى فقط، ويعمل على الكمبيوتر والجوال */
  :root{--omran-chat-font:'Tajawal','Inter',Tahoma,Arial,sans-serif;--omran-chat-line:1.7;}
  html[data-omran-font] .msg,
  html[data-omran-font] .msg-text,
  html[data-omran-font] .msg-text *{font-family:var(--omran-chat-font);}
  html[data-omran-font] .msg,
  html[data-omran-font] .msg p,
  html[data-omran-font] .msg li{line-height:var(--omran-chat-line);}
  html[data-omran-font] .chat-codeblock,
  html[data-omran-font] .chat-codeblock *,
  html[data-omran-font] code,
  html[data-omran-font] pre,
  html[data-omran-font] kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;}
  html[data-omran-font] .chat-codeblock pre{line-height:1.55;}
  .fontFamilyHint{margin:0 0 12px;color:var(--muted);font-size:var(--fs-5);line-height:1.7;}
  .ofp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
  .ofp-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:88px;padding:12px 8px;border:1px solid var(--border);border-radius:var(--r-3);background:var(--panel2);color:var(--text);cursor:pointer;text-align:center;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);}
  .ofp-card:hover{border-color:var(--accent);transform:translateY(-1px);}
  .ofp-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .ofp-card.is-active{border-color:var(--accent);background:rgba(var(--accent-tint-rgb),.10);box-shadow:inset 0 0 0 1px var(--accent);}
  .ofp-name{font-family:'Tajawal','Inter',sans-serif;font-size:var(--fs-5);color:var(--muted);}
  .ofp-preview{font-size:21px;line-height:1.7;letter-spacing:0;color:var(--text);}
  .ofp-badge{position:absolute;top:5px;inset-inline-end:5px;padding:1px 5px;border-radius:var(--r-pill);background:rgba(127,127,127,.13);color:var(--muted);font-family:'Tajawal','Inter',sans-serif;font-size:8.5px;}
  @keyframes pop{from{opacity:0; transform:translateY(12px) scale(0.96);} to{opacity:1; transform:translateY(0) scale(1);}}
  /* v-one-side (أمر عمران «رسائل المستخدم في طرف والمزود في طرف — أريدهم اتجاه واحد»):
     الرسالتان تترّاصان على جهة واحدة (البداية = اليمين في العربيّة)؛ نفرّق بالشكل
     (فقاعة المستخدم) لا بالجهة. */
  /* v-tidy-bubble (أمر عمران «صغّر البرواز وخلّه مرتّب»): حشو أضيق وبرواز أنحف يلزق على النصّ. */
  .msg.user{color:var(--text,#fff); align-self:flex-start; background:rgba(255,255,255,0.06) !important; border:1px solid rgba(255,255,255,0.07) !important; border-radius:14px !important; padding:6px 11px !important; max-width:80%;}
  .msg.assistant{align-self:flex-start;}
  .msg.msg-anim{animation:msgFadeIn .4s ease-out;}
  @keyframes msgFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .tts-word{transition:background-color .15s ease, color .15s ease; border-radius:var(--r-1);}
  /* v-hl-yellow: تمييز الكلمة أثناء القراءة الصوتيّة كان يستعمل لون المزوّد
     (أخضر لـOpenAI مثلًا) فتظهر خضراء ثم تعود عاديّة — طلب المالك توحيدها أصفر. */
  .tts-word.active{background:var(--om-hl,#e3b341); color:#14161a; padding:1px 2px; box-shadow:0 0 0 2px var(--om-hl,#e3b341);}
  .tts-word.md-bold{font-weight:700;}
  .tts-word.md-h1,.tts-word.md-h2{font-weight:700; font-size:1.18em;}
  .tts-word.md-h3,.tts-word.md-h4{font-weight:700; font-size:1.08em;}
  .tts-word.md-h5,.tts-word.md-h6{font-weight:700;}
  .msg-text{white-space:pre-wrap; unicode-bidi:plaintext;}
  /* v-stream-tidy: أثناء البث النص يُبنى داخل .msg مباشرة لا داخل .msg-text —
     بلا pre-wrap كانت الأسطر تنضغط كتلة واحدة («زحمة وبعدين تترتب»). */
  .msg.msg-streaming{white-space:pre-wrap; unicode-bidi:plaintext;}
  .msg-text p, .msg-text li, .msg-text div{unicode-bidi:plaintext;}
  /* صناديق الكود داخل المحادثة — بنمط GitHub */
  .chat-codeblock{background:#0d1117;border:1px solid #21262d;border-radius:var(--r-2);margin:10px 0;direction:ltr;text-align:left;overflow:hidden;}
  .chat-codeblock-head{display:flex;align-items:center;justify-content:space-between;padding:5px 12px;font-size: var(--fs-5);font-weight: var(--w-bold);color:#8b949e;background:#161b22;border-bottom:1px solid #21262d;font-family:ui-monospace,Consolas,monospace;}
  .chat-codeblock-copy{background:none;border:none;cursor:pointer;color:#8b949e;padding:2px 4px;line-height:1;display:flex;align-items:center;}
  .chat-codeblock-copy:hover{color:#e6edf3;}
  .chat-codeblock pre{margin:0;padding:12px;overflow-x:auto;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12.5px;line-height:1.55;color:#e6edf3;white-space:pre;}
  .chat-codeblock pre .tts-word{color:#e6edf3;}
  /* v-code-color (المالك «الكود غير ملوّن»): كتل الكود تُلوَّن تلوينًا برمجيًّا كاملًا
     (omranCodeHighlight في app-02) على أساس رماديّ محايد كالمحرّر — بدل اللون الأصفر
     الموحّد السابق (v-hl-yellow). --om-hl يبقى لتمييز القراءة الصوتيّة والروابط. */
  :root{ --om-hl:#e3b341; }
  /* v-hl-links-only (طلب المالك): الإنجليزي والأرقام تبقى بيضاء عاديّة —
     الأصفر للروابط فقط (عبر نمط الوسم <a>). لا نلوّن om-en. */
  #inputbar{padding:4px 12px 9px; border-top:none; display:flex; flex-direction:column; gap:6px; position:relative;}
  #inputbar .inputbar-tools{display:flex; gap:4px; align-items:center; flex:0 0 auto; flex-wrap:nowrap;}
  #inputbar .inputbar-tools-left{display:flex; gap:4px; align-items:center; flex:0 0 auto; flex-wrap:nowrap;}
  #btnAttach, #btnEmoji, #btnMic, #btnVoiceChat, #btnStop{flex:0 0 auto; font-size:18px; line-height:1; padding:10px 12px;}
  #btnMic.recording{background:#ff4d4d; color:#fff; animation: micPulse 1.1s infinite;}
  #btnMic.transcribing{background:var(--accent-surface); color:var(--accent-on-surface); opacity:0.75;}
  .mini-mic-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-2); border:1px solid var(--border,#333); background:var(--panel2,#111); cursor:pointer; font-size:15px; margin-top:6px; flex-shrink:0; }
  .mini-mic-btn.recording{ background:#ff4d4d; color:#fff; animation: micPulse 1.1s infinite; }
  .mini-mic-btn.transcribing{ background:var(--accent-surface); color:var(--accent-on-surface); opacity:0.75; }
  .mini-mic-field-row{ display:flex; align-items:flex-start; gap:6px; }
  .mini-mic-field-row > textarea, .mini-mic-field-row > input{ flex:1; }
  #btnVoiceChat.active{background:var(--accent-surface); color:var(--accent-on-surface);}
  #btnStop{display:none; opacity:.6;}
  #btnStop.live{display:inline-flex; opacity:1; background:#ff4d4d; color:#fff; border-radius:var(--r-3);}
  #plusToolsWrap{position:relative; display:inline-flex;}
  #btnPlusTools{font-size: var(--fs-2);}
  #plusToolsPopup{
    display:none; position:absolute; bottom:calc(100% + 6px); inset-inline-start:0;
    background:#000000; border:1px solid rgba(255,255,255,.09); border-radius:var(--r-3);
    box-shadow:0 10px 34px rgba(0,0,0,.65); padding:6px; z-index:2000;
    flex-direction:column; gap:1px; min-width:170px;
  }
  #plusToolsPopup.show{display:flex;}
  #plusToolsPopup .btn{width:100%; justify-content:flex-start; background:none; border:none; box-shadow:none; font-size: var(--fs-3); gap:7px; padding:6px 8px; min-height:0; line-height:1.3;}
  #plusToolsPopup .btn:hover{background:rgba(var(--accent-tint-rgb),.12);}
  #plusToolsPopup .btn .btnLabel{display:inline-flex !important;}
  #plusToolsPopup .btn svg, #btnPlusTools svg, #btnMic svg{flex:0 0 auto; display:block;}
  #plusToolsPopup .btn svg{width:17px; height:17px;}
  /* v433: مربع الأدوات الاحترافي — منفصل عن زر + */
  #sectionsToolsOverlay{display:none; position:fixed; inset:0; z-index:940; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); align-items:stretch; justify-content:center;}
  #sectionsToolsOverlay.show{display:flex;}
  #sectionsToolsPopup{width:100%; max-width:none; height:100%; max-height:none; overflow-y:auto; background:var(--panel,#141420); border:none; border-radius:0; padding:calc(10px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));}
  @media (min-width: 761px){ #sectionsToolsOverlay{align-items:center; padding:20px;} #sectionsToolsPopup{max-width:560px; height:auto; max-height:82vh; border:1px solid var(--omGoldSoft); border-radius:var(--r-4); padding:14px 14px 18px;} }
  /* v-tools-x-fixed (شكوى المالك: «X مش ثابت نفس المكان»): زر الإغلاق كان يقلب
     جهته مع اتجاه اللغة (يمين بالعربي، يسار بالإنجليزي) على التابلت والحاسوب.
     margin-right:auto يدفعه إلى اليسار فعليًّا في الاتجاهين — نفس ركن الجوال. */
  #sectionsToolsPopup .stpClose{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#ccc; margin:0 auto 4px 0; cursor:pointer;}
  html[dir="ltr"] #sectionsToolsPopup .stpClose{margin:0 auto 4px 0;}
  #sectionsToolsPopup .ptGrid .btn img.stp3d{width:34px; height:34px; object-fit:contain; pointer-events:none;}
  #sectionsToolsPopup .ptGrid .btn.has3d svg{display:none;}
  #sectionsToolsPopup .ptSectionTitle{font-size:12px; color:var(--accent-ink); font-weight: var(--w-bold); padding:10px 6px 6px;}
  #sectionsToolsPopup .ptGrid .btn .btnLabel{display:inline-flex !important;}
  #sectionsToolsPopup .ptGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:2px 2px 6px;}
  /* v-tools-stable (شكوى المالك: بطاقات الأدوات «تتحرك من مكانها» بين اللغات):
     العناوين الطويلة (فرنسي/روسي/مليالم) تلتف لسطرين فترتفع بطاقتها وحدها
     ١٠٥→١٢٤ وتنزاح الصفوف. الآن ارتفاع موحّد لكل البطاقات في كل اللغات،
     والعنوان مقصوص على سطرين — الشبكة لا تتغير مهما تغيرت اللغة. */
  #sectionsToolsPopup .ptGrid .btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; background:rgba(255,255,255,.02); border:1px solid var(--omGoldSoft); border-radius:var(--r-3); padding:12px 4px; font-size: var(--fs-5); min-height:124px; height:124px; box-sizing:border-box; text-align:center; white-space:normal; line-height:1.3;}
  #sectionsToolsPopup .ptGrid .btn .btnLabel{display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-height:2.6em; width:100%; padding:0 2px;}
  #sectionsToolsPopup .ptGrid .btn:hover{border-color:var(--omGold); background:rgba(var(--accent-tint-rgb),.08);}
  #sectionsToolsPopup .ptGrid .btn svg{width:22px; height:22px;}
  #sectionsToolsPopup .ptGrid .btn .rowChevron{display:none;}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+1) svg{color:var(--omGold);}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+2) svg{color:var(--omGold);}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+3) svg{color:var(--omGold);}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+4) svg{color:var(--omGold);}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+5) svg{color:var(--omGold);}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+6) svg{color:var(--omGold);}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+7) svg{color:var(--omGold);}
  #sectionsToolsPopup .ptGrid .btn:nth-child(8n+8) svg{color:var(--omGold);}
  .rowChevron{margin-inline-start:auto; opacity:.55; flex:0 0 auto;}
  html[dir="ltr"] .rowChevron{transform:scaleX(-1);}
  .miniSwitch{margin-inline-start:auto; width:30px; height:16px; border-radius:var(--r-pill); background:rgba(255,255,255,.18); position:relative; flex:0 0 auto; transition:background .2s;}
  .miniSwitch::after{content:''; position:absolute; top:2px; inset-inline-start:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:inset-inline-start .2s;}
  .miniSwitch.on{background:var(--accent-surface);}
  .miniSwitch.on::after{inset-inline-start:16px;}
  @keyframes micPulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.55);}70%{box-shadow:0 0 0 10px rgba(255,77,77,0);}100%{box-shadow:0 0 0 0 rgba(255,77,77,0);}}
  #emojiPicker{
    position:absolute; bottom:64px; z-index:50; width:280px; max-height:260px; overflow-y:auto;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--r-3); padding:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.4); display:none; grid-template-columns:repeat(7, 1fr); gap:4px;
  }
  html[dir="rtl"] #emojiPicker{right:14px;}
  html[dir="ltr"] #emojiPicker{left:14px;}
  #emojiPicker.open{display:grid;}
  #emojiPicker .em{cursor:pointer; font-size:20px; text-align:center; padding:4px; border-radius:var(--r-2); transition:background .12s ease;}
  #emojiPicker .em:hover{background:var(--panel2, #1e2330);}
  #attachStrip{display:flex; flex-wrap:wrap; gap:8px; padding:0 14px; }
  #attachStrip:empty{display:none;}
  /* v587 — المرفق جوّه الصندوق: صفّ كامل فوق النصّ، مصغّرة مربّعة و✕ دائريّ */
  #composerBox > #attachStrip{order:0; flex:1 1 100%; width:100%; min-width:0; padding:3px 3px 8px; gap:8px;}
  .attach-chip.img{position:relative; width:58px; height:58px; max-width:58px; padding:0; gap:0; background:none; border:none; border-radius:13px;}
  .attach-chip.img img{width:58px; height:58px; border-radius:13px; border:1px solid var(--border);}
  .attach-chip.img .rm{position:absolute; top:-6px; inset-inline-end:-6px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; padding:0; font-size:12px; line-height:1; color:#fff; background:#31363f; border:1px solid var(--border); border-radius:50%;}
  .attach-chip.img .badge{position:absolute; bottom:1px; inset-inline-start:2px; font-size:12px; line-height:1;}
  .attach-chip{display:flex; align-items:center; gap:6px; background:var(--panel2, #1e2330); border:1px solid var(--border); border-radius:var(--r-2); padding:4px 8px; font-size:12px; max-width:220px;}
  .attach-chip img{width:24px; height:24px; object-fit:cover; border-radius:var(--r-1);}
  .attach-chip .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px;}
  .attach-chip .rm{cursor:pointer; color:var(--muted); font-weight:bold; padding:0 2px;}
  .attach-chip .rm:hover{color:#e55;}
  .msg-attachments{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
  .msg-attachments img{width:60px; height:60px; object-fit:cover; border-radius:var(--r-1); border:1px solid var(--border);}
  .msg-attachments img.genImg{width:auto; height:auto; max-width:min(460px,100%); max-height:62vh; object-fit:contain; border-radius:var(--r-3); cursor:zoom-in;}
  .msg-attachments .file-chip{font-size: var(--fs-5); background:var(--panel2, #1e2330); border:1px solid var(--border); border-radius:var(--r-1); padding:3px 6px;}
  #composerBox{
    background:var(--panel2); border:1px solid var(--border); border-radius:var(--r-4);
    padding:8px 10px 6px; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px;
    transition:border-color .15s ease; position:relative;
  }
  #btnSend, #btnStop{
    width:37px; height:37px; flex:0 0 37px; padding:0 !important;
    align-items:center; justify-content:center;
    border:none !important; box-shadow:none !important;
    border-radius:var(--r-2) !important; line-height:1; color:#fff;
  }
  #btnSend{display:inline-flex; background:var(--grad) !important; transition:transform .15s ease, opacity .15s ease;}
  #btnSend.ready{display:inline-flex; transform:scale(1.06);}
  #btnSend svg, #btnStop svg{width:18px; height:18px; display:block;}
  #btnStop{background:#ff4d4d !important;}
  #btnStop.live{display:inline-flex;}
  #btnStop.live + #btnSend{display:none;}
  #composerBox:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);}
  /* v215: بالعربي/الأردو ⋮ و🎤 و➤ على اليمين والنص على يسارهم */
  /* v333: صندوق بطابقين — الكتابة فوق والأزرار صف تحتها داخل الصندوق */
  #composerBox > #prompt{order:1; flex:1 1 100%; width:100%;}
  #composerBox > .inputbar-tools{order:2;}
  #composerBox > #btnStop, #composerBox > #btnSend{order:3; margin-inline-start:auto;}
  #prompt::placeholder{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #prompt{
    flex:1 1 auto; resize:none; background:none; border:none;
    color:var(--text); border-radius:var(--r-3); padding:5px 9px 2px; font-family:inherit; font-size: var(--fs-3); min-height:26px; max-height:110px;
  }
  #prompt:focus{outline:none; box-shadow:none;}
  #workarea{flex:1; display:flex; flex-direction:column; min-width:0;}
  #tabs{display:flex; background:rgba(13,15,22,.5);} /* v-onepage (طلب المالك): أُزيل الخطّ تحت تبويبات المعاينة/الكود — صفحة كاملة */
  .tab{padding:12px 20px; cursor:pointer; font-size: var(--fs-3); color:var(--muted); font-weight: var(--w-mid); position:relative; transition:color .15s ease;}
  button.tab{background:none; appearance:none; -webkit-appearance:none; font-family:inherit;}
  html[dir="rtl"] .tab{border-left:none;}
  html[dir="ltr"] .tab{border-right:none;}
  .tab:hover{color:var(--text);}
  .tab.active{color:var(--text); background:none;}
  .tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--grad);}
  #panels{flex:1; min-height:0; position:relative;}
  .panel{position:absolute; inset:0; display:none;}
  .panel.active{display:flex;}
  #code{
    width:100%; height:100%; background:#0a0c12; color:#d4d8e2; border:none; resize:none;
    font-family:'Consolas','Courier New',monospace; font-size: var(--fs-3); padding:16px; direction:ltr; text-align:left;
    outline:none; line-height:1.6; caret-color:var(--accent-ink); cursor:default;
  }
  #code:focus{ cursor:text; }
  #previewFrame{width:100%; height:100%; border:none; background:white;}
  #pyConsole{width:100%; height:100%; display:flex; flex-direction:column; background:#0d1117; color:#c9d1d9; box-sizing:border-box;}
  #pyConsoleToolbar{display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid #30363d; flex-shrink:0;}
  #pyStatus{font-size: var(--fs-3); opacity:.8;}
  #pyOutput{flex:1; margin:0; padding:12px; overflow:auto; white-space:pre-wrap; word-break:break-word; font-family:'Fira Code', monospace; font-size: var(--fs-3); line-height:1.5;}
  .empty{display:flex; flex:1; align-items:center; justify-content:center; color:var(--muted); text-align:center; flex-direction:column; gap:14px; padding:20px;}
  .empty .icon{
    width:72px;height:72px;border-radius:var(--r-4);background:var(--grad);
    display:flex;align-items:center;justify-content:center;font-size:32px;
    box-shadow:var(--shadow-glow); animation:float 3s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
  .empty h2{color:var(--text); font-size: var(--fs-1); margin:0; font-weight: var(--w-bold);}
  .empty p{max-width:380px; margin:0;}
  dialog{
    background:#000000; color:var(--text); border:1px solid var(--border); border-radius:var(--r-4);
    padding:0; width:440px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.5);
    max-height:85vh; overflow-y:auto;
  }
  /* v-settings-drawer-desktop (طلب المالك: «الإعدادات ما تكون في نص الشاشة» —
     نفس درج الجوال ChatGPT-style): على الكمبيوتر أيضًا درجٌ جانبيّ يمين بطول
     الشاشة كامل بدل نافذةٍ وسط الشاشة. الجوال له درجه الخاص (html.mobile-ui). */
  #settingsDialog{
    top:0; bottom:0; height:100vh; max-height:100vh;
    right:0; left:auto; margin:0;
    width:430px; max-width:94vw; min-width:340px;
    border-radius:0; border:none;
    border-inline-start:1px solid var(--border);
    resize:none; overflow:auto;
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
  }
  /* v214: عند فتح أي نافذة (الإعدادات وغيرها) كل ما خلفها يختفي تمامًا */
  dialog::backdrop{background:#000000;}
  /* v-settings-clear-desktop (طلب المالك: «ما تغطّي الدردشة» — زي لوحة محادثة
     جديدة): على الكمبيوتر يبقى درج الإعدادات على اليمين، وخلفيته شفافة فتظلّ
     المحادثة ظاهرة خلفه بدل تعتيمها بالكامل. الجوال يحتفظ بتعتيمه (داخل @media). */
  #settingsDialog::backdrop{ background:transparent; }
  /* v-settings-push (طلب المالك: «صلبة تدفع الدردشة، ما تغطّيها»): عند فتح درج
     الإعدادات (يمين، ٤٦٠px) نُزيح كامل التطبيق يسارًا بنفس العرض على الكمبيوتر،
     فيبقى الدرج صلبًا والمحادثة ظاهرة كاملةً جنبه بلا تراكب ولا تعتيم — كلاهما
     يملأ الشاشة معًا فلا تظهر الخلفية الشفافة إطلاقًا. الجوال بلا إزاحة. */
  html.settings-push:not(.mobile-ui) main{ margin-right:430px; transition:margin-right .18s ease; }
  dialog > *{padding-left:24px; padding-right:24px;}
  dialog > h3{padding-top:24px;}
  dialog h3{font-weight:700;}
  dialog label{font-size: var(--fs-3); color:var(--muted); display:block; margin:12px 0 6px; font-weight: var(--w-mid);}
  dialog input, dialog select{
    width:100%; padding:10px 12px; border-radius:var(--r-2); border:1px solid var(--border);
    background:var(--panel2); color:var(--text); font-size: var(--fs-3); font-family:inherit;
  }
  dialog input:focus, dialog select:focus{outline:none; border-color:var(--accent);}
  dialog select option{ background:#000000; color:#f1f1f4; }
  select option{ background:#000000; color:#f1f1f4; }
  .dlg-actions{
    display:flex; justify-content:flex-end; gap:10px; margin-top:0;
    padding-top:14px; padding-bottom:20px; flex:0 0 auto;
    border-top:1px solid var(--border); background:#000000; position:sticky; bottom:0;
  }
  .spinner{
    width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
    border-radius:50%;display:inline-block;animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:var(--r-1);}
  ::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-tint-rgb),.5);}
  /* v282: شريط تمرير واحد كامل للمحادثة فقط — إخفاء أي أشرطة داخلية */
  #messages *{scrollbar-width:none;}
  #messages *::-webkit-scrollbar{display:none; width:0; height:0;}
  small.hint{color:var(--muted); font-size: var(--fs-5); display:block; margin-top:10px; line-height:1.7;}
  #btnLang{min-width:56px; justify-content:center; font-weight:700;}
  .langFlagBtn{width:38px; height:38px; padding:0; font-size:18px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-2); opacity:.5; transition:opacity .15s, box-shadow .15s;}
  .langFlagBtn.active{opacity:1; box-shadow:0 0 0 2px var(--accent,#6b7280) inset;}
  #tabDownloadWrap{display:flex; align-items:center; margin-inline-start:auto; padding-inline-end:8px; position:relative;}
  /* v207: قائمة ⋮ لأزرار رفع/تنزيل/ZIP */
  #tabsMenuDropdown{
    display:none; position:absolute; top:100%; inset-inline-end:6px; z-index:900;
    flex-direction:column; min-width:150px; padding:6px;
    background:var(--panel2, #161a26); border:1px solid var(--border); border-radius:var(--r-3);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
  }
  #tabsMenuDropdown.show{display:flex;}
  #tabsMenuDropdown .btn{width:100%; justify-content:flex-start; background:none; border:none; box-shadow:none; gap:8px; font-size: var(--fs-3); padding:8px 10px;}
  #tabsMenuDropdown .btn:hover{background:rgba(var(--accent-tint-rgb),.12);}
  #tabsMenuDropdown .btn .btnLabel{display:inline-flex !important;}
  #btnTabsMenu.active{color:var(--text);}

  /* ---- Resizable panels ---- */
  .resizer{
    width:6px; flex-shrink:0; cursor:col-resize; position:relative; z-index:6;
    background:transparent; transition:background .15s ease;
  }
  .resizer:hover, .resizer.dragging{background:rgba(var(--accent-tint-rgb),.20);}
  body.resizing-active, body.resizing-active *{cursor:col-resize!important; user-select:none!important;}
  body.resizing-active #code, body.resizing-active iframe, body.resizing-active textarea{pointer-events:none!important;}
  .resizer::after{
    content:''; position:absolute; top:0; bottom:0; left:50%; width:2px;
    transform:translateX(-50%); background:var(--accent-surface); opacity:.5;
  }
  .resizer:hover::after, .resizer.dragging::after{opacity:1;}
  #btnToggleHistory{display:none;}
  .code-hint-pulse{ animation: codeHintPulse 1.4s ease-in-out infinite; }
  @keyframes codeHintPulse{
    0%{ box-shadow:0 0 0 0 rgba(88,166,255,.65); }
    70%{ box-shadow:0 0 0 12px rgba(88,166,255,0); }
    100%{ box-shadow:0 0 0 0 rgba(88,166,255,0); }
  }
  #codeHintTip{
    position:fixed; z-index:9999; background:#1f6feb; color:#fff; padding:8px 12px;
    border-radius:var(--r-2); font-size:12.5px; font-weight: var(--w-mid); max-width:220px; line-height:1.5;
    box-shadow:0 6px 20px rgba(0,0,0,.35); display:none;
  }
  #codeHintTip::after{
    content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
    border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #1f6feb;
  }
  #codeHintTip .hintCloseBtn{ position:absolute; top:2px; inset-inline-end:6px; cursor:pointer; opacity:.85; font-size: var(--fs-5); }

  /* ---- Mobile layout ----
     On mobile the CHAT is the main/default screen. ☰ opens the CODE drawer,
     💬 opens the PREVIEW drawer, and 📂 opens the projects-history drawer. */
  @media (max-width:860px){
    header{padding:8px 10px 8px; padding-top:min(var(--omran-sat, env(safe-area-inset-top, 0px)), 62px) !important; gap:6px; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:nowrap;}
    header h1{font-size:14px; min-width:0; flex:1 1 auto; overflow:hidden;}
    header h1 .brand{width:28px; height:28px; border-radius:9px; font-size:14px; flex-shrink:0;}
    header h1 .titles{min-width:0; overflow:hidden;}
    header h1 .titles > span:first-child{
      display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
    }
    header h1 .subtitle{display:none;}
    header > div{flex-wrap:nowrap; flex-shrink:0; justify-content:flex-end; width:auto;}
    header .btn span:not(#headerClockTime){display:none;}
    #btnHeaderLogin span, #btnHeaderUser span:not(#headerUserEmoji){display:inline !important;}
    #btnClock{padding-inline:10px !important; min-width:auto !important;}
    header .btn{padding:7px 9px; min-width:34px; height:34px; justify-content:center; gap:0;}
    #btnHeaderLogin, #btnHeaderUser{width:auto !important; min-width:auto !important; padding:7px 12px !important;}
    header .btn.primary{padding:7px 9px;}
    #btnToggleHistory, #btnToggleProjects{display:inline-flex;}
    .resizer{display:none;}
    main{position:relative;}
    #sidebar, #workarea{
      position:fixed; top:0; bottom:0; left:0; width:80vw; max-width:420px; height:100%;
      z-index:60; transition:transform .25s ease; box-shadow:0 10px 50px rgba(0,0,0,.55);
      background:var(--bg2); opacity:1;
      touch-action:pan-y; /* v-drawer-drag2: الأفقي لنا والرأسي للمتصفح */
    }
    #sidebar > *, #workarea > *{ position:relative; z-index:1; }
    #sidebar{transform:translateX(-100%); max-width:360px;}
    #workarea{transform:translateX(-100%);}
    /* RTL: anchor drawers to the right edge (not left) so the closed-state
       translateX(100%) actually pushes them fully off the real viewport,
       instead of only shifting by their own (much narrower) width — which
       used to leave them visibly overlapping the content on wide/misreported
       viewports. */
    html[dir="rtl"] #sidebar, html[dir="rtl"] #workarea{left:auto; right:0; transform:translateX(100%);}
    #sidebar.open, #workarea.open{transform:translateX(0) !important;}
    #chatcol{width:100%;}
    #drawerBackdrop{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55;
    }
    #drawerBackdrop.show{display:block;}
    /* Settings (and other) dialogs: use the full screen as a scrollable page
       instead of a small centered box, so long forms are never cut off and
       can always be scrolled all the way down to reach every field/button. */
    dialog{
      position:fixed; inset:0; top:0; left:0; right:0; bottom:0; margin:0;
      width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
      border-radius:0; border:none;
      -webkit-overflow-scrolling:touch;
    }
    #settingsDialog{ resize:none; }
    #tabs{overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
    #tabs::-webkit-scrollbar{display:none;}
    #tabs .tab{padding:12px 10px; font-size:12.5px; flex-shrink:0; white-space:nowrap;}
    /* v-files-dl-mobile: زرّ التنزيل (⋮) كان يُدفع خارج الشاشة بـmargin auto في شريط
       تبويبات ضيّق بلا شريط تمرير ظاهر — نلصقه بعد التبويبات مباشرة ليصله المستخدم. */
    #tabDownloadWrap{padding-inline-end:14px; flex-shrink:0; margin-inline-start:6px;}
    #providerStripMobile{display:flex;}
  }
  html.mobile-ui #providerStripMobile{display:flex;}
  /* Some mobile browsers (e.g. Huawei Browser) misreport a wide CSS viewport and
     silently skip the max-width media query above. We detect real phones/tablets via
     JS (touch + user-agent) and force the same layout using this class as a fallback. */
  html.mobile-ui header{padding:8px 10px; gap:6px; flex-wrap:nowrap; flex-direction:row-reverse; align-items:center; justify-content:space-between;}
  html.mobile-ui header h1{font-size:14px; min-width:0; flex:1 1 auto; overflow:hidden;}
  html.mobile-ui header h1 .brand{width:28px; height:28px; border-radius:9px; font-size:14px; flex-shrink:0;}
  html.mobile-ui header h1 .titles{min-width:0; overflow:hidden;}
  html.mobile-ui header h1 .titles > span:first-child{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
  }
  html.mobile-ui header h1 .subtitle{display:none;}
  html.mobile-ui header > div{flex-wrap:nowrap; flex-shrink:0; justify-content:flex-end; width:auto;}
  html.mobile-ui header .btn span:not(#headerClockTime){display:none;}
  html.mobile-ui #btnHeaderLogin span, html.mobile-ui #btnHeaderUser span:not(#headerUserEmoji){display:inline !important;}
  html.mobile-ui #btnClock{padding-inline:10px !important; min-width:auto !important;}
  html.mobile-ui header .btn{padding:7px 9px; min-width:34px; height:34px; justify-content:center; gap:0;}
  html.mobile-ui #btnHeaderLogin, html.mobile-ui #btnHeaderUser{width:auto !important; min-width:auto !important; padding:7px 12px !important;}
  html.mobile-ui header .btn.primary{padding:7px 9px;}
  html.mobile-ui #btnToggleHistory, html.mobile-ui #btnToggleProjects{display:inline-flex;}
  html.mobile-ui .resizer{display:none;}
  html.mobile-ui main{position:relative;}
  html.mobile-ui #sidebar, html.mobile-ui #workarea{
    position:fixed; top:0; bottom:0; left:0; width:80vw; max-width:420px; height:100%;
    touch-action:pan-y; /* v-drawer-drag2 */
    z-index:60; transition:transform .25s ease; box-shadow:var(--sh-4);
    background:var(--bg2); opacity:1;
  }
  html.mobile-ui #sidebar > *, html.mobile-ui #workarea > *{ position:relative; z-index:1; }
  html.mobile-ui #sidebar{transform:translateX(-100%); max-width:360px;}
  html.mobile-ui #workarea{transform:translateX(-100%);}
  /* Same right-edge anchoring fix as the media-query block above, for the
     JS-forced mobile-ui fallback path (e.g. Huawei Browser misreported width). */
  html.mobile-ui[dir="rtl"] #sidebar, html.mobile-ui[dir="rtl"] #workarea{left:auto; right:0; transform:translateX(100%);}
  html.mobile-ui #sidebar.open, html.mobile-ui #workarea.open{transform:translateX(0) !important;}
  html.mobile-ui #chatcol{width:100%;}
  html.mobile-ui #drawerBackdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55;
  }
  html.mobile-ui #drawerBackdrop.show{display:block;}
  html.mobile-ui #tabs{overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  html.mobile-ui #tabs::-webkit-scrollbar{display:none;}
  html.mobile-ui #tabs .tab{padding:12px 10px; font-size:12.5px; flex-shrink:0; white-space:nowrap;}
  /* v-files-dl-mobile (بلاغ المالك «في الآيفون فقط المعاينة والكود»): margin-inline-start:auto
     كان يدفع زرّ الثلاث نقاط (التنزيل/ZIP/الرفع) خارج الشاشة في شريط تبويبات ضيّق
     قابل للتمرير بلا شريط تمرير ظاهر — فلا يصله المستخدم. نلصقه بعد التبويبات مباشرة. */
  html.mobile-ui #tabDownloadWrap{padding-inline-end:14px; flex-shrink:0; margin-inline-start:6px;}
  html.mobile-ui dialog{
    position:fixed; inset:0; top:0; left:0; right:0; bottom:0; margin:0;
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0; border:none;
    -webkit-overflow-scrolling:touch;
    padding-top:env(safe-area-inset-top, 0px);
  }
  html.mobile-ui #settingsDialog{ resize:none; }
  /* v-settings-drawer (طلب عمران — «نفس ChatGPT»): الإعدادات درج جانبي
     بطول الشاشة كامل، وشريط فاضٍ معتم على الجنب — النقر عليه يرجعك.
     بقية النوافذ بلا تغيير. */
  html.mobile-ui #settingsDialog{
    top:0; bottom:0; height:100dvh; max-height:100dvh;
    right:0; left:auto; margin:0;
    width:80vw; max-width:80vw;
    border-radius:0; border:none;
    /* v-drawer-rail: الحافة المكشوفة يسار الدرج — border-inline-start في RTL
       كان يرسمها على اليمين الملاصق للشاشة فلا تظهر إطلاقًا */
    border-left:1px solid var(--border);
    padding-top:env(safe-area-inset-top, 0px);
  }
  /* v-drawer-drag: الدرج ينسحب مع الإصبع — pan-y يترك التمرير الرأسي للمتصفح
     ويعطينا الحركة الأفقية بلا تعارض. العصية العمودية حُذفت بطلب عمران. */
  html.mobile-ui #settingsDialog{ touch-action: pan-y; }
  #settingsDialog::backdrop{ background:rgba(0,0,0,.55); }
  html.mobile-ui dialog > div:first-child{ padding-top:4px; } /* v-fix: safe-area already on dialog */
  body.vantaActive{background:transparent !important; animation:none !important;}
  #vantaBg{position:fixed; inset:0; z-index:-1; pointer-events:none;}
  .bg3dGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:10px;}
  .bg3dOption{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:var(--r-2); border:1px solid var(--border); background:var(--panel2); cursor:pointer; font-size: var(--fs-5); text-align:center; transition:.15s;}
  .bg3dOption:hover{border-color:var(--accent);}
  .bg3dOption.active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset;}
  .bg3dOption .bg3dEmoji{font-size:20px;}

  /* ===== v199 Settings redesign (ChatGPT-style two-level nav) ===== */
  .settingsPageSection{ display:none; }
  .settingsPageSection.settingsPageActive{ display:block; animation:settingsSlideIn .25s ease; }
  @keyframes settingsSlideIn{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:translateX(0); } }
  [dir="rtl"] .settingsPageSection.settingsPageActive{ animation-name:settingsSlideInRtl; }
  @keyframes settingsSlideInRtl{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } }
  .settingsPageActive .settingsSectionHeader{display:none !important;}
.settingsNavRow{ display:flex; align-items:center; gap:12px; padding:14px 6px; cursor:pointer; user-select:none; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); transition:background .15s; border-radius:var(--r-2); }
  .settingsNavRow:last-child{ border-bottom:none; }
  .settingsNavRow:hover, .settingsNavRow:active{ background:var(--panel2); }
  .settingsNavRow .settingsNavIcon{ flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
  .settingsNavRow .settingsNavLabel{ flex:1 1 auto; font-size: var(--fs-3); min-width:0; }
  .settingsNavRow .settingsNavChevron{ flex:0 0 auto; width:16px; height:16px; color:var(--muted); opacity:.7; }
  [dir="rtl"] .settingsNavRow .settingsNavChevron{ transform:scaleX(-1); }
  [dir="rtl"] #settingsBackSvg{ transform:scaleX(-1); }
  .voiceGenderBtn{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; background:var(--panel2); border:2px solid transparent; border-radius:var(--r-3); cursor:pointer; color:var(--muted); font-size: var(--fs-3); transition:border-color .15s, color .15s; }
  .voiceGenderBtn.active{ border-color:var(--accent); color:var(--text); }
  /* iOS-style toggle switch, used by ticker calm-mode + reused wherever needed */
  .iosSwitch{ position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; }
  .iosSwitch input{ opacity:0; width:0; height:0; }
  .iosSwitch .iosSwitchTrack{ position:absolute; inset:0; background:var(--border,rgba(255,255,255,.18)); border-radius:var(--r-pill); transition:.2s; cursor:pointer; }
  .iosSwitch .iosSwitchTrack::before{ content:''; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .iosSwitch input:checked + .iosSwitchTrack{ background:var(--accent-surface); }
  .iosSwitch input:checked + .iosSwitchTrack::before{ transform:translateX(18px); }
  /* Feature ② — ChatGPT-style search results: image strip + source badges */
  .msgSearchImgStrip{ display:flex; gap:8px; overflow-x:auto; margin-bottom:8px; max-width:100%; scrollbar-width:thin; }
  .msgSearchImgStrip img{ height:140px; width:auto; max-width:220px; object-fit:cover; border-radius:var(--r-3); flex:0 0 auto; background:var(--panel,#1c2230); }
  /* ── زر المصادر المدمج (بديل الشارات المنتشرة) ── */
  .msgSrcWrap{ position:relative; display:inline-block; margin-top:10px; }
  .msgSrcBtn{ display:inline-flex; align-items:center; gap:6px; padding:2px 0; background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; white-space:nowrap; transition:color .15s; }
  .msgSrcBtn:hover,.msgSrcBtnOpen{ color:var(--text); }
  .msgSrcFavs{ display:flex; align-items:center; }
  .msgSrcFavs img{ width:14px; height:14px; border-radius:3px; margin-inline-end:-4px; border:1px solid var(--bg,#0d1117); flex:0 0 auto; }
  .msgSrcFavs img:first-child{ margin-inline-end:-4px; }
  .msgSrcFavs img:last-child{ margin-inline-end:0; }
  .msgSrcLabel{ font-size:12px; padding-inline-start:8px; }
  .msgSrcCount{ font-size:11px; background:rgba(255,255,255,.08); border-radius:20px; padding:1px 6px; margin-inline-start:2px; }
  /* v-src-dedupe (أمر عمران ج): البطاقة تلزق على محتواها بدل عرض ثابت فاضٍ. */
  .msgSrcDrop{ position:absolute; inset-inline-start:0; top:calc(100% + 6px); min-width:0; width:max-content; max-width:min(340px,88vw); background:var(--panel2,#161c2a); border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:200; }
  .msgSrcItem{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--border,rgba(255,255,255,.08)); transition:background .12s; }
  .msgSrcItem:last-child{ border-bottom:none; }
  .msgSrcItem:hover{ background:rgba(255,255,255,.06); }
  .msgSrcItem img{ width:16px; height:16px; border-radius:3px; flex:0 0 auto; margin-top:2px; }
  .msgSrcItemInfo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .msgSrcItemTitle{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .msgSrcItemDomain{ font-size:11px; color:var(--muted); }
  html[data-mode="light"] .msgSrcBtn{ background:var(--panel2); }
  html[data-mode="light"] .msgSrcDrop{ background:#fff; }
  .msgActionBar{ display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:nowrap; white-space:nowrap; }
  .msgActionBar button{ background:none; border:none; box-shadow:none; padding:2px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); line-height:1; }
  .msgActionBar button:hover{ color:var(--accent-ink); }
  .msgActionBar button.msgThumbActive{ color:var(--accent-ink); }
  .msgActionBar button.msgThumbDownActive{ color:#ef4444; }

  /* v560: تحرير/إعادة توليد بأسلوب ChatGPT — سطح المكتب فقط. */
  html:not(.mobile-ui) #chatEditNotice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 10px 2px;padding:7px 10px;border-bottom:1px solid var(--border);color:var(--muted);font-size:12px}
  html:not(.mobile-ui) #chatEditNotice[hidden]{display:none}
  html:not(.mobile-ui) #chatEditNotice button{border:0;background:none;color:var(--accent-ink);font:inherit;cursor:pointer;padding:2px 4px}
  html:not(.mobile-ui) .msgStoppedNote{margin-top:8px;color:var(--muted);font-size:12px}
  .msgMoreMenu{ position:absolute; z-index:9999; background:var(--panel,#1c2230); border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:var(--r-2); box-shadow:var(--sh-2); padding:6px; min-width:170px; font-size: var(--fs-3); }
  .msgMoreMenu button{ display:flex; width:100%; text-align:start; background:none; border:none; padding:9px 10px; border-radius:var(--r-1); cursor:pointer; color:var(--text); font-size: var(--fs-3); }
  .msgMoreMenu button:hover{ background:var(--panel2); }
  .chat-status-fold{font-size:13px; line-height:1.7; opacity:.9; max-width:100%; min-width:0;} /* v-status-tidy: نفس العرض المطويّ على الجوال */
  .chat-status-text{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .chat-status-fold[open] .chat-status-text{white-space:normal;}
  .chat-status-fold summary{display:flex; align-items:center; gap:7px; cursor:pointer; list-style:none; width:max-content; max-width:100%;}
  .chat-status-fold summary::-webkit-details-marker{display:none;}
  .chat-status-fold summary::after{content:'⌄'; color:var(--muted); font-size:11px; margin-inline-start:2px;}
  .chat-status-fold[open] summary::after{transform:rotate(180deg);}
  .chat-status-icon{flex:0 0 auto; color:var(--accent2);}
  .chat-status-running{animation:omranPulse 1.4s ease-in-out infinite;}
  .chat-status-history{display:flex; flex-direction:column; gap:4px; margin-top:6px; padding-inline-start:18px; color:var(--muted);}
  .chat-status-row{display:flex; align-items:flex-start; gap:7px;}
  .chat-status-row.done>span:first-child{color:#2e9e6b;}
  .chat-status-row.fail>span:first-child{color:#c0453f;}
  /* v-status-ai: مظهر «الذكاء يكتب» — حبّة ذهبية خفيفة، شرارة نابضة، لمعان يمرّ على النص، ونقاط كتابة */
  .chat-status-fold summary{padding:7px 13px; border-radius:999px; background:linear-gradient(90deg, rgba(212,175,55,.12), rgba(212,175,55,.03)); border:1px solid rgba(212,175,55,.28); box-shadow:inset 0 0 18px rgba(212,175,55,.06), 0 2px 12px rgba(0,0,0,.18);}
  .chat-status-fold[open] summary{border-radius:16px;}
  .chat-status-spark{color:var(--omGold,#d4af37) !important; display:inline-block; animation:omranSpark 1.6s ease-in-out infinite; text-shadow:0 0 8px rgba(212,175,55,.65);}
  .chat-status-running{animation:none; background:linear-gradient(90deg, var(--muted,#98a0b3) 0%, var(--muted,#98a0b3) 35%, #fff 48%, var(--omGold,#d4af37) 52%, var(--muted,#98a0b3) 65%, var(--muted,#98a0b3) 100%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:omranShimmer 2.2s linear infinite;}
  .chat-status-dots{display:inline-flex; gap:3px; align-items:center; margin-inline-start:2px;}
  .chat-status-dots i{width:4px; height:4px; border-radius:50%; background:var(--omGold,#d4af37); opacity:.35; animation:omranDots 1.2s ease-in-out infinite;}
  .chat-status-dots i:nth-child(2){animation-delay:.2s;}
  .chat-status-dots i:nth-child(3){animation-delay:.4s;}
  /* v-status-glow (طلب المالك «شي وميض»): وميض ذهبي يتنفّس حول الحبّة ما دام الذكاء يعمل */
  .chat-status-fold summary.is-running{animation:omranGlow 2.4s ease-in-out infinite; border-color:rgba(212,175,55,.45);}
  @keyframes omranGlow{0%,100%{box-shadow:inset 0 0 18px rgba(212,175,55,.06), 0 0 0 rgba(212,175,55,0)} 50%{box-shadow:inset 0 0 22px rgba(212,175,55,.14), 0 0 22px rgba(212,175,55,.38)}}
  @keyframes omranSpark{0%,100%{transform:scale(.85) rotate(0deg); opacity:.75} 50%{transform:scale(1.2) rotate(25deg); opacity:1}}
  @keyframes omranShimmer{from{background-position:220% 0} to{background-position:-20% 0}}
  @keyframes omranDots{0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-2px)}}
  @media (prefers-reduced-motion: reduce){ .chat-status-spark, .chat-status-running, .chat-status-dots i, .chat-status-fold summary.is-running{animation:none;} .chat-status-running{color:var(--text,#fff); background:none;} }
  html:not(.mobile-ui) .msg.msg-streaming::after{content:''; display:inline-block; width:6px; height:1em; margin-inline-start:3px; vertical-align:-.15em; border-radius:3px; background:currentColor; opacity:.55; animation:omranPulse 1s ease-in-out infinite;}
@keyframes omranPulse{0%,100%{opacity:.6}50%{opacity:1}}
  /* v418 (٦ أغسطس): قائمة المزوّدين التسعة مخفيّة على الكمبيوتر — التوجيه صار تلقائيًّا بالتخصص.
     الجوال لم يُلمس (#providerStripMobile باقٍ). زرّ الوضع الاحترافي باقٍ لأنه ليس اختيار مزوّد. */
  /* v449 (٧ أغسطس، أمر عمران): نفس الإخفاء على الجوّال أيضًا. */
  #provDropdownBtn,
  #provDropdownPanel{display:none !important;}

  /* ===== v434 — الوضع الفاتح (طبقة تغليف فوق الداكن؛ لا يُعاد كتابة أي لون) =====
     الذهبي --accent ثابت في الوضعين. التفعيل: html[data-mode="light"] */
  html[data-mode="light"]{
    /* !important: التطبيق يكتب --bg/--text سطريًّا على <html>؛ المهمّ يعلو على السطريّ العادي */
    --bg:#ffffff !important; --text:#0d0d0d !important;
    --user-bubble:rgba(0,0,0,.05) !important; --assistant-bubble:transparent !important;
    --bg2:#ffffff; --panel:#ffffff; --panel2:#ffffff;
    --border:rgba(0,0,0,.05); --muted:#5d5d5d;
    --accent-surface:#e7e9ee; --accent-tint-rgb:0,0,0; --accent-glow-rgb:0,0,0;
    --accent-ink:#14161a !important; --accent-on-surface:#14161a !important;
    --sh-1:0 2px 10px rgba(0,0,0,.10); --sh-2:0 8px 24px rgba(0,0,0,.12);
    --sh-3:0 10px 40px rgba(0,0,0,.14); --sh-4:0 10px 50px rgba(0,0,0,.16);
    --shadow-glow:0 0 40px rgba(var(--accent-glow-rgb),.20);
    --omLine:rgba(0,0,0,.10);
    color-scheme:light;
  }
  html[data-mode="light"] body{background:var(--bg); color:var(--text);}
  html[data-mode="light"] header{background:#ffffff;}
  html[data-mode="light"] #chatcol{background:transparent;}
  html[data-mode="light"] #tabs{background:transparent;}
  html[data-mode="light"] #code{background:#ffffff; color:#1f2328;}
  /* v519 — أبيض ورقيّ: إطفاء آخر رماديّين في الفاتح (زرّ محادثة جديدة + الصفّ النشِط) */
  html[data-mode="light"]:not(.mobile-ui) #omranNewChatBtn,
  html[data-mode="light"]:not(.mobile-ui) #omranNewChatBtn:hover{
    background:#ffffff !important; background-image:none !important;
    border-color:rgba(0,0,0,.10) !important;
  }
  html[data-mode="light"] .hist-item.active{background:#ffffff !important;}
  html[data-mode="light"] #sidebar,
  html[data-mode="light"] #workarea{background:#ffffff !important;}
  html[data-mode="light"] .msg.user{
    background:rgba(0,0,0,.05) !important; border:1px solid rgba(0,0,0,.09) !important; color:var(--text) !important;
  }
  html[data-mode="light"] dialog,
  html[data-mode="light"] #plusToolsPopup,
  html[data-mode="light"] #headerMenuDropdown,
  html[data-mode="light"] #headerUserDropdown,
  html[data-mode="light"] #tabsMenuDropdown,
  html[data-mode="light"] #histItemMenu,
  html[data-mode="light"] .msgMoreMenu,
  html[data-mode="light"] .dlg-actions{background:#ffffff;}
  html[data-mode="light"]:not(.mobile-ui) #provDropdownPanel{background:#ffffff;}
  html[data-mode="light"] dialog::backdrop{background:rgba(0,0,0,.45);}
  html[data-mode="light"] dialog select option,
  html[data-mode="light"] select option{background:#ffffff; color:#14161a;}
  html[data-mode="light"] .omChip,
  html[data-mode="light"] .prov-cell:hover,
  html[data-mode="light"] .prov-chip-m,
  html[data-mode="light"] #btnPremiumToggle,
  html[data-mode="light"] #btnPremiumToggle:hover{background:rgba(0,0,0,.04);}
  html[data-mode="light"]:not(.mobile-ui) #provDropdownBtn,
  html[data-mode="light"]:not(.mobile-ui) #provDropdownBtn:hover,
  html[data-mode="light"]:not(.mobile-ui) .prov-cell:hover{background:rgba(0,0,0,.05);}
  html[data-mode="light"] #providerStripMobile{background:rgba(0,0,0,.03); border-bottom-color:rgba(0,0,0,.10);}
  /* v443: شريط الجوّال السفليّ يتبع الوضع الفاتح — كان أسود ثابتًا فيبتلع زرّ «الرئيسية» النشط */
  html[data-mode="light"] #omranBottomNav{background:rgba(255,255,255,.97); border-top-color:var(--omLine);}
  html[data-mode="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.20);}
  html[data-mode="light"] .miniSwitch,
  html[data-mode="light"] .iosSwitch .iosSwitchTrack{background:rgba(0,0,0,.20);}
  html[data-mode="light"] .spinner{border-color:rgba(0,0,0,.25); border-top-color:var(--accent);}
  html[data-mode="light"] .btn.primary,
  html[data-mode="light"] #btnSend{color:#14161a;}
  /* v-freeze-tune: الخلفية السوداء المضمّنة على الدرجين (تمنع وميض الأبيض
     أثناء الإقلاع) يجب أن يتغلّب عليها الوضع الفاتح — !important */
  html[data-mode="light"] #sidebar, html[data-mode="light"] #workarea{background:var(--bg2) !important;}
  html[data-mode="light"] .omToolCard{background:rgba(0,0,0,.03);}
  html[data-mode="light"] .attach-chip,
  html[data-mode="light"] .msg-attachments .file-chip,
  html[data-mode="light"] .msgSourceBadge{background:var(--panel2);}
  html[data-mode="light"] #stockTicker{background:rgba(0,0,0,.045) !important;}
  html[data-mode="light"] #stockTickerToggle{background:rgba(0,0,0,.06) !important;}
  html[data-mode="light"]:not(.mobile-ui) #eduIntroCard, html[data-mode="light"].mobile-ui #eduIntroCard{background:linear-gradient(160deg,#ffffff,#f2f3f6) !important; border-color:rgba(0,0,0,.14) !important;}
  html[data-mode="light"] #stockTicker > div{color:#14161a !important;}
  /* لوحة الكود ومربّعات الكود تبقى داكنة عمدًا — أوضح للقراءة في الوضعين. */



  /* أطراف الشريط: التدرّج كان #000 صريحًا — يذوب في الداكن، يظهر أسودَ في الفاتح. */
  html[data-mode="light"] #stockTicker::before{
    background:linear-gradient(90deg,rgba(var(--accent-tint-rgb),0),rgba(var(--accent-tint-rgb),.5) 18%,rgba(var(--accent-tint-rgb),.5) 82%,rgba(var(--accent-tint-rgb),0)) top left/100% 1px no-repeat,
               linear-gradient(90deg,#f4f4f4 0,rgba(244,244,244,0) 84px),
               linear-gradient(270deg,#f4f4f4 0,rgba(244,244,244,0) 84px) !important;
  }

  /* v438: سماكة الخطّ الأساسيّة — أمر عمران ٧ أغسطس ٢٠٢٦ */
  body{font-weight:var(--w-body);}
  button,input,textarea,select{font-weight:inherit;}

  /* v452 — شعار عمران في زرّ الوكيل: حجم موحّد كمبيوتر + جوّال (أمر عمران ٧ أغسطس ٢٠٢٦) */
  #btnPremiumToggle .premCrown{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; opacity:1;}
  #btnPremiumToggle .premCrown img{width:22px; height:22px; display:block; object-fit:contain;}
  /* v457 — بلا حدّ + شعار بحجم أيقونة مها ٤٥ (أمر عمران ٧ أغسطس ٢٠٢٦) */
  #btnPremiumToggle{display:inline-flex; align-items:center; gap:8px; padding:2px 10px; border-radius:999px; background:transparent; border:0; box-shadow:none; color:var(--text,#eef0f6); font-size:13px; font-weight:600; line-height:1;}
  #btnPremiumToggle .premCrown img{width:45px; height:45px; border-radius:50%;}
  #btnPremiumToggle .premLabel{white-space:nowrap;}
  #btnPremiumToggle #premiumCostHint{color:var(--muted,#9a9a9e); font-weight:500;}

/* ═══ v520 — درجة عمران: السطوح #EBEBEB · المنطقة السفليّة #E5E5E5 (أغمق بدرجتين) ═══ */
html[data-mode="light"]{
  --bg:#EBEBEB !important; --bg2:#EBEBEB; --panel:#EBEBEB; --panel2:#EBEBEB;
}
html[data-mode="light"] body,
html[data-mode="light"] header,
html[data-mode="light"] #sidebar,
html[data-mode="light"] #workarea,
html[data-mode="light"] #code,
html[data-mode="light"] .hist-item.active,
html[data-mode="light"] dialog,
html[data-mode="light"] #plusToolsPopup,
html[data-mode="light"] #headerMenuDropdown,
html[data-mode="light"] #headerUserDropdown,
html[data-mode="light"] #tabsMenuDropdown,
html[data-mode="light"] #histItemMenu,
html[data-mode="light"] .msgMoreMenu,
html[data-mode="light"] .dlg-actions{background:#EBEBEB !important;}
html[data-mode="light"]:not(.mobile-ui) #omranNewChatBtn,
html[data-mode="light"]:not(.mobile-ui) #omranNewChatBtn:hover{background:#EBEBEB !important;}
html[data-mode="light"] #inputbar,
html[data-mode="light"] #composerBox{background:#E5E5E5 !important;}

/* v569: الروابط لا تتقطّع في منتصف الكلمة — الكسر عند المسافة، والكلمة الأطول من السطر وحدها تُكسر */
.msg a, .msg-text a{overflow-wrap:break-word; word-break:normal; hyphens:none;}

/* v-store-safe: حزمة AppGallery — كل الواجهات المالية مخفية (قاعدة 11.4). */
html.store-safe #stockTicker,
html.store-safe #btnStocks,
html.store-safe #stocksModal,
html.store-safe #aboutStocksCard{display:none !important;}

/* v-close-unified (طلب عمران ١ سبتمبر): أزرار إغلاق الميزات كانت مبعثرة
   (14px، 46px، 90px من اليسار وبأشكال شتى) — نقطة واحدة ثابتة أعلى يسار
   الشاشة وشكل موحد. الجوال فقط؛ حاسوبيًا تبقى داخل رؤوس نوافذها. */
@media (max-width: 760px){
  /* v-tools-x-scroll (طلب المالك ٣ سبتمبر): أزرار X لصفحات الأدوات الكاملة
     (أنماط الصور، الفيديو، الديكور، الأزياء، ستايل، المقاولات، التفسير، البريد)
     أُخرجت من التثبيت — تبقى في رأس الصفحة وتتحرك معها. */
  #tvClose, #expCloseBtn,
  #docX, #govX, #cvX, #fbClose, #eduCloseBtn,
  #qClose{ /* v-tools-x-scroll: X شاشة الأدوات يتحرك مع الصفحة لا مثبّت (طلب المالك) — أُخرج من قائمة التثبيت */
    position:fixed !important;
    top:calc(10px + env(safe-area-inset-top, 0px)) !important;
    left:12px !important;
    right:auto !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    box-sizing:border-box !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:rgba(20,20,26,.85) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    color:#fff !important;
    font-size:16px !important;
    line-height:1 !important;
    z-index:10070 !important;
    box-shadow:0 2px 10px rgba(0,0,0,.4) !important;
  }
}

/* v-tools-fullpage (طلب المالك ٣ سبتمبر «خلهم صفحة كاملة»): نوافذ الأدوات
   كانت بطاقات عائمة فوق شاشة الأدوات — الآن كل أداة صفحة كاملة تملأ الشاشة
   (كما الأسهم والتعليم أصلًا). التلفزيون خارج هذا التعديل. */
#portraitStyleModal, #videoMakerModal, #designAiModal, #fashionAiModal,
#studioAiModal, #constructionModal, #religionModal, #emailAssistModal{
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  background:var(--panel,#141420) !important;
}
#portraitStyleModal > div, #videoMakerModal > div, #designAiModal > div, #fashionAiModal > div,
#studioAiModal > div, #constructionModal > div, #religionModal > div, #emailAssistModal > div{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  max-height:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)) !important;
}
/* v-tools-noscroll (طلب المالك: «شيل شريط السحب من الأدوات كامل في الكمبيوتر والهواتف»):
   بلا شريط سحب ظاهر في كل نوافذ الأدوات على كل المقاسات — التمرير يعمل كما هو. التلفزيون خارج هذا. */
#sectionsToolsPopup, #sectionsToolsPopup *, #portraitStyleModal *, #videoMakerModal *, #designAiModal *, #fashionAiModal *,
#studioAiModal *, #constructionModal *, #religionModal *, #emailAssistModal *, #eduHubModal *, #expModal *, .xm *,
#stocksModal *, #omranQiblaShell *, #fbOverlay *, #adStudioPage *, #docModal *, #govModal *, #cvModal *{scrollbar-width:none !important; -ms-overflow-style:none !important;}
#sectionsToolsPopup::-webkit-scrollbar, #sectionsToolsPopup *::-webkit-scrollbar, #portraitStyleModal *::-webkit-scrollbar, #videoMakerModal *::-webkit-scrollbar, #designAiModal *::-webkit-scrollbar, #fashionAiModal *::-webkit-scrollbar,
#studioAiModal *::-webkit-scrollbar, #constructionModal *::-webkit-scrollbar, #religionModal *::-webkit-scrollbar, #emailAssistModal *::-webkit-scrollbar, #eduHubModal *::-webkit-scrollbar, #expModal *::-webkit-scrollbar, .xm *::-webkit-scrollbar,
#stocksModal *::-webkit-scrollbar, #omranQiblaShell *::-webkit-scrollbar, #fbOverlay *::-webkit-scrollbar, #adStudioPage *::-webkit-scrollbar, #docModal *::-webkit-scrollbar, #govModal *::-webkit-scrollbar, #cvModal *::-webkit-scrollbar{width:0 !important; height:0 !important; display:none !important;}

/* v-vmk-static-cta (لقطة المالك: زر «إنشاء الفيديو» يتحرك ويغطي النص): كان لاصقًا أسفل النافذة — ثابت في مكانه */
#videoMakerModal #videoMakerGenerateBtn{position:static !important; box-shadow:none !important;}
/* v-stocks-x (لقطة المالك: ✕ الأسهم دائرة كبيرة تغطي الرسم): أُخرجت من التثبيت — تبقى في رأس الصفحة كبقية الأدوات */

/* v-cx-x (طلب المالك: «في المقاولات X وحدة معهم»): رأس المقاولات بلا توزيع فكانت ✕ ملاصقة للعنوان — الآن في الركن كبقية الأدوات */
#constructionModal .cx-head{justify-content:space-between !important;}
#constructionModal .cx-head #constructionCloseBtn{margin-inline-start:auto !important;}

/* v-tools-deskfull (طلب المالك ٤ سبتمبر «في الكمبيوتر كلها الشاشة كاملة نفس الهواتف»):
   على الكمبيوتر كان المحتوى محصورًا في ٩٠٠ بكسل وسط الشاشة — الآن يملأ العرض كله كالجوال. */
@media (min-width: 761px){
  #portraitStyleModal > div, #designAiModal > div, #fashionAiModal > div,
  #studioAiModal > div, #constructionModal > div, #religionModal > div, #emailAssistModal > div{
    /* v-tools-deskfit (شكوى المالك «كبرت الشاشة زيادة»): الخلفية شاشة كاملة، والمحتوى بعرض مريح 1100px في الوسط */
    padding-left:max(28px, calc((100vw - 1100px) / 2)) !important;
    padding-right:max(28px, calc((100vw - 1100px) / 2)) !important;
  }
  /* v-vmk-fit (لقطة المالك على التابلت: ✕ بجانب العنوان والنموذج بعرض صفر): صندوق صانع الفيديو هو
     شبكة الاستوديو نفسها، فالحشو الكبير كان يخنق أعمدتها — حشو ثابت وعرض أقصى 1100 في الوسط */
  #videoMakerModal > div{padding-left:28px !important; padding-right:28px !important; max-width:1100px !important; margin:0 auto !important;}
  #eduHubModal .eduWrap, #expModal .expWrap, .xm .xmWrap{max-width:1100px !important; margin-inline:auto !important;}
  #eduHubModal .eduWrap, #expModal .expWrap, .xm .xmWrap{border-inline:none !important;}
  /* نافذة الأدوات نفسها شاشة كاملة على الكمبيوتر (لقطة المالك: بطاقة وسط الشاشة بشريط سحب) */
  #sectionsToolsOverlay{align-items:stretch !important; padding:0 !important;}
  html[lang] body #sectionsToolsPopup{max-width:none !important; width:100% !important; height:100% !important; max-height:none !important; border:none !important; border-radius:0 !important; padding:18px max(28px, calc((100vw - 1180px) / 2)) 32px !important;}
  html[lang] body #sectionsToolsPopup .ptGrid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) !important; gap:12px !important;}
}
@media (max-width: 760px){
  #portraitStyleModal > div, #videoMakerModal > div, #designAiModal > div, #fashionAiModal > div,
  #studioAiModal > div, #constructionModal > div, #religionModal > div, #emailAssistModal > div{
    padding-top:calc(12px + env(safe-area-inset-top,0px)) !important;
  }
}

/* ═══ v-noscroll-all (أمر المالك ٤ سبتمبر: «أي شريط سحب احذفه — في كل الهواتف والكمبيوتر»):
   لا شريط سحب ظاهر في أي مكان في التطبيق على كل المقاسات. التمرير نفسه يعمل كما هو
   (عجلة الفأرة، اللمس، لوحة المفاتيح). ═══ */
html, body, *, *::before, *::after{scrollbar-width:none !important; -ms-overflow-style:none !important;}
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar{width:0 !important; height:0 !important; display:none !important; background:transparent !important;}
*::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track{display:none !important; background:transparent !important;}

/* v-no-slider (أمر المالك ٤ سبتمبر «احذف شريط السحب»): أشرطة مقارنة قبل/بعد في أدوات الصور كلها مخفية */
#designBARange, #portraitCompareSlider, #fashionAiSliderRange, #studioAiSliderRange, #designBALine, #fashionAiBeforeWrap, #studioAiBeforeWrap{display:none !important;}

/* v-noscroll-clip (لقطة المالك على التابلت: شريط تمرير رمادي على يسار نافذة الأدوات رغم قواعد الإخفاء —
   بعض أغلفة WebView ترسم الشريط بنفسها وتتجاهل CSS). الحيلة: الحاوية الأم تقصّ، والعنصر المتمرّر يمتدّ
   40px خارجها من جهة الشريط (اليسار في العربية، اليمين في اللاتينية) فيختفي الشريط خلف القصّ. */
html.mobile-ui #sectionsToolsOverlay, html.mobile-ui #portraitStyleModal, html.mobile-ui #designAiModal, html.mobile-ui #fashionAiModal, html.mobile-ui #studioAiModal, html.mobile-ui #constructionModal, html.mobile-ui #religionModal, html.mobile-ui #emailAssistModal, html.mobile-ui #stocksModal, html.mobile-ui .xm .xmWrap, html.mobile-ui #eduHubModal .eduWrap, html.mobile-ui #expModal .expWrap, html.mobile-ui #videoMakerModal, html.mobile-ui #chatcol{overflow:hidden !important;}
html.mobile-ui[dir="rtl"] #sectionsToolsPopup, html.mobile-ui[dir="rtl"] #portraitStyleModal > div, html.mobile-ui[dir="rtl"] #designAiModal > div, html.mobile-ui[dir="rtl"] #fashionAiModal > div, html.mobile-ui[dir="rtl"] #studioAiModal > div, html.mobile-ui[dir="rtl"] #constructionModal > div, html.mobile-ui[dir="rtl"] #religionModal > div, html.mobile-ui[dir="rtl"] #emailAssistModal > div, html.mobile-ui[dir="rtl"] #videoMakerModal > div, html.mobile-ui[dir="rtl"] #stocksPage, html.mobile-ui[dir="rtl"] .xm .xmBody, html.mobile-ui[dir="rtl"] #eduHubModal .eduBody, html.mobile-ui[dir="rtl"] #expModal .expBody, html.mobile-ui[dir="rtl"] #messages{margin-left:-40px !important; width:calc(100% + 40px) !important; max-width:none !important; box-sizing:border-box !important;}
html.mobile-ui[dir="ltr"] #sectionsToolsPopup, html.mobile-ui[dir="ltr"] #portraitStyleModal > div, html.mobile-ui[dir="ltr"] #designAiModal > div, html.mobile-ui[dir="ltr"] #fashionAiModal > div, html.mobile-ui[dir="ltr"] #studioAiModal > div, html.mobile-ui[dir="ltr"] #constructionModal > div, html.mobile-ui[dir="ltr"] #religionModal > div, html.mobile-ui[dir="ltr"] #emailAssistModal > div, html.mobile-ui[dir="ltr"] #videoMakerModal > div, html.mobile-ui[dir="ltr"] #stocksPage, html.mobile-ui[dir="ltr"] .xm .xmBody, html.mobile-ui[dir="ltr"] #eduHubModal .eduBody, html.mobile-ui[dir="ltr"] #expModal .expBody, html.mobile-ui[dir="ltr"] #messages{margin-right:-40px !important; width:calc(100% + 40px) !important; max-width:none !important; box-sizing:border-box !important;}
html.mobile-ui[dir="rtl"] #sectionsToolsPopup{padding-left:52px !important;}
html.mobile-ui[dir="ltr"] #sectionsToolsPopup{padding-right:52px !important;}
html.mobile-ui[dir="rtl"] #portraitStyleModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #portraitStyleModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #designAiModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #designAiModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #fashionAiModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #fashionAiModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #studioAiModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #studioAiModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #constructionModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #constructionModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #religionModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #religionModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #emailAssistModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #emailAssistModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #videoMakerModal > div{padding-left:66px !important;}
html.mobile-ui[dir="ltr"] #videoMakerModal > div{padding-right:66px !important;}
html.mobile-ui[dir="rtl"] #stocksPage{padding-left:54px !important;}
html.mobile-ui[dir="ltr"] #stocksPage{padding-right:54px !important;}
html.mobile-ui[dir="rtl"] .xm .xmBody{padding-left:56px !important;}
html.mobile-ui[dir="ltr"] .xm .xmBody{padding-right:56px !important;}
html.mobile-ui[dir="rtl"] #eduHubModal .eduBody{padding-left:56px !important;}
html.mobile-ui[dir="ltr"] #eduHubModal .eduBody{padding-right:56px !important;}
html.mobile-ui[dir="rtl"] #expModal .expBody{padding-left:56px !important;}
html.mobile-ui[dir="ltr"] #expModal .expBody{padding-right:56px !important;}
html.mobile-ui[dir="rtl"] #messages{padding-left:56px !important;}
html.mobile-ui[dir="ltr"] #messages{padding-right:56px !important;}

/* v-vmk-scroll (شكوى المالك «صانع الفيديو ما يتحرك»): صندوق صانع الفيديو هو المتمرّر على الجوال */
html.mobile-ui #videoMakerModal > div{overflow-y:auto !important; max-height:none !important;}
html.mobile-ui #videoMakerModal .vmk-main{max-height:none !important; overflow:visible !important;}

/* v-hl-yellow-mobile (طلب المالك: «الإنجليزي والروابط رجعت بيضاء» على الهاتف):
   تعريف --om-hl ووسم om-en والأكواد كان محصورًا داخل @media (min-width:861px)
   — سطح المكتب فقط — فيظهر أبيض على الجوّال. نعيدها هنا خارج أي ميديا لتعمل
   على كلّ العروض، مع لون احتياطيّ صريح. */
:root{ --om-hl:#e3b341; }
/* v-hl-links-only: الإنجليزي والأرقام بيضاء — الأصفر للروابط فقط (نمط <a>). */
.chat-codeblock pre, .chat-codeblock pre .tts-word{ color:var(--om-hl,#e3b341) !important; }
.tts-word.active{ background:var(--om-hl,#e3b341); color:#14161a; box-shadow:0 0 0 2px var(--om-hl,#e3b341); }