/* aibify · כנף י"ב — המעטפת.
   ⭐ **שפת העיצוב נגזרה מ-`ui-ux-pro-max` (2026-09-17)**, אחרי שהמשתמש
   אמר שהמערכת "נראית מזעזע": סגנון Trust & Authority למוצר B2B של
   שליטה — כחול אמון, צפחה לטקסט, משטחים נקיים, SVG בלבד (לא אמוג'י),
   יעדי מגע 44px, טבעות מיקוד גלויות, תנועה 150–220ms שמכבדת
   `prefers-reduced-motion`. AAA על טקסט גוף בשני המצבים.
   ⚠️ טוקנים במבנה HSL כמו ב-`answer/web/styles.css` (כנף ט'), כדי
      שהמגירה והמעטפת יוכלו להתיישר בלי תרגום.
   RTL כהנדסה: כל יישור לוגי (inline-start/end), לעולם לא left/right. */

:root {
  --background: 210 40% 98%;          /* #F8FAFC */
  --foreground: 217 33% 17%;          /* #1E293B */
  --card: 0 0% 100%;
  --muted: 214 32% 95%;
  --muted-foreground: 215 19% 35%;    /* #475569 — 7.1:1 על לבן */
  --primary: 221 83% 53%;             /* #2563EB */
  --primary-foreground: 0 0% 100%;
  --primary-soft: 214 95% 96%;
  --border: 214 32% 91%;              /* #E2E8F0 */
  --ring: 221 83% 53%;
  --radius: 12px;
  --radius-sm: 8px;
  --state-ok: 142 71% 29%;
  --state-degraded: 25 95% 39%;
  --state-error: 0 72% 42%;
  --shadow-sm: 0 1px 2px hsl(217 33% 17% / .06);
  --shadow-md: 0 4px 14px hsl(217 33% 17% / .08), 0 1px 3px hsl(217 33% 17% / .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 222 47% 7%; --foreground: 210 40% 96%; --card: 222 40% 10%;
    --muted: 217 33% 15%; --muted-foreground: 215 20% 70%;
    --primary: 213 94% 68%; --primary-foreground: 222 47% 9%; --primary-soft: 217 60% 18%;
    --border: 217 30% 20%; --ring: 213 94% 68%;
    --state-ok: 142 60% 55%; --state-degraded: 32 95% 60%; --state-error: 0 85% 68%;
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / .4);
    --shadow-md: 0 6px 18px hsl(0 0% 0% / .45);
  }
}

/* ⛔ **הכלל הראשון בקובץ, ובכוונה.** ב-2026-09-17 `.login-wrap{display:grid}`
   גבר על `[hidden]`, המשתמש ראה טופס התחברות שכבר לא היה אמור להיות שם,
   וה-DOM היה תקין. `!important` כאן אינו עצלות — הוא השער. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: "Heebo", "Assistant", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.ic { display: block; flex: 0 0 auto; }

.shell { display: flex; flex-direction: column; height: 100dvh; }

/* ─── סרגל עליון ─── */
.shell-bar {
  height: var(--bar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding-inline: 16px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card));
}
.brand {
  display: flex; align-items: center; gap: 8px; font-size: 17px; letter-spacing: -.01em;
  border: 0; background: transparent; cursor: pointer; padding: 6px 8px; margin-inline-start: -8px;
  border-radius: var(--radius-sm); min-height: 44px;
}
.brand:hover { background: hsl(var(--muted)); }
.brand b { font-weight: 700; }
.brand .mark { color: hsl(var(--primary)); display: inline-flex; }
.brand small {
  color: hsl(var(--muted-foreground)); font-size: 13px; font-weight: 500;
  padding-inline-start: 10px; border-inline-start: 1px solid hsl(var(--border));
}
.bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.bar-loc { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 15px; }
/* ⛔ **רגרסיה שנמדדה (M7, 2026-09-18):** בטלפון, אחרי שנוסף כפתור השיחות, `.bar-end`
   (עם `min-width:0`) **התכווץ מתחת לתוכן שלו** — כפתור היציאה נדחק ל-‎-29px מחוץ למסך
   (`scrollWidth` 419 ב-390) — והפירור, שלא התכווץ, נדחס אל כפתור הבית עד שכיסה אותו.
   הסדר הנכון: **הבית והפעולות אינם מתכווצים לעולם; הפירור הוא היחיד שמוותר** (`flex-basis:0`,
   קיצור בשלוש נקודות). כפתור הבית מעליו גם בשכבה, כדי שחפיפה עתידית לא תבלע לחיצה. */
