/* ============================================================================
   studio.css — מראה הסטודיו של נסיה (plan/25 שלב 2). נטען רק בסביבת הסטודיו.
   כל הסטודיו חי ב-#kesem-studio — אפס דליפה לעיצוב המסע עצמו.
   שפת עולם-האור: שמנת, ורוד-פסטל, זהב. לעולם לא סגול (כלל מותג קדוש).
   ============================================================================ */
#kesem-studio { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  direction: rtl; font-family: 'Segoe UI', system-ui, sans-serif;
  --kst-cream: #FFFBF4; --kst-ink: #5C4657; --kst-gold: #A16207;
  --kst-line: #E7D9BC; --kst-pink: #E487AE; --kst-pink-soft: #F7E9F3; }

/* ── הסרגל העליון ── */
#kesem-studio .kst-bar { pointer-events: auto; position: absolute; top: 0; inset-inline: 0;
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  background: rgba(255, 251, 244, .96); border-bottom: 1px solid var(--kst-line);
  box-shadow: 0 6px 18px rgba(150, 106, 143, .18); flex-wrap: wrap; }
#kesem-studio .kst-btn { border: 1px solid var(--kst-line); background: #fff;
  color: var(--kst-ink); border-radius: 999px; padding: 6px 12px; font-size: 13px;
  cursor: pointer; white-space: nowrap; }
#kesem-studio .kst-nav { padding: 6px 9px; }
#kesem-studio .kst-pick { border: 1px solid var(--kst-line); background: #fff;
  color: var(--kst-ink); border-radius: 999px; padding: 6px 10px; font-size: 13px;
  max-width: 42vw; }
#kesem-studio .kst-status { font-size: 12px; color: #8a6f84; margin-inline-start: auto; }
#kesem-studio .kst-status.ok { color: #1F7A43; }
#kesem-studio .kst-status.err { color: #B3324B; }
#kesem-studio .kst-pub { background: var(--kst-pink); border-color: var(--kst-pink);
  color: #fff; font-weight: 600; }
#kesem-studio .kst-pub.dirty { box-shadow: 0 0 0 3px rgba(228, 135, 174, .28); }
#kesem-studio .kst-exit { color: #8a6f84; }

/* ── בורר המשתמש (מהודר) ── */
#kesem-studio .kst-who { appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--kst-pink); border-radius: 999px;
  background: var(--kst-pink-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E487AE'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E")
    no-repeat; background-position: right 9px center; background-size: 15px;
  color: var(--kst-ink); font-size: 13px; font-weight: 600;
  padding: 6px 30px 6px 14px; cursor: pointer; line-height: 1.2; }
#kesem-studio .kst-who:focus { outline: 2px solid var(--kst-pink); outline-offset: 1px; }

/* ── מודאל: סקירת שינויים + היסטוריה (משותף) ── */
#kesem-studio .kst-review, #kesem-studio .kst-hist { pointer-events: auto; position: absolute;
  inset: 46px 0 0; background: rgba(255, 251, 244, .99); overflow-y: auto;
  padding: 16px 16px 44px; display: flex; flex-direction: column; }
#kesem-studio .kst-review[hidden], #kesem-studio .kst-hist[hidden] { display: none !important; }
#kesem-studio .kst-rv-head, #kesem-studio .kst-hist-head { display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
#kesem-studio .kst-rv-head b, #kesem-studio .kst-hist-head b { font-size: 17px; }
#kesem-studio .kst-rv-sub { font-size: 12px; color: #8a6f84; flex: 1 1 100%; }
#kesem-studio .kst-rv-x { margin-inline-start: auto; }
#kesem-studio .kst-rv-list { display: grid; gap: 10px; }
#kesem-studio .kst-rv-empty { text-align: center; color: #8a6f84; padding: 30px; font-size: 14px; }
#kesem-studio .kst-rv-item { background: var(--kst-cream); border: 1px solid var(--kst-line);
  border-radius: 14px; padding: 11px 13px; box-shadow: 0 4px 12px rgba(150, 106, 143, .08); }
