/* ============================================================
   NR SMM — экраны «Ролики» и студия ролика (SPEC-STUDIO.md FR-ST1…FR-ST12).
   Студия: сцена с предпросмотром, таймлайн с линией анимации, запрос и задание,
   справа — приложение. На телефоне — одной колонкой, таймлайн прокручивается в рамке.
   ============================================================ */

/* ---------- ролики ---------- */
.list-wrap { max-width: 68rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.drop { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 3rem 1.5rem; border-radius: var(--r-card);
  border: 1.5px dashed var(--border); background: var(--card); text-align: center; }
body.dragging .drop { border-color: var(--purple); }
.drop-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--purple-tint); color: var(--purple-text); font-size: 22px; }
.drop-phrase { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--heading); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.tile { position: relative; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--card-border); overflow: hidden; }
.tile-link { display: block; padding: .7rem .7rem .9rem; min-height: 44px; }
.tile-thumb { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: .8rem; overflow: hidden; background: var(--stage-bg); color: var(--dim); font-size: 22px; }
.tile-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tile-name { margin-top: .7rem; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2.6rem; }
.tile-meta { font-size: 12.5px; color: var(--dim); }
.tile-menu { position: absolute; right: .45rem; bottom: .55rem; }
@media (hover: hover) { .tile:hover { border-color: var(--purple-line); } }

/* ---------- студия ---------- */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "stage side" "tl side" "inputs side";
  grid-template-rows: auto auto 1fr; gap: 14px; padding: 14px 20px 28px; max-width: 1680px; margin: 0 auto; }
.ed-stage { grid-area: stage; position: relative; height: clamp(300px, calc(100dvh - 440px), 680px); min-height: 300px;
  display: grid; place-items: center; border-radius: var(--r-card); background: var(--stage-bg); overflow: hidden; }
.stage-box { display: grid; place-items: center; width: 100%; height: 100%; }
.stage-box nr-showcase { max-height: 100%; border-radius: 10px; overflow: hidden; }
.relink { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  padding: .7rem .8rem .7rem 1rem; border-radius: var(--r-item); background: var(--card); border: 1px solid var(--orange-line); color: var(--orange-text); font-size: 13.5px; }
.relink span { flex: 1 1 14rem; }
.ed-side { grid-area: side; align-self: start; position: sticky; top: 74px; max-height: calc(100dvh - 88px); overflow: auto; }
.ed-side .seg { margin-bottom: .2rem; }
.ed-inputs { grid-area: inputs; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }

/* запрос — как поле ввода Neuronium */
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 26px; background: var(--input-bg); border: 1px solid var(--input-border); }
.composer:focus-within { border-color: var(--purple-line); }
.composer-text { flex: 1; min-height: 40px; max-height: 136px; padding: 8px 0; border: 0; outline: none; resize: none; background: transparent; color: var(--text); font-size: 15px; line-height: 24px; }
.composer-text:focus-visible { outline: none; }
textarea.brief { min-height: 96px; line-height: 1.5; }

