/* חלון ההגדרות */
/* ===== חלון הגדרות ===== */
/* מאחורי החלון נשאר הצ'אט הקיים באותו רגע, כהה ב-25% ומטושטש קלות (עדיין מזהים אותו) */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  /* פתיחה וסגירה חלקות: הרקע נכנס ויוצא בהדרגה (200ms) במקום לקפוץ בבת אחת */
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.settings-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}
/* container הגדרות: 900 על 600 במרכז הדף, רקע #FFFFFF, מסגרת 1 #DDDDDD.
   במסך קטן ממנו, הוא מתכווץ ומשאיר 16 פיקסלים מכל צד */
.settings-modal {
  width: min(900px, calc(100% - 32px));
  height: min(600px, calc(100% - 32px));
  background: var(--box-bg);
  border: 1px solid var(--box-stroke);
  border-radius: 15px;
  outline: none;
  display: flex;
  overflow: hidden;
  /* ממורכז במסך במיקום של פיקסלים שלמים (נקבע בסקריפט).
     במרכוז רגיל, במסך ברוחב אי-זוגי החלון יוצא על חצי פיקסל והמסגרת נראית מטושטשת */
  position: absolute;
  top: 0;
  left: 0;
  /* החלון גדל מעט תוך כדי הופעה */
  transform: scale(0.97);
  transition: transform 200ms ease;
}
/* כשהחלון פתוח אין עליו שום transform, כדי שהדפדפן יצייר אותו חד ולא כשכבה מוגדלת */
.settings-overlay.is-open .settings-modal {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .settings-overlay,
  .settings-overlay.is-open,
  .settings-modal {
    transition: none;
  }
}
/* כפתור סגירה: 15 על 15 בפינה השמאלית העליונה, 15 פיקסלים מהקצה (14 מתוך המסגרת של 1).
   בצבע #9A9A9A; ב-hover שחור עם רקע, כמו בכפתורי תפריט הצד */
.settings-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--placeholder);
  cursor: pointer;
  isolation: isolate;
}
.settings-close svg {
  display: block;
  width: 15px;
  height: 15px;
}
.settings-close::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  background: var(--box-stroke);
  border-radius: 5px;
  opacity: 0;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .settings-close:hover{
    color: var(--text);
  }
  :where(html:not(.phone-ui)) .settings-close:hover::before{
    opacity: 1;
  }
}
.settings-close:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
/* תפריט צד בתוך חלון ההגדרות: בצד ימין, ברוחב 200 (כולל פס ההפרדה),
   עם פס הפרדה של 1 בצבע #DDDDDD בצד השמאלי שלו */
.settings-sidebar {
  flex: none;
  width: 200px;
  border-left: 1px solid var(--box-stroke);
  /* כותרת "הגדרות": 15 מימין ו-30 מלמעלה */
  padding: 30px 15px 0 0;
}
.settings-title {
  margin: 0;
  color: var(--placeholder);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
}
/* כותרת נוספת בתפריט ("תוכנית"): 30 פיקסלים מתחת לפריט שמעליה */
.settings-item + .settings-title {
  margin-top: 30px;
}
/* פריט בתפריט ההגדרות ("משתמש"): 12 פיקסלים מתחת לכותרת */
.settings-item {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  text-align: right;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* שני פריטים צמודים באותה קבוצה (למשל "התאמה אישית" ו"שורת פקודות"): 33 פיקסלים בין שורה לשורה,
   כמו בין הקטגוריות בחלון ההיסטוריה */
.settings-item + .settings-item {
  margin-top: 17px;
}
/* רקע ב-hover כמו בתפריט הצד הראשי: גובה 27, פינות 5, #DDDDDD,
   9 פיקסלים מהצד הימני ומהפס השמאלי של התפריט (6 מימין לטקסט) */
.settings-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 13.5px);
  right: -6px;
  width: calc(100% - 3px);
  height: 27px;
  background: var(--box-stroke);
  border-radius: 5px;
  opacity: 0;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .settings-item:hover::before{
    opacity: 1;
  }
}
/* קישור בתפריט ההגדרות ("מדיניות פרטיות"): 12 פיקסלים מתחת לכותרת,
   בלי רקע, עם קו תחתון רק ב-hover. נפתח בלשונית חדשה */
