/*
 * **تنسيق دليل الفيديو** — في ملف مستقل لأنه يُستعمل في ثلاث مناطق:
 * صفحات الطالب (student.css)، ولوحة المحاضر (لا تحمّل student.css)، ولو احتاجته الإدارة.
 *
 * بلاغ المالكة: أزرار الشرح وصفحة دليل المحاضر ظهرت **بلا أي تنسيق** لأن
 * `student.css` لا تُحمَّل في `/instructor/`. فصار هذا الملف يُحمَّل في كل الصفحات.
 */

/* ═════════════ دليل الطالب بالفيديو ═════════════ */
/* الزر نصٌّ وأيقونة فقط: لا صورة ولا فيديو قبل الضغط، فلا تتأثر سرعة الصفحات. */

/* زر «شاهد الشرح»
 * يجلس داخل صفوف الصفحة (شارات، عناوين أقسام) فلا يبدو ملحقًا: أصغر من الأزرار
 * الرئيسية، بلا ظل ثقيل، ودائرة تشغيل صغيرة تدلّ أنه فيديو. والصيغة --sm للأماكن الضيقة. */
.hv-watch { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 2px 8px rgba(15, 27, 28, .05); cursor: pointer; font-family: inherit; vertical-align: middle; transition: box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.hv-watch:hover { border-color: var(--brand-200); background: var(--brand-50); box-shadow: 0 6px 16px rgba(15, 27, 28, .09); }
.hv-watch:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.hv-watch__play { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-700); color: #fff; display: grid; place-items: center; font-size: 9.5px; flex: 0 0 auto; transition: background .18s var(--ease), transform .18s var(--ease); }
.hv-watch:hover .hv-watch__play { background: var(--flame-500, #F26A2C); transform: scale(1.06); }
.hv-watch__txt { font-size: 13.5px; font-weight: 800; color: var(--ink-2, #334244); white-space: nowrap; }
.hv-watch__dur { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; padding-inline-start: 9px; border-inline-start: 1px solid var(--line-2); }
/* مصغّر: بجانب عنوان قسم أو داخل صف شارات */
.hv-watch--sm { gap: 7px; padding: 4px 11px 4px 4px; box-shadow: none; }
.hv-watch--sm .hv-watch__play { width: 21px; height: 21px; font-size: 8px; }
.hv-watch--sm .hv-watch__txt { font-size: 12.5px; font-weight: 800; }
.hv-watch--sm .hv-watch__dur { font-size: 11px; padding-inline-start: 7px; }
/* في بطاقة الدليل يبقى الزر بالحجم المعتاد وبارزًا قليلًا */
.hv-card .hv-watch { box-shadow: 0 4px 12px rgba(15, 27, 28, .07); }

/* شريحة فصل داخل بطاقة الدليل */
.hv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2, #F7FAFA); color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); }
.hv-chip:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-800); }
.hv-chip time { font-size: 11.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }

/* المشغّل */
.hv-dlg { border: 0; padding: 0; width: min(94vw, 430px); max-height: 94vh; border-radius: 28px; background: #101D1F; color: #fff; overflow: hidden; box-shadow: 0 40px 90px rgba(6, 16, 17, .55); }
.hv-dlg::backdrop { background: rgba(8, 18, 19, .76); -webkit-backdrop-filter:blur(4px);backdrop-filter: blur(4px); }
.hv-dlg__bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.hv-dlg__title { font-size: 15.5px; font-weight: 800; }
.hv-dlg__all { margin-inline-start: auto; font-size: 12.5px; font-weight: 800; color: #9ED3D4; text-decoration: none; }
.hv-dlg__all:hover { color: #fff; }
.hv-dlg__x { width: 36px; height: 36px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .18s var(--ease); }
.hv-dlg__x:hover { background: rgba(255, 255, 255, .2); }
.hv-dlg__stage { background: #000; aspect-ratio: 9 / 16; max-height: calc(94vh - 132px); }
.hv-dlg__stage video, .hv-dlg__stage iframe { width: 100%; height: 100%; display: block; border: 0; }
.hv-dlg__chaps { display: flex; gap: 8px; padding: 12px 14px 16px; overflow-x: auto; scrollbar-width: none; }
.hv-dlg__chaps::-webkit-scrollbar { display: none; }
.hv-dlg__chap { flex: 0 0 auto; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #DCEBEB; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.hv-dlg__chap:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.hv-dlg__chap.is-on { background: var(--flame-500, #F26A2C); border-color: transparent; color: #fff; }

/* صفحة الدليل */
.hv-page { padding: 26px 0 60px; }
.hv-head h1 { margin: 0 0 8px; font-size: 30px; font-weight: 900; }
.hv-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.hv-sec { margin-top: 32px; }
.hv-sec__title { margin: 0 0 14px; font-size: 19px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.hv-sec__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.hv-card { display: flex; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.hv-card:hover { border-color: var(--brand-200); box-shadow: 0 16px 34px rgba(15, 27, 28, .10); transform: translateY(-2px); }
.hv-card__media { position: relative; flex: 0 0 96px; width: 96px; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 16px; overflow: hidden; background: #0F1B1C; cursor: pointer; }
.hv-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s var(--ease), opacity .2s var(--ease); opacity: .95; }
.hv-card:hover .hv-card__media img { transform: scale(1.04); opacity: 1; }
.hv-card__play { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%; background: var(--flame-500, #F26A2C); color: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: 0 8px 18px rgba(15, 27, 28, .35); }
.hv-card__dur { position: absolute; bottom: 6px; inset-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 27, 28, .82); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hv-card__body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.hv-card__body h3 { margin: 0; font-size: 17px; font-weight: 900; }
.hv-card__body p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hv-chaps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.hv-help { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.hv-help b { display: block; font-size: 16px; font-weight: 900; }
.hv-help span { font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .hv-grid { grid-template-columns: 1fr; }
  .hv-card__media { flex-basis: 88px; width: 88px; }
  .hv-watch { padding: 7px 14px 7px 7px; }
  .hv-watch__txt { font-size: 13.5px; }
}

/* ── صفحة الدليل: الترويسة وصفحة الفيديو الواحد ── */
.hv-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 26px 28px; margin-bottom: 8px; border-radius: 26px; background: linear-gradient(135deg, var(--brand-900, #12393A), var(--brand-700, #1F5A5C)); color: #fff; }
.hv-hero h1 { margin: 0 0 8px; font-size: 29px; font-weight: 900; }
.hv-hero p { margin: 0; font-size: 15px; line-height: 1.8; color: #CFE6E6; max-width: 620px; }
.hv-stats { display: flex; gap: 12px; margin: 0; }
.hv-stats div { padding: 12px 20px; border-radius: 18px; background: rgba(255, 255, 255, .1); text-align: center; }
.hv-stats dt { font-size: 12.5px; font-weight: 700; color: #BCDCDC; }
.hv-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hv-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.hv-crumbs a { color: var(--brand-700); text-decoration: none; }
.hv-crumbs a:hover { text-decoration: underline; }
.hv-one { display: flex; gap: 26px; flex-wrap: wrap; padding: 22px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); }
.hv-one__media { position: relative; flex: 0 0 216px; width: 216px; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 22px; overflow: hidden; background: #0F1B1C; cursor: pointer; }
.hv-one__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hv-one__play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; background: var(--flame-500, #F26A2C); color: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: 0 12px 26px rgba(15, 27, 28, .4); transition: transform .2s var(--ease); }
.hv-one__media:hover .hv-one__play { transform: scale(1.08); }
.hv-one__dur { position: absolute; bottom: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(15, 27, 28, .82); color: #fff; font-size: 12px; font-weight: 800; }
.hv-one__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hv-one__eyebrow { align-self: flex-start; padding: 5px 14px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 12.5px; font-weight: 800; }
.hv-one__body h1 { margin: 0; font-size: 28px; font-weight: 900; }
.hv-one__body > p { margin: 0 0 4px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.hv-one__chaps { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.hv-one__chapsTitle { font-size: 13px; font-weight: 800; color: var(--muted); }
.hv-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2, #F7FAFA); font-family: inherit; cursor: pointer; text-align: start; transition: border-color .18s var(--ease), background .18s var(--ease); }
.hv-row:hover { border-color: var(--brand-400); background: var(--brand-50); }
.hv-row__n { width: 26px; height: 26px; border-radius: 9px; background: var(--brand-700); color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 900; flex: 0 0 auto; }
.hv-row__t { flex: 1; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.hv-row time { font-size: 12.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.hv-row i { font-size: 11px; color: var(--brand-700); }
.hv-card__body h3 a { color: inherit; text-decoration: none; }
.hv-card__body h3 a:hover { color: var(--brand-700); }
.hv-more { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.hv-card .hv-watch { align-self: flex-start; margin-top: 4px; }
.hv-one__body .hv-watch { align-self: flex-start; }
@media (max-width: 640px) { .hv-one__media { flex-basis: 100%; width: 100%; max-width: 260px; margin-inline: auto; } .hv-hero { padding: 22px; } .hv-stats { width: 100%; } .hv-stats div { flex: 1; } }

/* ═════════════ المساعد الذكي ═════════════ */
/* الهوية من متغيرات الموقع نفسها (components.css): --ic-brand / --ic-flame / --ic-ink. */
.as-root { position: fixed; right: 22px; left: auto; bottom: 22px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: inherit; }
.as-fab { width: 62px; height: 62px; border-radius: var(--ic-radius-pill, 999px); border: 0; cursor: pointer; background: linear-gradient(145deg, var(--ic-brand-700, #26706F), var(--ic-brand-800, #1F5A5C)); color: #fff; font-size: 24px; box-shadow: 0 14px 34px rgba(31, 90, 92, .34); position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.as-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 20px 44px rgba(31, 90, 92, .42); }
.as-fab:focus-visible { outline: 0; box-shadow: var(--ic-focus-ring, 0 0 0 3px rgba(61,167,169,.35)), 0 14px 34px rgba(31, 90, 92, .34); }
.as-fab__dot { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--ic-flame-500, #F25524); box-shadow: 0 0 0 3px rgba(242, 85, 36, .26); }
.as-root.is-open .as-fab__dot { display: none; }
.as-hello { position: relative; max-width: 280px; padding: 15px 18px 15px 22px; border-radius: var(--ic-radius-lg, 20px) var(--ic-radius-lg, 20px) 6px var(--ic-radius-lg, 20px); background: var(--ic-surface, #fff); box-shadow: 0 18px 44px rgba(17, 24, 39, .16); display: grid; gap: 3px; cursor: pointer; transform: translateY(10px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.as-hello.is-in { transform: none; opacity: 1; }
.as-hello b { font-size: 15.5px; font-weight: 800; color: var(--ic-ink-900, #111827); }
.as-hello span { font-size: 13.5px; color: var(--ic-ink-500, #6B7280); }
.as-hello__x { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ic-ink-100, #F3F4F6); color: var(--ic-ink-500, #6B7280); cursor: pointer; font-size: 11px; }

.as-panel { width: min(92vw, 372px); height: min(74vh, 580px); display: flex; flex-direction: column; border-radius: var(--ic-radius-lg, 20px); overflow: hidden; background: var(--ic-page, #F8FAFA); box-shadow: 0 30px 70px rgba(17, 24, 39, .28); border: 1px solid var(--ic-ink-300, #D1D5DB); }
.as-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: linear-gradient(145deg, var(--ic-brand-700, #26706F), var(--ic-brand-800, #1F5A5C)); color: #fff; }
.as-head__logo { width: 46px; height: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .92); border-radius: 10px; flex: 0 0 auto; }
.as-head__svg { width: 38px; height: auto; display: block; }
.as-head__txt { flex: 1; min-width: 0; }
.as-head__txt b { display: block; font-size: 15px; font-weight: 800; }
.as-head__txt small { font-size: 12px; color: var(--ic-brand-100, #D2EBEB); }
.as-head__back, .as-head__x { width: 34px; height: 34px; border-radius: 11px; border: 0; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; flex: 0 0 auto; }
.as-head__back:hover, .as-head__x:hover { background: rgba(255, 255, 255, .26); }

.as-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.as-greet b { display: block; font-size: 17px; font-weight: 800; color: var(--ic-ink-900, #111827); }
.as-greet p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ic-ink-500, #6B7280); }
.as-menu { display: grid; gap: 10px; }
.as-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); background: var(--ic-surface, #fff); cursor: pointer; font-family: inherit; text-align: start; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.as-opt:hover { border-color: var(--ic-brand-500, #3DA7A9); box-shadow: 0 8px 20px rgba(38, 112, 111, .1); transform: translateY(-1px); }
.as-opt:focus-visible { outline: 0; box-shadow: var(--ic-focus-ring, 0 0 0 3px rgba(61,167,169,.35)); }
.as-opt__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; flex: 0 0 auto; }
.as-opt__ic--brand { background: var(--ic-brand-50, #EAF5F5); color: var(--ic-brand-700, #26706F); }
.as-opt__ic--flame { background: var(--ic-flame-50, #FDEDE7); color: var(--ic-flame-500, #F25524); }
.as-opt__ic--soft { background: var(--ic-ink-100, #F3F4F6); color: var(--ic-ink-700, #374151); }
.as-opt__t { flex: 1; min-width: 0; }
.as-opt__t b { display: block; font-size: 15px; font-weight: 800; color: var(--ic-ink-900, #111827); }
.as-opt__t small { font-size: 12.5px; line-height: 1.6; color: var(--ic-ink-500, #6B7280); }
.as-opt__go { font-size: 12px; color: var(--ic-ink-300, #D1D5DB); }

.as-note { font-size: 13.5px; line-height: 1.75; color: var(--ic-ink-700, #374151); padding: 12px 14px; border-radius: var(--ic-radius, 12px); background: var(--ic-brand-50, #EAF5F5); }
.as-group { font-size: 12px; font-weight: 800; color: var(--ic-ink-500, #6B7280); padding-inline-start: 2px; }
.as-list { display: grid; gap: 8px; }
.as-item { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); background: var(--ic-surface, #fff); cursor: pointer; font-family: inherit; text-align: start; }
.as-item:hover { border-color: var(--ic-flame-500, #F25524); }
.as-item__play { width: 32px; height: 32px; border-radius: 50%; background: var(--ic-flame-500, #F25524); flex: 0 0 auto; position: relative; }
.as-item__play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-inline-start: 10px solid #fff; border-block: 6px solid transparent; }
.as-item__t { flex: 1; min-width: 0; }
.as-item__t b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ic-ink-900, #111827); }
.as-item__t small { font-size: 12px; line-height: 1.55; color: var(--ic-ink-500, #6B7280); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.as-item__dur { font-size: 12px; font-weight: 800; color: var(--ic-ink-500, #6B7280); font-variant-numeric: tabular-nums; }
.as-link { align-self: flex-start; font-size: 13px; font-weight: 800; color: var(--ic-brand-700, #26706F); text-decoration: none; }
.as-link:hover { text-decoration: underline; }

.as-msg { max-width: 92%; padding: 11px 14px; border-radius: var(--ic-radius, 12px); font-size: 14.5px; line-height: 1.7; }
.as-msg--bot { background: var(--ic-surface, #fff); color: var(--ic-ink-700, #374151); border: 1px solid var(--ic-ink-300, #D1D5DB); border-start-start-radius: 4px; }
.as-msg--me { align-self: flex-start; background: var(--ic-brand-700, #26706F); color: #fff; border-end-end-radius: 4px; }
.as-typing { display: inline-flex; gap: 5px; }
.as-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ic-brand-200, #9ED3D4); display: block; animation: asBlink 1s infinite; }
.as-typing i:nth-child(2) { animation-delay: .15s; } .as-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes asBlink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chip { padding: 8px 14px; border-radius: var(--ic-radius-pill, 999px); border: 1px solid var(--ic-brand-200, #9ED3D4); background: var(--ic-surface, #fff); color: var(--ic-brand-700, #26706F); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none; }
.as-chip:hover { background: var(--ic-brand-50, #EAF5F5); }
.as-course { display: grid; gap: 6px; padding: 14px; border-radius: var(--ic-radius, 12px); background: var(--ic-surface, #fff); border: 1px solid var(--ic-ink-300, #D1D5DB); text-decoration: none; color: inherit; }
.as-course:hover { border-color: var(--ic-brand-500, #3DA7A9); }
.as-course__t b { display: block; font-size: 16px; font-weight: 800; color: var(--ic-ink-900, #111827); }
.as-course__t small { font-size: 12.5px; color: var(--ic-ink-500, #6B7280); }
.as-course__r { display: flex; align-items: center; justify-content: space-between; }
.as-course__price { font-size: 15px; font-weight: 800; color: var(--ic-brand-800, #1F5A5C); }
.as-course__cta { padding: 7px 14px; border-radius: var(--ic-radius-pill, 999px); background: var(--ic-flame-500, #F25524); color: #fff; font-size: 12.5px; font-weight: 800; }
/* زر واتساب مضغوط: سطر واحد، والرقم بعده بخط أرقّ — لا كتلة عريضة. */
.as-wa { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; justify-self: start;   /* داخل شبكة البطاقة: بلا justify-self يتمدد الزر بعرض البطاقة */ max-width: 100%; padding: 8px 14px; border-radius: var(--ic-radius-pill, 999px); background: #25D366; color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(37, 211, 102, .25); }
.as-wa i { font-size: 15px; }
.as-wa:hover { background: #1FB457; }

.as-form { display: flex; gap: 8px; padding: 12px 14px; background: var(--ic-surface, #fff); border-top: 1px solid var(--ic-ink-300, #D1D5DB); }
.as-input { flex: 1; min-height: 46px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); padding: 0 14px; font-family: inherit; font-size: 14.5px; background: var(--ic-page, #F8FAFA); }
.as-input:focus { outline: 0; border-color: var(--ic-brand-500, #3DA7A9); box-shadow: var(--ic-focus-ring, 0 0 0 3px rgba(61,167,169,.35)); }
.as-send { width: 46px; min-height: 46px; border-radius: var(--ic-radius, 12px); border: 0; background: var(--ic-brand-700, #26706F); color: #fff; cursor: pointer; font-size: 15px; }
.as-send:hover { background: var(--ic-flame-500, #F25524); }
.as-foot { padding: 10px 14px 13px; background: var(--ic-surface, #fff); text-align: center; }
.as-foot a { font-size: 13px; font-weight: 800; color: var(--ic-brand-700, #26706F); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.as-foot a:hover { color: var(--ic-flame-500, #F25524); }
@media (max-width: 640px) {
  .as-root { right: 14px; left: auto; bottom: 14px; }
  .as-fab { width: 56px; height: 56px; font-size: 21px; }
  .as-panel { height: min(80vh, 580px); }
}

/* ═════════════ دعوة مجتمع طلاب الجامعة ═════════════ */
/*
 * **دعوة المجتمع تنزل من «؟»** (طلب المالكة): بطاقة معلّقة تحت زر «؟» بسهم يشير إليه،
 * فيعرف الطالب من أول مرة أين يجد القروب لاحقًا. عند «لاحقًا» تنكمش عائدة إلى «؟».
 * الموضع (--cm-top · --cm-left · --cm-arrow) يحسبه community_invite.php من مكان الزر.
 */
.cm-invite { position: fixed; top: var(--cm-top, 84px); left: var(--cm-left, 12px); bottom: auto; right: auto; z-index: 880; width: min(calc(100vw - 24px), 390px); display: flex; gap: 14px; padding: 18px 18px 16px 16px; border-radius: 22px; background: #fff; box-shadow: 0 24px 56px rgba(11, 36, 38, .22), 0 2px 6px rgba(11, 36, 38, .06); border: 1px solid #E4EDED; transform-origin: var(--cm-arrow, 40px) -10px; transform: translateY(-10px) scale(.94); opacity: 0; transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .26s ease; }
.cm-invite::before { content: ""; position: absolute; top: -8px; left: calc(var(--cm-arrow, 40px) - 8px); width: 16px; height: 16px; background: #fff; border-top: 1px solid #E4EDED; border-left: 1px solid #E4EDED; border-radius: 4px 0 0 0; transform: rotate(45deg); }
.cm-invite.is-in { transform: none; opacity: 1; }
.cm-invite__body > b { padding-left: 26px; }   /* مكان زر الإغلاق (يسار البطاقة) */
/* العودة إلى «؟»: تنكمش نحو السهم */
.cm-invite.is-out { transform: translateY(-14px) scale(.15); opacity: 0; transition: transform .32s cubic-bezier(.5,0,.75,0), opacity .3s ease; }
/* «؟» يومض مرة ويعرض تلميحًا قصيرًا بعد إغلاق الدعوة */
.ic-help.cm-hint .ic-help__btn { animation: cmPing 1.1s ease-out 2; }
@keyframes cmPing { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 100% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } }
.cm-tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 70; white-space: nowrap; padding: 7px 12px; border-radius: 10px; background: #173F40; color: #fff; font-size: 12.5px; font-weight: 800; pointer-events: none; animation: cmTip 3.2s ease forwards; }
.cm-tip::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: #173F40; transform: rotate(45deg); border-radius: 2px; }
@keyframes cmTip { 0% { opacity: 0; transform: translate(-50%, -4px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cm-invite, .cm-invite.is-out { transition: opacity .2s ease; transform: none; } .ic-help.cm-hint .ic-help__btn, .cm-tip { animation: none; } }
.cm-invite__badge { width: 46px; height: 46px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
.cm-invite__body { min-width: 0; display: grid; gap: 6px; }
.cm-invite__body b { font-size: 16px; font-weight: 900; color: #0F1B1C; line-height: 1.5; }
.cm-invite__body p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #5A6B6C; }
.cm-invite__note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #FFF7ED; color: #9A3B10 !important; font-weight: 700; }
.cm-invite__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cm-invite__go { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: #25D366; color: #fff; font-size: 14px; font-weight: 900; text-decoration: none; }
.cm-invite__go:hover { background: #1FB457; }
.cm-invite__later, .cm-invite__never { border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 800; color: #5A6B6C; cursor: pointer; padding: 8px 6px; }
.cm-invite__later:hover, .cm-invite__never:hover { color: #1F5A5C; text-decoration: underline; }
.cm-invite__x { position: absolute; top: 10px; right: auto; left: 10px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #F1F5F5; color: #5A6B6C; cursor: pointer; font-size: 12px; }
@media (max-width: 640px) { .cm-invite { left: 12px; width: calc(100vw - 24px); } .cm-invite__row { gap: 4px; } }

/* بند «قروب جامعتك» في قائمة الطالب: دائم، ويتمايز بلون واتساب */
.ic-menu__wa { display: grid !important; gap: 2px; }
.ic-menu__wa i { color: #25D366; }
.ic-menu__wa small { font-size: 11.5px; font-weight: 700; color: var(--muted, #66777A); padding-inline-start: 26px; }

/* ── المشغّل على اللابتوب: الفيديو والفصول جنبًا إلى جنب (الهاتف كما هو) ── */
@media (min-width: 900px) and (min-height: 620px) {
  .hv-dlg { width: min(94vw, 780px); max-height: 92vh; }
  .hv-dlg__bar { padding: 18px 22px; }
  .hv-dlg__title { font-size: 17px; }
  .hv-dlg__wrap { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0; align-items: stretch; }
  .hv-dlg__stage { aspect-ratio: 9 / 16; max-height: calc(92vh - 96px); background: #000; }
  .hv-dlg__chaps { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; overflow-y: auto; border-inline-start: 1px solid rgba(255, 255, 255, .08); }
  .hv-dlg__chap { width: 100%; text-align: start; padding: 14px 18px; font-size: 14px; }
}

/* أيقونة البوت في ترويسة المساعد، وبطاقة جواب السياسات */
.as-head__bot { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
.as-answer { padding: 14px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); background: var(--ic-surface, #fff); display: grid; gap: 6px; }
.as-answer b { font-size: 15px; font-weight: 800; color: var(--ic-ink-900, #111827); }
.as-answer p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ic-ink-700, #374151); }
.as-answer__link { justify-self: start; font-size: 13px; font-weight: 800; color: var(--ic-brand-700, #26706F); text-decoration: none; }
.as-answer__link:hover { text-decoration: underline; }

/* ── رسائل المساعد: أيقونة لكل طرف، ورقم من اليسار لليمين، وبطاقة مادة أوضح ── */
.as-row { display: flex; align-items: flex-end; gap: 8px; }
.as-row--me { flex-direction: row-reverse; justify-content: flex-start; }
.as-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; }
.as-av--bot { background: var(--ic-brand-50, #EAF5F5); color: var(--ic-brand-700, #26706F); }
.as-av--me { background: var(--ic-flame-50, #FDEDE7); color: var(--ic-flame-500, #F25524); }
.as-row .as-msg { max-width: calc(100% - 44px); }
.as-wa { flex-wrap: nowrap; }
.as-wa__num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; opacity: .92; padding-inline-start: 8px; border-inline-start: 1px solid rgba(255, 255, 255, .45); }
.as-course__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-course__kind { padding: 3px 10px; border-radius: var(--ic-radius-pill, 999px); background: var(--ic-brand-50, #EAF5F5); color: var(--ic-brand-700, #26706F); font-size: 11.5px; font-weight: 800; }
.as-course__terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.as-term { padding: 4px 10px; border-radius: var(--ic-radius-pill, 999px); background: var(--ic-ink-100, #F3F4F6); color: var(--ic-ink-700, #374151); font-size: 11.5px; font-weight: 700; }

/* ── الهاتف: الزر ثابت في مكانه، وفقاعة الترحيب تفتح من الجهة الأخرى فلا تُقصّ ── */
@media (max-width: 640px) {
  .as-root { right: 14px; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; pointer-events: none; }
  .as-root > * { pointer-events: auto; }
  .as-fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .as-hello { position: fixed; right: 82px; left: 14px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); max-width: none; border-radius: 20px 20px 20px 6px; }
  .as-hello__x { left: auto; right: 8px; }
  .as-panel { position: fixed; inset: auto 12px calc(84px + env(safe-area-inset-bottom, 0px)) 12px; width: auto; height: min(70vh, 520px); }
}

/* الروبوت في الزر: حجم أوضح قليلًا ليُقرأ كبوت من النظرة الأولى */
.as-fab i { font-size: 25px; }
@media (max-width: 640px) { .as-fab i { font-size: 22px; } }

/* ═════════════ التحقق بخطوتين (لوحة الإدارة) ═════════════ */
.tf-wrap { min-height: 72vh; display: grid; place-items: center; padding: 40px 16px; }
.tf-card { width: min(100%, 460px); padding: 34px 30px 26px; border-radius: var(--ic-radius-lg, 20px); background: var(--ic-surface, #fff); border: 1px solid var(--ic-ink-300, #D1D5DB); box-shadow: 0 24px 60px rgba(17, 24, 39, .12); text-align: center; }
.tf-shield { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; background: var(--ic-brand-50, #EAF5F5); color: var(--ic-brand-700, #26706F); }
.tf-card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 900; color: var(--ic-ink-900, #111827); }
.tf-lead { margin: 0 0 20px; font-size: 14.5px; line-height: 1.85; color: var(--ic-ink-500, #6B7280); }
.tf-lead b { color: var(--ic-ink-900, #111827); direction: ltr; unicode-bidi: isolate; }
.tf-msg { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--ic-radius, 12px); font-size: 13.5px; font-weight: 700; text-align: start; }
.tf-msg--bad { background: #FEF2F2; color: #B42318; }
.tf-msg--ok { background: #ECFDF5; color: #067647; }
.tf-form { display: grid; gap: 16px; }
.tf-code { width: 100%; height: 66px; text-align: center; font: 900 30px/1 Inter, system-ui, sans-serif; letter-spacing: 12px; direction: ltr; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); background: var(--ic-page, #F8FAFA); color: var(--ic-ink-900, #111827); }
.tf-code:focus { outline: 0; border-color: var(--ic-brand-500, #3DA7A9); box-shadow: var(--ic-focus-ring, 0 0 0 3px rgba(61,167,169,.35)); }
.tf-trust { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--ic-ink-700, #374151); text-align: start; cursor: pointer; }
.tf-trust input { width: 18px; height: 18px; accent-color: var(--ic-brand-700, #26706F); }
.tf-submit { justify-content: center; min-height: 50px; font-size: 15.5px; }
.tf-foot { display: grid; gap: 8px; margin-top: 18px; }
.tf-inline { margin: 0; }
.tf-link { border: 0; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--ic-brand-700, #26706F); cursor: pointer; }
.tf-link:hover { text-decoration: underline; }
.tf-link--muted { color: var(--ic-ink-500, #6B7280); font-weight: 700; }
.tf-note { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 0; padding: 12px 14px; border-radius: var(--ic-radius, 12px); background: var(--ic-ink-100, #F3F4F6); font-size: 12.5px; line-height: 1.75; color: var(--ic-ink-700, #374151); text-align: start; }

/* بطاقة تثبيت التطبيق تشغل أسفل الشاشة: يرتفع زر المساعد فلا يتغطّى (دعوة المجتمع صارت في الأعلى). */
body.ia-install-open .as-root { bottom: 122px; }
@media (max-width: 640px) {
  body.ia-install-open .as-root { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  body.ia-install-open .as-fab { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  body.ia-install-open .as-hello { bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
}

/* ═════════════ المعلّم الذكي (لوحة الطالب) ═════════════ */
.ait { margin: 0 0 18px; border-radius: var(--ic-radius-lg, 20px); overflow: hidden; background: var(--ic-surface, #fff); border: 1px solid var(--ic-ink-300, #D1D5DB); box-shadow: 0 14px 36px rgba(17, 24, 39, .08); }
.ait__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(145deg, var(--ic-brand-700, #26706F), var(--ic-brand-800, #1F5A5C)); color: #fff; }
.ait__bot { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
.ait__ttl { flex: 1; min-width: 0; }
.ait__ttl b { display: block; font-size: 16px; font-weight: 800; }
.ait__ttl small { font-size: 12.5px; color: var(--ic-brand-100, #D2EBEB); }
.ait__quota { font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, .16); padding: 8px 14px; border-radius: var(--ic-radius-pill, 999px); white-space: nowrap; }
.ait__body { padding: 18px; display: grid; gap: 12px; background: var(--ic-page, #F8FAFA); max-height: 460px; overflow-y: auto; }
.ait__hint { font-size: 13.5px; line-height: 1.8; color: var(--ic-ink-700, #374151); background: var(--ic-brand-50, #EAF5F5); border-radius: var(--ic-radius, 12px); padding: 12px 14px; }
.ait__me { justify-self: start; max-width: 82%; background: var(--ic-brand-700, #26706F); color: #fff; padding: 12px 16px; border-radius: 14px 14px 4px 14px; font-size: 14.5px; line-height: 1.7; }
.ait__ans { background: #fff; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); padding: 16px; }
.ait__ans p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.9; color: var(--ic-ink-700, #374151); }
.ait__src { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 900; padding: 6px 13px; border-radius: 999px; margin-bottom: 10px; }
.ait__src.is-in { background: #E7F6EC; color: #12703F; border: 1px solid #BCE6CC; }
.ait__src.is-out { background: #FFF4E5; color: #9A5B00; border: 1px solid #FFD9A0; }
.ait__ref { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--ic-brand-700, #26706F); background: var(--ic-brand-50, #EAF5F5); border: 1px solid var(--ic-brand-200, #9ED3D4); border-radius: 999px; padding: 7px 13px; margin: 4px 4px 0 0; }
.ait__ask { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; background: var(--ic-flame-500, #F25524); color: #fff; font-size: 12.5px; font-weight: 900; border-radius: 999px; padding: 9px 16px; }
.ait__wait, .ait__err { font-size: 13.5px; color: var(--ic-ink-500, #6B7280); }
.ait__err { color: #B42318; }
.ait__foot { display: flex; gap: 10px; padding: 14px 18px; background: #fff; border-top: 1px solid var(--ic-ink-300, #D1D5DB); }
.ait__in { flex: 1; min-height: 46px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); background: var(--ic-page, #F8FAFA); padding: 0 14px; font-family: inherit; font-size: 14.5px; }
.ait__in:focus { outline: 0; border-color: var(--ic-brand-500, #3DA7A9); box-shadow: var(--ic-focus-ring, 0 0 0 3px rgba(61,167,169,.35)); }
.ait__send { width: 46px; min-height: 46px; border: 0; border-radius: var(--ic-radius, 12px); background: var(--ic-brand-700, #26706F); color: #fff; cursor: pointer; }
/* نفاد الرصيد والباقات */
.ait__lock { padding: 30px 22px; text-align: center; background: var(--ic-page, #F8FAFA); }
.ait__lockico { width: 72px; height: 72px; border-radius: 50%; background: var(--ic-flame-50, #FDEDE7); color: var(--ic-flame-500, #F25524); display: grid; place-items: center; font-size: 27px; margin: 0 auto 14px; }
.ait__lock b { display: block; font-size: 20px; font-weight: 900; color: var(--ic-ink-900, #111827); }
.ait__lock p { margin: 6px 0 18px; font-size: 14px; color: var(--ic-ink-500, #6B7280); }
.ait__packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ait__pack { position: relative; background: #fff; border: 2px solid var(--ic-ink-300, #D1D5DB); border-radius: 16px; padding: 18px 14px; margin: 0; }
.ait__pack.is-best { border-color: var(--ic-flame-500, #F25524); box-shadow: 0 12px 30px rgba(242, 85, 36, .14); }
.ait__best { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ic-flame-500, #F25524); color: #fff; font-size: 11px; font-weight: 900; padding: 5px 14px; border-radius: 999px; }
.ait__pack b { display: block; font-size: 16px; font-weight: 900; color: var(--ic-ink-900, #111827); }
.ait__price { display: block; font-size: 24px; font-weight: 900; color: var(--ic-brand-800, #1F5A5C); margin: 6px 0; }
.ait__pack small { display: block; font-size: 12.5px; color: var(--ic-ink-500, #6B7280); min-height: 32px; }
.ait__buy { margin-top: 10px; width: 100%; border: 0; border-radius: 999px; padding: 11px; font-family: inherit; font-size: 14px; font-weight: 900; color: #fff; background: var(--ic-brand-700, #26706F); cursor: pointer; }
.ait__pack.is-best .ait__buy { background: var(--ic-flame-500, #F25524); }
.ait__note { margin-top: 12px; font-size: 12px; color: var(--ic-ink-500, #6B7280); }

/* ═══════════════════════════════════════════════════════════════════
 *  الهاتف: موازاة زر المساعد لزر واتساب (بلاغ المالكة بثلاث لقطات)
 *
 *  صفحة الدورة فيها شريط شراء ثابت أسفل الشاشة (.cp-mbar)، وزر واتساب
 *  يرتفع فوقه تلقائيًّا إلى 86px، أما زر المساعد فكان يبقى في الأسفل
 *  فيغطّي السعر و«اشترك الآن». فصارا متوازيين: نفس المقاس ونفس الارتفاع،
 *  ويرتفعان معًا. ومعها: فقاعة الترحيب أضيق فلا تغطّي البطاقات، ومساحة
 *  أسفل المحتوى تكفي الزرّين. تنسيق خالص بلا جافاسكربت.
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ١) نفس مقاس زر واتساب (48px) ونفس ارتفاعه (16px) */
  .as-fab {
    width: 48px !important;
    height: 48px !important;
    right: 14px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .as-fab i { font-size: 21px !important; }

  /* ٢) فقاعة الترحيب أضيق وملتصقة بالزر */
  .as-hello {
    right: 70px !important;
    left: auto !important;
    max-width: min(58vw, 225px) !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px 14px 12px 18px !important;
    border-radius: 18px 18px 6px 18px !important;
  }
  .as-hello b { font-size: 14px !important; }
  .as-hello span { font-size: 12.5px !important; }
  /* زر الإغلاق في الطرف الأيسر (نهاية السطر) لا فوق «مرحبًا» في بدايته */
  .as-hello__x { width: 22px !important; height: 22px !important; font-size: 10px !important; right: auto !important; left: 8px !important; top: 8px !important; }
  .as-hello { padding-left: 36px !important; }

  /* ٣) صفحة الدورة: فوق شريط الشراء تمامًا كزر واتساب */
  body:has(.cp-mbar) .as-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.cp-mbar) .as-hello { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.cp-mbar) .as-panel { bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important; }
  /* (دعوة المجتمع صارت تنزل من «؟» في الأعلى، فلا ترتفع مع الشريط) */

  /* ٤) مساحة أسفل المحتوى حتى لا يغطّي الزران آخر سطر */
  main { padding-bottom: 88px !important; }
  body:has(.cp-mbar) main { padding-bottom: 150px !important; }

  /* ٥) وحين تظهر بطاقة التثبيت يرتفع الزر فوقها (مع مقاسه الجديد) */
  body.ia-install-open .as-fab { bottom: calc(196px + env(safe-area-inset-bottom, 0px)) !important; }
  body.ia-install-open .as-hello { bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important; }

  /*
   * والأهم: نفس الإزاحة **بلا اعتماد على جافاسكربت**. الصنف أعلاه يضيفه السكربت،
   * وقد لا يُضاف في كل الحالات فيغطّي الزر بطاقة «ثبّت التطبيق». و:has تكشف ظهور
   * البطاقة من الصفحة نفسها (تُزال منها hidden عند العرض).
   */
  body:has(.ic-install:not([hidden])) .as-fab { bottom: calc(196px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.ic-install:not([hidden])) .as-hello { bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.ic-install:not([hidden])) .as-root { bottom: calc(196px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* وعلى الشاشات الأكبر كذلك */
body:has(.ic-install:not([hidden])) .as-root { bottom: 122px; }
/* والبطاقة فوق الزر دائمًا مهما كان الترتيب */
.ic-install { z-index: 940 !important; }

/* ═══════════════════════════════════════════════════════════════════
 *  مشغّل الدرس: «اسأل معلمك» والمساعد في شريط واحد (بلاغ المالكة بلقطة)
 *
 *  كان الزران في الركن نفسه فيركب أحدهما الآخر. الآن: المساعد في الركن كما
 *  في كل الصفحات، و«اسأل معلمك» بجانبه مباشرة بنفس الارتفاع ونفس خط المنتصف،
 *  فيبدوان شريطًا واحدًا مرتّبًا. فقاعة ترحيب المساعد ترتفع فوقهما على الهاتف.
 *  تنسيق خالص: يُطبَّق فقط حين يوجد الزران معًا.
 * ═══════════════════════════════════════════════════════════════════ */
html body:has(.as-fab) .qa-launch {
  inset-inline-start: 96px;            /* 22 (الركن) + 62 (المساعد) + 12 (فراغ) */
  inset-inline-end: auto;
  bottom: 22px;
  min-height: 62px;
  box-sizing: border-box;
  padding-block: 8px;
}
html body:has(.as-fab) .qa-launch__avatar .ic-avatar { width: 42px; height: 42px; }
@media (max-width: 640px) {
  html body:has(.as-fab) .qa-launch {
    inset-inline-start: 72px;          /* 14 + 48 + 10 */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    min-height: 48px;
    padding: 5px 12px 5px 6px;
    gap: 8px;
  }
  html body:has(.as-fab) .qa-launch__avatar .ic-avatar { width: 36px; height: 36px; font-size: 14px; }
  html body:has(.as-fab) .qa-launch__icon { display: none; }
  html body:has(.as-fab) .qa-launch__text b { font-size: 13px; }
  html body:has(.as-fab) .qa-launch__text small { font-size: 11px; }
  /* فقاعة الترحيب فوق الشريط لا عليه */
  body:has(.qa-launch) .as-hello { right: 14px !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 18px 18px 6px 18px !important; }
  body:has(.qa-launch) main { padding-bottom: 96px !important; }
}
/* عند فتح نافذة المساعد يتنحّى «اسأل معلمك» حتى لا تتزاحم النافذتان */
body:has(.as-root.is-open) .qa-launch { opacity: 0; pointer-events: none; transform: translateY(8px); }
.qa-launch { transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
/* الفقاعة والنافذة المخفيتان لا تشغلان مكانًا (display: grid كان يتغلّب على hidden
   فيبقى صندوق شفاف فوق الزر يلتقط النقرات ويزيحه عن الركن). */
.as-hello[hidden], .as-panel[hidden] { display: none !important; }
/* في اتجاه RTL تعني flex-end «اليسار»: فكان الزر يقفز من الركن حين تظهر فقاعة الترحيب.
   flex-start = يمين الصفحة، فيبقى الزر والفقاعة والنافذة ملتصقة بالركن. */
@media (min-width: 641px) { [dir="rtl"] .as-root { align-items: flex-start; } }
/* نافذة المساعد تفتح **فوق** زرّه، والزر يبقى في الركن ليغلقها (كان الزر يُدفع فوق
   النافذة حتى يلامس رأس الصفحة — لقطة المالكة). والارتفاع يراعي الشاشات القصيرة. */
@media (min-width: 641px) {
  .as-root > .as-hello { order: -2; }
  .as-root > .as-panel { order: -1; height: min(calc(100vh - 150px), 580px); }
}
.as-answer__site { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; }
.as-answer__site i { font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════
 *  المعلّم الذكي: زر في أعلى المشغّل + نافذة جانبية (طلب المالكة)
 *  كان لوحةً داخل الصفحة لا تُرى إلا بالنزول. الآن زر واضح في الشريط العلوي
 *  بجانب اسم الدورة، ونافذة تنزلق من اليمين فوق الصفحة (من الأسفل على الهاتف)
 *  فيسأل الطالب وهو يرى الفيديو.
 * ═══════════════════════════════════════════════════════════════════ */
.ait-open { display: inline-flex; align-items: center; gap: 10px; margin-inline-start: auto; padding: 7px 16px 7px 8px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; color: #fff; background: linear-gradient(135deg, var(--ic-brand-600, #2F8E90), var(--ic-brand-800, #1F5A5C)); box-shadow: 0 10px 24px rgba(31, 90, 92, .28); transition: transform .18s ease, box-shadow .18s ease; }
.ait-open:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(31, 90, 92, .34); }
.ait-open:focus-visible { outline: 3px solid var(--ic-brand-200, #9ED3D4); outline-offset: 2px; }
.ait-open__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 16px; }
.ait-open__txt { display: grid; text-align: start; line-height: 1.3; }
.ait-open__txt b { font-size: 14px; font-weight: 900; }
.ait-open__txt small { font-size: 11.5px; color: var(--ic-brand-100, #D3ECEC); }
.ait-open[aria-expanded="true"] { background: var(--ic-brand-900, #173F40); }
.ait-open.is-new .ait-open__ico { animation: aitPing 1.6s ease-out 3; }
@keyframes aitPing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
.ait-open.is-float { position: fixed; top: 96px; right: 18px; z-index: 890; }

/* النافذة */
.ait { position: fixed; z-index: 950; top: 86px; bottom: 18px; right: 18px; width: min(430px, calc(100vw - 36px)); margin: 0; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(17, 24, 39, .28); transform: translateX(calc(100% + 40px)); visibility: hidden; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s; }
.ait.is-open { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.ait .ait__body { flex: 1; max-height: none; min-height: 0; align-content: start; }
.ait .ait__lock { flex: 1; overflow-y: auto; }
.ait__close { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; font-size: 15px; }
.ait__close:hover { background: rgba(255, 255, 255, .26); }
.ait-backdrop { position: fixed; inset: 0; z-index: 945; background: rgba(11, 36, 38, .32); }
@media (min-width: 900px) { .ait-backdrop { display: none; } }   /* على الكمبيوتر: الفيديو يبقى ظاهرًا وقابلًا للتشغيل */

@media (max-width: 899px) {
  .ait { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: min(86vh, 720px); border-radius: 22px 22px 0 0; transform: translateY(105%); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ait-open { padding: 6px 12px 6px 6px; }
  .ait-open__ico { width: 32px; height: 32px; font-size: 14px; }
  .ait-open__txt small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ait, .ait.is-open { transition: none; } .ait-open.is-new .ait-open__ico { animation: none; } }
body.ait-is-open .qa-launch { opacity: 0; pointer-events: none; }
/* صورة السؤال: زر الكاميرا ومعاينة قبل الإرسال وصورة مصغّرة في فقاعة الطالب */
.ait__attach { flex: 0 0 auto; width: 46px; min-height: 46px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: var(--ic-radius, 12px); background: #fff; color: var(--ic-brand-700, #26706F); cursor: pointer; font-size: 17px; }
.ait__attach:hover { background: var(--ic-brand-50, #EAF5F5); border-color: var(--ic-brand-200, #9ED3D4); }
.ait__preview { display: flex; align-items: center; gap: 10px; padding: 10px 18px 12px; background: #fff; border-top: 1px dashed var(--ic-ink-300, #D1D5DB); font-size: 12.5px; color: var(--ic-ink-500, #6B7280); }
.ait__preview[hidden] { display: none; }
.ait__preview img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ic-ink-300, #D1D5DB); }
.ait__preview span { flex: 1; }
.ait__preview button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--ic-ink-100, #F3F4F6); color: var(--ic-ink-500, #6B7280); cursor: pointer; }
.ait .ait__foot { order: 3; }
.ait .ait__preview { order: 2; }
.ait__thumb { display: block; max-width: 220px; max-height: 180px; border-radius: 10px; margin-bottom: 8px; object-fit: contain; background: rgba(255, 255, 255, .12); }
/* شرح المعلّم الذكي المنظّم */
.ait__txt p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.9; color: var(--ic-ink-700, #374151); }
.ait__sec { margin-top: 12px; }
.ait__h { display: block; font-size: 13px; font-weight: 900; color: var(--ic-brand-800, #1F5A5C); margin-bottom: 6px; }
.ait__h::before { margin-inline-end: 6px; }
.ait__sec--idea .ait__h::before { content: "💡"; }
.ait__sec--steps .ait__h::before { content: "🧮"; }
.ait__sec--final { background: #E7F6EC; border: 1px solid #BCE6CC; border-radius: 12px; padding: 10px 12px; }
.ait__sec--final .ait__h { color: #12703F; }
.ait__sec--final .ait__h::before { content: "✅"; }
.ait__sec--final p { color: #0F5132; font-weight: 800; }
.ait__sec--warn { background: #FFF8EC; border-radius: 12px; padding: 10px 12px; }
.ait__sec--warn .ait__h { color: #9A5B00; }
.ait__sec--warn .ait__h::before { content: "⚠️"; }
.ait__step { padding-inline-start: 4px; }
/* أدوات الإجابة واقتراحات المتابعة */
.ait__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ic-ink-100, #F3F4F6); }
.ait__tool { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: 999px; background: #fff; color: var(--ic-ink-500, #6B7280); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.ait__tool:hover { color: var(--ic-brand-700, #26706F); border-color: var(--ic-brand-200, #9ED3D4); }
.ait__rate.is-on { background: var(--ic-brand-50, #EAF5F5); color: var(--ic-brand-700, #26706F); border-color: var(--ic-brand-400, #5DB9BB); }
.ait__thanks { font-size: 12px; color: var(--ic-ink-500, #6B7280); }
.ait__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ait__chip { border: 1px dashed var(--ic-brand-400, #5DB9BB); background: var(--ic-brand-50, #EAF5F5); color: var(--ic-brand-800, #1F5A5C); border-radius: 999px; padding: 7px 13px; font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.ait__chip:hover { background: #fff; border-style: solid; }
.ait__day { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--ic-ink-500, #6B7280); }
/* المرشد: بطاقة المستوى · «غير متأكد» · بلاغ المذكرة · نصيحتي لك */
.ait__me-card { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #FFFBEB; border-bottom: 1px solid #FDE68A; font-size: 12.5px; }
.ait__me-card b { display: block; color: #78350F; font-weight: 900; }
.ait__me-card small { color: #92400E; }
.ait__me-ico { font-size: 20px; }
.ait .ait__head { order: -2; }
.ait .ait__me-card { order: -1; }   /* تحت الرأس مباشرة */
.ait__unsure { margin-top: 12px; display: grid; gap: 6px; background: #FFF4E5; border: 1px solid #FFD9A0; border-radius: 12px; padding: 12px; font-size: 13px; color: #7A4A00; }
.ait__unsure b { font-size: 13.5px; font-weight: 900; }
.ait__unsure-btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--ic-brand-700, #26706F); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; text-decoration: none; }
.ait__unsure-btn--wa { background: #25D366; }
.ait__flag { margin-top: 10px; font-size: 12.5px; font-weight: 800; color: #1F5A5C; background: var(--ic-brand-50, #EAF5F5); border-radius: 10px; padding: 8px 12px; }
.ait__sec--tip { background: #F5F3FF; border-radius: 12px; padding: 10px 12px; }
.ait__sec--tip .ait__h { color: #5B21B6; }
.ait__sec--tip .ait__h::before { content: "🧭"; }
/* المعلّم الذكي v2: Markdown آمن · مراجع · تدريب */
.ait__txt b { font-weight: 900; color: var(--ic-ink-900, #111827); }
.ait__txt code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--ic-ink-100, #F3F4F6); padding: 1px 6px; border-radius: 6px; direction: ltr; unicode-bidi: isolate; }
.ait__list { margin: 0 0 10px; padding-inline-start: 22px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.85; color: var(--ic-ink-700, #374151); }
.ait__tablewrap { overflow-x: auto; margin: 4px 0 12px; border: 1px solid var(--ic-ink-300, #D1D5DB); border-radius: 10px; }
.ait__table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ait__table th, .ait__table td { padding: 7px 10px; border-bottom: 1px solid var(--ic-ink-100, #F3F4F6); text-align: start; white-space: nowrap; }
.ait__table th { background: var(--ic-brand-50, #EAF5F5); font-weight: 900; color: var(--ic-brand-800, #1F5A5C); }
.ait__final { background: #E7F6EC; border: 1px solid #BCE6CC; border-radius: 12px; padding: 10px 12px; color: #0F5132 !important; font-weight: 800; }
.ait__refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ait__refs-t { font-size: 12px; font-weight: 900; color: var(--ic-ink-500, #6B7280); }
a.ait__ref { text-decoration: none; }
a.ait__ref:hover { text-decoration: underline; }
.ait__ans.is-quiz { border: 2px dashed var(--ic-brand-400, #5DB9BB); }
.ait__quiztag { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 900; color: var(--ic-brand-800, #1F5A5C); background: var(--ic-brand-50, #EAF5F5); border-radius: 999px; padding: 5px 12px; }
.ait__grade { display: inline-block; margin-bottom: 8px; font-size: 12.5px; font-weight: 900; border-radius: 999px; padding: 5px 12px; }
.ait__grade.is-ok { background: #E7F6EC; color: #12703F; }
.ait__grade.is-mid { background: #FFF8E1; color: #8A5A00; }
.ait__grade.is-bad { background: #FEF2F2; color: #B42318; }
.ait__quizbar { display: flex; gap: 8px; margin-top: 10px; }
.ait-open--quiz { background: #fff; color: var(--ic-brand-800, #1F5A5C); border: 1px solid var(--ic-brand-200, #9ED3D4); box-shadow: none; text-decoration: none; }
.ait-open--quiz .ait-open__ico { background: var(--ic-brand-50, #EAF5F5); }
.ait-open--quiz .ait-open__txt small { color: var(--ic-ink-500, #6B7280); }
.ait-open--quiz + .ait-open { margin-inline-start: 8px; }
/* أدوات التعلّم في الشريط العلوي — مجموعة واحدة متناسقة */
.ait-actions { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.ait-actions .ait-open { margin: 0; min-height: 50px; }
.ait-actions .ait-open--quiz + .ait-open { margin-inline-start: 0; }
.ait-actions.is-float { position: fixed; top: 96px; right: 18px; z-index: 890; }
.ait-open--quiz .ait-open__ico { color: var(--ic-brand-700, #26706F); }
.ait__lesson { display: block; font-size: 11px; font-weight: 800; opacity: .85; margin-bottom: 4px; }
@media (max-width: 899px) {
  .ait-actions { gap: 6px; }
  .ait-actions .ait-open { min-height: 42px; }
}
@media (max-width: 520px) {
  .pl-top__inner { flex-wrap: wrap; }
  .ait-actions { width: 100%; }
  .ait-actions .ait-open { flex: 1; justify-content: center; }
}
.ait__quota.is-bump { animation: aitBump .9s ease; }
@keyframes aitBump { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
.ait__hist { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 10px; }
.ait__hist:hover { background: rgba(255,255,255,.24); }

/* ═════════ المعلّم الذكي — الهوية البصرية v3 (ترويسة احترافية · شخصية الروبوت · ترحيب) ═════════ */
.aibot { display: block; overflow: visible; }
.aibot__eyes { transform-origin: 32px 34.5px; animation: aibotBlink 5.5s infinite; }
.aibot__orb { animation: aibotOrb 2.4s ease-in-out infinite; }
@keyframes aibotBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes aibotOrb { 0%, 100% { filter: drop-shadow(0 0 1px #F36829); } 50% { filter: drop-shadow(0 0 5px #F36829); } }

.ait .ait__head {
  position: relative; gap: 12px; padding: 14px 16px; min-height: 76px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(93, 211, 213, .35) 0, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(243, 104, 41, .22) 0, transparent 60%),
    linear-gradient(135deg, #1F5A5C 0%, #173F40 60%, #0F2E2F 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ait .ait__head::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px); background-size: 14px 14px;
  mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); }
.ait__avatar { position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 8px 22px rgba(47, 198, 201, .35); }
.ait__live { position: absolute; bottom: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 2px #173F40; }
.ait .ait__ttl { flex: 1; min-width: 0; z-index: 1; }
.ait .ait__ttl b { font-size: 17px; font-weight: 900; letter-spacing: -.2px; white-space: nowrap; }
.ait .ait__ttl small { display: block; font-size: 12px; color: #BFE7E8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ait__hacts { display: flex; align-items: center; gap: 6px; z-index: 1; flex: 0 0 auto; }
.ait .ait__quota { font-size: 12px; padding: 7px 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); }
.ait__hbtn { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.1); color: #fff;
  display: grid; place-items: center; cursor: pointer; text-decoration: none; font-size: 14px; transition: background .15s ease; }
.ait__hbtn:hover, .ait__hbtn[aria-expanded="true"] { background: rgba(255,255,255,.22); }
.ait .ait__close, .ait .ait__hist { display: none; }   /* استُبدلا بأزرار الترويسة الموحّدة */

/* «مستواك» — نافذة منبثقة فوق المحادثة */
.ait__levelpop { position: absolute; top: 84px; left: 12px; right: 12px; z-index: 5; background: #fff; border: 1px solid #E4EDED; border-radius: 18px;
  box-shadow: 0 24px 50px rgba(15, 46, 47, .25); padding: 14px; display: grid; gap: 10px; animation: aitPop .18s ease; }
.ait__levelpop[hidden] { display: none; }
@keyframes aitPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ait__lvhead b { display: block; font-size: 15px; font-weight: 900; color: #0F2E2F; }
.ait__lvhead small { font-size: 12px; color: #66777A; }
.ait__lvempty { margin: 0; font-size: 13.5px; color: #4B5563; }
.ait__lvlist { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.ait__lvrow { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 800; }
.ait__lvrow em { font-style: normal; font-size: 11.5px; }
.ait__lvrow.is-good { background: #E7F6EC; color: #12703F; } .ait__lvrow.is-mid { background: #FFF8E1; color: #8A5A00; } .ait__lvrow.is-review { background: #FEF2F2; color: #B42318; }
.ait__lvgo { justify-self: start; border: 0; border-radius: 999px; padding: 9px 16px; font-family: inherit; font-weight: 900; font-size: 13px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #2F8E90, #1F5A5C); }

/* الترحيب */
.ait__hero { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 18px 10px 8px; }
.ait__heroav { width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; margin-bottom: 4px;
  background: radial-gradient(circle at 50% 40%, #EAF9F9 0, #D3ECEC 60%, #BFE3E3 100%); box-shadow: 0 16px 36px rgba(47, 142, 144, .28), 0 0 0 6px rgba(47, 142, 144, .08);
  animation: aitFloat 4s ease-in-out infinite; }
@keyframes aitFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ait__hero > b { font-size: 16px; font-weight: 900; color: #0F2E2F; }
.ait__hero p { margin: 0; font-size: 13.5px; line-height: 1.8; color: #4B5B5D; max-width: 330px; }
.ait__starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ait__starters button { border: 1px solid #CFE3E3; background: #fff; border-radius: 999px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 800; color: #1F5A5C; cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 90, 92, .06); transition: transform .15s ease, border-color .15s ease; }
.ait__starters button:hover { transform: translateY(-1px); border-color: #5DB9BB; }
.ait__hero.is-used { display: none; }
.ait .ait__hint { display: none; }

/* زر الشريط العلوي بالشخصية نفسها */
.ait-open__ico--bot { background: rgba(255,255,255,.12) !important; width: 40px !important; height: 40px !important; border-radius: 12px !important; }
.ait-open:not(.ait-open--quiz) { background: linear-gradient(135deg, #1F5A5C 0%, #173F40 70%); box-shadow: 0 10px 26px rgba(23, 63, 64, .35), 0 0 0 1px rgba(93, 211, 213, .25) inset; }

@media (max-width: 899px) {
  .ait .ait__head { padding: 12px 12px; min-height: 68px; }
  .ait__avatar { width: 44px; height: 44px; border-radius: 14px; }
  .ait__avatar .aibot { width: 38px; height: 38px; }
  .ait .ait__quota { padding: 6px 9px; font-size: 11.5px; }
  .ait__hbtn { width: 32px; height: 32px; border-radius: 10px; }
  .ait__levelpop { top: 76px; }
}
@media (prefers-reduced-motion: reduce) { .aibot__eyes, .aibot__orb, .ait__heroav { animation: none; } }
/* الرصيد تحت الاسم لا بجانب الأزرار — الترويسة لا تزدحم */
.ait__meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.ait__meta small { flex: 1 1 auto; min-width: 0; }
.ait .ait__meta .ait__quota { flex: 0 0 auto; padding: 3px 10px; font-size: 11.5px; line-height: 1.6; border-radius: 999px; }
.ait__meta { flex-wrap: wrap; row-gap: 4px; }
.ait__meta small { flex: 0 1 auto; overflow: visible; }

/* ═════════ بطاقة الإجابة v3 — تجذب وتُقرأ بسهولة ═════════ */
.ait .ait__ans { position: relative; border: 0; background: #fff; border-radius: 20px; padding: 14px 16px 12px; box-shadow: 0 10px 28px rgba(15, 46, 47, .08), 0 0 0 1px #E4EDED; overflow: hidden; }
.ait .ait__ans::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, #5DD3D5, #2F8E90 60%, #F36829); }
.ait__ahead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ait__aav { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, #EAF9F9, #D3ECEC); }
.ait__aname { font-size: 13px; font-weight: 900; color: #1F5A5C; }
.ait__ahead .ait__src { margin: 0; margin-inline-start: auto; }
.ait .ait__txt.is-ltr { text-align: left; }
.ait .ait__txt.is-rtl { text-align: right; }
.ait .ait__txt p { font-size: 14.5px; line-height: 1.95; color: #263B3C; }
/* قوائم مرقّمة بدوائر وقوائم بنقاط فيروزية */
.ait .ait__list { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 8px; counter-reset: aitn; }
.ait .ait__list li { position: relative; padding-inline-start: 34px; line-height: 1.85; font-size: 14.5px; color: #263B3C; }
.ait ol.ait__list li { counter-increment: aitn; }
.ait ol.ait__list li::before { content: counter(aitn); position: absolute; inset-inline-start: 0; top: 2px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #2F8E90, #1F5A5C); }
.ait ul.ait__list li::before { content: ""; position: absolute; inset-inline-start: 9px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #3DA7A9; box-shadow: 0 0 0 3px #D3ECEC; }
/* مصطلح إنجليزي + شرحه */
.ait .ait__term { display: grid; gap: 4px; }
.ait p.ait__term { background: #F6FAFA; border: 1px solid #E4EDED; border-radius: 14px; padding: 10px 12px; }
.ait__termk { justify-self: start; font-family: "Inter", "Cairo", sans-serif; font-weight: 800; font-size: 13px; color: #1F5A5C; background: #EAF5F5; border: 1px solid #CFE3E3; border-radius: 8px; padding: 2px 9px; }
.ait__termd { color: #374151; }
.ait__en { font-family: "Inter", "Cairo", sans-serif; font-size: .96em; }
.ait .ait__final { background: linear-gradient(135deg, #E7F6EC, #F1FBF4); border: 1px solid #BCE6CC; border-inline-start: 4px solid #22A06B; border-radius: 14px; }
/* عنصر مرن مع overflow:hidden ينكمش في عمود flex — البطاقة تأخذ طولها كاملًا */
.ait .ait__body > * { flex-shrink: 0; }
.ait__me[dir="ltr"] { text-align: left; }
.ait .ait__body { grid-auto-rows: max-content; }   /* صفوف الشبكة بطول محتواها — لا تنضغط البطاقات */

/* ═════════ «يفكّر…» ثم «يكتب» — مثل ChatGPT ═════════ */
.ait .ait__thinking { display: flex; align-items: center; gap: 10px; justify-self: start; background: #fff; border-radius: 18px; padding: 10px 14px;
  box-shadow: 0 8px 22px rgba(15, 46, 47, .08), 0 0 0 1px #E4EDED; font-size: 13px; color: #1F5A5C; font-weight: 800; }
.ait__tav { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, #EAF9F9, #D3ECEC); }
.ait__tdots { display: inline-flex; gap: 4px; }
.ait__tdots i { width: 7px; height: 7px; border-radius: 50%; background: #3DA7A9; animation: aitDot 1.1s infinite ease-in-out; }
.ait__tdots i:nth-child(2) { animation-delay: .15s; } .ait__tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes aitDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
.ait__tstatus { animation: aitFade .4s ease; }
@keyframes aitFade { from { opacity: .3; } to { opacity: 1; } }
.ait .ait__txt.is-typing > :last-child::after { content: ""; display: inline-block; width: 8px; height: 1.05em; margin-inline-start: 3px; vertical-align: -2px;
  background: #2F8E90; border-radius: 2px; animation: aitCaret .8s steps(1) infinite; }
@keyframes aitCaret { 50% { opacity: 0; } }
.ait__later { display: none !important; }
.ait__reveal { animation: aitRise .35s ease both; }
@keyframes aitRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ait .ait__ans:has(.is-typing) { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ait__tdots i, .ait__reveal, .ait .ait__txt.is-typing > :last-child::after { animation: none; } }
.ait__pending { display: none !important; }
/* الاشتراك: طريقتا دفع */
.ait__paybtns { display: grid; gap: 8px; margin-top: 10px; }
.ait__paybtns form { margin: 0; }
.ait__paybtns .ait__buy { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ait__buy--wallet { background: #fff !important; color: #1F5A5C !important; border: 1px solid #9ED3D4 !important; }
.ait__buy--wallet:disabled { opacity: .45; cursor: not-allowed; }
.ait__payerr { background: #FEF2F2; color: #B42318; border: 1px solid #FBD5D5; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.ait__payok { background: #E7F6EC; color: #12703F; border: 1px solid #BCE6CC; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 900; text-align: center; }
.ait__note b { display: inline; }
/* «اشترك» ثم طرق الدفع */
.ait__paysheet { margin-top: 10px; }
.ait__paysheet > summary { list-style: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ait__paysheet > summary::-webkit-details-marker { display: none; }
.ait__paysheet[open] > summary { opacity: .55; }
.ait__payopts { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 16px; background: #F6FAFA; border: 1px solid #E4EDED; animation: aitPop .18s ease; }
.ait__paytitle { font-size: 12px; font-weight: 900; color: #66777A; }
.ait__payopts form { margin: 0; }
.ait__payopt { width: 100%; display: flex; align-items: center; gap: 12px; text-align: start; padding: 11px 14px; border-radius: 14px; border: 1px solid #CFE3E3; background: #fff;
  font-family: inherit; color: #0F2E2F; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.ait__payopt:hover { border-color: #5DB9BB; transform: translateY(-1px); }
.ait__payopt > i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: #EAF5F5; color: #1F5A5C; font-size: 15px; }
.ait__payopt span { display: grid; line-height: 1.5; }
.ait__payopt b { font-size: 14px; font-weight: 900; }
.ait__payopt small { font-size: 11.5px; color: #66777A; font-weight: 700; }
.ait__payopt.is-main { background: linear-gradient(135deg, #2F8E90, #1F5A5C); border-color: transparent; color: #fff; }
.ait__payopt.is-main > i { background: rgba(255,255,255,.18); color: #fff; }
.ait__payopt.is-main small { color: #D3ECEC; }
.ait__payopt:disabled { opacity: .6; cursor: wait; }
.ait__paynote { margin: 0; font-size: 12.5px; color: #B42318; font-weight: 800; }

/* ═════════ أزرار الشريط العلوي v4 — عنوان فقط، بحجم واحد ونمط واحد ═════════ */
.ait-actions { gap: 10px; }
.ait-actions .ait-open { min-height: 48px; height: 48px; padding: 0 18px 0 8px; border-radius: 999px; gap: 10px; font-size: 15px; }
[dir="rtl"] .ait-actions .ait-open { padding: 0 8px 0 18px; }
.ait-actions .ait-open__txt b { font-size: 15px; font-weight: 900; white-space: nowrap; }
.ait-actions .ait-open__txt small { display: none; }
.ait-actions .ait-open__ico { width: 36px !important; height: 36px !important; border-radius: 50% !important; display: grid; place-items: center; }
.ait-actions .ait-open__ico--bot .aibot { width: 32px; height: 32px; }
.ait-actions .ait-open:not(.ait-open--quiz) { background: linear-gradient(135deg, #2F8E90 0%, #1F5A5C 55%, #173F40 100%); color: #fff; border: 0;
  box-shadow: 0 8px 20px rgba(31, 90, 92, .28); }
.ait-actions .ait-open:not(.ait-open--quiz):hover { box-shadow: 0 10px 26px rgba(31, 90, 92, .38); transform: translateY(-1px); }
.ait-actions .ait-open--quiz { background: #fff; border: 1.5px solid #9ED3D4; color: #1F5A5C; box-shadow: 0 4px 12px rgba(31, 90, 92, .06); }
.ait-actions .ait-open--quiz:hover { border-color: #3DA7A9; transform: translateY(-1px); }
.ait-actions .ait-open--quiz .ait-open__ico { background: #EAF5F5; color: #26706F; font-size: 15px; }
.ait-actions .ait-open { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
@media (max-width: 520px) {
  .ait-actions .ait-open { height: 46px; min-height: 46px; font-size: 14px; }
  .ait-actions .ait-open__txt b { font-size: 14px; }
}
/* نص الزر الرئيسي أبيض (كان يرث لون عنوان الباقة الداكن) */
.ait .ait__payopt.is-main b, .ait .ait__payopt.is-main small { color: #fff; }
.ait .ait__payopt.is-main small { opacity: .85; }
.ait .ait__payopt:not(.is-main) b { color: #0F2E2F; }
.ait__expiring { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; border-radius: 12px; padding: 9px 12px; font-size: 12.5px; font-weight: 800; line-height: 1.7; }
/* شريط «باقتك تنتهي» ثابت تحت الترويسة — لا يضيع مع التمرير */
.ait .ait__expiring--bar { border-radius: 0; border-width: 0 0 1px; margin: 0; padding: 8px 16px; }
/* تنبيه «شرح عام» أهدأ — كان كتلة برتقالية ثقيلة */
.ait .ait__ask { background: #FFF8EC !important; color: #9A5B00 !important; border: 1px solid #FFE1B3 !important; border-radius: 12px !important;
  font-size: 12.5px !important; font-weight: 800 !important; padding: 8px 12px !important; box-shadow: none !important; }
.ait__lock--lesson p b { color: #1F5A5C; }
.ait__lock--lesson .ait__buy { display: inline-flex; justify-content: center; text-decoration: none; margin-top: 8px; }
/* تسويق الفصل داخل إجابة المعلّم */
.ait__upsell { margin-top: 12px; border-radius: 16px; padding: 14px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(93, 211, 213, .3) 0, transparent 55%), linear-gradient(135deg, #1F5A5C, #173F40); box-shadow: 0 10px 24px rgba(23, 63, 64, .25); }
.ait__uphead { display: flex; gap: 10px; align-items: flex-start; }
.ait__upico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.14); font-size: 19px; }
.ait__uphead b { display: block; font-size: 14px; font-weight: 900; line-height: 1.6; }
.ait__uphead small { display: block; font-size: 12.5px; color: #CDEBEB; line-height: 1.7; margin-top: 2px; }
.ait__upacts { display: grid; gap: 8px; margin-top: 12px; }
.ait__upacts form { margin: 0; }
.ait__upbtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff; font-family: inherit; font-weight: 900; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.ait__upbtn.is-main { background: #F36829; border-color: #F36829; box-shadow: 0 6px 16px rgba(243, 104, 41, .35); }
.ait__upbtn:disabled { opacity: .6; cursor: wait; }
.ait__uplink { justify-self: center; color: #BFE7E8; font-size: 12.5px; font-weight: 800; text-decoration: underline; }
.ait__lvgo--ghost { background: #fff !important; color: #1F5A5C !important; border: 1px solid #CFE3E3 !important; text-decoration: none; }
/* «راجع» المذكرة: سطر صغير هادئ بدل أزرار كبيرة */
.ait .ait__refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #E4EDED; }
.ait .ait__refs-t { font-size: 11.5px; font-weight: 800; color: #7A8A8C; }
.ait .ait__ref { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px !important; min-height: 0 !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important;
  background: #F4F9F9 !important; border: 1px solid #E1ECEC !important; color: #26706F !important; box-shadow: none !important; text-decoration: none; line-height: 1.7; }
.ait .ait__ref::before { content: "📄"; font-size: 10px; }
.ait a.ait__ref:hover { background: #EAF5F5 !important; border-color: #BFE3E3 !important; }

/* رأس «دليل الطالب بالفيديو» فاتح ليناسب هوية الصفحات (كان داكنًا) */
.hv-hero { background: linear-gradient(135deg, #FFFFFF 0%, #F1F9F9 60%, #E6F4F4 100%); color: var(--ink, #0F2E2F); border: 1px solid #DCEBEB; box-shadow: 0 14px 34px rgba(15, 46, 47, .07); position: relative; overflow: hidden; }
.hv-hero::after { content: ""; position: absolute; inset-inline-start: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 104, 41, .12), transparent 70%); pointer-events: none; }
.hv-hero h1 { color: #0F2E2F; }
.hv-hero p { color: #4B5B5D; }
.hv-stats div { background: #fff; border: 1px solid #DCEBEB; box-shadow: 0 6px 16px rgba(15, 46, 47, .05); }
.hv-stats dt { color: #66777A; }
.hv-stats dd { color: #1F5A5C; }

/* ═════════ السؤال الصوتي · قائمة «＋» · «مذكرتك» ═════════ */
.ait .ait__foot { position: relative; }
.ait__plusmenu { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 12px; z-index: 6; width: 250px; display: grid; gap: 4px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid #E1ECEC; box-shadow: 0 18px 40px rgba(15, 46, 47, .18); animation: aitPop .15s ease; }
.ait__plusmenu[hidden] { display: none; }
.ait__plusmenu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; font-family: inherit; text-align: start; cursor: pointer; color: #0F2E2F; }
.ait__plusmenu button:hover { background: #F2FAFA; }
.ait__plusmenu i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: #EAF5F5; color: #1F5A5C; }
.ait__plusmenu span { display: grid; } .ait__plusmenu b { font-size: 13.5px; } .ait__plusmenu small { font-size: 11.5px; color: #7A8A8C; }
.ait .ait__send.is-mic { background: linear-gradient(135deg, #F36829, #D9531B); }
.ait .ait__send.is-stop { background: #DC2626; animation: aitPulse 1.2s infinite; }
.ait__sq { display: block; width: 14px; height: 14px; border-radius: 3px; background: #fff; }
@keyframes aitPulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); } 70% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
.ait__rec { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 46px; border-radius: 14px; background: #FEF2F2; border: 1px solid #FBD5D5; color: #991B1B; font-size: 13px; }
.ait__rec[hidden] { display: none; }
.ait__rec b { font-variant-numeric: tabular-nums; direction: ltr; } .ait__rec span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ait__recdot { width: 10px; height: 10px; border-radius: 50%; background: #DC2626; animation: aitCaret 1s steps(1) infinite; }
.ait__rec button { border: 0; background: transparent; color: #991B1B; cursor: pointer; font-size: 15px; }
.ait .ait__me.is-voice { font-style: normal; }
.ait__notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px 10px; border-top: 1px solid #EEF3F3; background: #FAFCFC; }
.ait__notes[hidden] { display: none; }
.ait__notes-t { font-size: 11.5px; font-weight: 800; color: #66777A; }
.ait__note { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 999px; background: #fff; border: 1px solid #DCEBEB; font-size: 12px; }
.ait__note b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1F5A5C; }
.ait__note small { color: #7A8A8C; font-size: 11px; }
.ait__note.is-processing { border-color: #FDE68A; background: #FFFBEB; } .ait__note.is-failed { border-color: #FBD5D5; background: #FEF2F2; }
.ait__note button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: #F1F5F5; color: #66777A; cursor: pointer; font-size: 11px; display: grid; place-items: center; }
.ait .ait__send.is-stop { display: grid; place-items: center; padding: 0; }
.ait .ait__send .ait__sq { margin: 0 auto; }
.ait__rec span { font-size: 12px; }
/* رابط المرجع واضح أنه يفتح المذكرة */
.ait a.ait__ref { cursor: pointer; }
.ait a.ait__ref::after { content: "↗"; font-size: 10px; margin-inline-start: 2px; opacity: .7; }
.ait a.ait__ref:hover { text-decoration: underline; }
.ait__vtip { position: absolute; bottom: calc(100% + 4px); inset-inline: 12px; margin: 0; padding: 6px 12px; border-radius: 10px; background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412; font-size: 12px; font-weight: 800; }
.ait__vtip[hidden] { display: none; }
.ait__imgtxt { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.35); font-size: 11.5px; opacity: .85; line-height: 1.6; }
/* بطاقة «معلّمك الذكي» داخل المساعد العام */
.as-ai { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(93, 211, 213, .3) 0, transparent 55%), linear-gradient(135deg, #1F5A5C, #173F40); box-shadow: 0 10px 22px rgba(23, 63, 64, .22); }
.as-ai__av { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.as-ai__t { flex: 1; min-width: 0; display: grid; } .as-ai__t b { font-size: 14px; } .as-ai__t small { font-size: 11.5px; color: #CDEBEB; line-height: 1.6; }
.as-ai > i { color: #8FF3F5; }
.nw { white-space: nowrap; }
.aw__opt small .nw, .ait__payopt small .nw, .aw__opt small span, .ait__payopt small span { display: inline; }
/* بطاقة المعلّم الذكي داخل «مساعد انفنيتي» — أوضح وأهدأ */
.as-ai { padding: 12px; gap: 12px; }
.as-ai__t { gap: 1px; }
.as-ai__new { justify-self: start; font-size: 10.5px; font-weight: 900; color: #0F2E2F; background: #8FF3F5; border-radius: 999px; padding: 1px 8px; margin-bottom: 2px; }
.as-ai__t b { font-size: 15px; }
.as-ai__t small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-ai > i { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 12px; }
/* أيقونة المعلّم الذكي في القوائم */
.ic-ai-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; }
.ic-ai-ico .aibot { width: 20px; height: 20px; }
/* أيقونة المعلّم الذكي في قوائم الحساب: عرض الأيقونة نفسه لا نصف السطر (قاعدة span { flex: 1 } كانت تشملها) */
.ic-menu a > .ic-ai-ico, .ic-menu button > .ic-ai-ico { flex: 0 0 18px !important; width: 18px; height: 18px; }
.ic-menu a > .ic-ai-ico .aibot { width: 20px; height: 20px; margin: -1px; }
.ic-drawer__body a > .ic-ai-ico { flex: 0 0 22px !important; width: 22px; height: 22px; }
/* مراجع مجمّعة حسب الملف، وكل صفحة رابط */
.ait .ait__refg { gap: 5px; padding-inline-end: 5px !important; }
.ait .ait__refg::after { content: none !important; }
.ait__refn { font-weight: 800; }
.ait__refp-t { color: #7A8A8C; font-weight: 700; margin-inline-start: 2px; }
.ait__refp { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; background: #fff; border: 1px solid #D5E7E7; color: #1F5A5C; font-size: 11px; font-weight: 900; text-decoration: none; }
a.ait__refp:hover { background: #1F5A5C; color: #fff; border-color: #1F5A5C; }
/* «يُخصم 5 أسئلة» بسطر مستقل ولون مميز */
.ait__notecost { display: inline-block; justify-self: start; margin-top: 3px; padding: 1px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 900; color: #C2410C; background: #FFF1E7; border: 1px solid #FBD0B0; }
.ait__notecost.is-free { color: #12703F; background: #E7F6EC; border-color: #BCE6CC; }
/* زر «▶ شاهد من 12:40» — يقفز للثانية في الفيديو */
.ait .ait__vref { cursor: pointer; font-family: inherit; background: linear-gradient(135deg, #1F5A5C, #2F8E90) !important; color: #fff !important; border-color: transparent !important; padding: 4px 12px !important; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.4; }
.ait .ait__vref::before, .ait .ait__vref::after { content: none !important; }
.ait .ait__vref b { font-size: 12px; font-weight: 900; direction: rtl; }
.ait .ait__vref small { font-size: 10.5px; opacity: .85; font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ait .ait__vref:hover { filter: brightness(1.08); }

/* ═════ «مصادر هذه الإجابة»: المذكرة سطر، والفيديو سطر بزر رئيسي ═════ */
.ait .ait__srcbox { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(180deg, #F7FBFB, #F1F8F8); border: 1px solid #E1ECEC; }
.ait .ait__srcbox .ait__refs-t { display: none; }
.ait__srow { display: flex; align-items: flex-start; gap: 10px; }
.ait__srow-t { flex: 0 0 auto; min-width: 74px; font-size: 12px; font-weight: 900; color: #5B6B6D; padding-top: 5px; }
.ait__srow-c { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ait__srow--v { padding-top: 8px; border-top: 1px dashed #DCEBEB; }
.ait__vmain { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit; color: #fff; text-align: start;
  background: linear-gradient(135deg, #1F5A5C, #2F8E90); box-shadow: 0 8px 18px rgba(31, 90, 92, .25); transition: transform .15s ease, box-shadow .15s ease; }
[dir="rtl"] .ait__vmain { padding: 7px 8px 7px 14px; }
.ait__vmain:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(31, 90, 92, .32); }
.ait__vplay { position: relative; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #F36829; box-shadow: 0 0 0 4px rgba(243, 104, 41, .25); animation: aitVpulse 2.2s ease-in-out infinite; }
.ait__vplay::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -4px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
@keyframes aitVpulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(243, 104, 41, .25); } 50% { box-shadow: 0 0 0 7px rgba(243, 104, 41, .12); } }
.ait__vtxt { display: grid; line-height: 1.35; }
.ait__vtxt b { font-size: 13px; font-weight: 900; }
.ait__vtxt small { font-size: 11px; opacity: .85; font-weight: 700; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ait__vmore { display: flex; flex-wrap: wrap; gap: 5px; }
.ait__vchip { border: 1px solid #CFE3E3; background: #fff; color: #1F5A5C; border-radius: 999px; padding: 3px 10px; font-family: Inter, "Cairo", sans-serif; font-weight: 800; font-size: 11.5px; cursor: pointer; direction: ltr; }
.ait__vchip:hover { background: #EAF5F5; }
.ait__vchip.is-other { border-style: dashed; }
.ait__vchip.is-count { cursor: default; color: #7A8A8C; }
.ait .ait__src.is-video { background: #EAF5F5; color: #1F5A5C; border-color: #BFE3E3; }
.ait__vmore { align-items: center; } .ait__vmore-t { font-size: 11px; font-weight: 800; color: #7A8A8C; }
/* دورة مشروع: بطاقة «ارفع ملف مشروعك» */
.ait__projup { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 12px 0 4px; padding: 14px; border-radius: 18px; text-align: start;
  background: linear-gradient(135deg, #FFF8F2, #FFEFE3); border: 1px solid #FBD9BF; }
.ait__projup-i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 6px 14px rgba(243, 104, 41, .18); font-size: 20px; }
.ait__projup > div { display: grid; gap: 3px; } .ait__projup b { font-size: 14px; color: #7C2D12; } .ait__projup small { font-size: 12px; color: #9A5B3A; line-height: 1.7; } .ait__projup small b { font-size: 12px; }
.ait__projup-b { grid-column: 1 / -1; border: 0; border-radius: 12px; padding: 10px; font-family: inherit; font-weight: 900; font-size: 13.5px; color: #fff; cursor: pointer; background: linear-gradient(135deg, #F7893F, #E3561B); box-shadow: 0 8px 18px rgba(243, 104, 41, .3); }
.ait__projup.is-ok { background: #F2FBF5; border-color: #CDEBD8; } .ait__projup.is-ok b { color: #12703F; } .ait__projup.is-ok small { color: #3E6B50; }
.ait__projup.is-ok .ait__projup-i { color: #12703F; font-weight: 900; }
.ait .ait__paren { unicode-bidi: isolate; white-space: normal; }
.ait .ait__paren.is-short { white-space: nowrap; }  /* قوس قصير لا ينقسم على سطرين */

/* «كيف يعمل؟» في شريط الدرس: زر هادئ + قائمة فيديوهات منبثقة */
.ait-howwrap { position: relative; display: inline-flex; }
.ait-open.ait-open--how { background: #fff !important; color: #1F5A5C !important; border: 1px solid #CFE3E3 !important; box-shadow: none !important; }
.ait-open.ait-open--how .ait-open__ico { background: #EAF5F5 !important; color: #2F8E90 !important; }
.ait-open.ait-open--how[aria-expanded="true"] { border-color: #2F8E90 !important; box-shadow: 0 0 0 3px rgba(47,142,144,.15) !important; }
.ait-how { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 250px; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #E1ECEC; box-shadow: 0 18px 40px rgba(15,46,47,.18); }
.ait-how[hidden] { display: none; }
.ait-how__t { font-size: 12px; font-weight: 900; color: #7A8A8C; padding: 0 4px; }
.ait-how .hv-watch { width: 100%; justify-content: flex-start; margin: 0; }
.ait-how .hv-watch__dur { margin-inline-start: auto; }
.ait__howline { margin-top: 12px; display: flex; justify-content: center; }
.qz__how { margin-top: 10px; }
@media (max-width: 640px) { .ait-open--how .ait-open__txt { display: none; } .ait-how { position: fixed; top: auto; bottom: 16px; left: 12px; right: 12px; min-width: 0; } }
@media (max-width: 640px) {
  .ait-open.ait-open--how { width: 42px; min-width: 42px; height: 42px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
  .ait-open.ait-open--how .ait-open__ico { margin: 0 !important; }
  .ait-actions { gap: 6px !important; }
}
/* شريط الدرس على الجوالات الضيقة: «كيف يعمل؟» يختفي من الشريط (موجود داخل المعلّم وصفحة الاختبار) فلا يُقصّ */
@media (max-width: 420px) { .ait-howwrap { display: none !important; } .ait-actions { flex-wrap: nowrap; } }

/* ═════ مكان المحادثة وحجمها (الكمبيوتر) ═════ */
.ait__desk { display: none; }
.ait__ico-small { display: none; }
.ait.is-big .ait__ico-big { display: none; } .ait.is-big .ait__ico-small { display: inline; }
@media (min-width: 900px) {
  .ait__desk { display: inline-grid; }
  .ait .ait__head { cursor: grab; user-select: none; }
  .ait.is-dragging { transition: none !important; box-shadow: 0 40px 90px rgba(17,24,39,.38); }
  .ait.is-dragging .ait__head { cursor: grabbing; }
  /* الجهة الأخرى (فوق قائمة محتوى الدورة بدل الفيديو) */
  .ait.is-left { right: auto; left: 18px; transform: translateX(calc(-100% - 40px)); }
  .ait.is-left.is-open { transform: none; }
  /* موضع حر بعد السحب */
  .ait.is-free { bottom: auto; height: min(640px, calc(100vh - 110px)); }
  .ait.is-free:not(.is-open) { transform: translateY(30px); opacity: 0; }
  /* الوضع الكبير: المحادثة تملأ الشاشة كاملة للتركيز (طلب المالكة)، والنص في عمود مريح للقراءة */
  .ait.is-big { position: fixed; inset: 0; top: 0; bottom: 0; left: 0; right: 0; width: 100vw; height: 100vh; max-width: none; border-radius: 0; z-index: 2000; transform: none; opacity: 0; }
  .ait.is-big.is-open { transform: none; opacity: 1; }
  .ait.is-big .ait__head { border-radius: 0; padding-inline: max(18px, calc((100% - 980px) / 2)); }
  .ait.is-big .ait__body { padding-inline: max(20px, calc((100% - 860px) / 2)); }
  .ait.is-big .ait__foot { padding-inline: max(14px, calc((100% - 880px) / 2)); padding-bottom: 18px; }
  .ait.is-big .ait__head { cursor: default; }
  .ait.is-big ~ .ait-backdrop, body:has(.ait.is-big.is-open) .ait-backdrop { display: block !important; }
}
/* مصدر المذكرة: الاسم في سطر كامل ثم أرقام الصفحات تحته (بدل تكسّر الاسم عموديًّا في الشاشات الضيقة) */
.ait__refg { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; border-radius: 14px !important; padding: 7px 10px !important; }
.ait__refg .ait__refn { flex: 0 1 auto; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
@media (min-width: 900px) {
  body:has(.ait.is-big.is-open) { overflow: hidden; }
  body:has(.ait.is-big.is-open) .ic-whatsapp, body:has(.ait.is-big.is-open) .as-root, body:has(.ait.is-big.is-open) .ic-install { display: none !important; }
}
/* قائمة «+» في وضع ملء الشاشة: فوق زر «+» نفسه (تتبع عمود الكتابة في المنتصف) */
@media (min-width: 900px) {
  .ait.is-big .ait__plusmenu { inset-inline-start: max(14px, calc((100% - 880px) / 2)); bottom: calc(100% + 10px); width: 280px; }
}


/* ═══ v287: بطاقة «تثبيت التطبيق» وأزرار الدعم والواتساب ═══
 * اللابتوب: البطاقة في الزاوية اليسرى وزر الدعم في اليمنى، فلا يرتفع الزر (كان يرتفع 122px بلا سبب)،
 *            وزر الواتساب (يسارًا أيضًا) يصعد فوق البطاقة بدل أن يختفي خلفها.
 * الهاتف: البطاقة بعرض الشاشة، فيرتفع زر الدعم بقدر ارتفاعها الفعلي فقط (--ia-install-h من footer).
 */
@media (min-width: 768px) {
  body.ia-install-open .as-root,
  body:has(.ic-install:not([hidden])) .as-root { bottom: 22px !important; }
  body:has(.ic-install.is-in) .ic-whatsapp { opacity: 1 !important; pointer-events: auto !important; bottom: calc(var(--ia-install-h, 112px) + 38px) !important; transition: bottom .25s ease; }
}
@media (max-width: 767px) {
  body.ia-install-open .as-root, body:has(.ic-install:not([hidden])) .as-root,
  body.ia-install-open .as-fab, body:has(.ic-install:not([hidden])) .as-fab { bottom: calc(var(--ia-install-h, 168px) + 22px + env(safe-area-inset-bottom, 0px)) !important; transition: bottom .25s ease; }
  body.ia-install-open .as-hello, body:has(.ic-install:not([hidden])) .as-hello { bottom: calc(var(--ia-install-h, 168px) + 26px + env(safe-area-inset-bottom, 0px)) !important; }
}