/* секунды каждого действия */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 12px; border-radius: var(--r-pill); background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); }
.chip:focus-within { border-color: var(--purple); }
.chip-l { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.chip-in { width: 3.6em; min-height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: var(--input-bg); color: var(--heading);
  font-weight: 700; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.chip-in.auto { color: var(--dim); font-weight: 600; }
.chip-s { font-size: 12px; color: var(--dim); }

/* ---------- таймлайн ---------- */
.ed-tl { grid-area: tl; border-radius: var(--r-card); background: var(--tl-bg); border: 1px solid var(--card-border); min-width: 0; }
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; }
.tl-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--dim); min-width: 8.5rem; }
.tl-ins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }
.tin-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.tin { width: 5.2rem; min-height: 36px; padding: 0 8px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--heading); font-variant-numeric: tabular-nums; font-size: 13px; text-align: center; }
.tin-arrow { color: var(--dim); }
.tl-zoom { display: flex; align-items: center; gap: 2px; }
.tl-body { display: grid; grid-template-columns: 100px minmax(0, 1fr); }
/* подписи дорожек слева — на тех же высотах, что дорожки (FR-ST5 Ред. 1) */
.tl-heads { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.lane-h { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0 4px 0 12px; font-size: 12px; font-weight: 650;
  color: var(--dim); overflow: hidden; }
.lane-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-ruler { height: 22px; } .lh-video { height: 56px; } .lh-audio { height: 38px; } .lh-html { height: 40px; color: var(--purple-text); }
.lh-text { height: 26px; align-items: flex-start; padding-top: 4px; }
.lane-btn { width: 36px; height: 36px; font-size: 12px; }
.lh-text .lane-btn { margin-top: -6px; }
.tl-scroll { position: relative; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; scrollbar-width: thin; touch-action: pan-x; }
.tl-inner { position: relative; height: 220px; min-width: 100%; user-select: none; -webkit-user-select: none; touch-action: none; }
.tl-ruler { position: absolute; left: 0; right: 0; top: 0; height: 20px; }
.tick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 10.5px; color: var(--tl-tick); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tick::after { content: ''; position: absolute; left: 50%; top: 15px; width: 1px; height: 5px; background: var(--tl-tick); }
.lane { position: absolute; left: 0; right: 0; }
.lane::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--clip-w, 100%); border-radius: 8px; background: var(--tl-track); }
/* видео */
.tl-clip { top: 22px; height: 52px; }
.tl-strip { position: absolute; top: 0; height: 52px; border-radius: 8px; pointer-events: none; }
.tl-shade { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tl-shade); border-radius: 8px 0 0 8px; pointer-events: none; }
.tl-after { position: absolute; top: 0; bottom: 0; border-radius: 0 8px 8px 0; display: flex; align-items: center; padding-left: 10px; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--tl-hatch) 0 6px, transparent 6px 12px); color: var(--dim); font-size: 11px; white-space: nowrap; }
/* звук ролика */
.tl-audio { top: 78px; height: 34px; --wave: var(--wave-color); }
.tl-audio.muted { --wave: var(--wave-muted); }
.tl-wave { position: absolute; top: 0; height: 34px; pointer-events: none; }
.lane-note { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--dim); pointer-events: none; }
.tl-audio[data-state="ready"] .lane-note { display: none; }
/* ручки полос (надписи) */
.tl-h { position: absolute; top: -4px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; cursor: ew-resize; z-index: 2; }
.tl-h i { width: 12px; height: 30px; border-radius: 6px; background: var(--btn-bg); box-shadow: var(--shadow-handle); border: 2px solid var(--purple); }
.tl-h:focus-visible { outline: none; }
.tl-h:focus-visible i { outline: 2px solid var(--purple); outline-offset: 2px; }
/* HTML — один элемент на всё видео (FR-ST21) */
.tl-htmltrack { top: 116px; height: 36px; }
.tl-htmltrack::before { display: none; }
.tl-html { position: absolute; top: 4px; height: 28px; border-radius: 8px; border: 1px dashed var(--purple-line); background: var(--html-strip);
  display: flex; align-items: center; gap: 8px; padding: 0 10px; overflow: hidden; color: var(--body2); font-size: 11.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer; text-align: left; }
.tl-html[data-state="built"] { border-style: solid; background: var(--seg-work); color: var(--heading); }
.tl-html[data-state="stale"] { border-color: var(--orange-line); }
.tl-html[data-state="error"] { border-color: var(--red-line); }
.tl-html[data-state="building"] { background-image: var(--shimmer); background-size: 250% 100%; animation: shimmer 3s ease infinite; color: var(--on-accent); }
.tl-html-l { overflow: hidden; text-overflow: ellipsis; }
.tl-html-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
.tl-html[data-state="stale"] .tl-html-dot { background: var(--orange); }
.tl-html[data-state="error"] .tl-html-dot { background: var(--red-text); }
.tl-html:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.tl-head { position: absolute; top: 18px; bottom: 0; width: 0; pointer-events: none; z-index: 3; }
.tl-head::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--tl-head); border-radius: 1px; }
.tl-head i { position: absolute; left: -6px; top: -4px; width: 12px; height: 12px; border-radius: 3px; background: var(--tl-head); transform: rotate(45deg); }

