/* ═══════════════════════════════════════════════════════════════
   مدرستنا — ستايل الشات بوت

   ── القاعدة الحاكمة ──
   **ولا لون ثابت واحد في الملف ده.** كل لون متغيّر من `css/style.css`،
   وده مش ترتيب شكلي — ده اللي بيخلي **الوضع الليلي يشتغل مجاناً**،
   لأن المتغيرات بتنقلب مركزياً في القسم 20 هناك. أي لون مكتوب بالإيد
   هيفضل فاتح بالليل ويكسر الشكل.

   ── الهوية ──
   كراسة مدرسة: رسالة المستخدم مظلَّلة بالقلم الأصفر (--hi)، ورد الشات
   على ورق الكارت بخط الهامش الأحمر (--margin-red) على جنبه.

   ── الزر ──
   `#chat-fab` بياخد كلاس `.wa-float` كمان، فبيرث من القسم 15 في
   `style.css`: الموضع وenv() ومسافة آيفون، والارتفاع فوق بانر التثبيت،
   والاختفاء في وضع الصيانة وعند الطباعة. هنا بنغيّر المظهر وحده.

   ── الأرضية ──
   iOS 15 WebKit — كل `dvh` يسبقه سطر `vh`.
   وممنوع `letter-spacing` على أي نص عربي (بيكسر اتصال الحروف).
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────── 1. الزر العايم ─────────────────── */

.chat-fab{
  /* الموضع والحجم موروثان من .wa-float — ده المظهر وحده */
  border:0;padding:0;cursor:pointer;
  background:var(--ink);
  color:var(--on-accent);
  display:grid;place-items:center;
}
.chat-fab svg{width:26px;height:26px;display:block}

/* على الشاشات الصغيرة الزر بيتوارى وقت الفتح عشان ما يغطيش النافذة.
   الإغلاق من ✕ في الرأس أو من Escape. */
body.chat-open .chat-fab{display:none}
@media (min-width:560px){
  body.chat-open .chat-fab{display:grid}
}


/* ─────────────────── 2. النافذة ─────────────────── */

.chat-panel{
  position:fixed;z-index:60;
  inset-block-end:calc(14px + env(safe-area-inset-bottom, 0px));
  inset-inline-start:calc(14px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
  inset-inline-end:calc(14px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));

  display:flex;flex-direction:column;
  /* 75% من شاشة الموبايل. `height` لا `max-height` عشان النافذة تبقى
     بنفس المقاس دايماً — رسالة واحدة أو عشرة، مفيش نطّ في الارتفاع.
     وسطر `vh` قبل `dvh` لأرضية iOS 15. */
  height:75vh;
  height:75dvh;
  overflow:hidden;

  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
}

/* ⚠️ لازم يفضل بعد القاعدة اللي فوق.
   `hidden` بيشتغل بـ display:none من ستايل المتصفح، وأي display في
   ستايلنا بيغلبه — فمن غير السطر ده النافذة بتفضل مرسومة فاضية على
   الصفحة من أول ما تفتح. */
.chat-panel[hidden]{display:none}

/* من 560px: النافذة بتبقى عمود جنبي بعرض ثابت فوق الزر */
@media (min-width:560px){
  .chat-panel{
    inset-inline-end:auto;
    inset-block-end:calc(76px + env(safe-area-inset-bottom, 0px));
    width:min(380px, calc(100vw - 36px));
    height:min(580px, 72vh);
    height:min(580px, 72dvh);
  }
}

/* بانر تثبيت التطبيق بيدفع الزر لفوق، والنافذة تمشي معاه */
body.has-install-banner .chat-panel{
  inset-block-end:calc(22px + var(--install-banner-h, 96px) + env(safe-area-inset-bottom, 0px));
}
@media (min-width:769px){
  body.has-install-banner .chat-panel{
    inset-block-end:calc(76px + env(safe-area-inset-bottom, 0px));
  }
}


/* ─────────────────── 3. الرأس ─────────────────── */

