/* הצ'אט: פקודה שנשלחה, הסוכן עובד, מצב צ'אט */
/* ===== פקודה שנשלחה ===== */
/* אזור הגלילה של הצ'אט: הוא היחיד שנגלל, והעמוד עצמו לא נגלל אף פעם,
   כך שיש פס גלילה אחד בלבד (בצד ימין: הכיוון כאן משמאל לימין, והצ'אט בפנים מימין לשמאל).
   אותו מרווח שמור משני הצדדים, כדי שהצ'אט ממורכז בדיוק כמו השדה הראשי */
.chat-scroll {
  display: none;
}
.chat-mode .chat-scroll {
  display: block;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  direction: ltr;
  scrollbar-gutter: stable both-edges;
}
/* הצ'אט: 50 פיקסלים מלמעלה, באותו רוחב ומיקום כמו השדה הראשי,
   כך שהצד הימני של הפקודה בקו אחד עם הצד הימני של השדה */
.thread {
  direction: rtl;
  margin: 0 auto;
  padding-top: calc(50px + env(safe-area-inset-top, 0px));
  /* מקום לשדה הצף בתחתית, כדי שההודעה האחרונה נגמרת 50 פיקסלים מעליו */
  /* כשהודעת המכסה מופיעה, המקום גדל בגובה שלה, כך שההודעה האחרונה נשארת 50 פיקסלים מעליה */
  /* כשהשדה הראשי גדל לשתי שורות (--box-extra), גם המקום הזה גדל */
  /* --row-grow: הגדילה של שורת הפקודות כשמגדילים את "גודל טקסט" בתפריט הנגישות */
  /* --phone-tail: מקום ריק בסוף, כשצריך אותו כדי שתחילת התשובה האחרונה תגיע לחלק העליון של הצ'אט */
  padding-bottom: calc(158px + var(--row-grow, 0px) + var(--quota-cover, 0px) + var(--box-extra, 0px) + var(--phone-tail, 0px) + env(safe-area-inset-bottom, 0px));
  /* אותו רוחב כמו השדה הראשי, מחושב מרוחב המסך ולא מאזור הגלילה,
     כדי שהרווח ששמור לפס הגלילה לא יזיז את היישור במסך צר */
  width: min(600px, calc(100vw - var(--sidebar-width) - 32px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* תשובת הסוכן 50 פיקסלים מתחת לפקודה */
  gap: 50px;
}
.thread:empty {
  display: none;
}
/* כמה תשובות של הסוכן ברצף: 15 פיקסלים ביניהן (במקום 50), והלוגו רק ליד הראשונה */
.thread .agent-answer + .agent-answer {
  margin-top: -35px;
}
.thread .agent-answer + .agent-answer .agent-logo {
  display: none;
}
/* אותו עיצוב כמו השדה הראשי. הרוחב לפי הטקסט: 18 פיקסלים מימין ו-18 משמאל.
   שורה אחת בגובה 58; פקודה ארוכה עוברת לשתי שורות עם אותו מרווח למעלה ולמטה */
.sent-command,
.agent-answer {
  max-width: min(500px, 100%);
  background: var(--box-bg);
  border: 1px solid var(--box-stroke);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: calc(24px * var(--a11y-text, 1));
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}
/* תשובת הסוכן: אותו עיצוב, בצד שמאל, בקו אחד עם הצד השמאלי של השדה הראשי */
.agent-answer {
  align-self: flex-end;
}
/* תשובת הסוכן: שבירות שורה נשמרות כמו שהסוכן כתב אותן */
.agent-answer {
  white-space: pre-line;
  position: relative;
}
/* לוגו הסוכן: בגובה 28 (פי 2.5 מגובה אות גדולה בטקסט), משמאל לתשובה במרווח 18. בצ'אט, בהיסטוריה ובכל מקום.
   הוא ממוקם כמו בתשובה של שורה אחת (ממורכז על גובה 58), ונשאר באותו מקום
   גם כשהתשובה ארוכה יותר, כך שהוא תמיד ליד השורה הראשונה.
   המיקום נמדד מתוך המסגרת: (56 - 28) / 2 = 14, כלומר 15 מהקצה החיצוני */
.agent-logo {
  position: absolute;
  top: calc((56px - 28px) / 2);
  right: calc(100% + 1px + 18px);
  display: block;
  width: auto;
  height: 28px;
  pointer-events: none;
}
/* לוגו הסוכן ליד התשובה ובזמן החשיבה: כחול (צבע ההדגשה של האתר, --selected) במצב בהיר,
   ובמצב כהה אותו כחול בדיוק כמו במצב בהיר (#1E6DF6). בניגודיות גבוהה: הכחול של מצב הניגודיות */
svg.agent-logo {
  color: var(--selected);
}
:root[data-theme="dark"] svg.agent-logo {
  color: #1E6DF6;
}
:root.a11y-contrast[data-theme="dark"] svg.agent-logo {
  color: var(--selected);
}
/* ההודעה השנייה אחרי תשובה מהמאגר שיש לה מחשבון: כל ההודעה כפתור, בכחול של האתר עם טקסט לבן וחץ בסוף */
.agent-answer.qa-calc-prompt {
  background: #1E6DF6;
  border-color: #1E6DF6;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.qa-calc-prompt .qa-calc-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .agent-answer.qa-calc-prompt:hover {
    background: #1A5FD6;
    border-color: #1A5FD6;
  }
}
.agent-answer.qa-calc-prompt:focus-visible {
  outline: 2px solid #1E6DF6;
  outline-offset: 2px;
}
/* טווח של מספרים או תאריכים בתשובה ("2025-2027"): לא נשבר בין שורות */
.answer-range {
  white-space: nowrap;
}
.agent-answer a {
  color: var(--selected);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* בזמן שהסוכן עובד, ובהודעת שגיאה */
.agent-answer.is-waiting,
.agent-answer.is-error {
  color: var(--placeholder);
}
/* בזמן שהסוכן חושב: שלוש נקודות כחולות (#1E6DF6) שנדלקות אחת אחרי השנייה, משמאל לימין, במקום טקסט.
   כל נקודה 8 על 8, 6 פיקסלים ביניהן, ממורכזות בגובה השורה (24) */
.thinking-dots {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  vertical-align: top;
}
.thinking-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--send-active);
  /* לפני שהאנימציה של נקודה מתחילה (בזמן ההשהיה שלה), היא כבר במצב הכבוי,
     כך שמההתחלה הנקודות נדלקות משמאל לימין */
  opacity: 0.25;
  transform: scale(0.8);
  animation: thinking-dot 1.4s infinite ease-in-out both;
}
.thinking-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.thinking-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes thinking-dot {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-dots .dot {
    animation: none;
    opacity: 0.6;
  }
}
/* בזמן שהסוכן עובד: מילה לפי הפקודה ("Fetching data", "Calculating", "Thinking"...), בלי container,
   ליד הלוגו. פס כחול עובר על המילה משמאל לימין, בלולאה */
