/* Secretus - הצ'אט באתר (chat.js), בכל העמודים: index.html, privacy.html, accessibility.html, terms.html.
   כפתור עגול בפינה הימנית התחתונה (כפתור הנגישות בפינה השמאלית), שפותח פאנל לא מודאלי: "שאלות על השירות".
   במחשב ובטאבלט הפאנל צף מעל הכפתור. בטלפון (עד 639px) הוא גיליון לכל הרוחב שעולה מלמטה, והגובה שלו לפי החלק
   הגלוי של המסך (chat.js מעדכן את --chat-vh ואת --chat-kb כשהמקלדת נפתחת), כך ששדה הכתיבה לא מוסתר.
   רק המשתנים של styles.css, שטוח (קו דק), ותנועה רק ב-transform ו-opacity, ורק כשיש motion על html (בלי בקשה לפחות
   תנועה ובלי "עצירת אנימציות" בתפריט הנגישות). הגדלת הטקסט ("גדול", "גדול מאוד") והניגודיות הגבוהה של תפריט הנגישות
   חלות גם כאן. בלי JS אין כפתור. */

/* ===== הכפתור ===== */
.chat-btn { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--coral); color: var(--ink); box-shadow: 0 0 0 2px var(--white), var(--shadow-btn); cursor: pointer; }
.chat-btn:hover { background: var(--coral-hover); }
.chat-btn svg { width: 28px; height: 28px; }
.chat-btn .chat-ic-close { display: none; }
.chat-btn[aria-expanded="true"] .chat-ic-open { display: none; }
.chat-btn[aria-expanded="true"] .chat-ic-close { display: block; }
/* כשכפתור מהתוכן עובר מתחתיו בגלילה (chat.js), הכפתור נעלם עד שהוא עובר, כמו כפתור הנגישות */
.chat-btn.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; }
.a11y-contrast .chat-btn { background: var(--ink); color: var(--white); }
.a11y-contrast .chat-btn:hover { background: var(--ink-2); }

/* ===== הפאנל ===== */
.chat-panel { --chat-fs: 1; position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px); z-index: 61; display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 120px)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); color: var(--ink-2); box-shadow: 0 6px 20px -16px rgba(10, 37, 50, .4); font-size: calc(15px * var(--chat-fs)); line-height: 1.6; }
@supports (height: 100dvh) {
  .chat-panel { height: min(620px, calc(100dvh - 120px)); }
}
.chat-panel[hidden] { display: none !important; }
.a11y-text-1 .chat-panel { --chat-fs: 1.15; width: min(430px, calc(100vw - 32px)); }
.a11y-text-2 .chat-panel { --chat-fs: 1.3; width: min(460px, calc(100vw - 32px)); }

/* הראש: הלוגו, הכותרת והסגירה */
.chat-head { display: flex; align-items: center; gap: 10px; flex: none; padding-block: 10px; padding-inline: 16px 8px; border-bottom: 1px solid var(--line); background: var(--mint); }
.chat-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-mint); }
.chat-mark svg { width: 24px; height: 24px; }
.chat-title { flex: 1; min-width: 0; margin: 0; color: var(--ink); font-size: calc(17px * var(--chat-fs)); font-weight: 700; line-height: 1.3; }
.chat-title:focus { outline: none; }
.chat-title:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.chat-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.chat-close:hover { background: var(--white); }
.chat-close svg { width: 22px; height: 22px; }

/* הגוף נגלל: הפתיח, השיחה והשאלות לדוגמה. השדה נשאר קבוע למטה */
.chat-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 6px; }
.chat-intro { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.chat-intro p { margin: 0; }
.chat-lead { color: var(--ink-2); }
.chat-note { color: var(--muted); font-size: calc(13.5px * var(--chat-fs)); }
.chat-note a, .chat-msg a { color: var(--teal-ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(35, 114, 114, .35); text-underline-offset: 3px; }
.chat-note a:hover, .chat-msg a:hover { text-decoration-color: currentColor; }

.chat-log { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.chat-log:empty { padding-top: 0; }
.chat-msg { max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; }
.chat-msg p { margin: 0; }
/* ההודעה של המבקר: בועה בטורקיז בהיר בצד שמאל, כמו הודעה יוצאת בסרטונים. התשובה: טקסט רגיל לכל הרוחב */
.chat-msg--user { align-self: flex-end; max-width: 88%; padding: 8px 13px; border-radius: 14px; border-start-end-radius: 5px; background: var(--teal-tint); color: var(--ink); }
.chat-msg--assistant { align-self: stretch; color: var(--ink-2); }
.chat-msg--note { align-self: stretch; padding: 10px 12px; border-inline-start: 3px solid var(--coral); border-radius: var(--r-sm); background: var(--coral-tint); color: var(--ink); white-space: normal; }
.chat-msg--note a { color: var(--ink); }
.chat-foot { flex: none; margin: 0; padding: 0 14px; text-align: center; font-size: calc(14px * var(--chat-fs)); color: var(--muted); background: var(--white); }
.chat-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--teal-ink); font-weight: 700; white-space: nowrap; }
.chat-cta svg { width: 18px; height: 18px; }

/* "כותב...": שלוש נקודות (שקיפות בלבד), ובלי תנועה הן פשוט מוצגות */
.chat-typing { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding-top: 10px; color: var(--muted); }
.chat-typing[hidden] { display: none; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.motion .chat-typing span { animation: chat-dot 1.2s var(--ease) infinite; }
.motion .chat-typing span:nth-child(2) { animation-delay: .16s; }
.motion .chat-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: .3; }
  40% { opacity: 1; }
}

