/* ==========================================================================
   Aura Studio — Workspace (Studio page)
   Dark-mode, RTL. Icon rail + tools/AI-chat on the RIGHT, results canvas LEFT.
   Reuses tokens from styles.css (:root vars, .btn, .nav__mark).
   ========================================================================== */

.studio-body {
  margin: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  /* EXACT same backdrop as the "הוספת שמע" (Audio Addition) screen (.as-overlay):
     soft dual gold radial glows over a deep charcoal base. Forced with
     !important to fully override the shared purple `body` background in
     styles.css (rgba(168,85,247)/#0a0615), so both screens match precisely. */
  background:
    radial-gradient(circle at 20% 15%, rgba(197, 160, 89, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(231, 200, 120, 0.12) 0%, transparent 55%),
    #121214 !important;
  background-attachment: fixed !important;
  color: #f5f5fa;
  position: relative;

  /* Scoped brand/theme overrides — turn the shared purple accent (--brand-2)
     into the royal gold brand color, and soften every border/divider line to
     an ultra-subtle high-transparency white. Style only; no logic touched. */
  --brand-2: #C5A059;
  --line: rgba(255, 255, 255, 0.05);
}

/* --- Custom inline SVG background layer -----------------------------------
   A fixed, full-viewport, pointer-transparent wrapper holding the hand-written
   inline SVG vector (neon glowing curved lines, semi-circle arcs + center grid
   topology) in muted brand gold. Pinned to the lowest z-index so it floats
   behind every card, panel and the right rail, and never blocks a click. */
.studio-bg-svg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.studio-bg-svg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Neon glow is applied inline on the <svg> (gold + subtle blue drop-shadow). */
}
/* Keep the real app shell above the decorative SVG layer. */
.studio-top, .studio-shell { position: relative; z-index: 1; }

.btn--sm { padding: 8px 16px; font-size: 13px; }

/* --- Top bar -------------------------------------------------------------- */
.studio-top {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  /* Neutral charcoal (no blue/purple tint), matching the workspace bg. */
  background: rgba(18, 18, 20, 0.6);
  backdrop-filter: blur(12px);
}
.studio-top__start { display: flex; align-items: center; gap: 18px; }
.studio-brand { display: inline-flex; align-items: center; gap: 10px; }
.studio-brand__logo { font-size: 17px; font-weight: 800; letter-spacing: 2px; }
.studio-workspace {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
}
.studio-top__end { display: flex; align-items: center; gap: 12px; }
.studio-credits {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--brand);
  padding: 6px 12px; border: 1px solid rgba(201, 168, 106, 0.35); border-radius: 999px;
}
.studio-user {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: rgba(245, 245, 247, 0.85);
  padding: 6px 10px;
}
.studio-user[hidden] { display: none; }

/* --- App shell ------------------------------------------------------------ */
.studio-shell {
  height: calc(100vh - 60px);
  display: grid;
  /* RTL: first track is visually on the RIGHT -> slim rail; canvas on LEFT */
  grid-template-columns: 210px 1fr;
}


/* --- Right sidebar (rail + panel) ---------------------------------------- */
.studio-side {
  display: grid;
  grid-template-columns: 210px 1fr;
  border-inline-start: 1px solid var(--line);
  min-height: 0;
  /* Neutral charcoal (no blue/purple tint), matching the workspace bg. */
  background: rgba(18, 18, 20, 0.55);
}