.settings-link {
  display: block;
  width: fit-content;
  margin: 12px 0 0;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  text-underline-offset: 3px;
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .settings-link:hover{
    text-decoration: underline;
  }
}
.settings-link:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
/* סמל ליד פריט בתפריט ההגדרות: 15 על 15, מימין לטקסט עם 15 פיקסלים ביניהם.
   בצבע #9A9A9A, ושחור כשהמשתמש נמצא בעמוד של הפריט */
.settings-item.has-icon {
  display: flex;
  align-items: center;
  gap: 15px;
}
.settings-icon {
  flex: none;
  display: block;
  width: 15px;
  height: 15px;
  color: var(--placeholder);
}
.settings-item[aria-current="page"] .settings-icon {
  color: var(--text);
}
/* הפריט שהמשתמש עומד עליו: הרקע נשאר */
.settings-item[aria-current="page"]::before {
  opacity: 1;
}
.settings-item:focus-visible {
  outline: none;
}
.settings-item:focus-visible::before {
  opacity: 1;
}
/* אזור התוכן של ההגדרות: 15 מפס ההפרדה של התפריט ו-15 מהצד השמאלי.
   ה-X ב-14–29 מראש החלון, ואזור הגלילה מתחיל באותו מרווח מתחתיו (14), כלומר 43 מראש החלון.
   כך תוכן שנגלל למעלה נעלם מתחת לשורה של ה-X ולא עובר עליו */
.settings-content {
  flex: 1;
  min-width: 0;
  margin-top: calc(14px + 15px + 14px);
  padding: 0 15px;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
}
.settings-page[hidden] {
  display: none;
}
.settings-content {
  position: relative;
}
/* פס הפרדה מעל "התנתקות": 30 פיקסלים מעליה (30 מלמטה + 16 שורה + 30),
   עובי 1 #DDDDDD, 15 מפס ההפרדה של התפריט ו-15 מהצד השמאלי של החלון */
.settings-bottom-divider {
  position: absolute;
  right: 15px;
  left: 15px;
  /* מעל "התנתקות" ו"מחיקת משתמש": 30 + 16 + 30 + 16 + 30 מלמטה */
  bottom: calc(30px + 16px + 30px + 16px + 30px);
  height: 1px;
  margin: 0;
  border: none;
  background: var(--box-stroke);
}
/* כפתור התנתקות: 95 על 30, בלי מילוי, מסגרת 1 #DDDDDD (ב-hover #9A9A9A), פינות 7.
   בצד השמאלי של החלון, 15 מהקצה, ממורכז לגובה השורה של "התנתקות"
   (מרכז השורה 30 + 8 = 38 מלמטה, ולכן תחתית הכפתור 38 - 15 = 23 מלמטה) */
.logout-button {
  position: absolute;
  left: 15px;
  bottom: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--box-stroke);
  border-radius: 7px;
  background: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .logout-button:hover{
    border-color: var(--placeholder);
  }
}
.logout-button:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
/* "התנתקות": בתחתית חלון ההגדרות, 15 מפס ההפרדה של התפריט ו-30 מלמטה */
.settings-bottom-row {
  position: absolute;
  right: 15px;
  bottom: 30px;
  margin: 0;
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  text-align: right;
  /* סמל התנתקות מימין לכותרת, 15 פיקסלים ביניהם */
  display: flex;
  align-items: center;
  gap: 15px;
}
/* סמל התנתקות: 15 על 15, עובי קו 1.5 (2.4 ביחידות של 24), #9A9A9A */
.settings-bottom-row svg {
  flex: none;
  display: block;
  width: 15px;
  height: 15px;
  color: var(--placeholder);
}
/* כותרת העמוד ("משתמש"): 16, medium, שחור */
.settings-page-title {
  margin: 0;
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: 1;
  text-align: right;
}
/* שורה בעמוד ("פרופיל"): 30 מתחת לכותרת. הפרופיל בצד השמאלי של השורה, ממורכז לגובה שלה */
.settings-row {
  position: relative;
  margin-top: 30px;
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  text-align: right;
}
/* מכסת פקודות (עמוד "משתמש"): פס הפרדה 30 מתחת ל"שם פרטי", כותרת 30 מתחתיו,
   ושורת המכסה הראשונה 30 מתחת לכותרת */
