/* Lenci Studio v3 — studio-ai (the AI assistants inside the Studio; v3/studio-ai/CONTRACT.md). Linked after studio.css; additive only:
   the Props section's assistant block, the ingredient tools card, the capture guide's cutout button, the results' rating control and
   popover, the Concepts sheet (#sai-concepts, built like #ext-sheet) and the Advanced panel's Platform pack block. Tokens from studio.css;
   logical properties for RTL. Nothing here restyles an existing control. */

/* ---- shared bits */
.sai-tools { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px dashed rgba(139,92,246,.38); border-radius: 12px; background: linear-gradient(180deg, rgba(139,92,246,.07), rgba(139,92,246,.02)); }
.sai-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sai-row .status { flex: 1 1 140px; min-width: 0; }
.sai-cost { font-family: var(--mono); font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.sai-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.sai-note.err { color: #fca5a5; }
.sai-head-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sai-head-row strong { font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
[dir="rtl"] .sai-head-row strong { letter-spacing: 0; text-transform: none; }
.sai-spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent-2); animation: saiSpin .8s linear infinite; vertical-align: -2px; margin-inline-end: 6px; }
@keyframes saiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sai-spin { animation: none; } }

/* ---- Props section: suggestions + custom props */
.sai-props .tiles.sai-sugg .tile span { white-space: normal; line-height: 1.25; font-size: 9px; }
.sai-box { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 8px; text-align: center; font-family: var(--display); font-size: 10px; font-weight: 600; color: var(--accent-2); background: repeating-linear-gradient(135deg, rgba(139,92,246,.12) 0 6px, rgba(139,92,246,.04) 6px 12px); border: 1.5px dashed rgba(217,70,239,.7); border-radius: 10px; }
.tile .sai-box { border-radius: 0; border-width: 0; outline: 1.5px dashed rgba(217,70,239,.7); outline-offset: -8px; }
.sai-chips .chip i { font-style: normal; margin-inline-start: 6px; opacity: .7; }
.sai-chips .chip:hover i { opacity: 1; color: #fff; }
.sai-custom-row { display: flex; gap: 6px; min-width: 0; }
.sai-custom-row input { flex: 1 1 120px; min-width: 0; background: #0b0b12; border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 10px; color: var(--ink); font-size: 12px; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.sai-custom-row input:focus { outline: none; border-color: rgba(139,92,246,.7); box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 3px rgba(139,92,246,.2); }
.sai-custom-row .ghost { flex: none; }
.sai-why { display: block; font-size: 10.5px; color: var(--dim); line-height: 1.35; margin-top: 2px; }

/* the custom prop on stage: a labelled dashed box (the engine marks the actor; the export never draws it) */
.actor.sai-custom .body.missing { outline: 1.5px dashed rgba(217,70,239,.85); outline-offset: -1px; border-radius: 6px; background: repeating-linear-gradient(135deg, rgba(139,92,246,.18) 0 8px, rgba(139,92,246,.06) 8px 16px); cursor: grab; }
.actor.sai-custom::after { content: attr(data-label); position: absolute; left: var(--tag-x, 50%); top: var(--tag-y, 0); transform: translate(-50%, -115%); z-index: 12; max-width: 160px; padding: 3px 9px; border-radius: 999px; font: 600 10px/1.4 var(--display); letter-spacing: .04em; color: #fff; background: rgba(10,10,15,.82); border: 1px solid rgba(217,70,239,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.stage.dragging .actor.sai-custom::after { opacity: .6; }

/* ---- Ingredient tools (inspector, subject = your ingredient) */
.sai-ing-name { font-family: var(--display); font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sai-ing-thumb { width: 36px; height: 36px; flex: none; border-radius: 8px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #2a2a36, #15151d); object-fit: contain; }
.sai-progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.sai-progress i { display: block; height: 100%; width: 0; background: var(--energy-h); transition: width .3s var(--ease); }

/* ---- Capture guide: the cutout buttons on a filled card. Centred by the wrapper (no translate on the button: .ghost:hover / [disabled]
   set their own transform), between the ✓ badge and the × button; "AI cutout", when offered, sits just above "Remove background". */
.sai-gcut-wrap { position: absolute; bottom: 8px; left: 0; right: 0; z-index: 4; margin-inline: auto; width: max-content; max-width: calc(100% - 72px); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.sai-gcut-wrap > button { pointer-events: auto; max-width: 100%; padding: 4px 9px; font-size: 9.5px; border-radius: 999px; background: rgba(10,10,15,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sai-gcut-wrap > button[disabled] { opacity: .6; }

/* ---- Results: the rating control */
.sai-result { position: relative; flex: none; }
.sai-result .result { display: block; }
.sai-rate { position: absolute; top: 4px; inset-inline-start: 4px; z-index: 3; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,15,.82); color: var(--gold); font-size: 12px; line-height: 20px; text-align: center; cursor: pointer; transition: transform var(--t) var(--ease), background var(--t); }
.sai-rate:hover { transform: scale(1.1); background: rgba(10,10,15,.95); }
.sai-rate[aria-pressed="true"] { background: var(--gold); color: #0a0a0f; border-color: transparent; font-family: var(--mono); font-size: 10px; font-weight: 600; }
.sai-rate-pop { position: fixed; z-index: 80; width: min(320px, calc(100vw - 24px)); padding: 12px 14px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, #16161f, #111118); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(139,92,246,.2); display: grid; gap: 8px; }
.sai-rate-pop h3 { margin: 0; font-family: var(--display); font-size: 13px; }
.sai-stars { display: flex; gap: 2px; direction: ltr; }
.sai-stars button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; transition: color var(--t), transform var(--t) var(--ease); }
.sai-stars button.on, .sai-stars button:hover, .sai-stars button:hover ~ button.hover { color: var(--gold); }
.sai-stars button:hover { transform: scale(1.12); }
.sai-rate-pop textarea { width: 100%; min-height: 48px; resize: vertical; background: #0b0b12; border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 12px; }
.sai-rate-pop textarea:focus { outline: none; border-color: rgba(139,92,246,.7); }
.sai-rate-pop .row .status { flex: 1 1 auto; }

/* ---- Concepts sheet (#sai-concepts) */
.sai-card { width: min(100%, 980px) !important; padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.sai-head { padding-inline-end: 36px; }
.sai-head h2 { margin: 0 0 4px; }
.sai-head .muted { margin: 0; font-size: 12.5px; }
.sai-kicker { display: inline-block; font: 600 9.5px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; padding: 4px 9px; border-radius: 999px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.35); margin-bottom: 8px; }
[dir="rtl"] .sai-kicker { letter-spacing: 0; text-transform: none; }
.sai-brief { display: grid; gap: 8px; }
.sai-brief textarea { min-height: 44px; }
.sai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: stretch; }
.sai-concept { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.sai-concept:hover { border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 1px rgba(168,85,247,.3), 0 10px 24px rgba(0,0,0,.4); }
.sai-concept.applied { border-color: transparent; box-shadow: 0 0 0 1.5px rgba(217,70,239,.7), 0 0 22px rgba(139,92,246,.35); }
.sai-concept h3 { margin: 0; font-family: var(--display); font-size: 14px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.sai-concept .sai-mood { font-size: 11.5px; color: var(--accent-2); }
.sai-concept .sai-badge { position: absolute; top: 10px; inset-inline-end: 10px; padding: 2px 8px; border-radius: 999px; font: 600 9px/1.5 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--energy); }
[dir="rtl"] .sai-concept .sai-badge { letter-spacing: 0; text-transform: none; }
.sai-kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 3px 8px; margin: 0; font-size: 11.5px; line-height: 1.4; }
.sai-kv dt { font-family: var(--display); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-top: 2px; }
[dir="rtl"] .sai-kv dt { letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.sai-kv dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.sai-concept .sai-caption { font-size: 11.5px; color: var(--ink); font-style: italic; overflow-wrap: anywhere; }
.sai-concept .sai-rationale { font-size: 11px; color: var(--dim); line-height: 1.4; overflow-wrap: anywhere; }
.sai-concept .sai-actions { margin-top: auto; padding-top: 6px; display: flex; gap: 6px; align-items: center; }
.sai-concept .sai-actions .primary { padding: 8px 14px; font-size: 11px; border-radius: 10px; letter-spacing: .05em; }
.sai-concept .sai-actions .primary::after { animation: none; opacity: .35; }
.sai-empty { grid-column: 1 / -1; padding: 22px 12px; text-align: center; font-size: 12.5px; color: var(--dim); border: 1px dashed var(--line-2); border-radius: 14px; }
.sai-skel { min-height: 170px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03)); background-size: 200% 100%; animation: saiShimmer 1.4s linear infinite; }
@keyframes saiShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sai-skel { animation: none; } }
@media (max-width: 700px) {
  #sai-concepts.modal { padding: 0; }
  #sai-concepts .sai-card { width: 100% !important; max-width: none; height: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; border: 0; padding: 18px 14px 14px; }
  .sai-cards { grid-template-columns: 1fr; }
}

/* ---- Advanced panel: the Platform pack block (a collapsed <details>, like "Use my own key") */
.sai-pack[open] { display: grid; gap: 8px; }
.sai-pack summary { cursor: pointer; }
.sai-pack-groups { display: grid; gap: 6px; }
.sai-pack-group { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.sai-pack-group > span { flex: none; width: 92px; padding-top: 5px; font-family: var(--display); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
[dir="rtl"] .sai-pack-group > span { letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.sai-pack-group .chips { flex: 1 1 0; min-width: 0; }
.sai-pack-ai em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.sai-pack .row .status { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .sai-pack-group { flex-direction: column; gap: 4px; } .sai-pack-group > span { width: auto; padding-top: 0; } }

/* ---- Companion assets: the Props section's "Your images on set" tiles and the Ingredients list toggle */
.sai-comp-block { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed rgba(139,92,246,.25); min-width: 0; }
.sai-comp-tile img { object-fit: contain; background: linear-gradient(180deg, #2a2a36, #15151d); }
.sai-comp-tile img.alpha { background: repeating-conic-gradient(rgba(255,255,255,.07) 0 25%, transparent 0 50%) 0 0 / 12px 12px, linear-gradient(180deg, #2a2a36, #15151d); }
.sai-comp-grid .tile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.sai-comp-add .sai-box { font-size: 22px; font-weight: 400; }
.sai-comp-flat .sai-note { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.ingredient .sai-comp { position: absolute; top: 29px; inset-inline-start: 0; z-index: 2; width: 15px; height: 15px; padding: 0; border: 0; border-start-end-radius: 6px; border-end-start-radius: 9px; background: rgba(10,10,15,.85); color: var(--muted); font-size: 10px; line-height: 15px; text-align: center; cursor: pointer; transition: opacity var(--t), background var(--t), color var(--t); }
.ingredient .sai-comp:hover { color: #fff; background: rgba(139,92,246,.85); }
.ingredient .sai-comp[aria-pressed="true"] { color: #fff; background: var(--energy); }
.ingredient[aria-pressed="true"] .sai-comp { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ingredient .sai-comp[aria-pressed="false"] { opacity: 0; }
  .ingredient:hover .sai-comp, .ingredient:focus-within .sai-comp { opacity: 1; }
}
.sai-opt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.sai-opt > .ghost { min-width: 0; }

/* ---- Top bar: on phones and tablets (the two-row header of studio.css, max-width 1100px) Concepts stays beside Inspire me in the actions
   row, so the brand row (account, apps, language) keeps its layout */
@media (max-width: 1100px) { .top-actions > #concepts { order: 3; } }

/* ---- Add to batch: the reason it is unavailable for a shot with your own images */
.sai-batch-note[hidden] { display: none; }