/* ==========================================================================
   properties.css — Center preview window chrome and the right-hand
   properties panel. Actual property controls (sliders, color pickers,
   animation pickers) are added in a later feature pass.
   ========================================================================== */

/* ---- Preview canvas ------------------------------------------------------------ */
.preview-area__canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 24px;
}

.preview-canvas {
  position: relative;
  /* Fallback size for before JS sets a precise pixel box (see Templates.js
     fitPreviewCanvas) — CSS alone can't reliably resolve aspect-ratio +
     flex auto-sizing + container-type:size together across browsers. */
  width: min(100%, 960px);
  max-width: 100%;
  max-height: 100%;
  background: #000;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated), 0 0 0 1px var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  container-type: size; /* lets text layers size themselves in cqh (% of canvas height) */
}

/* Pivot Point editing aid — DOM-only overlay in the live preview, never
   part of the composited frame the export renderer draws, so it can never
   show up in an exported video. */
.pivot-indicator {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 30;
  color: #ffcc00;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.85));
}

.preview-canvas__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  text-align: center;
}
.preview-canvas__placeholder p {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  margin-top: 4px;
}
.preview-canvas__placeholder span {
  font-size: 11.5px;
}

/* ---- Preview layers (one per active video track, stacked front-most on top) ---- */
.preview-layer {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.preview-layer__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  transition: clip-path 0.1s ease, transform 0.1s ease;
}

.preview-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 4%;
  box-sizing: border-box;
  pointer-events: none;
  font-family: var(--font-display);
  line-height: 1.25;
}
.preview-text__box {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.15em 0.45em;
  border-radius: 0.15em;
  transition: transform 0.1s ease, background 0.15s ease;
}

/* ---- Preview transport bar ------------------------------------------------------- */
.preview-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  color: var(--text-secondary);
  width: 120px;
}

/* ---- Properties panel base ---------------------------------------------------------- */
.properties .panel-header {
  border-bottom: 1px solid var(--border-subtle);
}

.properties .empty-state {
  flex: 1;
}

/* Reserved structural classes for the upcoming properties feature pass:
   .prop-group, .prop-row, .prop-label, .prop-field, .color-swatch-input,
   .animation-picker — intentionally unstyled until that module is built. */

/* Custom properties and media panel styles */
.prop-section {
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.prop-section h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.prop-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}
.prop-section__header h3 {
  margin-bottom: 0;
}
.prop-section__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prop-section__chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.prop-section.is-collapsed .prop-section__chevron {
  transform: rotate(-90deg);
}
.prop-section.is-collapsed .prop-section__header {
  margin-bottom: 0;
}
.prop-section.is-collapsed .prop-section__body {
  display: none;
}
.keyframe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.keyframe-row:last-child {
  margin-bottom: 0;
}
.keyframe-row.is-current {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
}
.keyframe-row__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.keyframe-row__badge {
  font-family: var(--font-sans, inherit);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
}
.keyframe-row.is-current .keyframe-row__time {
  color: var(--text-primary);
  font-weight: 600;
}
.keyframe-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prop-section__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated-2);
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.prop-section__remove:hover {
  background: color-mix(in srgb, #ff4d4d 18%, var(--bg-elevated-2));
  border-color: #ff4d4d;
  color: #ff4d4d;
}

/* "+ Add Property" — Unity Inspector's "Add Component" equivalent */
.prop-add {
  position: relative;
  padding: 16px;
}
.prop-add__toggle {
  width: 100%;
  justify-content: center;
}
.prop-add__menu {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 100%;
  margin-top: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: 6px;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.prop-add__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.prop-add__item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.prop-add__empty {
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin: 0;
}

/* Unity-Inspector-style numeric field — drag to scrub, click to type */
.scrub-input {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  width: 64px;
  text-align: right;
  outline: none;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.15s ease;
}
.scrub-input:hover {
  border-color: var(--border-strong);
}
.scrub-input:focus {
  border-color: var(--accent-primary);
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.scrub-input.is-scrubbing {
  border-color: var(--accent-primary);
}
.scrub-input__suffix {
  font-size: 11px;
  color: var(--text-tertiary);
  width: 14px;
  flex-shrink: 0;
}
.prop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.prop-row:last-child {
  margin-bottom: 0;
}
.prop-label {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 0 0 80px;
}
.prop-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prop-input {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease;
}
.prop-input:focus {
  border-color: var(--accent-primary);
}
.prop-val {
  font-size: 11px;
  color: var(--text-secondary);
  width: 44px;
  text-align: right;
  font-family: var(--font-mono);
}
.preset-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.preset-btn {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}
.preset-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.preset-btn.is-active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

/* Media list grid styling */
.media-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.media-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.media-item:hover {
  background: var(--bg-elevated-2);
  border-color: var(--border-strong);
}
.media-item.is-selected {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
}
.media-item__thumbnail {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.media-item__thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.media-item__title {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.media-item.is-selected .media-item__title {
  color: var(--text-primary);
  font-weight: 500;
}

/* Effects panel — one-click animation preset grid */
.effects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
}
.effect-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  transition: all 0.15s ease;
}
.effect-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.effect-btn:active {
  background: var(--accent-primary-soft);
  border-color: var(--accent-primary);
}
.effect-btn.is-active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

/* Aspect ratio preset buttons (Templates panel) — two-line label: ratio + platform. */
.aspect-btn__ratio {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.aspect-btn__label {
  display: block;
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.effect-btn.is-active .aspect-btn__label {
  color: var(--text-on-accent);
  opacity: 0.85;
}