.settings-divider.is-tight {
  margin-top: 30px;
}
.settings-section-title {
  margin: 30px 0 0;
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: 1;
  text-align: right;
}
/* שורת מכסה: שם הפקודה (16, Regular, שחור), משמאלו "/ בחודש" כמו בדף התוכניות,
   ובצד השמאלי של החלון מספר המכסה (14, medium, #707070), על אותו קו תחתון */
.settings-row.quota-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 30px;
}
.quota-total-row .settings-section-title {
  margin: 0;
}
.quota-value {
  /* חלק משורת המכסה (ולכן על אותו קו תחתון), נדחף לצד השמאלי של החלון */
  margin-right: auto;
  color: var(--c-707070);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
/* פס הפרדה לרוחב: 30 מתחת לשורה שמעליו, עובי 1 #DDDDDD,
   15 מפס ההפרדה של התפריט ו-15 מהצד השמאלי של החלון (לפי הריווח של אזור התוכן) */
.settings-divider {
  height: 1px;
  margin: 30px 0 0;
  border: none;
  background: var(--box-stroke);
}
/* container שם פרטי: שדה לשינוי השם. 200 על 30, בלי מילוי, מסגרת 1 #DDDDDD, פינות 7.
   בצד השמאלי של החלון, ממורכז לגובה השורה. השם בצד שמאל של השדה, 15 מהקצה,
   ואפשר להקליד עד 40 פיקסלים מהצד הימני של השדה */
.settings-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 200px;
  height: 30px;
  margin: 0;
  padding: 0 40px 0 15px;
  border: 1px solid var(--box-stroke);
  border-radius: 7px;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  color: var(--text);
  text-align: left;
  transform: translateY(-50%);
  user-select: text;
  -webkit-user-select: text;
}
/* שם בעברית: נכתב מימין לשמאל, 15 מהצד הימני של השדה, ועד 40 פיקסלים מהצד השמאלי */
.settings-input.is-rtl {
  direction: rtl;
  text-align: right;
  padding: 0 15px 0 40px;
}
/* עריכת שורת הפקודות (עמוד "התאמה אישית"): שורה לכל קטגוריה, עם ידית גרירה, הסימן, השם ומתג.
   כשהמתג הראשי "שורת פקודות" כבוי, העריכה באפור ולא פעילה */
/* עריכת שורת הפקודות: 30 פיקסלים מתחת להסבר שמעליה, כמו המרווח בין "שורת פקודות" לכותרת העמוד */
.row-editor {
  margin-top: 30px;
}
.row-editor.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
/* הכותרת "עריכת שורת הפקודות": בדיוק כמו "שורת פקודות" שמעליה (16, Regular, גובה שורה 1) */
.row-editor-title {
  margin: 0;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}
.row-edit-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.row-edit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--c-EEEEEE);
  background: var(--box-bg);
  font-size: calc(15px * var(--a11y-text, 1));
  color: var(--text);
}
/* גרירה: השורה שנגררת מורמת (צל עדין ופינות מעוגלות) וזזה רק למעלה ולמטה, בתוך גבולות הרשימה.
   שאר השורות מפנות לה מקום בתנועה חלקה */
