/* Secretus - הנגן של "דוגמאות מהעבודה השוטפת" (#sc-slot). נבנה ב-showcase.js, ובלי JS לא קיים
   (ואז מוצגת רשימת המשימות). משתמש במשתנים של styles.css: צבעים, פונט, פינות ותנועה.

   מבנה: .sc > .sc-nav (.sc-hint-row, הרמז "בחרו משימה לצפייה", ו-.sc-tabs, הלשוניות) + .sc-main > .sc-stage (שישה חלונות, אחד על השני) + .sc-foot (כפתור הניגון ותיאור המשימה).
   החלון (.sc-win) בסגנון של אפליקציית Claude למחשב, בצבעים של האתר ובלי לוגו: פס עליון, סרגל צדדי, השיחה,
   תיבת הכתיבה ולוח התוצר. הגודל שלו לפי רוחב הבמה (container queries):
   - קטן (עד 519px): השיחה לכל הרוחב, ולוח התוצר עולה מלמטה מעל השיחה.
   - בינוני (520 עד 719px): פס צר של אייקונים, השיחה בטור קבוע ולוח התוצר לידה.
   - גדול (720px ומעלה): גם סרגל צדדי, שנסגר כשלוח התוצר נפתח.
   התנועה: showcase.js כותב משתני CSS לפי הזמן (--o שקיפות, --y הזזה, --s גודל, --p התקדמות, --open פתיחת הלוח,
   --sy גלילה), וכאן הם הופכים ל-opacity ו-transform בלבד. ברירות המחדל הן המסגרת האחרונה. */

/* עם הנגן, הרשימה (התוכן בלי JS) מוסתרת: השמות והתיאורים שלה נמצאים בלשוניות ומתחת לחלון */
.sc-on .tasks { display: none; }

.sc {
  display: grid;
  gap: 14px;
}

/* ===== הרמז והלשוניות (.sc-nav): בנייד שורה של צ'יפים שנגללת לרוחב, במחשב טור ליד החלון ===== */
.sc-nav { display: grid; gap: 8px; min-width: 0; }

/* "בחרו משימה לצפייה" עם סמן של לחיצה, ובשורת הצ'יפים גם "החליקו לעוד" (בעכבר: "לעוד משימות"), רק כשיש עוד משימות
   בכיוון הקריאה (is-more, מ-showcase.js). הטקסט ב---muted ו---teal-ink, 4.5:1 ומעלה גם על לבן וגם על מנטה */
.sc-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.sc-hint { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; }
.sc-hint-ic { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--teal-ink); }
.sc-hint-ic .icon { stroke-width: 1.8; }
/* הסמן נלחץ אל הקצה שלו, והקווים נפתחים ממנו (רק ברמז החד פעמי) */
.sc-hint-cur, .sc-hint-rays { transform-box: view-box; transform-origin: 9.6px 9.6px; }
/* גל קטן מהקצה של הסמן (8px מהפינה באייקון של 20px) */
.sc-hint-ring { position: absolute; top: -4px; left: -4px; width: 24px; height: 24px; border: 1.5px solid var(--teal); border-radius: 50%; opacity: 0; pointer-events: none; }
.sc-more { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 32px; margin-inline-end: -8px; padding-inline: 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--teal-ink); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; cursor: pointer; opacity: 0; visibility: hidden; }
.sc-more .icon { stroke-width: 2; }
.is-more .sc-more { opacity: 1; visibility: visible; }
.sc-more-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sc-more-touch { display: none; }
  .sc-more-mouse { display: inline; }
  .sc-more:hover { background: var(--teal-tint); }
}

/* השורה: מקום מלמעלה ומלמטה לטבעת הפוקוס (3px ועוד 2px מרווח), והשוליים השליליים שומרים על הריווח.
   הקצה שיש מעבר לו מתעמעם: --fs בהתחלה (מימין) ו---fe בסוף (משמאל), בפיקסלים לפי מרחק הגלילה (showcase.js) */
.sc-tabs { --fs: 0px; --fe: 0px; display: flex; gap: 8px; margin-inline: calc(-1 * var(--gutter)); margin-block: -4px -2px; padding: 6px var(--gutter); overflow-x: auto; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent);
  mask-image: linear-gradient(to left, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent); }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab { position: relative; z-index: 0; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding-block: 0; padding-inline: 6px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink-2); font-size: 15px; font-weight: 500; line-height: 1.25; white-space: nowrap; cursor: pointer; text-align: start; }