/* שאלות לדוגמה: כפתורים אמיתיים, שנעלמים אחרי ההודעה הראשונה */
/* שלוש השאלות המוצעות בשורה אחת. אם אין מקום (מסך צר או טקסט מוגדל), השורה נגללת לרוחב ולא נשברת */
.chat-suggest { display: flex; flex-wrap: nowrap; gap: 6px; padding-top: 14px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.chat-suggest::-webkit-scrollbar { display: none; }
.chat-suggest[hidden] { display: none; }
.chat-chip { flex: 1 0 auto; min-height: 40px; padding: 6px 11px; border: 1px solid var(--line-mint); border-radius: var(--r-pill); background: var(--mint); color: var(--ink); font-size: calc(13.5px * var(--chat-fs)); font-weight: 500; line-height: 1.3; text-align: center; white-space: nowrap; cursor: pointer; }
.chat-chip:hover { border-color: var(--teal-soft); background: var(--teal-tint); }
@media (max-width: 379px) {
  .chat-chip { padding: 6px 8px; font-size: calc(13px * var(--chat-fs)); }
}

/* השדה והשליחה */
.chat-form { display: flex; align-items: flex-end; gap: 8px; flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--white); }
.chat-field { position: relative; flex: 1; min-width: 0; }
.chat-input { display: block; width: 100%; min-height: 46px; max-height: 132px; padding: 11px 14px; border: 1px solid var(--line-field); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-size: max(16px, calc(15px * var(--chat-fs))); line-height: 1.45; resize: none; }
.chat-input::placeholder { color: var(--muted); opacity: 1; }
.chat-input:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 1px; border-color: var(--teal-ink); }
.chat-input:disabled { background: var(--mint); }
.chat-count { position: absolute; left: 10px; bottom: -1px; color: var(--muted); font-size: 12px; line-height: 1; pointer-events: none; }
.chat-count[hidden] { display: none; }
.chat-send { display: grid; place-items: center; width: 46px; height: 46px; flex: none; padding: 0; border: 0; border-radius: 12px; background: var(--coral); color: var(--ink); cursor: pointer; }
.chat-send:hover { background: var(--coral-hover); }
.chat-send:disabled { background: var(--line); color: var(--muted); cursor: default; }
.chat-send svg { width: 22px; height: 22px; }
.a11y-contrast .chat-send:not(:disabled) { background: var(--ink); color: var(--white); }

/* ===== טלפון: גיליון לכל הרוחב שעולה מלמטה ===== */
@media (max-width: 639px) {
  .chat-panel { right: 0; left: 0; bottom: var(--chat-kb, 0px); width: 100%; height: min(78vh, 640px); max-height: calc(var(--chat-vh, 100vh) - 12px); border-width: 1px 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -8px 24px -18px rgba(10, 37, 50, .45); }
  @supports (height: 100dvh) {
    .chat-panel { height: min(78dvh, 640px); max-height: calc(var(--chat-vh, 100dvh) - 12px); }
  }
  .a11y-text-1 .chat-panel, .a11y-text-2 .chat-panel { width: 100%; }
  .chat-head { padding-top: 12px; }
  .chat-form { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* מקלדת פתוחה: אין צורך ברווח לפס הבית של האייפון */
  .chat-kb-open .chat-form { padding-bottom: 12px; }
  /* הגיליון מכסה את הפינה, ולכן הכפתור מוסתר (וגם יוצא מסדר המקלדת) עד שהגיליון נסגר */
  .chat-open .chat-btn { visibility: hidden; }
}

/* ===== תנועה: פתיחה קלה (שקיפות ותזוזה קטנה), רק כשיש motion ===== */
.motion .chat-btn { transition: opacity var(--dur-1) var(--ease), visibility 0s linear 0s, transform var(--dur-1) var(--ease); }
.motion .chat-btn.is-tucked { transition: opacity var(--dur-1) var(--ease), visibility 0s linear var(--dur-1); }
.motion .chat-btn:active { transform: scale(.96); }
.motion .chat-panel.is-entering { opacity: 0; transform: translateY(12px); }
.motion .chat-panel { transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }

/* הכפתור לא מכסה את סוף העמוד: מקום בתחתית הפוטר (כמו בתפריט הנגישות, עד 1340px) */
.chat-ready { scroll-padding-bottom: 80px; }
@media (max-width: 1339px) {
  .chat-ready .site-footer { padding-bottom: 72px; }
}

@media print {
  .chat-btn, .chat-panel { display: none !important; }
}