.brand { flex: 0 0 auto; position: relative; z-index: 1; min-width: 44px; justify-content: center; }
.bar-end { flex: 0 0 auto; }
.bar-loc { flex: 1 1 0; overflow: hidden; }
.bar-loc .loc-link {
  border: 0; background: transparent; color: hsl(var(--muted-foreground)); font: inherit; cursor: pointer;
  padding: 6px 8px; border-radius: var(--radius-sm); min-height: 36px; white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.bar-loc .loc-link:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.bar-loc .loc-link:focus-visible, #logout-btn:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.bar-loc .loc-sep { color: hsl(var(--muted-foreground)); display: inline-flex; flex: 0 0 auto; }
.bar-loc .loc-here { font-weight: 600; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#shell-stamp[data-state="home"] { display: none; }
.badge {
  font-size: 13px; padding: 4px 10px; border-radius: 999px; font-weight: 500;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground));
  /* ⛔ **44px, לא 40.** נמדד ב-390: `drawer-btn`, `logout-btn` ו-`work-close`
     יצאו 40×40 — מתחת ליעד המגע של Apple HIG / Material, ושלושתם כפתורי
     יציאה או ניווט. שפת העיצוב כבר הצהירה 44px; המספר פשוט לא היה בקוד. */
  border-radius: var(--radius-sm); min-width: 44px; height: 44px; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: hsl(var(--muted)); border-color: hsl(var(--primary) / .35); }
.icon-btn[aria-pressed="true"] { background: hsl(var(--primary-soft)); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .45); }

/* ─── מצב הנתונים: עיגול בכותרת + פאנל פירוט ───
   ⭐ **המקום היחיד שבו העובדה הזו מופיעה.** כנף ט' מסירה במקביל את חותמת
      הטריות מכל כרטיס תשובה; הכותרת נושאת אותה במקומה — פעם אחת, לכל המסך.
   ⛔ **`color-not-only`** (חומרה High): הטון נושא צבע, **וגם** אייקון נבדל,
      **וגם** משפט. אף אחד מהשלושה אינו לבדו. */