#kesem-studio .kst-rv-label { font-size: 13px; font-weight: 700; color: var(--kst-gold);
  margin-bottom: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#kesem-studio .kst-rv-by { font-size: 11px; font-weight: 600; color: #fff;
  background: var(--kst-pink); border-radius: 999px; padding: 1px 9px; }
#kesem-studio .kst-rv-before, #kesem-studio .kst-rv-after { font-size: 13px; line-height: 1.55;
  padding: 6px 9px; border-radius: 9px; }
#kesem-studio .kst-rv-before { background: #FBF0F0; color: #9a6b6b; text-decoration: line-through;
  text-decoration-color: rgba(180, 100, 100, .4); margin-bottom: 5px; }
#kesem-studio .kst-rv-after { background: #EFF7EE; color: #2c5c34; }
#kesem-studio .kst-rv-tag { display: inline-block; font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 1px 8px; background: #E3C9C9; color: #7a4a4a; margin-inline-end: 4px; }
#kesem-studio .kst-rv-tag.ok { background: #BFE3C4; color: #235c2b; }
#kesem-studio .kst-rv-actions { display: flex; gap: 8px; margin-top: 16px; position: sticky; bottom: 0;
  background: linear-gradient(transparent, rgba(255,251,244,.99) 30%); padding-top: 14px; }
#kesem-studio .kst-rv-cancel { flex: 1; }
#kesem-studio .kst-rv-go { flex: 2; background: var(--kst-pink); border-color: var(--kst-pink);
  color: #fff; font-weight: 700; font-size: 15px; padding: 11px; }

/* היסטוריה */
#kesem-studio .kst-hist-list { display: grid; gap: 10px; }
#kesem-studio .kst-hist-item { background: var(--kst-cream); border: 1px solid var(--kst-line);
  border-radius: 14px; padding: 11px 13px; display: grid; gap: 4px; }
#kesem-studio .kst-hist-when { font-size: 14px; color: var(--kst-ink); }
#kesem-studio .kst-hist-when b { color: var(--kst-gold); }
#kesem-studio .kst-hist-meta { font-size: 12px; color: #8a6f84; }
#kesem-studio .kst-hist-restore { justify-self: start; margin-top: 4px; color: var(--kst-gold); }

/* ── מגירת השדות ── */
/* ⚠️ הדפוס שחזר 4 פעמים בפרויקט: display מפורש גובר על hidden.
   בלי השורה הזו המגירה נפתחת לבד בכל טעינה. display beats hidden. */
#kesem-studio .kst-drawer[hidden] { display: none !important; }
#kesem-studio .kst-drawer { pointer-events: auto; position: absolute; bottom: 0;
  inset-inline: 0; max-height: 58vh; display: flex; flex-direction: column;
  background: var(--kst-cream); border-top: 1.5px solid var(--kst-line);
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 34px rgba(150, 106, 143, .25);
  padding: 12px 14px 16px; }
#kesem-studio .kst-dhead { display: flex; align-items: center; gap: 8px; }
#kesem-studio .kst-dtitle { font-size: 15px; color: var(--kst-ink); margin-inline-end: auto; }
#kesem-studio .kst-hint { font-size: 11.5px; color: #8a6f84; margin: 6px 0 10px; }
#kesem-studio .kst-fields { overflow-y: auto; display: grid; gap: 12px; padding-bottom: 8px; }
#kesem-studio .kst-field { display: grid; gap: 5px; }
#kesem-studio .kst-field > span { font-size: 12.5px; color: var(--kst-gold); font-weight: 600; }
#kesem-studio .kst-field textarea { border: 1px solid var(--kst-line); border-radius: 10px;
  background: #fff; color: var(--kst-ink); font: inherit; font-size: 14px;
  padding: 8px 10px; resize: vertical; line-height: 1.6; }
#kesem-studio .kst-field textarea:focus { outline: 2px solid var(--kst-pink); border-color: transparent; }
#kesem-studio .kst-imgnote { font-size: 11.5px; color: #8a6f84; }
#kesem-studio .kst-empty { font-size: 13px; color: #8a6f84; text-align: center; padding: 14px; }

/* ── טוסט ── */
#kesem-studio .kst-toast { pointer-events: none; position: absolute; bottom: 20px;
  inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 86vw;
  background: var(--kst-ink); color: #fff; border-radius: 999px;
  padding: 9px 18px; font-size: 13px; opacity: .95; }

