/* Video editor — full-app layout. Uses the site's design tokens (tools.css). */

.ve-app {
  --ve-toolbar-h: 52px;
  --ve-timeline-h: 220px;
  --ve-panel-w: 240px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  min-height: 520px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Toolbar */
.ve-toolbar {
  height: var(--ve-toolbar-h);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ve-tb-group { display: flex; align-items: center; gap: 8px; }
.ve-tb-center { flex: 1; justify-content: center; }
.ve-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; color: var(--fg-muted); min-width: 150px; text-align: center; }

.ve-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .86rem;
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
  transition: background .15s, border-color .15s, transform .1s;
}
.ve-btn:hover:not(:disabled) { border-color: var(--primary); }
.ve-btn:active:not(:disabled) { transform: translateY(1px); }
.ve-btn:disabled { opacity: .45; cursor: not-allowed; }
.ve-btn.ve-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-color: transparent; }
.ve-btn.ve-ghost { background: transparent; }
.ve-icon {
  width: 40px; height: 40px; border-radius: var(--r-full); cursor: pointer;
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
  display: inline-grid; place-items: center; font-size: 1rem;
}
.ve-icon:disabled { opacity: .45; cursor: not-allowed; }
.ve-icon-sm {
  cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
}
.ve-icon-sm:disabled { opacity: .45; cursor: not-allowed; }
.ve-inline { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--fg-muted); margin: 0; }
.ve-select { width: auto; padding: 6px 8px; font-size: .82rem; }

/* Middle row */
.ve-middle { flex: 1; display: flex; min-height: 0; }
.ve-panel {
  width: var(--ve-panel-w); flex: 0 0 var(--ve-panel-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--border);
}
.ve-panel.ve-props { border-right: 0; border-left: 1px solid var(--border); }
.ve-panel-head {
  flex: 0 0 auto; padding: 10px 14px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
}
.ve-media-list, .ve-props-body { flex: 1; overflow-y: auto; padding: 12px; }
.ve-empty { color: var(--fg-muted); font-size: .85rem; line-height: 1.5; margin: 0; }

/* Stage / preview */
.ve-stage {
  flex: 1; min-width: 0; position: relative;
  display: grid; place-items: center; padding: 20px;
  background:
    linear-gradient(45deg, rgba(127,127,127,.06) 25%, transparent 25%, transparent 75%, rgba(127,127,127,.06) 75%),
    linear-gradient(45deg, rgba(127,127,127,.06) 25%, transparent 25%, transparent 75%, rgba(127,127,127,.06) 75%);
  background-size: 24px 24px; background-position: 0 0, 12px 12px;
}
.ve-canvas-wrap { max-width: 100%; max-height: 100%; box-shadow: var(--sh-lg); border-radius: 4px; overflow: hidden; line-height: 0; display: none; }
.ve-canvas-wrap.on { display: block; }
#preview { display: block; max-width: 100%; max-height: 100%; background: #000; }

.ve-stage-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; }
.ve-stage-empty.off { display: none; }
.ve-stage-empty-inner { max-width: 360px; }
.ve-logo-mark { font-size: 2.4rem; margin-bottom: 10px; }
.ve-stage-empty h2 { font-size: 1.15rem; margin: 0 0 6px; }
.ve-stage-empty p { color: var(--fg-muted); font-size: .9rem; margin: 0 0 16px; }

/* Timeline */
.ve-timeline {
  height: var(--ve-timeline-h); flex: 0 0 auto;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-top: 1px solid var(--border);
}
.ve-tl-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ve-tl-zoom { margin-left: auto; display: inline-flex; gap: 4px; }
.ve-tl-scroll { flex: 1; overflow: auto; position: relative; }
.ve-tl-inner { position: relative; min-width: 100%; min-height: 100%; }
.ve-tl-ruler { height: 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-2); z-index: 2; }
.ve-tl-tracks { position: relative; padding: 8px 0; min-height: 120px; }
.ve-tl-hint { padding: 20px 14px; }
.ve-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); left: 0; pointer-events: none; z-index: 3; }

/* Overlay (compat / progress) */
.ve-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); display: grid; place-items: center; z-index: 20; padding: 20px; }
.ve-overlay[hidden] { display: none; }
.ve-overlay-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 22px 26px; max-width: 440px; text-align: center; }
.ve-overlay-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.ve-overlay-card p { color: var(--fg-muted); font-size: .92rem; margin: 0 0 8px; }

/* Narrow screens: the editor is desktop-first. */
@media (max-width: 820px) {
  .ve-app { height: auto; }
  .ve-panel { display: none; }
  .ve-middle { flex-direction: column; }
  .ve-stage { min-height: 240px; }
}