.row-edit-list {
  position: relative;
}
.row-edit-list.is-sorting .row-edit-item {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* השורה המורמת רחבה ב-12 מכל צד (מרווח פנימי לסמלים ולמתג), והתוכן שלה לא זז הצידה */
.row-edit-list .row-edit-item.is-dragging {
  position: relative;
  z-index: 2;
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 10px;
  border-top-color: transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: none;
  cursor: grabbing;
}
.row-edit-list .row-edit-item.is-settling {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms ease;
}
.row-edit-item .row-edit-handle {
  position: relative;
  display: flex;
  color: var(--c-9A9A9A);
  cursor: grab;
  touch-action: none;
}
/* אזור אחיזה גדול יותר מהסמל, נוח לאצבע */
.row-edit-item .row-edit-handle::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
}
/* הסימן כמקש מקלדת: 28 על 28, מסגרת #DDDDDD, פינות 8, הסימן באפור כהה */
.row-edit-key {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--c-DDDDDD);
  border-radius: 8px;
  font-size: calc(15px * var(--a11y-text, 1));
  font-weight: 600;
  line-height: 1;
  color: var(--c-6B6B6B);
}
.row-edit-key.is-tilde {
  font-weight: 400;
}
.row-edit-item .settings-switch {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  margin-inline-start: auto;
  transform: none;
}
/* קטגוריה שכובתה בעריכת שורת הפקודות */
/* טלפון: הכפתורים ממלאים את כל רוחב השורה בחלקים שווים (מרווחים של 9), ריבועיים, והשורה גבוהה בהתאם
   (9 מעל ומתחת). ב-iPhone 15 Pro Max: 7 כפתורים של כ-46. כשחלק מהקטגוריות מוסתרות, כפתור לא גדל מעבר ל-52 */
@media (max-width: 767px) {
  /* בטלפון גובה השורה נקבע לפי רוחב המסך, ולא לפי "גודל טקסט" */
  :root {
    --row-grow: 0px;
  }
  .cmd-row {
    height: auto;
    padding: 9px;
  }
  .cmd-row .glass-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 52px;
    height: auto;
    aspect-ratio: 1;
    /* הכפתור לא גדל עם "גודל טקסט" (הרוחב לפי המסך), ולכן גם הפינות נשארות 14 */
    border-radius: 14px;
  }
}
.cmd-row .glass-btn[hidden] {
  display: none;
}
/* כל הקטגוריות כבויות: כמו שורת פקודות כבויה */
:root.cmd-row-empty .cmd-row {
  display: none;
}
/* מתג הפעלה וכיבוי (עמוד "התאמה אישית"): 40 על 22, בצד השמאלי של החלון, ממורכז לגובה השורה
   (כמו שדה "שם פרטי"). פועל: #1E6DF6 והעיגול משמאל. כבוי: #DDDDDD והעיגול מימין */
.settings-switch {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 11px;
  background: var(--box-stroke);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.settings-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-FFFFFF);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: right 150ms ease;
}
.settings-switch[aria-checked="true"] {
  background: var(--selected);
}
.settings-switch[aria-checked="true"]::after {
  right: 20px;
}
.settings-switch:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .settings-switch,
  .settings-switch::after {
    transition: none;
  }
}
/* הסבר קצר מתחת לשורה בהגדרות: 14, Regular, #9A9A9A, 10 פיקסלים מתחת לשורה */
.settings-hint {
  margin: 10px 0 0;
  color: var(--placeholder);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1.4;
  text-align: right;
}
/* הפרופיל בעמוד "משתמש": 30 על 30. כרגע רק לתצוגה, אי אפשר לשנות אותו */
.settings-avatar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--box-stroke);
  transform: translateY(-50%);
}
.settings-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* עיגול הפרופיל לחיץ, גם כשהתפריט סגור וגם כשהוא פתוח */
.sidebar-profile {
  cursor: pointer;
}
/* hover על הפרופיל: שקיפות 75% */
@media (hover: hover) {
  :where(html:not(.phone-ui)) .sidebar-profile:hover{
    opacity: 0.75;
  }
}
/* container פרופיל: נפתח בלחיצה על הפרופיל.
   רוחב 220, גובה לפי התוכן, רקע #FFFFFF, מסגרת 1 #DDDDDD.
   15 מעל עיגול הפרופיל (שנמצא 15 מלמטה ובגובה 30, ולכן 60 מלמטה) ו-15 מהצד השמאלי של המסך */
