/* ===================================================================
   LUB · أسطح الكتابة — lub-write-surface.css
   السبورة الخضراء «اشرح لي» · ورقة الملخّص «لخص لي» · اللوح «بسّط لي»

   PRESENTATION ONLY. Nothing here knows what a lesson is. The three
   surfaces are chosen by `lub-write-surface.js` from ONE field the
   server already recorded (`teaching_method`), and they re-present the
   exact same answer HTML the ordinary bubble would have rendered.

   Every rule is fenced inside `.lubws`, so an answer that reaches no
   surface keeps the chat styling it has always had.

   THE REVEAL is a shutter layer, not a rewrite of the text: one opaque
   rectangle per measured LINE BOX, painted in the sheet's own base
   colour, shrunk away as the line is "written". The text underneath is
   never touched — which is why KaTeX, tables and RTL survive it, and
   why the finished surface is byte-identical to the un-animated one.
   The grain sits ABOVE the shutters so the texture stays continuous
   while a line is still covered.
   =================================================================== */

/* ── الغلاف ───────────────────────────────────────────────── */
.lubws {
  --ws-radius: 14px;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  /* الخط اليدوي: عربي رُقعة + لاتيني Caveat. الرياضيات مستثناة أدناه. */
  --ws-hand: 'Aref Ruqaa', 'Caveat', 'Noto Naskh Arabic', serif;
}

/* السطح كامل العرض داخل المحادثة: 73% تكفي فقاعة، لا تكفي سبورة. */
.msg-wrap.has-surface .msg-stack { max-width: 100%; width: 100%; }

.lubws-frame {
  border-radius: var(--ws-radius);
  padding: 12px;
  overflow: hidden;
}

.lubws-sheet {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 24px 26px 20px;
  /* لون أساس صلب — وهو نفسه لون السواتر، فلا يظهر أي فرق أثناء الكشف. */
  background-color: var(--ws-base);
}

/* ── النص المكتوب باليد ───────────────────────────────────── */
.lubws-body {
  position: relative;
  z-index: 1;
  font-family: var(--ws-hand);
  color: var(--ws-ink);
  font-size: 1.12rem;
  line-height: 2.05;
  font-weight: 400;
  unicode-bidi: plaintext;
  text-align: start;
  word-break: normal;
  overflow-wrap: break-word;
}
.lubws-body > :first-child { margin-top: 0; }
.lubws-body > :last-child  { margin-bottom: 0; }
.lubws-body p  { margin: .28em 0; }
.lubws-body h1, .lubws-body h2, .lubws-body h3,
.lubws-body h4, .lubws-body h5, .lubws-body h6 {
  font-family: var(--ws-hand);
  font-weight: 700;
  margin: .7em 0 .3em;
  line-height: 1.9;
  color: var(--ws-ink-strong);
}
.lubws-body h1 { font-size: 1.34em; }
.lubws-body h2 { font-size: 1.22em; }
.lubws-body h3 { font-size: 1.12em; }
.lubws-body h4, .lubws-body h5, .lubws-body h6 { font-size: 1.05em; }
.lubws-body strong, .lubws-body b { font-weight: 700; color: var(--ws-ink-strong); }
.lubws-body em, .lubws-body i { font-style: italic; }
/* العلامة محتوى داخل السطر لا `::marker`.
   السبب صادر عن الاختبار لا عن الذوق: `::marker` في قائمة عربية يُرسم
   عند الحافة اليسرى عند تصدير الصورة، فتنفصل النقطة عن سطرها. علامة
   داخل السطر تسير مع النص فتخرج الصورة كما تُرى على الشاشة تمامًا. */