/* Wider sidebar rail with icon + visible label (RTL) */
.rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 12px;
  border-inline-start: 1px solid var(--line);
  /* Neutral charcoal (R=G=B, no blue/purple tint) to match the workspace bg. */
  background: rgba(18, 18, 20, 0.6);
}
.rail__logo {
  width: 100%; height: 44px; margin-bottom: 8px;
  border: none; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px; background: transparent;
}
.rail__logo .nav__mark { width: 30px; height: 30px; font-size: 16px; flex: none; }
.rail__logo-text { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.rail__group { display: flex; flex-direction: column; gap: 6px; }
.rail__btn {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent; border-radius: 14px;
  /* Inactive steps: clean, muted dark grey */
  background: transparent; color: rgba(245, 245, 250, 0.4);
  text-align: start;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rail__btn svg { width: 22px; height: 22px; flex: none; }
.rail__btn:hover { color: rgba(245, 245, 250, 0.72); background: rgba(255, 255, 255, 0.05); }
.rail__btn.is-active {
  /* Active step: royal gold brand color */
  color: #C5A059;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.16), rgba(197, 160, 89, 0.06));
  border-color: rgba(197, 160, 89, 0.4);
}
/* Always-visible label next to the icon */
.rail__tip {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
}

/* --- Tools + chat panel --------------------------------------------------- */
.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden; /* children manage their own scroll; nothing spills out */
}
.panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.panel__back {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.panel__back:hover { color: var(--ink); border-color: var(--brand-2); }
.panel__title { margin: 0; font-size: 16px; font-weight: 700; }
.panel__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }

/* Prominent Generate action pinned at the bottom of the control panel */
.panel__foot {
  flex-shrink: 0;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: rgba(10, 10, 16, 0.5);
}
.generate-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px; border: none; border-radius: 14px;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  color: #1a1408;
  background: linear-gradient(135deg, var(--brand) 0%, #e8d3a3 100%);
  box-shadow: 0 8px 26px rgba(201, 168, 106, 0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.generate-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(201, 168, 106, 0.45); }
.generate-btn:active { transform: translateY(0); }
.generate-btn.is-busy { filter: saturate(0.7); pointer-events: none; opacity: 0.85; }

/* NOTE: the old category Accordion (.acc*) and Chip (.chip*) components were
   removed during the unified-dropdown refactor — all selections now use the
   shared native <select> (.select) pattern below, so those styles are gone. */

/* Model library — visual preset model cards */
.model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.model-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font-family: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.model-card:hover { border-color: var(--brand-2); background: rgba(197, 160, 89, 0.12); transform: translateY(-1px); }
.model-card__thumb {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; line-height: 1;
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(150, 165, 245, 0.3);
}
.model-card__name { font-size: 12.5px; font-weight: 600; text-align: center; }
.model-card.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.9), rgba(176, 141, 69, 0.9));
  box-shadow: 0 6px 18px rgba(197, 160, 89, 0.35);
}
.model-card.is-active .model-card__thumb { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }
.model-card.is-active .model-card__name { color: #fff; }


/* --- Smart AI chat widget ------------------------------------------------- */
.chat {
  border-top: 1px solid var(--line);
  background: rgba(10, 10, 16, 0.7);
  flex-shrink: 0;
}
.chat__toggle {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600;
}
.chat__bot {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 9px;
  color: #eef0ff; background: linear-gradient(135deg, #C5A059, #B08D45);
}
.chat__bot svg { width: 22px; height: 22px; }
.chat__label { flex: 1; text-align: start; }
.chat__chev { color: var(--muted); transition: transform 0.25s ease; }
.chat.is-collapsed .chat__chev { transform: rotate(180deg); }

.chat__body {
  display: flex; flex-direction: column;
  padding: 0 14px 14px;
  max-height: 340px;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  overflow: hidden;
}
.chat.is-collapsed .chat__body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

.chat__log { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 200px; padding: 6px 2px; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.msg--bot {
  align-self: flex-start;
  background: rgba(197, 160, 89, 0.16);
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-bottom-right-radius: 5px;
}
.msg--user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.msg--typing { display: inline-flex; gap: 4px; }
.msg--typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2);
  animation: chatDot 1.2s infinite ease-in-out;
}
.msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat__quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chat__input { display: flex; gap: 8px; align-items: center; }
.chat__input input {
  flex: 1; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
  color: var(--ink); font-family: inherit; font-size: 13.5px;
}
.chat__input input:focus { outline: none; border-color: var(--brand-2); }
.chat__send {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center; border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-2), #B08D45); color: #fff; cursor: pointer;
  transition: transform 0.12s;
}
.chat__send:hover { transform: translateY(-1px); }