.profile-menu {
  position: fixed;
  left: 15px;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 220px;
  /* הגובה לפי התוכן: 15 פיקסלים מתחת לשורה האחרונה ("התנתקות") */
  height: auto;
  padding-bottom: 14px;
  background: var(--box-bg);
  border: 1px solid var(--box-stroke);
  border-radius: 15px;
  /* פתיחה וסגירה חלקות כמו בחלון ההגדרות: שקיפות והגדלה קלה במשך 200ms,
     מתוך הפינה הקרובה לפרופיל */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transform-origin: bottom left;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.profile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .profile-menu,
  .profile-menu.is-open {
    transition: none;
  }
}
/* תוכן החלון: 15 מלמעלה. המרחקים נמדדים מהקצה החיצוני של החלון (14 מתוך המסגרת של 1) */
.profile-menu {
  padding-top: 14px;
  user-select: none;
  -webkit-user-select: none;
}
/* אימייל המשתמש: 14, Regular, #9A9A9A, בצד שמאל, 15 מהקצה. אימייל ארוך נחתך בשלוש נקודות */
.profile-email {
  /* ריווח של 3 פיקסלים למעלה ולמטה, כדי שהזנב של g, y, p לא ייחתך
     (החיתוך לאימייל ארוך חותך גם את מה שיוצא מגובה השורה). המרווח השלילי שומר על המיקום */
  margin: -3px 0;
  padding: 3px 14px;
  direction: ltr;
  text-align: left;
  color: var(--placeholder);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* האימייל הוא טקסט בלבד: בלי קו תחתון ולא לחיץ, גם אם הדפדפן בטלפון זיהה אותו כקישור */
.profile-email {
  pointer-events: none;
  -webkit-touch-callout: none;
}
.profile-email a,
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}
/* שורות בחלון הפרופיל ("הגדרות", "שדרוג תוכנית"): 15 מתחת לשורה שמעליהן.
   הסמל 15 מהצד הימני בצבע #9A9A9A, והכותרת 15 משמאלו בשחור. הצבעים לא משתנים ב-hover או בלחיצה */
.profile-menu-item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin: 15px 0 0;
  padding: 0 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  color: var(--placeholder);
  text-align: right;
  cursor: pointer;
}
.profile-menu-item svg {
  flex: none;
  display: block;
  width: 15px;
  height: 15px;
}
/* הכותרת בשחור, הסמל נשאר #9A9A9A */
.profile-menu-item span {
  color: var(--text);
}
/* "מדיניות פרטיות" בחלון הפרופיל: כמו בחלון ההגדרות (16, Regular, שחור, בלי רקע,
   קו תחתון רק ב-hover). 15 מתחת לשורה שמעליו ו-15 מהצד הימני */
.profile-menu .settings-link {
  margin: 15px 14px 0 0;
}
/* פס הפרדה בחלון הפרופיל: 15 מתחת לשורה שמעליו, עובי 1 #DDDDDD, 15 משמאל ו-15 מימין
   (14 מתוך המסגרת של 1) */
.profile-divider {
  height: 1px;
  margin: 15px 14px 0;
  border: none;
  background: var(--box-stroke);
}
/* רקע ב-hover על הסמל והכותרת יחד: גובה 27, פינות 5, #DDDDDD, 9 מהקצוות של החלון */
.profile-menu-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 13.5px);
  left: 8px;
  right: 8px;
  height: 27px;
  background: var(--box-stroke);
  border-radius: 5px;
  opacity: 0;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .profile-menu-item:hover::before{
    opacity: 1;
  }
}
.profile-menu-item:focus-visible {
  outline: none;
}
.profile-menu-item:focus-visible::before {
  opacity: 1;
}
/* לוגו קטן (agent_small_logo.svg): 15 על 15, 15 פיקסלים מהצד השמאלי ומלמעלה.
   מופיע רק כשהתפריט פתוח */