.ds-wrap { position: relative; display: flex; }
.data-status {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  /* 44px — אותו יעד מגע כמו `.icon-btn`, ולא 36 כמו `.badge`. */
  min-height: 44px; padding-inline: 10px; border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  font-size: 13px; font-weight: 500; color: hsl(var(--foreground));
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.data-status:hover { background: hsl(var(--muted)); border-color: hsl(var(--tone) / .45); }
.data-status[aria-expanded="true"] { background: hsl(var(--muted)); border-color: hsl(var(--tone) / .55); }
/* הטון נגזר פעם אחת ממצב הכפתור, וכל השאר יורש אותו. */
.data-status[data-state="ok"]      { --tone: var(--state-ok); }
.data-status[data-state="late"]    { --tone: var(--state-degraded); }
.data-status[data-state="missing"] { --tone: var(--state-error); }
.data-status[data-state="unknown"] { --tone: var(--muted-foreground); }
.ds-dot {
  inline-size: 10px; block-size: 10px; border-radius: 999px; flex: 0 0 auto;
  background: hsl(var(--tone));
  /* הילה עדינה במקום פעימה: היא מבדילה בלי לתבוע תשומת לב מתמדת. */
  box-shadow: 0 0 0 3px hsl(var(--tone) / .18);
}
.ds-ic { display: inline-flex; color: hsl(var(--tone)); }
.ds-ic .ic { inline-size: 15px; block-size: 15px; }
.ds-text { white-space: nowrap; }

/* הפאנל. `inset-inline-end: 0` ⇒ ב-RTL הוא נצמד לקצה הנכון בלי left/right. */
.ds-panel {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
  inline-size: min(360px, calc(100vw - 32px)); max-block-size: min(70vh, 560px); overflow-y: auto;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 16px;
  text-align: start;
}
.ds-panel:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.ds-head { display: flex; align-items: center; gap: 8px; margin-block-end: 6px; }
.ds-head .ic { color: hsl(var(--tone)); }
.ds-panel[data-state="ok"]      { --tone: var(--state-ok); }
.ds-panel[data-state="late"]    { --tone: var(--state-degraded); }
.ds-panel[data-state="missing"] { --tone: var(--state-error); }
.ds-panel[data-state="unknown"] { --tone: var(--muted-foreground); }
.ds-title { font-size: 15px; font-weight: 700; margin: 0; }
.ds-sum { font-size: 13.5px; margin: 0 0 10px; color: hsl(var(--foreground)); }
.ds-advice {
  font-size: 13px; line-height: 1.5; margin: 0 0 14px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: hsl(var(--tone) / .09);
  border-inline-start: 3px solid hsl(var(--tone)); color: hsl(var(--foreground));
}
.ds-sub { font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0 0 6px; }
.ds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* שתי שורות, לא אחת צפופה: שם למעלה, מצב וזמן למטה. ב-390 שורה אחת
   הייתה גולשת או שוברת את השם העברי באמצע. */
.ds-row {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: 13px; border-inline-start: 3px solid hsl(var(--row-tone));
}
.ds-row-top { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.ds-row-sub { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.ds-state { color: hsl(var(--row-tone)); font-weight: 500; }
.ds-row[data-state="ok"] .ds-state { color: hsl(var(--muted-foreground)); font-weight: 400; }
.ds-row[data-state="ok"]      { --row-tone: var(--state-ok); }
.ds-row[data-state="late"]    { --row-tone: var(--state-degraded); background: hsl(var(--state-degraded) / .07); }
.ds-row[data-state="missing"] { --row-tone: var(--state-error); background: hsl(var(--state-error) / .08); }
.ds-name { font-weight: 600; white-space: nowrap; }
/* השם הטכני נשאר גלוי לצד העסקי: כנף ט' עדיין מציגה אותו, ושני שמות
   לאותו דבר בלי גשר ביניהם שוברים את האמון בשניהם. */
.ds-raw { font-size: 11.5px; color: hsl(var(--muted-foreground)); font-feature-settings: "tnum"; }
.ds-when { margin-inline-start: auto; white-space: nowrap; font-feature-settings: "tnum"; }
.ds-foot { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin: 12px 0 0; }

/* ⚠️ **בטלפון הכפתור מתכווץ לעיגול+אייקון, והפאנל נעשה גיליון תחתון.**
   360px של פאנל צף על מסך 390 נדחפים מחוץ למסך בקצה אחד. */
@media (max-width: 860px) {
  .ds-text { display: none; }
  .data-status { padding-inline: 9px; gap: 5px; }
  .ds-panel {
    position: fixed; inset-block-start: auto; inset-block-end: 0; inset-inline: 0;
    inline-size: auto; max-block-size: 76vh; border-radius: var(--radius) var(--radius) 0 0;
    padding-block-end: max(16px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .data-status { transition: none; }
}

/* ─── פס השיחות ───
   ⭐ *"כמו חלון קלוד-קוד ב-VS Code"*: רשימה, שם מהשאלה הראשונה, זמן, כניסה.
   ⛔ **שיחה בארכיון אינה נראית כמו חיה** — דרישה מפורשת ("say it out loud"):
      היא מאבדת את כפתור ההמשך, מעומעמת, ונושאת את נימוק החסימה בכתב. */
.sr-wrap { position: relative; display: flex; }
.sr-panel {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
  inline-size: min(380px, calc(100vw - 32px)); max-block-size: min(70vh, 560px); overflow-y: auto;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 14px 16px; text-align: start;
}
.sr-panel:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.sr-title { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.sr-note { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 0 0 12px; }
/* agent-sessions 2.4 — פעולות וחיפוש בראש הפס. יעדי מגע 44px. */
.sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sr-act { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; font-size: 13.5px; font-weight: 600;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--card)); cursor: pointer;
  transition: background-color .15s var(--ease); }
.sr-act:hover { background: hsl(var(--muted)); }
.sr-primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.sr-primary:hover { background: hsl(var(--primary) / .9); }
.sr-search-label { display: block; font-size: 12.5px; font-weight: 600; margin: 0 0 4px; }
.sr-search { width: 100%; min-height: 44px; font: inherit; font-size: 16px; color: inherit; background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 8px 12px; }
.sr-search:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .2); }
.sr-count { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
/* agent-sessions 2.4 — פעולות שורה: שינוי שם · פצל מכאן. משניות לכניסה (שקופות), 44px, עוטפות בטלפון. */
.sr-row-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 6px; }
.sr-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; font-size: 12.5px; font-weight: 500;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.sr-mini:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.sr-mini:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.sr-mini[aria-busy="true"] { cursor: progress; opacity: .6; }
.sr-rename { padding: 8px 10px 10px; border-top: 1px solid hsl(var(--border)); }
.sr-rename .sr-actions { margin: 0; }
.sr-flag[data-kind="done"] { color: hsl(var(--state-ok)); }
.sr-flag[data-kind="refused"] { color: hsl(var(--state-error)); }
@media (prefers-reduced-motion: reduce) { .sr-act, .sr-mini { transition: none; } }
.sr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sr-item {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); overflow: hidden;
  background: hsl(var(--background));
}
/* השורה כולה היא היעד — 44px, ולא חיצית קטנה בקצה. */
.sr-enter {
  inline-size: 100%; display: flex; flex-direction: column; gap: 3px; align-items: stretch;
  border: 0; background: transparent; cursor: pointer; text-align: start;
  padding: 9px 11px; min-height: 44px;
  transition: background-color .15s var(--ease);
}
.sr-enter:hover { background: hsl(var(--muted)); }
.sr-enter:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.sr-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ "ללא כותרת" נראה אחרת משם אמיתי — אחרת הוא נקרא כשם של שיחה. */
.sr-name[data-untitled="true"] { font-weight: 500; font-style: italic; color: hsl(var(--muted-foreground)); }
.sr-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.sr-when { font-feature-settings: "tnum"; }
.sr-sep { opacity: .5; }
.sr-state {
  font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.sr-item[data-state="live"] .sr-state { background: hsl(var(--state-ok) / .15); color: hsl(var(--state-ok)); }
/* ⛔ ארכיון/סיום: מעומעם, בלי כפתור כניסה, ועם הנימוק בכתב. */
.sr-item[data-resumable="false"] { background: hsl(var(--muted) / .45); }
.sr-item[data-resumable="false"] .sr-name { color: hsl(var(--muted-foreground)); }
.sr-blocked, .sr-flag {
  display: flex; align-items: flex-start; gap: 6px; margin: 0;
  padding: 7px 11px; font-size: 11.5px; line-height: 1.45;
  border-block-start: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground));
}
.sr-flag .ic { flex: 0 0 auto; margin-block-start: 1px; }
/* שני סימונים שאסור להשמיט — ולכן הם צבועים, לא מוסתרים. */
.sr-flag[data-kind="stale"]  { color: hsl(var(--state-degraded)); background: hsl(var(--state-degraded) / .07); }
.sr-flag[data-kind="resets"] { color: hsl(var(--state-degraded)); background: hsl(var(--state-degraded) / .07); }
.sr-dead { padding: 7px 11px; font-size: 11.5px; color: hsl(var(--muted-foreground)); border-block-start: 1px solid hsl(var(--border)); margin: 0; }
.sr-empty { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 0; }
.sr-foot { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin: 12px 0 0; }

