/* ============================================================================
   holo11.css — צ'אט "מגילה" למסכים 3 + 15 (סבב יוסף 24.07).
   מסגרת חלון-צ'אט בשפת מכתב/מגילה, כותרת עדינה בראשה, גדילה לגובה.
   שתי גרסאות: .chat-v-a (CSS) · .chat-v-b (ארט 9-slice).
   ============================================================================ */

.h11-stack {
  justify-content: flex-start;
  padding-top: clamp(30px, 4.4vh, 48px);
  gap: calc(var(--air) * 1.0);
}
/* כותרת מסך 15 (על העולם — קו-מתאר מ-R6 חל אוטומטית) */
.h11-title { margin-bottom: calc(var(--air) * .2); }

/* ═══════════ המסגרת — רוחב קבוע, גדלה לגובה ═══════════ */
.h11-scroll {
  width: min(88%, 500px);
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  /* הגובה מונפש ע"י growTo() ב-JS — "מתחילה קטנה וגדלה" */
  transition: height .5s cubic-bezier(.22, 1, .36, 1);
}

/* ═══ כותרת-השיחה בראש המסגרת (מסגרת-משנה עדינה, לא בולטת) ═══
   ⚠️ יוסף: "הכול צפוק — מרווחים מהשוליים ואחד מהשני." אוויר נדיב. */
.h11-head {
  display: flex; align-items: center; gap: 13px;
  padding: calc(var(--air) * 1.25) calc(var(--air) * 1.5);
  border-bottom: 1px solid rgba(200, 160, 92, .3);
  position: relative; z-index: 2;
}
.h11-avatar {
  width: clamp(44px, 13vw, 54px); height: clamp(44px, 13vw, 54px);
  flex: 0 0 auto; border-radius: 50%; object-fit: cover;
  /* drop-shadow (לא box-shadow — הוא מצייר מלבן) בגוון מותג קבוע */
  filter: drop-shadow(0 2px 9px rgba(226, 154, 182, .55));
}
.h11-avatar.fb { object-fit: contain; }        /* קרסט-גיבוי אינו דיוקן */
.h11-who {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; line-height: 1.15;
}
.h11-name {
  font-weight: 400;
  font-size: clamp(15px, calc(var(--u) * 4.6), 19px);
  color: var(--lw-ink-strong, #5C4657);
}
.h11-status {
  font-size: clamp(11.5px, calc(var(--u) * 3.4), 13.5px);
  color: #A98C6B;
  transition: color .3s ease;
}
.h11-status.typing { color: #C25E8A; }         /* "מקלידה…" בוורוד עדין */

/* ═══ גוף הבועות — נשען בתחתית המסגרת, גדל כלפי מטה ═══ */
.h11-body {
  display: flex; flex-direction: column;
  gap: calc(var(--air) * 1.15);                 /* אוויר נדיב בין הבועות */
  padding: calc(var(--air) * 1.6) calc(var(--air) * 1.5) calc(var(--air) * 1.9);
  position: relative; z-index: 2;
}
.h11-msg {
  align-self: flex-start;                       /* התקבל מנסיה — צד ההתחלה (ימין ב-RTL) */
  max-width: 85%;
  padding: calc(var(--air) * 1.0) calc(var(--air) * 1.35);
  border-radius: 17px 17px 17px 6px;            /* זנב-בועה בפינת ההתחלה */
  background: linear-gradient(168deg, #FFFDF9, #FBF1E1);
  border: 1px solid rgba(200, 158, 96, .5);
  box-shadow: 0 3px 10px rgba(202, 132, 160, .16), inset 0 1px 0 #fff;
  color: var(--lw-ink-strong, #5C4657);
  opacity: 0; transform: translateY(10px) scale(.98);
}
.h11-msg.in {
  animation: h11Rise 460ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes h11Rise {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.h11-msg span {
  display: block;
  font-size: clamp(14px, calc(var(--u) * 4.3), 18px);
  line-height: 1.5;
}
.h11-msg span + span { margin-top: .28em; }

/* מקליד — שלוש נקודות נושמות בבועה קטנה */
.h11-typing {
  align-self: flex-start;
  display: none; gap: 5px;
  padding: 12px 15px; border-radius: 15px 15px 15px 5px;
  background: linear-gradient(168deg, #FFFDF9, #FBF1E1);
  border: 1px solid rgba(200, 158, 96, .45);
}
.h11-typing.on { display: inline-flex; }
.h11-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #C99BB0;
  animation: h11Dot 1.2s ease-in-out infinite;
}
.h11-typing i:nth-child(2) { animation-delay: .18s; }
.h11-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes h11Dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

/* ה-CTA (‎.lw-btn ⇒ הפלאק הוורוד + שורה-אחת של holo10 חלים אוטומטית) */
.h11-cta {
  margin-top: calc(var(--air) * .3);
  opacity: .0; transition: opacity .5s ease;
}
.h11-cta.on { opacity: 1; }

/* ═══════════════════ גרסה A — מגילת CSS ═══════════════════
   קלף שמנת + מסגרת זהב + מסגרת-פנים כפולה (שפת קלפי-האורקל של נסיה). */
.chat-v-a .h11-scroll {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,246,232,.9), transparent 60%),
    linear-gradient(168deg, #FFFDF7, #F4E7CD);
  border: 1.5px solid rgba(196, 158, 90, .8);
  border-radius: 20px;
  box-shadow:
    0 26px 60px rgba(122, 58, 82, .26),
    0 8px 20px rgba(122, 58, 82, .14),
    inset 0 1px 0 #fff;
}
.chat-v-a .h11-scroll::before {
  content: ''; position: absolute; inset: 8px;
  border-radius: 14px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(202, 162, 94, .45);
}

/* ═══════════════════ גרסה B — מגילת ארט (9-slice) ═══════════════════
   נכס מגולל: קצה עליון/תחתון מעוטר קבוע, אמצע-קלף נמתח לגובה.
   border-image slices: top 150 / right 70 / bottom 150 / left 70 (פיקסלים
   בקובץ), fill שומר את מרכז-הקלף כרקע. */
.chat-v-b .h11-scroll {
  /* שני פסי-ארט מוצמדים (עליון/תחתון) + מילוי קלף; ריפוד-אחוזים תואם
     את גובה-התצוגה של הפס (176/827 = 21.3% מהרוחב) כך שהתוכן לא מכסה
     את העיטור, בכל רוחב. הפסים נשארים בלתי-מעוותים כשהמסגרת גדלה. */
  background:
    url('../assets/ui/scroll-top-v1.webp') top center / 100% auto no-repeat,
    url('../assets/ui/scroll-bot-v1.webp') bottom center / 100% auto no-repeat,
    linear-gradient(168deg, #FFFDF6, #F6EAD2);
  border: 0; border-radius: 0;
  padding-top: 18.5%; padding-bottom: 18.5%;
  filter: drop-shadow(0 16px 40px rgba(122, 58, 82, .3));
}
.chat-v-b .h11-head { border-bottom-color: rgba(200,160,92,.28); }

/* ═══ דסקטופ — הצ'אט ממורכז, לא נדבק לקצה ═══ */
@media (min-aspect-ratio: 4/5) {
  .h11-scroll { width: min(80%, 480px); }
}

@media (prefers-reduced-motion: reduce) {
  .h11-scroll { transition: none; }
  .h11-msg { opacity: 1; transform: none; animation: none; }
  .h11-typing i { animation: none; }
}