.lubws-body ul, .lubws-body ol {
  margin: .3em 0;
  padding-inline-start: 1.25em;
  padding-inline-end: 0;
  list-style: none;
}
.lubws-body ol { counter-reset: lubws-ol; }
.lubws-body li { margin: .12em 0; }
.lubws-body ul > li::before {
  content: "• ";
  color: var(--ws-ink-soft);
}
.lubws-body ol > li { counter-increment: lubws-ol; }
.lubws-body ol > li::before {
  content: counter(lubws-ol) ". ";
  color: var(--ws-ink-soft);
}
.lubws-body blockquote {
  margin: .5em 0;
  padding-inline-start: .8em;
  border-inline-start: 2px solid var(--ws-rule);
  color: var(--ws-ink-soft);
}
.lubws-body hr {
  border: 0;
  height: 2px;
  margin: .9em 0;
  background: var(--ws-rule);
  border-radius: 2px;
  opacity: .75;
}
.lubws-body a { color: var(--ws-ink-strong); text-decoration: underline; }
.lubws-body code, .lubws-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--ws-inset);
  border-radius: 5px;
}
.lubws-body code { padding: .05em .3em; }
.lubws-body pre { padding: .6em .7em; margin: .5em 0; overflow-x: auto; }
.lubws-body pre code { background: none; padding: 0; }

/* جدول مرسوم بالحبر نفسه، ولا يتجاوز عرض السطح على الجوال. */
.lubws-body table {
  width: 100%;
  border-collapse: collapse;
  margin: .55em 0;
  font-size: .96em;
}
.lubws-body th, .lubws-body td {
  border: 1px solid var(--ws-rule);
  padding: .3em .5em;
  text-align: start;
}
.lubws-body th { font-weight: 700; color: var(--ws-ink-strong); }
.lubws-body img { max-width: 100%; height: auto; }

/* ── الرياضيات تبقى كما هي ────────────────────────────────
   KaTeX يفرض خطوطه بنفسه، فلا حاجة لإجباره. المطلوب هنا شيئان فقط:
   أن يرث لون الحبر، وألّا يرث هالة الطبشور — فالتمويه على الأسس
   والكسور يضرّ القراءة، وهذا ما تمنعه القاعدة التالية صراحةً. */