/* ═══ תיקון הערת יוסף (03.08): שם הצ'אט לא זז כשהסטטוס מתחלף ═══
   שורת הסטטוס קרסה לגובה 0 בטקסט "מקלידה…" (מול 14px ב"מחוברת"), ובגלל
   align-items:center בכותרת — מרכז בלוק-ה-who זז והשם קפץ ~8px. מקבעים
   גובה קבוע לשורת הסטטוס כך שאין reflow. חל על שתי גרסאות הצ'אט (h11/h4).
   (כאן ולא ב-holo11.css כדי לא לגעת בקבצי הצ'אט המקביל.) */
.h11-status, .h4-status {
  height: 1.35em !important; line-height: 1.35 !important;
  display: block !important; overflow: hidden !important;
}

/* ── מצב הצבעה (💬) ── */
body.kst-picking * { cursor: crosshair !important; }
#kesem-studio .kst-pickhint { pointer-events: auto; position: absolute; top: 52px;
  inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 92vw;
  background: var(--kst-pink); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 13px; box-shadow: 0 6px 18px rgba(228, 135, 174, .4); }
#kesem-studio .kst-pickhint .kst-btn { padding: 3px 10px; font-size: 12px; margin-inline-start: 6px; }
/* מסגרת ורודה סביב מה שמרחפים עליו בזמן הצבעה */
body.kst-picking *:hover:not(#kesem-studio):not(#kesem-studio *) {
  outline: 2px dashed var(--kst-pink) !important; outline-offset: 2px; }

/* ── מחבר ההערה ── */
#kesem-studio .kst-note-pop { pointer-events: auto; position: absolute;
  bottom: 16px; inset-inline: 0; margin-inline: auto; width: min(440px, 92vw);
  background: var(--kst-cream); border: 1.5px solid var(--kst-line);
  border-radius: 16px; box-shadow: 0 -10px 30px rgba(150, 106, 143, .28);
  padding: 14px 16px; display: grid; gap: 9px; }
#kesem-studio .kst-note-pop[hidden] { display: none !important; }
#kesem-studio .kst-np-head { display: flex; align-items: center; }
#kesem-studio .kst-np-head b { margin-inline-end: auto; font-size: 14px; }
#kesem-studio .kst-np-el { font-size: 12.5px; color: #8a6f84; background: #FFF6E9;
  border-radius: 9px; padding: 7px 10px; }
#kesem-studio .kst-np-txt { border: 1px solid var(--kst-line); border-radius: 10px;
  background: #fff; color: var(--kst-ink); font: inherit; font-size: 14px; padding: 8px 10px;
  resize: vertical; line-height: 1.6; }
#kesem-studio .kst-np-txt:focus { outline: 2px solid var(--kst-pink); border-color: transparent; }
#kesem-studio .kst-np-send { background: var(--kst-pink); border-color: var(--kst-pink);
  color: #fff; font-weight: 600; }

/* ── גלריית המסכים ── */
#kesem-studio .kst-gal { pointer-events: auto; position: absolute; inset: 46px 0 0;
  background: rgba(255, 251, 244, .98); overflow-y: auto; padding: 12px 14px 40px; }
#kesem-studio .kst-gal[hidden] { display: none !important; }
#kesem-studio .kst-gal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; }
#kesem-studio .kst-gal-head b { font-size: 16px; }
#kesem-studio .kst-gal-sub { font-size: 12px; color: #8a6f84; margin-inline-end: auto; }
#kesem-studio .kst-gal-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#kesem-studio .kst-cell { display: grid; gap: 6px; }
#kesem-studio .kst-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--kst-line); background: #F3E3F1;
  box-shadow: 0 6px 16px rgba(150, 106, 143, .14); }
/* ה-iframe מרונדר בגודל מלא ומוקטן בטרנספורם — כך התוכן נראה נכון.
   מוסתר עד שהמסך התיישב (.ready) — אחרת נסיה רואה קלף ריק בזמן טעינה. */
