/* טלפון (רוחב עד 767) */
/* ===== טלפון (רוחב עד 767): אותו מבנה כמו במחשב =====
   פס הצד הצר (60) נשאר במקומו. התפריט הפתוח (250) נפתח מעל התוכן עם רקע מוחשך, במקום לדחוף אותו.
   השדה, שורת הפקודות, הצ'אט וההיסטוריה ממשיכים לתפוס את כל השטח שמימין לפס */
@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
  /* התוכן תופס את כל רוחב המסך. לתפריט רוחב משלו: 60 כשהוא סגור, 250 כשהוא פתוח */
  :root,
  :root.sidebar-open {
    --sidebar-width: 0px;
  }
  /* התפריט תמיד בפריסה של תפריט פתוח במחשב (250), עם פס הפרדה חד בצד שמאל שלו.
     סגור: הוא מחוץ למסך, ורואים רק את כפתור הפתיחה (#phone-menu-btn). פתוח: הוא מחליק פנימה בתנועה אחת,
     בלי שום אנימציה בתוכו (שמות, לוגו וכפתורים כבר במקומם), מעל רקע מוחשך */
  /* בלי will-change ובלי שכבה קבועה: כשהתפריט פתוח הוא מצויר כרגיל (בלי transform), כך שפס ההפרדה
     חד ברזולוציה של הטלפון ולא מטושטש. ההזזה פעילה רק בזמן הפתיחה והסגירה */
  .sidebar {
    --sidebar-width: var(--sidebar-width-open);
    width: var(--sidebar-width-open);
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* פס הפרדה ברור: כהה יותר גם מהתפריט וגם מהרקע המוחשך שלידו, כך שהוא נראה כקו חד ולא כמעבר רך */
    border-right: 1px solid var(--sidebar-edge, #A6A6A6);
    box-shadow: none;
  }
  :root[data-theme="dark"] .sidebar {
    --sidebar-edge: #3A3A3A;
  }
  :root.sidebar-open .sidebar {
    transform: none;
  }
  .sidebar * {
    transition: none !important;
  }
  .sidebar-label,
  .sidebar-profile-name,
  .sidebar-settings,
  .sidebar-logo {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .sidebar-chat::before,
  .sidebar-history::before {
    left: calc(39px - var(--sidebar-width));
  }
  /* הפרופיל בתחתית התפריט: אותו מרווח משמאל ומלמטה (15), גם במכשיר עם פס בית בתחתית המסך.
     כפתור ההגדרות נשאר ממורכז לגובה העיגול */
  .sidebar-profile {
    bottom: 15px;
  }
  .sidebar-settings {
    bottom: 22.5px;
  }
  /* כפתור הפתיחה כשהתפריט סגור: באותו מקום ובאותו עיצוב כמו בפס הצר של המחשב */
  button.phone-menu-btn {
    display: block;
    position: fixed;
    top: calc(15px + env(safe-area-inset-top, 0px));
    left: 22px;
    /* מתחת לתפריט (30) ומעל הרקע המוחשך (28): בסגירה התפריט מחליק מעליו, והכפתור נחשף רק בסוף */
    z-index: 29;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--placeholder);
    cursor: pointer;
  }
  .phone-menu-btn svg {
    display: block;
    width: 15px;
    height: 15px;
  }
  .phone-menu-btn::before {
    content: "";
    position: absolute;
    inset: -12px;
  }
  :root.guest .phone-menu-btn {
    visibility: hidden;
  }
  /* השדה ושורת הפקודות תמיד בתחתית המסך (כמו בצ'אט). לפני ההודעה הראשונה, המשפט (22 פיקסלים, בשתי שורות)
     במרכז הרבע השני מלמעלה של השטח שמעל שורת הפקודות: 3/8 מהגובה שלו (--row-top נמדד בסקריפט) */
  .phone-home .center > h1 {
    display: block;
    position: fixed;
    top: calc(var(--row-top, 600px) * 0.375);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 16px;
    font-size: calc(22px * var(--a11y-text, 1));
    line-height: 1.35;
    text-align: center;
  }
  h1 .phone-br {
    display: inline;
  }
  /* בטלפון אין "ללא" בשורת הפקודות: מכבים ומדליקים אותה רק מההגדרות */
  #row-hide {
    display: none;
  }
  .mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 28;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  :root.sidebar-open .mobile-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease;
  }
  /* מרווח של 30 מתחת להערה "Nave Agent בגרסא הראשונית...". בין ההערה (12) לשדה נשאר המרווח של
     המחשב (19), ולכן השדה 61 פיקסלים מלמטה. המקום ששמור לשדה בתחתית הצ'אט גדל באותה מידה (11) */
  /* אורח, לפני הפקודה הראשונה: במקום ההערה, המשפט "על ידי שליחת פקודה, הנך מאשר/ת את מדיניות הפרטיות"
     (כמו במחשב), באותו מקום ובאותו גודל כמו ההערה */
  :root.guest body.chat-mode.phone-home .guest-legal {
    display: block;
    bottom: calc(19px + env(safe-area-inset-bottom, 0px));
    line-height: 1;
  }
  :root.guest body.phone-home .chat-disclaimer {
    display: none;
  }
  /* ההערה ממורכזת במרווח שבין השדה לתחתית המסך: 19 מעליה ו-19 מתחתיה (ההערה 12, השדה 50 מלמטה) */
  .chat-mode .chat-disclaimer {
    bottom: calc(19px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .chat-mode .center {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  }
  .thread {
    /* הפקודה הראשונה באותו מקום כמו כל פקודה אחרי גלילה: 76 מלמעלה, מתחת ל-fade */
    padding-top: calc(76px + env(safe-area-inset-top, 0px));
    /* בגלילה עד הסוף, תחתית התשובה האחרונה 15 פיקסלים מעל שורת הפקודות */
    padding-bottom: calc(123px + var(--quota-cover, 0px) + var(--box-extra, 0px) + var(--phone-tail, 0px) + env(safe-area-inset-bottom, 0px));
  }
  /* בטלפון אין פסי גלילה (גוללים באצבע): לא בצ'אט, לא בהיסטוריה ולא בחלונות */
  * {
    scrollbar-width: none;
  }
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .history-scrollbar,
  .menu-thumb {
    display: none !important;
  }
  /* בלי פס גלילה, הרקע וה-fade סביב השדה מגיעים עד הקצה הימני */
  /* כמו במחשב: הצ'אט עובר מאחורי שורת הפקודות (רואים אותו דרך הזכוכית), והרקע וה-fade מתחילים מהשדה.
     כשיש הודעה מעל השדה ("פקודה זו אינה זמינה כעת", שורה כבויה וכו'), הרקע וה-fade עולים מעל ההודעה
     (--mask-cover), וכשההודעה נעלמת הכול חוזר לרגיל */
  /* הרקע מתחיל 14 פיקסלים מתחת לראש השדה (כגודל הפינה המעוגלת), כך שההודעות עוברות מאחורי הפינות
     של השדה ונעלמות מאחוריו, בלי "חור" של רקע בפינות */
  .chat-mode .center::before {
    top: calc(14px - var(--mask-cover, 0px));
    right: 0;
  }
  .chat-mode .center::after {
    bottom: calc(100% + var(--mask-cover, 0px));
    right: 0;
  }
  /* בטלפון אין fade מעל השדה: ההודעות בצ'אט נעלמות בקו של השדה הראשי (או של ההודעה שמעליו, כשיש) */
  .chat-mode .center::after {
    display: none;
  }
  /* ההיסטוריה ברוחב של הצ'אט: 16 פיקסלים מכל צד. בלי הלוגו של הסוכן, הרשימה לא צריכה לבלוט שמאלה */
  /* ההיסטוריה ברוחב הצ'אט. הכותרת ממוקמת כך שכשהחיפוש פתוח, ה-container שלו מתחיל 15 פיקסלים
     מתחת לכפתור התפריט: אותו מרווח כמו בין הכפתור לראש העמוד (הכפתור 15–30, החיפוש מ-45) */
  .history-container {
    top: calc(57px + env(safe-area-inset-top, 0px));
    /* הרשימה מגיעה עד תחתית המסך, כך שהחיפושים לא נעלמים לפני סוף האתר */
    bottom: 0;
    width: calc(100% - 32px);
  }
  /* בטלפון אין fade בתחתית ההיסטוריה: החיפושים לא נמוגים בתחתית המסך.
     בסוף הגלילה החיפוש האחרון 30 פיקסלים מעל תחתית המסך (ומעל פס הבית, אם יש) */
  .history-list {
    left: 0;
    padding-left: 0;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* סמל החיפוש בהיסטוריה באותו קו אנכי כמו כפתור התפריט (22 משמאל), ולא 16 */
  .history-search {
    left: -6px;
  }
  /* אורח (לא מחובר): כפתור "התחברות" בפינה הימנית העליונה, 15 מלמעלה ו-16 מימין
     (בקו אחד עם הצ'אט). הפקודה הראשונה ממוקמת 101 מלמעלה, מתחת לכפתור */
  .guest-login {
    top: calc(15px + env(safe-area-inset-top, 0px));
    right: 16px;
  }
  :root.guest .thread {
    padding-top: calc(101px + env(safe-area-inset-top, 0px));
  }
  /* שדות הקלדה בטלפון בגודל 16 לפחות: מתחת ל-16, הדפדפן ב-iPhone עושה זום כשלוחצים על השדה
     (למשל שינוי השם בהגדרות, החיפוש בהיסטוריה, וחיפוש בחלונות). כך אין זום בכלל */
  input,
  textarea,
  select {
    font-size: calc(16px * var(--a11y-text, 1)) !important;
  }
  /* בטלפון אין לוגו ליד התשובות של הסוכן (בצ'אט ובהיסטוריה) */
  .agent-logo {
    display: none;
  }
  .agent-answer {
    max-width: calc(100% - 28px);
    margin-left: 14px;
    margin-right: 14px;
  }
  .agent-answer.has-chart {
    width: calc(100% - 28px);
  }
  /* כפתור המחשבון (ההודעה השנייה אחרי תשובה מהמאגר): נמוך יותר מהודעה רגילה */
  .agent-answer.qa-calc-prompt {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* ההודעות לא מגיעות עד הקצה של השדה: 14 פיקסלים (כגודל הפינה המעוגלת שלו) מכל צד,
     כך שכשהן עוברות מאחורי השדה הן לא נראות בעיגול של הפינה */
  .sent-command {
    max-width: calc(100% - 28px);
    margin-right: 14px;
  }
  /* ראש המסך בצ'אט: אין רקע ואין הצללה. ההודעות נגללות עד הקצה העליון של המסך,
     מתחת לכפתור התפריט ולכפתור הנגישות (גם לאורח, מתחת לכפתור "התחברות") */
  body.chat-mode:not(.phone-home)::before,
  :root.guest body.chat-mode:not(.phone-home)::before {
    display: none;
  }
  /* ההגדרות: החלון כמעט בגודל המסך, והתפריט שבתוכו צר יותר (150 במקום 200) */
  .settings-modal {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
  .settings-sidebar {
    width: 150px;
    padding: 24px 12px 0 0;
  }
  /* שדה השם: צר יותר (120 במקום 200), כדי שלא יעלה על הכותרת "שם פרטי" */
  .settings-input {
    width: 120px;
    padding: 0 12px;
  }
  /* שדרוג תוכנית: התוכניות אחת מתחת לשנייה, והדף נגלל. הלוגו והמשפט מעליהן */
  /* כל הדף נגלל, וה-X נגלל יחד עם התוכן (הוא חלק מהדף, ולא קבוע במסך) */
  .upgrade-page {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .upgrade-page .settings-close {
    position: absolute;
  }
  .upgrade-content {
    width: 100%;
    padding: 0 16px 40px;
  }
  /* הלוגו והכותרת ממורכזים לרוחב הדף */
  .upgrade-head {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 64px 0 28px;
    align-items: center;
    text-align: center;
  }
  /* התוכניות אחת מתחת לשנייה, ברוחב המסך (16 מכל צד). התוכן בגדלים של הטלפון (הטקסט קטן ב-2 כמו
     בשאר האתר בטלפון), ריווח פנימי שווה מימין ומשמאל, והכפתור ברוחב התוכן */
  .upgrade-plans {
    flex-direction: column;
    align-items: stretch;
  }
  .plan-card {
    padding: 30px 20px;
  }
  .plan-name {
    font-size: calc(18px * var(--a11y-text, 1));
  }
  .plan-description,
  .plan-price-period {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .plan-price-amount {
    font-size: calc(30px * var(--a11y-text, 1));
  }
  .plan-feature-text,
  .plan-select {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .plan-select {
    width: 100%;
    min-width: 0;
    margin: 30px 0 0;
  }
  /* טבלת "מה ההבדל": טקסט קטן יותר, כדי שהעמודות לא יישברו הרבה */
  .calc-answer .diff-table {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  /* תאריכים בתשובות לא נשברים לשתי שורות */
  .calc-answer .tax-tl-date {
    white-space: nowrap;
  }
  /* שורה בתשובה (תווית מימין, ערך משמאל): כשהשתיים לא נכנסות באותה שורה, הערך יורד לשורה משלו (משמאל),
     במקום שהתווית תימחץ לעמודה צרה (מילה בכל שורה) או שהערך יחרוג מהמסך. ערך קצר נשאר באותה שורה ולא נשבר.
     ערך ארוך מרוחב המסך נשבר בין מילים (טווחים, .answer-range, לא נשברים) */
  .calc-answer .calc-row {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 0;
  }
  .calc-answer .calc-row > * {
    max-width: 100%;
  }
  .calc-answer .calc-row > :first-child {
    flex: 1 1 auto;
  }
  .calc-answer .calc-row > :last-child:not(:first-child) {
    margin-right: auto;
    text-align: left;
  }
  /* קישור "איפה בודקים": נשבר לכמה שורות כשהוא ארוך, ולא יוצא מהמסך */
  .calc-answer .where-link {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* שבירת השורה בכותרת: רק בטלפון */
.phone-br {
  display: none;
}
.phone-menu-btn {
  display: none;
}
@media (min-width: 768px) {
  .mobile-backdrop {
    display: none;
  }
}

/* ===== טלפון: כל הטקסטים קטנים ב-2 פיקסלים =====
   חוץ מהמשפט בדף הבית, מהטקסט בשדה הפקודה (השדה, השכבה הצבעונית ומשפט הרמז),
   מהחלונות של האפשרויות בתוך הפקודה (למשל מסלול, תאריך, מושג), ומדף התוכניות, שנשארים כמו במחשב.
   הכללים נוצרו מכל הגדלים שבעיצוב (הגודל פחות 2), ולכן הם גוברים עליהם בטלפון */
@media (max-width: 767px) {
  body {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .quota-notice {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .history-also {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .history-more {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .history-also-link {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .row-tip {
    font-size: calc(11px * var(--a11y-text, 1));
  }
  .calc-answer .where-steps li {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .calc-answer .docs-text {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .calc-answer .diff-table {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .calc-answer .deadline-card-label {
    font-size: calc(11px * var(--a11y-text, 1));
  }
  .calc-answer .deadline-card-date {
    font-size: calc(24px * var(--a11y-text, 1));
  }
  .calc-answer .deadline-card-left {
    font-size: calc(11px * var(--a11y-text, 1));
  }
  .calc-answer .valid-text {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .calc-answer .tax-tl-row {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .calc-answer .tax-tl-left {
    font-size: calc(10px * var(--a11y-text, 1));
  }
  .calc-answer .tip-title {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .calc-answer .tip-text {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .crumb-btn {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .crumb-caret {
    font-size: calc(9px * var(--a11y-text, 1));
  }
  .crumb-arrow {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .crumb-item {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .calc-answer .data-title {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .key-hint {
    font-size: calc(10px * var(--a11y-text, 1));
  }
  .row-hide {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .glass-btn span {
    font-size: calc(16px * var(--a11y-text, 1));
  }
  .command-menu-title {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .command-item {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .price-chart-title {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .price-chart-legend {
    font-size: calc(11px * var(--a11y-text, 1));
  }
  .price-source {
    font-size: calc(10px * var(--a11y-text, 1));
  }
  .calc-answer .calc-row {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .calc-answer .cmp-table {
    font-size: calc(13px * var(--a11y-text, 1));
    column-gap: 20px;
  }
  .calc-answer .calc-big {
    font-size: calc(26px * var(--a11y-text, 1));
  }
  .calc-answer .calc-warning {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .calc-answer .calc-login {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .calc-answer .calc-part-top {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .feature-option {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .city-suggestion {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .entry-box {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .budget-currency {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .budget-input {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .sent-command, .agent-answer {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .chat-mode .chat-disclaimer {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .login-title {
    font-size: calc(22px * var(--a11y-text, 1));
  }
  .google-login {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .login-legal {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .sidebar-profile-name {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .search-again {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .history-seg-btn {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .history-search-input {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .history-date {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .history-empty {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .history-tab {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .settings-title {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .settings-item {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .settings-link {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .logout-button {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .settings-bottom-row {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .settings-page-title {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .settings-row {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .settings-section-title {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .quota-value {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .settings-input {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .row-editor-title {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .row-edit-item {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .row-edit-key {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .settings-hint {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .profile-email {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .profile-menu-item {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .sidebar-label,
  .sidebar-chats-title,
  .sidebar-chat-item,
  .sidebar-project-item {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  /* שדה בטלפון בגודל 16, כדי שהדפדפן לא יעשה זום */
  .project-field {
    font-size: calc(16px * var(--a11y-text, 1));
  }
  .guest-login {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .guest-legal {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .desktop-only-title {
    font-size: calc(20px * var(--a11y-text, 1));
  }
  .desktop-only-text {
    font-size: calc(14px * var(--a11y-text, 1));
  }
  .desktop-only-link {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .theme-title {
    font-size: calc(13px * var(--a11y-text, 1));
  }
  .theme-option {
    font-size: calc(12px * var(--a11y-text, 1));
  }
  .calc-answer .diff-table {
    font-size: calc(11px * var(--a11y-text, 1));
  }
  .settings-modal .settings-item, .settings-modal .settings-link {
    font-size: calc(16px * var(--a11y-text, 1));
  }
  /* הפריטים בחלונות של האפשרויות בתוך הפקודה: הגודל של המחשב */
  .field-menu .command-item {
    font-size: calc(16px * var(--a11y-text, 1));
  }
}

/* ===== טלפון: ההגדרות =====
   חלון שעולה מתחתית המסך, תמיד עד למעלה (40 פיקסלים מראש האתר), באותו עיצוב כמו באתר.
   בהתחלה רואים רק את הצד הימני (הרשימה), ברוחב מלא ובלי פריט מסומן. לחיצה על פריט פותחת את העמוד שלו
   במקום הרשימה, עם "› הגדרות" לחזרה */
.settings-back {
  display: none;
}
@media (max-width: 767px) {
  .settings-overlay .settings-modal {
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    /* 80 פיקסלים מראש האתר */
    height: calc(100% - 80px);
    border-radius: 15px 15px 0 0;
    /* בלי מסגרת בצדדים ולמטה: החלון ברוחב המסך, וקו בשולי המסך נראה כמו פס */
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .settings-overlay.is-open .settings-modal {
    transform: none;
  }
  /* בטלפון החלון לא נעלם בהדרגה: הוא נשאר אטום, ומחליק למטה עד שהוא יוצא מהמסך.
     רק ההחשכה של הרקע נעלמת בהדרגה, באותו זמן. השכבה נעלמת רק אחרי שההחלקה נגמרה */
  .settings-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 280ms ease, visibility 0s linear 280ms;
  }
  .settings-overlay.is-open {
    opacity: 1;
    background: rgba(0, 0, 0, 0.25);
    transition: background-color 280ms ease, visibility 0s;
  }
  /* פס גרירה קטן בראש החלון */
  .settings-modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: var(--box-stroke);
  }
  /* "התנתקות": אותו מרווח מעליה (עד פס ההפרדה) ומתחתיה (עד תחתית החלון), 30 בכל צד.
     בטלפון השורה בגובה 15 (הטקסט קטן ב-2), ולכן הפס 30 + 15 + 30 מלמטה */
  .settings-bottom-divider {
    bottom: calc(30px + 15px + 30px);
  }
  /* "עריכת שורת הפקודות" באותו עובי כמו כותרת העמוד "שורת פקודות" (500) */
  .row-editor-title {
    font-weight: 500;
  }
  /* מרווח של 30 מראש החלון לכותרת הראשונה (פס הגרירה תופס 13 מהם) */
  .settings-sidebar {
    width: 100%;
    border-left: none;
    padding: 17px 16px 28px 16px;
  }
  /* בטלפון אין X: סוגרים בלחיצה מחוץ להגדרות, או על פס הגרירה */
  .settings-overlay #settings-close {
    display: none;
  }
  .settings-content {
    display: none;
  }
  .settings-modal .settings-item,
  .settings-modal .settings-link {
    font-size: calc(18px * var(--a11y-text, 1));
  }
  .settings-modal:not(.show-page) .settings-item[aria-current]::before {
    display: none;
  }
  /* ברשימה: חץ אפור בצד שמאל של כל פריט שנפתח לעמוד בתוך ההגדרות (לא של "שדרוג תוכנית"
     ולא של הקישורים שיוצאים מהחלון). אותו חץ כמו החץ לחזרה, בכיוון ההפוך, 8 על 14 */
  .settings-modal:not(.show-page) .settings-item[data-page]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 14px;
    transform: translateY(-50%);
    background: var(--placeholder);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 1.2L1.2 7l5.3 5.8'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 1.2L1.2 7l5.3 5.8'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .settings-modal.show-page .settings-sidebar {
    display: none;
  }
  .settings-modal.show-page .settings-content {
    display: block;
    width: 100%;
    /* החץ 30–44 מראש החלון, ומרווח שווה של 30 מתחתיו: אזור הגלילה והתוכן מתחילים 74 מראש החלון
       (13 מהם פס הגרירה). כך תוכן שנגלל למעלה נעלם מתחת לשורה של החץ ולא עובר עליו */
    margin-top: 61px;
    height: calc(100% - 13px - 61px);
    padding-top: 0;
    overflow-y: auto;
  }
  /* חזרה לרשימה: אותו חץ כמו בפריטים של הדף הראשון (8 על 14, אפור), רק מצביע ימינה.
     30 פיקסלים מראש החלון, בלי טקסט */
  .settings-modal.show-page .settings-back {
    display: block;
    position: absolute;
    top: 30px;
    right: 16px;
    z-index: 1;
    width: 8px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--placeholder);
    cursor: pointer;
  }
  .settings-back svg {
    display: block;
    width: 8px;
    height: 14px;
  }
  /* אזור לחיצה גדול יותר מהחץ עצמו */
  .settings-back::before {
    content: "";
    position: absolute;
    inset: -12px;
  }
}

/* "התנתקות" מעל "מחיקת משתמש", 30 ביניהן: השורה שלה 76 מלמטה, והכפתור ממורכז אליה (69) */
.settings-logout-row {
  bottom: calc(30px + 16px + 30px);
}
#logout-button {
  bottom: calc(23px + 16px + 30px);
}
/* "מחיקת משתמש": 30 מלמטה, באותו עיצוב כמו "התנתקות". הכפתור "מחיקה" בצבע אזהרה */
.delete-user-button {
  color: #D93025;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .delete-user-button:hover {
    border-color: #D93025;
  }
}
/* חלון אישור המחיקה: באמצע המסך, מעל ההגדרות */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* החשכה ברקע כשההודעה מופיעה (מעל ההחשכה של ההגדרות) */
  background: rgba(0, 0, 0, 0.25);
}
/* טלפון: ההגדרות תופסות כמעט את כל המסך, ולכן מאחורי החלון יש החשכה משלו (כמו ההחשכה סביב ההגדרות במחשב) */
@media (max-width: 767px) {
  .confirm-overlay {
    background: rgba(0, 0, 0, 0.25);
  }
}
.confirm-overlay[hidden] {
  display: none;
}
/* מסגרת באותו צבע כמו המסגרות בהגדרות (#DDDDDD), בלי צל ובלי טשטוש */
.confirm-box {
  width: 100%;
  max-width: 360px;
  padding: 24px;
  border: 1px solid var(--box-stroke);
  box-shadow: none;
  border-radius: 15px;
  background: var(--box-bg);
  text-align: right;
}
.confirm-title {
  margin: 0 0 10px;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  color: var(--text);
}
.confirm-text {
  margin: 0;
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.5;
  color: var(--placeholder);
}
.confirm-error {
  margin: 10px 0 0;
  font-size: calc(14px * var(--a11y-text, 1));
  color: #D93025;
}
.confirm-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
}
.confirm-actions button {
  height: 34px;
  padding: 0 16px;
  border-radius: 7px;
  font-family: inherit;
  font-size: calc(15px * var(--a11y-text, 1));
  cursor: pointer;
}
.confirm-cancel {
  border: 1px solid var(--box-stroke);
  background: none;
  color: var(--text);
}
.confirm-delete {
  border: 1px solid #D93025;
  background: #D93025;
  color: #FFFFFF;
}
/* hover כמו בכפתורים בהגדרות (רק במחשב): "ביטול" עם מסגרת אפורה כהה יותר, "מחיקה" בגוון אדום כהה יותר */
@media (hover: hover) {
  :where(html:not(.phone-ui)) .confirm-cancel:hover {
    border-color: var(--placeholder);
  }
  :where(html:not(.phone-ui)) .confirm-delete:not(:disabled):hover {
    border-color: #B3261E;
    background: #B3261E;
  }
}
.confirm-delete:disabled {
  opacity: 0.6;
  cursor: default;
}
@media (max-width: 767px) {
  /* טלפון: השורות בגובה 15. "מחיקת משתמש" 30 מלמטה, "התנתקות" 30 מעליה, והפס 30 מעל "התנתקות" */
  .settings-bottom-divider {
    bottom: calc(30px + 15px + 30px + 15px + 30px) !important;
  }
  .settings-logout-row {
    bottom: calc(30px + 15px + 30px);
  }
  #logout-button {
    bottom: calc(22.5px + 15px + 30px);
  }
  .delete-user-button {
    bottom: 22.5px;
  }
}

/* עמוד "משתמש" נגלל כשהתוכן ארוך מהחלון: העמוד הוא עמודה בגובה החלון לפחות, והחלק התחתון נדחף
   לתחתית (כמו קודם). אם אין מספיק מקום, הוא בא אחרי התוכן (30 לפחות מעל הפס), והחלון נגלל */
.settings-content {
  display: flex;
  flex-direction: column;
}
.settings-content > * {
  flex: none;
}
.settings-page[data-page="user"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
@media (max-width: 767px) {
  /* טלפון: ברשימה (הדף הראשון) העמודים מוסתרים, ורק בעמוד שנבחר הם מוצגים */
  .settings-modal:not(.show-page) .settings-content {
    display: none;
  }
  .settings-modal.show-page .settings-content {
    display: flex;
  }
}
.settings-bottom {
  position: relative;
  flex: none;
  /* בקוד החלק הזה לפני תוכן העמוד; בתצוגה הוא תמיד אחרון */
  order: 99;
  margin: auto -15px 0;
  /* 30 מעל הפס, והפס 30 + 16 + 30 + 16 + 30 מלמטה */
  height: calc(30px + 1px + 30px + 16px + 30px + 16px + 30px);
}
@media (max-width: 767px) {
  .settings-bottom {
    height: calc(30px + 1px + 30px + 15px + 30px + 15px + 30px);
  }
}

/* "עריכת שורת הפקודות": כל שורה נפתחת לעמוד של הקטגוריה, עם חץ בקצה השמאלי (כמו ברשימת ההגדרות) */
.row-edit-item.is-link {
  cursor: pointer;
}
.row-edit-chev {
  flex: none;
  display: flex;
  margin-inline-start: auto;
  color: var(--placeholder);
}
/* "בקרוב" במקום החץ: בקצה השמאלי, אפור, בגודל הטקסט המשני */
.row-edit-soon {
  flex: none;
  margin-inline-start: auto;
  color: var(--placeholder);
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1;
  white-space: nowrap;
}
.row-edit-chev svg {
  display: block;
  width: 8px;
  height: 14px;
}
.row-edit-item.is-link:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
/* הפקודות בעמוד של קטגוריה: אותו גובה שורה כמו הקטגוריות בעמוד "שורת פקודות" (שם הסימן כמקש קובע את הגובה) */
#cat-cmd-list .row-edit-item {
  min-height: var(--row-edit-h, 49px);
}
/* "שמורים" */
.saved-head {
  position: relative;
}
.saved-count {
  position: absolute;
  left: 0;
  top: 0;
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1;
  color: var(--placeholder);
}
#saved-list .row-edit-item,
#saved-cats .row-edit-item,
#saved-results .row-edit-item,
#saved-cat-list .row-edit-item {
  min-height: var(--row-edit-h, 49px);
}
.saved-remove {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-EEEEEE);
  color: var(--c-707070);
  cursor: pointer;
}
.saved-remove svg {
  width: 10px;
  height: 10px;
}
.saved-add {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--row-edit-h, 49px);
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid var(--c-EEEEEE);
  background: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  color: var(--send-active);
  text-align: right;
  cursor: pointer;
}
.saved-add[hidden] {
  display: none;
}
.saved-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0 0 15px;
  padding: 0 12px;
  border: 1px solid var(--box-stroke);
  border-radius: 10px;
  color: var(--placeholder);
}
.saved-search svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.saved-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  color: var(--text);
}
.saved-search input::placeholder {
  color: var(--placeholder);
}
.saved-sub {
  flex: none;
  margin-inline-start: auto;
  font-size: calc(13px * var(--a11y-text, 1));
  color: var(--placeholder);
}
.saved-sub + .row-edit-chev {
  margin-inline-start: 12px;
}
.saved-pick-item {
  cursor: pointer;
}
.saved-pick-item.is-off {
  color: var(--placeholder);
  cursor: default;
}
.saved-check {
  flex: none;
  display: flex;
  margin-inline-start: auto;
  color: var(--send-active);
}
/* הרווח בין הכותרת לתוכן, כמו בין הכותרת לשורה הראשונה בשאר עמודי ההגדרות */
.saved-cat-hint,
.saved-search {
  margin-top: 22px;
}
#cat-cmd-list .settings-switch {
  margin-inline-start: auto;
}
/* עמוד של קטגוריה, במחשב: חץ לחזרה בגובה כפתור הסגירה (המיקום המדויק בהמשך, ב-min-width: 768px) */
.cat-page {
  position: relative;
  padding-top: 30px;
}
.cat-back {
  position: absolute;
  top: -15px;
  right: 0;
  display: block;
  width: 8px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--placeholder);
  cursor: pointer;
}
/* החץ שמצויר: גובה 9 ועובי קו 1.5, כמו ה-X של כפתור הסגירה, והרוחב לפי היחס של החץ (4.1).
   ממורכז בתוך הכפתור (8 על 14), כך שהמיקום שלו לא משתנה */
.cat-back svg {
  display: block;
  width: 8px;
  height: 14px;
}
.cat-back::before {
  content: "";
  position: absolute;
  inset: -12px;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .cat-back:hover {
    color: var(--text);
  }
}
/* מחשב: אזור הגלילה של העמודים מתחיל מתחת לשורה של כפתור הסגירה (14 + 15 + 14), ולכן חץ שנמצא בתוכו
   מעל העמוד נחתך ולא נראה. החץ ממוקם ביחס לחלון עצמו: באותה שורה של כפתור הסגירה (14 מלמעלה,
   ממורכז לגובה 15 שלו), ובקו אחד עם הצד הימני של התוכן (התפריט 200 + ריווח התוכן 15).
   הכותרת בראש העמוד, כמו בשאר העמודים */
@media (min-width: 768px) {
  .settings-content:has(> .cat-page:not([hidden])),
  .cat-page {
    position: static;
  }
  .cat-page {
    padding-top: 0;
  }
  .cat-back {
    top: calc(14px + (15px - 14px) / 2);
    right: calc(200px + 15px);
  }
}
/* טלפון: החץ של העמודים (כמו בשאר העמודים), בלי החץ הנוסף ובלי הריווח */
@media (max-width: 767px) {
  .cat-page {
    padding-top: 0;
  }
  .cat-back {
    display: none;
  }
}

/* ===== טלפון: זכוכית לכפתורים בראש המסך (כמו שורת הפקודות בצ'אט) =====
   בראש המסך אין רקע, וההודעות נגללות מאחורי הכפתורים. לכן לכפתורים רקע זכוכית: צבע העמוד שקוף למחצה
   עם טשטוש, מסגרת 1 בצבע המסגרות ופינות 14 – בדיוק כמו שורת הפקודות במצב צ'אט */
@media (max-width: 767px) {
  /* כפתור פתיחת התפריט: רק אחרי שנשלחה הודעה (מצב צ'אט). במסך הפתיחה הוא נשאר בלי רקע.
     הזכוכית היא שטח הלחיצה של הכפתור (39 על 39, הסמל במרכז) */
  button.phone-menu-btn {
    isolation: isolate;
  }
  /* הכפתור 22 מלמעלה (במקום 15), בכל המסכים: במסך הפתיחה ובצ'אט. כך הזכוכית (12 סביב הסמל) רחוקה
     מראש המסך בדיוק כמו מצד שמאל, 10 פיקסלים מכל צד, והכפתור לא קופץ כשנשלחת ההודעה הראשונה */
  button.phone-menu-btn {
    top: calc(22px + env(safe-area-inset-top, 0px));
  }
  body.chat-mode:not(.phone-home) .phone-menu-btn::before {
    z-index: -1;
    border: 1px solid var(--box-stroke);
    border-radius: 14px;
    background: rgba(var(--bg-rgb), 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }
  /* כפתור הנגישות (משתמש מחובר): 16 מלמעלה (במקום 8), במסך הפתיחה ובצ'אט, כך שהוא רחוק מראש המסך
     בדיוק כמו מצד ימין (16). לאורח הכפתור כבר 17 מלמעלה ו-16 מהצד, בשורה של "התחברות", ולכן בלי שינוי */
  :root:not(.guest) .a11y-btn {
    top: calc(16px + env(safe-area-inset-top, 0px));
  }
  /* "התחברות" (משתמש לא מחובר): זכוכית תמיד, גם במסך הפתיחה וגם בצ'אט. המסגרת והפינות שלו נשארות */
  .guest-login {
    background: rgba(var(--bg-rgb), 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }
}

/* הודעת ברוך הבא למשתמש חדש: סיור ב-3 שלבים. בכל שלב המחשה, כותרת, הסבר קצר, נקודות התקדמות ו"הבא" / "דילוג" */
.welcome-box {
  max-width: 380px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px;
}
.welcome-step {
  margin: 0 0 12px;
  font-size: calc(13px * var(--a11y-text, 1));
  color: var(--placeholder);
}
.welcome-ill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 118px;
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg);
}
/* שלב 1: שאלה ותשובה לדוגמה, כמו בצ'אט */
.welcome-q,
.welcome-a {
  padding: 8px 12px;
  border: 1px solid var(--box-stroke);
  border-radius: 12px;
  font-size: calc(13px * var(--a11y-text, 1));
  line-height: 1.45;
}
.welcome-q {
  align-self: flex-start;
  background: var(--box-bg);
  color: var(--text);
}
.welcome-a {
  align-self: flex-end;
  max-width: 85%;
  color: var(--placeholder);
}
/* שלב 2: הכפתורים שמתחת לשדה, כל אחד עם השם שלו, כולם באותו צבע */
.welcome-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
}
.welcome-tool {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(13px * var(--a11y-text, 1));
  color: var(--text);
}
.welcome-tool span {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--box-stroke);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--placeholder);
}
/* שלב 3: מה נשמר */
.welcome-saved {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.welcome-saved div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--a11y-text, 1));
  color: var(--text);
}
.welcome-saved i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(30, 109, 246, 0.15);
  color: var(--send-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--a11y-text, 1));
  font-style: normal;
}
.welcome-title {
  margin: 0 0 6px;
  font-size: calc(19px * var(--a11y-text, 1));
  font-weight: 600;
  color: var(--text);
}
.welcome-text {
  margin: 0;
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.55;
  color: var(--placeholder);
}
.welcome-note {
  margin: 12px 0 0;
  font-size: calc(12px * var(--a11y-text, 1));
  color: var(--placeholder);
}
.welcome-note[hidden] {
  display: none;
}
.welcome-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.welcome-dots {
  display: flex;
  gap: 6px;
}
.welcome-dots i {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--box-stroke);
  transition: width 200ms ease, background-color 200ms ease;
}
.welcome-dots i.is-on {
  width: 20px;
  background: var(--send-active);
}
.welcome-btns {
  display: flex;
  gap: 6px;
}
.welcome-btns button {
  padding: 8px 14px;
  border: none;
  border-radius: 9px;
  background: none;
  font-family: inherit;
  font-size: calc(15px * var(--a11y-text, 1));
  cursor: pointer;
}
.welcome-btns .welcome-skip {
  color: var(--placeholder);
}
.welcome-btns .welcome-skip[hidden] {
  display: none;
}
.welcome-btns .welcome-start {
  background: var(--send-active);
  color: #FFFFFF;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .welcome-btns .welcome-start:hover {
    filter: brightness(0.92);
  }
  :where(html:not(.phone-ui)) .welcome-btns .welcome-skip:hover {
    color: var(--text);
  }
}
/* פתיחה וסגירה של הודעת ברוך הבא, כמו בהגדרות: במחשב החלון מופיע ונעלם בהדרגה וגדל או קטן מעט (200ms),
   ובטלפון הוא מחליק למעלה ולמטה (280ms). ההחשכה ברקע נכנסת ויוצאת בהדרגה */
#welcome-dialog {
  background: rgba(0, 0, 0, 0);
  transition: background-color 200ms ease;
}
#welcome-dialog.is-open {
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
}
#welcome-dialog .welcome-box {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease, transform 200ms ease;
}
#welcome-dialog.is-open .welcome-box {
  opacity: 1;
  transform: none;
}
@media (max-width: 767px) {
  #welcome-dialog {
    transition-duration: 280ms;
  }
  #welcome-dialog .welcome-box {
    opacity: 1;
    transform: translateY(100vh);
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #welcome-dialog,
  #welcome-dialog .welcome-box {
    transition: none;
  }
}