.agent-answer.is-waiting:has(.think-word) {
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
  background: none;
  overflow-wrap: normal;
}
/* הלוגו ליד מילת ההמתנה: באותו גודל, 10 פיקסלים מהמילה (אין container) */
svg.agent-logo {
  width: 28px;
}
.agent-logo .think-pupil {
  transform-box: view-box;
}
.agent-answer.is-waiting:has(.think-word) .agent-logo {
  right: calc(100% + 10px);
}
/* הלוגו בזמן ההמתנה באותה נקודה בדיוק כמו ליד התשובה: בתשובה הוא 19 פיקסלים משמאל לבועה (מסגרת + 18),
   ובהמתנה 10 פיקסלים מהמילה, ולכן בועת ההמתנה זזה 9 פיקסלים שמאלה */
@media (min-width: 768px) {
  .agent-answer.is-waiting:has(.think-word) {
    margin-left: -9px;
  }
}
/* בזמן ההמתנה הלוגו מופיע בהדרגה */
.agent-answer.is-waiting .agent-logo {
  animation: agent-logo-in 150ms ease-out both;
}
@keyframes agent-logo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-answer.is-waiting .agent-logo {
    animation: none;
  }
}
.think-word {
  direction: ltr;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
  vertical-align: top;
  font-size: calc(15px * var(--a11y-text, 1));
  font-weight: 500;
  color: var(--placeholder);
  /* הפס שעובר על הטקסט: בולט מעל האפור של המילה. במצב בהיר אפור כהה (#5C5C5C), ובמצב כהה לבן */
  --think-band: #5C5C5C;
  background: linear-gradient(90deg, var(--placeholder) 0%, var(--placeholder) 35%, var(--think-band) 50%, var(--placeholder) 65%, var(--placeholder) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: think-shimmer 1.8s linear infinite;
}
:root[data-theme="dark"] .think-word {
  --think-band: #FFFFFF;
}
/* משפט ההמתנה שמתחלף (שאלה חופשית): בעברית, מימין לשמאל, והפס עובר עליו מימין לשמאל.
   המשפט יוצא למעלה ונכנס מלמטה */
.think-word.is-steps {
  direction: rtl;
  animation-direction: reverse;
  transition: opacity 200ms ease, transform 200ms ease;
}
.think-word.is-step-out {
  opacity: 0;
  transform: translateY(-6px);
}
.think-word.is-step-in {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}
@keyframes think-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .think-word {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.sent-command .hl {
  color: var(--highlight);
}
.sent-command .selected {
  color: var(--selected);
}
/* ===== מצב צ'אט (אחרי שליחת פקודה ראשונה) ===== */
/* הכותרת נעלמת, והשדה הראשי צף בתחתית המסך, 50 פיקסלים מלמטה, גם בזמן גלילה */
/* רק הכותרת של דף הצ'אט ("איך אוכל לעזור לך היום?"). לא כותרות אחרות באתר, כמו בדף התוכניות */
.chat-mode .center > h1 {
  display: none;
}
/* אנימציה לכותרת "איך אוכל לעזור לך היום?", פעם אחת כשהאתר נטען:
   האותיות מופיעות אחת אחרי השנייה (מימין לשמאל), כל אות נדלקת בכחול #1E6DF6 ועוברת לשחור.
   0.04 שניות בין אות לאות, 0.6 שניות לכל אות */
.heading-word {
  display: inline-block;
  white-space: nowrap;
}
.heading-letter {
  display: inline-block;
  white-space: pre;
  animation: heading-letter 0.6s ease-out both;
}
@keyframes heading-letter {
  from {
    opacity: 0;
    color: var(--selected);
  }
  40% {
    opacity: 1;
    color: var(--selected);
  }
  to {
    opacity: 1;
    color: var(--text);
  }
}
.chat-mode .center {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  /* האזור הריק סביב השדה לא חוסם את פס הגלילה */
  pointer-events: none;
}
.chat-mode .center > * {
  pointer-events: auto;
}
/* משפט אזהרה מתחת לשדה הראשי, רק במצב צ'אט (כשהשדה בתחתית הדף).
   ממורכז באמצע המרווח של 50 בין השדה לתחתית הדף, כלומר 25 מלמטה.
   14, Regular, #9A9A9A */
.chat-disclaimer {
  display: none;
}
.chat-mode .chat-disclaimer {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(25px + env(safe-area-inset-bottom, 0px));
  transform: translateY(50%);
  margin: 0;
  padding: 0 16px;
  color: var(--placeholder);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* רקע בצבע העמוד מהחלק העליון של השדה עד תחתית המסך:
   הצ'אט שנגלל לא נראה מאחורי השדה ולא במרווח שמתחתיו */
.chat-mode .center::before {
  content: "";
  position: absolute;
  /* בלי לכסות את פס הגלילה בצד ימין (8 פיקסלים).
     כשהודעת המכסה מופיעה מעל השדה, הרקע עולה גם מאחוריה (--quota-cover: הגובה שלה + 15),
     כדי שהצ'אט לא ייראה מאחורי הטקסט שלה */
  /* מהחלק העליון של השדה, כך שהצ'אט עובר מאחורי שורת הפקודות (זכוכית).
     כשיש הודעה מעל השדה (מכסה, שורה כבויה), הרקע עולה עד מעל ההודעה (--mask-cover) */
  inset: calc(-1 * var(--mask-cover, 0px)) 8px 0 0;
  background: var(--bg);
  z-index: -1;
}
/* fade מעל השדה הראשי: הצ'אט שנגלל נמוג בהדרגה ב-50 הפיקסלים שמעל השדה, במקום להיחתך.
   50 כמו המרווח בין ההודעה האחרונה לשדה, כך שבסוף הגלילה ההודעה האחרונה לא נמוגה.
   כשהודעת המכסה מופיעה, ה-fade מתחיל מעליה ולא מאחוריה. הוא לא חוסם לחיצות */
.chat-mode .center::after {
  content: "";
  position: absolute;
  /* ה-fade הרגיל: 50 פיקסלים מעל השדה הראשי (גם מאחורי שורת הפקודות), או מעל ההודעה כשיש */
  bottom: calc(100% + var(--mask-cover, 0px));
  left: 0;
  right: 8px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0), var(--bg));
  pointer-events: none;
  z-index: -1;
}
/* חלון הפקודות נפתח מעל השדה, בתמונת מראה: 35 פיקסלים מהקצה התחתון שלו */
.chat-mode #calc-menu,
.chat-mode #data-menu,
.chat-mode #question-menu,
.chat-mode #deadline-menu,
.chat-mode #compare-menu,
.chat-mode #saved-menu,
.chat-mode #command-menu,
.chat-mode #deal-menu {
  top: auto;
  bottom: 35px;
}