#kesem-studio .kst-thumb iframe { position: absolute; top: 0; inset-inline-start: 0;
  width: 375px; height: 667px; border: 0; transform: scale(.4);
  transform-origin: top right; pointer-events: none;
  opacity: 0; transition: opacity .5s ease; }
#kesem-studio .kst-cell.ready .kst-thumb iframe { opacity: 1; }
/* מסך-טעינה מותג — נצנוץ רך על רקע העולם, נעלם כשהתצוגה מוכנה */
/* pointer-events:none — אחרת מסך-הטעינה חוסם את כפתור "לפתוח לעריכה"
   שמתחתיו, ומסך שעוד נטען לא ניתן לפתיחה (הבאג של "המכתב"). */
#kesem-studio .kst-load { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #F7E9F3, #F3E3F1);
  transition: opacity .5s ease; }
#kesem-studio .kst-cell.ready .kst-load { opacity: 0; pointer-events: none; }
#kesem-studio .kst-load-spark { font-size: 26px; color: var(--kst-pink);
  animation: kstPulse 1.3s ease-in-out infinite; }
@keyframes kstPulse { 0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); } }
#kesem-studio .kst-cell-go { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3;  /* מעל מסך-הטעינה — תמיד לחיץ */
  border: 0; background: transparent; color: transparent; cursor: pointer; font-size: 0; }
#kesem-studio .kst-thumb:hover .kst-cell-go { background: rgba(228, 135, 174, .22);
  color: #fff; font-size: 13px; font-weight: 600; }
#kesem-studio .kst-cell-name { font-size: 13px; color: var(--kst-ink); text-align: center; }
#kesem-studio .kst-dot { color: var(--kst-pink); font-size: 11px; }

/* ── מצב מתקדם (🎨) ── */
#kesem-studio .kst-adv-toggle.on { background: var(--kst-pink); border-color: var(--kst-pink); color: #fff; }
body.kst-adv #stage * { cursor: pointer; }
body.kst-adv .kst-selected { outline: 2px solid var(--kst-pink) !important; outline-offset: 2px;
  cursor: move !important; }
#kesem-studio .kst-advhint { pointer-events: auto; position: absolute; top: 52px;
  inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 92vw;
  background: var(--kst-gold); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13px;
  box-shadow: 0 6px 18px rgba(161, 98, 7, .35); }
#kesem-studio .kst-advhint .kst-btn { padding: 3px 10px; font-size: 12px; margin-inline-start: 6px; }
#kesem-studio .kst-adv-pop { pointer-events: auto; position: absolute; bottom: 16px;
  inset-inline: 0; margin-inline: auto; width: min(440px, 92vw);
  background: var(--kst-cream); border: 1.5px solid var(--kst-line); border-radius: 16px;
  box-shadow: 0 -10px 30px rgba(150, 106, 143, .28); padding: 14px 16px; display: grid; gap: 10px; }
#kesem-studio .kst-adv-pop[hidden] { display: none !important; }
#kesem-studio .kst-ap-head { display: flex; align-items: center; }
#kesem-studio .kst-ap-head b { margin-inline-end: auto; font-size: 14px; }
#kesem-studio .kst-ap-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
#kesem-studio .kst-ap-row > span:first-child { width: 62px; color: var(--kst-gold); font-weight: 600; }
#kesem-studio .kst-ap-hint2 { color: #8a6f84; font-size: 12px; }
#kesem-studio .kst-sw { display: flex; gap: 6px; flex-wrap: wrap; }
#kesem-studio .kst-chip { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--kst-line);
  cursor: pointer; padding: 0; }
#kesem-studio .kst-ap-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
#kesem-studio .kst-ap-done { background: var(--kst-pink); border-color: var(--kst-pink); color: #fff; font-weight: 600; }
#kesem-studio .kst-ap-suggest { color: var(--kst-gold); }

/* בטלפון: הסרגל דחוס יותר, המגירה גבוהה יותר */
@media (max-width: 480px) {
  #kesem-studio .kst-bar { gap: 4px; padding: 6px 6px; }
  #kesem-studio .kst-btn { font-size: 12px; padding: 5px 9px; }
  #kesem-studio .kst-drawer { max-height: 66vh; }
}