/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Подэкран «Ролики» (#modules-reels): список просмотров по статусам, карточка с плеером, шкалой меток, комментариями и кнопками.
   Подключён в index.html после modules.css; значения — только из tokens.css, размеры в rem. Плитки и чипы — из kit.
   Классы rl-player … rl-note принадлежат плееру (modules-reels-player.js), остальные rl-* — экрану (modules-reels.js). */

/* ---------- Плитка «Ролики» на экране «Модули» ---------- */
/* Растянутая ссылка плитки не должна перекрывать кнопки и списки внутри неё. */
.am-mod--link .am-banner__acts, .am-mod--link .pl-list { position: relative; }

/* ---------- Каркас ---------- */
.rl-screen { min-width: 0; }
.rl-body { display: grid; gap: var(--tile-gap); align-content: start; min-width: 0; }
.rl-card-wrap { display: grid; gap: var(--tile-gap); min-width: 0; }

/* ---------- Список по статусам ---------- */
.rl-group { display: grid; gap: var(--space-4); min-width: 0; }
.rl-group__h { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.rl-group__n { color: var(--color-ink3); font-weight: var(--weight-regular); }
.rl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .rl-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } }
.rl-li { min-width: 0; }
.rl-item {
  display: grid; gap: var(--space-2); width: 100%; min-height: var(--size-touch-min); padding: var(--space-4); box-sizing: border-box;
  text-align: start; cursor: pointer; background: var(--surface-inner); border: 1px solid var(--color-line); border-radius: var(--inner-radius);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.rl-item:hover { background: var(--surface-inner-hover); border-color: var(--color-line2); }
.rl-item__t { font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); overflow-wrap: anywhere; }
.rl-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rl-item__meta .caption { color: var(--color-ink2); }

/* ---------- Карточка ролика ---------- */
.rl-card { display: grid; gap: var(--space-5); min-width: 0; }
.rl-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rl-card__t { margin: 0; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.rl-card__player, .rl-card__side { min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
.rl-card__lbl { margin: 0; }
@media (min-width: 64rem) {
  .rl-card { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; }
  .rl-card__head { grid-column: 1 / -1; }
}

/* ---------- Плеер ---------- */
.rl-player { display: grid; gap: var(--space-3); min-width: 0; }
.rl-video {
  display: block; margin-inline: auto; width: auto; max-width: 100%; height: min(70vh, 40rem); aspect-ratio: 9 / 16;
  object-fit: contain; background: var(--color-bg2); border-radius: var(--inner-radius);
}
.rl-note { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-note[hidden], .rl-lead[hidden] { display: none; }
.rl-note[data-tone="ok"] { color: var(--color-ok-text); }
.rl-note[data-tone="danger"] { color: var(--color-danger-text); }

/* Шкала меток: полоса под видео, метка стоит по left (проценты ставит скрипт), высота — минимальный размер касания. */
.rl-timeline { position: relative; height: var(--size-touch-min); border-radius: var(--radius-pill); background: var(--color-panel2); }
.rl-timeline[hidden] { display: none; }
.rl-timeline::before { content: ''; position: absolute; inset-inline: 0; top: 50%; height: var(--space-1); transform: translateY(-50%); border-radius: var(--radius-pill); background: var(--color-line2); }
.rl-marker {
  position: absolute; top: 0; width: var(--size-touch-min); max-width: 20%; height: 100%; margin: 0; padding: 0;
  transform: translateX(-50%); background: transparent; border: 0; cursor: pointer;
}
.rl-marker::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--space-3); height: var(--space-3); transform: translate(-50%, -50%);
  border-radius: var(--radius-round); background: var(--color-warn); border: 1px solid var(--color-bg);
}
.rl-marker--done::before { background: var(--color-ok); }
.rl-marker:hover::before { transform: translate(-50%, -50%) scale(1.4); }

/* Форма комментария к месту в видео */
.rl-comment-form { display: grid; gap: var(--space-2); }
.rl-comment-input {
  width: 100%; min-height: calc(var(--size-control) * 2); padding: var(--space-3) var(--space-4); box-sizing: border-box; resize: vertical;
  background: var(--color-panel2); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-md);
}
.rl-comment-btn {
  justify-self: start; min-height: var(--size-touch-min); padding: 0 var(--space-6); cursor: pointer;
  background: transparent; color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-pill);
  font: var(--text-button-weight) var(--text-button-size)/var(--text-button-line) var(--text-button-family);
}
.rl-comment-btn:hover:not(:disabled) { border-color: var(--color-ink); background: var(--color-panel2); }
.rl-comment-btn:disabled { color: var(--color-ink3); cursor: not-allowed; }
@media (max-width: 30rem) { .rl-comment-btn { justify-self: stretch; } }

/* ---------- Комментарии ---------- */
.rl-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rl-c__b {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); width: 100%; box-sizing: border-box; text-align: start;
  padding: var(--space-3) var(--space-4); background: var(--surface-inner); border: 1px solid var(--color-line); border-radius: var(--inner-radius);
}
.rl-c__seek { min-height: var(--size-touch-min); cursor: pointer; }
.rl-c__seek:hover { background: var(--surface-inner-hover); border-color: var(--color-line2); }
.rl-c__time { color: var(--color-acc-text); white-space: nowrap; }
.rl-c__text { overflow-wrap: anywhere; }
.rl-c__st { grid-column: 2; color: var(--color-ink2); }
.rl-c--done .rl-c__text { color: var(--color-ink2); text-decoration: line-through; }
.rl-c--old .rl-c__b { opacity: .7; }
.rl-empty { margin: 0; color: var(--color-ink2); }

/* ---------- Кнопки и статус лида ---------- */
.rl-actions { display: grid; gap: var(--space-3); }
.rl-actions__n { margin: 0; color: var(--color-ink2); }
.rl-actions__b { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rl-actions__b .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 30rem) { .rl-actions__b { flex-direction: column; } .rl-actions__b .btn { width: 100%; } }
.rl-lead { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rl-lead .ui-chip { max-width: 100%; white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .rl-item, .rl-marker::before { transition: none; }
  .rl-marker:hover::before { transform: translate(-50%, -50%); }
}