/* Video panel (dock tab) and floating picture window. */
.vid-panel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.vid-main { display: flex; gap: 16px; padding: 0 12px; align-items: flex-start; min-width: 0; }
.vid-stage { position: relative; background: #0b0d12; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; width: min(48vw, 520px); max-height: 30vh; flex: none; display: flex; align-items: center; justify-content: center; }
.vid-el { width: 100%; height: 100%; object-fit: contain; display: block; background: #0b0d12; }
.vid-gap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8f97ab; background: repeating-linear-gradient(135deg, #0f121a 0 10px, #12161f 10px 20px); font-size: 12px; }
.vid-gap[hidden] { display: none; }
.vid-placeholder { font-size: 12px; text-align: center; padding: 12px; }
.vid-stage.vid-placeholder { color: #8f97ab; }
.vid-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.vid-side h5 { margin-top: 10px; }
.vid-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-tc { font-family: var(--mono); font-size: 12px; color: var(--amber); margin-top: 2px; }
.vid-offset { width: 110px; font-family: var(--mono); }
.vid-nudges, .vid-actions { margin-top: 6px; gap: 6px; }
.vid-panel .btn.small { padding: 4px 9px; font-size: 12px; }
.vid-strip { display: block; width: 100%; height: 56px; cursor: pointer; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0e1118; }

.vid-drop { margin: 6px 12px 14px; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--radius); display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vid-drop.over { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 6%, transparent); }
.vid-place { gap: 6px; cursor: pointer; }
.vid-place input { accent-color: var(--amber); }
.vid-busy { display: flex; align-items: center; gap: 10px; }
.vid-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--amber); animation: vid-spin .9s linear infinite; flex: none; }
@keyframes vid-spin { to { transform: rotate(360deg); } }

.vid-float { position: fixed; z-index: 60; width: 420px; min-width: 220px; max-width: 90vw; resize: horizontal; overflow: hidden; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 14px 40px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k))); }
.vid-float-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; cursor: grab; user-select: none; touch-action: none; border-bottom: 1px solid var(--line); }
.vid-float-head:active { cursor: grabbing; }
.vid-float-title { flex: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-float .vid-stage { width: 100%; max-height: none; border: 0; border-radius: 0; }

@media (max-width: 720px) {
  .vid-main { flex-direction: column; }
  .vid-stage { width: 100%; }
}