/* Media asset rows */
.ve-asset { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 8px; }
.ve-asset-ico { font-size: 1.1rem; }
.ve-asset-meta { display: flex; flex-direction: column; min-width: 0; }
.ve-asset-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-asset-sub { font-size: .72rem; color: var(--fg-muted); text-transform: capitalize; }
.ve-asset-del { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: var(--r-md); border: 1px solid transparent; background: none; color: var(--fg-muted); font-size: .8rem; cursor: pointer; display: grid; place-items: center; }
.ve-asset-del:hover { background: color-mix(in srgb, #e5484d 16%, transparent); border-color: color-mix(in srgb, #e5484d 40%, transparent); color: #e5484d; }
.ve-stage.ve-drop { outline: 2px dashed var(--primary); outline-offset: -8px; }

/* Timeline ruler ticks */
.ve-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); }
.ve-tick span { position: absolute; left: 4px; top: 3px; font-size: .66rem; color: var(--fg-muted); font-family: ui-monospace, monospace; }

/* Timeline tracks + clips */
.ve-track { position: relative; height: 48px; margin: 6px 0; }
.ve-track-audio { height: 36px; }
.ve-clip {
  position: absolute; top: 2px; bottom: 2px; border-radius: 6px; cursor: pointer;
  overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  box-shadow: var(--sh-sm);
}
.ve-clip-audio { background: linear-gradient(180deg, #2a9d8f, #21867a); }
.ve-clip-image { background: linear-gradient(180deg, #e76f51, #c85a3e); }
.ve-clip.sel { outline: 2px solid #fff; outline-offset: -1px; }
.ve-clip-label { position: absolute; left: 5px; top: 4px; max-width: calc(100% - 20px); font-size: .72rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); background: rgba(0,0,0,.4); padding: 1px 6px; border-radius: 5px; }

/* Properties fields */
.ve-field { padding: 8px 0; border-bottom: 1px solid var(--border); }
.ve-field-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); margin-bottom: 2px; }
.ve-field-val { font-size: .88rem; }

/* Status toast + export progress */
.ve-status { position: absolute; left: 50%; bottom: calc(var(--ve-timeline-h) + 12px); transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 7px 16px; font-size: .82rem; box-shadow: var(--sh-md); z-index: 15; }
.ve-bar { height: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; margin: 12px 0 6px; }
.ve-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .2s; }

/* Clip drag + trim affordances */
.ve-clip { cursor: grab; }
.ve-tl-tracks.dragging .ve-clip { cursor: grabbing; }
.ve-clip .ve-clip-label { pointer-events: none; }
.ve-trim { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; }
.ve-trim-l { left: 0; }
.ve-trim-r { right: 0; }
.ve-clip.sel .ve-trim::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 3px; width: 3px; height: 40%; border-radius: 2px; background: rgba(255,255,255,.85); }
.ve-clip.sel .ve-trim-r::after { left: auto; right: 3px; }

/* Properties editors (text / shape) */
.ve-prop { display: block; margin: 0 0 12px; }
.ve-prop-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); margin-bottom: 4px; }
.ve-prop-ctl { width: 100%; }
textarea.ve-prop-ctl { resize: vertical; min-height: 44px; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--fg); }
.ve-prop input[type=color] { height: 34px; padding: 2px; }
.ve-prop input[type=range] { accent-color: var(--primary); }
.ve-prop input[type=checkbox] { width: auto; }
.ve-prop-btn { width: 100%; margin: -4px 0 12px; font-size: .8rem; padding: 7px; }
.ve-clip-text { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.ve-clip-shape { background: linear-gradient(180deg, #f4a261, #e07a3e); }
.ve-track-overlay { height: 40px; }

.ve-prop-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); }

.ve-clip-audio, .ve-clip-video { background-color: #21867a; }
.ve-clip-video { background-color: #3b3564; }
.ve-clip { background-repeat: no-repeat; }

/* On-canvas selection + resize handles for overlay layers */
.ve-edit-layer { position: absolute; inset: 0; z-index: 5; touch-action: none; }
.ve-sel-box { position: absolute; border: 1.5px solid var(--primary); box-shadow: 0 0 0 1px rgba(0,0,0,.35); cursor: move; box-sizing: border-box; }
.ve-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 1.5px solid var(--primary); border-radius: 2px; }
.ve-h-nw { left: 0; top: 0; transform: translate(-50%,-50%); cursor: nwse-resize; }
.ve-h-ne { right: 0; top: 0; transform: translate(50%,-50%); cursor: nesw-resize; }
.ve-h-sw { left: 0; bottom: 0; transform: translate(-50%,50%); cursor: nesw-resize; }
.ve-h-se { right: 0; bottom: 0; transform: translate(50%,50%); cursor: nwse-resize; }