@media (max-width: 860px) {
  .sr-panel {
    position: fixed; inset-block-start: auto; inset-block-end: 0; inset-inline: 0;
    inline-size: auto; max-block-size: 76vh; border-radius: var(--radius) var(--radius) 0 0;
    padding-block-end: max(16px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) { .sr-enter { transition: none; } }

/* ─── פאנל הקבצים של שיחה (agent-sessions 6.5) ו"נעוצה" (5.8) ───
   דרך `ui-ux-pro-max`: `progressive-disclosure` (הוצאה נפתחת בשורה) · `touch-target-size` 44px ·
   `empty-states` לכל תיקייה · `number-tabular` לגודל · `truncation-strategy` (שם מלא ב-title). */
.lib-head { display: flex; margin: 0 0 8px; }
.lib-body { display: flex; flex-direction: column; gap: 14px; }
.lib-root { display: flex; flex-direction: column; gap: 4px; }
.lib-root-title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; margin: 0; }
.lib-root-title .ic { color: hsl(var(--primary)); flex: 0 0 auto; }
.lib-n { margin-inline-start: auto; font-size: 11.5px; font-weight: 600; color: hsl(var(--muted-foreground));
  background: hsl(var(--muted)); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.lib-hint { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin: 0 0 4px; }
.lib-empty { font-size: 12.5px; padding: 8px 10px; border: 1px dashed hsl(var(--border)); border-radius: calc(var(--radius) - 2px); }
.lib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lib-item { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); background: hsl(var(--card)); min-width: 0; }
.lib-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; min-width: 0; }
.lib-file .ic { flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.lib-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: end; unicode-bidi: plaintext; }
.lib-size { flex: 0 0 auto; font-size: 11.5px; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.lib-fs { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.lib-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); background: hsl(var(--card)); }
.lib-opt:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .08); font-weight: 600; }
.lib-opt input { accent-color: hsl(var(--primary)); margin: 0; }
.lib-opt:has(input:focus-visible) { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.lib-consent { padding: 8px 10px 10px; border-top: 1px solid hsl(var(--border)); }
.lib-pin { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lib-pin-opts { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lib-pin-opts .sr-mini { border: 1px solid hsl(var(--border)); }
.sr-item .sr-state.sr-pinned { display: inline-flex; align-items: center; gap: 3px; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }


/* ─── גוף: משטח עבודה + מגירה ─── */
.shell-body { flex: 1 1 auto; min-height: 0; display: flex; position: relative; }

/* דסקטופ: המגירה תופסת את **רוב** הרוחב; משטח העבודה לצדה. */
.work   { flex: 0 0 38%; min-width: 0; max-width: 100vw; display: flex; flex-direction: column;
          border-inline-end: 1px solid hsl(var(--border)); overflow: hidden; }
.drawer { flex: 1 1 62%; min-width: 0; display: flex; flex-direction: column; background: hsl(var(--card)); }
.shell[data-drawer="closed"] .drawer { display: none; }
.shell[data-drawer="closed"] .work { flex: 1 1 100%; border-inline-end: 0; }
/* מגירה פתוחה ⇒ הקלט שלה הוא הקלט. שורת הקלט של המעטפת נסגרת איתה. */
.shell[data-drawer="open"] .composer { display: none; }
/* …אלא אם המגירה אישרה שהמעטפת מנהלת את הקלט והסתירה את השדה שלה. */
.shell[data-drawer="open"][data-owns-input="true"] .composer { display: flex; }
/* …או כל עוד למגירה אין שדה זמין (עדיין עולה) — אחרת הפוקוס נשאר בשדה מוסתר. */
.shell[data-drawer="open"][data-composer-hold="true"] .composer { display: flex; }

.drawer-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid hsl(var(--border)); font-size: 13px; font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.drawer-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-pill { margin-inline-start: auto; padding: 2px 10px; border-radius: 999px; background: hsl(var(--muted)); font-size: 12px;
            min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-pill[data-ack="pending"] { color: hsl(var(--state-degraded)); }
.ctx-pill[data-ack="ok"] { color: hsl(var(--state-ok)); }
/* ⛔ **היה 36×36 — מתחת ליעד המגע של 44px** (Apple HIG / Material), והוא
   היציאה **היחידה** מהמגירה בטלפון. יעד מגע קטן מדי על מסך היציאה
   היחיד אינו ליטוש, הוא מלכודת. */
.drawer-exit { min-width: 44px; height: 44px; gap: 6px; flex: 0 0 auto; }
.exit-label, .exit-ic-phone { display: none; }
.exit-ic-wide { display: inline-flex; }
#drawer-frame { flex: 1 1 auto; width: 100%; border: 0; }
.drawer-fallback { flex: 0 0 auto; padding: 14px 16px; border-top: 1px solid hsl(var(--border));
                   background: hsl(var(--card)); color: hsl(var(--muted-foreground)); font-size: 14px; }

/* ─── לוח הקוביות — התוכן הראשון של משטח העבודה, לא המסגרת ─── */
.board { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 20px 28px; }
.board > * { max-width: 1120px; margin-inline: auto; }
.shell[data-screen] .board { display: none; }
.menu-note { margin-top: 18px; font-size: 13px; color: hsl(var(--muted-foreground)); }

/* פירורי לחם — רמה 2 בלבד */
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 15px; }
.crumb {
  border: 0; background: transparent; cursor: pointer; color: hsl(var(--primary)); font-weight: 500;
  padding: 8px 10px; margin-inline-start: -10px; border-radius: var(--radius-sm); min-height: 44px;
}
.crumb:hover { background: hsl(var(--primary-soft)); }
.crumb-sep { color: hsl(var(--muted-foreground)); display: inline-flex; }
.crumb-here { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.crumb-here .ic { color: hsl(var(--primary)); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.tile {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  text-align: start; padding: 16px; min-height: 92px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  touch-action: manipulation;
}
.tile:hover { border-color: hsl(var(--primary) / .45); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tile:active { transform: translateY(0) scale(.99); }
.tile[aria-current="page"] { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary) / .4); }
.tile .t-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: hsl(var(--primary-soft)); color: hsl(var(--primary));
}
.tile .t-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile .t-title { font-weight: 600; font-size: 16px; line-height: 1.35; }
.tile .t-desc {
  font-size: 13.5px; color: hsl(var(--muted-foreground)); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile .t-sub { font-size: 12.5px; font-weight: 500; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.tile .t-go { color: hsl(var(--muted-foreground)); transition: transform .18s var(--ease), color .18s var(--ease); }
.tile:hover .t-go { color: hsl(var(--primary)); transform: translateX(-3px); }

/* רמה 1 — קוביות קבוצה: גדולות יותר, האייקון הוא העוגן */
.tiles[data-level="groups"] { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.tile-group { grid-template-columns: auto 1fr auto; min-height: 112px; padding: 20px; }
.tile-group .t-icon { width: 56px; height: 56px; border-radius: 14px; }
.tile-group .t-title { font-size: 18px; font-weight: 700; }

/* ─── מצב ריק — מצב מעוצב, לא שגיאה ─── */
.empty {
  border: 1px dashed hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card));
  padding: 28px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 14.5px;
}
.empty b { display: block; color: hsl(var(--foreground)); font-size: 16px; margin-bottom: 6px; }

/* ─── משטח העבודה ─── */
.work-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card));
}
.work-icon {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: hsl(var(--primary-soft)); color: hsl(var(--primary)); flex: 0 0 auto;
}
.work-icon:empty { display: none; }
/* ⛔ **נמדד 2026-09-17 ב-390: `#work-close` יצא מהמסך** (`x = -90..-50`
   במסך האוטומציות). הכותרת והחותמת לא התכווצו, ולכן `margin-inline-start:
   auto` דחף את היציאה אל מחוץ לגבול — **מסך שני שאי אפשר לצאת ממנו**,
   וגרוע מהמגירה כי הכפתור אינו נראה בכלל.
   התיקון: הכותרת היא היחידה שמתכווצת; היציאה והחותמת `flex: 0 0 auto`. */
.work-head h1 { font-size: 17px; margin: 0; font-weight: 700; min-width: 0; flex: 0 1 auto;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-head #work-close { margin-inline-start: auto; flex: 0 0 auto; }
.work-head .stamp { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stamp { font-size: 12.5px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.stamp[data-state="missing"] { color: hsl(var(--state-error)); }
.work-host { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; }

/* ─── שורת הקלט — pinned, גלויה בכל מצב שבו המגירה סגורה ───
   ⭐ **הכרעת המשתמש (`a83338f`): "תמיד רואים את חלון האינפוט".**
   ולכן היא נעלמת **רק** כשהמגירה פתוחה — ואז הקלט שלה הוא הקלט של
   המגירה עצמה, ושתי שורות קלט זו מעל זו הן הבלבול, לא הנוחות. */
.composer {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 16px; padding-block-end: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid hsl(var(--border)); background: hsl(var(--card));
}
.composer-row { display: flex; align-items: center; gap: 10px; }
.composer-icon { color: hsl(var(--primary)); display: inline-flex; }
/* ⛔ הרמז נאמר **לפני** השליחה ולא אחריה, ולכן הוא טקסט קבוע ולא טוסט. */
.composer-hint {
  margin: 0; padding-inline-start: 30px; font-size: 12px; line-height: 1.45;
  color: hsl(var(--muted-foreground));
}
.composer-hint b { font-weight: 600; color: hsl(var(--foreground)); }
.composer-hint .ch-ref { font-weight: 500; color: hsl(var(--foreground)); }
#ask {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: inherit; background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 10px 18px; min-height: 44px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
#ask::placeholder { color: hsl(var(--muted-foreground)); }
#ask:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .2); }
#ask-send { border-radius: 999px; min-width: 44px; height: 44px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
#ask-send:hover { background: hsl(var(--primary) / .9); }

/* ─── טלפון: מגירה פתוחה = **כל המסך**; סגורה = חלון האפליקציה מלא ───
   ⚠️ היציאה מהמגירה אינה מרנדרת מחדש את משטח העבודה, ולכן הגלילה
      נשמרת. גלילה שאבדה היא הקשר שאבד. */
@media (max-width: 860px) {
  .work   { flex: 1 1 100%; border-inline-end: 0; }
  .shell[data-drawer="open"] .drawer {
    position: fixed; inset: 0; z-index: 20; flex: none;
  }
  /* ⭐ **ראש המגירה נשאר על המסך.** ה-iframe גולל בתוך עצמו, ולכן הראש
     אינו נגלל איתו ממילא — אבל `sticky` + `z-index` מבטיחים שגם תוכן
     שיגדל לא ידחוף אותו החוצה, ו-`safe-area-inset-top` מרחיק אותו
     מהמגרעת ומשעון המערכת. */
  .shell[data-drawer="open"] .drawer-head {
    position: sticky; top: 0; z-index: 1; background: hsl(var(--card));
    padding-block-start: max(8px, env(safe-area-inset-top));
    padding-inline: 10px 14px;
  }
  /* בטלפון היציאה אינה "קיפול" אלא **חזרה ללוח** — ולכן היא נושאת מילים,
     יושבת ראשונה בסדר הקריאה (RTL ⇒ הימנית), ונראית ככפתור ולא כחיצית. */
  .drawer-exit { order: -1; padding-inline: 10px 14px; font: inherit; font-size: 14px; font-weight: 500;
                 color: hsl(var(--primary)); border-color: hsl(var(--primary) / .35); background: hsl(var(--primary-soft)); }
  .exit-label { display: inline; }
  .exit-ic-phone { display: inline-flex; }
  .exit-ic-wide { display: none; }
  /* הכותרת מוותרת על מקומה לטובת היציאה והתג — שלושתם לא נכנסים ב-390. */
  .drawer-title { display: none; }
  .ctx-pill { max-width: 42vw; }
  .board { padding: 16px 16px 20px; }
  .tiles, .tiles[data-level="groups"] { grid-template-columns: 1fr; gap: 10px; }
  .tile-group { min-height: 96px; padding: 16px; }
  .brand small, #shell-stamp { display: none; }
  .shell-bar { gap: 8px; padding-inline: 12px; }
  #role-badge { min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  /* בטלפון: רק הרמה הנוכחית, והלוגו הוא הדרך הביתה. */
  .brand b { display: none; }
  .bar-loc .loc-link, .bar-loc .loc-sep { display: none; }
  #role-badge { max-width: 18vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .tile:hover, .tile:active, .tile:hover .t-go { transform: none; }
}

/* ─── שכבת בסיס למסכי הכנפיים ───
   ⭐ המעטפת אינה כותבת מסכים — אבל היא מארחת אותם, ומסך בלי CSS משלו
   נראה כמו 1998 (נמדד בצילום של מסך השער, 2026-09-17). השכבה הזו נותנת
   לכל אלמנט סמנטי את שפת המעטפת **בספציפיות נמוכה** (`:where`), כך
   שכל כנף שמעצבת בעצמה גוברת עליה בלי להילחם בה. */
:where(.work-host) { font-size: 15px; }
:where(.work-host) :where(h1, h2, h3) { line-height: 1.3; margin: 0 0 10px; font-weight: 700; }
:where(.work-host) :where(h2) { font-size: 18px; }
:where(.work-host) :where(h3) { font-size: 16px; }
:where(.work-host) :where(p) { margin: 0 0 10px; }
:where(.work-host) :where(section, fieldset, .card) {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  padding: 16px; margin: 0 0 14px; box-shadow: var(--shadow-sm);
}
/* ⛔ **היה `min-height: 40px`, ונמדד 41 בפועל** (גובה התוכן גבר על ה-min).
   ⚠️ **וזו הייתה שגיאת ייחוס שלי:** דיווחתי ל-ו', ז' ולכנף ד' על כפתורים
   של 41px (`act-export`, `act-kill_arm`, `act-unsubscribe_admin`,
   `health-export`, `act-global-switch`) כאילו הם כתבו אותם — **הם ירשו
   אותם מכאן.** מסך שאינו מעצב כפתור בעצמו קיבל 41, לא 44. כנף ח' תפסה
   את זה. הרמה כאן סוגרת את הפגם אצל שלוש כנפיים בלי שיגעו בקוד.
   ⭐ **זה בדיוק הערך של שכבת בסיס ב-`:where()`:** תיקון אחד, ספציפיות אפס,
   וכל מי שמעצב בעצמו עדיין גובר בלי להילחם. */
:where(.work-host) :where(button:not(.tile):not(.icon-btn)) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; margin-inline-end: 8px; margin-block: 4px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm);
  background: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 500; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
:where(.work-host) :where(button:not(.tile):not(.icon-btn)):hover { background: hsl(var(--muted)); border-color: hsl(var(--primary) / .4); }
:where(.work-host) :where(button[disabled]) { opacity: .45; cursor: not-allowed; }

/* ⭐ **תוצאת פעולה — שורה אחת, ליד הכפתור שלחצו עליו** (ח"נ2-8, דרך `ui-ux-pro-max`:
   `submit-feedback` · `error-placement` · `color-not-only` · `toast-accessibility`).
   פעולה שאין לה תוצאה גלויה היא "לחצתי ולא קרה כלום". הצבע אינו נושא את המשמעות לבדו —
   אייקון SVG וטקסט תמיד לצדו; `role="status"` מכריז בלי לגנוב פוקוס. ריק ⇒ אינו תופס מקום. */
:where(.work-host) :where(.action-result) {
  --tone: var(--muted-foreground);
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid hsl(var(--tone) / .35); border-radius: var(--radius-sm);
  background: hsl(var(--tone) / .08); color: hsl(var(--foreground)); font-size: 14px; line-height: 1.5;
}
:where(.work-host) :where(.action-result:empty) { display: none; }
:where(.work-host) :where(.action-result) :where(svg) { flex: none; margin-top: 1px; color: hsl(var(--tone)); }
:where(.work-host) :where(.action-result[data-state="recorded"]) { --tone: var(--state-ok); }
:where(.work-host) :where(.action-result[data-state="refused"])  { --tone: var(--state-error); }
/* אותו כלל לשדות: `touch-friendly-input` — גובה קלט בטלפון ≥44px.
   שדה שנגעת בו ופספסת הוא אותה תקלה בדיוק ככפתור שפספסת. */
:where(.work-host) :where(input, select, textarea) {
  font: inherit; color: inherit; background: hsl(var(--card)); min-height: 44px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 8px 12px;
}
:where(.work-host) :where(input, select, textarea):focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .2); }
:where(.work-host) :where(table) {
  width: 100%; border-collapse: separate; border-spacing: 0; background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
:where(.work-host) :where(th, td) { padding: 10px 12px; text-align: start; border-bottom: 1px solid hsl(var(--border)); }
:where(.work-host) :where(th) { background: hsl(var(--muted)); font-size: 13px; font-weight: 600; color: hsl(var(--muted-foreground)); }
:where(.work-host) :where(tr:last-child > td) { border-bottom: 0; }
:where(.work-host) :where(tbody tr:hover > td) { background: hsl(var(--muted) / .5); }
:where(.work-host) :where(code) { font-size: 13px; background: hsl(var(--muted)); padding: 1px 6px; border-radius: 6px; }

/* ───── מסך הכניסה של המעטפת (ח"נ1-7, §4 י"ב.5) ───── */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card {
  width: min(400px, 100%); background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-md);
}
.login-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; margin-bottom: 20px; }
.login-brand .mark { color: hsl(var(--primary)); display: inline-flex; }
.login-card h1 { font-size: 22px; line-height: 1.3; margin: 0 0 6px; font-weight: 700; }
.login-sub { margin: 0 0 18px; color: hsl(var(--muted-foreground)); font-size: 14px; }
.login-alert {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px;
  background: hsl(var(--state-degraded) / .1); border: 1px solid hsl(var(--state-degraded) / .35); color: hsl(var(--foreground));
}
.login-card label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.login-card input {
  width: 100%; font: inherit; font-size: 16px; color: inherit; background: hsl(var(--card)); min-height: 44px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 10px 12px; text-align: start;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.login-card input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .22); }
.pw-wrap { position: relative; }
/* השדה `dir=ltr`: סוף-השורה שלו הוא ימין, בדיוק מתחת לכפתור (תחילת-השורה של העטיפה ב-RTL). */
.pw-wrap input { padding-inline-end: 52px; }
.pw-toggle { position: absolute; inset-inline-start: 2px; top: 2px; height: 40px; min-width: 44px; border-color: transparent; background: transparent; color: hsl(var(--muted-foreground)); }
.login-err { color: hsl(var(--state-error)); font-size: 14px; min-height: 22px; margin-top: 10px; }
.login-submit {
  width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: var(--radius-sm);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; cursor: pointer;
  transition: background-color .15s var(--ease);
}
.login-submit:hover { background: hsl(var(--primary) / .9); }
.login-submit:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .login-card input, .login-submit { transition: none; } }