/* שכבות של לשונית שלא נבחרה, למצבי ריחוף, פוקוס והרמז: משטח בגוון טורקיז (glow), עיגול האייקון שמתמלא בטורקיז
   מהמרכז (fill, ב-clip-path) והחץ (go, רק במחשב) */
.sc-tab-glow { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--teal-tint); opacity: 0; }
.sc-tab-ic { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
.sc-tab-fill { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--white); clip-path: circle(0 at 50% 50%); }
.sc-tab-go { display: none; }
.sc-tab:focus-visible { outline-offset: 2px; }
.sc-tab:focus-visible .sc-tab-glow { opacity: 1; }
.sc-tab:focus-visible .sc-tab-fill { clip-path: circle(50% at 50% 50%); }
@media (hover: hover) {
  .sc-tab:hover { border-color: var(--teal-soft); color: var(--ink); }
  .sc-tab:hover .sc-tab-glow { opacity: 1; }
  .sc-tab:hover .sc-tab-fill { clip-path: circle(50% at 50% 50%); }
}
/* הלשונית שנבחרה: מסגרת טורקיז ועיגול מלא, בלי המשטח ובלי החץ */
.sc-tab[aria-selected="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); color: var(--ink); }
.sc-tab[aria-selected="true"] .sc-tab-ic { background: var(--teal); color: var(--white); }
.sc-tab[aria-selected="true"] .sc-tab-glow { opacity: 0; }
.sc-tab[aria-selected="true"] .sc-tab-fill { clip-path: circle(50% at 50% 50%); }
/* פס ההתקדמות של הסרטון, על הלשונית שנבחרה. רק במחשב, שבו הסרטונים עוברים לבד מאחד לבא */
.sc-tab-bar { position: absolute; display: none; inset-inline: 0; bottom: 0; height: 3px; background: var(--teal); transform: scaleX(var(--p, 0)); transform-origin: right center; }
.sc--rm .sc-tab-bar { display: none; }

@media (min-width: 1100px) {
  .sc { grid-template-columns: 264px minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 44px); align-items: start; }
  .sc-nav { gap: 10px; }
  .sc-hint-row { padding-inline: 12px; }
  .sc-more { display: none; }
  .sc-tabs { flex-direction: column; gap: 4px; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .sc-tab { width: 100%; min-height: 64px; padding: 10px 12px; gap: 14px; border-color: transparent; border-radius: var(--r); background: transparent; font-size: 16.5px; font-weight: 700; white-space: normal; }
  .sc-tab-ic { width: 40px; height: 40px; }
  /* החץ נכנס מכיוון הקריאה ומצביע אל החלון */
  .sc-tab-go { display: grid; place-items: center; flex: none; margin-inline-start: auto; color: var(--teal-ink); opacity: 0; transform: translateX(8px); }
  .sc-tab-go .icon { stroke-width: 2; }
  .sc-tab:focus-visible .sc-tab-go { opacity: 1; transform: none; }
  .sc-tab[aria-selected="true"] { border-color: var(--line); box-shadow: none; background: var(--white); }
  .sc-tab-bar { display: block; inset-inline: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; }
}
@media (min-width: 1100px) and (hover: hover) {
  .sc-tab:hover { border-color: transparent; }
  .sc-tab:hover .sc-tab-go { opacity: 1; transform: none; }
  .sc-tab[aria-selected="true"]:hover { border-color: var(--line); }
}
@media (min-width: 1100px) {
  .sc-tab[aria-selected="true"] .sc-tab-go { opacity: 0; }
}

/* ===== התנועה של הלשוניות: מעברים קצרים, לחיצה, והרמז החד פעמי. בלי כל אלה כשמבקשים פחות תנועה ===== */
@media (prefers-reduced-motion: no-preference) {
  .sc-more { transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
  .is-more .sc-more { transition: opacity var(--dur-2) var(--ease); }
  .sc-tab { transition: transform var(--dur-1) var(--ease); }
  .sc-tab:active { transform: scale(.97); }
  @media (min-width: 1100px) {
    .sc-tab:active { transform: scale(.98); }
  }
  .sc-tab-glow { transition: opacity var(--dur-2) var(--ease); }
  .sc-tab-fill { transition: clip-path var(--dur-2) var(--ease); }
  .sc-tab-go { transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }

  /* הרמז (sc--cue, כ-1.5 שניות, CUE_MS ב-showcase.js): הסמן נלחץ וגל קטן יוצא ממנו, ואז הלשוניות שלא נבחרו נדלקות
     אחת אחרי השנייה (--k, הסדר שלהן בלי הלשונית שנבחרה) ונכבות. בשורת הצ'יפים, כשיש עוד משימות מעבר לקצה (sc--over),
     השורה גם זזה מעט אל ההתחלה וחוזרת, והחץ של "החליקו לעוד" מצביע פעמיים. רק transform, opacity ו-clip-path,
     בעקומה הרגילה (--ease). בכל keyframes מוגדר רק האמצע, כך שההתחלה והסוף הם המצב הרגיל של הלשונית (גם אם העכבר עליה).
     ההזזה של השורה, 12px, קטנה מהשוליים הכי צרים שלה (16px בטלפון, --gutter, ו---demo-pad מ-768px), כדי שהצ'יפ
     הראשון, זה שנבחר, יישאר כולו בתוך השורה ולא ייחתך בקצה */
  .sc--cue .sc-hint-cur { animation: sc-cue-press var(--dur-3) var(--ease); }
  .sc--cue .sc-hint-rays { animation: sc-cue-rays var(--dur-3) var(--ease); }
  .sc--cue .sc-hint-ring { animation: sc-cue-ring calc(var(--dur-3) + var(--dur-1)) var(--ease) var(--dur-1); }
  .sc--cue .sc-tab:not([aria-selected="true"]) .sc-tab-glow,
  .sc--cue .sc-tab:not([aria-selected="true"]) .sc-tab-fill,
  .sc--cue .sc-tab:not([aria-selected="true"]) .sc-tab-go { animation: sc-cue-on calc(var(--dur-3) - var(--stagger)) var(--ease) calc(var(--dur-2) + var(--k, 0) * var(--stagger) * 1.5); }
  .sc--cue .sc-tab:not([aria-selected="true"]) .sc-tab-fill { animation-name: sc-cue-fill; }
  .sc--cue.sc--over .sc-tab { animation: sc-cue-peek calc(var(--dur-3) * 1.7) var(--ease) var(--dur-1); }
  .sc--cue .sc-more .icon { animation: sc-cue-nudge calc(var(--dur-3) * 1.4) var(--ease) var(--dur-2); }
}
@keyframes sc-cue-press { 30% { transform: scale(.78); } 62% { transform: none; } }
@keyframes sc-cue-rays { 28% { opacity: 0; transform: scale(.55); } 62% { opacity: 1; transform: scale(1.15); } }
@keyframes sc-cue-ring { from { opacity: .7; transform: scale(.25); } to { opacity: 0; transform: scale(1); } }
@keyframes sc-cue-on { 38% { opacity: 1; transform: none; } }
@keyframes sc-cue-fill { 38% { clip-path: circle(50% at 50% 50%); } }
@keyframes sc-cue-peek { 38%, 52% { transform: translateX(12px); } }
@keyframes sc-cue-nudge { 25%, 75% { transform: translateX(-4px); } 50% { transform: none; } }

/* ===== הבמה: שישה חלונות באותו מקום. רק הפעיל גלוי, ובמעבר הם מתמזגים ===== */
.sc-main { min-width: 0; }
.sc-stage { display: grid; container-type: inline-size; }
.sc-panel { grid-area: 1 / 1; min-width: 0; border-radius: var(--r-lg); opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
.sc-panel.is-active { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease); }
.sc--still .sc-panel { transition: none; }

/* מתחת לחלון: כפתור הניגון ותיאור המשימה */
.sc-foot { display: flex; align-items: center; gap: 12px 16px; margin-top: 14px; }
.sc-ctl { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 40px; padding-inline: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.sc-ctl:hover { border-color: var(--teal-soft); }
.sc-ctl .icon { width: 16px; height: 16px; stroke-width: 2; }
.sc-ctl .sc-ic-play, .sc-ctl .sc-ic-replay, .sc-ctl[data-state="paused"] .sc-ic-pause, .sc-ctl[data-state="done"] .sc-ic-pause { display: none; }
.sc-ctl[data-state="paused"] .sc-ic-play, .sc-ctl[data-state="done"] .sc-ic-replay { display: block; }
.sc--rm .sc-ctl { display: none; }
.sc-desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }

/* ===== החלון ===== */
.sc-win {
  --rail: 0px; --side: 0px; --cw: calc(100cqw - 2px); --c-shift: 0px; --aw: 100%; --body-h: 440px;
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  color: var(--ink-2); font-size: 13.5px; line-height: 1.55; text-align: start;
}
.sc-win p { margin: 0; }
.sc-win .icon { stroke-width: 1.8; }

/* הפס העליון: Claude, שם הפרויקט, "נתונים מדומים" ושלוש נקודות. כמו החלון של סרטון ההסבר (.xp-tbar), כדי ששניהם ייראו כמו אותה אפליקציה */
.sc-chrome { display: flex; align-items: center; gap: 7px; height: 40px; padding-inline: 14px 12px; border-bottom: 1px solid var(--line-mint); background: var(--mint); white-space: nowrap; }
.sc-app { color: var(--ink); font-size: 13.5px; font-weight: 700; }
.sc-sep { color: var(--muted); }
.sc-proj { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-weight: 500; }
.sc-mock { display: inline-flex; align-items: center; flex: none; margin-inline-start: 2px; padding: 2px 9px; border: 1px solid var(--teal-soft); border-radius: var(--r-pill); background: var(--white); color: var(--teal-ink); font-size: 13px; font-weight: 700; line-height: 1.35; }
.sc-dots { display: flex; gap: 6px; flex: none; margin-inline-start: auto; }
.sc-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
@container (max-width: 339px) {
  .sc-dots { display: none; }
}

.sc-body { position: relative; height: var(--body-h); overflow: hidden; opacity: var(--f, 1); }

/* הפס הצר והסרגל הצדדי (מימין) */
.sc-rail { position: absolute; top: 0; bottom: 0; right: 0; width: var(--rail); display: none; flex-direction: column; align-items: center; gap: 6px; padding-block: 10px; border-inline-end: 1px solid var(--line-mint); background: var(--mint); color: var(--ink-2); }
.sc-ri { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--ink-2); }
.sc-ri--new { border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
.sc-av { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1; }
.sc-rail .sc-av { margin-top: auto; }
.sc-side { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: var(--side); display: none; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-inline-end: 1px solid var(--line-mint); background: var(--mint); opacity: calc(1 - var(--open, 1)); transform: translateX(calc(var(--open, 1) * 102%)); }
.sc-side-tg { margin-bottom: 4px; }
.sc-new { display: flex; align-items: center; gap: 8px; min-height: 34px; padding-inline: 4px 8px; border-radius: var(--r-sm); color: var(--ink); font-weight: 700; }
.sc-new-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
.sc-sl { margin-top: 12px !important; padding-inline: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.sc-si { display: flex; align-items: center; gap: 8px; min-height: 32px; padding-inline: 8px; border-radius: var(--r-sm); color: var(--ink-2); white-space: nowrap; }
.sc-si span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-si .icon { color: var(--teal-ink); }
.sc-si--proj { color: var(--ink); font-weight: 500; }
.sc-chats { position: relative; overflow: hidden; }
.sc-si--cur { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); opacity: var(--o, 1); }
.sc-chats-old { transform: translateY(calc(var(--y, 0) * 1px)); }
.sc-me { display: flex; align-items: center; gap: 8px; margin-top: auto !important; padding: 8px 6px 0; border-top: 1px solid var(--line-mint); color: var(--ink); font-weight: 500; }

/* השיחה: טור קבוע. לפני שלוח התוצר נפתח הוא במרכז, ואחר כך זז הצידה (רק transform) */
.sc-conv { position: absolute; top: 0; bottom: 0; right: var(--rail); width: var(--cw); display: flex; flex-direction: column; padding: 14px 14px 12px; transform: translateX(calc((1 - var(--open, 1)) * var(--c-shift))); }
.sc-view { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px); mask-image: linear-gradient(to bottom, transparent, #000 16px); }
.sc-hello { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 12px; color: var(--ink); font-size: 19px; font-weight: 700; text-align: center; opacity: var(--o, 0); }
.sc-thread { display: flex; flex-direction: column; gap: 12px; padding-block: 12px 4px; transform: translateY(calc(var(--sy, 0) * -1px)); }

/* ההודעה של עורכת הדין: הקבצים, ומתחתם בועה (בצד שמאל, כמו הודעה יוצאת) */
.sc-um { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 90%; }
.sc-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sc-file { display: inline-flex; align-items: center; gap: 7px; height: 30px; flex: none; padding-inline: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sc-file-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--teal-tint); color: var(--teal-ink); }
.sc-file-t { color: var(--muted); font-size: 13px; }
.sc-file--more { padding-inline: 10px; color: var(--ink-2); }
.sc-bubble { padding: 8px 13px; border-radius: 14px; border-start-end-radius: 5px; background: var(--teal-tint); color: var(--ink); }

/* השלבים: עיגול שמסתובב בזמן העבודה, וסימון כשהשלב נגמר */
.sc-steps { display: grid; gap: 3px; }
.sc-step { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sc-sic { position: relative; width: 16px; height: 16px; flex: none; margin-top: 2px; }
.sc-spin { position: absolute; inset: 0; color: var(--teal); stroke-width: 2.4; opacity: var(--o, 0); transform: rotate(calc(var(--r, 0) * 1deg)); }
.sc-chk { position: absolute; inset: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
.sc-chk .icon { stroke-width: 2.8; }
.sc-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.sc-say { color: var(--ink-2); }

/* כרטיס התוצר בשיחה. כשהלוח פתוח, מסגרת טורקיז */
.sc-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.sc-card-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); background: var(--teal-tint); color: var(--teal-ink); }
.sc-card-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sc-card-txt b { overflow: hidden; color: var(--ink); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.sc-card-txt span { color: var(--muted); font-size: 13px; }
.sc-card-on { position: absolute; inset: -1px; border: 1.5px solid var(--teal); border-radius: inherit; opacity: var(--o, 1); }

/* תיבת הכתיבה */
.sc-comp { position: relative; flex: none; margin-top: 10px; padding: 9px 10px 8px 12px; padding-inline: 12px 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--white); }
.sc-ctext { position: relative; height: 42px; overflow: hidden; color: var(--ink); line-height: 21px; }
.sc-ph { position: absolute; top: 0; right: 0; left: 0; color: var(--muted); opacity: var(--o, 1); }
.sc-typed { opacity: var(--o, 1); }
.sc-caret { position: absolute; top: 2px; left: 0; width: 1.5px; height: 17px; background: var(--ink); opacity: var(--o, 0); transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)); }
/* הקבצים המצורפים: מגש מעל תיבת הכתיבה, עד שהבקשה נשלחת */
.sc-cfiles { position: absolute; bottom: calc(100% + 8px); right: 0; left: 0; display: flex; flex-wrap: wrap-reverse; gap: 6px; }
.sc-ctools { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.sc-tool { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); }
.sc-send { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--line); color: var(--ink); transform: scale(var(--s, 1)); }
.sc-send-on { position: absolute; inset: 0; border-radius: 50%; background: var(--coral); opacity: var(--o, 0); }
.sc-send .icon { position: relative; stroke-width: 2.2; }