/* ---------- HTML: шаблон, поля, промт (FR-ST22, FR-ST23) ---------- */
.html-card .fld:first-child { margin-top: 0; }
/* вкладки карточки справа: HTML и обложка (FR-ST28) */
.side-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: .9rem; border-radius: var(--r-pill); background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); }
.side-tab { flex: 1; min-height: 40px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--dim); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.side-tab[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); }
@media (hover: hover) { .side-tab:hover:not([aria-selected="true"]) { color: var(--heading); } }
/* обложка (FR-ST28) */
.cover-prompt { min-height: 150px; line-height: 1.5; font-size: 14px; }
.cover-note { margin: .6rem 0 0; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.cover-row { display: flex; gap: 8px; margin-top: .9rem; }
.cover-row .btn { flex: 1; }
.cover-row .btn.busy { background: var(--grad); color: var(--on-accent); border-color: transparent; }
.cover-status { margin: .7rem 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.cover-status.ok { color: var(--green-text); }
.cover-status.warn { color: var(--orange-text); }
.cover-status.error { color: var(--red-text); }
.cover-status.busy { color: var(--purple-text); }
.cover-out { margin: .9rem 0 0; display: grid; gap: 8px; justify-items: start; }
.cover-frame { position: relative; width: min(100%, 240px); aspect-ratio: var(--cover-ar, 2 / 3); border-radius: 14px; overflow: hidden; background: var(--input-bg);
  border: 1px solid var(--input-border); display: grid; place-items: center; }
.cover-out[data-state="busy"] .cover-frame { background-image: var(--shimmer); background-size: 250% 100%; animation: shimmer 3s ease infinite; }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-empty { font-size: 12px; color: var(--dim); padding: 0 1rem; text-align: center; }
.tpl-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; }
.tpl-row .fld { flex: 1 1 12rem; margin-top: 0; }
.tpl-select, .cover-tpl-select { width: 100%; min-height: 44px; padding: 0 .7rem; border-radius: var(--r-input); background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); font-size: 14px; }
.vars { margin-top: .3rem; }
/* параметр шаблона (FR-ST22, FR-ST27): имя, вид, значение */
.param { margin-top: .8rem; }
.param-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: .35rem; }
.param-name { font-size: 13px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
/* одно окно параметра: текст или картинка — кнопка картинки справа или перетащить файл (FR-ST22, FR-ST27) */
.param-box { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.param-box .var-in { flex: 1; min-width: 0; }
.param-box .img-pick { flex: none; }
.param.drop-on .param-box .var-in, .param.drop-on .img-param { border-color: var(--purple); outline: 2px dashed var(--purple); outline-offset: 2px; }
.param .fld-hint { display: block; margin-top: .3rem; font-size: 11.5px; color: var(--dim); }
.var-in { width: 100%; min-height: 44px; }
.img-param { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.img-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); }
.img-note { font-size: 12px; color: var(--dim); }

textarea.html-prompt { min-height: 190px; line-height: 1.5; font-size: 14px; }
.build-row { display: flex; gap: 8px; margin-top: .9rem; }
.build-row .btn { flex: 1; }
.build-row .btn.busy { background: var(--grad); color: var(--on-accent); border-color: transparent; }
.html-status { margin: .7rem 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.html-status.ok { color: var(--green-text); }
.html-status.warn { color: var(--orange-text); }
.html-status.error { color: var(--red-text); }
.html-status.busy { color: var(--purple-text); }
.ed-inputs { grid-template-columns: minmax(0, 1fr); }

/* ---------- надписи (FR-ST18) ---------- */
.texts-card { grid-column: 1 / -1; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.card-row .h3-line { margin: 0; }
.empty-line { margin: .2rem 0 0; color: var(--dim); font-size: 13.5px; }
.tx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0 .2rem; }
.tx-tab { min-height: 36px; max-width: 14rem; padding: 0 .9rem; border-radius: var(--r-pill); border: 1px solid var(--ctrl-border); background: var(--ctrl-bg);
  color: var(--dim); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-tab[aria-selected="true"] { color: var(--heading); border-color: var(--purple); background: var(--purple-tint); }
.tx-form { display: grid; gap: .1rem; }
.tx-text { font-size: 15px; }
.font-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.font-pill { min-height: 40px; padding: 0 .85rem; border-radius: 12px; border: 1px solid var(--ctrl-border); background: var(--ctrl-bg); color: var(--text);
  font-size: 15px; cursor: pointer; }
.font-pill[aria-pressed="true"] { border-color: var(--purple); background: var(--purple-tint); color: var(--heading); }
.rng-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
.rng-wrap { display: flex; align-items: center; gap: .7rem; min-height: 44px; }
.rng { flex: 1; min-width: 0; height: 44px; accent-color: var(--purple); cursor: pointer; }
.rng-out { min-width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--heading); font-weight: 700; }
.swatches { display: flex; gap: 8px; min-height: 44px; align-items: center; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ctrl-border); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-tint); }
.sw-white { background: var(--sw-white); } .sw-black { background: var(--sw-black); } .sw-violet { background: var(--sw-violet); }
.sw-orange { background: var(--sw-orange); } .sw-gradient { background: var(--sw-gradient); }
.tx-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: .8rem; }
.tx-times .btn { margin-left: auto; }
/* рамка надписи на сцене: тянуть — двигать, угол — размер */
.tx-edit { position: absolute; z-index: 2; pointer-events: none; }
.tx-box { position: absolute; pointer-events: auto; cursor: move; border-radius: 4px; outline: 1px dashed transparent; touch-action: none; }
@media (hover: hover) { .tx-box:hover { outline-color: var(--tx-hover); } }
.tx-box.on { outline: 1.5px dashed var(--tx-line); }
.tx-box.ghost { opacity: .5; }
.tx-box:focus-visible { outline: 2px solid var(--purple); }
.tx-corner { position: absolute; width: 22px; height: 22px; display: none; cursor: nwse-resize; }
.tx-corner::after { content: ''; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 3px; background: var(--sw-white); border: 2px solid var(--tx-line); }
.tx-box.on .tx-corner { display: block; }
.c-nw { left: -11px; top: -11px; } .c-ne { right: -11px; top: -11px; cursor: nesw-resize; }
.c-sw { left: -11px; bottom: -11px; cursor: nesw-resize; } .c-se { right: -11px; bottom: -11px; }
/* полосы надписей на таймлайне */
.tl-texts { position: absolute; left: 0; right: 0; top: 0; }
.tl-tx { position: absolute; height: 22px; border-radius: 6px; background: var(--purple-tint); border: 1px solid var(--purple-line); color: var(--purple-text);
  font-size: 11px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; cursor: grab; }
.tl-tx.on { background: var(--purple-line); color: var(--heading); }
.tl-tx i { margin-right: 2px; font-size: 10px; }
.tl-h-tx i { width: 10px; height: 18px; border-radius: 5px; }

@media (max-width: 1100px) {
  .ed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "tl" "inputs" "side"; grid-template-rows: none; }
  .ed-side { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .list-wrap { padding: 1.2rem 16px 3rem; }
  .drop { padding: 2.2rem 1rem; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .ed { padding: 10px 16px 24px; gap: 12px; }
  .ed-stage { height: min(56vh, 520px); }
  .ed-inputs { grid-template-columns: minmax(0, 1fr); }
  .rng-row { grid-template-columns: minmax(0, 1fr); }
  .tl-bar { padding: 6px 8px; }
  .tl-body { grid-template-columns: 74px minmax(0, 1fr); }
  .lane-h { padding-left: 6px; font-size: 10.5px; }

  .tl-ins { margin-left: 0; width: 100%; }
  .tl-time { min-width: 0; }
  .card { padding: 1rem; }
}