/*
 * RemotionEditorView styles — Slava-restraint skin
 *
 * All rules scoped under body.app-slava-restraint.
 * Token substitutions (spec → actual):
 *   --sr-bg-base    → --sr-canvas        (true black)
 *   --sr-bg-chrome  → --sr-glass         (translucent dark glass for header)
 *   --sr-bg-deep    → --sr-glass-strong  (darkest glass for timeline tray)
 *   --sr-text-primary → --sr-ink         (primary type)
 *   --sr-text-muted   → --sr-ink-meta    (metadata / secondary)
 *   --sr-edge-soft    → --sr-edge        (low-alpha hairline)
 * --sr-edge-strong and --sr-accent exist verbatim.
 */

body.app-slava-restraint .remotion-editor-view {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: 48px 1fr 320px;
  grid-template-areas:
    "header header"
    "player panel"
    "timeline panel";
  background: var(--sr-canvas);
  color: var(--sr-ink);
  z-index: 50;
}

body.app-slava-restraint .remotion-editor-view__header { grid-area: header; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--sr-edge-strong); background: var(--sr-glass); }
body.app-slava-restraint .remotion-editor-view__player { grid-area: player; }
body.app-slava-restraint .remotion-editor-view__timeline { grid-area: timeline; }
body.app-slava-restraint .remotion-editor-view__panel { grid-area: panel; border-left: 1px solid var(--sr-edge-strong); background: var(--sr-glass-strong); overflow: auto; }

body.app-slava-restraint .remotion-editor-view__back {
  background: none;
  border: 1px solid var(--sr-edge);
  color: var(--sr-ink);
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
}

body.app-slava-restraint .remotion-editor-view__back:hover {
  border-color: var(--sr-accent);
}

body.app-slava-restraint .remotion-editor-view__title {
  flex: 1;
  font-weight: 500;
}

body.app-slava-restraint .remotion-editor-view__meta {
  color: var(--sr-ink-meta);
  font-size: 12px;
}

body.app-slava-restraint .remotion-editor-view__player {
  background: var(--sr-canvas);
  display: grid;
  place-items: center;
  /* Clip so the Remotion Player (width:100%, maxWidth:1280) can't overflow the
     player row and push the timeline off-screen. */
  overflow: hidden;
  min-height: 0;
}

/* ── PlayerOverlay + SelectionBox ──────────────────────────────────────────── */

body.app-slava-restraint .remotion-editor-view__player-frame {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
}

body.app-slava-restraint .remotion-player-overlay {
  position: absolute;
  inset: 0;
  /* Visually transparent; receives pointer events so click-to-select works
     even when the click would otherwise hit a layer's DOM directly. */
  background: transparent;
}

body.app-slava-restraint .remotion-selection-box {
  position: fixed;
  border: 1px solid var(--sr-accent);
  /* The box itself shouldn't block clicks; only its handles should (added in 2.3.b/c). */
  pointer-events: none;
}

body.app-slava-restraint .remotion-selection-box--secondary {
  border-style: dashed;
}

body.app-slava-restraint .remotion-selection-guide {
  position: fixed;
  background: var(--sr-accent);
  opacity: 0.85;
  pointer-events: none;
  z-index: 5;
}

body.app-slava-restraint .remotion-selection-box__body {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: grab;
}

body.app-slava-restraint .remotion-selection-box__body:active {
  cursor: grabbing;
}

body.app-slava-restraint .remotion-selection-box__handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--sr-accent);
  background: var(--sr-canvas);
  box-shadow: 0 0 0 1px var(--sr-canvas);
  pointer-events: auto;
  z-index: 2;
}

body.app-slava-restraint .remotion-selection-box__handle--corner-tl {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}

body.app-slava-restraint .remotion-selection-box__handle--corner-tr {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: nesw-resize;
}

body.app-slava-restraint .remotion-selection-box__handle--corner-bl {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}

body.app-slava-restraint .remotion-selection-box__handle--corner-br {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}

body.app-slava-restraint .remotion-selection-box__handle--edge-top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: ns-resize;
}

body.app-slava-restraint .remotion-selection-box__handle--edge-right {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  cursor: ew-resize;
}

body.app-slava-restraint .remotion-selection-box__handle--edge-bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: ns-resize;
}

body.app-slava-restraint .remotion-selection-box__handle--edge-left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

body.app-slava-restraint .remotion-selection-box__rotation-handle {
  position: absolute;
  top: -32px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid var(--sr-accent);
  border-radius: 999px;
  background: var(--sr-canvas);
  box-shadow: 0 0 0 1px var(--sr-canvas);
  cursor: grab;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
}

body.app-slava-restraint .remotion-selection-box__rotation-handle:active {
  cursor: grabbing;
}

body.app-slava-restraint .remotion-selection-box__rotation-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -21px;
  width: 1px;
  height: 20px;
  background: var(--sr-accent);
  transform: translateX(-50%);
}

body.app-slava-restraint .remotion-editor-view__timeline {
  border-top: 1px solid var(--sr-edge-strong);
  background: var(--sr-glass-strong);
  /* Let the xzdarcy timeline (height:100%) fill the tray exactly.
     overflow:auto caused a nested scroll that competed with the editor grid. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app-slava-restraint .remotion-editor-view__empty-state {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  padding: 40px;
  color: var(--sr-ink-meta);
}

/* ── RemotionNode card ──────────────────────────────────────────────────────── */

body.app-slava-restraint .remotion-node {
  width: 220px;
  padding: 10px 14px 12px;
  background: var(--sr-glass);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-node, 6px);
  color: var(--sr-ink);
  font-size: 13px;
  cursor: default;
}

