/* דף שדרוג תוכנית */
/* ===== דף "שדרוג תוכנית" ===== */
/* דף מלא מעל כל האתר, רקע #FFFFFF. נפתח ונסגר בהדרגה, במהירות (120ms) */
.upgrade-page {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--box-bg);
  outline: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}
.upgrade-page.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .upgrade-page,
  .upgrade-page.is-open {
    transition: none;
  }
}
/* התוכניות תמיד במרכז הדף. המשפט מעליהן, 36 פיקסלים מעל, ולא נכנס לחישוב המרכוז */
.upgrade-content {
  position: relative;
  padding: 0 16px;
}
/* התוכניות בשורה, מימין לשמאל, 15 פיקסלים ביניהן */
.upgrade-plans {
  display: flex;
  justify-content: center;
  gap: 15px;
}
/* container תוכנית ("מתחיל"): רקע #FFFFFF, מסגרת 1 #DDDDDD, פינות 15.
   הגודל לפי התוכן: 30 למעלה ולמטה, 15 מימין ו-30 משמאל */
.plan-card {
  padding: 30px 15px 30px 30px;
  background: var(--box-bg);
  border: 1px solid var(--box-stroke);
  border-radius: 15px;
  text-align: right;
}
/* שם התוכנית: 20, medium, שחור */
.plan-name {
  margin: 0;
  color: var(--text);
  font-size: calc(20px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: 1;
}
/* תיאור: 14, Regular, #707070, 15 מתחת לשם */
.plan-description {
  margin: 15px 0 0;
  color: var(--c-707070);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
/* מחיר: 32, Regular, שחור, 30 מתחת לתיאור.
   משמאלו "/ בחודש" (14, medium, #9A9A9A), 10 פיקסלים ביניהם, על אותו קו תחתון */
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 30px 0 0;
  line-height: 1;
}
.plan-price-amount {
  color: var(--text);
  font-size: calc(32px * var(--a11y-text, 1));
  font-weight: 400;
  white-space: nowrap;
}
.plan-price-period {
  color: var(--placeholder);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 500;
  white-space: nowrap;
}
/* פרטי התוכנית: 30 מתחת לכפתור. 16, Regular, שחור.
   משמאל "/ בחודש" כמו ליד המחיר (14, medium, #9A9A9A), 10 פיקסלים ביניהם, על אותו קו תחתון */
.plan-feature {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 30px 0 0;
  line-height: 1;
}
/* סמל ליד פרט בתוכנית: כמו הסמלים בחלון ההגדרות (15 על 15, עובי קו 1.5, #9A9A9A).
   מימין לטקסט, 15 פיקסלים ביניהם, ממורכז לגובה השורה */
.plan-feature-icon {
  flex: none;
  align-self: center;
  display: block;
  width: 15px;
  height: 15px;
  margin-left: 5px; /* 10 (הרווח בשורה) + 5 = 15 מהטקסט */
  color: var(--placeholder);
}
/* פרט נוסף בתוכנית: 15 פיקסלים מתחת לפרט שמעליו */
.plan-feature + .plan-feature {
  margin-top: 15px;
}
.plan-feature-text {
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  white-space: nowrap;
}
/* container בחירת תוכנית: כפתור 30 מתחת למחיר, גובה 40, רקע ומסגרת 1 #000000.
   הרוחב מתרחב לרוחב התוכנית עם 15 מכל צד (משמאל התוכנית יש 30, ולכן הכפתור בולט 15 שמאלה),
   ברוחב מינימלי של 267. ב-hover הצבע משתנה ל-#404040 */
.plan-select {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 15px);
  min-width: 267px;
  height: 40px;
  margin: 30px 0 0 -15px;
  padding: 0;
  background: var(--c-000000);
  border: 1px solid var(--c-000000);
  border-radius: 20px;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  /* טקסט על כפתור בצבע הפוך לרקע: לבן על שחור, ובמצב כהה כהה על בהיר */
  color: var(--on-inverse);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .plan-select:hover{
    background: var(--c-404040);
    border-color: var(--c-404040);
  }
}
/* התוכנית הנוכחית של המשתמש: "תוכנית נוכחית", בלי מילוי, מסגרת #DDDDDD, טקסט #9A9A9A.
   לא לחיץ ולא משתנה ב-hover */
.plan-select.is-current,
:where(html:not(.phone-ui)) .plan-select.is-current:hover{
  background: none;
  border-color: var(--box-stroke);
  color: var(--placeholder);
  cursor: default;
}
.plan-select:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
/* מעל התוכניות: הסוכן, ומתחתיו המשפט. המשפט 36 פיקסלים מעל התוכניות */
.upgrade-head {
  position: absolute;
  bottom: calc(100% + 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: max-content;
  max-width: calc(100vw - 32px);
}
/* הסוכן בדף התוכניות: 60 על 60. בפעם הראשונה שהדף נפתח (פעם אחת בכל פתיחה של האתר)
   הוא מסתכל למטה-ימינה, למטה-שמאלה, חוזר למרכז וממצמץ (5 שניות), ואחר כך נשאר במרכז */
/* ל-viewBox יש 8 יחידות שוליים מכל צד, כדי שהעיגול לא ייגע בקצה של ה-SVG:
   כשהלוגו יוצא על חצי פיקסל (למשל בטלפון), הקצה הימני והתחתון שלו נחתכו.
   61 פיקסלים עם השוליים = עיגול של 60. וגם overflow: visible, כדי שה-SVG לא יחתוך את מה שבולט מעבר לגבול */
/* הלוגו בדף התוכניות: אותו גודל כמו מעל הכותרת בצ'אט (75 על 70 במחשב, 56 על 52 בטלפון) */
.upgrade-agent {
  display: block;
  width: 75px;
  height: 70px;
  overflow: visible;
  color: #141414;
}
:root[data-theme="dark"] .upgrade-agent {
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .upgrade-agent {
    width: 56px;
    height: 52px;
  }
}
.upgrade-agent .eyes {
  transform: translate(-120px, 0);
}
.upgrade-agent .eye {
  transform-box: fill-box;
  transform-origin: center;
}
.upgrade-agent.is-playing .eyes {
  animation: upgrade-agent-look 5s ease-in-out 1 both;
}
.upgrade-agent.is-playing .eye {
  animation: upgrade-agent-blink 5s ease-in-out 1 both;
}
@keyframes upgrade-agent-look {
  0%, 10% { transform: translate(-120px, 0); }
  25%, 40% { transform: translate(0, 90px); }
  55%, 70% { transform: translate(-240px, 90px); }
  85%, 100% { transform: translate(-120px, 0); }
}
@keyframes upgrade-agent-blink {
  0%, 86%, 100% { transform: scaleY(1); }
  90% { transform: scaleY(0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .upgrade-agent.is-playing .eyes,
  .upgrade-agent.is-playing .eye {
    animation: none;
  }
}
/* המשפט: 24, semibold, שחור */
.upgrade-title {
  margin: 0;
  padding: 0 16px;
  color: var(--text);
  font-size: calc(24px * var(--a11y-text, 1));
  font-weight: 600;
  text-align: center;
}
/* כפתור הסגירה: זהה לכפתור הסגירה של חלון ההגדרות, 30 מלמעלה ו-30 מימין */
.upgrade-page .settings-close {
  position: fixed;
  top: calc(30px + env(safe-area-inset-top, 0px));
  right: 30px;
  left: auto;
}