/*
  demo.css — ההדמיה המתוסרטת בדף-הנחיתה (spec-client-magnet §2 · D-1).

  למה קובץ נפרד ולא <style> בעמוד: ה-<style> דווקא כן היה עובד (style-src מתיר 'unsafe-inline'),
  אבל demo.js **חייב** להיות קובץ נפרד (script-src 'self' בלי 'unsafe-inline'), ושמירת שניהם יחד
  מונעת מצב שבו מישהו יעביר בעתיד גם את ה-JS לתוך העמוד ויקבל דף שנראה תקין ולא עושה כלום.

  עיצוב: ברירת-המחדל כאן היא טוקני-הבית — בלי זהות-וואטסאפ. חריג מוכרע: chat.html
  עוטף את הדמו בסקין-מראה-וואטסאפ מלא (הכרעת-בעלים 03.08, מעוגנת ב-spec §9 A-4) —
  בתוך מוקאפ-הטלפון בלבד, ועדיין בלי תג-"מאומת" ובלי לוגו (הצגה-שאינה-אמת על Baileys).
*/

.demo {
  --demo-bezel: #0d1b2a;
  --demo-chat-bg: #eef3f8;
  --demo-bot-bg: #ffffff;
  --demo-user-bg: #dbeafe;
}

.demo-grid {
  display: grid;
  gap: 26px;
  align-items: start;
}
@media (min-width: 860px) {
  .demo-grid { grid-template-columns: 1fr 340px; gap: 40px; }
}

/* ── עמודת-הטקסט ── */
.demo-caption { min-height: 168px; }
.demo-step {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--pill); padding: 5px 13px;
  font-size: .88rem; font-weight: 700; color: var(--muted);
}
.demo-caption h3 { font-size: 1.5rem; line-height: 1.25; margin: 12px 0 8px; letter-spacing: -.4px; }
.demo-caption p { margin: 0; color: var(--muted); font-size: 1.05rem; }

.demo-controls { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.demo-next {
  border: 0; background: var(--grad); color: #fff; font: inherit; font-weight: 700;
  padding: 13px 24px; border-radius: var(--pill); cursor: pointer; min-height: 48px;
  box-shadow: 0 4px 14px rgba(31, 111, 190, .22);
}
.demo-next:hover { filter: brightness(1.06); }
.demo-next:focus-visible { outline: 3px solid #c8aa7855; outline-offset: 2px; }
.demo-next[disabled] { opacity: .5; cursor: default; box-shadow: none; }

.demo-dots { display: flex; gap: 7px; }
.demo-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  transition: background .2s, transform .2s;
}
.demo-dots i[data-on] { background: var(--blue); transform: scale(1.25); }

.demo-replay {
  border: 0; background: none; font: inherit; color: var(--muted);
  cursor: pointer; padding: 8px 4px; text-decoration: underline;
}
.demo-replay:focus-visible { outline: 3px solid #c8aa7855; outline-offset: 2px; }

/* ── הטלפון ── */
.demo-phone {
  background: var(--demo-bezel); border-radius: 30px; padding: 10px;
  box-shadow: 0 18px 44px rgba(6, 27, 61, .22);
  max-width: 340px; margin-inline: auto; width: 100%;
}
.demo-screen {
  background: var(--demo-chat-bg); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; height: 480px;
}
.demo-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff; padding: 12px 14px;
}
.demo-bar img { width: 32px; height: 32px; border-radius: 50%; background: #fff; object-fit: contain; }
.demo-bar .who { font-weight: 700; font-size: .95rem; line-height: 1.25; }

.demo-thread {
  flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin;
}

/* ── בועות ── */
.demo-msg {
  max-width: 86%; padding: 8px 11px 6px; border-radius: 12px; font-size: .87rem; line-height: 1.5;
  position: relative; white-space: pre-line; word-break: break-word;
  animation: demo-in .22s ease-out both;
}
.demo-msg.bot { align-self: flex-start; background: var(--demo-bot-bg); border-top-right-radius: 4px; }
.demo-msg.user { align-self: flex-end; background: var(--demo-user-bg); border-top-left-radius: 4px; }
.demo-msg time { display: block; font-size: .68rem; color: #8296ad; margin-top: 3px; text-align: left; }

@keyframes demo-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* ציטוט-תשובה: מוכיח זיכרון בלי לומר "אני זוכר" */
.demo-quote {
  border-inline-start: 3px solid var(--blue); background: #ffffff88;
  border-radius: 6px; padding: 5px 8px; margin-bottom: 5px;
  font-size: .78rem; color: var(--muted);
}
.demo-quote b { display: block; color: var(--blue); font-size: .74rem; margin-bottom: 1px; }

/* קובץ מצורף */
.demo-file { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.demo-file span[aria-hidden] { font-size: 1.15rem; }

/* חיווי-הקלדה */
.demo-typing {
  align-self: flex-start; background: var(--demo-bot-bg); border-radius: 12px; border-top-right-radius: 4px;
  padding: 11px 13px; display: flex; gap: 4px;
}
.demo-typing.user { align-self: flex-end; background: var(--demo-user-bg); border-top-left-radius: 4px; border-top-right-radius: 12px; }
.demo-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9db0c6; animation: demo-blink 1.1s infinite; }
.demo-typing i:nth-child(2) { animation-delay: .18s; }
.demo-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes demo-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ── סיום ── */
.demo-end { margin-top: 18px; }
.demo-end .cta { font-size: 1.02rem; padding: 14px 24px; min-height: 52px; }
.demo-end p { margin: 10px 0 0; font-size: .95rem; color: var(--muted); }

/* ── כתב-ויתור: הנתונים בדוגמה בדויים. ב-about.html — נשאר; מ-chat.html הוסר
   בהכרעת-בעלים 03.08 (שאלה פתוחה לעו"ד בסקירת-האתר). ── */
.demo-note {
  margin: 16px auto 0; max-width: 340px; font-size: .82rem; color: var(--muted); line-height: 1.5; text-align: center;
}

/* ── נגישות: מי שביקש פחות תנועה מקבל את השיחה מיד ובלי הנפשות ── */
@media (prefers-reduced-motion: reduce) {
  .demo-msg { animation: none; }
  .demo-typing i { animation: none; opacity: .55; }
  .demo-dots i { transition: none; }
}

@media (max-width: 640px) {
  .demo-caption { min-height: 0; }
  .demo-caption h3 { font-size: 1.28rem; }
  .demo-screen { height: 420px; }
}