/* כדור החשיבה ליד משפט ההמתנה (שאלה חופשית): במקום הלוגו, באותו גודל ובאותו מקום.
   כתמי צבע מטושטשים זזים בתוך העיגול, עם השתקפות רכה, והכדור "נושם" */
.think-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: #1E6DF6;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.18), inset 0 1.5px 3px rgba(255, 255, 255, 0.35), 0 1.5px 5px rgba(30, 109, 246, 0.35);
  animation: think-orb-breath 3s ease-in-out infinite;
}
.agent-answer.is-waiting .think-orb {
  animation: agent-logo-in 150ms ease-out both, think-orb-breath 3s ease-in-out infinite;
}
.think-orb i {
  position: absolute;
  border-radius: 50%;
  filter: blur(3.5px);
}
.think-orb .b1 { width: 78%; height: 78%; left: -14%; top: -11%; background: #0B4FD1; animation: think-orb-m1 3.2s ease-in-out infinite alternate; }
.think-orb .b2 { width: 72%; height: 72%; right: -18%; bottom: -14%; background: #5B9BFF; animation: think-orb-m2 2.6s ease-in-out infinite alternate; }
.think-orb .b3 { width: 54%; height: 54%; left: 25%; top: 32%; background: #AFCEF8; animation: think-orb-m3 3.8s ease-in-out infinite alternate; }
.think-orb .hl { width: 40%; height: 16%; left: 21%; top: 14%; background: rgba(255, 255, 255, 0.75); filter: blur(1.5px); transform: rotate(-30deg); animation: think-orb-hl 3s ease-in-out infinite alternate; }
.think-orb .hl2 { width: 14%; height: 28%; right: 16%; top: 40%; background: rgba(255, 255, 255, 0.45); filter: blur(1.5px); animation: think-orb-hl 2.4s ease-in-out infinite alternate-reverse; }
@keyframes think-orb-m1 { to { transform: translate(32%, 25%) scale(1.15); } }
@keyframes think-orb-m2 { to { transform: translate(-36%, -21%) scale(0.85); } }
@keyframes think-orb-m3 { 0% { transform: translate(-18%, 11%); } 100% { transform: translate(21%, -25%) scale(1.3); } }
@keyframes think-orb-hl { to { transform: translate(7%, 5%) rotate(-10deg); opacity: 0.5; } }
@keyframes think-orb-breath { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1); } }
/* הפחתת תנועה: הכדור עומד במקום */
@media (prefers-reduced-motion: reduce) {
  .think-orb, .think-orb i, .agent-answer.is-waiting .think-orb { animation: none; }
}