.chat-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--card);
  border-block-end:1px solid var(--line);
}
.chat-head-text{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-head-text strong{color:var(--ink-deep);font-size:1rem;line-height:1.3}
.chat-head-text span{color:var(--muted);font-size:.78rem;line-height:1.4}

/* زر واتساب ثابت هنا — مش بيظهر عند الفشل بس.
   ده شرط قرار استبدال الزر العايم: أي حد عايز واتساب يوصله بدوستين
   بلا كتابة ولا انتظار رد. */
.chat-wa{
  flex:none;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--wa);color:#fff;
}
.chat-wa svg{width:21px;height:21px;display:block}
.chat-wa:hover{text-decoration:none}
@media (hover:hover){
  .chat-wa:hover{filter:brightness(1.08)}
}

.chat-x{
  flex:none;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:transparent;color:var(--muted);
  font-size:1rem;cursor:pointer;
  touch-action:manipulation;
}
@media (hover:hover){
  .chat-x:hover{background:var(--rule);color:var(--ink-deep)}
}


/* ─────────────────── 4. الرسايل ─────────────────── */

.chat-list{
  flex:1;min-height:120px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
}

.chat-msg{
  max-width:88%;
  padding:9px 12px;
  border-radius:var(--radius-sm);
  font-size:.92rem;line-height:1.7;
  word-wrap:break-word;overflow-wrap:break-word;
}

/* رد الشات — ورق الكارت بخط الهامش الأحمر، زي عناوين الموقع */
.chat-msg-bot{
  align-self:flex-start;
  background:var(--card);
  color:var(--graphite);
  border:1px solid var(--line);
  border-inline-start:2px solid var(--margin-red);
}

/* رسالة المستخدم — القلم الأصفر */
.chat-msg-user{
  align-self:flex-end;
  background:var(--hi);
  color:var(--hi-ink);
  font-weight:700;
}

.chat-msg a{color:var(--ink);text-decoration:underline}


/* ─────────────────── 5. الاقتراحات — الطبقة 0 ─────────────────── */

/* ── اللوحة ──
   المحاولة الأولى كانت شريط اقتراحات تحت الرسايل، والاتنين ضاقوا على
   الموبايل — مفيش مساحة تتقسم على شاشة 360px. دلوقتي اللوحة بتغطي
   مساحة المحادثة كلها، وبتقفل أول ما المستخدم يختار. */

.chat-body{
  position:relative;                /* مرجع اللوحة المطلقة */
  flex:1;min-height:0;
  display:flex;flex-direction:column;
}

/* اللوحة شفافة بـ blur فوق المحادثة — المستخدم يفضل حاسس إن الشات
   وراها، فهي طبقة مؤقتة مش صفحة تانية. */
.chat-sheet{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.chat-sheet[hidden]{display:none}

/* الشفافية بطبقة منفصلة لا بـ rgba: القاعدة إن مفيش لون ثابت في الملف
   ده، و`color-mix` مش مدعومة على أرضية iOS 15. الطبقة دي بتاخد
   `--paper` زي ما هي فبتقلب مع الوضع الليلي لوحدها. */
.chat-sheet::before{
  content:"";position:absolute;inset:0;
  background:var(--paper);opacity:.88;
}
.chat-sheet > *{position:relative}   /* فوق طبقة التعتيم */

.chat-sheet-head{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-block-end:1px dashed var(--border-dashed);
}
.chat-sheet-head strong{display:block;color:var(--ink-deep);font-size:.92rem}
.chat-sheet-head span{display:block;color:var(--muted);font-size:.74rem;line-height:1.5}
.chat-sheet-head > div{flex:1;min-width:0}

/* الأسئلة كروت مرصوصة فوق بعض — عمود واحد دايماً، حتى على الشاشات
   الواسعة. العمودين كانوا بيخلوا العين تلف يمين وشمال بدل ما تنزل. */
.chat-stack{
  flex:1;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.chat-stack .chat-chip{
  text-align:start;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:12px 14px;
  min-height:48px;                  /* أكبر من حد اللمس — أسهل على الإبهام */
  font-size:.9rem;
  animation:chat-rise .2s ease both;
}
/* تتابع بسيط يدّي إحساس الرصّة. الحركة كلها بتتلغى تحت
   prefers-reduced-motion بالقاعدة العامة في `css/style.css`. */
.chat-stack .chat-chip:nth-child(1){animation-delay:.00s}
.chat-stack .chat-chip:nth-child(2){animation-delay:.03s}
.chat-stack .chat-chip:nth-child(3){animation-delay:.06s}
.chat-stack .chat-chip:nth-child(4){animation-delay:.09s}
.chat-stack .chat-chip:nth-child(5){animation-delay:.12s}
.chat-stack .chat-chip:nth-child(6){animation-delay:.15s}
.chat-stack .chat-chip:nth-child(n+7){animation-delay:.18s}

@keyframes chat-rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* ── مؤشر الانتظار ──
   الطبقة 3 وحدها هي اللي بتوصله؛ الطبقات 0 و1 و2 بترد فوراً فمش
   بيظهر أصلاً. تلات نقط بتنبض بالتناوب. */
.chat-typing{
  display:flex;gap:5px;align-items:center;
  padding:0 18px 10px;
}
.chat-typing[hidden]{display:none}
.chat-typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted);opacity:.4;
  animation:chat-pulse 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}