/* ===== לוח התוצר ===== */
.sc-out { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: column; background: var(--mint); opacity: var(--o, 1); transform: translateY(calc((1 - var(--open, 1)) * 104%)); }
.sc-out-head { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 9px 12px 9px 14px; padding-inline: 14px 12px; border-bottom: 1px solid var(--line-mint); }
.sc-out-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.sc-out-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--white); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line); }
.sc-out-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-acts { display: flex; gap: 6px; }
.sc-act { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding-inline: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sc-act .icon { color: var(--ink-2); }
/* שורת המצב: "כותב..." בזמן הכתיבה, ובסוף "טיוטה לבדיקת עורך הדין" */
.sc-status { position: relative; grid-column: 1 / -1; height: 26px; }
.sc-writing { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; height: 26px; color: var(--muted); font-size: 13px; opacity: var(--o, 0); }
.sc-dot { opacity: var(--o, 1); }
.sc-review { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 8px 11px; border: 1px solid var(--coral); border-radius: var(--r-pill); background: var(--coral-tint); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; transform-origin: right center; }
.sc-review .icon { color: var(--ink); stroke-width: 2; }
.sc-oview { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 10px; -webkit-mask-image: linear-gradient(to bottom, transparent 2px, #000 14px); mask-image: linear-gradient(to bottom, transparent 2px, #000 14px); }
.sc-sheet { padding: 14px 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); transform: translateY(calc(var(--sy, 0) * -1px)); }
/* בחלון צר לוח התוצר מכסה את השיחה, ולכן ההערה של Claude בסוף מופיעה גם בתחתית הלוח */
.sc-out-say { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: none; align-items: flex-start; gap: 8px; padding: 9px 14px 10px; border-top: 1px solid var(--line-mint); background: var(--white); color: var(--ink-2); line-height: 1.5; }
.sc-out-say-ic { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
@container (max-width: 519px) {
  .sc-out-say { display: flex; }
}

/* ===== גדלים לפי רוחב הבמה ===== */
@container (min-width: 520px) {
  .sc-win { --rail: 48px; --cw: 288px; --body-h: 472px; --aw: calc(100cqw - 2px - var(--rail) - var(--cw)); --c-shift: calc((100cqw - 2px - var(--rail) - var(--cw)) / -2); }
  .sc-rail { display: flex; }
  .sc-out { width: var(--aw); border-inline-start: 1px solid var(--line); transform: translateX(calc((var(--open, 1) - 1) * 104%)); }
  .sc-oview { padding: 12px; }
  .sc-sheet { padding: 16px 18px 20px; }
}
@container (min-width: 720px) {
  .sc-win { --rail: 52px; --side: 206px; --cw: 368px; --body-h: 516px; --c-shift: calc(-1 * (var(--side) + (100cqw - 2px - var(--side) - var(--cw)) / 2 - var(--rail))); font-size: 14px; }
  .sc-side { display: flex; }
  .sc-conv { padding-inline: 18px; }
  .sc-doc { font-size: 14px; }
}

/* ===== מה שנכתב ונכנס (ברירת המחדל: הסוף) ===== */
.sc-w, .sc-ch { opacity: var(--o, 1); }
.sc-u { opacity: var(--o, 1); transform: translateY(calc(var(--y, 0) * 1px)); }
.sc-p { opacity: var(--o, 1); transform: scale(var(--s, 1)); }
.sc-m { position: relative; }
.sc-m-bg { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--coral-tint); transform: scaleX(var(--p, 1)); transform-origin: right center; }

/* ===== המסמכים ===== */
.sc-doc { position: relative; z-index: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.sc-doc > * + * { margin-top: 8px; }
.sc-doc b { color: var(--ink); }
.sc-dh { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sc-dt { color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.sc-ds { color: var(--muted); font-size: 13px; }
.sc-sh { padding-top: 2px; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.sc-sh--hot { display: flex; align-items: center; gap: 7px; }
.sc-sh--hot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.sc-box { padding: 10px 12px; border-inline-start: 3px solid var(--teal); border-radius: var(--r-sm); background: var(--mint); }
.sc-box-h { margin-bottom: 2px !important; color: var(--ink); font-size: 13px; font-weight: 700; }
.sc-box p + p { margin-top: 4px; }

/* מכתב: נייר המשרד, עם הקו הטורקיז כמו בתבנית שבסרטון ההסבר (.xp-lh) */
.sc-lh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 2px solid var(--teal); }
.sc-lh-name { color: var(--teal-ink); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.sc-lh-sub { color: var(--muted); font-size: 13px; font-weight: 500; }
.sc-l-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; color: var(--muted); font-size: 13px; }
.sc-l-to { color: var(--ink); }
.sc-l-re { color: var(--ink); font-weight: 700; }
.sc-l-sign { color: var(--ink); }

/* ציר זמן: נקודה וקו לכל אירוע, והמועדים הקרובים על רקע כתום בהיר */
.sc-tl { display: grid; gap: 0; }
.sc-tl-row { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 8px; padding-block: 4px 5px; padding-inline: 20px 8px; border-radius: var(--r-sm); }
.sc-tl-row::before { content: ''; position: absolute; inset-inline-start: 6px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.sc-tl-row:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 9px; top: 21px; bottom: -6px; width: 2px; border-radius: 2px; background: var(--teal-soft); }
.sc-tl-d { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-tl-e { color: var(--ink-2); }
.sc-src { grid-column: 2; justify-self: start; display: inline-block; margin-top: 2px; padding: 0 7px; border-radius: 6px; background: var(--mint); color: var(--teal-ink); font-size: 13px; line-height: 22px; transform-origin: right center; }
.sc-tl--hot { gap: 6px; }
.sc-tl--hot .sc-tl-row { padding-block: 6px 7px; }
.sc-tl--hot .sc-tl-row::before { top: 13px; background: var(--coral); }
.sc-tl--hot .sc-tl-row::after { display: none; }
.sc-tl--hot .sc-tl-e { color: var(--ink); font-weight: 500; }
.sc-tl--hot .sc-src { background: var(--white); }
.sc-in { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 20px; white-space: nowrap; }

/* קליטת תיק: מה התקבל, ומה חסר */
.sc-ck { display: grid; gap: 3px; }
.sc-ck li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sc-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--teal); color: var(--white); }
.sc-ok .icon { stroke-width: 3; }
.sc-warn { display: inline-block; padding: 0 7px; border: 1px solid var(--coral); border-radius: 6px; background: var(--coral-tint); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 20px; transform-origin: right center; }
.sc-miss { display: grid; gap: 4px; counter-reset: miss; }
.sc-miss li { position: relative; padding-block: 3px; padding-inline: 32px 8px; border-radius: var(--r-sm); color: var(--ink); counter-increment: miss; }
.sc-miss li::before { content: counter(miss); position: absolute; inset-inline-start: 7px; top: 5px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--coral); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; }

/* כתב טענות */
.sc-court { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.sc-ct { color: var(--ink); font-weight: 700; }
.sc-cn { color: var(--ink); }
.sc-blank { color: var(--muted); letter-spacing: -.05em; }
.sc-parties { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--mint); }
.sc-by { color: var(--muted); font-size: 13px; }
.sc-vs { padding-block: 2px; color: var(--muted); font-size: 13px; text-align: center; }
.sc-ctitle { color: var(--ink); font-size: 15px; font-weight: 700; text-align: center; }
.sc-nat { color: var(--ink); }
.sc-sec { padding-top: 4px; color: var(--teal-ink); font-size: 13.5px; font-weight: 700; }
span.sc-m { display: inline-block; padding-inline: 4px; border-radius: 5px; color: var(--ink); font-weight: 700; white-space: nowrap; }

/* הדואר הנכנס */
.sc-mail { position: relative; display: grid; gap: 6px; }
.sc-gh { padding-top: 2px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; opacity: var(--o, 1); }
.sc-gh--hot { color: var(--ink); }
.sc-mrow { transform: translateY(calc(var(--y, 0) * 1px)); }
.sc-mi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 5px 10px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); line-height: 1.45; }
.sc-mi-from { overflow: hidden; color: var(--ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sc-mi-end { display: flex; align-items: center; gap: 6px; }
.sc-mi-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sc-mi-sub { grid-column: 1 / -1; overflow: hidden; color: var(--ink-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sc-tag { display: inline-block; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--mint); color: var(--ink-2); font-size: 13px; font-weight: 500; line-height: 19px; transform-origin: left center; }
.sc-tag--hot { border-color: var(--coral); background: var(--coral-tint); color: var(--ink); font-weight: 700; }
.sc-tag--day { border-color: var(--teal-soft); background: var(--teal-tint); color: var(--teal-ink); font-weight: 700; }
.sc-reply { margin-block: 2px 6px; margin-inline-start: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
/* מבמה בינונית: שורה אחת לכל מייל */
@container (min-width: 520px) {
  .sc-mi { grid-template-columns: auto minmax(0, 1fr) auto; padding-block: 5px; }
  .sc-mi-sub { grid-column: 2; grid-row: 1; }
  .sc-mi-end { grid-column: 3; grid-row: 1; }
}

/* תמצית: נקודות ממוספרות, עם מספר העמוד בהסכם */
.sc-kp { display: grid; gap: 6px; counter-reset: kp; }
.sc-kp li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 10px; padding-inline-start: 28px; counter-increment: kp; }
.sc-kp li::before { content: counter(kp); position: absolute; inset-inline-start: 0; top: 2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); font-size: 13px; font-weight: 700; line-height: 1; }
.sc-pg { display: inline-block; margin-top: 1px; padding: 0 7px; border-radius: 6px; background: var(--mint); color: var(--teal-ink); font-size: 13px; font-weight: 700; line-height: 20px; white-space: nowrap; transform-origin: left center; }
.sc-flag { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 10px; margin-top: 12px !important; padding: 9px 12px; border-inline-start: 3px solid var(--coral); border-radius: var(--r-sm); background: var(--coral-tint); color: var(--ink); }
.sc-flag .sc-pg { background: var(--white); }