/* --- Left workspace / results canvas ------------------------------------- */
.canvas { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.canvas__bar {
  position: relative;
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
}
/* --- Filter capsule (הכל / תמונות / וידאו) --------------------------------
   A slim, floating, semi-transparent frosted-glass pill that groups the three
   filter buttons — sits softly above the dark background like in the reference.
   Style only; the JS click handlers (.canvas__filter) are untouched. */
.canvas__tools {
  /* Centered in the top bar, floating like in the reference. */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.canvas__filter {
  padding: 7px 18px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--muted); font-family: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* Inactive buttons brighten to a subtle gold on hover. */
.canvas__filter:hover { color: #E7C878; }
/* Active button: brand gold text on a soft glowing gold tint. */
.canvas__filter.is-active {
  color: #C5A059;
  background: rgba(197, 160, 89, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(197, 160, 89, 0.35),
    0 0 14px rgba(197, 160, 89, 0.18);
}
.canvas__icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.canvas__icon:hover { color: var(--ink); }

.canvas__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 40px; position: relative; }
.canvas__section { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--muted); }
.results {
  display: grid;
  /* Compact gallery: small fixed-width cards that auto-fill the row, so as many
     items as fit sit neatly side by side (more per row on wider screens). The
     aspect-ratio on .result keeps every item in its correct 3:4 proportion. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
/* Filtered-out cards (via the top filter bar) are hidden with [hidden]. Force
   display:none so no other rule can accidentally keep them visible. */
.result[hidden] { display: none !important; }
.result {
  aspect-ratio: 3 / 4; overflow: hidden;
  /* Frosted glass card (forced): near-transparent fill + heavy background blur
     so the cinematic wireframe layer softly shows through, elegant large-radius
     rounded corners, and an ultra-thin almost-invisible white hairline border.
     !important is used to override any older, more opaque/darker card rules. */
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.5rem !important;
  position: relative;
  animation: resultIn 0.35s ease both;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
/* Golden glow on hover: gentle grow, brand-gold border, soft radiant halo. */
.result.is-done:hover {
  transform: scale(1.02) !important;
  border-color: #C5A059 !important;
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.3) !important;
}

/* --- Video clip indicator -------------------------------------------------
   Any result card that is a motion clip (contains a <video>) gets a small,
   thin, semi-transparent gold PLAY triangle centred over the media, so users
   can tell video reels apart from still images at a glance. Pure CSS, driven
   by :has(video) — no markup or JS changes. Decorative + click-through. */
.result:has(video)::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  z-index: 2;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1.5px solid rgba(197, 160, 89, 0.7);
  background:
    rgba(11, 11, 13, 0.35)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5l8 4.5-8 4.5z' fill='%23C5A059' fill-opacity='0.55' stroke='%23E7C878' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 32px 32px no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 22px rgba(197, 160, 89, 0.25);
  opacity: 0.92;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.result:has(video):hover::after {
  opacity: 1;
  transform: translate(50%, -50%) scale(1.06);
}
@keyframes resultIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.result img, .result video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Loading / generating state (realistic progress) */
.result.is-generating {
  display: grid; place-items: center; gap: 12px;
  background:
    linear-gradient(135deg, rgba(197, 160, 89, 0.12), transparent 60%),
    var(--bg-soft);
}
.result__spinner {
  position: relative; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(197, 160, 89, 0.25);
  border-top-color: var(--brand-2);
  animation: resultSpin 0.8s linear infinite;
}
@keyframes resultSpin { to { transform: rotate(360deg); } }
.result__status {
  position: relative; z-index: 2;
  font-size: 13px; font-weight: 600; color: var(--brand-2);
  letter-spacing: 1px;
}
/* Clean, minimal error state (no garment cloning) */
.result.is-error {
  display: grid; place-items: center; padding: 16px;
  background: rgba(217, 83, 79, 0.08); border-color: rgba(217, 83, 79, 0.35);
}
.result.is-error .result__status { color: #e88; text-align: center; }
.result.is-loading::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(110deg, transparent 35%, rgba(197,160,89,0.18) 50%, transparent 65%);
  transform: translateX(-100%); animation: heroSweep 1.3s ease-in-out infinite;
}

/* Finished result card: badge + caption overlay */
.result.is-done { cursor: pointer; }
.result__badge {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; color: var(--brand);
  background: rgba(11, 11, 13, 0.6); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(6px);
}
.result__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 26px 12px 12px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(11,11,13,0.85), transparent);
}
.result.is-done:hover img { transform: scale(1.04); }
.result.is-done img { transition: transform 0.4s ease; }

/* Quick actions bar — hidden until hover, minimal corner icons (RTL-safe) */
.result__actions {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 3;
  display: flex; gap: 6px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.result.is-done:hover .result__actions,
.result.is-done:focus-within .result__actions {
  opacity: 1; transform: none; pointer-events: auto;
}
.result__action {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: rgba(11, 11, 13, 0.62); color: #fff;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.result__action svg { width: 16px; height: 16px; display: block; }
.result__action:hover { background: rgba(197, 160, 89, 0.85); border-color: transparent; transform: translateY(-1px); }
.result__action--danger:hover { background: #d9534f; }

/* Removal animation */
.result.is-removing { animation: resultOut 0.22s ease both; pointer-events: none; }
@keyframes resultOut { to { opacity: 0; transform: translateY(6px) scale(0.96); } }

/* Empty state */
.canvas__empty {
  max-width: 360px; margin: 60px auto; text-align: center;
  color: var(--muted); display: none;
}
.canvas.is-blank .results { display: none; }
.canvas.is-blank .canvas__empty { display: block; }
.canvas__empty-ico { font-size: 34px; color: var(--brand-2); margin-bottom: 10px; }
.canvas__empty-t { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.canvas__empty-s { margin: 0; font-size: 14px; line-height: 1.6; }

/* --- Central modal (OpenArt-style) --------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  /* Gold radial-gradient backdrop — matches the "הוספת שמע" (Audio Addition)
     overlay look for one consistent, elegant atmosphere across the tools. */
  background:
    radial-gradient(circle at 20% 15%, rgba(197, 160, 89, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(231, 200, 120, 0.12) 0%, transparent 55%),
    rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(6px);
}
.modal-overlay.is-open { display: flex; animation: modalFade 0.18s ease both; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 560px; max-width: 100%; max-height: 86vh;
  display: flex; flex-direction: column;
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease,
    max-height 0.25s ease, border-radius 0.25s ease;
  /* Dark Luxury glass panel — SAME frosted charcoal glass as the Create Video
     and Audio Addition panels (rgba(18,18,20,0.7) + blur), for one consistent,
     elegant look across all three tools. */
  background: rgba(18, 18, 20, 0.7);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: #f5f5fa;
  border: 1px solid rgba(197, 160, 89, 0.25); border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.8), 0 0 60px rgba(197, 160, 89, 0.08);
  overflow: hidden;
  animation: modalPop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes modalPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.modal__title-wrap { display: flex; align-items: center; gap: 10px; }
.modal__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--brand); }
.modal__step-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.03); white-space: nowrap;
}
.modal__head-actions { display: flex; align-items: center; gap: 8px; }
.modal__icon-btn {
  width: 34px; height: 34px; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted);
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.modal__icon-btn:hover { color: var(--ink); border-color: var(--brand-2); }
.modal__icon { display: block; }
.modal__icon--collapse { display: none; }
/* When maximized, swap the expand icon for the collapse icon */
.modal.is-maximized .modal__icon--expand { display: none; }
.modal.is-maximized .modal__icon--collapse { display: block; }
.modal__close {
  width: 34px; height: 34px; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted);
  font-size: 22px; cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.modal__close:hover { color: var(--ink); border-color: var(--brand-2); }

/* Body scrolls as ONE clean surface. Each step pane is a self-contained page;
   only one is visible at a time, so there is never a nested scroll conflict. */
.modal__body { padding: 22px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.modal__pane { display: flex; flex-direction: column; gap: 18px; }
.modal__hint { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Wider modal when the split try-on pane is visible */
.modal:has(.modal__pane--split:not([hidden])) { width: 960px; }

/* Fullscreen / maximized modal — true edge-to-edge full screen */
.modal-overlay:has(.modal.is-maximized) { padding: 0; }
.modal.is-maximized {
  position: fixed;
  inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh;
  max-height: 100vh;
  border: 0;
  border-radius: 0;
}
.modal.is-maximized .modal__body { flex: 1; }

/* Two-column try-on layout (RTL: settings on the RIGHT, preview on the LEFT) */
.modal__pane--split {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
  gap: 28px;
  align-items: start;
}
.tryon__settings { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.tryon__preview {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 0;
}
.tryon__preview-label { font-size: 13px; font-weight: 600; color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 10px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
/* Informational-only helper note next to a field label (plain text, softer) */
.field__label-note { font-size: 12px; font-weight: 400; color: var(--muted); }
/* Required-field marker (asterisk) for the mandatory "בחר השלמה" selection */
.field__label-req { color: #e57373; font-weight: 700; }

/* Per-action credit cost shown under the "סוג לבוש" selector (gold coin + number) */
.credit-cost { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 2px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #C5A059;
  background: rgba(197,160,89,0.08); border: 1px solid rgba(197,160,89,0.3); }
.credit-cost svg { width: 15px; height: 15px; flex: none; display: block; }
.credit-cost__num { color: #E7C878; }

/* Live total-cost + balance summary under the "צור עיבוד" button */
.credit-summary { margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(197,160,89,0.25); background: rgba(197,160,89,0.06); }
.credit-summary__row { display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 700; color: var(--ink); }
.credit-summary__row--sub { margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(197,160,89,0.15); font-weight: 600; color: var(--muted); font-size: 12.5px; }
.credit-summary__val { display: inline-flex; align-items: center; gap: 6px; color: #E7C878; }
.credit-summary__val svg { width: 16px; height: 16px; flex: none; display: block; color: #C5A059; }
/* Not enough balance -> highlight the total in a warning red */
.credit-summary.is-insufficient .credit-summary__val { color: #e57373; }
.credit-summary.is-insufficient .credit-summary__val svg { color: #e57373; }

.modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--line);
  background: rgba(10, 10, 16, 0.4);
}
/* Step counter sits centered between the footer buttons */
.modal__step-count {
  margin: 0 auto;
  font-size: 13px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.5px;
}

/* Nice gold border around EVERY button inside the garment modal — matches the
   "הוספת שמע" (Audio Addition) look. Scoped to .modal so global site buttons
   are untouched. Presentation only — no markup/logic change. */
.modal__foot .btn,
.modal .bulk-start {
  border: 1px solid rgba(197, 160, 89, 0.45);
}
.modal__foot .btn:hover,
.modal .bulk-start:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 26px rgba(197, 160, 89, 0.28);
}

/* --- Responsive ----------------------------------------------------------- */
/* The gallery uses auto-fill, so it adapts to every width automatically — no
   per-breakpoint column overrides needed. */
@media (max-width: 900px) {
  .studio-body { height: auto; overflow: auto; }
  .studio-shell { height: auto; grid-template-columns: 56px 1fr; }
  .canvas__scroll { overflow: visible; }
  .studio-workspace { display: none; }
  .modal:has(.modal__pane--split:not([hidden])) { width: 560px; }
  .modal__pane--split { grid-template-columns: 1fr; gap: 20px; }
  .tryon__preview { position: static; }
}
@media (max-width: 560px) {
  .studio-top { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }
  .studio-credits { display: none; }
}


/* ==========================================================================
   Bulk upload + live processing queue  (Upload Clothing screen)
   RTL: control panel on the RIGHT, large live queue on the LEFT / center.
   Layout-only — no API behaviour lives here.
   ========================================================================== */

/* Give the bulk pane a wide, spacious split: narrow control panel + big queue. */
.modal:has(.modal__pane--bulk:not([hidden])) { width: min(1180px, 96vw); }
.modal__pane--bulk {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 26px;
  min-height: 60vh;
  align-items: stretch;
}
.modal.is-maximized .modal__pane--bulk { min-height: calc(100vh - 170px); }

/* Control panel column */
.bulk-panel { gap: 20px; }

/* Native select styled to match the chips/inputs */
.select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  /* Gold border + subtle glass gradient — matches the "הוספת שמע" control
     buttons (.as-select__btn) so every control has a nice gold frame. */
  border: 1px solid rgba(197, 160, 89, 0.45);
  background: linear-gradient(145deg, rgba(30, 30, 32, 0.85), rgba(18, 18, 20, 0.9));
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.18s;
}
.select:hover { border-color: var(--brand); box-shadow: 0 8px 26px rgba(197, 160, 89, 0.28); }
.select:focus { outline: none; border-color: var(--brand); background: rgba(197, 160, 89, 0.1); }
/* Locked/disabled dropdown (e.g. the follow-up category lock) — greyed out. */
.select:disabled, .select.is-locked { opacity: 0.5; cursor: not-allowed; }
/* Ensure the native dropdown items are always visible: on this dark theme the
   default option colours can render light-on-light and appear blank, so pin an
   explicit solid dark background + readable text for each option. */
.select option {
  background: var(--panel);
  color: var(--ink);
}

/* Primary "start bulk processing" button */
.bulk-start { width: 100%; justify-content: center; }
/* Locked/disabled: greyed out + not-allowed. pointer-events:none lets a click
   fall through to the parent so JS can surface a "what's missing" message. */
.bulk-start:disabled,
.bulk-start.is-locked { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Brief attention pulse when a rejected (invalid) click is attempted. */
.bulk-start.is-invalid-flash { animation: bulkStartShake 0.5s ease; }
@keyframes bulkStartShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Compact collection drag & drop box */
.bulk-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  padding: 22px 14px;
  /* Gold dashed frame (was blue) — matches the "הוספת שמע" gold-border theme. */
  border: 1.5px dashed rgba(197, 160, 89, 0.5);
  border-radius: 12px;
  background: rgba(197, 160, 89, 0.05);
  color: var(--muted); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bulk-drop:hover { color: var(--ink); border-color: var(--brand); background: rgba(197, 160, 89, 0.1); }
.bulk-drop.is-drag { border-color: var(--brand); background: rgba(197, 160, 89, 0.16); color: var(--ink); }
.bulk-drop:focus-visible { outline: none; border-color: var(--brand); }
.bulk-drop__ico { font-size: 22px; color: var(--brand); }
.bulk-drop__t { font-size: 13px; font-weight: 500; color: var(--ink); }
.bulk-drop__s { font-size: 12px; color: var(--muted); }
.bulk-drop__count {
  margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--brand-2);
}

/* ---- Left/center area: split into two stacked zones --------------------- */
/* TOP = live processing queue, BOTTOM = pending upload preview, with a clean
   visible divider between them. */
.bulk-columns {
  display: grid;
  grid-template-rows: minmax(0, 1.7fr) auto minmax(0, 1fr);
  gap: 14px;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  overflow: hidden; /* nothing may spill outside the split area */
}
.bulk-columns__divider {
  height: 1px; width: 100%;
  align-self: center;
  background: linear-gradient(to left, transparent, var(--line) 15%, var(--line) 85%, transparent);
}

/* Each zone is a strictly self-contained flex column. overflow:hidden makes
   the zone a hard clipping boundary so item cards can never "escape" into the
   gap between the top and bottom containers. */
.bulk-stage {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  overflow: hidden;
}
.bulk-stage__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* Strict isolation for the TOP container ("תור עיבוד חי" / live queue): mirror
   the bounded, clipped surface used by the pending zone so cards, spinners and
   status text are visibly locked INSIDE this box and can never bleed into the
   divider gap while content updates or spinners animate. */
.bulk-stage--live {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
/* Strict isolation for the BOTTOM container ("ממתינים לעיבוד"): a hard clipping
   boundary + positioning context so no child card can render outside it. A
   visible bounded surface makes it obvious that uploaded cards live INSIDE this
   box, not floating in the gap between the two zones. */
.bulk-stage--pending {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.bulk-stage__counter {
  font-size: 13px; font-weight: 700; color: var(--brand-2);
  letter-spacing: 0.5px;
}
.bulk-queue {
  flex: 1 1 auto; min-height: 0; width: 100%;
  box-sizing: border-box;
  padding: 2px; /* keep card borders off the clip edge */
  overflow-y: auto; overflow-x: hidden;
  display: grid;
  /* Fixed max column width (NOT 1fr): prevents a single/few cards from
     stretching to full width, which — combined with .qcard's 3/4 aspect-ratio —
     would balloon the card height and overflow the "תור עיבוד חי" box. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
  justify-content: center;
  gap: 16px;
  align-content: start;
}
.bulk-queue:empty { display: none; }

/* Empty-state (shown until the first item is queued) */
.bulk-empty {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 40px 20px;
  border: 1px dashed var(--line); border-radius: 16px;
  color: var(--muted);
  overflow: hidden;
}
/* CRITICAL: the class selector above sets display:flex, which by specificity
   overrides the browser's default [hidden]{display:none}. Without this rule the
   empty-state box stays laid out (taking space / overlapping results) even after
   JS sets `.hidden = true`. Force it truly gone whenever hidden. */
.bulk-empty[hidden] { display: none !important; }
.bulk-empty__ico { font-size: 30px; color: var(--brand-2); opacity: 0.8; }
.bulk-empty__t { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.bulk-empty__s { margin: 0; font-size: 13px; line-height: 1.6; max-width: 340px; }
/* Compact empty-state for the smaller bottom (pending) zone */
.bulk-empty--sm { padding: 20px 16px; }

/* ---- Bottom zone: pending upload preview (waiting to process) ----------- */
/* Strictly scoped: fills the bottom container, scrolls internally, and clips
   its cards so they can never render outside this zone. */
.bulk-pending {
  flex: 1 1 auto;
  min-height: 0; max-height: 100%; width: 100%;
  box-sizing: border-box;
  padding: 2px; /* keeps card borders/focus rings off the clip edge */
  overflow-y: auto; overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  align-content: start;
}
.bulk-pending:empty { display: none; }

/* Small thumbnail chip for each pending (not-yet-processed) file.
   Fully box-sized, no margins, no absolute positioning on the card itself —
   it stays 100% inside the bottom container's grid flow. */
.pcard {
  /* MUST follow the standard document flow inside the bottom container.
     `relative` keeps the card in normal flow (unlike absolute/fixed) while
     still anchoring the ✕ remove button to the card corner. Absolute/fixed
     and float are hard-forbidden so the card can never escape the box. */
  position: relative !important;
  inset: auto !important;      /* neutralise any stray top/right/bottom/left */
  float: none !important;
  margin: 0 !important;        /* no rogue margins pushing it out of the box */
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  animation: resultIn 0.3s ease both;
}
.pcard__thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pcard__remove {
  position: absolute; top: 4px; inset-inline-start: 4px; z-index: 2;
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(11, 11, 13, 0.7); color: #fff;
  font-size: 13px; cursor: pointer; line-height: 1;
  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
.pcard:hover .pcard__remove,
.pcard:focus-within .pcard__remove { opacity: 1; }
.pcard__remove:hover { background: #d9534f; }

/* ---- Individual queue item cards ---------------------------------------- */
.qcard {
  position: relative;
  width: 100%; max-width: 100%; min-height: 0;
  box-sizing: border-box;
  aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 14px; text-align: center;
  animation: resultIn 0.35s ease both;
}
/* Faint thumbnail of the uploaded garment behind the status overlay */
.qcard__thumb {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.18; filter: blur(1px);
}
.qcard__index {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; color: var(--brand);
  background: rgba(11, 11, 13, 0.6); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(6px);
}
.qcard__spinner {
  position: relative; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(197, 160, 89, 0.25);
  border-top-color: var(--brand-2);
  animation: resultSpin 0.8s linear infinite;
}
.qcard__status {
  position: relative; z-index: 2;
  margin: 0; font-size: 13px; font-weight: 600; color: var(--brand-2);
  letter-spacing: 0.5px;
  max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
}
/* Spinner and check must never shrink/deform inside the flex column */
.qcard__spinner, .qcard__check { flex: 0 0 auto; }

/* Inline final result: the finished try-on image replaces the spinner and fills
   the exact card slot. Absolutely positioned to cover the card fully so the
   layout never jumps or spills when the spinner is swapped for the image. */
.qcard__result {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;
  animation: resultIn 0.35s ease both;
}
/* When a result is shown, hide the faint background thumb + dim the status so
   the final image reads clearly; the index badge stays visible on top. */
.qcard.is-result { cursor: pointer; }
.qcard.is-result .qcard__thumb { opacity: 0; }
.qcard.is-result .qcard__status {
  position: absolute; z-index: 2;
  inset-inline: 8px; bottom: 8px; margin: 0;
  padding: 4px 8px; border-radius: 8px;
  background: rgba(11, 11, 13, 0.62); backdrop-filter: blur(6px);
  color: #fff; font-size: 12px;
}
/* Queued (waiting) — dimmed, no spin */
.qcard.is-queued { opacity: 0.55; }
.qcard.is-queued .qcard__spinner { animation: none; border-top-color: var(--line); opacity: 0.5; }
.qcard.is-queued .qcard__status { color: var(--muted); }
/* Done — subtle success tint */
.qcard.is-done { border-color: rgba(197, 160, 89, 0.5); }
.qcard.is-done .qcard__thumb { opacity: 0.55; filter: none; }
.qcard.is-done .qcard__status { color: var(--brand); }
.qcard__check {
  position: relative; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(197, 160, 89, 0.16); color: var(--brand-2);
  font-size: 20px; font-weight: 700;
}
/* Failed — clear red tint so a failed item is visually distinct in the queue */
.qcard.is-error { border-color: rgba(217, 83, 79, 0.6); }
.qcard.is-error .qcard__spinner { animation: none; border-top-color: #d9534f; opacity: 0.5; }
.qcard.is-error .qcard__status { color: #e57373; }

/* ==========================================================================
   Live-queue stabilization ("תור עיבוד חי")
   PRESENTATION ONLY. Keeps processing/loading cards perfectly static, aligned
   and bounded inside the queue box so they never float, shift, or jump while
   the spinner animates or the status text updates. Scoped strictly to
   .bulk-queue cards — no other zone/card is affected.
   ========================================================================== */
/* Lock every card to a uniform, fixed row height so completing/updating one
   card can never resize or reflow its neighbours. */
.bulk-queue { grid-auto-rows: 1fr; }
/* Pin each queue card's internal layout: content anchored from the top with a
   reserved, non-shifting spinner+status stack. The card box itself stays put
   (no entry animation replay, no transform drift). */
.bulk-queue .qcard {
  animation: none;                 /* no entry-animation replay on state change */
  justify-content: flex-start;     /* anchor content to a fixed top origin */
  will-change: auto;               /* avoid compositor-induced sub-pixel drift */
  contain: layout paint;           /* isolate each card's layout from siblings */
}
/* Center the spinner/status stack within a fixed region so a changing status
   string (e.g. "מעבד 1/2") cannot re-center and nudge the spinner around. */
.bulk-queue .qcard .qcard__spinner { margin-top: auto; }
.bulk-queue .qcard .qcard__status {
  margin-top: 10px; margin-bottom: auto;
  min-height: 2.6em;               /* reserve room for 1–2 lines: no jump on wrap */
  display: flex; align-items: center; justify-content: center;
}
/* The inline result image is absolutely positioned and must fully cover the
   card regardless of the flex-start content anchor above. */
.bulk-queue .qcard.is-result .qcard__status {
  margin: 0; min-height: 0; display: block;
}

/* ==========================================================================
   Smart per-item category follow-up
   A contextual "add the complement" button rendered on EACH finished result
   card independently (upper <-> lower). Overlaid at the bottom of the card,
   above the result image, so it reads as sitting beneath the try-on. Injected
   by studio.js. Presentation only. RTL-friendly.
   ========================================================================== */
.qcard-followup {
  position: absolute; z-index: 3;
  inset-inline: 8px; bottom: 8px;
  display: flex; justify-content: center;
  pointer-events: none; /* only the button itself is interactive */
}
.qcard-followup__btn {
  pointer-events: auto;
  white-space: nowrap;
  /* Solid light pill with dark, bold text so it reads clearly against the
     try-on photo behind it (overrides the translucent .btn--outline look). */
  background: #fff;
  color: #0b0b0d;
  font-weight: 700;
  border: 1px solid rgba(11, 11, 13, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.qcard-followup__btn:hover {
  background: #fff;
  color: #0b0b0d;
  border-color: var(--brand);
}
/* Nudge the status caption up so it never overlaps the follow-up button. */
.qcard.is-result:has(.qcard-followup) .qcard__status { bottom: 44px; }

/* ==========================================================================
   Follow-up upload modal (UI STRUCTURE ONLY)
   Centered dialog: LEFT = the clicked card's current image, RIGHT = an upload
   drop-zone. Injected/toggled by studio.js. Presentation only. RTL-friendly.
   ========================================================================== */
.fu-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 10, 0.72);
  backdrop-filter: blur(6px);
}
.fu-modal-overlay.is-open { display: flex; animation: modalFade 0.18s ease both; }
/* ---- Length selection step (קצר / ארוך) --------------------------------- */
.ls-modal {
  position: relative;
  width: 420px; max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  padding: 26px 24px 24px;
  animation: modalPop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ls-modal__title {
  margin: 0 0 18px; text-align: center;
  font-size: 18px; font-weight: 700; color: var(--ink);
}
.ls-modal__options { display: flex; gap: 14px; }
.ls-modal__opt {
  flex: 1; padding: 16px 18px; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.05s;
}
.ls-modal__opt:hover { border-color: var(--brand-2); background: rgba(197, 160, 89, 0.12); }
.ls-modal__opt:active { transform: translateY(1px); }
.ls-modal__opt:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.ls-modal__opt.is-invalid { border-color: #e5484d; color: #e5484d; }
.ls-modal__error {
  margin: 16px 0 0; text-align: center;
  font-size: 14px; font-weight: 600; color: #e5484d;
}

.fu-modal {
  position: relative;
  width: 760px; max-width: 100%; max-height: 86vh;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: modalPop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.fu-modal__close {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
  width: 34px; height: 34px; line-height: 1;
  display: grid; place-items: center;
  border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font-size: 16px;
}
.fu-modal__close:hover { border-color: var(--brand-2); background: rgba(197, 160, 89, 0.14); }
/* Visible modal header — anchored to the top-right (start side in RTL). */
.fu-modal__title {
  margin: 0;
  padding: 16px 22px 12px;
  text-align: start;
  font-size: 18px; font-weight: 700; line-height: 1.3;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-inline-end: 58px; /* keep clear of the ✕ close button */
}
.fu-modal__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 22px;
}
.fu-modal__side {
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.fu-modal__side--image {
  border-radius: 14px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.fu-modal__img {
  width: 100%; height: 100%; max-height: 60vh;
  object-fit: contain; display: block;
}
.fu-modal__drop {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  padding: 24px; border-radius: 14px;
  border: 2px dashed var(--line); background: rgba(255, 255, 255, 0.02);
  color: var(--muted); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fu-modal__drop:hover { color: var(--ink); border-color: var(--brand-2); background: rgba(197, 160, 89, 0.1); }
.fu-modal__drop:focus-visible { outline: none; border-color: var(--brand-2); }
/* When the area holds the single upload button, drop the dashed frame/padding
   so the button reads as one clean control filling the whole area. */
.fu-modal__drop:has(.fu-modal__upload-btn) {
  border: none; padding: 0; background: transparent;
}
/* Single, professional upload button filling the drop area (idle state). */
.fu-modal__upload-btn {
  width: 100%; height: 100%; min-height: 120px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 18px 22px; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; line-height: 1.35;
  color: #111;
  background: var(--brand); /* gold */
  border: 1px solid var(--brand);
  transition: filter 0.15s, transform 0.05s, box-shadow 0.15s;
}
.fu-modal__upload-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.fu-modal__upload-btn:active { transform: translateY(1px); }
.fu-modal__upload-btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.fu-modal__drop-ico { font-size: 24px; color: var(--brand-2); }
.fu-modal__drop-t { font-size: 14px; font-weight: 500; color: var(--ink); }
.fu-modal__drop-s { font-size: 12px; color: var(--muted); }
/* Selected-file state: small preview + name inside the drop-zone. */
.fu-modal__drop.has-file { border-style: solid; border-color: var(--brand-2); }
.fu-modal__drop-thumb {
  max-width: 120px; max-height: 120px;
  border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line);
}
.fu-modal__drop-name {
  font-size: 12px; font-weight: 600; color: var(--ink);
  max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
/* The upload side stacks: drop-zone grows, combine button sits below it. */
.fu-modal__side--upload { flex-direction: column; gap: 14px; }
.fu-modal__side--upload .fu-modal__drop { flex: 1; }
/* "שילוב" combine button: light/transparent fill, GOLD border, BLACK text. */
.fu-modal__combine {
  align-self: stretch;
  padding: 11px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--brand); /* gold */
  color: #000; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.fu-modal__combine:hover:not(:disabled) {
  background: #fff;
  box-shadow: 0 6px 18px rgba(201, 168, 106, 0.35);
}
.fu-modal__combine:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 640px) {
  .fu-modal__body { grid-template-columns: 1fr; }
  .fu-modal__side { min-height: 200px; }
}

/* ==========================================================================
   Lightbox — full-view overlay for finished queue results
   Presentation only; injected/toggled by studio.js. RTL-friendly.
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 8vmin 7vmin;
  overflow: auto;
  background: rgba(6, 6, 10, 0.82);
  backdrop-filter: blur(4px);
  animation: resultIn 0.2s ease both;
}

/* ==========================================================================
   Lightbox "עריכה" (Edit/Crop) button + interactive Cropper overlay.
   Presentation only; DOM injected by studio.js. RTL-friendly.
   ========================================================================== */
.lightbox__edit {
  position: absolute; top: 16px; inset-inline-end: 70px; z-index: 10;
  pointer-events: auto;
  height: 42px; padding: 0 16px;
  border: 1px solid rgba(197, 160, 89, 0.6);
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.72);
  color: #e9d8b0; font: 600 14px/1 inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox__edit:hover { background: rgba(197, 160, 89, 0.9); color: #1a1a1a; transform: scale(1.04); }

.cropper {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  animation: resultIn 0.2s ease both;
}
.cropper[hidden] { display: none !important; }
.cropper__stage { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 76vh; }
.cropper__imgwrap { position: relative; display: inline-block; touch-action: none; cursor: crosshair; }
.cropper__img {
  display: block; max-width: 88vw; max-height: 76vh;
  border-radius: 8px; user-select: none; -webkit-user-drag: none;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.cropper__sel {
  position: absolute; box-sizing: border-box;
  border: 2px dashed #c5a059;
  background: rgba(197, 160, 89, 0.18);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.cropper__sel[hidden] { display: none; }
.cropper__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  padding: 12px 18px; border-radius: 14px;
  background: rgba(24, 24, 28, 0.9);
  border: 1px solid rgba(197, 160, 89, 0.35);
}
.cropper__hint { color: #cdbb92; font-size: 13px; margin-inline-end: 6px; }
.cropper__btn {
  height: 40px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 inherit; border: 1px solid transparent;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.cropper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cropper__btn--cancel { background: transparent; border-color: rgba(255,255,255,0.28); color: #e6e6e6; }
.cropper__btn--cancel:hover { background: rgba(255,255,255,0.1); }
.cropper__btn--done { background: rgba(197, 160, 89, 0.2); border-color: rgba(197,160,89,0.7); color: #efdcaf; }
.cropper__btn--done:not(:disabled):hover { background: rgba(197,160,89,0.4); transform: scale(1.04); }
.cropper__btn--update { background: #c5a059; color: #1a1a1a; }
.cropper__btn--update:not(:disabled):hover { background: #d8b76c; transform: scale(1.04); }

.lightbox[hidden] { display: none !important; }
.lightbox__stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-width: 82vw; max-height: 78vh;
}
.lightbox__img {
  display: block;
  max-width: 78vw; max-height: 74vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
/* Video preview: same framing rules as the image (the JS reuses .lightbox__img
   on the <video>), plus a sensible default width so portrait clips look right. */
video.lightbox__img { width: min(78vw, 420px); background: #000; }
/* Audio preview: a wide, elegant gold-tinted player centered on the stage. */
.lightbox__audio {
  width: min(86vw, 520px);
  padding: 22px;
  border-radius: 16px;
  background: rgba(18, 18, 20, 0.85);
  border: 1px solid rgba(197, 160, 89, 0.3);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.lightbox__close {
  position: fixed; top: 18px; inset-inline-end: 22px; z-index: 20;
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(11, 11, 13, 0.7); color: #fff;
  font-size: 18px; cursor: pointer; line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox__close:hover { background: #d9534f; transform: scale(1.06); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(11, 11, 13, 0.62); color: #fff;
  font-size: 30px; cursor: pointer; line-height: 1;
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox__nav:hover { background: rgba(197, 160, 89, 0.85); transform: translateY(-50%) scale(1.06); }
.lightbox__nav[hidden] { display: none !important; }
.lightbox__nav--prev { inset-inline-start: -8px; }
.lightbox__nav--next { inset-inline-end: -8px; }
@media (max-width: 560px) {
  .lightbox__nav--prev { inset-inline-start: 6px; }
  .lightbox__nav--next { inset-inline-end: 6px; }
}