@keyframes chat-pulse{
  0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* الإدخال مقفول أثناء الانتظار — مفيش طلبين متوازيين أبداً */
.chat-input:disabled,.chat-send:disabled{opacity:.55;cursor:not-allowed}

/* ── عدّاد الرد الذكي ──
   فوق خانة الكتابة، وهادي عن قصد: ده تنبيه لا إنذار. الطالب اللي
   لسه معاه أسئلة ما ينفعش يحس إنه بيتعد عليه. */
.chat-quota{
  margin:0;padding:0 16px 6px;
  font-size:11.5px;line-height:1.5;
  color:var(--muted);opacity:.8;text-align:center;
}
.chat-quota[hidden]{display:none}

/* شريط «أسئلة تانية» — تحت الرسايل، بيظهر بعد أول رد */
.chat-more-bar{
  padding:0 14px 10px;
  display:flex;
}
.chat-more-bar[hidden]{display:none}

.chat-chip{
  min-height:34px;padding:6px 12px;
  border:1px dashed var(--border-dashed);
  border-radius:999px;
  background:transparent;color:var(--ink);
  font:inherit;font-size:.82rem;
  cursor:pointer;touch-action:manipulation;
}
@media (hover:hover){
  .chat-chip:hover{background:var(--info-bg);border-style:solid}
}

/* «أسئلة تانية» — مصمت عشان يبان إنه إجراء مش سؤال */
.chat-more{
  background:var(--info-bg);
  border-style:solid;border-color:var(--info-border);
  font-weight:700;
}


/* ─────────────────── 6. خانة الكتابة ─────────────────── */

.chat-form{
  display:flex;gap:8px;
  padding:10px 14px;
  border-block-start:1px solid var(--line);
  background:var(--card);
}

.chat-input{
  flex:1;min-width:0;
  min-height:44px;                  /* الحد الأدنى للمس */
  padding:0 12px;
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--graphite);
  font:inherit;font-size:.92rem;
}
.chat-input:focus{outline:2px solid var(--ink);outline-offset:1px}

.chat-send{
  flex:none;
  min-height:44px;padding-inline:16px;
  border:0;border-radius:var(--radius-sm);
  background:var(--ink);color:var(--on-accent);
  font:inherit;font-size:.88rem;font-weight:700;
  cursor:pointer;touch-action:manipulation;
}
.chat-send:active{transform:scale(.97)}
@media (hover:hover){
  .chat-send:hover{background:var(--ink-deep)}
}


/* ─────────────────── 7. تحذير الخصوصية ─────────────────── */

/* ظاهر دايماً، مش تنبيه بيتقفل: المحادثات على الخطة المجانية ممكن
   جوجل تستخدمها، والمستخدمون أطفال. */
.chat-privacy{
  margin:0;
  padding:0 14px 10px;
  background:var(--card);
  color:var(--muted);
  font-size:.72rem;line-height:1.5;
  text-align:center;
}


/* ─────────────────── 8. الصيانة والطباعة ─────────────────── */

body.is-maintenance .chat-panel{display:none}

@media print{
  .chat-fab,.chat-panel{display:none}
}