body.app-slava-restraint .remotion-node--selected {
  border-color: var(--sr-accent);
}

body.app-slava-restraint .remotion-node__title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

body.app-slava-restraint .remotion-node__summary {
  color: var(--sr-ink-meta);
  font-size: 11px;
  margin-bottom: 8px;
}

body.app-slava-restraint .remotion-node__open {
  display: block;
  width: 100%;
  padding: 5px 0;
  background: none;
  border: 1px solid var(--sr-edge);
  border-radius: 2px;
  color: var(--sr-ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
}

body.app-slava-restraint .remotion-node__open:hover {
  border-color: var(--sr-accent);
  color: var(--sr-accent);
}

/* ── RemotionEditorToolbar ──────────────────────────────────────────────────── */

body.app-slava-restraint .remotion-editor-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

body.app-slava-restraint .remotion-editor-toolbar__group {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-left: 4px;
  border-left: 1px solid var(--sr-edge);
}

body.app-slava-restraint .remotion-editor-toolbar__add,
body.app-slava-restraint .remotion-editor-toolbar__delete,
body.app-slava-restraint .remotion-editor-toolbar__record,
body.app-slava-restraint .remotion-editor-toolbar__zorder {
  background: none;
  border: 1px solid var(--sr-edge);
  color: var(--sr-ink);
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

body.app-slava-restraint .remotion-editor-toolbar__add:hover {
  border-color: var(--sr-accent);
}

body.app-slava-restraint .remotion-editor-toolbar__delete:not(:disabled):hover {
  border-color: var(--sr-accent);
}

body.app-slava-restraint .remotion-editor-toolbar__zorder:not(:disabled):hover {
  border-color: var(--sr-accent);
}

body.app-slava-restraint .remotion-editor-toolbar__delete:disabled,
body.app-slava-restraint .remotion-editor-toolbar__zorder:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

body.app-slava-restraint .remotion-editor-toolbar__record:hover {
  border-color: var(--sr-accent);
}

body.app-slava-restraint .remotion-editor-toolbar__record--active {
  border-color: #ff4d5e;
  color: #ff4d5e;
}

/* ── RemotionPropertiesPanel ────────────────────────────────────────────────── */

body.app-slava-restraint .remotion-properties-panel {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
}

body.app-slava-restraint .remotion-properties-panel--empty {
  color: var(--sr-ink-meta);
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
}

body.app-slava-restraint .remotion-properties-panel__hint {
  font-size: 11px;
  margin-top: 4px;
}

body.app-slava-restraint .remotion-properties-panel__header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sr-edge);
}

body.app-slava-restraint .remotion-properties-panel__type {
  font-weight: 600;
  color: var(--sr-ink);
}

body.app-slava-restraint .remotion-properties-panel__id {
  color: var(--sr-ink-meta);
  font-family: monospace;
}

body.app-slava-restraint .remotion-properties-panel__section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sr-ink-meta);
  margin: 0 0 6px 0;
}

body.app-slava-restraint .remotion-properties-panel__section label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

body.app-slava-restraint .remotion-properties-panel__section input,
body.app-slava-restraint .remotion-properties-panel__section textarea {
  background: var(--sr-canvas);
  border: 1px solid var(--sr-edge);
  color: var(--sr-ink);
  padding: 4px 8px;
  border-radius: 2px;
  font: inherit;
  font-size: 12px;
}

body.app-slava-restraint .remotion-properties-panel__section input:focus,
body.app-slava-restraint .remotion-properties-panel__section textarea:focus {
  outline: none;
  border-color: var(--sr-accent);
}

body.app-slava-restraint .remotion-properties-panel__field-label {
  display: block;
  margin-bottom: 4px;
  color: var(--sr-ink-meta);
  font-size: 11px;
}

body.app-slava-restraint .remotion-properties-panel__anchor {
  margin-top: 4px;
}

body.app-slava-restraint .remotion-properties-panel__anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, 18px);
  gap: 4px;
}

body.app-slava-restraint .remotion-properties-panel__anchor-button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--sr-edge);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

body.app-slava-restraint .remotion-properties-panel__anchor-button:hover,
body.app-slava-restraint .remotion-properties-panel__anchor-button[data-active="true"] {
  border-color: var(--sr-accent);
  background: var(--sr-accent);
}

body.app-slava-restraint .remotion-properties-panel__keyframes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.app-slava-restraint .remotion-properties-panel__keyframe-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--sr-edge);
}

body.app-slava-restraint .remotion-properties-panel__keyframe-prop {
  color: var(--sr-ink);
  font-family: monospace;
  font-size: 11px;
}

body.app-slava-restraint .remotion-properties-panel__keyframe-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 6px;
  align-items: end;
}

body.app-slava-restraint .remotion-properties-panel__keyframe-row label {
  margin-bottom: 0;
}

body.app-slava-restraint .remotion-properties-panel__keyframe-vector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

body.app-slava-restraint .remotion-properties-panel__keyframe-delete {
  background: none;
  border: 1px solid var(--sr-edge);
  color: var(--sr-ink);
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

body.app-slava-restraint .remotion-properties-panel__keyframe-delete:hover {
  border-color: var(--sr-accent);
}