.sidebar-logo {
  position: absolute;
  top: 15px;
  left: 15px;
  display: block;
  opacity: 0;
  visibility: hidden;
  width: 15px;
  height: 15px;
}
:root.sidebar-open .sidebar-logo {
  opacity: 1;
  visibility: visible;
}
/* השם "פקודות": מופיע רק כשהתפריט פתוח, 15 פיקסלים משמאל לכפתור "/".
   הוא חלק מהכפתור, כך שה-hover והלחיצה כוללים גם אותו.
   הגובה נקבע בסקריפט, כך שגוף האותיות ממורכז לגובה הכפתור */
.sidebar-label {
  position: absolute;
  top: 0;
  right: 30px; /* 15 (הכפתור) + 15 */
  display: block;
  opacity: 0;
  visibility: hidden;
  margin: 0;
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
:root.sidebar-open .sidebar-label {
  opacity: 1;
  visibility: visible;
}
/* תפריט פתוח: רקע ה-hover של "/" נמתח שמאלה וכולל גם את "פקודות",
   עד אותו מרווח מהצד השמאלי של התפריט כמו מהצד הימני (9 = 15 פחות 6).
   הכפתור מתחיל 30 פיקסלים מהצד הימני, ולכן הרקע מתחיל 39 פחות רוחב התפריט ממנו */
:root.sidebar-open .sidebar-chat::before,
:root.sidebar-open .sidebar-history::before {
  left: calc(39px - var(--sidebar-width));
}
/* משתמש לא מחובר: תפריט הצד מוסתר לגמרי, והתוכן ממורכז בכל רוחב המסך */
:root.guest {
  --sidebar-width: 0px;
}
:root.guest .sidebar {
  display: none;
}
/* כפתור "התחברות": רק למשתמש לא מחובר, בפינה הימנית העליונה, 25 מימין ו-25 מלמעלה.
   100 על 40, בלי מילוי, מסגרת 1 #DDDDDD, פינות 20. נשאר במקום גם בזמן גלילה */
.guest-login {
  position: fixed;
  top: calc(25px + env(safe-area-inset-top, 0px));
  right: 25px;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  margin: 0;
  padding: 0;
  background: none;
  border: 1px solid var(--box-stroke);
  border-radius: 20px;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}
:root.guest .guest-login {
  display: flex;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .guest-login:hover{
    border-color: var(--placeholder);
  }
}
.guest-login:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
/* הערה על מדיניות הפרטיות בדף הצ'אט: רק למשתמש לא מחובר,
   במרכז תחתית העמוד, 25 פיקסלים מלמטה (אותו עיצוב כמו בדף ההתחברות) */
.guest-legal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(25px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: none;
  margin: 0;
  padding: 0 16px;
  color: var(--placeholder);
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
:root.guest .guest-legal {
  display: block;
}
/* אחרי שליחת פקודה או חישוב (מצב צ'אט): המשפט נעלם, ובמקומו מופיע משפט האזהרה שמתחת לשדה */
:root.guest .chat-mode .guest-legal,
:root.guest body.chat-mode .guest-legal {
  display: none;
}
.guest-legal a {
  color: var(--selected);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* במצב צ'אט: אזור הצ'אט והשדה הצף מתחילים מימין לתפריט */
.chat-mode .chat-scroll,
.chat-mode .center {
  left: var(--sidebar-width);
}
/* הרוחב נקבע מ-left ו-right, כדי שהשדה ממורכז באזור שמימין לתפריט */
.chat-mode .center {
  width: auto;
}