.lubws-body .katex,
.lubws-body .katex-display,
.lubws-body .katex * {
  text-shadow: none !important;
  color: inherit;
}
.lubws-body .katex-display {
  margin: .6em 0;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
/* KaTeX يُصيَّر دائمًا LTR — وهذا ما يفعله app.js أصلًا؛ نحافظ عليه. */
.lubws-body .katex { direction: ltr; }

/* ── طبقة السواتر (الكشف) ─────────────────────────────────── */
.lubws-shutters {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.lubws-shutter {
  position: absolute;
  background-color: var(--ws-base);
}

/* ── طبقة الملمس، فوق السواتر لتبقى متّصلة ────────────────── */
.lubws-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 8px;
}

/* ── أداة الكتابة ─────────────────────────────────────────── */
.lubws-tool {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 34px;
  height: 12px;
  margin: -6px 0 0 -17px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
  will-change: transform;
}
.lubws.is-writing .lubws-tool { opacity: 1; }

/* ── علامة الانتهاء: خطّان قصيران ───────────────────────────
   `align-items:flex-start` في عمود مرن يعني «بداية السطر»، فيتبع اتجاه
   الصفحة من تلقاء نفسه: يمين في العربية، يسار في الإنجليزية. لا يحتاج
   جافاسكربت، فيبقى صحيحًا بعد أي إعادة رسم. */
.lubws-sign {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.lubws-sign i {
  display: block;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: var(--ws-ink);
  opacity: .92;
}
.lubws-sign i:nth-child(2) { width: 0; }
/* السطر النهائي بعد اكتمال العلامة — عرضان مختلفان قليلًا كما تُرسم باليد. */
.lubws[data-done="1"] .lubws-sign i:nth-child(1) { width: 104px; }
.lubws[data-done="1"] .lubws-sign i:nth-child(2) { width: 78px; }

/* ── شريط الإجراءات (خارج الإطار، فلا يدخل الصورة) ────────── */
.lubws-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .45rem;
  padding-inline: 2px;
}
.lubws-save {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--bg2, #22252f);
  color: var(--text2, #c7ccd8);
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 100px;
  padding: .3rem .8rem;
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, color .15s, border-color .15s;
}
.lubws-save:hover:not(:disabled) { color: var(--text, #fff); border-color: var(--gold, #f59e0b); }
.lubws-save:disabled { opacity: .55; cursor: default; }
.lubws-save-note { font-size: .78rem; color: var(--text3, #8b90a0); }

/* ===================================================================
   ١ · «اشرح لي» — السبورة الخضراء وطبشور أبيض
   =================================================================== */
.lubws--chalkboard {
  --ws-base: #2C4A3B;
  --ws-ink: #F4F2E9;
  --ws-ink-strong: #FFFDF4;
  --ws-ink-soft: #CBD3C6;
  --ws-rule: rgba(244,242,233,.34);
  --ws-inset: rgba(0,0,0,.20);
}
.lubws--chalkboard .lubws-frame {
  background: linear-gradient(160deg, #6B4A2A 0%, #55381E 100%);
  box-shadow: 0 2px 4px rgba(20,14,6,.18), 0 16px 34px -22px rgba(20,14,6,.55);
}
.lubws--chalkboard .lubws-sheet {
  box-shadow: inset 0 2px 14px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.22);
}
.lubws--chalkboard .lubws-grain {
  background:
    linear-gradient(155deg, rgba(255,255,255,.035) 0%, rgba(0,0,0,.06) 100%),
    repeating-linear-gradient(97deg, rgba(244,242,233,.016) 0 3px, transparent 3px 9px);
}
/* هالة الطبشور: غبار ناعم حول الحرف، لا على المعادلات. */
.lubws--chalkboard .lubws-body {
  text-shadow: 0 0 1px rgba(244,242,233,.5), 0 0 6px rgba(244,242,233,.2);
}
.lubws--chalkboard .lubws-tool {
  background: linear-gradient(180deg, #FFFFFF 0%, #EFEDE2 55%, #D6D3C4 100%);
  box-shadow: 0 0 8px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.35);
  width: 30px; height: 11px; margin: -5px 0 0 -15px;
}
/* رفّ الطبشور — جزء من السبورة، فيدخل الصورة المحفوظة. */
.lubws--chalkboard .lubws-tray {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 5px 12px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #7A5730 0%, #5A3C20 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.lubws--chalkboard .lubws-tray i {
  display: block; height: 7px; border-radius: 2px;
  background: linear-gradient(180deg, #FFFDF4, #DAD7C8);
}
.lubws--chalkboard .lubws-tray i:nth-child(1) { width: 26px; }
.lubws--chalkboard .lubws-tray i:nth-child(2) { width: 18px; background: linear-gradient(180deg, #CFEBD8, #A8D8B9); }
.lubws--chalkboard .lubws-tray i:nth-child(3) { width: 14px; background: linear-gradient(180deg, #FAE9B6, #F2D98A); }

/* ===================================================================
   ٢ · «لخص لي» — ورقة بيضاء وحبر أزرق
   =================================================================== */
.lubws--paper {
  --ws-base: #FCFBF6;
  --ws-ink: #1B3F8F;
  --ws-ink-strong: #12306E;
  --ws-ink-soft: #5C79B5;
  --ws-rule: rgba(27,63,143,.30);
  --ws-inset: rgba(27,63,143,.07);
}
.lubws--paper .lubws-frame {
  background: #E7E4DA;
  padding: 8px;
  box-shadow: 0 2px 3px rgba(30,30,40,.10), 0 14px 30px -22px rgba(30,30,40,.45);
}
.lubws--paper .lubws-sheet {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), inset 0 0 22px rgba(180,170,140,.14);
}
/* حاشية الدفتر الحمراء عنصرٌ حقيقي لا تدرّجًا بـ calc: التدرّجات
   الحسابية أول ما يسقط عند تصدير الصورة، والحاشية جزء من هوية الورقة. */
.lubws--paper .lubws-grain {
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(120,105,70,.05) 0%, rgba(120,105,70,0) 22%);
}
.lubws--paper .lubws-grain::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-start: 32px;
  width: 1.5px;
  background: rgba(200,60,60,.32);
}
.lubws--paper .lubws-sheet { padding-inline-start: 44px; }
.lubws--paper .lubws-tool {
  background: linear-gradient(180deg, #4A78D8 0%, #1B3F8F 60%, #10265A 100%);
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 1px 3px rgba(20,30,70,.45);
  width: 32px; height: 9px; margin: -4px 0 0 -16px;
}

/* ===================================================================
   ٣ · «بسّط لي» — لوح أبيض لامع وقلم أحمر
   =================================================================== */
.lubws--whiteboard {
  --ws-base: #FFFFFF;
  --ws-ink: #D22B2B;
  --ws-ink-strong: #B01F1F;
  --ws-ink-soft: #E06A6A;
  --ws-rule: rgba(210,43,43,.32);
  --ws-inset: rgba(210,43,43,.07);
}
.lubws--whiteboard .lubws-frame {
  background: linear-gradient(170deg, #DFE4EA 0%, #B9C1CB 100%);
  box-shadow: 0 2px 4px rgba(40,48,60,.14), 0 16px 32px -22px rgba(40,48,60,.5);
}
.lubws--whiteboard .lubws-sheet {
  box-shadow: inset 0 0 0 1px rgba(120,132,148,.35), inset 0 2px 10px rgba(120,132,148,.12);
}
/* لا لمعة على سطح اللوح.
   طبقة الملمس تعلو النص لتبقى متّصلة أثناء الكشف، ولمعةٌ شفّافة فوق
   النص خرجت في الصورة المصدَّرة رماديةً على كامل اللوح — لأن مصدِّر
   الصور يحسب التدرّجات الشفّافة على نحو مختلف. «لوح أبيض نظيف» لا
   يحتاجها أصلًا، فحُذفت بدل أن تُضبط بالتقريب. */
.lubws--whiteboard .lubws-tool {
  background: linear-gradient(180deg, #F05252 0%, #D22B2B 55%, #931515 100%);
  border-radius: 3px 7px 7px 3px;
  box-shadow: 0 1px 3px rgba(80,10,10,.4);
  width: 34px; height: 11px; margin: -5px 0 0 -17px;
}
.lubws--whiteboard .lubws-tray {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 5px 12px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #CFD6DE 0%, #A9B2BD 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.lubws--whiteboard .lubws-tray i {
  display: block; height: 8px; width: 26px; border-radius: 3px;
  background: linear-gradient(180deg, #F05252, #B01F1F);
}
.lubws--whiteboard .lubws-tray i:nth-child(2) { background: linear-gradient(180deg, #4A78D8, #1B3F8F); width: 22px; }
.lubws--whiteboard .lubws-tray i:nth-child(3) { background: linear-gradient(180deg, #4C4C4C, #1E1E1E); width: 18px; }

/* ===================================================================
   الجوال — لا فيض أفقي، والإجابة تمتدّ رأسيًا
   =================================================================== */
@media (max-width: 640px) {
  .lubws-frame { padding: 8px; }
  .lubws-sheet { padding: 16px 15px 14px; }
  .lubws--paper .lubws-sheet { padding-inline-start: 30px; }
  .lubws--paper .lubws-grain::before { inset-inline-start: 20px; }
  .lubws-body { font-size: 1.05rem; line-height: 1.95; }
  .lubws-body table { font-size: .88em; }
}

/* ===================================================================
   حركة مخفّضة — النتيجة فورًا، والسطح كما هو
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lubws-tool { display: none; }
  .lubws-shutter { display: none; }
  .lubws-sign i { transition: none; }
}